.tr-root{ position:fixed; inset:0; z-index:9000; pointer-events:none; font-family:var(--font-b); transition:opacity .28s ease }
.tr-root[hidden]{ display:none }
.tr-root.tr-hide{ opacity:0 }
.tr-root *{ box-sizing:border-box }


.tr-spot{
  position:fixed; left:50%; top:50%; width:0; height:0; border-radius:6px; pointer-events:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 85%, transparent), 0 0 24px color-mix(in srgb, var(--acc) 30%, transparent);
  transition:opacity .3s ease;
}

.tr-root.tr-anim .tr-spot, .tr-root.tr-anim .tr-blk{
  transition:left .38s cubic-bezier(.2,.8,.2,1), top .38s cubic-bezier(.2,.8,.2,1),
             width .38s cubic-bezier(.2,.8,.2,1), height .38s cubic-bezier(.2,.8,.2,1),
             opacity .3s ease, background-color .3s ease;
}

.tr-spot.tr-none{ opacity:0 }

.tr-spot.tr-tap::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); animation:trPulse 1.6s ease-out infinite;
}
@keyframes trPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent) }
  100%{ box-shadow:0 0 0 14px color-mix(in srgb, var(--acc) 0%, transparent) } }
.tr-blk{ position:fixed; pointer-events:auto; background:rgba(6,7,12,.72); transition:background-color .3s ease }

.tr-blk.tr-cap{ background:transparent }

.tr-root.tr-clear .tr-spot{ opacity:0 }
.tr-root.tr-clear .tr-blk{ background-color:transparent }


body.tr-look #buildDrawer .panel-scroll *{ pointer-events:none !important }
body.tr-look #buildDrawer .panel-scroll .tr-look-ok{ pointer-events:auto !important; overscroll-behavior:contain }


.tr-bub{
  position:fixed; left:0; top:0; width:360px; max-width:calc(100vw - 24px); pointer-events:auto;
  background:var(--card); color:var(--text); border:1px solid var(--line-2); border-radius:18px;
  padding:16px 18px 14px; box-shadow:0 22px 60px rgba(0,0,0,.55);
  opacity:0; transform:translateY(8px);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.tr-root.tr-anim .tr-bub{
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), left .38s cubic-bezier(.2,.8,.2,1), top .38s cubic-bezier(.2,.8,.2,1);
}
.tr-bub.tr-in{ opacity:1; transform:none }
.tr-bub[hidden]{ display:none }
.tr-step{ font:600 11px/1 var(--font-m); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 8px }
.tr-bub h4{ margin:0 0 6px; font:500 16px/1.3 var(--font-d); letter-spacing:-.02em; color:var(--text) }
.tr-bub p{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); text-wrap:pretty }
.tr-bub p + p{ margin-top:6px }
.tr-bub p b{ color:var(--text); font-weight:600 }
.tr-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap }
.tr-row .tr-go{ margin-left:auto }

.tr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px;
  border-radius:999px; border:1px solid transparent; font:600 14.5px/1 var(--font-b); cursor:pointer;
  background:var(--acc); color:var(--acc-ink); white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
}
.tr-btn:hover{ background:var(--acc-hov) }
.tr-btn.tr-ghost{ background:transparent; color:var(--text); border-color:var(--line-2) }
.tr-btn.tr-ghost:hover{ border-color:var(--text) }
.tr-btn[disabled]{ opacity:.45; cursor:default }

.tr-skip{
  min-height:44px; padding:0 4px; border:none; background:none; cursor:pointer;
  font:500 13px/1 var(--font-b); color:var(--faint); text-decoration:underline; text-underline-offset:3px;
}
.tr-skip:hover{ color:var(--text) }
.tr-btn:focus-visible, .tr-skip:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }


.tr-card{
  position:fixed; left:50%; top:50%; width:min(470px, calc(100vw - 32px)); pointer-events:auto;
  background:var(--card); color:var(--text); border:1px solid var(--line-2); border-radius:22px;
  padding:26px 26px 22px; box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:translate(-50%, -46%) scale(.98); opacity:0;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.tr-card.tr-in{ opacity:1; transform:translate(-50%, -50%) }
.tr-card[hidden]{ display:none }
.tr-card h3{ margin:0 0 10px; font:500 21px/1.25 var(--font-d); letter-spacing:-.02em }
.tr-card p{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); text-wrap:pretty }
.tr-card p + p{ margin-top:8px }
.tr-card a{ color:var(--acc) }

.tr-card .tr-row{ margin-top:22px; justify-content:flex-start }
.tr-card .tr-row .tr-go{ margin-left:0 }

