@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #050706;
  --bg-2: #0b0f0d;
  --fg: #e4e9e6;
  --mute: #8b948f;
  --dim: #535b57;
  --line: #19201d;
  --g: #3dff8b;
  --g-dim: rgba(61, 255, 139, 0.14);
  --c: #4cc9f0;
  --err: #ff5d5d;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--g); color: var(--bg); }
:focus-visible { outline: 1px solid var(--g); outline-offset: 3px; }
.mono { font-family: var(--mono); }
.g { color: var(--g); }
.dim { color: var(--dim); }
.label { color: var(--c); font-size: 14px; margin: 0 0 18px; }

.bar { position: fixed; inset: 0 0 auto; z-index: 30; height: 72px; display: flex; align-items: center; gap: 32px; padding: 0 clamp(16px, 4vw, 56px); background: #050706; border-bottom: 1px solid var(--line); }
.logo { white-space: nowrap; font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; text-decoration: none; margin-right: auto; }
.bar__nav { display: flex; gap: 30px; font-family: var(--mono); font-size: 15px; }
.bar__nav a { text-decoration: none; color: var(--fg); opacity: .85; }
.bar__nav a:hover { color: var(--g); opacity: 1; }

.btn { display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 700; font-size: 16px; padding: 14px 24px; border-radius: 4px; text-decoration: none; background: var(--g); color: #03140a; border: 1px solid var(--g); box-shadow: none; transition: box-shadow .2s, background .2s, color .2s; }
.btn:hover { background: #7dffb3; border-color: #7dffb3; }
.btn--ghost { background: transparent; color: var(--g); box-shadow: none; border-color: rgba(61, 255, 139, .55); }
.btn--ghost:hover { background: var(--g-dim); box-shadow: none; }
.btn--sm { padding: 9px 16px; font-size: 14px; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 110px clamp(16px, 4vw, 56px) 70px; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,6,.85) 0%, rgba(5,7,6,.35) 45%, rgba(5,7,6,0) 65%), linear-gradient(0deg, var(--bg) 0%, rgba(5,7,6,0) 22%); pointer-events: none; }
#scan { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__text { max-width: 680px; position: relative; }
h1 { font-size: clamp(44px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 26px; }
.lead { font-size: clamp(18px, 1.7vw, 22px); color: #c4cbc7; max-width: 34ch; margin: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 38px; }
.hint { font-size: 13px; color: var(--dim); margin: 40px 0 0; }
.scan-hud { position: absolute; top: 96px; right: clamp(16px, 4vw, 56px); z-index: 2; font-size: 13px; color: var(--g); letter-spacing: .08em; display: flex; gap: 10px; padding: 7px 12px; background: rgba(5,7,6,.88); border: 1px solid #22302a; }
.scan-hud b { font-weight: 700; color: var(--fg); }
.scan-hud .sep { color: var(--dim); }

.sec { padding: clamp(72px, 10vw, 130px) clamp(16px, 4vw, 56px); border-top: 1px solid var(--line); }
.faq__list { max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: clamp(18px, 2vw, 22px); }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 22px; color: var(--g); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover h3 { color: var(--g); }
.faq details p { color: var(--mute); margin: 0 0 22px; max-width: 68ch; }
h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 14px; }
.sub { color: var(--mute); margin: 0 0 36px; max-width: 60ch; }
.about h2 + .about__p { margin-top: 0; }
h3 { font-size: 21px; margin: 14px 0 8px; letter-spacing: -0.01em; }

.term { border: 1px solid #22302a; border-radius: 2px; background: #070a09; max-width: 980px; overflow: hidden; }
.term__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.term__body { height: 440px; overflow-y: auto; padding: 18px 20px; font-size: 14.5px; line-height: 1.6; cursor: text; }
#termOut { white-space: pre-wrap; word-break: break-word; }
#termOut .l { min-height: 1.6em; }
#termOut .cmd::before { content: "host@kyberstrategie:~$ "; color: var(--g); }
#termOut .g { color: var(--g); }
#termOut .c { color: var(--c); }
#termOut .err { color: var(--err); }
#termOut .opt { display: block; width: 100%; text-align: left; }
#termOut .opt b { color: var(--g); font-weight: 400; }
#termOut .opt:hover { background: var(--g-dim); }
#termOut a { color: var(--g); }
.term__line { display: flex; gap: 10px; }
.ps1 { color: var(--g); white-space: nowrap; }
#termIn { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--fg); font: inherit; caret-color: var(--g); padding: 0; }
.term__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.term__chips button { padding: 5px 12px; border: 1px solid #22302a; border-radius: 3px; color: var(--mute); }
.term__chips button:hover { border-color: var(--g); color: var(--g); }

.about { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.photo { aspect-ratio: 4/5; border: 1px solid #22302a; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { margin-bottom: 20px; }
.about__p { color: #c4cbc7; max-width: 56ch; margin: 0; }
.small { font-size: 13px; color: var(--g) !important; margin-top: 18px !important; }

.cta h2 { font-size: clamp(38px, 6vw, 80px); margin-bottom: 18px; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px clamp(16px, 4vw, 56px); border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }

.map { display: grid; grid-template-columns: 1.5fr 1fr; border: 1px solid #22302a; }
.map__canvas { border-right: 1px solid #22302a; display: flex; flex-direction: column; min-width: 0; }
.office { position: relative; height: 520px; background: radial-gradient(ellipse at 50% 40%, rgba(61,255,139,.06), transparent 70%), #050706; overflow: hidden; }
.office canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.office canvas:active { cursor: grabbing; }
.office__labels { position: absolute; inset: 0; pointer-events: none; }
.olabel { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; padding: 3px 8px; background: rgba(5,8,6,.88); border: 1px solid #2c3a34; color: var(--fg); transition: border-color .2s, color .2s, background .2s; }
.olabel::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: #2c3a34; }
.olabel:hover, .olabel.sel { border-color: var(--g); color: var(--g); }
.olabel.lit { border-color: var(--g); color: var(--g); background: rgba(14,40,26,.92); }
.olabel.hit { border-color: var(--err); color: #ffb3ad; background: rgba(50,12,12,.92); }
.olabel.hit::after { background: var(--err); }
.olabel.safe { border-color: var(--g); color: var(--g); background: rgba(14,40,26,.92); }
.office__hint { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--dim); pointer-events: none; }
.office__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); }
.office__fallback[hidden] { display: none; }
.office.alarm { box-shadow: inset 0 0 120px rgba(255,93,93,.25); }
.office.safe { box-shadow: inset 0 0 120px rgba(61,255,139,.18); }
.map__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid #22302a; font-size: 13px; }
.map__bar { gap: 10px; }
.atk { padding: 7px 12px; border: 1px solid; }
.atk--bad { color: var(--err); border-color: rgba(255,93,93,.5) !important; }
.atk--bad:hover { background: rgba(255,93,93,.12); }
.atk--ok { color: var(--g); border-color: rgba(61,255,139,.5) !important; }
.atk--ok:hover { background: var(--g-dim); }
#clock { margin-left: auto; }
.map__bar button:disabled { opacity: .4; cursor: default; }
.map__side { display: flex; flex-direction: column; min-width: 0; }
.log { flex: 1; min-height: 190px; padding: 16px; font-size: 13.5px; line-height: 1.7; border-bottom: 1px solid #22302a; white-space: pre-wrap; }
.log .t { color: var(--dim); }
.log .bad { color: var(--err); }
.log a { color: var(--g); }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li + li { border-top: 1px solid var(--line); }
.svc-list button { display: block; width: 100%; text-align: left; padding: 13px 16px; }
.svc-list b { display: block; font-weight: 700; }
.svc-list span { color: var(--mute); font-size: 14.5px; }
.svc-list button:hover, .svc-list button.on { background: var(--bg-2); }
.svc-list button:hover b, .svc-list button.on b { color: var(--g); }

.game { position: relative; border: 1px solid #22302a; background: #050806; overflow: hidden; user-select: none; -webkit-user-select: none; }
.game.shake .stage { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

.hud { display: flex; align-items: stretch; border-bottom: 1px solid #1b2420; }
.hud__c { padding: 10px 18px; border-right: 1px solid #1b2420; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 96px; }
.hud__c small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.hud__c b { font-size: 18px; color: var(--fg); font-weight: 700; display: inline-block; }
.hud__c b.pop { animation: pop .35s; }
@keyframes pop { 40% { transform: scale(1.35); color: var(--g); } }
.meter { display: block; height: 3px; background: #16201b; margin-top: 4px; }
.meter i { display: block; height: 100%; width: 0; background: var(--g); transition: width .3s; }
.hud__lives { margin-left: auto; border-right: 0; border-left: 1px solid #1b2420; }
#gLives { display: flex; gap: 5px; margin-top: 3px; }
#gLives i { width: 22px; height: 10px; background: var(--g); transition: background .3s, opacity .3s; }
#gLives i.lost { background: var(--err); opacity: .3; }
.timer { height: 4px; background: #0f1512; }
.timer i { display: block; height: 100%; background: var(--g); transform-origin: left; }
.timer i.low { background: var(--err); }

.stage { position: relative; height: 620px; perspective: 1100px; perspective-origin: 50% 25%; overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(61,255,139,.08), transparent 70%); }
.floor { position: absolute; left: -25%; right: -25%; top: 58%; height: 110%; transform: rotateX(76deg); transform-origin: 50% 0; overflow: hidden; pointer-events: none; }
.floor::before { content: ""; position: absolute; left: 0; right: 0; top: -64px; bottom: 0; will-change: transform;
  background-image: linear-gradient(rgba(61,255,139,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(61,255,139,.28) 1px, transparent 1px);
  background-size: 64px 64px; animation: floor 2.6s linear infinite; }
.floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #050806 0%, rgba(5,8,6,0) 45%); }
@keyframes floor { to { transform: translateY(64px); } }
.game.paused .floor::before, .game.paused .banner { animation-play-state: paused; }

.portal { position: absolute; top: 16%; width: 120px; height: 62%; border: 2px solid; border-radius: 50%; display: grid; place-content: center; text-align: center; font-family: var(--mono); gap: 6px; transition: box-shadow .2s, background .2s, transform .2s; }
.portal span { font-weight: 700; font-size: 13px; letter-spacing: .14em; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; }
.portal small { font-size: 10.5px; color: var(--dim); }
.portal--bad { left: 3%; color: var(--err); border-color: rgba(255,93,93,.45); transform: rotateY(58deg); }
.portal--ok { right: 3%; color: var(--g); border-color: rgba(61,255,139,.45); transform: rotateY(-58deg); }
.portal--bad.hot { background: rgba(255,93,93,.12); box-shadow: 0 0 40px rgba(255,93,93,.35), inset 0 0 30px rgba(255,93,93,.25); transform: rotateY(48deg) scale(1.06); }
.portal--ok.hot { background: rgba(61,255,139,.1); box-shadow: 0 0 40px rgba(61,255,139,.3), inset 0 0 30px rgba(61,255,139,.2); transform: rotateY(-48deg) scale(1.06); }

.deck { position: absolute; left: 50%; top: 50%; width: min(560px, 64%); height: 450px; transform: translate(-50%, -52%); transform-style: preserve-3d; }
.card { position: absolute; inset: 0; transform-style: preserve-3d; background: #0c110f; border: 1px solid #2f3f38; display: flex; flex-direction: column; cursor: grab; touch-action: pan-y; will-change: transform;
  box-shadow: 0 40px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(61,255,139,.05); transition: transform .25s cubic-bezier(.2,.9,.3,1), opacity .3s; }
.card.q1 { transform: translate3d(0, -26px, -110px); opacity: .5; pointer-events: none; }
.card.q2 { transform: translate3d(0, -50px, -220px); opacity: .25; pointer-events: none; }
.card.q1 > *, .card.q2 > * { visibility: hidden; }
.card.drag { transition: none; cursor: grabbing; }
.card.enter { animation: enter .55s cubic-bezier(.2,1,.3,1); }
@keyframes enter { from { transform: translate3d(0, -60px, -380px) rotateX(18deg); opacity: 0; } }
.card.fly-bad { transform: translate3d(-900px, 40px, -300px) rotateY(55deg) !important; opacity: 0; transition: transform .55s cubic-bezier(.5,0,.8,.4), opacity .55s; }
.card.fly-ok { transform: translate3d(900px, 40px, -300px) rotateY(-55deg) !important; opacity: 0; transition: transform .55s cubic-bezier(.5,0,.8,.4), opacity .55s; }
.card.judged { transform: translate3d(0, -118px, -120px) scale(.9) !important; }

.card__bar { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid #1f2a25; font-family: var(--mono); font-size: 11px; color: var(--dim); background: #0a0e0c; }
.card__in { padding: 16px 20px 10px; flex: 1; overflow: hidden; }
.card__meta { font-family: var(--mono); font-size: 12.5px; color: var(--mute); line-height: 1.7; word-break: break-all; }
.card__meta b { color: var(--fg); font-weight: 500; }
.card__subj { font-size: 20px; font-weight: 700; margin: 10px 0 10px; letter-spacing: -0.01em; }
.card__body { color: #c4cbc7; white-space: pre-line; font-size: 15.5px; margin: 0; }
.lnk { display: inline-block; margin-top: 10px; padding: 7px 14px; background: #1b2a23; color: var(--fg); font-family: var(--mono); font-size: 13px; border: 1px solid #2f4a3d; cursor: pointer; }
.att { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 12.5px; border: 1px dashed #2f3f38; padding: 5px 9px; }
.card__act { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 12px 14px 14px; transition: opacity .2s; }
.card.judged .card__act { opacity: 0; pointer-events: none; }
.cb { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; line-height: 1; border: 2px solid; background: #0a0f0c; transition: transform .15s, background .15s, box-shadow .15s; touch-action: manipulation; }
.cb--no { color: var(--err); border-color: rgba(255,93,93,.65); }
.cb--yes { color: var(--g); border-color: rgba(61,255,139,.65); }
.cb:hover { transform: scale(1.1); }
.cb:active { transform: scale(.92); }
.cb--no:hover { background: rgba(255,93,93,.14); box-shadow: 0 0 24px rgba(255,93,93,.3); }
.cb--yes:hover { background: rgba(61,255,139,.12); box-shadow: 0 0 24px rgba(61,255,139,.25); }
.cb__hint { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.game__hint { margin: 0; padding: 11px 16px; border-top: 1px solid #1b2420; font-size: 12px; color: var(--dim); text-align: center; }
.card__status { padding: 6px 14px; border-top: 1px solid #1f2a25; font-family: var(--mono); font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 29px; background: #0a0e0c; }
.card__status.on { color: #ffd27a; }
.flag { cursor: help; transition: background .2s, box-shadow .2s; }
.flag.found { background: rgba(255,93,93,.22); box-shadow: 0 1px 0 var(--err); color: #ffc9c4; }
.card.reveal .flag:not(.found) { background: rgba(255,179,0,.2); box-shadow: 0 1px 0 #ffb000; color: #ffe2a8; }
.flag .num { display: none; }
.card.reveal .flag .num { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; background: #ffb000; color: #000; font: 700 10px var(--mono); vertical-align: 2px; }
.card.reveal .flag.found .num { background: var(--err); color: #fff; }
.stamp { position: absolute; top: 44px; font-family: var(--mono); font-weight: 700; font-size: 24px; letter-spacing: .1em; padding: 6px 14px; border: 3px solid; opacity: 0; pointer-events: none; transform: translateZ(30px) rotate(var(--r)); background: rgba(5,8,6,.7); }
.stamp--bad { right: 20px; color: var(--err); --r: 10deg; }
.stamp--ok { left: 20px; color: var(--g); --r: -10deg; }
.float { position: absolute; z-index: 20; font-family: var(--mono); font-weight: 700; font-size: 14px; pointer-events: none; animation: float .9s forwards; padding: 2px 6px; background: rgba(5,8,6,.85); }
.float.plus { color: var(--g); } .float.minus { color: var(--err); }
@keyframes float { to { transform: translateY(-40px); opacity: 0; } }

.banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; z-index: 15; pointer-events: none; opacity: 0; }
.banner b { display: block; font-family: var(--sans); font-size: clamp(30px, 5vw, 54px); font-weight: 800; letter-spacing: -0.02em; color: var(--fg); }
.banner span { color: var(--g); font-size: 13px; letter-spacing: .14em; }
.banner.show { animation: banner 1.9s forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.2); } 15%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.96); } }

.analysis { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(640px, 92%); max-height: 64%; overflow: auto; z-index: 12; background: rgba(8,12,10,.97); border: 1px solid #2f3f38; border-top: 3px solid var(--g); padding: 16px 20px 18px; animation: up .35s cubic-bezier(.2,1,.3,1); }
.analysis.bad { border-top-color: var(--err); }
@keyframes up { from { transform: translate(-50%, 30px); opacity: 0; } }
.an__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.an__head b { font-size: 20px; letter-spacing: -0.01em; }
.an__pts { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.an__pts em { color: var(--g); font-style: normal; }
.an__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.an__list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; }
.an__ico { width: 28px; height: 28px; display: grid; place-items: center; background: #16201b; font-family: var(--mono); font-size: 13px; color: #ffb000; }
.an__list li strong { display: block; color: var(--fg); }
.an__list li span { color: var(--mute); }
.an__tag { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; white-space: nowrap; }
.an__tag.f { color: var(--g); border: 1px solid rgba(61,255,139,.4); }
.an__tag.m { color: #ffb000; border: 1px solid rgba(255,179,0,.4); }
.an__go { font-family: var(--mono); font-size: 14px; color: #03140a; background: var(--g); padding: 9px 16px; font-weight: 700; }
.an__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.an__foot .mono { font-size: 11.5px; }

.pad { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #1b2420; }
.pad button { font-family: var(--mono); font-size: 14px; padding: 11px 18px; border: 1px solid; }
.pad__bad { color: var(--err); border-color: rgba(255,93,93,.5) !important; }
.pad__bad:hover { background: rgba(255,93,93,.1); }
.pad__ok { color: var(--g); border-color: rgba(61,255,139,.5) !important; }
.pad__ok:hover { background: var(--g-dim); }
.pad__hint { font-size: 12px; text-align: center; }

.screen { position: absolute; inset: 0; z-index: 30; background: rgba(5,7,6,.95); display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 5vw, 60px); overflow: auto; }
.screen[hidden] { display: none; }
.screen > .mono { font-size: 12px; letter-spacing: .12em; }
.screen h3 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.03em; margin: 10px 0 18px; font-weight: 800; }
.screen p { color: #c4cbc7; max-width: 56ch; margin: 0 0 10px; }
.signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 22px; max-width: 760px; }
.signals div { border: 1px solid #22302a; padding: 10px 12px; font-size: 13.5px; color: var(--mute); line-height: 1.4; }
.signals b { display: flex; gap: 8px; align-items: center; color: var(--fg); font-size: 14px; margin-bottom: 3px; }
.signals i { font-style: normal; font-family: var(--mono); color: #ffb000; }
.screen .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.stats { display: flex; gap: 36px; flex-wrap: wrap; font-family: var(--mono); margin: 4px 0 16px; }
.stats div { font-size: 11.5px; color: var(--mute); letter-spacing: .06em; }
.stats b { display: block; font-size: 32px; color: var(--fg); font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
.stats .rank { color: var(--g); }
.miss { margin: 0 0 18px; max-width: 620px; }
.miss div { display: grid; grid-template-columns: 170px 1fr 30px; gap: 12px; align-items: center; font-size: 13.5px; margin-bottom: 6px; color: var(--mute); }
.miss span.bar { height: 6px; background: #16201b; }
.miss span.bar i { display: block; height: 100%; background: #ffb000; }
.screen kbd { font-family: var(--mono); border: 1px solid #2c3a34; padding: 1px 6px; font-size: 12px; }

@media (max-width: 960px) {
  .map { grid-template-columns: 1fr; }
  .map__canvas { border-right: 0; border-bottom: 1px solid #22302a; }
  .office { height: 400px; }
  .office__hint { display: none; }
  .map__bar { flex-wrap: wrap; }
  .stage { height: 660px; perspective-origin: 50% 20%; }
  .deck { width: 86%; height: 490px; top: 48%; }
  .cb { width: 58px; height: 58px; }
  .cb__hint { display: none; }
  .card__act { gap: 48px; }
  .game__hint { font-size: 11px; }
  .portal { width: 34px; top: 10%; height: 70%; border-width: 1.5px; }
  .portal span, .portal small { display: none; }
  .portal--bad { left: -6px; } .portal--ok { right: -6px; }
  .hud__c { padding: 8px 10px; min-width: 0; flex: 1; }
  .hud__c:nth-child(3) { display: none; }
  .hud__c b { font-size: 15px; }
  #gLives i { width: 12px; }
  .card.judged { transform: translate3d(0, -150px, -200px) scale(.8) !important; }
  .analysis { max-height: 70%; padding: 14px; }
  .signals { grid-template-columns: 1fr 1fr; }
  .miss div { grid-template-columns: 120px 1fr 24px; }
}

@media (max-width: 960px) {
  .bar__nav { display: none; }
  .about { grid-template-columns: 1fr; }
  .photo { max-width: 220px; }
}
@media (max-width: 640px) {
  .bar { height: 60px; }
  .bar .btn--sm { display: none; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero { align-items: flex-end; padding-top: 90px; }
  .hero__media video { object-position: 74% 40%; opacity: .75; }
  .hero__media::after { background: linear-gradient(180deg, rgba(5,7,6,.2) 0%, rgba(5,7,6,.85) 55%, var(--bg) 100%); }
  .scan-hud { top: 76px; }
  .term__body { height: 420px; font-size: 13px; padding: 14px; }
  .btn { padding: 13px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }