/* theShowoff V5 · Hyperprostor
   Visual language from janek-ras.men: deep space, Win95 windows, WordArt and an Iron Man HUD. */

@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --space: #02030a; --ink: #eef1ff; --dim: #a9b2d6; --line: rgb(255 255 255 / .14);
  --chrome: #c3c3c3; --hi: #fff; --mid: #dfdfdf; --lo: #808080; --dk: #0a0a0a;
  --yellow: #ffcc33; --orange: #ff7a1a; --red: #e0401a; --cyan: #5ff2ff; --blue: #2f7bff; --green: #6dff9e; --pink: #ff5fd2; --violet: #b49aff;
  --sec-a: #2f7bff; --sec-b: #ff4fd8;
  --wa: Anton, Impact, "Arial Black", sans-serif;
  --ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --sans: Onest, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --vga: VT323, "Courier New", monospace;
  --gut: clamp(16px, 4vw, 48px);
  --warp: 0; --charge: 0;
  color-scheme: dark;
  font-synthesis: none;
}
[data-kind="kontakt"] { --ta: #7a0010; --tb: #e8a923; --k: var(--yellow); }
[data-kind="blog"] { --ta: #06217a; --tb: #2fc4ff; --k: var(--cyan); }
[data-kind="demos"] { --ta: #4a0a6a; --tb: #ff4fd8; --k: var(--pink); }
[data-kind="aplikace"] { --ta: #0a4a2a; --tb: #3fe08a; --k: var(--green); }
[data-kind="app"] { --ta: #2a1a6a; --tb: #9a7aff; --k: var(--violet); }
[data-kind="asistent"] { --ta: #5a1800; --tb: #ffa21a; --k: var(--orange); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 64px; }
/* clip, not hidden: anything wider than the screen must not widen the layout viewport on Android */
body { margin: 0; background: var(--space); color: var(--ink); font: 17px/1.62 var(--sans); overflow-x: clip; -webkit-tap-highlight-color: transparent; }
.no-gl body { background: radial-gradient(ellipse at 30% 20%, #1a1060 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, #3a0a40 0%, transparent 50%), var(--space); }
.booting body { overflow: hidden; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--cyan); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--yellow); color: #000; font-weight: 700; }
.skip:focus { top: 12px; }

#warp { position: fixed; inset: 0 auto auto 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; }
.no-gl #warp { display: none; }
.flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #dff4ff 35%, rgb(160 200 255 / .6) 70%, transparent 100%); }

/* ===== WordArt (as on janek-ras.men) ===== */
.wordart { --wa-g: linear-gradient(180deg, #fff6b0 0%, var(--yellow) 38%, #e0401a 64%, #7a0010 100%);
  display: inline-block; font: clamp(40px, 7vw, 92px)/.95 var(--wa); letter-spacing: .02em; text-transform: uppercase;
  padding: .16em .08em .04em 0; margin-top: -.16em; /* room for Czech accents, which background-clip would cut off */
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .9) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat, var(--wa-g);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 8s ease-in-out 1.2s infinite; transform: skewX(-9deg) rotate(-2deg); transform-origin: left center;
  filter: drop-shadow(1px 1px 0 #3a0000) drop-shadow(1px 1px 0 #3a0000) drop-shadow(1px 1px 0 #3a0000) drop-shadow(5px 6px 0 rgb(0 0 0 / .6)); }
.wordart.cool { --wa-g: linear-gradient(180deg, #e8fbff 0%, var(--cyan) 40%, var(--blue) 70%, #06217a 100%); animation-delay: 1.6s;
  filter: drop-shadow(1px 1px 0 #001033) drop-shadow(1px 1px 0 #001033) drop-shadow(1px 1px 0 #001033) drop-shadow(5px 6px 0 rgb(0 0 0 / .6)); }
.wordart.sm { font-size: clamp(34px, 5.4vw, 64px); }
@keyframes shine { 0% { background-position: 160% 0, 0 0; } 18%, 100% { background-position: -60% 0, 0 0; } }

/* Section titles: WordArt's little sibling, one gradient per sector */
.title { --g: linear-gradient(180deg, #fff6b0, var(--yellow) 45%, var(--orange) 75%, var(--red));
  font: clamp(34px, 4.6vw, 60px)/1 var(--wa); text-transform: uppercase; letter-spacing: .01em; margin: 6px 0 22px; padding-top: .14em;
  background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: skewX(-6deg); transform-origin: left; filter: drop-shadow(3px 4px 0 rgb(0 0 0 / .55)); }
.title.cool { --g: linear-gradient(180deg, #e8fbff, var(--cyan) 45%, var(--blue)); }
.title.green { --g: linear-gradient(180deg, #eafff1, var(--green) 45%, #1fae6a); }
.title.violet { --g: linear-gradient(180deg, #f3edff, var(--violet) 45%, #ff5fd2); }
.title.pink { --g: linear-gradient(180deg, #fff0fb, var(--pink) 45%, var(--yellow)); }

/* ===== Win95 chrome ===== */
/* Scrollbars as on janek-ras.men (ui/desktop.css): dithered track, bevelled thumb, arrow buttons.
   Firefox only takes colours; Chrome 121+ ignores ::-webkit-scrollbar once scrollbar-color is set, hence @supports. */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--chrome) #e4e4e4; } }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--chrome) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button:single-button, ::-webkit-scrollbar-corner { background-color: var(--chrome); }
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button:single-button { box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--mid), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--hi); }
::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-button:single-button:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--lo); background-position: calc(50% + 1px) calc(50% + 1px); }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 3h1V2h1V1h1V0h1v7H3V6H2V5H1V4H0z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E"); }
.win { position: relative; background: var(--chrome); color: #000; padding: 3px; font-family: var(--ui);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--mid), 8px 10px 0 rgb(0 0 0 / .45); }
.bar { position: relative; display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 3px 2px 6px; overflow: hidden;
  background: linear-gradient(90deg, var(--ta, #06217a), var(--tb, #2fc4ff)); color: #fff; font: 700 12px/1.2 var(--ui); }
.bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .45) 50%, transparent 60%) 200% 0 / 250% 100% no-repeat; animation: barshine 7s ease-in-out infinite; pointer-events: none; }
@keyframes barshine { 0%, 70% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
.bar .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgb(0 0 0 / .4); }
.ctl { display: flex; gap: 2px; }
.ctl i { width: 16px; height: 14px; background: var(--chrome); box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo); }
.ctl i:last-child { margin-left: 2px; }
.win-status { display: flex; justify-content: space-between; gap: 10px; margin-top: 3px; padding: 3px 6px; font: 11px/1.3 var(--ui); color: #222;
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.win-status > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inset { background: #fff; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--mid); }

.btn-hot { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 22px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 14px/1.1 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: #2a0800;
  background: linear-gradient(180deg, #fff1a0, #ffc21a 40%, #ff7a1a); box-shadow: inset -2px -2px 0 #a8380a, inset 2px 2px 0 #fff8d0, 4px 4px 0 rgb(0 0 0 / .55); }
.btn-hot:hover { filter: brightness(1.08); }
.btn-hot:active { box-shadow: inset 2px 2px 0 #a8380a, inset -2px -2px 0 #fff8d0; transform: translate(2px, 2px); }
.btn-sm { padding: 9px 14px; font-size: 12px; }
.btn-chrome { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 14px/1.1 var(--ui); color: #000; background: var(--chrome);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--mid), 4px 4px 0 rgb(0 0 0 / .55); }
.btn-chrome:active { box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--lo); transform: translate(2px, 2px); }
.mini { padding: 3px 8px; border: 0; cursor: pointer; font: 11px var(--ui); color: #000; background: var(--chrome); box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo); }
.mini:active, .mini[aria-pressed="true"] { box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--lo); }

/* ===== HUD ===== */
.hud { position: fixed; z-index: 50; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--gut); padding-top: max(10px, env(safe-area-inset-top));
  background: rgb(2 3 10 / .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / .06); }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 600 19px/1 var(--sans); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand b { font-weight: 800; }
.brand small { font: 700 10px/1 var(--mono); padding: 4px 5px; color: #000; background: var(--yellow); transform: skewX(-9deg); }
.brand-orb { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 0deg, var(--sec-a), var(--sec-b), var(--sec-a)); box-shadow: 0 0 14px var(--sec-a); animation: spin 4s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }
.hud-sector { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.hud-sector span { color: var(--dim); }
.hud-sector b { padding: 3px 6px; color: #000; background: var(--sec-a); transition: background .6s; }
.hud-sector i { font-style: normal; }
.hud-actions { display: flex; align-items: center; gap: 10px; }
.hud-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); background: rgb(255 255 255 / .04); cursor: pointer;
  font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.hud-btn:hover { color: var(--ink); border-color: rgb(255 255 255 / .35); }
.hud-led { width: 7px; height: 7px; background: #4a4f66; }
.hud-btn[aria-pressed="true"] { color: var(--ink); }
.hud-btn[aria-pressed="true"] .hud-led { background: var(--green); box-shadow: 0 0 8px var(--green); }

.map { position: fixed; z-index: 40; right: max(14px, env(safe-area-inset-right)); top: 50%; translate: 0 -50%; }
.map ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.map a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 5px 4px 5px 10px; text-decoration: none;
  font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .35); }
.map a b { order: 2; width: 26px; padding: 4px 0; text-align: center; border: 1px solid rgb(255 255 255 / .2); color: rgb(255 255 255 / .55); font-weight: 600; }
.map a:hover { color: var(--ink); }
.map a[aria-current] { color: var(--ink); }
.map a[aria-current] b { color: #000; background: var(--sec-a); border-color: var(--sec-a); box-shadow: 0 0 12px var(--sec-a); }

.telemetry { position: fixed; z-index: 40; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.telemetry b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.tele-pause { padding: 6px 8px; border: 1px solid var(--line); background: rgb(2 3 10 / .6); color: var(--dim); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.tele-pause:hover { color: var(--ink); }

.toast { position: fixed; z-index: 120; left: 50%; bottom: max(70px, calc(env(safe-area-inset-bottom) + 60px)); max-width: min(440px, calc(100vw - 32px));
  translate: -50% 12px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
  padding: 7px 11px; color: #000; background: #ffffe1; border: 1px solid #000; box-shadow: 3px 3px 0 rgb(0 0 0 / .5); font: 12px/1.4 var(--ui); }
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ===== sections ===== */
main { position: relative; z-index: 1; }
.sec { position: relative; max-width: 1280px; margin-inline: auto; padding: clamp(96px, 13vh, 150px) var(--gut); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.eyebrow span { padding: 4px 7px; color: #000; background: var(--cyan); }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head .wordart { margin: 18px 0 22px; }
.sec-head p:last-child { color: var(--dim); font-size: 18px; }
.copy > p:not(.eyebrow) { color: #d6dcf5; }
.copy > p + p { margin-top: 14px; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 9px; height: 9px; translate: 0 -1px; background: var(--sec-a); box-shadow: 0 0 10px var(--sec-a); }
.tech, .note { margin-top: 20px !important; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; color: var(--dim) !important; }
.note { padding-left: 12px; border-left: 2px solid var(--sec-b); }
.note b { color: var(--ink); }

[data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .7s, translate .7s cubic-bezier(.2, .8, .2, 1); }
[data-reveal="stagger"] { opacity: 1; translate: none; }
[data-reveal="stagger"] > * { opacity: 0; translate: 0 26px; transition: opacity .6s calc(var(--i, 0) * 80ms), translate .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 80ms); }
.is-in[data-reveal], .is-in[data-reveal] > * { opacity: 1; translate: none; }
html:not(.js) [data-reveal], html:not(.js) [data-reveal] > * { opacity: 1; translate: none; }

/* ----- hero ----- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 110px; padding-bottom: 90px; }
.kicker { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 26px; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-title { display: grid; justify-items: start; gap: .1em; margin-bottom: 34px; }
.hero-title .wordart { font-size: clamp(50px, 10.4vw, 158px); }
.hero-title .cool { margin-left: .5em; }
.charging .hero-title { animation: shake .07s linear infinite; }
@keyframes shake { 0% { translate: calc(var(--charge) * -4px) 0; } 50% { translate: calc(var(--charge) * 4px) calc(var(--charge) * 2px); } 100% { translate: 0 calc(var(--charge) * -2px); } }
.lead { max-width: 640px; font-size: clamp(17px, 1.6vw, 20px); color: #dfe4fb; text-shadow: 0 1px 12px var(--space); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.btn-hold { min-width: 290px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold-fill { position: absolute; inset: 0; transform-origin: left; scale: var(--charge) 1; background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / .75)); mix-blend-mode: soft-light; pointer-events: none; }
.btn-hold.is-holding { animation: hum .1s linear infinite; }
@keyframes hum { 50% { translate: 1px -1px; } }
.hold-label { position: relative; }
.hint { margin-top: 18px; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; color: var(--dim); }
.hint-touch, .touch .hint-fine { display: none; }
.touch .hint-touch { display: block; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; width: 26px; height: 42px; border: 2px solid rgb(255 255 255 / .4); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: var(--cyan); border-radius: 2px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }

/* ----- services ----- */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.svc { transition: translate .25s, box-shadow .25s; }
.svc:hover { translate: -3px -4px; box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--mid), 12px 14px 0 rgb(0 0 0 / .5), 0 0 40px -6px var(--k); }
.svc-body { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 16px 14px 14px; }
.svc .ico { grid-row: span 2; width: 48px; height: 48px; image-rendering: pixelated; }
.svc h3 { font: 700 17px/1.2 var(--ui); align-self: end; }
.svc p { font: 13px/1.5 var(--ui); color: #222; }
.svc a { grid-column: 1 / -1; justify-self: start; margin-top: 10px; padding: 6px 10px; font: 700 12px/1.2 var(--ui); color: #000; text-decoration: none; background: var(--chrome);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo); }
.svc a:hover { background: var(--k); }

/* ----- demo layout ----- */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 80px); align-items: center; min-height: 100svh; }
.demo-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.demo-flip .copy { order: 2; }
.demo-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.stage { margin: 0; min-width: 0; }

/* ----- 01 · site ----- */
.desk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { padding: 7px 12px; border: 0; cursor: pointer; font: 700 12px var(--ui); color: #000; background: var(--chrome);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo); }
.presets button[aria-pressed="true"] { box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--lo); background: var(--mid); }
.zoom { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--dim); }
/* The desk: a fixed-size surface the window lives on, so nothing below it moves while you resize. */
.site-frame { position: relative; height: clamp(400px, 66svh, 660px); overflow: clip; touch-action: pan-y;
  background: radial-gradient(circle, rgb(95 242 255 / .16) 1px, transparent 1.6px) 0 0 / 24px 24px, rgb(4 8 26 / .72);
  box-shadow: inset 0 0 0 1px rgb(95 242 255 / .25), inset 0 0 40px rgb(0 0 0 / .5); }
.browser { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; width: var(--w, 720px); height: var(--h, 560px); transform: scale(var(--s, 1)); transform-origin: 0 0; }
.browser.anim { transition: width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1); }
.browser .bar, .browser .address, .browser .win-status { flex: none; }
.address { display: flex; gap: 6px; align-items: center; margin: 3px 0; padding: 2px 4px; font: 11px var(--ui); }
.address span:last-child { flex: 1; padding: 3px 6px; background: #fff; font-family: "Courier New", monospace; white-space: nowrap; overflow: hidden; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.grip { position: absolute; z-index: 2; right: 2px; bottom: 2px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--lo) 50% 56%, var(--hi) 56% 62%, transparent 62% 68%, var(--lo) 68% 74%, var(--hi) 74% 80%, transparent 80% 86%, var(--lo) 86% 92%, var(--hi) 92%); }
.grip::after { content: ""; position: absolute; inset: -12px; }
.edge { position: absolute; z-index: 1; touch-action: none; }
.edge-r { top: 26px; bottom: 26px; right: -6px; width: 12px; cursor: ew-resize; }
.edge-b { left: 0; right: 26px; bottom: -6px; height: 12px; cursor: ns-resize; }
.grip-hint { position: absolute; right: 26px; bottom: 26px; padding: 4px 8px; font: 11px/1.2 var(--ui); color: #000; background: #ffffe1; border: 1px solid #000; white-space: nowrap; pointer-events: none; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 6px 6px; } }

.site { --bg: #fdf6ec; --fg: #2a1d14; --mut: #7b6656; --acc: #e0542a; --card: #fff; --line2: #ecdccb;
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  container: site / size; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.site[data-theme="night"] { --bg: #120d1f; --fg: #f6eee6; --mut: #b6a8c9; --acc: #ffb347; --card: #1f1833; --line2: #2f2547; }
.s-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.s-head.open .s-nav { display: grid; position: absolute; z-index: 2; left: 0; right: 0; top: 100%; gap: 10px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line2); }
.s-logo { font: 800 18px/1 var(--sans); letter-spacing: -.02em; margin-right: auto; white-space: nowrap; }
.s-logo span { color: var(--acc); }
.s-nav { display: none; gap: 18px; font-size: 14px; }
.s-nav a { text-decoration: none; color: var(--mut); }
.s-nav a:hover { color: var(--fg); }
.s-theme, .s-burger { width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 50%; background: var(--card); color: var(--fg); cursor: pointer; font-size: 15px; line-height: 1; }
.s-burger { border-radius: 8px; }
.s-hero { display: grid; gap: 18px; padding: 22px 16px; }
.s-kick { font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.s-hero h3 { margin: 10px 0; font: 800 clamp(24px, 7.4cqi, 50px)/1.04 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.s-hero p { color: var(--mut); max-width: 40ch; }
.s-cta { display: inline-block; margin-top: 16px; padding: 11px 18px; border-radius: 999px; background: var(--acc); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.site[data-theme="night"] .s-cta { color: #1a1020; }
.s-art { position: relative; order: -1; height: 130px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #ff9a4a, #ffd49a 72%); }
.site[data-theme="night"] .s-art { background: linear-gradient(180deg, #07061a, #3a1a4a 78%); }
.s-sun { position: absolute; left: 56%; top: 14%; width: 46px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff6c8, #ffc23a 55%, #ff7a1a); box-shadow: 0 0 34px #ffb34aaa; animation: sun 3.4s ease-in-out infinite alternate; transition: top .6s; }
.s-sun.two { left: 74%; top: 30%; width: 30px; background: radial-gradient(circle at 40% 40%, #fff, #ffe08a 50%, #ff9a3a); animation-delay: -1.7s; }
.site[data-theme="night"] .s-sun { top: 64%; }
.site[data-theme="night"] .s-sun.two { top: 72%; }
.s-dune { position: absolute; left: -15%; right: -15%; bottom: -34%; height: 62%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #e3a35c; box-shadow: -60px -14px 0 -10px #f0b874; }
.site[data-theme="night"] .s-dune { background: #2a1a3a; box-shadow: -60px -14px 0 -10px #3a2550; }
.s-glass { position: absolute; left: 22%; bottom: 12%; height: min(64px, 62%); aspect-ratio: 42 / 64; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: linear-gradient(90deg, transparent 18%, #ffffff66 24%, transparent 34%), linear-gradient(#fff9 0 4px, #ffffff40 4px 20%, #8fd0ff 20%, #4a9ae8); }
/* Two travellers on the crest of the dune. */
.s-bots { position: absolute; left: 50%; bottom: 27.5%; height: max(11%, 18px); aspect-ratio: 152 / 210; translate: -50% 0; fill: #111; }
.s-bots .back { fill: #262626; }
.site[data-theme="night"] .s-bots, .site[data-theme="night"] .s-bots .back { fill: #0b0714; }
@keyframes sun { to { box-shadow: 0 0 52px #ffb34add; scale: 1.05; } }
.s-cards { list-style: none; margin: 0; padding: 0 16px 18px; display: grid; gap: 10px; }
.s-cards li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; }
.s-cards span:last-child { color: var(--mut); font-variant-numeric: tabular-nums; }
.s-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18); }
.s-foot { display: grid; gap: 2px; padding: 14px 16px; border-top: 1px solid var(--line2); color: var(--mut); font-size: 13px; }
@container site (min-width: 540px) {
  .s-nav { display: flex; }
  .s-burger { display: none; }
  .s-cards { grid-template-columns: repeat(3, 1fr); }
  .s-cards li { grid-template-columns: auto 1fr; }
  .s-cards li span:last-child { grid-column: 2; }
  .s-foot { display: flex; justify-content: space-between; }
}
@container site (min-width: 760px) {
  .s-head { padding: 16px 28px; }
  .s-hero { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 28px; padding: 40px 28px; }
  .s-art { order: 0; height: 100%; min-height: 230px; }
  .s-cards { padding: 0 28px 28px; gap: 16px; }
  .s-cards li { grid-template-columns: auto 1fr auto; padding: 16px; }
  .s-cards li span:last-child { grid-column: auto; }
  .s-foot { padding: 16px 28px; }
}
/* A low, narrow window (a phone on its side) makes the picture stacked above the offer shorter, so the
   offer stays in view. Wider windows keep it full size, there it sits beside the text. */
@container site (max-height: 480px) and (max-width: 759px) {
  .s-art { height: clamp(60px, 24cqh, 130px); }
  .s-hero { padding-block: 16px; }
  .s-hero h3 { font-size: clamp(22px, 4.6cqi, 34px); }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(minisite), ::view-transition-new(minisite) { animation: none; mix-blend-mode: normal; }

.scores { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 22px; }
.scores li { display: flex; align-items: center; gap: 10px; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.scores b { display: grid; place-items: center; width: 50px; aspect-ratio: 1; border-radius: 50%; font: 700 15px var(--mono); color: var(--green);
  background: radial-gradient(closest-side, var(--space) 78%, transparent 80% 100%), conic-gradient(var(--green) calc(var(--p) * 1%), rgb(109 255 158 / .15) 0); transition: --p 1.6s cubic-bezier(.2, .8, .2, 1); }
.stage-site.is-scored .scores b { --p: var(--v); }
.stage figcaption { margin-top: 10px; font: 500 10px/1.5 var(--mono); letter-spacing: .06em; color: var(--dim); }

/* ----- 02 · board ----- */
.app { user-select: none; -webkit-user-select: none; }
.kpis { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 3px; margin: 3px 0; }
.kpis p { padding: 6px 10px; background: #fff; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); font: 11px/1.3 var(--ui); color: #444; }
.kpis b { display: block; font: 700 18px/1.2 var(--ui); color: #000; font-variant-numeric: tabular-nums; }
.kpis b.bump { animation: bump .5s; }
@keyframes bump { 30% { color: #0a8a4a; scale: 1.08; } }
.spark { width: 100%; height: 52px; align-self: center; background: #0a1a12; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.col { min-height: 300px; padding: 6px; background: #fff; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk); transition: background .15s; }
.col h3 { display: flex; justify-content: space-between; margin-bottom: 6px; padding: 2px 4px; font: 700 12px/1.3 var(--ui); background: var(--chrome); }
.col h3 span { font-weight: 400; color: #444; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; min-height: 240px; }
.col.over { background: #e9fff1; outline: 2px dashed #0a8a4a; outline-offset: -4px; }
.card { --src: #2fc4ff; position: relative; touch-action: pan-y; cursor: grab; padding: 6px 8px 6px 10px; font: 11px/1.35 var(--ui); background: #fffef5; border: 1px solid #b9b9a8; border-left: 4px solid var(--src); box-shadow: 1px 1px 0 rgb(0 0 0 / .15); }
.card[data-src="bar"] { --src: #ff5fd2; }
.card[data-src="app"] { --src: #3fe08a; }
.card[data-src="agent"] { --src: #9a7aff; }
.card[data-src="ai"] { --src: #ffa21a; }
.card-top { display: flex; justify-content: space-between; gap: 6px; }
.card-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-src { flex: none; padding: 0 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--src); }
.card-items { margin: 3px 0; color: #333; }
.card-foot { display: flex; justify-content: space-between; align-items: center; color: #555; }
.card-next { width: 22px; height: 18px; border: 0; padding: 0; cursor: pointer; font: 11px var(--ui); color: #000; background: var(--chrome); box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi); }
.card-grip { position: absolute; inset: 0 26px 18px 0; cursor: grab; touch-action: none; }
.card.lifted { z-index: 20; cursor: grabbing; box-shadow: 6px 10px 0 rgb(0 0 0 / .3); }
.card.held { outline: 2px solid var(--who); z-index: 10; }
.card.fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { 0% { background: #fff27a; translate: 0 -8px; opacity: 0; } 20% { opacity: 1; translate: none; } }
.card.gone { animation: gone .4s forwards; }
@keyframes gone { to { opacity: 0; scale: .9; } }
.ghosts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.ghost { position: absolute; left: 0; top: 0; will-change: transform; }
.ghost svg { width: 14px; height: 20px; display: block; filter: drop-shadow(1px 1px 0 rgb(0 0 0 / .5)); }
.ghost span { position: absolute; left: 12px; top: 16px; padding: 1px 5px; font: 700 10px/1.4 var(--ui); color: #000; background: var(--who); white-space: nowrap; }
.live { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #0a8a4a; animation: live 1.4s infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 4px rgb(10 138 74 / .25); } }

/* ----- 03 · B4-RM4N (.jarvis) ----- */
.jarvis { position: relative; padding: 20px; color: #dff9ff; font: 14px/1.5 var(--sans);
  background: linear-gradient(160deg, rgb(10 30 50 / .82), rgb(30 12 4 / .82)); border: 1px solid rgb(95 242 255 / .35);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 0 60px -10px rgb(95 242 255 / .35), inset 0 0 40px rgb(95 242 255 / .06); backdrop-filter: blur(6px); }
.brk { position: absolute; width: 18px; height: 18px; border: 2px solid var(--cyan); }
.brk.tl { left: -4px; top: -4px; border-right: 0; border-bottom: 0; }
.brk.tr { right: -4px; top: -4px; border-left: 0; border-bottom: 0; }
.brk.bl { left: -4px; bottom: -4px; border-right: 0; border-top: 0; }
.brk.br { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
.j-top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.orb { width: 120px; height: 120px; flex: none; }
.j-name { font: 700 13px/1.2 var(--mono); letter-spacing: .16em; color: var(--cyan); }
.j-name small { color: var(--orange); font-size: 11px; }
.j-state { margin: 6px 0 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.j-state.busy { color: var(--orange); }
.j-speak { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); color: var(--dim); cursor: pointer; }
.j-speak input { accent-color: var(--orange); width: 15px; height: 15px; }
.j-speak.na { opacity: .55; cursor: not-allowed; }
.chat { list-style: none; margin: 0; padding: 4px 4px 4px 0; display: grid; gap: 10px; align-content: start; height: 290px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(95 242 255 / .4) transparent; }
.chat li { max-width: 88%; padding: 9px 12px; border-radius: 3px; }
.chat .me { justify-self: end; background: rgb(255 162 26 / .16); border: 1px solid rgb(255 162 26 / .45); }
.chat .ai { background: rgb(95 242 255 / .07); border: 1px solid rgb(95 242 255 / .3); }
.chat .ai::before { content: "B4-RM4N"; display: block; margin-bottom: 3px; font: 700 9px/1 var(--mono); letter-spacing: .16em; color: var(--cyan); }
.chat .think { color: var(--dim); font-style: italic; }
.chat .extra { margin-top: 8px; }
.chat .act { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.chat .act button { padding: 6px 10px; border: 1px solid var(--cyan); background: rgb(95 242 255 / .1); color: var(--cyan); cursor: pointer; font: 600 11px var(--mono); }
.chat .act button:disabled { opacity: .5; cursor: default; }
.quote { padding: 8px 10px; border-left: 3px solid var(--orange); background: rgb(0 0 0 / .3); font-size: 13px; }
.quote small { display: block; margin-top: 3px; color: var(--dim); font: 10px var(--mono); }
.receipt { width: 190px; padding: 10px 12px 14px; color: #222; background: #fbf8ef; font: 11px/1.45 "Courier New", monospace;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 93% 96%, 86% 100%, 79% 96%, 72% 100%, 65% 96%, 58% 100%, 51% 96%, 44% 100%, 37% 96%, 30% 100%, 23% 96%, 16% 100%, 9% 96%, 0 100%); }
.receipt p { display: flex; justify-content: space-between; gap: 8px; }
.receipt .scanline { position: relative; }
.scan-wrap { position: relative; display: inline-block; }
.scan-wrap::after { content: ""; position: absolute; left: -6px; right: -6px; height: 3px; top: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: scan 1.1s ease-in-out 2 alternate forwards; }
@keyframes scan { to { top: 100%; } }
.extract { width: 100%; border-collapse: collapse; font: 12px/1.4 var(--mono); }
.extract td { padding: 3px 6px; border-bottom: 1px solid rgb(95 242 255 / .2); }
.extract td:last-child { text-align: right; color: var(--cyan); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.chips button { padding: 7px 10px; border: 1px solid rgb(95 242 255 / .4); background: rgb(95 242 255 / .06); color: #dff9ff; cursor: pointer; font: 500 12px/1.2 var(--sans); }
.chips button:hover { background: rgb(95 242 255 / .16); border-color: var(--cyan); }
.chips button:disabled, .ask button:disabled { opacity: .45; cursor: default; }
.ask { display: flex; gap: 6px; }
.ask input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid rgb(95 242 255 / .4); background: rgb(0 0 0 / .35); color: #fff; }
.ask input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgb(95 242 255 / .25); }
.ask button { padding: 0 14px; border: 0; cursor: pointer; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #001a20; background: var(--cyan); }
.ask .mic { display: grid; place-items: center; width: 42px; padding: 0; color: var(--cyan); background: transparent; border: 1px solid rgb(95 242 255 / .4); }
.ask .mic svg { width: 16px; height: 16px; fill: currentColor; }
.ask .mic.on { color: #000; background: var(--orange); border-color: var(--orange); animation: live 1s infinite; }

/* ----- 04 · agent ----- */
.stage-agent { display: grid; }
.floor { margin-right: clamp(0px, 5%, 48px); }
.console { margin: 12px 0 0 clamp(0px, 5%, 48px); z-index: 2; }
.slots { display: flex; gap: 3px; margin: 3px 0; }
.slots button { flex: 1; padding: 5px 0; border: 0; cursor: pointer; font: 700 11px var(--ui); color: #000; background: var(--chrome); box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo); }
.slots button[aria-pressed="true"] { background: var(--mid); box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--lo); }
.plan { display: block; width: 100%; height: auto; max-height: min(540px, 70svh); background: #f4ecdf; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.plan .mass { fill: #c99a6e; }
.plan .floor { fill: #f6eacb; }
.plan .line { fill: none; stroke: #8a6a4a; stroke-width: 2; }
.plan .door { fill: #5a4636; }
.plan .power { fill: #e4d6b4; }
.plan .equip { fill: #8d8a86; }
.plan .pipe { fill: none; stroke: #3a3530; stroke-width: 2.5; }
.plan .stage { fill: #3a2d5a; }
.plan .counter { fill: #e8bf55; stroke: #8a5a3a; stroke-width: 6; }
.plan .dispenser { fill: #6a4228; }
.plan .tap { fill: #b7b0a6; }
.plan .stool { fill: #c4a27a; }
.plan .deco { fill: #d4cdc2; stroke: #9a9289; stroke-width: 1.5; }
.plan .steps { fill: none; stroke: #8a6a4a; stroke-width: 2; }
.plan .detector { fill: #c0392b; }
.plan .tether { stroke: #8a5a3a; stroke-width: 8; stroke-linecap: round; }
.plan .bench { fill: #a8714a; transition: fill .3s; }
.plan .tbl.mine .bench { fill: #ff9a2a; }
.plan .bench-line { fill: none; stroke: #5e3a22; stroke-width: 1.2; }
.plan .tbl.mine .bench-line { stroke: #a85a10; }
.plan .tbl { cursor: pointer; }
.plan .tbl:focus { outline: none; }
.plan .tbl:focus-visible .top { stroke: #2f7bff; stroke-width: 3; }
.plan .top { fill: #fff; stroke: #2a9a5a; stroke-width: 2; transition: fill .3s, stroke .3s; }
.plan .tbl.taken { cursor: not-allowed; }
.plan .tbl.taken .top { fill: #cfc8bd; stroke: #9a9289; }
.plan .tbl.mine .top { fill: #ffe9a8; stroke: #e07a1a; stroke-width: 3; }
.plan .tbl.scan .top { stroke: #9a7aff; stroke-width: 3; }
.plan text { font: 700 13px var(--ui); fill: #3a2d22; pointer-events: none; }
.plan .who { font-size: 12px; fill: #b04a00; }
.plan .tiny { font-size: 10px; fill: #8a6a4a; letter-spacing: .04em; }
.plan .tiny.light { fill: #f6eacb; }
.plan .band { font-size: 11px; fill: #ffcc33; }
.plan .sign { font-size: 9.5px; fill: #b04a00; }
.legend { display: inline-flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 9px; height: 9px; border: 2px solid; }
.lg-free { border-color: #2a9a5a !important; background: #fff; }
.lg-taken { border-color: #9a9289 !important; background: #cfc8bd; }
.lg-mine { border-color: #e07a1a !important; background: #ffe9a8; }
.tasks { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.tasks button { flex: 1 1 auto; padding: 6px 8px; border: 0; cursor: pointer; font: 700 11px var(--ui); color: #000; background: var(--chrome); box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--lo); }
.tasks button:disabled { color: var(--lo); text-shadow: 1px 1px 0 #fff; cursor: default; }
.log { list-style: none; margin: 0; padding: 8px 10px; height: 210px; overflow-y: auto; background: #0b0920; color: #d9d2ff; font: 11.5px/1.55 var(--mono);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk); }
.log li { white-space: pre-wrap; overflow-wrap: anywhere; }
.log .think { color: #a99ce0; font-style: italic; }
.log .call { color: #ffcc33; }
.log .res { color: #6dff9e; }
.log .done { color: #fff; font-weight: 700; }
.log .human { color: #5ff2ff; }
.log .ext { color: #ff5fd2; }
.log .err { color: #ff6a5a; }
.log:empty::before { content: "C:\\KANTYNA> čekám na úkol_"; color: #6e66a0; }
.tool-list { margin-top: 3px; padding: 4px 6px; font: 11px/1.4 var(--ui); }
.tool-list summary { cursor: pointer; font-weight: 700; }
.tool-list ul { margin: 6px 0 2px; padding-left: 16px; }
.tool-list code { font: 700 11px "Courier New", monospace; color: #2a1a6a; }

/* ----- 05 · device ----- */
.panel-body { display: grid; gap: 3px; margin-top: 3px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px; background: #fff; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk); }
.tile { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border: 1px dotted transparent; background: none; cursor: pointer; font: 11px/1.2 var(--ui); color: #000; text-align: center; }
.tile svg { width: 34px; height: 34px; image-rendering: pixelated; }
.tile:hover { border-color: #000; }
.tile[aria-pressed="true"] { background: #000080; color: #fff; }
.tile small { font-size: 9px; color: #777; }
.tile[aria-pressed="true"] small { color: #c8d0ff; }
.tile.na { opacity: .5; }
.monitor { padding: 10px; background: #2b2b2b; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px / 14px; background: radial-gradient(ellipse at center, #08140c, #020604 80%); box-shadow: inset 0 0 40px rgb(0 0 0 / .9), 0 0 0 3px #111; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px); }
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen-text { position: absolute; inset: 0; padding: 14px 16px; overflow: hidden; color: #6dff9e; font: 19px/1.15 var(--vga); text-shadow: 0 0 6px rgb(109 255 158 / .6); }
.screen-text p { margin: 0; }
.screen-text .big { font-size: clamp(26px, 4vw, 40px); line-height: 1; color: #ffcc33; text-shadow: 0 0 10px rgb(255 204 51 / .6); }
.screen-text .w { transition: color .1s; }
.screen-text .w.on { color: #ffcc33; }
.screen-text .act { margin-top: 10px; display: inline-block; padding: 4px 10px; border: 1px solid #6dff9e; background: none; color: #6dff9e; font: inherit; cursor: pointer; }
.screen-text .tag { display: inline-block; padding: 1px 6px; font-size: 16px; color: #ffcc33; background: rgb(0 0 0 / .65); }
.screen.shake { animation: shake-scr .09s linear 7; }
@keyframes shake-scr { 25% { translate: -4px 1px; } 50% { translate: 3px -2px; } 75% { translate: -2px -1px; } }
.use { margin-top: 10px; padding: 0 2px; font: 12px/1.45 var(--ui); color: #ddd; }
.use b { color: #ffcc33; }

/* ----- 06 · game ----- */
.arcade { padding: clamp(14px, 2.4vw, 24px); background: linear-gradient(160deg, #3a0a5a, #1a0630 60%, #2a0a3a); border: 3px solid #000;
  box-shadow: inset 0 0 0 3px #ff4fd8, inset 0 0 0 6px #000, 10px 12px 0 rgb(0 0 0 / .5), 0 0 60px -10px rgb(255 79 216 / .5); }
.crt { position: relative; overflow: hidden; border-radius: 18px / 22px; background: #050a14; box-shadow: inset 0 0 50px rgb(0 0 0 / .95), 0 0 0 4px #000; container-type: inline-size; }
.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / .55)); }
.game { display: block; width: 100%; aspect-ratio: 16 / 10; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.g-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 8px 14px; font: clamp(18px, 4.2cqi, 28px)/1 var(--vga); color: #fff; text-shadow: 2px 2px 0 #000; pointer-events: none; }
.g-hud b { color: #ffcc33; }
.g-combo { color: #ff5fd2; }
.g-hull { display: inline-flex; align-items: center; gap: .3em; }
.g-hull b { color: #9be8ff !important; letter-spacing: .04em; }
.g-hull i { font-style: normal; }
.g-power { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; align-self: flex-start; }
.pw { display: flex; align-items: center; gap: .4em; font-size: .62em; color: var(--c); }
.pw em { font-style: normal; }
.pw i { width: 4.5em; height: .5em; border: 1px solid var(--c); background: linear-gradient(90deg, var(--c) var(--fill), transparent 0); }
.crt.playing .game { cursor: none; }
.g-name { display: flex; gap: 6px; }
.g-name[hidden], .g-board[hidden] { display: none; }
.g-name input { width: 11em; padding: 6px 8px; border: 0; font: clamp(16px, 3.4cqi, 20px) var(--vga); color: #000; background: #fff;
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk); }
.g-name .btn-chrome { padding: 6px 12px; }
.g-board { list-style: none; margin: 0; padding: 0; width: min(100%, 20em); font: clamp(14px, 3cqi, 19px)/1.15 var(--vga); color: #dfe4fb; text-align: left; }
.g-board li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .5em; }
.g-board span { color: var(--dim); }
.g-board b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-board i { font-style: normal; color: #ffcc33; }
.g-board .mine, .g-board .mine i { color: #9be8ff; }
@container (max-width: 480px) { .g-board li:nth-child(n + 6) { display: none; } }
.g-solo { display: inline-block; margin-top: 14px; font: 500 12px var(--mono); color: var(--cyan); }
.g-screen { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; background: rgb(5 10 20 / .78); }
.g-screen[hidden] { display: none; }
.g-screen p:not(.g-title) { max-width: 36ch; font: clamp(17px, 3.6cqi, 22px)/1.25 var(--vga); color: #dfe4fb; }
.g-screen .g-title { font-size: clamp(28px, 9cqi, 64px); transform: skewX(-9deg) rotate(-2deg); }
@container (max-width: 460px) {
  .g-screen { gap: 8px; padding: 12px; }
  .g-screen [data-g-text]:not(.result), .g-best { display: none; }
  .g-screen .btn-hot, .g-screen .btn-chrome { padding: 10px 14px; font-size: 12px; }
}
.g-pop { position: absolute; translate: -50% -50%; pointer-events: none; font: clamp(18px, 4.6cqi, 30px)/1 var(--vga); color: #fff; text-shadow: 2px 2px 0 #000; animation: gpop .9s ease-out forwards; }
.g-pop.gold { color: #ffcc33; }
.g-pop.bad { color: #ff6a5a; }
@keyframes gpop { to { translate: -50% -180%; opacity: 0; } }
.g-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.g-best { color: var(--dim) !important; }
.g-best b { color: #ffcc33; }
.g-prize { padding: 6px 12px; border: 2px dashed #ffcc33; color: #ffcc33 !important; }
.arcade-label { margin-top: 12px; text-align: center; font: 20px/1 var(--vga); letter-spacing: clamp(.08em, 1vw, .3em); color: #ff9ae8; text-shadow: 0 0 10px #ff4fd8; }

/* ----- process ----- */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); position: relative; }
.route::before { content: ""; position: absolute; left: 8%; right: 8%; top: 34px; border-top: 2px dashed rgb(95 242 255 / .35); }
.route li { position: relative; padding: 0 4px; }
.route b { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 18px; font: 40px/1 var(--wa); color: #000; background: linear-gradient(180deg, #e8fbff, var(--cyan) 50%, var(--blue)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.route h3 { font: 700 21px/1.25 var(--sans); margin-bottom: 8px; }
.route p { color: var(--dim); }

/* ----- contact ----- */
.contact { display: grid; justify-items: center; text-align: center; }
.contact .sec-head { display: grid; justify-items: center; }
.mail { width: min(680px, 100%); text-align: left; }
.mail-form { display: grid; gap: 3px; padding: 3px 0 0; font: 13px/1.4 var(--ui); }
.mf-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.mf-row > span, .mf-msg > span { width: 54px; flex: none; color: #222; }
.mf-row a { flex: 1; min-width: 0; padding: 4px 8px; background: #fff; color: #000080; font-weight: 700; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.mf-topics { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 6px 8px 8px 70px; border: 0; position: relative; }
.mf-topics legend { position: absolute; left: 8px; top: 6px; padding: 0; color: #222; }
.mf-topics label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.mf-hint { padding: 0 8px 6px 70px; font-size: 11px; color: #555; }
.mf-msg { display: flex; gap: 8px; padding: 0 8px; }
.mf-msg textarea { flex: 1; min-width: 0; resize: vertical; padding: 6px 8px; border: 0; background: #fff; color: #000; font: 13px/1.45 var(--ui); box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dk); }
.mf-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 8px 8px 70px; font-size: 11px; color: #444; }
.mail.sent { animation: sent .9s cubic-bezier(.5, 0, .7, .4); }
@keyframes sent { 60% { transform: scale(.4) translate(0, -40px); opacity: .3; } 61% { transform: scale(.4) translate(0, 40px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ----- credits ----- */
.credits { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 40px var(--gut) 120px; text-align: center; color: var(--dim); font: 500 12px/1.8 var(--mono); }
.credits .eyebrow { justify-content: center; margin-bottom: 14px; }
.cast { margin-bottom: 14px !important; }
.cast span { display: inline-block; margin: 3px; padding: 2px 8px; border: 1px solid var(--line); color: var(--ink); }

/* ===== boot ===== */
.boot { position: fixed; inset: 0; z-index: 200; padding: max(22px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px); background: #000; color: #b8b8b8; font: clamp(17px, 2.1vw, 23px)/1.22 var(--vga); overflow: hidden; }
.boot-out p { white-space: pre-wrap; }
.boot .dim { color: #707070; }
.boot .row b { color: #fff; font-weight: 400; }
.boot .row em { margin-left: 1ch; font-style: normal; }
.boot .ok { color: #6dff9e; }
.boot .na { color: #707070; }
.boot .caps span { display: inline-block; margin-right: 1.2ch; opacity: 0; animation: capin .01s steps(1) forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes capin { to { opacity: 1; } }
.boot .go { color: #ffcc33; }
.boot-logo { position: absolute; right: clamp(16px, 4vw, 48px); top: 22px; display: flex; align-items: center; gap: 8px; }
.boot-logo span { font: 46px/1 var(--wa); color: transparent; background: linear-gradient(180deg, #fff6b0, var(--yellow) 40%, var(--red)); -webkit-background-clip: text; background-clip: text; transform: skewX(-10deg); }
.boot-logo small { font: 16px/1 var(--vga); color: var(--cyan); text-transform: uppercase; }
.boot-foot { position: absolute; left: clamp(16px, 4vw, 48px); bottom: max(18px, env(safe-area-inset-bottom)); color: #707070; }
.boot-foot b { color: #fff; font-weight: 400; }
.boot.off { animation: crtoff .42s cubic-bezier(.6, 0, .9, .5) forwards; }
@keyframes crtoff { 0% { filter: brightness(1); } 40% { transform: scale(1, .006); filter: brightness(3); } 100% { transform: scale(0, .006); filter: brightness(6); opacity: .2; } }

/* ===== responsive ===== */
@media (max-width: 1199px) { .map { display: none; } }
@media (max-width: 1000px) {
  .demo, .demo-wide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .demo-flip .copy { order: 0; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copy { max-width: 680px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .hud-sector { display: none; }
  .hud .btn-sm { display: none; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-hold { min-width: 0; width: 100%; }
  .actions .btn-chrome { width: 100%; }
  .hero-title .cool { margin-left: .2em; }
  .route { grid-template-columns: minmax(0, 1fr); }
  .route::before { left: 34px; right: auto; top: 34px; bottom: 34px; border-top: 0; border-left: 2px dashed rgb(95 242 255 / .35); }
  .route li { display: grid; grid-template-columns: 68px 1fr; gap: 0 16px; }
  .route b { grid-row: span 2; margin: 0; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis .spark { grid-column: 1 / -1; height: 40px; }
  .kpis b { font-size: 15px; }
  .col { padding: 4px; min-height: 260px; }
  .card { padding: 5px 5px 5px 7px; font-size: 10px; }
  .card-src { display: none; }
  .orb { width: 88px; height: 88px; }
  .jarvis { padding: 14px; }
  .chat { height: 320px; }
  .chat li { max-width: 94%; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile svg { width: 28px; height: 28px; }
  .console { margin-left: 0; margin-top: 12px; }
  .floor { margin-right: 0; }
  .mf-topics, .mf-hint, .mf-send { padding-left: 8px; }
  .mf-topics legend { position: static; width: 100%; margin-bottom: 2px; }
  .telemetry, .scroll-cue { display: none; }
  .scores { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wordart, .bar::after { animation: none; }
}
.still .wordart, .still .bar::after, .still .brand-orb, .still .blink, .still .scroll-cue span, .still .s-sun { animation: none; }