.tr-btn.tr-run{ position:relative; z-index:1; background:var(--card); transition:transform .34s cubic-bezier(.3,1.5,.5,1) }
.tr-card .tr-step{ margin-bottom:10px }
.tr-card p.tr-note{ margin-top:12px; font-size:13px; color:var(--faint) }

.tr-card p.tr-gift{ margin:0 0 10px; color:var(--text); font-weight:600 }
.tr-card video{ display:block; width:100%; margin-top:14px; border-radius:12px; background:#000 }
.tr-soon{
  margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--card-2);
  font-size:13.5px; line-height:1.5; color:var(--muted);
}
.tr-card p.tr-hint{ margin-top:10px; font-size:14px; color:var(--text) }


.tr-card.tr-side{
  left:auto; right:16px; top:12px; width:min(360px, calc(100vw - 32px)); max-height:calc(100vh - 24px); overflow:auto;
  padding:22px 20px 18px; transform:translateX(18px); box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.tr-card.tr-side.tr-in{ transform:none }
.tr-card.tr-side h3{ font-size:19px }
.tr-card.tr-side p{ font-size:14px }
.tr-card.tr-side .tr-row{ margin-top:18px; gap:8px }


.tr-gal{ position:fixed; left:0; top:0; width:0; height:0; pointer-events:none }
.tr-gal .tr-cell{ position:fixed; display:flex; align-items:center; justify-content:center }
.tr-gal img{
  display:block; max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.5);
  transform-origin:0 0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}


.tr-sheet{
  position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; pointer-events:auto;
  background:var(--card); color:var(--text);
  padding:calc(16px + env(safe-area-inset-top, 0px)) 16px calc(10px + env(safe-area-inset-bottom, 0px));
  opacity:0; transform:translateY(14px); transition:opacity .28s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.tr-sheet.tr-in{ opacity:1; transform:none }
.tr-sheet[hidden]{ display:none }
.tr-sheet:focus{ outline:none }
.tr-sheet h4{ margin:0 0 6px; font:500 18px/1.3 var(--font-d); letter-spacing:-.02em; color:var(--text) }
.tr-sh-txt p{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); text-wrap:pretty }
.tr-sh-txt p + p{ margin-top:6px }
.tr-sh-txt p b{ color:var(--text); font-weight:600 }
.tr-sh-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  margin-top:12px; border-radius:14px; background:var(--card-2); border:1px solid var(--line-2);
}
.tr-sh-text{ white-space:pre-wrap; overflow-wrap:anywhere; padding:14px 16px 18px; font-size:16px; line-height:1.55; color:var(--text) }
.tr-sh-grid{ display:grid; gap:10px; padding:10px }
.tr-sh-g2{ grid-template-columns:1fr 1fr }
.tr-sh-g3{ grid-template-columns:repeat(3, 1fr); gap:6px; padding:6px }
.tr-sh-cell img{ display:block; width:100%; height:auto; border-radius:10px; background:rgba(255,255,255,.04) }
.tr-sh-g3 .tr-sh-cell img{ aspect-ratio:1; object-fit:cover; border-radius:8px }
.tr-sheet .tr-row{ flex:none; margin-top:10px }


@media (min-width:1001px){
  .tr-bub.tr-wide{ width:600px }
}


@media (max-width:1000px){
  .tr-bub{ width:auto; max-width:none; border-radius:20px; padding:14px 16px 10px }
  .tr-bub h4{ font-size:15.5px }
  .tr-bub p{ font-size:14px }
  .tr-row{ margin-top:10px }
  .tr-card{ padding:22px 20px 18px }
  .tr-card h3{ font-size:19px }
  
  .tr-card.tr-side{
    left:12px; right:12px; top:calc(8px + env(safe-area-inset-top, 0px)); width:auto; padding:14px 16px 12px;
    border-radius:18px; transform:translateY(-14px);
  }
  .tr-card.tr-side.tr-in{ transform:none }
  .tr-card.tr-side .tr-full{ display:none }
  .tr-card.tr-side .tr-step{ margin-bottom:6px }
  .tr-card.tr-side h3{ font-size:16.5px; margin-bottom:4px }
  .tr-card.tr-side p.tr-hint{ margin-top:4px; font-size:13.5px; color:var(--muted) }
  .tr-card.tr-side .tr-row{ margin-top:10px }
  .tr-card.tr-side .tr-row .tr-btn{ flex:1 1 auto; padding:0 14px }
}

@media (prefers-reduced-motion: reduce){
  .tr-spot, .tr-bub, .tr-card, .tr-run, .tr-gal img, .tr-sheet{ transition-duration:.01s !important }
  .tr-spot.tr-tap::after{ animation:none }
}
.tr-bub:focus{ outline:none }