.tv-hero{
  --bg:#050706;
  --bg-soft:#0c110d;
  --ink:#f0f1e8;
  --muted:#7c837b;
  --signal:#d8ff52;
  --signal-rgb:216,255,82;
  --glass:rgba(12,16,13,.66);
  --hairline:rgba(229,235,218,.19);
  --ease:cubic-bezier(.22,.77,.21,1);
}

*{box-sizing:border-box}
html{width:100%;height:100%;margin:0}
body{width:100%;min-height:100%;height:auto;margin:0}
button,a{color:inherit}
button{font:inherit}
.tv-hero{
  position:sticky;
  top:0;
  z-index:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue","Noto Sans TC",Arial,sans-serif;
  transition:background 1.3s var(--ease),color 1.3s var(--ease);
}

.experience{
  position:relative;
  width:100%;
  height:100%;
  min-height:560px;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 65% 42%,rgba(62,77,44,.2),transparent 35%),
    linear-gradient(135deg,#0b0e0b 0%,#050605 64%,#020302 100%);
  transition:background 1.4s var(--ease);
}

#scene,#signals{position:absolute;inset:0;width:100%;height:100%;display:block}
#scene{z-index:1;cursor:crosshair;touch-action:none}
#scene:active{cursor:crosshair}
#signals{z-index:3;pointer-events:none}

.scene-loader{
  position:absolute;
  z-index:5;
  left:62%;
  top:51%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 14px;
  border:1px solid var(--hairline);
  background:rgba(5,7,6,.68);
  color:var(--ink);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  transition:opacity .5s var(--ease),visibility .5s;
  pointer-events:none;
}
.scene-loader__orbit{position:relative;width:30px;height:30px;border:1px solid rgba(var(--signal-rgb),.28);border-radius:50%;animation:scene-loader-turn 2.2s linear infinite}
.scene-loader__orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.7)}
.scene-loader__orbit i:first-child{left:1px;top:4px}.scene-loader__orbit i:last-child{right:0;bottom:5px}
.scene-loader p{display:grid;gap:4px;margin:0}.scene-loader b{font-size:7px;letter-spacing:.14em}.scene-loader span{color:var(--muted);font-size:6px;letter-spacing:.08em}
.tv-hero.is-ready .scene-loader{opacity:0;visibility:hidden}
.tv-hero.has-load-error .scene-loader{border-color:rgba(228,156,133,.5)}
@keyframes scene-loader-turn{to{transform:rotate(360deg)}}

.atmosphere{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 68% 45%,transparent 0 18%,rgba(0,0,0,.18) 56%,rgba(0,0,0,.72) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.013) 0 1px,transparent 1px 4px);
  transition:opacity 1.3s var(--ease),background 1.3s var(--ease);
}

.atmosphere::after{
  content:"";
  position:absolute;
  inset:-40%;
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  animation:grain .35s steps(2) infinite;
}

.topbar{
  position:absolute;
  z-index:7;
  inset:0 0 auto;
  height:78px;
  padding:0 30px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--hairline);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.identity{display:flex;align-items:center;gap:12px;text-decoration:none;width:max-content}
.seal{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  font:14px/1 "Noto Serif TC",serif;
}
.wordmark,.coordinate,.edition,.gesture,.mode-button,.kicker,.observation,.tracker,.micro-label,.load-state,.credits{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
.wordmark{font-size:10px;letter-spacing:.18em}
.coordinate{margin:0;color:var(--muted);font-size:8px;letter-spacing:.12em}
.topbar-tools{justify-self:end;display:flex;align-items:center;gap:8px}
.mode-switch{display:flex;align-items:center;gap:5px;padding:4px;border:1px solid var(--hairline);border-radius:99px;background:rgba(6,8,7,.4)}
.language-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--hairline);border-radius:99px;background:rgba(6,8,7,.4)}
.language-switch button{min-width:22px;padding:6px 5px;border:0;border-radius:99px;background:transparent;color:var(--muted);font:8px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.04em;cursor:pointer}
.language-switch button.is-active{background:rgba(var(--signal-rgb),.12);color:var(--signal)}
.mode-button{
  appearance:none;
  border:0;
  border-radius:99px;
  padding:8px 11px;
  background:transparent;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.09em;
  cursor:pointer;
  transition:.4s var(--ease);
}
.mode-button i{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:currentColor}
.mode-button.is-active{background:rgba(var(--signal-rgb),.12);color:var(--signal)}

