/* Долина ЦОД · 3D — qTwin palette & type (black, charcoal hairlines, Geologica, frost, red accent), its own layout:
   a viewfinder over a live maket, scan line, metric rail, scenario reel, object rail with a leader line to the card. */
:root {
  --bg: #000; --panel: rgba(6, 6, 6, .82); --line: #323232; --line2: #1d1d1d;
  --frost: #fdfcfc; --steel: #878787; --silver: #c3c3c3; --light: #e8e8e8; --btn: #1c1c1c;
  --red: #da0a1a; --red2: #ff3939;
  --font: "Geologica", "Open Sans", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --m: clamp(16px, 2.4vw, 40px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--frost); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow: hidden; }
::selection { background: rgba(224, 38, 27, .85); color: var(--frost); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; transition: opacity 1s;
  background: radial-gradient(ellipse 75% 70% at 62% 48%, transparent 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.92) 100%),
              linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 34%, transparent 55%); }
body.at-view .vignette { opacity: .55; background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 50%, rgba(0,0,0,.85) 100%); }

/* scan line — qTwin intro motif, sweeps over the maket */
.scanline { position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, #ff1a1a 22%, #ff3b3b 50%, #ff1a1a 78%, transparent 100%);
  box-shadow: 0 0 12px 2px rgba(255, 26, 26, .8), 0 0 46px 10px rgba(255, 26, 26, .25); }
.scanline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 26vh; background: linear-gradient(0deg, rgba(255, 26, 26, .08), transparent); }
.scanline.run { animation: scan 1.6s var(--ease) forwards; }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }

/* viewfinder */
.finder { position: fixed; inset: calc(var(--m) * .6); z-index: 3; pointer-events: none; }
.br { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(253, 252, 252, .55); }
.br.tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.br.tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.br.bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.br.br2 { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.ticks { position: absolute; opacity: .35; }
.ticks.top { left: 44px; right: 44px; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 40px); }
.ticks.left { top: 44px; bottom: 44px; left: 0; width: 6px; background: repeating-linear-gradient(0deg, var(--steel) 0 1px, transparent 1px 40px); }

/* top (floating) */
.top { position: fixed; z-index: 30; left: calc(var(--m) * .6 + 18px); right: calc(var(--m) * .6 + 18px); top: calc(var(--m) * .6 + 14px); display: flex; align-items: center; gap: 16px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top .grow { flex: 1; pointer-events: none; }
.mark img { width: 52px; display: block; }
.crumb { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.crumb .c1 { font-size: 15px; } .crumb .c2 { font-size: 12px; color: var(--steel); text-transform: uppercase; letter-spacing: .04em; }
.coords { font-size: 12px; color: var(--steel); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.dcv { height: 30px; opacity: .9; }
.sq { width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--silver); transition: background .2s, color .2s, border-color .2s; }
.sq:hover { background: #fff; color: #0c0c0c; border-color: #fff; }
.sq svg { width: 20px; height: 20px; }
.back { display: none; }
body.at-view .back { display: grid; }
body.at-view .mark { display: none; }

/* ---------------------------------------------------------------- welcome */
#welcome { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-rows: 1fr auto auto; transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; }
#welcome > * { pointer-events: auto; }
#welcome.out { opacity: 0; transform: translateY(14px); }
.hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 0 calc(var(--m) + 30px) 34px; pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero-l { max-width: 640px; }
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--silver); text-transform: uppercase; letter-spacing: .05em; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 10px var(--red2); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
h1 { margin: 22px 0 18px; font-weight: 300; font-size: clamp(52px, 6.2vw, 112px); line-height: .95; letter-spacing: -.03em; display: flex; flex-direction: column; }
h1 .w { display: block; overflow: hidden; }
h1 .w > span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
h1 .w:nth-child(2) > span { animation-delay: .12s; font-weight: 400; }
h1 .w:nth-child(2) > span::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .06em; background: var(--red); vertical-align: baseline; }
@keyframes rise { to { transform: none; } }
.lead { margin: 0 0 30px; max-width: 520px; color: var(--silver); font-weight: 300; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; }
.go { position: relative; display: flex; align-items: stretch; min-width: 340px; height: 68px; background: var(--light); color: #0c0c0c; text-align: left; overflow: hidden; transition: background .3s; }
.go::before { content: ""; position: absolute; inset: 0; background: var(--red); transform: translateX(-101%); transition: transform .55s var(--ease); }
.go:not(:disabled):hover::before { transform: none; }
.go > * { position: relative; }
.go-txt { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 22px; transition: color .3s; }
.go-txt small { font-size: 12px; color: #6a6a6a; text-transform: uppercase; letter-spacing: .05em; transition: color .3s; }
.go-txt b { font-weight: 400; font-size: 18px; }
.go-ico { width: 84px; display: flex; align-items: center; justify-content: center; gap: 8px; border-left: 1px solid rgba(0, 0, 0, .12); font-size: 13px; transition: color .3s; }
.go-ico svg { width: 20px; height: 20px; display: none; transition: transform .3s; }
.go.ready .go-ico svg { display: block; } .go.ready #loadPct { display: none; }
.go:not(:disabled):hover .go-txt, .go:not(:disabled):hover .go-txt small, .go:not(:disabled):hover .go-ico { color: #fff; }
.go:not(:disabled):hover .go-ico svg { transform: translateX(4px); }
.go:disabled { cursor: progress; background: #a9a9a9; }
.go-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(0, 0, 0, .12); }
.go-bar b { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.go.ready .go-bar { display: none; }

.metrics { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 240px; }
.metrics .m { padding: 14px 18px 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.metrics .m:last-child { border-bottom: 0; }
.metrics small { grid-column: 1 / -1; font-size: 11px; color: var(--steel); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.metrics b { font-weight: 200; font-size: 44px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metrics span { font-size: 12px; color: var(--silver); }

/* scenario reel */
.reel { border-top: 1px solid var(--line); background: rgba(0, 0, 0, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reel-h { display: flex; justify-content: space-between; padding: 12px calc(var(--m) + 30px) 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--frost); }
.reel-h .hint { color: var(--steel); }
.reel-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px calc(var(--m) + 30px) 18px; gap: 0; }
.sc { position: relative; display: grid; grid-template-columns: 132px 1fr auto; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; border: 1px solid var(--line); margin-left: -1px;
  text-align: left; overflow: hidden; transition: background .3s; }
.sc .pv { position: relative; height: 74px; background: #0a0a0a center / cover no-repeat; filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .5s; overflow: hidden; }
.sc .pv::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--red2); box-shadow: 0 0 10px var(--red2); opacity: 0; }
.sc:hover .pv { filter: none; }
.sc:hover .pv::after { animation: pvscan 1s var(--ease); }
@keyframes pvscan { 0% { top: -2px; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.sc .tx small { display: block; font-size: 12px; color: var(--steel); margin-bottom: 6px; }
.sc .tx b { display: block; font-weight: 400; font-size: 19px; }
.sc .tx span { display: block; font-size: 12px; color: var(--steel); margin-top: 6px; font-weight: 300; }
.sc .ar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--silver); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.sc .ar svg { width: 16px; height: 16px; }
.sc:hover { background: #0e0e0e; }
.sc:hover .ar { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }
.sc::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--red); transition: width .5s var(--ease); }
.sc:hover::before { width: 100%; }

.ticker { border-top: 1px solid var(--line); background: #000; overflow: hidden; height: 38px; display: flex; align-items: center; padding-bottom: var(--safe-b); box-sizing: content-box; }
.ticker-in { display: flex; gap: 0; white-space: nowrap; animation: tick 70s linear infinite; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--steel); }
.ticker-in span { padding: 0 22px; } .ticker-in b { color: var(--frost); font-weight: 400; } .ticker-in i { color: var(--red2); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- 3D view */
#view { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#view > * { pointer-events: auto; }
#pins, #leader, #hint { pointer-events: none !important; }
#leader { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
#leaderLine { stroke: var(--red2); stroke-width: 1; stroke-dasharray: 3 4; opacity: .9; }
#leaderDot { fill: var(--red2); stroke: none; }
#pins { position: fixed; inset: 0; z-index: 0; }
#view > .rail, #view > #card, #view > .dock, #view > .tools, #view > #hint { z-index: 2; }

/* object rail (left): numbers, names slide out on hover */
.rail { position: absolute; left: calc(var(--m) * .6 + 18px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rail .r-h { padding: 9px 0 8px; text-align: center; font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.rail button { position: relative; width: 52px; height: 40px; display: grid; place-items: center; font-size: 13px; color: var(--silver); border-bottom: 1px solid var(--line2); transition: background .2s, color .2s; font-variant-numeric: tabular-nums; }
.rail button:last-child { border-bottom: 0; }
.rail button .nm { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; background: rgba(6, 6, 6, .94); border: 1px solid var(--line); padding: 8px 12px; font-size: 13px; color: var(--frost);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.rail button:hover { background: #151515; color: var(--frost); }
.rail button:hover .nm { opacity: 1; transform: translate(0, -50%); }
.rail button.on { background: var(--red); color: #fff; }

/* object card (right) with viewfinder corners, the leader line points to it */
#card { position: absolute; right: calc(var(--m) * .6 + 18px); top: calc(var(--m) * .6 + 84px); width: 340px; padding: 22px 24px 18px; background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: cardIn .5s var(--ease); }
#card .br { width: 14px; height: 14px; border-color: var(--frost); }
@keyframes cardIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.card-top { display: flex; align-items: center; gap: 12px; }
.card-top .idx { color: var(--red2); font-size: 14px; }
.card-top .kind { flex: 1; color: var(--steel); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
#card .x { width: 28px; height: 28px; display: grid; place-items: center; color: var(--steel); margin-right: -6px; }
#card .x svg { width: 14px; height: 14px; } #card .x:hover { color: var(--frost); }
#card h2 { margin: 12px 0 0; font-size: 24px; line-height: 1.22; font-weight: 400; }
#cLogo { display: block; height: 24px; margin-top: 14px; opacity: .92; }
#cLogo:not([src]) { display: none; }
#card .val { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }
#card .val b { font-size: 68px; font-weight: 200; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#card .val span { font-size: 18px; color: var(--steel); font-weight: 300; }
#card .val b:empty { display: none; }
#card .sub { margin-top: 10px; color: var(--silver); font-size: 14px; font-weight: 300; }
#card .sub:empty { display: none; }
.card-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--steel); font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.card-nav button { width: 40px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--silver); transition: background .2s, color .2s; }
.card-nav button:hover { background: #fff; color: #0c0c0c; } .card-nav svg { width: 14px; height: 14px; }

/* scenario dock (bottom centre) */
.dock { position: absolute; left: 50%; bottom: calc(var(--m) * .6 + 18px + var(--safe-b)); transform: translateX(-50%); display: flex; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dk { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-right: 1px solid var(--line); text-align: left; overflow: hidden; transition: background .3s; }
.dk:last-child { border-right: 0; }
.dk .pv { width: 64px; height: 40px; background: #0a0a0a center / cover no-repeat; filter: grayscale(1) brightness(.75); transition: filter .4s; }
.dk small { display: block; font-size: 11px; color: var(--steel); }
.dk b { display: block; font-weight: 400; font-size: 15px; margin-top: 3px; }
.dk svg { width: 14px; height: 14px; color: var(--steel); transition: transform .3s, color .3s; }
.dk::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--red); transition: width .5s var(--ease); }
.dk:hover { background: #111; } .dk:hover::before { width: 100%; } .dk:hover .pv { filter: none; } .dk:hover svg { color: var(--red2); transform: translate(2px, -2px); }

/* tools (bottom right) */
.tools { position: absolute; right: calc(var(--m) * .6 + 18px); bottom: calc(var(--m) * .6 + 18px + var(--safe-b)); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tools .sq { width: 46px; height: 46px; color: var(--steel); }
.tools .sq.on { color: var(--frost); border-color: #5a5a5a; }
.compass { width: 46px; height: 46px; margin-bottom: 4px; color: var(--steel); }
.compass svg { width: 46px; height: 46px; }
.compass circle { stroke: var(--line); }
.compass #needle { fill: var(--red2); stroke: none; transform-origin: 20px 20px; }
.compass text { fill: var(--steel); stroke: none; font: 8px var(--font); text-anchor: middle; }

#hint { position: absolute; left: 50%; top: calc(var(--m) * .6 + 18px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--line); background: var(--panel); color: var(--silver); font-size: 12px; font-weight: 300; white-space: nowrap; transition: opacity .8s; }
#hint i { width: 3px; height: 3px; background: var(--red2); }
#hint.out { opacity: 0; }

/* pins: square plates like the maket's */
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.pin .n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; background: rgba(8, 8, 8, .9); color: var(--frost); border: 1px solid #5a5a5a; font-size: 12px; transition: background .15s, border-color .15s, transform .15s; }
.pin::after { content: ""; width: 1px; height: 12px; background: rgba(253, 252, 252, .7); }
.pin:hover .n { border-color: var(--frost); transform: scale(1.1); }
.pin.on .n { background: var(--red); border-color: var(--red2); box-shadow: 0 0 18px rgba(218, 10, 26, .7); }
.pin.on::after { background: var(--red2); }
#pins.off .pin:not(.on) { display: none; }

#wait { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px; background: #000; color: var(--steel); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.wait-line { width: 220px; height: 1px; background: #1d1d1d; overflow: hidden; }
.wait-line b { display: block; width: 40%; height: 100%; background: var(--red2); box-shadow: 0 0 10px var(--red2); animation: wl 1.1s var(--ease) infinite; }
@keyframes wl { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- tablets / phones */
@media (max-width: 1100px) {
  .reel-row { grid-template-columns: 1fr; gap: 0; }
  .sc { margin-left: 0; margin-top: -1px; grid-template-columns: 96px 1fr auto; padding: 8px 14px 8px 8px; }
  .sc .pv { height: 52px; }
  .sc .tx span { display: none; }
  .coords { display: none; }
}
@media (max-width: 760px) {
  :root { --m: 8px; }
  .finder .ticks { display: none; }
  .br { width: 14px; height: 14px; }
  .top { top: 16px; left: 18px; right: 18px; gap: 10px; }
  .mark img { width: 36px; } .dcv { height: 20px; }
  .crumb .c1 { font-size: 13px; } .crumb .c2 { font-size: 10px; }
  .sq { width: 38px; height: 38px; } .sq svg { width: 17px; height: 17px; }
  .tag { display: none; }
  .vignette { background: linear-gradient(0deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.8) 48%, rgba(0,0,0,.05) 66%, rgba(0,0,0,.55) 100%); }
  .hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 0 18px 14px; }
  h1 { font-size: 42px; margin: 0 0 10px; }
  .lead { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
  .go { min-width: 0; width: 100%; height: 52px; }
  .go-txt { padding: 0 16px; } .go-txt small { font-size: 10px; } .go-txt b { font-size: 15px; }
  .go-ico { width: 60px; }
  .metrics { flex-direction: row; min-width: 0; }
  .metrics .m { flex: 1; border-bottom: 0; border-right: 1px solid var(--line); padding: 8px 8px 7px; }
  .metrics .m:last-child { border-right: 0; }
  .metrics b { font-size: 22px; } .metrics small { font-size: 8px; margin-bottom: 2px; } .metrics span { font-size: 9px; grid-column: 1 / -1; }
  .reel-h { padding: 10px 18px 0; font-size: 11px; } .reel-h .hint { display: none; }
  .reel-row { padding: 8px 18px 12px; }
  .sc { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 6px 10px 6px 6px; }
  .sc .pv { height: 42px; }
  .sc .tx b { font-size: 14px; } .sc .tx small { font-size: 10px; margin-bottom: 2px; }
  .sc .ar { width: 30px; height: 30px; }
  .ticker { height: 28px; } .ticker-in { font-size: 10px; }

  /* 3D view: numbers strip, scenario strip at the bottom, small tools column on the right */
  .rail { top: auto; bottom: calc(66px + var(--safe-b)); left: 8px; right: 8px; transform: none; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail .r-h { display: none; }
  .rail button { flex: 1 0 34px; width: auto; height: 34px; font-size: 12px; border-bottom: 0; border-right: 1px solid var(--line2); }
  .rail button:last-child { border-right: 0; }
  .rail button .nm { display: none; }
  #card { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(108px + var(--safe-b)); transform: none; padding: 12px 14px 10px; animation: none; }
  #card .br { width: 10px; height: 10px; }
  .card-top .idx { font-size: 12px; } .card-top .kind { font-size: 9px; }
  #card h2 { font-size: 15px; margin-top: 4px; } #cLogo { height: 16px; margin-top: 6px; }
  #card .val { margin-top: 6px; } #card .val b { font-size: 34px; } #card .val span { font-size: 13px; }
  #card .sub { font-size: 12px; margin-top: 4px; }
  .card-nav { margin-top: 8px; padding-top: 8px; font-size: 11px; } .card-nav button { width: 36px; height: 30px; }
  #leader { display: none; }
  .dock { left: 8px; right: 8px; transform: none; bottom: calc(8px + var(--safe-b)); }
  .dk { flex: 1; min-width: 0; padding: 7px 8px; gap: 0; } .dk .pv, .dk svg { display: none; }
  .dk small { font-size: 9px; } .dk b { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tools { right: 8px; bottom: auto; top: 70px; gap: 4px; }
  .tools .sq { width: 36px; height: 36px; } .tools .sq svg { width: 16px; height: 16px; }
  .compass, #fs { display: none; }
  #hint { display: none; }
  .pin .n { min-width: 22px; height: 22px; font-size: 11px; }
  .pin::after { height: 8px; }
  .pin { padding: 6px; margin: -6px; }   /* bigger touch target */
  body.at-view .vignette { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,.92) 0, rgba(0,0,0,.6) 64px, transparent 120px); }
}
/* phones (portrait) and small landscape screens: the welcome scrolls */
@media (max-width: 760px), (max-height: 520px) {
  #welcome { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; pointer-events: auto; touch-action: pan-y; }
  .hero { pointer-events: auto; }
}
@media (max-width: 760px) { .hero { padding-top: 46svh; } }
@media (max-height: 520px) and (min-width: 761px) {
  .hero { padding-top: 90px; min-height: 100svh; }
  h1 { font-size: 56px; margin: 8px 0; } .lead { margin-bottom: 14px; } .tag { display: none; }
  .metrics b { font-size: 30px; } .metrics .m { padding: 8px 14px; }
  #fs, .compass { display: none; }
  #card { top: 70px; max-height: calc(100% - 150px); overflow-y: auto; }
  .rail button { height: 26px; font-size: 11px; } .rail .r-h { display: none; }
  .dk .pv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  h1 .w > span { transform: none; }
}

@media (hover: none) and (pointer: coarse) { #fs { display: none; } }

/* ---------------------------------------------------------------- the live twin (3D view): layers, status, power chain */
#view > .twin, #view > #tip { z-index: 2; }
.twin { position: absolute; left: calc(var(--m) * .6 + 18px); top: 50%; transform: translateY(-50%); width: 252px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tw-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--silver); }
.tw-h span { flex: 1; } .tw-h small { color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.tw-l { display: grid; grid-template-columns: 1fr 1fr; }
.tw-l button { display: flex; align-items: center; gap: 9px; padding: 11px 12px; font-size: 13px; color: var(--steel); border-bottom: 1px solid var(--line2); transition: background .2s, color .2s; text-align: left; }
.tw-l button:nth-child(odd) { border-right: 1px solid var(--line2); }
.tw-l button span { flex: 1; }
.tw-l kbd { display: none; }
.tw-l .sw { position: relative; width: 22px; height: 12px; flex: none; border: 1px solid #4a4a4a; transition: border-color .2s, background .2s; }
.tw-l .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; background: #5a5a5a; transition: transform .25s var(--ease), background .2s; }
.tw-l button:hover { background: #111; color: var(--frost); }
.tw-l button.on { color: var(--frost); }
.tw-l button.on .sw { border-color: var(--red2); background: rgba(218, 10, 26, .18); }
.tw-l button.on .sw::after { transform: translateX(10px); background: var(--red2); box-shadow: 0 0 8px var(--red2); }
.tw-k { display: grid; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--silver); font-weight: 300; transition: opacity .3s; }
.tw-k span { display: flex; align-items: center; gap: 10px; }
.k { width: 14px; height: 10px; flex: none; border: 1px solid; }
.k.work { border-color: var(--frost); background: rgba(253, 252, 252, .22); }
.k.q1 { border-color: var(--red2); background: rgba(255, 57, 57, .3); box-shadow: 0 0 8px rgba(255, 57, 57, .5); }
.k.plan { border: 1px dashed var(--steel); }
.k.infra { border-color: #4a4a4a; background: rgba(135, 135, 135, .12); }
.tw-e { padding: 12px 14px 14px; transition: opacity .3s; }
.tw-e > small { font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: .06em; }
.chain { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; white-space: nowrap; }
.chain b { font-weight: 400; color: var(--frost); }
.chain i { flex: 1; min-width: 8px; height: 1px; background: linear-gradient(90deg, var(--red2) 0 50%, transparent 50%) 0 0 / 6px 1px; animation: flowx .6s linear infinite; }
@keyframes flowx { to { background-position: 6px 0; } }
.bal { margin-top: 14px; }
.bal-n { display: flex; align-items: baseline; gap: 6px; }
.bal-n b { font-size: 34px; font-weight: 200; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bal-n span { color: var(--steel); font-size: 13px; }
.bal-bar { height: 3px; margin-top: 8px; background: #1d1d1d; overflow: hidden; }
.bal-bar i { display: block; width: 86.5%; height: 100%; background: var(--red2); box-shadow: 0 0 10px var(--red2); transform-origin: left; animation: barIn 1.6s var(--ease) both; }
@keyframes barIn { from { transform: scaleX(0); } }
.bal p { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--steel); font-weight: 300; }
.fk { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--silver); font-weight: 300; }
.fk span { display: flex; align-items: center; gap: 7px; }
.ln { width: 18px; height: 2px; }
.ln.live { background: var(--red2); box-shadow: 0 0 6px var(--red2); }
.ln.plan { background: linear-gradient(90deg, #9a9a9a 0 50%, transparent 50%) 0 0 / 6px 2px; }
.twin.no-status .tw-k, .twin.no-energy .tw-e { opacity: .3; }

/* card: status chip and the feed line */
.card-top .stat { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--silver); white-space: nowrap; }
.card-top .stat:empty { display: none; }
.card-top .stat::before { content: ""; width: 7px; height: 7px; border: 1px solid; }
.stat.work::before { border-color: var(--frost); background: var(--frost); }
.stat.q1 { color: var(--red2); } .stat.q1::before { border-color: var(--red2); background: var(--red2); box-shadow: 0 0 8px var(--red2); }
.stat.plan::before { border-style: dashed; border-color: var(--steel); }
.stat.infra::before { border-color: #5a5a5a; background: #3a3a3a; }
#card .feed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--silver); font-weight: 300; }
#card .feed:empty { display: none; }
#card .feed small { display: block; font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }

/* hover tag (mouse) */
#tip { position: fixed; left: 0; top: 0; pointer-events: none !important; padding: 7px 10px; background: rgba(6, 6, 6, .92); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; color: var(--frost); transform: translate(14px, 14px); }
#tip i { font-style: normal; color: var(--red2); margin-right: 6px; }
#tip em { font-style: normal; color: var(--steel); margin-left: 8px; font-size: 11px; }

/* night: the HUD goes a touch deeper */
body.night .vignette { opacity: .8; }

@media (max-width: 760px) {
  .twin { top: auto; transform: none; left: 8px; right: 8px; width: auto; bottom: calc(66px + var(--safe-b)); border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tw-h, .tw-e { display: none; }
  .tw-l { display: flex; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .tw-l button { flex: 1; min-width: 0; justify-content: center; gap: 6px; padding: 0 4px; height: 34px; font-size: 11px; border-bottom: 0; border-right: 1px solid var(--line2) !important; }
  .tw-l button:last-child { border-right: 0 !important; }
  .tw-l kbd { display: none; }
  .tw-l .sw { width: 16px; height: 9px; } .tw-l .sw::after { width: 3px; height: 3px; } .tw-l button.on .sw::after { transform: translateX(7px); }
  .tw-k { position: fixed; left: 8px; right: 52px; top: 62px; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0; border: 0; font-size: 10px; text-shadow: 0 1px 3px #000; }
  .tw-k span { gap: 5px; } .k { width: 10px; height: 7px; }
  .twin.no-status .tw-k { display: none; }
  #card .feed { margin-top: 6px; padding-top: 6px; font-size: 11px; } #card .feed small { display: none; }
  .card-top .stat { font-size: 9px; }
  #tip { display: none; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .tw-e { display: none; }
  .tw-l button { padding: 7px 10px; } .tw-k { padding: 8px 12px; gap: 4px; }
}