.hero{
  position:absolute;
  z-index:6;
  top:19%;
  left:clamp(28px,5.4vw,82px);
  width:min(680px,52vw);
  pointer-events:none;
}
.creator-line{margin:0 0 13px;color:rgba(240,241,232,.64);font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:7px;letter-spacing:.12em}
.kicker{margin:0 0 24px;color:var(--muted);font-size:8px;letter-spacing:.15em}
.kicker span{color:var(--signal)}
h1{margin:0;font-size:clamp(54px,6.7vw,106px);font-weight:300;line-height:.84;letter-spacing:-.075em}
h1 span{display:inline-block}
h1 em{display:inline-block;color:transparent;-webkit-text-stroke:1px rgba(240,241,232,.64);font-style:normal}
.intro-copy{margin:31px 0 0;color:#9ba198;font-size:11px;line-height:2;letter-spacing:.07em}
.observation-index{margin:18px 0 0;color:rgba(225,238,191,.72);font:7px/1.8 "SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:.07em;max-width:680px}
.hero-primary{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:23px;
  padding:11px 14px;
  border:1px solid rgba(var(--signal-rgb),.5);
  background:rgba(5,7,6,.48);
  color:var(--ink);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:8px;
  letter-spacing:.13em;
  text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.hero-primary:hover,.hero-primary:focus-visible{background:var(--signal);color:#11150d;transform:translateY(-2px);outline:0}
.hero-primary span{color:var(--signal)}.hero-primary:hover span,.hero-primary:focus-visible span{color:inherit}

.tracker{
  --tracker-size:78px;
  --flicker-duration:1.92s;
  --flicker-delay:0s;
  position:absolute;
  z-index:5;
  width:var(--tracker-size);
  height:var(--tracker-size);
  transform:translate(-50%,-50%);
  pointer-events:none;
  border:1px solid rgba(var(--signal-rgb),.22);
  background:linear-gradient(135deg,rgba(var(--signal-rgb),.06),transparent 62%);
  box-shadow:inset 0 0 22px rgba(var(--signal-rgb),.025);
  transition:opacity .35s,background 1.2s,border-color 1.2s;
  will-change:opacity,filter;
  animation:tracker-flicker var(--flicker-duration) steps(1,end) var(--flicker-delay) infinite;
}
[data-track="leaf"]{--flicker-duration:2.16s;--flicker-delay:-.73s}
[data-track="ceramic"]{--flicker-duration:1.74s;--flicker-delay:-1.18s}
[data-track="steam"]{--flicker-duration:2.38s;--flicker-delay:-.41s}
.tracker-small{--tracker-size:58px}
.tracker-wide{width:106px;height:92px}
.tracker-tiny{--tracker-size:42px}
.tracker b{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  white-space:nowrap;
  color:rgba(225,238,191,.78);
  font-size:7px;
  font-weight:400;
  letter-spacing:.06em;
  animation:readout-flicker 2.64s steps(1,end) -.86s infinite;
}
.corner{
  position:absolute;
  width:10px;
  height:10px;
  border-color:var(--signal);
  border-style:solid;
  animation:corner-flicker 1.28s steps(1,end) infinite;
}
.corner-a{left:-2px;top:-2px;border-width:1px 0 0 1px}
.corner-b{right:-2px;top:-2px;border-width:1px 1px 0 0;animation-delay:-.31s}
.corner-c{right:-2px;bottom:-2px;border-width:0 1px 1px 0;animation-delay:-.67s}
.corner-d{left:-2px;bottom:-2px;border-width:0 0 1px 1px;animation-delay:-.94s}

.nav-trackers{
  position:absolute;
  z-index:6;
  left:clamp(300px,27vw,420px);
  bottom:74px;
  display:flex;
  flex-direction:row;
  gap:8px;
}
.nav-tracker{
  position:relative;
  display:block;
  width:116px;
  height:32px;
  padding:0;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  border:1px solid rgba(var(--signal-rgb),.32);
  background:linear-gradient(135deg,rgba(var(--signal-rgb),.08),transparent 62%);
  box-shadow:inset 0 0 22px rgba(var(--signal-rgb),.03);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
a.nav-tracker:hover,a.nav-tracker:focus-visible,
details.nav-tracker summary:hover,details.nav-tracker[open] summary{
  border-color:var(--signal);
  background:linear-gradient(135deg,rgba(var(--signal-rgb),.18),transparent 62%);
}
a.nav-tracker:hover{transform:scale(1.05)}
.nav-tracker:focus-visible{outline:1px solid var(--signal);outline-offset:3px}
.nav-tracker .corner{animation:none}
.nav-tracker b{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:0 10px;
  white-space:nowrap;
  color:rgba(225,238,191,.86);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:7px;
  font-weight:400;
  letter-spacing:.06em;
}
details.nav-tracker{border:0;background:none;box-shadow:none}
details.nav-tracker summary{
  position:relative;
  display:block;
  width:116px;
  height:32px;
  list-style:none;
  cursor:pointer;
  border:1px solid rgba(var(--signal-rgb),.32);
  background:linear-gradient(135deg,rgba(var(--signal-rgb),.08),transparent 62%);
  box-shadow:inset 0 0 22px rgba(var(--signal-rgb),.03);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
details.nav-tracker summary::-webkit-details-marker{display:none}
details.nav-tracker .about-panel{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  width:236px;
  margin:0;
  padding:14px 16px;
  border:1px solid var(--hairline);
  background:rgba(6,9,7,.9);
  color:#aeb5aa;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  line-height:1.8;
  letter-spacing:.03em;
}

.observation{
  position:absolute;
  z-index:6;
  right:clamp(24px,5vw,74px);
  bottom:12%;
  width:min(332px,29vw);
  padding:19px 20px 17px;
  border:1px solid var(--hairline);
  border-radius:17px;
  background:var(--glass);
  box-shadow:0 30px 100px rgba(0,0,0,.3);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  transition:background 1.2s var(--ease),border-color 1.2s var(--ease),color 1.2s var(--ease);
}
.observation-head{display:flex;justify-content:space-between;color:#aab0a5;font-size:8px;letter-spacing:.12em}
.observation-note{margin:9px 0 0;color:#6f796d;font-size:6px;letter-spacing:.13em}
.live{color:var(--signal)}
.live i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:pulse 1.4s ease-in-out infinite}
.temperature{display:flex;align-items:flex-start;margin:18px 0 14px}
.temperature strong{font:300 60px/.8 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.08em}
.temperature sup{margin:2px 0 0 9px;color:var(--signal);font-size:11px}
.temperature-rule{height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.temperature-rule i{display:block;width:82%;height:100%;background:linear-gradient(90deg,#66793a,var(--signal));box-shadow:0 0 12px rgba(var(--signal-rgb),.38)}
.metrics-line{margin:16px 0 0;color:#dfe2d9;font-size:7px;line-height:1.7;letter-spacing:.035em;white-space:nowrap}
.metrics-line span{color:#727c70;font-size:6px;letter-spacing:.08em}
.metrics-line b{font-weight:400}

.micro-label{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#768074;
  pointer-events:none;
  font-size:7px;
  letter-spacing:.07em;
}
.micro-label span{color:var(--signal)}
.micro-label i{
  width:56px;
  height:1px;
  margin-top:5px;
  background:var(--hairline);
  animation:line-dropout 2.08s steps(1,end) -.52s infinite;
}
.micro-label span,.micro-label b{animation:readout-flicker 2.42s steps(1,end) -1.21s infinite}
.micro-label b{font-weight:400;line-height:1.55}
.label-steam{top:28%;right:18%}
.label-leaf{bottom:23%;left:42%}

.footer{
  position:absolute;
  z-index:7;
  inset:auto 0 0;
  min-height:62px;
  padding:0 30px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-top:1px solid var(--hairline);
  color:#6b736a;
  font-size:7px;
  letter-spacing:.1em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.load-state{display:flex;align-items:center;gap:9px;color:#a6ada2}
.load-state i{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.72);animation:pulse 1.2s ease-in-out infinite}
.load-state.is-ready i{background:#73806d;box-shadow:none;animation:none}
.load-state.has-error{color:#e49c85}
.load-state.has-error i{background:#e49c85;animation:none}
.gesture{margin:0}.gesture span{color:#a8afa4}
.credits{position:relative;justify-self:end;text-align:right}
.credits summary{list-style:none;cursor:pointer}
.credits summary::-webkit-details-marker{display:none}
.credits p{
  position:absolute;
  right:0;
  bottom:24px;
  width:280px;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--hairline);
  background:rgba(6,9,7,.9);
  color:#aeb5aa;
  line-height:1.7;
  letter-spacing:.03em;
}
.credits a{color:var(--signal)}

.tv-hero[data-mode="specimen"]{
  --bg:#f3f5f0;
  --bg-soft:#dbe0d5;
  --ink:#121310;
  --muted:#5c6158;
  --signal:#8fae3f;
  --signal-rgb:143,174,63;
  --glass:rgba(243,245,240,.65);
  --hairline:rgba(10,10,9,.16);
}
.tv-hero[data-mode="specimen"] .experience{
  background:
    radial-gradient(circle at 64% 46%,rgba(252,253,250,.97) 0 8%,rgba(228,231,222,.85) 46%,rgba(163,168,150,.92) 100%);
}
.tv-hero[data-mode="specimen"] .atmosphere{
  opacity:.2;
  background:radial-gradient(circle at 66% 43%,transparent 0 24%,rgba(40,44,34,.1) 68%,rgba(26,29,22,.22) 100%);
}
.tv-hero[data-mode="specimen"] .mode-switch{background:rgba(243,245,240,.4)}
.tv-hero[data-mode="specimen"] .seal{border-color:rgba(10,10,9,.35)}
.tv-hero[data-mode="specimen"] h1 em{-webkit-text-stroke-color:rgba(10,10,9,.6)}
.tv-hero[data-mode="specimen"] .intro-copy{color:#585d54}
.tv-hero[data-mode="specimen"] .observation-index{color:#53675b}
.tv-hero[data-mode="specimen"] .creator-line{color:#50564d}
.tv-hero[data-mode="specimen"] .hero-primary{background:rgba(243,245,240,.5);color:#121310}
.tv-hero[data-mode="specimen"] .scene-loader{background:rgba(243,245,240,.74)}
.tv-hero[data-mode="specimen"] .tracker{border-color:rgba(255,255,255,.7);background:rgba(243,245,240,.24)}
.tv-hero[data-mode="specimen"] .tracker b{color:#23251f}
.tv-hero[data-mode="specimen"] .nav-tracker,
.tv-hero[data-mode="specimen"] details.nav-tracker summary{border-color:rgba(10,10,9,.32);background:rgba(243,245,240,.32)}
.tv-hero[data-mode="specimen"] .nav-tracker b{color:#23251f}
.tv-hero[data-mode="specimen"] details.nav-tracker .about-panel{background:rgba(243,245,240,.94);color:#292b25;border-color:rgba(10,10,9,.16)}
.tv-hero[data-mode="specimen"] .corner{border-color:#fff}
.tv-hero[data-mode="specimen"] .observation{box-shadow:0 30px 90px rgba(20,22,16,.14)}
.tv-hero[data-mode="specimen"] .observation-head{color:#575c53}
.tv-hero[data-mode="specimen"] .temperature-rule{background:rgba(10,10,9,.1)}
.tv-hero[data-mode="specimen"] .observation-note,.tv-hero[data-mode="specimen"] .metrics-line span{color:#666b61}
.tv-hero[data-mode="specimen"] .metrics-line{color:#17282d}
.tv-hero[data-mode="specimen"] .load-state{color:#344a50}
.tv-hero[data-mode="specimen"] .gesture span{color:#2c4248}

@keyframes pulse{50%{opacity:.28;transform:scale(.78)}}
@keyframes tracker-flicker{
  0%,7%,10%,43%,46%,79%,82%,100%{opacity:1;filter:brightness(1)}
  8%{opacity:.14;filter:brightness(2)}
  44%{opacity:.34;filter:brightness(1.55)}
  80%{opacity:.08;filter:brightness(2.25)}
}
@keyframes corner-flicker{
  0%,17%,22%,61%,66%,100%{opacity:1}
  18%,62%{opacity:.08}
}
@keyframes readout-flicker{
  0%,31%,34%,72%,75%,100%{opacity:1}
  32%{opacity:.18}
  73%{opacity:.38}
}
@keyframes line-dropout{
  0%,26%,29%,67%,71%,100%{opacity:1;transform:scaleX(1);transform-origin:left}
  27%{opacity:.16;transform:scaleX(.36)}
  68%{opacity:.3;transform:scaleX(.72)}
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(2%,-1%)}
  50%{transform:translate(-1%,2%)}
  75%{transform:translate(1%,1%)}
}

@media (max-width:900px){
  .topbar{height:68px;padding:0 18px;grid-template-columns:1fr auto}
  .coordinate{display:none}
  .hero{top:12%;left:20px;width:calc(100% - 40px)}
  h1{font-size:clamp(50px,15vw,80px)}
  .intro-copy{max-width:310px;margin-top:20px;font-size:9px;line-height:1.65}
  .hero-primary{margin-top:17px}
  .scene-loader{left:auto;right:18px;top:55%}
  .observation{right:16px;bottom:78px;width:240px;padding:14px 15px}
  .temperature{margin:13px 0 10px}
  .temperature strong{font-size:43px}
  .metrics-line{font-size:7px;letter-spacing:.02em}
  .micro-label{display:none}
  .footer{min-height:55px;padding:0 18px;grid-template-columns:1fr auto}
  .gesture{display:none}
  .credits{font-size:6px}
  .nav-trackers{left:18px;bottom:63px;gap:6px}
  .nav-tracker,details.nav-tracker summary{width:104px;height:30px}
  details.nav-tracker .about-panel{width:200px}
}

@media (max-width:540px){
  .tv-hero,.experience{min-height:720px}
  .wordmark{font-size:8px}
  .mode-button{padding:7px 8px;font-size:7px}
  .mode-button i{margin-right:4px}
  .topbar-tools{gap:4px}
  .language-switch button{min-width:20px;padding:6px 4px;font-size:7px}
  .hero{top:12%;left:18px;width:calc(100% - 36px)}
  .creator-line{max-width:255px;margin-bottom:10px;font-size:6px;line-height:1.5}
  .kicker{margin-bottom:14px}
  h1{font-size:clamp(43px,14vw,58px);line-height:.88}
  .intro-copy{display:block;max-width:240px;margin-top:14px;font-size:8px;line-height:1.55;letter-spacing:.035em}
  .hero-primary{margin-top:14px;padding:10px 11px;font-size:7px}
  .scene-loader{right:14px;top:auto;bottom:66px;padding:8px 10px}
  .scene-loader__orbit{width:23px;height:23px}
  .scene-loader p span{display:none}
  .observation{right:14px;bottom:70px;width:184px;padding:11px 12px;border-radius:13px}
  .observation-head{font-size:6px}
  .temperature{margin:10px 0 8px}.temperature strong{font-size:34px}
  .temperature-rule{height:2px}
  .metrics-line{margin-top:10px;font-size:6px;letter-spacing:0}
  .tracker{display:none}
  .nav-trackers{display:none}
  .footer{min-height:46px;padding:0 14px;grid-template-columns:1fr auto}
  .credits{display:none}
  .load-state{font-size:6px}
}

@media (prefers-reduced-motion:reduce){
  .atmosphere::after,.live i,.load-state i,.tracker,.tracker b,.corner,.micro-label span,.micro-label i,.micro-label b,.scene-loader__orbit{animation:none}
}

/* =========================================================================
   TRACKERS, MADE REAL — 260805
   The trackers were pointer-events:none decoration marked aria-hidden, and
   they were also the first thing anyone reaches for. They are <button>s now:
   each expands a second readout line, takes keyboard focus, and survives on
   small screens instead of being switched off.
   ========================================================================= */

/* Button reset — .tracker's own box (border, background, size) still wins,
   this only clears what the UA adds. */
.tracker{
  -webkit-appearance:none;appearance:none;
  margin:0;padding:0;
  font:inherit;
  color:inherit;
  text-align:left;
  /* Was pointer-events:none. This is the whole point of the change. */
  pointer-events:auto;
  cursor:pointer;
}
.tracker:hover,
.tracker.is-peeking,
.tracker[aria-expanded="true"]{
  border-color:rgba(var(--signal-rgb),.62);
  background:linear-gradient(135deg,rgba(var(--signal-rgb),.14),transparent 62%);
}
.tracker:focus-visible{outline:1px solid var(--signal);outline-offset:3px}
/* Latched open: stop the flicker so the expanded readout stays legible. */
.tracker[aria-expanded="true"]{animation:none}
.tracker[aria-expanded="true"] .corner{animation:none;border-color:var(--signal)}

/* The second readout line. Collapsed by default in both directions so it
   cannot push the tracker's own label around while it is closed. */
.tracker__more{
  display:block;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  opacity:0;
  color:rgba(var(--signal-rgb),.82);
  font-size:6.5px;
  line-height:1.75;
  letter-spacing:.08em;
  transition:max-height .34s var(--ease),opacity .26s var(--ease),margin-top .34s var(--ease);
}
/* Hover and keyboard focus preview the readout; clicking latches it open via
   aria-expanded, which JS owns. Peeking is deliberately pure CSS — it needs no
   state, so it should cost no script. */
.tracker:hover .tracker__more,
.tracker:focus-visible .tracker__more,
.tracker[aria-expanded="true"] .tracker__more{
  max-height:46px;
  margin-top:4px;
  opacity:1;
}
/* The readout hangs below the frame and must not eat clicks on what is
   behind it; the button itself is the hit target. */
.tracker b{pointer-events:none}

@media (max-width:540px){
  /* Was display:none for both. Most people open a portfolio link on a phone,
     and this was the part worth showing them. Two trackers, no flicker,
     no hover-only affordances. */
  .tracker{display:block;animation:none}
  .tracker .corner{animation:none}
  .tracker b{font-size:6px;animation:none}
  .tracker__more{font-size:5.5px}
  /* Four labels at phone width overlap into noise — keep the two anchored to
     the objects that read most clearly at that size. */
  .tracker[data-track="leaf"],
  .tracker[data-track="steam"]{display:none}
  .nav-trackers{display:flex;left:14px;bottom:56px;gap:5px}
  .nav-tracker,details.nav-tracker summary{width:92px;height:27px}
  .nav-tracker b{font-size:5.5px}
}

@media (prefers-reduced-motion:reduce){
  .tracker__more{transition:none}
}