/* The Cymetica Quest, step by step: ninth take. Clear crystal glass (the bar, the prize board, the leaderboard, the two
   doors at the end): the dark seen through it, a glossy highlight on it, a bright rim that catches the light in the
   site's cyan and green. Under every heading the words are small ("to co je pod hlavnim napisem musi byt mensi
   mnohem") and no point stands on a tile ("ty ikonky vsude ... jsou to vsude takove stejne kostky"). Cymetica's
   palette: green on the prize and the call, cyan for the way, blue for the third place, red only for a loss. */
:root {
  --bg: #05070c; --deep: #06090f; --line: #1e3050; --text: #eef6fa; --dim: #a9bfcd; --mute: #7f93ad;
  --green: #00ff88; --cyan: #00cfff; --blue: #3b82f6; --red: #ff4444;
  --rs1: #00ff88; --rs2: #00cfff; --rs3: #3b82f6;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fade: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; }
body { min-height: 100vh; font-family: 'JetBrains Mono', monospace; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { list-style: none; }

/* ---- crystal glass, polished clear ("musi byt uplne pruhledne jako bys ho vylestil"): nothing frosted, nothing tinted,
   the dark seen through it as it is; only the light it catches: a bright edge, a thin rim of colour, two glints */
.crystal { position: relative; isolation: isolate; background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(160, 240, 255, .35), inset 1px 0 0 rgba(255, 255, 255, .3), inset -1px 0 0 rgba(255, 255, 255, .14),
    0 0 50px rgba(0, 207, 255, .1); }
.crystal::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(108deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .09) 44%, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .05) 69%, rgba(255, 255, 255, 0) 71%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 14%); }
.crystal::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(0, 207, 255, .6) 24%, rgba(255, 255, 255, .1) 50%, rgba(0, 255, 136, .55) 76%, rgba(255, 255, 255, .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.crystal > * { position: relative; z-index: 1; }

/* ---- the sky: deep space behind the whole page, standing still while the page moves over it (as Gemini's guide has
   it: "koukni jak udelal gemini vsude vesmirne pozadi ... vypada to celkem huste"): the flyer's nebula and stars at
   3840 x 2160 (capture.py sky, the first screen's, "byl predtim top"), a little darker under the steps' words, a soft
   light of the site's cyan and green, the edges of the window darkened, and over it stars that twinkle (anim.js) */
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(1100px 650px at 80% 8%, rgba(0, 207, 255, .08), rgba(0, 207, 255, 0) 65%),
    radial-gradient(1000px 600px at 15% 20%, rgba(0, 255, 136, .045), rgba(0, 255, 136, 0) 62%),
    radial-gradient(140% 105% at 50% 50%, rgba(5, 7, 12, 0) 55%, rgba(5, 7, 12, .8) 100%),
    linear-gradient(rgba(5, 7, 12, .16), rgba(5, 7, 12, .16)),
    url(pics/space.webp) 50% 50% / cover no-repeat, #05070c; }
#twinkle { position: absolute; inset: 0; width: 100%; height: 100%; }
main { position: relative; z-index: 2; }

/* ---- the top: no panel ("ten vrchni panel predelej, nelibi se mi"); the brand, the quest's track and the prize stand
   on the sky itself, over a dark that fades out downwards so a heading scrolling under them never meets an edge. The
   track: a round light a step with its number in it, the lines between them filling green as you read down the page,
   a spark at the front of the fill */
#bar { position: fixed; z-index: 10; left: 0; right: 0; top: 0; height: 98px; display: flex; align-items: center; gap: 28px; padding: 0 max(24px, 3.4vw) 10px;
  background: linear-gradient(180deg, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .72) 50%, rgba(5, 7, 12, 0) 100%); pointer-events: none; }
#bar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 52%, transparent 100%); }
#bar > * { pointer-events: auto; }
.brand { position: relative; display: flex; align-items: center; gap: 13px; flex: none; transition: transform .3s var(--ease); }
.brand svg { width: 46px; height: 46px; flex: none; display: block; overflow: visible;
  filter: drop-shadow(0 0 12px rgba(0, 255, 136, .28)) drop-shadow(0 0 24px rgba(0, 207, 255, .16)); transition: filter .35s var(--ease); }
.brand:hover svg { filter: drop-shadow(0 0 16px rgba(0, 255, 136, .5)) drop-shadow(0 0 30px rgba(0, 207, 255, .3)); }
.brand .qb-orbit { transform-origin: 32px 32px; animation: qb-spin 20s linear infinite; }
.brand .qb-star { transform-origin: 32px 17.6px; filter: drop-shadow(0 0 5px rgba(0, 255, 136, .95)); animation: qb-pulse 3.2s var(--ease) infinite; }
@keyframes qb-spin { to { transform: rotate(360deg); } }
@keyframes qb-pulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.16); opacity: 1; } }
.brand .wm { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand .wm small { font: 800 10px/1 'JetBrains Mono', monospace; letter-spacing: .355em; margin-right: -.355em; color: #7ee8ff;
  text-shadow: 0 0 12px rgba(0, 207, 255, .45); }
.brand .wm b { font: 400 22px/.94 'Archivo Black', sans-serif; letter-spacing: .04em; color: transparent;
  background: linear-gradient(180deg, #ffffff 30%, #d2ffec 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(0, 255, 136, .22)); }
#rail { position: relative; margin: 0 auto; display: flex; align-items: center; }
#rail a { position: relative; display: flex; align-items: center; gap: 11px; padding: 6px 2px; color: var(--mute); white-space: nowrap; cursor: pointer; transition: color .3s, transform .25s var(--ease); }
#rail .nd { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(6, 9, 15, .92); box-shadow: inset 0 0 0 1.3px rgba(127, 147, 173, .5); transition: background .3s, box-shadow .3s, transform .25s var(--ease); }
#rail .nd em { position: relative; font: 800 12px 'JetBrains Mono'; font-style: normal; color: var(--mute); transition: color .3s; }
#rail a .lab { font: 600 16px Inter, sans-serif; letter-spacing: .01em; }
#rail a .sh { display: none; }
#rail a:hover { color: var(--text); }
#rail a:hover .nd { box-shadow: inset 0 0 0 1.3px var(--cyan), 0 0 12px rgba(0, 207, 255, .35); }
#rail a.done { color: var(--dim); }
#rail a.done .nd { background: rgba(0, 255, 136, .12); box-shadow: inset 0 0 0 1.3px var(--green); }
#rail a.done .nd em { color: var(--green); }
#rail a.on { color: #ffffff; text-shadow: 0 0 16px rgba(0, 255, 136, .45); }
#rail a.on .nd { background: radial-gradient(circle at 50% 35%, #eafff4, var(--green) 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 16px rgba(0, 255, 136, .85); }
#rail a.on .nd em { color: #03140c; }
#rail a.on .nd::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 255, 136, .55); animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
/* the lines between the steps fill as far as you have read (quest.js), a spark at the fill's front */
#rail i { position: relative; flex: none; width: clamp(28px, 3.4vw, 70px); height: 2px; margin: 0 14px; border-radius: 2px; background: rgba(30, 48, 80, .95); }
#rail i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: 0 0 8px rgba(0, 255, 136, .6); }
#rail i.run b::after { content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #eafff4; box-shadow: 0 0 12px 3px rgba(0, 255, 136, .85); }
/* the bar's figure as Agent Casino's "RUNNING . $55 IN POTS" (.at-live, .pots, read 2026-11-01), in the page's green; the
   first screen's two buttons and the doors' arrows are its .at-btn. Copied after two of ours: "ty basic tlacitka" and
   "ty nove tlacitka jsou humus" */
.pill { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 12px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: live-pulse 2s var(--ease) infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .48; transform: scale(.86); } }
/* ("nebo to tma dej jak uz to je na tabuli podobne"): the figure's tag is the board's own pool tag, dark green with a green edge */
.pill b { font: 800 15px/1 'JetBrains Mono', monospace; letter-spacing: .08em; padding: 5px 11px; border-radius: 99px; color: var(--green);
  background: rgba(0, 255, 136, .1); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .38); }

/* ---- type: the heading big (the start page's .lp-h1), everything under it small */
.kick { font: 800 18px 'JetBrains Mono'; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 12px rgba(0, 207, 255, .6); }
h1, h2 { font-family: 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: -.01em; color: #ffffff; text-shadow: 0 3px 18px rgba(0, 0, 0, .8); }
h2 { margin-top: 20px; font-size: clamp(38px, 2.9vw, 58px); line-height: 1.08; }
h1 .g, h2 .g { color: var(--green); text-shadow: 0 0 28px rgba(0, 255, 136, .45), 0 3px 18px rgba(0, 0, 0, .8); }
h1 b { font-weight: 400; }
/* the points under every heading: each on a ray of light, as the MADE BY plate in the Universe has its two ("paprsky
   jak jsou kolem made by"): a fine line out of the dark, cyan, hot white at its point, a glint running along it now
   and then, one ray after another. Their rhythm ("vsude jsou odrazky moc blizko sebe ... urcit idealni rozestupy
   delky"): a line 1.7 high, a point from the next most of a line apart (26 px), the heading 40 px above the first, a
   measure of about sixty characters, every ray the same 46 px with its text 66 px in */
.pts { position: relative; margin-top: 40px; display: grid; gap: 26px; max-width: 40em; }
.pts li { position: relative; padding-left: 66px; font: 500 18px/1.7 'JetBrains Mono'; color: var(--dim); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.pts li::before { content: ''; position: absolute; left: 0; top: .85em; width: 46px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 100%) -24px 0 / 24px 100% no-repeat,
    linear-gradient(90deg, rgba(0, 207, 255, 0), rgba(0, 207, 255, .8) 62%, #d8fbff);
  box-shadow: 0 0 9px rgba(0, 207, 255, .55); animation: glint 4.8s var(--ease) infinite; }
.pts li:nth-child(2)::before { animation-delay: .5s; } .pts li:nth-child(3)::before { animation-delay: 1s; }
@keyframes glint { 0%, 55% { background-position: -24px 0, 0 0; } 85%, 100% { background-position: 50px 0, 0 0; } }
.pts li::after { content: ''; position: absolute; left: 43px; top: .85em; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #f4fffb;
  box-shadow: 0 0 5px 2px rgba(0, 255, 136, .95), 0 0 16px 5px rgba(0, 207, 255, .4); }
.pts li b { font-weight: 700; color: #ffffff; }
/* what earns points, set apart ("vsude kde se vysvetluje to co vydelava pointy musi byt nejak spesl zvyrazneno"), and
   no box round it ("ten tag +PTS je dobry ale ten obdelnik je moc", 2026-11-01): its ray and its words green, a
   "+ pts" tag after the sentence */
.pts li.earn { color: #dfffee; }
.pts li.earn::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 100%) -24px 0 / 24px 100% no-repeat,
    linear-gradient(90deg, rgba(0, 255, 136, 0), rgba(0, 255, 136, .85) 62%, #e6fff2); box-shadow: 0 0 9px rgba(0, 255, 136, .6); }
.pts li.earn b { color: var(--green); text-shadow: 0 0 16px rgba(0, 255, 136, .55), 0 2px 12px rgba(0, 0, 0, .9); }
.pts li.earn .nw { white-space: nowrap; }
.pts li.earn .xp { display: inline-block; margin-left: 12px; vertical-align: 2px; padding: 3px 9px; border-radius: 6px; font: 800 11px/1.4 'JetBrains Mono';
  font-style: normal; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-shadow: none; color: #03140c; background: var(--green); box-shadow: 0 0 16px rgba(0, 255, 136, .6); }
/* every product a step names, lit and linked ("vsude v textech musis zvyraznovat veci kterym das link") */
.lk { position: relative; font-weight: 800; color: var(--cyan); white-space: nowrap; text-shadow: 0 0 14px rgba(0, 207, 255, .55), 0 2px 12px rgba(0, 0, 0, .9);
  background: linear-gradient(90deg, var(--cyan), var(--green)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; transition: color .25s, background-size .25s; }
/* its arrow drawn, not a character: a font's ↗ differs from browser to browser (WebKit drew another glyph) */
.lk::after { content: ''; display: inline-block; width: .56em; height: .56em; margin: 0 1px 0 6px; vertical-align: .16em; transition: transform .25s var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.4 2H8v4.6' fill='none' stroke='%2300ff88' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.lk:hover { color: #ffffff; background-size: 100% 2.5px; }
.lk:hover::after { transform: translate(2px, -2px); }

/* ---- the first screen: the words big on the left as the start page has its own ("ten napis doleva tak velkym jak je
   to na .../start"), the quest's name first and green, each line whole ("climb the leaderboard muze byt na 1 radku");
   the prize board on the right, turned the other way; the sun far off over it */
#hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 126px 0 70px; overflow-x: clip; }
.hero-in { position: relative; z-index: 2; width: min(1760px, calc(100% - 9vw)); margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 5vw; align-items: center; }
.hero-in h1 { font-size: clamp(42px, 3.25vw, 66px); line-height: 1.07; letter-spacing: -.012em; white-space: nowrap; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.btn-go, .btn-how { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 18px 26px; border-radius: 16px; white-space: nowrap;
  font: 400 15.5px/1.2 'Archivo Black', sans-serif; letter-spacing: .03em; text-transform: uppercase; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
/* ("Ano, predelej"): the same black glass as the doors' arrow (.door .arr): the colour is the light inside, one reflection, full of colour on hover */
.btn-go { --cr: 0, 255, 136; --glow: .5; }
.btn-how { --cr: 0, 207, 255; --glow: .22; }
.btn-go, .btn-how { isolation: isolate; overflow: hidden; color: rgb(var(--cr)); border-radius: 20px;
  background: linear-gradient(113deg, rgba(255, 255, 255, 0) 71%, rgba(255, 255, 255, .085) 71.6%, rgba(255, 255, 255, .012) 90%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(74% 90% at 50% 50%, rgba(var(--cr), .12), rgba(var(--cr), 0) 100%),
    linear-gradient(180deg, #111926 0%, #05080e 56%, #060a11 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .72), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(var(--cr), .34),
    0 0 0 1px rgba(0, 0, 0, .7), 0 18px 36px -16px rgba(var(--cr), var(--glow)), 0 12px 26px -10px rgba(0, 0, 0, .85);
  transition: box-shadow .32s var(--ease), color .22s; }
.btn-go::before, .btn-how::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .28s;
  background: linear-gradient(113deg, rgba(255, 255, 255, 0) 71%, rgba(255, 255, 255, .2) 71.6%, rgba(255, 255, 255, .03) 92%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(130% 120% at 30% -30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgb(var(--cr)), rgb(var(--cr))); }
.btn-go svg, .btn-how svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(var(--cr), .8)); transition: filter .22s; }
/* ("proc se ale tak debilne pohybuji ty tlacitka jak na ne najedu? to nechci"): nothing moves on hover or press, only the light changes */
.btn-go:hover, .btn-how:hover { color: #03140c;
  box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(var(--cr), .4), 0 24px 44px -16px rgba(var(--cr), .95), 0 0 36px -8px rgba(var(--cr), .5); }
.btn-go:hover::before, .btn-how:hover::before { opacity: 1; }
.btn-go:hover svg, .btn-how:hover svg { filter: none; }
.btn-go:active, .btn-how:active { color: #03140c; transition-duration: .07s;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--cr), .4), 0 8px 18px -10px rgba(var(--cr), .7); }
.btn-go:active::before, .btn-how:active::before { opacity: .84; transition-duration: .07s; }
.hero-in .board-wrap { justify-self: end; width: min(100%, 660px); }
/* Cymetica's sun alone, further off and to the right ("vic doprava a vic do dalky ... vic zarivejsi, ted v nem jsou
   diry"): its light as alpha, over a whole glowing core, so the dark between its strands no longer shows the sky */
#sun { position: absolute; z-index: 1; left: calc(50% + 800px); top: 192px; width: 330px; transform: translate(-50%, -50%); pointer-events: none; animation: sun-breathe 8s var(--ease) infinite; }
@keyframes sun-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.045); } }
#sun::before { content: ''; position: absolute; left: 49.3%; top: 48.3%; width: 25%; height: 25%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fffdf6 0 32%, rgba(255, 232, 186, .96) 52%, rgba(255, 196, 120, .55) 74%, rgba(255, 170, 80, 0) 100%);
  box-shadow: 0 0 36px 14px rgba(255, 214, 150, .52), 0 0 120px 44px rgba(255, 176, 96, .22), 0 0 240px 90px rgba(0, 207, 255, .08); }
#sun img { position: relative; width: 100%; height: auto; filter: brightness(1.3) saturate(1.12); }
/* the flyer's glass, now crystal, clear and glossy, on the right and turned the other way ("na druhou stranu a natocis
   ho naopak"): its far edge towards the words */
.board-wrap { perspective: 1900px; perspective-origin: 100% 40%; }
.board { padding: 36px 44px 26px; border-radius: 30px; transform: rotateY(var(--ry, -26deg)) rotateX(var(--rx, 2.6deg)); transform-origin: 100% 50%;
  background: radial-gradient(120% 90% at 80% 10%, rgba(0, 207, 255, .06), rgba(5, 9, 16, .22) 70%);
  transition: transform .45s cubic-bezier(.16, .84, .3, 1), box-shadow .45s var(--ease); }
.board:hover { box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(160, 240, 255, .5), inset 1px 0 0 rgba(255, 255, 255, .42), inset -1px 0 0 rgba(255, 255, 255, .2),
  0 0 70px rgba(0, 255, 136, .14), 0 0 40px rgba(0, 207, 255, .14); }
.gh { display: flex; align-items: center; gap: 14px; }
.gh .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--rs1); box-shadow: 0 0 16px var(--rs1); }
.gh b { font: 400 32px 'Archivo Black', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #effffb, #4dffcc 50%, #00dcb4); filter: drop-shadow(0 0 12px rgba(0, 240, 170, .45)); }
.gh .tg { margin-left: auto; white-space: nowrap; font: 800 18px 'JetBrains Mono'; letter-spacing: .2em; text-transform: uppercase; color: var(--rs1); text-shadow: 0 0 12px rgba(0, 207, 255, .7); }
.seats { margin-top: 10px; }
.seat { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 15px 6px; border-radius: 14px; transition: background .3s; }
.seat.p1 { background: linear-gradient(90deg, rgba(0, 255, 136, .07), rgba(0, 255, 136, 0) 75%); }
.seat + .seat { border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 30%, rgba(0, 207, 255, .3) 70%, rgba(255, 255, 255, 0)) 1; }
.rk { font: 400 70px/1 'Archivo Black', sans-serif; text-align: center; color: transparent; -webkit-background-clip: text; background-clip: text; }
.p1 .rk { background-image: linear-gradient(180deg, #eafff4, var(--rs1) 55%, #00a067); filter: drop-shadow(0 0 14px rgba(0, 255, 136, .65)); }
.p2 .rk { background-image: linear-gradient(180deg, #e6fbff, var(--rs2) 55%, #0086b5); filter: drop-shadow(0 0 11px rgba(0, 207, 255, .55)); }
.p3 .rk { background-image: linear-gradient(180deg, #e3edff, var(--rs3) 55%, #1d4ea8); filter: drop-shadow(0 0 9px rgba(59, 130, 246, .5)); }
.who b { display: block; font: 400 29px/1.05 'Archivo Black', sans-serif; color: #f4fbff; }
.who span { display: block; margin-top: 6px; font: 600 17px 'JetBrains Mono'; letter-spacing: .04em; color: #b9cdd9; }
.pay { text-align: right; }
.pay b { display: block; font: 400 46px/.95 'Archivo Black', sans-serif; white-space: nowrap; }
.pay span { display: block; margin-top: 6px; font: 800 18px 'JetBrains Mono'; letter-spacing: .14em; color: #c6d8e3; }
.p1 .pay b { color: var(--rs1); text-shadow: 0 0 26px rgba(0, 255, 136, .6); }
.p2 .pay b { color: var(--rs2); text-shadow: 0 0 20px rgba(0, 207, 255, .5); }
.p3 .pay b { color: var(--rs3); text-shadow: 0 0 16px rgba(59, 130, 246, .45); }
.board .rule { margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 600 14px 'JetBrains Mono'; color: var(--dim); }
.board .rule > b { font: 800 12px 'JetBrains Mono'; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px;
  color: var(--green); background: rgba(0, 255, 136, .1); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .38); white-space: nowrap; }

/* ---- the steps: the words on the left in every one ("vsechno ma byt nalevo"), wide ("proc je to v takovem uzkem
   sloupci? tam je hodne mist napravo"), their number under them ("prvne STEP 02, pod tim text a pod tim az to velke
   02"); the picture on the right, beside the words as step 1's HQ is ("proc je to vsude tak nizko dycky vedle toho
   textu? jedine headquarters je v idealni pozici hned vedle napravo"), in the middle of the band the words and the
   number make, as big as its column lets it ("nekde mas velkou mezeru nahore nekde dole, musis to budto dat doprostred
   nebo vychytat tak at to zabira stejnou plochu jak headquarters"), well away from the number */
.step { position: relative; display: grid; grid-template-columns: minmax(0, 5.7fr) minmax(0, 6.3fr); grid-template-rows: auto auto; column-gap: 4vw;
  align-content: center; width: min(1920px, 100%); margin: 0 auto; padding: 130px 4.5vw 150px; min-height: 92vh; }
.step .txt { position: relative; z-index: 3; grid-column: 1; grid-row: 1; align-self: start; }
.step .num { grid-column: 1; grid-row: 2; align-self: start; }
.step .stage { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* the step's number, huge and hollow, faint as the first take had it, under its words and never beside them */
.num { position: relative; z-index: 0; margin: 40px 0 0 -.05em; pointer-events: none; white-space: nowrap;
  font: 400 clamp(220px, 21vw, 420px)/.8 'Archivo Black', sans-serif; color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 207, 255, .2); background: linear-gradient(180deg, rgba(0, 255, 136, .085), rgba(0, 207, 255, 0) 74%);
  -webkit-background-clip: text; background-clip: text; }
.step::before { content: ''; position: absolute; inset: 10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 45% at 70% 58%, rgba(0, 207, 255, .075), rgba(0, 207, 255, 0) 70%); }

/* every picture and clip: no frame, its edges melting into the dark */
.stage { position: relative; z-index: 2; }
.pic { position: relative; }
.pic > img, .pic > .clip, .crop { width: 100%; -webkit-mask-image: var(--fade); mask-image: var(--fade); -webkit-mask-composite: source-in; mask-composite: intersect; }
.clip { position: relative; }
.clip video { width: 100%; }
.clip.xf video { transition: opacity .9s linear; }
.clip.xf video.b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
/* a clip keyed into the page's space (anim.js keyed): its videos the hidden source, the canvas what shows */
.clip.key video { visibility: hidden; }
.clip .keyed { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* step 1: the live builder's HQ whole, with space round it ("proc ty headquarters mas useknute nahore a dole?"), in the
   page's own space ("pozadi za headquarters je divne, ma byt stejne jako vsude jinde"): the clip filmed on black
   (record.py office, the builder's own camera, its sky and drifting rocks hidden), keyed (anim.js); fourteenth take
   ("headquarters mi prijde jeste trochu rozmazane"): drawn at 1.5 and cut to the HQ when it is filmed, so the clip is
   the HQ alone, 1500 x 1132, about one and a half of its pixels to each of the page's; only the rock under it melts
   away where the frame ends */
#s1 .pic { width: 118%; margin-left: -10%; }
#s1 .crop { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.hq-stage::before { content: ''; position: absolute; z-index: -1; left: 48%; top: 47%; width: 78%; aspect-ratio: 1.65 / 1; transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 255, 136, .1), rgba(0, 207, 255, .05) 58%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 207, 255, .14), 0 0 80px rgba(0, 207, 255, .08); }
/* the company in two figures ("4 departments, 9 Agents led by NEXUS") framed in a clear crystal telemetry module */
.crew-box { margin-top: 38px; padding: 20px 24px 18px; border-radius: 20px; width: fit-content; max-width: 100%;
  background: linear-gradient(180deg, rgba(6, 12, 22, .38), rgba(4, 9, 16, .2)); }
.crew { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 12px; }
.crew b { font: 400 50px/1 'Archivo Black', sans-serif; color: var(--green); text-shadow: 0 0 22px rgba(0, 255, 136, .55); }
.crew span { font: 700 17px 'JetBrains Mono'; letter-spacing: .04em; color: var(--text); }
.crew span em { font-style: normal; color: var(--cyan); text-shadow: 0 0 12px rgba(0, 207, 255, .55); }
.crew i { width: 1px; height: 36px; margin: 0 12px; align-self: center; background: linear-gradient(180deg, rgba(0, 207, 255, 0), rgba(0, 207, 255, .75), rgba(0, 207, 255, 0)); }
/* on one line ("dej ty departmenty na 1 radek"), each with its agent's head as the live Add department dialog's chips have it
   (style.css .d3side .hx i: "ikonky tech agentu jsou taky trapne spis to udelej tak jak je to v live verzi v add
   department"; "mely zustat stejne ty oddeleni jen ikonku si mel vymenit"): static/company/shots/astro-*.webp, the
   manager's drawn by their renderer */
.depts { display: flex; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dp { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border-radius: 99px; white-space: nowrap;
  font: 700 11.5px/1 'JetBrains Mono', monospace; letter-spacing: .03em; color: var(--dim);
  background: rgba(5, 10, 18, .55); box-shadow: inset 0 0 0 1px rgba(0, 207, 255, .24); }
.dp i { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #0f1a24; }
.dp img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(2.1); transform-origin: 50% 0; }   /* their 30 % at this size shows the chest; the helmet carries the department's colour */
.dp.cmd { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .48), 0 0 14px rgba(0, 255, 136, .14); }
.crop { position: relative; aspect-ratio: 1500 / 1132; overflow: hidden; }
.crop .clip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.crop video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: fill; }

/* step 2: panoramic single-viewport layout so the words, the Orbital Cyber-Forge AND the Cymetica pipeline + holographic
   ring all fit cleanly inside a 1080p window together */
.step.build { grid-template-rows: auto auto auto; min-height: 100vh; padding-top: 92px; padding-bottom: 84px; align-content: center; }
.step.build h2 { margin-top: 14px; font-size: clamp(36px, 2.75vw, 54px); }
.step.build .pts { margin-top: 26px; gap: 18px; }
.step.build .pts li { font-size: 16.5px; line-height: 1.58; }
.step.build .num { margin-top: 18px; font-size: clamp(160px, 14vw, 250px); }
.step.build .stage { grid-column: 2; grid-row: 1 / span 2; top: -8px; }
.step.build .stage .pic { width: 116%; margin-left: -6%; }
.step.build .stage .pic > .clip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 6%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 6%, #000 93%, transparent 100%);
}
/* vertical energy conduit piping the Cyber-Forge down into the Cymetica pipeline */
.step.build .conduit { position: absolute; left: 52%; bottom: -26px; width: 2px; height: 42px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 255, 136, .75), rgba(0, 207, 255, .35), rgba(0, 207, 255, 0)); box-shadow: 0 0 12px rgba(0, 255, 136, .5); }
.step.build .conduit i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #eafff5;
  box-shadow: 0 0 12px 3px rgba(0, 255, 136, .85); animation: conduit-drop 1.8s var(--ease) infinite; }
@keyframes conduit-drop { 0% { top: -2px; opacity: 0; } 25% { opacity: 1; } 100% { top: 38px; opacity: 0; } }
.step.build .machine { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
/* ("neni 2 step na sebe vse namackane moc? ... u jinych stepu jsou tam vetsi mezery"): not one window any more but the other
   steps' own padding, the words airier, and the pipeline set well below the forge, the conduit running down to it */
@media (min-width: 901px) {
  .step.build { min-height: 0; padding-top: 130px; padding-bottom: 150px; }
  .step.build .pts { margin-top: 36px; gap: 26px; }
  .step.build .machine { margin-top: 72px; }
  .step.build .conduit { height: 100px; }
  .step.build .conduit i { animation-name: conduit-drop-long; }
}
@keyframes conduit-drop-long { 0% { top: -2px; opacity: 0; } 25% { opacity: 1; } 100% { top: 96px; opacity: 0; } }
/* the ring of products already built: their live pages as holograms over a projector of light */
.ring { position: relative; height: 266px; cursor: grab; touch-action: pan-y; user-select: none; }
.ring.grab { cursor: grabbing; }
.ring .items { position: absolute; left: 0; right: 0; top: 0; height: 192px; perspective: 900px; }
.ring .it { position: absolute; left: 50%; top: 50%; width: 192px; height: 108px; will-change: transform, opacity; }
.ring .mk { display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 207, 255, .65), 0 0 26px rgba(0, 207, 255, .4);
  -webkit-box-reflect: below 6px linear-gradient(transparent 64%, rgba(255, 255, 255, .2)); }
.ring .mk img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 0; pointer-events: none; mix-blend-mode: screen;
  filter: saturate(1.15) brightness(1.08) contrast(1.05);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, .72) 2px 4px); mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, .72) 2px 4px); }
.ring .it.front .mk { box-shadow: 0 0 0 1px rgba(0, 255, 136, .85), 0 0 40px rgba(0, 255, 136, .45); }
/* yours, as it comes out of the pipeline: brought to the front, lit, tagged */
.ring .it.mine .mk { box-shadow: 0 0 0 2px var(--green), 0 0 64px rgba(0, 255, 136, .65); }
.ring .it.mine::after { content: 'Live'; position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  font: 800 11px 'JetBrains Mono'; letter-spacing: .14em; text-transform: uppercase; color: #03140c; background: var(--green); box-shadow: 0 0 16px rgba(0, 255, 136, .6); }
.ring.mine .plate b { color: var(--green); text-shadow: 0 0 18px rgba(0, 255, 136, .6); }
.ring .base { position: absolute; left: 4%; right: 4%; top: 152px; height: 60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 207, 255, .32), rgba(0, 255, 136, .09) 60%, rgba(0, 207, 255, 0));
  box-shadow: 0 0 0 1px rgba(0, 207, 255, .28) inset; }
.ring .base::after { content: ''; position: absolute; left: 38%; right: 38%; bottom: 40%; height: 112px; transform: translateY(0);
  background: linear-gradient(0deg, rgba(0, 207, 255, .18), rgba(0, 207, 255, 0)); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); }
.ring .plate { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.ring .plate b { display: block; font: 400 19px 'Archivo Black', sans-serif; color: #ffffff; text-shadow: 0 0 18px rgba(0, 255, 136, .45); transition: color .3s; }

/* step 2's pipeline: the idea in, its six chambers, and out of it the ring of products */
.machine { position: relative; z-index: 3; display: grid; grid-template-columns: 236px minmax(0, 1fr) 500px; align-items: center; gap: 26px; }
.machine .cap { display: block; margin-bottom: 8px; font: 800 13px 'JetBrains Mono'; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 207, 255, .45); }
.inlet .say { min-height: 88px; padding: 14px 16px; border-radius: 16px; font: 600 15.5px/1.42 'JetBrains Mono'; color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(6, 14, 24, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(0, 207, 255, .45), 0 0 28px rgba(0, 207, 255, .15);
  transition: transform .4s var(--ease), box-shadow .4s, opacity .4s; }
.inlet .caret { display: none; width: 8px; height: 17px; margin: 0 1px 0 2px; vertical-align: -3px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.machine.typing .caret { display: inline-block; animation: blink .6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.machine.sent .inlet .say { transform: scale(.96); opacity: .72; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 255, 136, .6), 0 0 36px rgba(0, 255, 136, .28); }
.inlet, .outlet { position: relative; }
.inlet::after, .outlet::before { content: ''; position: absolute; top: calc(50% + 10px); width: 26px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #ffffff 0 5px, rgba(255, 255, 255, 0) 5px 12px), linear-gradient(90deg, var(--cyan), var(--green));
  background-size: 12px 100%, 100% 100%; box-shadow: 0 0 12px var(--cyan); animation: bridge-flow .55s linear infinite; }
@keyframes bridge-flow { to { background-position: 12px 0, 0 0; } }
.inlet::after { right: -26px; top: calc(50% + 12px); }
.outlet::before { left: -26px; top: 44%; }
/* the pipeline itself: hexagon-free precision optical matrix + crystal glass rim */
.tube { position: relative; padding: 15px 16px 15px; border-radius: 24px; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 1px 1px, rgba(0, 207, 255, .14) 1px, transparent 0) 0 0 / 18px 18px,
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 45%, rgba(0, 255, 136, .055)), rgba(4, 10, 18, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 0 0 1px rgba(0, 207, 255, .38), inset 0 -1px 0 rgba(0, 255, 136, .55), 0 0 60px rgba(0, 207, 255, .16), 0 24px 50px rgba(0, 0, 0, .5); }
.tube::before { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; z-index: -1; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); animation: sheen 7s var(--ease) infinite; }
@keyframes sheen { 0%, 60% { left: -30%; } 100% { left: 120%; } }
.tube .hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 12px; margin-bottom: 12px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(0, 207, 255, .45), rgba(0, 255, 136, .25) 60%, rgba(0, 207, 255, 0)) 1; }
.tube .pn { display: flex; align-items: center; gap: 9px; font: 400 15px 'Archivo Black', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #ffffff; }
.tube .pn svg { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(0, 255, 136, .6)); }
.tube .pn circle { fill: rgba(0, 255, 136, .16); stroke: var(--green); stroke-width: 1.6; }
.tube .pn circle + circle { fill: var(--green); stroke: none; }
.tube .st { display: flex; align-items: center; gap: 10px; font: 700 13px 'JetBrains Mono'; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.tube .st i { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); transition: background .3s, box-shadow .3s; }
.tube .st .sv { font-weight: 700; color: var(--dim); }
.tube .st .pc { min-width: 4.2em; padding: 3px 8px; border-radius: 7px; text-align: right; font-weight: 800; color: var(--cyan); background: rgba(0, 207, 255, .08); box-shadow: inset 0 0 0 1px rgba(0, 207, 255, .3); }
.tube .st.run i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink .5s steps(1) infinite; }
.tube .st.run .sv { color: #ffffff; }
.tube .st.live i { background: var(--green); box-shadow: 0 0 12px var(--green); }
.tube .st.live .sv { color: var(--green); text-shadow: 0 0 12px rgba(0, 255, 136, .55); }
.tube .st.live .pc { color: #03140c; background: var(--green); box-shadow: 0 0 16px rgba(0, 255, 136, .6); }
/* its longer name ("prejmenuj na Build it Better pipeline") on one line beside its status on a narrower screen too */
.tube { container-type: inline-size; }
.tube .hd { min-height: 36px; }
.tube .pn { white-space: nowrap; }
@container (max-width: 640px) {
  .tube .pn { font-size: 12.5px; letter-spacing: .08em; gap: 7px; }
  .tube .st { font-size: 11px; gap: 7px; letter-spacing: .05em; }
  .tube .st .pc { min-width: 3.6em; }
}
.tube .track { position: absolute; left: 30px; right: 30px; top: 99.5px; height: 3px; border-radius: 2px; background: rgba(30, 48, 80, .9); container-type: inline-size; }
/* the line lit runs through the chambers' colours, each where its chamber stands, whatever length it has got to */
.tube .track .lit { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; box-shadow: 0 0 10px rgba(255, 255, 255, .4);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 6px, rgba(255, 255, 255, 0) 6px 18px), linear-gradient(90deg, #00cfff, #00ff88);
  background-size: 18px 100%, 100cqw 100%; animation: flowing .5s linear infinite; }
@keyframes flowing { to { background-position: 18px 0, 0 0; } }
/* the spark takes the colour of the chamber it is in (anim.js sets --oc) */
.tube .track .orb { --oc: 0, 255, 136; position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle, #ffffff 0 30%, rgb(var(--oc)) 55%, rgba(var(--oc), 0) 72%); box-shadow: 0 0 24px 8px rgba(var(--oc), .55); }
.tube .track .orb::before { content: ''; position: absolute; right: 50%; top: 50%; width: 120px; height: 6px; margin-top: -3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--oc), 0), rgba(var(--oc), .5) 60%, rgba(255, 255, 255, .95)); filter: blur(1.5px); }
.chs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
/* each chamber its own colour and its own coloured icon ("je to moc jedno brdo ty kostky, mozna nejak barevnejsi by bylo
   lepsi? jak v quant labu tady mame ruzne ikonky barevne", 2026-11-01), from the Universe's accents, CO.ACCENTS */
.ch.spec, .ch.design, .ch.build, .ch.sec, .ch.dep { --a: #00cfff; --ar: 0, 207, 255; }
.ch.host { --a: #00ff88; --ar: 0, 255, 136; }
.ch { position: relative; display: grid; justify-items: center; gap: 7px; padding: 14px 8px 14px; border-radius: 14px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--ar), .13), rgba(var(--ar), .02) 62%), rgba(8, 14, 24, .72);
  box-shadow: inset 0 1px 0 rgba(var(--ar), .45), inset 0 0 0 1px rgba(var(--ar), .2); transition: box-shadow .3s, background .3s, transform .35s var(--ease); }
.ch .no { position: absolute; left: 9px; top: 7px; font: 800 11px 'JetBrains Mono'; letter-spacing: .08em; color: rgba(var(--ar), .75); transition: color .3s; }
.ch .ci { position: relative; display: grid; place-items: center; width: 48px; height: 48px; transition: transform .3s var(--ease); }
.ch .ci > svg:not(.pr) { position: relative; width: 28px; height: 28px; filter: saturate(.8) brightness(.82); transition: filter .3s; }
.ch.act .ci > svg:not(.pr), .ch.done .ci > svg:not(.pr) { filter: drop-shadow(0 0 7px rgba(var(--ar), .75)); }
.ch .ci .pr { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ch .ci .pr circle { fill: rgba(6, 9, 15, .92); stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: calc(132 * (1 - var(--p, 0))); filter: drop-shadow(0 0 4px rgba(var(--ar), .8)); }
.ch:not(.act):not(.done) .ci .pr circle { stroke: rgba(var(--ar), .28); stroke-dashoffset: 0; filter: none; }
.ch.done .ci .pr circle { stroke-dashoffset: 0; stroke: rgba(var(--ar), .7); filter: none; }
.ch b { font: 700 16px Inter, sans-serif; color: #b9c6d8; transition: color .3s; }
.ch .fx { position: relative; display: block; width: 76%; height: 20px; }
.ch .ok { position: absolute; right: 7px; top: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 11px 'JetBrains Mono'; color: #03140c;
  background: var(--a); box-shadow: 0 0 10px var(--a); opacity: 0; transform: scale(.5); transition: opacity .25s, transform .3s var(--ease); }
/* the working chamber: lifted, lit in its colour, a band of light sweeping down it */
.ch.act { transform: translateY(-7px); background: linear-gradient(180deg, rgba(var(--ar), .3), rgba(var(--ar), .07)), rgba(8, 14, 24, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(var(--ar), .9), 0 0 34px rgba(var(--ar), .45), 0 14px 26px rgba(0, 0, 0, .5); }
.ch.act::after { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ar), 0), rgba(var(--ar), .25), rgba(var(--ar), 0)); animation: sweepdown .7s linear infinite; }
@keyframes sweepdown { to { top: 100%; } }
.ch.act .no, .ch.done .no { color: var(--a); }
.ch.act .ci { transform: scale(1.14); }
.ch.act b, .ch.done b { color: #ffffff; }
.ch.done { background: linear-gradient(180deg, rgba(var(--ar), .2), rgba(var(--ar), .04) 70%), rgba(8, 14, 24, .72); box-shadow: inset 0 1px 0 rgba(var(--ar), .7), inset 0 0 0 1px rgba(var(--ar), .5), 0 0 16px rgba(var(--ar), .14); }
.ch.done .ok { opacity: 1; transform: scale(1); }
/* each chamber's small machine, running while it works */
.ch .fx i { position: absolute; display: block; background: rgba(var(--ar), .28); border-radius: 2px; }
.ch.spec .fx i { left: 0; height: 3px; width: 0; } .ch.spec .fx i:nth-child(1) { top: 2px; } .ch.spec .fx i:nth-child(2) { top: 9px; } .ch.spec .fx i:nth-child(3) { top: 16px; }
.ch.spec.act .fx i, .ch.spec.done .fx i { background: var(--a); animation: grow .55s var(--ease) forwards; }
.ch.spec.act .fx i:nth-child(2) { animation-delay: .12s; } .ch.spec.act .fx i:nth-child(3) { animation-delay: .24s; }
.ch.spec.done .fx i { width: 100%; animation: none; } .ch.spec.done .fx i:nth-child(3) { width: 60%; }
@keyframes grow { to { width: 100%; } }
.ch.design .fx i { width: 46%; height: 8px; opacity: .3; transform: scale(.4); } .ch.design .fx i:nth-child(1) { left: 0; top: 0; } .ch.design .fx i:nth-child(2) { right: 0; top: 0; }
.ch.design .fx i:nth-child(3) { left: 0; bottom: 0; } .ch.design .fx i:nth-child(4) { right: 0; bottom: 0; }
.ch.design.act .fx i, .ch.design.done .fx i { opacity: 1; transform: none; background: var(--a); transition: transform .3s var(--ease), opacity .3s; }
.ch.design.act .fx i:nth-child(2) { transition-delay: .1s; } .ch.design.act .fx i:nth-child(3) { transition-delay: .2s; } .ch.design.act .fx i:nth-child(4) { transition-delay: .3s; }
.ch.build .fx b { position: absolute; left: 0; top: 0; font: 800 12px 'JetBrains Mono'; color: rgba(var(--ar), .5); }
.ch.build .fx i { right: 0; top: 7px; width: 0; height: 5px; left: 34%; } .ch.build.act .fx b, .ch.build.done .fx b { color: var(--a); }
.ch.build.act .fx i { background: var(--a); animation: bar .65s linear forwards; } .ch.build.done .fx i { background: var(--a); width: 66%; }
@keyframes bar { to { width: 66%; } }
.ch.sec .fx i { left: 0; right: 0; top: 0; bottom: 0; background: none; box-shadow: inset 0 0 0 1px rgba(var(--ar), .3); }
.ch.sec.act .fx i { box-shadow: inset 0 0 0 1px rgba(var(--ar), .7); background: linear-gradient(180deg, rgba(var(--ar), 0), rgba(var(--ar), .55) 50%, rgba(var(--ar), 0)) 0 -20px / 100% 20px no-repeat; animation: scan .5s linear infinite; }
.ch.sec.done .fx i { box-shadow: inset 0 0 0 1px rgba(var(--ar), .65); }
@keyframes scan { to { background-position: 0 20px; } }
.ch.dep .fx i { width: 3px; height: 100%; bottom: 0; background: rgba(var(--ar), .25); } .ch.dep .fx i:nth-child(1) { left: 40%; } .ch.dep .fx i:nth-child(2) { left: 58%; }
.ch.dep.act .fx i { background: linear-gradient(0deg, rgba(var(--ar), 0), var(--a)); animation: lift .4s linear infinite; } .ch.dep.act .fx i:nth-child(2) { animation-delay: .2s; }
.ch.dep.done .fx i { background: rgba(var(--ar), .6); }
@keyframes lift { from { transform: translateY(8px); opacity: 0; } 50% { opacity: 1; } to { transform: translateY(-8px); opacity: 0; } }
.ch.host .fx i { top: 6px; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ar), .25); } .ch.host .fx i:nth-child(1) { left: 14%; } .ch.host .fx i:nth-child(2) { left: 44%; } .ch.host .fx i:nth-child(3) { left: 74%; }
.ch.host.act .fx i { background: var(--a); box-shadow: 0 0 8px var(--a); animation: led .45s steps(1) infinite; } .ch.host.act .fx i:nth-child(2) { animation-delay: .15s; } .ch.host.act .fx i:nth-child(3) { animation-delay: .3s; }
.ch.host.done .fx i { background: var(--a); box-shadow: 0 0 8px var(--a); }
@keyframes led { 50% { opacity: .25; } }
.outlet .burst { position: absolute; left: 50%; top: 42%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--green); }
.machine.pop .outlet .burst { animation: burst .8s var(--ease) forwards; }
@keyframes burst { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(4.2); opacity: 0; } }

/* step 4: the Quant Lab's page (outbox/quant-lab-v2) beside its words, standing in space as a crisp 3D hologram */
.stage.lab { perspective: 1500px; top: -14px; }
.stage.lab .reactor { position: relative; width: 108%; margin-left: -4%; transform: rotateY(-15deg) rotateX(4deg) rotateZ(.6deg) scale(.98); transform-origin: 0% 50%;
  transition: transform .5s var(--ease); }
.stage.lab .holo-frame { position: absolute; inset: -8px -6px; z-index: 3; pointer-events: none; border-radius: 18px;
  background:
    linear-gradient(90deg, var(--cyan), transparent) 0 0 / 28px 2px no-repeat,
    linear-gradient(180deg, var(--cyan), transparent) 0 0 / 2px 28px no-repeat,
    linear-gradient(270deg, var(--green), transparent) 100% 0 / 28px 2px no-repeat,
    linear-gradient(180deg, var(--green), transparent) 100% 0 / 2px 28px no-repeat,
    linear-gradient(90deg, var(--cyan), transparent) 0 100% / 28px 2px no-repeat,
    linear-gradient(0deg, var(--cyan), transparent) 0 100% / 2px 28px no-repeat,
    linear-gradient(270deg, var(--green), transparent) 100% 100% / 28px 2px no-repeat,
    linear-gradient(0deg, var(--green), transparent) 100% 100% / 2px 28px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 207, 255, .14); opacity: .85; }
.stage.lab .reactor .clip { opacity: .98; border-radius: 14px; overflow: hidden;
  -webkit-mask-image:
    radial-gradient(260px 80px at 90% 96%, transparent 0 42%, #000 88%),
    repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, .88) 2px 4px),
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(180deg, transparent, #000 3%, #000 92%, transparent);
  mask-image:
    radial-gradient(260px 80px at 90% 96%, transparent 0 42%, #000 88%),
    repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, .88) 2px 4px),
    linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(180deg, transparent, #000 3%, #000 92%, transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect; }
.stage.lab .reactor video { filter: saturate(1.12) contrast(1.06) brightness(1.05); }
.stage.lab .reactor::before { content: ''; position: absolute; z-index: -1; inset: 2% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 207, 255, .24), rgba(0, 255, 136, .09) 60%, rgba(0, 207, 255, 0)); filter: blur(28px); }
.stage.lab .reactor::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -8%; height: 16%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 207, 255, .34), rgba(0, 207, 255, 0)); filter: blur(8px); }
.lab-hud { position: relative; z-index: 4; display: flex; align-items: center; gap: 10px; width: fit-content; margin: 18px auto 0; padding: 8px 16px; border-radius: 99px;
  font: 700 12.5px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  background: rgba(5, 10, 18, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(0, 207, 255, .38), 0 0 24px rgba(0, 207, 255, .14);
  transition: box-shadow .35s, background .35s; }
.lab-hud .st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: live-pulse 1.5s var(--ease) infinite; }
.lab-hud .st-lbl { font-weight: 800; color: #ffffff; transition: color .3s; }
.lab-hud .st-tag { padding: 3px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: var(--cyan); background: rgba(0, 207, 255, .12); box-shadow: inset 0 0 0 1px rgba(0, 207, 255, .3); }
.lab-hud.born { background: rgba(4, 24, 16, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px var(--green), 0 0 32px rgba(0, 255, 136, .35); }
.lab-hud.born .st-dot { background: var(--green); box-shadow: 0 0 12px var(--green); animation: none; }
.lab-hud.born .st-lbl { color: var(--green); text-shadow: 0 0 14px rgba(0, 255, 136, .55); }
.lab-hud.born .st-tag { color: #03140c; background: var(--green); box-shadow: 0 0 12px rgba(0, 255, 136, .5); }

/* step 3 (fifteenth take, "vyhodil bych proste ten screen ze stranky a nechal bych jen orbitu, v popredi bude velka
   budova Promo marketu co mame ve vesmiru a nad ni bude ta krychle"): the orbit across the whole stage, the farmer, the
   gem and the Agent Casino on it, the Promo Market big in front on the right (its own clip, keyed hard, over the
   orbit's), the Promo Market's live cube over its projector, users walking from it to the farmer */
.stage.duo { position: relative; perspective: 1600px; width: 130%; margin-left: -22%; height: 690px; }
.stage.duo .near { position: absolute; z-index: 1; left: 0; top: 50%; width: 100%; transform: translateY(-52%); container-type: inline-size; }
.stage.duo .near .clip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.stage.duo .near .clip.bld { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
/* the cube's pool on the projector's lens (record.py market prints where it stands); about one and a half of the
   projector's dish across, so the products on its faces read (at 7.4 % of the clip they did not) */
.stage.duo .holo-at { position: absolute; z-index: 2; transform: translate(-50%, -96%); pointer-events: none; }
.stage.duo .holo { --s: 12.5cqw; }
/* ---- the Promo Market's, as it was in the fourteenth take (cymetica.com/promo-market, read 2026-10-31): from here to
   the end of their reduced-motion block; .stage renamed .hstage, as the steps have one ---- */
/* ---------------- the hologram cube: the Promo Market's mark (the Universe's building, in the page's colours) ---------------- */
/* The cube stands on one corner, tilted (the operator, 2026-10-26: "moc rovne hrany ... toci se moc rychle a jen dokola"):
   glass faces with soft glowing edges instead of drawn lines, each face a screen showing a product's page, a smaller
   cube turning inside it, and it sways and floats slowly instead of spinning. Every part moves by transform and opacity. */
.holo { --s: 180px; position: relative; width: calc(var(--s) * 2.1); height: calc(var(--s) * 2.2); display: grid; place-items: center; perspective: 1100px; }
.holo .cam { transform-style: preserve-3d; transform: rotateX(-12deg); }
.holo .bob { transform-style: preserve-3d; animation: holo-bob 6.5s ease-in-out infinite; }
@keyframes holo-bob { 50% { transform: translateY(calc(var(--s) * -0.06)); } }
.holo .hstage { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: holo-sway 18s ease-in-out infinite; }
.holo.fast .hstage { animation-duration: 11s; }
@keyframes holo-sway {
  0%, 100% { transform: rotateY(-34deg) rotateX(-35.264deg) rotateZ(45deg); }
  50% { transform: rotateY(36deg) rotateX(-35.264deg) rotateZ(45deg); } }
/* the edges are light, not lines: no hairline, a glow that is brightest at the rim and fades inward and outward;
   corners nearly square so the faces still meet, and only the faces turned to the viewer are drawn */
.holo .f { position: absolute; inset: 0; border-radius: calc(var(--s) * .035); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(140deg, rgba(0,207,255,.30), rgba(0,207,255,.09) 46%, rgba(0,255,136,.17));
  box-shadow: inset 0 0 calc(var(--s) * .05) rgba(0,207,255,.55), inset 0 0 calc(var(--s) * .22) rgba(0,207,255,.26), 0 0 calc(var(--s) * .2) rgba(0,207,255,.24); }
/* scan lines, the hologram's own texture, faint */
.holo .f::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,207,255,.04) 0 1px, transparent 1px 4px); }
/* a sheen passing over the glass now and then */
.holo .f::after { content: ''; position: absolute; inset: -50%; z-index: 2; pointer-events: none; transform: translateX(-70%);
  background: linear-gradient(115deg, transparent 42%, rgba(230,237,247,.22) 50%, transparent 58%); animation: holo-sheen 8s ease-in-out infinite; }
.holo .f2::after { animation-delay: 2s; } .holo .f3::after { animation-delay: 4s; } .holo .f4::after { animation-delay: 6s; }
@keyframes holo-sheen { 0%, 62% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.holo .f img { position: absolute; inset: 13%; width: 74%; height: 74%; object-fit: cover; object-position: top; border-radius: calc(var(--s) * .04);
  opacity: 0; transition: opacity 1s; filter: saturate(1.2) brightness(1.15); mix-blend-mode: screen; }
.holo .f img.on { opacity: .88; }
.holo .f1 { transform: translateZ(calc(var(--s) / 2)); }
.holo .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.holo .f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.holo .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.holo .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.holo .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
/* a soft light inside the glass, not an object */
.holo .core { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * .55); height: calc(var(--s) * .55); margin: calc(var(--s) * -.275); border-radius: 50%;
  background: radial-gradient(circle, rgba(232,251,255,.5) 0%, rgba(0,207,255,.26) 30%, rgba(0,207,255,0) 70%); animation: holo-core 3.4s ease-in-out infinite; }
@keyframes holo-core { 50% { transform: scale(1.18); opacity: .65; } }
/* the light around it: a glow that breathes out from the heart, a pool under it and a beam rising from the pool */
.holo .aura { position: absolute; left: 50%; top: 45%; width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); margin: calc(var(--s) * -.75); border-radius: 50%;
  background: radial-gradient(circle, rgba(0,207,255,.22), rgba(0,255,136,.06) 42%, transparent 68%); animation: holo-aura 4.2s ease-out infinite; pointer-events: none; }
@keyframes holo-aura { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.3); opacity: 0; } }
.holo .pool { position: absolute; left: 50%; bottom: 3%; width: calc(var(--s) * 1.7); height: calc(var(--s) * .36); margin-left: calc(var(--s) * -.85); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,207,255,.30), rgba(0,255,136,.08) 45%, transparent 70%); animation: holo-pool 6.5s ease-in-out infinite; }
@keyframes holo-pool { 50% { transform: scale(.88); opacity: .75; } }
.holo .beam { position: absolute; left: 50%; bottom: 8%; width: calc(var(--s) * .8); height: 58%; margin-left: calc(var(--s) * -.4); pointer-events: none; filter: blur(10px); opacity: .8;
  background: linear-gradient(0deg, rgba(0,207,255,.18), transparent); clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0); }
.holo .sp { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); opacity: 0; animation: holo-rise 5s linear infinite; }
.holo .sp:nth-child(2n) { background: var(--green); box-shadow: 0 0 8px var(--green); }
@keyframes holo-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(calc(var(--s) * -1)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .holo .bob, .holo .hstage, .holo .core, .holo .aura, .holo .pool, .holo .sp, .holo .f::after { animation: none; }
  .holo .hstage { transform: rotateY(-20deg) rotateX(-35.264deg) rotateZ(45deg); } }
/* ---- ours again ---- */
.nm { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, -100%); padding: 5px 12px; border-radius: 8px;
  font: 800 15px 'JetBrains Mono'; letter-spacing: .1em; text-transform: uppercase; color: #ffffff; white-space: nowrap;
  background: rgba(5, 9, 16, .84); border: 1px solid rgba(0, 255, 136, .55); box-shadow: 0 0 20px rgba(0, 255, 136, .22); }
.nm i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
/* the pictures' name plates are the Universe's own ("maji vypadat top jak v live univerzu", 2026-11-01): its .b3 copied
   from cymetica.com/static/company/uv.css (read 2026-11-01), a product's frame in the product's colour (.b3.product, its
   accent from universe.js PRODUCTS); placed by left/top on the picture instead of the map's transform, 18 px instead of
   the map's 15 */
.b3 { position: absolute; z-index: 3; transform: translate(-50%, -100%); transform-origin: 50% 100%; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  transition: opacity .35s var(--ease), transform .35s var(--ease); --fr: color-mix(in srgb, var(--acc) 22%, #464b54); }
.b3 .rib { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 11px 3px; font: 700 18px/1.2 'Rajdhani', 'Archivo Black', sans-serif; letter-spacing: .045em; color: #c4cacf; white-space: nowrap;
  background:
    radial-gradient(circle at 4px 4px, var(--fr) 0 1px, transparent 1.7px), radial-gradient(circle at calc(100% - 4px) 4px, var(--fr) 0 1px, transparent 1.7px),
    radial-gradient(circle at 4px calc(100% - 4px), var(--fr) 0 1px, transparent 1.7px), radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), var(--fr) 0 1px, transparent 1.7px),
    linear-gradient(rgba(29, 37, 46, .9), rgba(17, 24, 31, .9));
  border: 1px solid var(--fr); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 3px 10px rgba(0, 0, 0, .4); text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  transition: color .35s var(--ease), box-shadow .35s var(--ease); }
.b3 .rib::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 5px var(--acc); opacity: .85; flex: none; }
.b3 .teth { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--fr); border-bottom: 0; margin-top: -1px; }
.b3.product .rib { border-color: var(--acc); color: #eef4fa; }
/* step 3's products lit under the pointer (anim.js): only round the edge ("animace highlihtu maji byt jen po obvodu ...
   klidne trosku tensi to obramovani", 2026-11-01): a thin green line round the whole of it (record.py outlines; its
   widths in the clip's pixels, about 0.6 of a page's at 2000 px) with two lights running along it; the plate in green,
   a little bigger; what is not under the pointer stepping back */
.b3[data-hot] { pointer-events: auto; cursor: pointer; text-decoration: none; }
.hot { position: absolute; z-index: 3; display: block; cursor: pointer; }
.hot:focus { outline: none; }
.hlo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.hlo g { opacity: 0; transition: opacity .25s var(--ease); }
.hlo g.hov { opacity: 1; }
.hlo path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hlo .gl { stroke: rgba(0, 255, 136, .2); stroke-width: 9; }
.hlo .ln { stroke: var(--green); stroke-width: 2.6; }
.hlo .rn { stroke: #eafff5; stroke-width: 3.6; stroke-dasharray: 8 42; }
/* the cube's in the page's own pixels (anim.js draws it round the corners as they turn) */
.hlc .gl { stroke-width: 5.5; } .hlc .ln { stroke-width: 1.6; } .hlc .rn { stroke-width: 2.2; }
.holo .vx { position: absolute; width: 0; height: 0; visibility: hidden; }
.hlo g.hov .rn { animation: hlo-run 3.4s linear infinite; }
@keyframes hlo-run { to { stroke-dashoffset: -50; } }
.b3.hov { --fr: var(--green); transform: translate(-50%, -100%) scale(1.08); }
.b3.hov .rib { border-color: var(--green); color: #ffffff; box-shadow: 0 0 0 1px rgba(0, 255, 136, .45), 0 0 18px rgba(0, 255, 136, .6), 0 0 44px rgba(0, 255, 136, .28); }
.b3.hov .rib::before { background: var(--green); box-shadow: 0 0 7px var(--green); opacity: 1; }
.stage.market .holo-at, .stage.market .users, .stage.market .flow { transition: opacity .3s var(--ease), filter .3s var(--ease); }
.stage.market[data-hl] .users, .stage.market[data-hl] .flow, .stage.market[data-hl] .b3:not(.hov) { opacity: .45; }
.stage.market[data-hl]:not([data-hl=promo]) .holo-at { opacity: .45; }
.users { position: absolute; z-index: 3; left: 45.1%; top: 71%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px; border-radius: 99px; white-space: nowrap;
  font: 700 15px/1 'JetBrains Mono'; color: var(--text);
  background: rgba(5, 10, 18, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(0, 255, 136, .45), 0 0 24px rgba(0, 255, 136, .2); }
.users i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.users b { font: 400 24px/1 'Archivo Black', sans-serif; color: var(--green); text-shadow: 0 0 16px rgba(0, 255, 136, .65); }
.plus { position: absolute; z-index: 4; left: 37%; top: 64%; padding: 4px 10px; border-radius: 99px; white-space: nowrap;
  font: 800 14px/1 'JetBrains Mono'; letter-spacing: .04em; color: var(--green); opacity: 0; pointer-events: none;
  background: rgba(3, 22, 14, .9); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .75), 0 0 18px rgba(0, 255, 136, .55); }
.plus.go { animation: plus 1.5s var(--ease) forwards; }
@keyframes plus { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.75); } 22% { opacity: 1; transform: translate(-50%, -10px) scale(1.04); } 100% { opacity: 0; transform: translate(-50%, -44px) scale(.96); } }
.flow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.flow .fl-glow { fill: none; stroke: rgba(0, 207, 255, .14); stroke-width: 5; filter: blur(2px); }
.flow .fl { fill: none; stroke: rgba(0, 235, 200, .48); stroke-width: 1.8; stroke-dasharray: 6 10; animation: dash-flow 1.2s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -16; } }
.flow .u-halo { fill: rgba(0, 255, 136, .24); }
.flow .u { fill: #eafff5; stroke: var(--green); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(0, 255, 136, 1)); }
.flow .ping-ring { fill: none; stroke: var(--green); stroke-width: 1.8; opacity: 0; }
.flow .ping-ring.pop { animation: ring-pop .9s var(--ease) forwards; }
@keyframes ring-pop { 0% { r: 6px; opacity: .95; } 100% { r: 30px; opacity: 0; } }

/* step 5: the LIVE Universe with its climbing leaderboard cleanly anchored inside the viewport */
#s5 { padding-bottom: 180px; }
.stage.uni .pic { width: 137%; margin-left: -28%; }
.stage.uni .pic::before, .stage.duo .near::before { content: ''; position: absolute; z-index: -1; inset: -4% -2%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(2, 4, 8, .62), rgba(2, 4, 8, .42) 55%, rgba(2, 4, 8, 0) 100%); }
/* ("bo se snazis moc detailu zobrazovat", "ale za tim nejsou hvezdy ... ze jsi to nejak nalepil"): behind the map the same sky with only
   its brightest stars (capture.py calm), thinning out of the page's own over a long way, so no edge shows */
.stage.uni .pic::before { inset: -22% -14%; background: linear-gradient(rgba(5, 7, 12, .16), rgba(5, 7, 12, .16)), url(pics/space-calm.webp) 50% 50% / cover no-repeat, #05070c;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 42%, transparent 100%); mask-image: radial-gradient(50% 50% at 50% 50%, #000 42%, transparent 100%); }
.stage.uni .sun { position: absolute; z-index: 2; left: 50.61%; top: 38.78%; width: 30.5%; transform: translate(-50%, -50%); pointer-events: none; }
/* (sixteenth take: "nad nejakou lod dej tag YOUR COMPANY"): over your company's station, which the clip holds still
   (record.py UV_SPREAD prints where); the Universe's plate (.b3 above), green as its plate over your own land is */
.b3.you-tag { z-index: 2; transform: translate(-50%, calc(-100% - 10px)); }
.b3.you-tag .rib { font-size: 16px; color: var(--green); }
.stage.uni .sun img { width: 100%; }
/* (fifteenth take, the board: "moc male marginy je to tak vse na sebe namackane a je to cele male"): a third bigger,
   its rows 60 px apart, room inside and round it */
/* (sixteenth take: "musi byt sirsi ted tam neni zadna mezera mezi pointy a nazvy firem"): wider, each company on one
   line, its points in a column of their own well clear of its name; on a narrower screen narrower, so it leaves the
   sun alone, and under 590 px the points under the name again, a gap between */
.lb-wrap { position: absolute; z-index: 3; right: -4.5%; bottom: -17%; top: auto; width: clamp(470px, 33vw, 660px); container-type: inline-size;
  perspective: 1400px; perspective-origin: 100% 40%; }
.lb { padding: 26px 22px 18px; border-radius: 26px; transform: rotateY(-13deg) rotateX(3deg); transform-origin: 100% 50%;
  background: linear-gradient(180deg, rgba(5, 10, 18, .72), rgba(4, 8, 15, .56)); transition: box-shadow .4s var(--ease); }
.lb:has(.climb.won) { box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 255, 136, .6), 0 0 65px rgba(0, 255, 136, .24); }
.lb .gh { padding: 0 12px; gap: 12px; }
.lb .gh b { font-size: 22px; }
.lb .gh .tg { font-size: 12.5px; color: var(--cyan); }
.lb .gh .dot { width: 10px; height: 10px; animation: live-pulse 2s var(--ease) infinite; }
.climb { position: relative; margin-top: 18px; height: calc(6 * 60px); }
.row { position: absolute; left: 0; right: 0; top: 0; height: 60px; display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 128px 112px;
  grid-template-areas: "rk bd nm pp pz"; align-content: center; align-items: center; column-gap: 14px;
  padding: 0 16px; border-radius: 14px; transition: transform .7s var(--ease), background .4s, box-shadow .4s; }
@container (max-width: 589px) {
  .row { grid-template-columns: 34px 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "rk bd nm pz" "rk bd pp pz"; row-gap: 5px; }
  .lb .row .pp { justify-content: flex-start; }
}
.row .rk { grid-area: rk; } .row .badge { grid-area: bd; } .row .nm { grid-area: nm; } .row .pp { grid-area: pp; } .row .pz { grid-area: pz; }
.row + .row::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
.row .rk { font: 400 20px 'Archivo Black', sans-serif; color: var(--mute); text-align: center; background: none; filter: none; -webkit-background-clip: initial; background-clip: initial; }
.row.p1 .rk, .row.p2 .rk, .row.p3 .rk { font-size: 26px; color: transparent; -webkit-background-clip: text; background-clip: text; }
.row.p1 .rk { background-image: linear-gradient(180deg, #eafff4, var(--rs1) 55%, #00a067); filter: drop-shadow(0 0 12px rgba(0, 255, 136, .65)); }
.row.p2 .rk { background-image: linear-gradient(180deg, #e6fbff, var(--rs2) 55%, #0086b5); filter: drop-shadow(0 0 10px rgba(0, 207, 255, .55)); }
.row.p3 .rk { background-image: linear-gradient(180deg, #e3edff, var(--rs3) 55%, #1d4ea8); filter: drop-shadow(0 0 9px rgba(59, 130, 246, .5)); }
.row .badge { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #07101c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 2px rgba(30, 48, 80, .9); }
.row.p1 .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 2px var(--rs1), 0 0 16px rgba(0, 255, 136, .45); }
.row.p2 .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 2px var(--rs2), 0 0 14px rgba(0, 207, 255, .4); }
.row.p3 .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 2px var(--rs3), 0 0 12px rgba(59, 130, 246, .4); }
.row .badge img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); }
.row .nm { position: static; transform: none; padding: 0; border: 0; background: none; box-shadow: none; text-transform: none; letter-spacing: 0;
  font: 700 16px Inter, sans-serif; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.row .nm em { flex: none; font: 800 9.5px 'JetBrains Mono'; font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; color: #03140c; background: var(--green); }
.row .pp { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 600 12.5px 'JetBrains Mono'; color: var(--mute); white-space: nowrap; }
.row .pp b { font: 800 14.5px 'JetBrains Mono'; color: var(--text); }
.row .bar { position: relative; width: 52px; height: 4px; border-radius: 3px; background: rgba(30, 48, 80, .9); overflow: hidden; }
.row .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.row.paid .bar i { background: linear-gradient(90deg, var(--cyan), var(--green)); }
.row .pz { min-width: 0; padding-left: 10px; font: 800 14px 'JetBrains Mono'; text-align: right; color: var(--mute); white-space: nowrap; }
.row.p1 .pz { color: var(--rs1); text-shadow: 0 0 14px rgba(0, 255, 136, .5); } .row.p2 .pz { color: var(--rs2); } .row.p3 .pz { color: var(--rs3); }
.row.me { z-index: 5; background: linear-gradient(90deg, rgb(4, 32, 21), rgb(5, 17, 19) 70%); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .75), 0 0 30px rgba(0, 255, 136, .28), 0 10px 26px rgba(0, 0, 0, .6); }
.row.me.pass { box-shadow: inset 0 0 0 1px var(--green), 0 0 46px rgba(0, 255, 136, .55), 0 16px 34px rgba(0, 0, 0, .72); }
.row.me .nm, .row.me .pp b { color: var(--green); }
.row.me .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 2px var(--green), 0 0 18px rgba(0, 255, 136, .6); }
.climb.won .row.me { background: linear-gradient(90deg, rgb(6, 44, 28), rgb(5, 20, 20) 75%); box-shadow: inset 0 0 0 1.5px var(--green), 0 0 54px rgba(0, 255, 136, .52); }

/* ---- the end: grand finale header + the two live portal doors */
.final { position: relative; padding: 96px 4.5vw 190px; }
.final::before { content: ''; position: absolute; left: 50%; top: 52%; width: min(1500px, 100%); height: 640px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 255, 136, .11), rgba(0, 207, 255, .06) 55%, rgba(0, 207, 255, 0)); pointer-events: none; }
.final-hd { text-align: center; margin-bottom: 48px; }
.final-hd h2 { margin-top: 14px; font-size: clamp(38px, 3vw, 60px); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 760px)); justify-content: center; gap: 44px; }
.door { --cr: 0, 255, 136; --c: var(--green); position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(8, 14, 24, .25), rgba(5, 9, 15, .84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(var(--cr), .42), 0 0 60px rgba(var(--cr), .13), 0 30px 60px rgba(0, 0, 0, .48);
  transition: transform .5s var(--ease), box-shadow .5s; }
.door::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%; z-index: 5; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); transition: left .85s var(--ease); }
.door.uv { --cr: 0, 207, 255; --c: var(--cyan); }
.door.uv .art { background-image: url(pics/space-calm.webp); background-size: 190%; }
.door:hover { box-shadow: inset 0 1px 0 #ffffff, inset 0 0 0 1px rgba(var(--cr), .9), 0 0 95px rgba(var(--cr), .34), 0 40px 70px rgba(0, 0, 0, .58); }
.door .art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: url(pics/space.webp) 50% 50% / cover no-repeat, #05070c; }
.door-tag { position: absolute; left: 22px; top: 20px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 99px;
  font: 800 11px/1 'JetBrains Mono', monospace; letter-spacing: .15em; text-transform: uppercase; color: #ffffff;
  background: rgba(5, 9, 16, .68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(var(--cr), .48); }
.door-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 9px var(--c); }
.door .art .clip { position: absolute; inset: 0; background-size: cover !important; }
.door .art video, .door .art .keyed { width: 100%; height: 100%; object-fit: cover; }
.door .art .clip[data-anim=door-hq] { inset: 6% auto 2% 50%; aspect-ratio: 1500 / 1132; transform: translateX(-50%); }
.door .art::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(5, 9, 15, 0) 50%, rgba(5, 9, 15, .94) 100%); }
.door .art .sun { position: absolute; z-index: 2; left: 50.6%; top: 38.8%; width: 31.9%; transform: translate(-50%, -50%); pointer-events: none; }
.door .art .sun img { width: 100%; }
.door .cta { position: relative; z-index: 4; display: flex; align-items: center; gap: 22px; margin-top: -64px; padding: 0 28px 28px 32px; }
.door .cta .t { flex: none; font: 400 32px/1.04 'Archivo Black', sans-serif; color: #ffffff; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 3px 18px rgba(0, 0, 0, .9); }
.door .cta .t span { color: var(--c); text-shadow: 0 0 24px rgba(var(--cr), .55), 0 3px 18px rgba(0, 0, 0, .9); }
.door .cta .ray { flex: 1; min-width: 24px; height: 2px; margin-right: -22px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--cr), 0), rgba(var(--cr), .85) 78%, #ffffff); box-shadow: 0 0 9px rgba(var(--cr), .5); transition: box-shadow .3s; }
/* ("tlacitka zatim jen ty se mi libi"): studio A's key from contest/a/buttons.html: black glass, its arrow the light inside, one reflection
   across it; arrive at the door and it fills with the door's colour */
.door .arr { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 98px; height: 98px; border-radius: 29px; overflow: hidden; color: rgb(var(--cr));
  background: linear-gradient(113deg, rgba(255, 255, 255, 0) 71%, rgba(255, 255, 255, .085) 71.6%, rgba(255, 255, 255, .012) 90%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(74% 74% at 50% 50%, rgba(var(--cr), .15), rgba(var(--cr), 0) 100%),
    linear-gradient(180deg, #111926 0%, #05080e 56%, #060a11 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .72), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(var(--cr), .34),
    0 0 0 1px rgba(0, 0, 0, .7), 0 22px 44px -18px rgba(var(--cr), .5), 0 12px 26px -10px rgba(0, 0, 0, .85);
  transition: box-shadow .32s var(--ease), color .22s; }
.door .arr::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .28s;
  background: linear-gradient(113deg, rgba(255, 255, 255, 0) 71%, rgba(255, 255, 255, .2) 71.6%, rgba(255, 255, 255, .03) 92%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(130% 120% at 30% -30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgb(var(--cr)), rgb(var(--cr))); }
.door .arr svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(var(--cr), .8)); transition: filter .22s; }
.door:hover .arr { color: #03140c;
  box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(var(--cr), .4), 0 30px 54px -16px rgba(var(--cr), .95), 0 0 42px -6px rgba(var(--cr), .5); }
.door:hover .arr::before { opacity: 1; }
.door:hover .arr svg { filter: none; }
.door:hover .cta .ray { box-shadow: 0 0 16px rgba(var(--cr), .95); }
.door:active .arr { color: #03140c; transition-duration: .07s;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--cr), .4), 0 8px 18px -10px rgba(var(--cr), .7); }
.door:active .arr::before { opacity: .84; transition-duration: .07s; }
.door:active .arr svg { filter: none; }

/* ("chci at to zelene tlacitko je hned zelene ne az na nej najedu ... a na konci to same"): the two green keys, the hero's
   "Start a company" and the Company Builder door's arrow, rest in the colour they used to take on hover. The cyan ones
   stay as they were. Hover changes nothing more; a press still dims it */
.btn-go, .door.go .arr { color: #03140c;
  box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(var(--cr), .4), 0 24px 44px -16px rgba(var(--cr), .95), 0 0 36px -8px rgba(var(--cr), .5); }
.btn-go::before, .door.go .arr::before { opacity: 1; }
.btn-go svg, .door.go .arr svg { filter: none; }

/* ---- rising in */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.step .stage.rv { transition-delay: .12s; }

/* ---- a narrower screen: the rail keeps its lights, the labels shorten */
@media (max-width: 1500px) {
  #rail a .lab { display: none; }
  #rail a .sh { display: inline; font: 600 15px Inter, sans-serif; }
  #rail i { width: clamp(18px, 2vw, 40px); margin: 0 10px; }
  .pill { letter-spacing: .04em; }
  /* a laptop: the pipeline's box gets what the idea and the product window did not need (at 1280 its chambers read "Desig", "Secur") */
  .machine { grid-template-columns: 200px minmax(0, 1fr) 380px; gap: 22px; }
  .ch b { font-size: 14px; }
}
/* a small laptop or a tablet on its side (1024): the prize board's fixed type was wider than its column, the bar ran off
   the edge, and the pipeline's chambers were cut ("Spe", "Desi") */
@media (min-width: 901px) and (max-width: 1180px) {
  .brand .wm { display: none; }
  #bar { gap: 16px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3vw; }
  .board { padding: 26px 24px 20px; }
  .seat { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; }
  .rk { font-size: 46px; }
  .who b { font-size: 21px; } .who span { font-size: 13px; }
  .pay b { font-size: 33px; } .pay span { font-size: 14px; }
  .machine { grid-template-columns: 1fr; gap: 16px; }
  .inlet::after, .outlet::before { display: none; }
  #s5 .pts { max-width: 330px; }
  .door .arr { width: 74px; height: 74px; border-radius: 22px; }
  .door .arr svg { width: 34px; height: 34px; }
  .door .cta .ray { margin-right: -16px; }
  .door .cta { gap: 14px; padding: 0 22px 24px 24px; }
  .door .cta .t { font-size: 24px; }
}
/* ---- a phone: the bar is the mark and the rail, the words above every picture, nothing clipped */
@media (max-width: 900px) {
  #bar { height: 64px; gap: 10px; padding: 0 12px; }
  #rail i { width: 10px; margin: 0 3px; }
  #rail i.run b::after { width: 5px; height: 5px; right: -2.5px; margin-top: -2.5px; box-shadow: 0 0 6px 1px rgba(0, 255, 136, .8); }
  .brand svg { width: 32px; height: 32px; }
  .brand .wm, .pill { display: none; }
  #rail { gap: 2px; padding: 4px; margin-right: 0; }
  #rail a { padding: 7px 8px; gap: 0; }
  #rail .nd { width: 22px; height: 22px; }
  #rail a .sh { display: none; }
  #rail a.on .sh { display: inline; margin-left: 6px; font-size: 14px; }
  #hero { min-height: 0; padding: 214px 0 52px; }
  #sun { left: 50%; top: 116px; width: 224px; }
  /* the headline and the green key first, the prizes under them (the board used to lead and push both below the fold) */
  .hero-in { width: calc(100% - 32px); display: flex; flex-direction: column; gap: 28px; }
  .hero-in h1 { font-size: clamp(29px, 8vw, 38px); line-height: 1.1; white-space: normal; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  .btn-go, .btn-how { width: 100%; padding: 16px 20px; font-size: 14px; }
  .board-wrap { perspective: none; width: 100%; }
  .board { transform: none; padding: 20px 16px 14px; border-radius: 20px; }
  .gh { gap: 10px; } .gh b { font-size: 19px; letter-spacing: .04em; white-space: nowrap; } .gh .tg { font-size: 13px; letter-spacing: .12em; }
  .seat { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 4px; }
  .rk { font-size: 36px; }
  .who b { font-size: 18px; } .who span { font-size: 13px; }
  .pay b { font-size: 22px; } .pay span { font-size: 13px; letter-spacing: .08em; }
  .board .rule { font-size: 12.5px; gap: 8px; }
  .step, #s5 { display: block; min-height: 0; padding: 70px 16px 86px; }
  .step .stage { margin-top: 32px; }
  .num, .step.build .num { position: absolute; font-size: 140px; top: 40px; left: 8px; margin: 0; }
  .kick { font-size: 14px; letter-spacing: .2em; }
  h2, .step.build h2 { font-size: 31px; margin-top: 10px; }
  .pts, .step.build .pts { margin-top: 24px; gap: 16px; }
  .pts li, .step.build .pts li { font-size: 14px; padding-left: 48px; line-height: 1.6; }
  .pts li::before { width: 32px; } .pts li::after { left: 29px; }
  .pts li.earn .xp { margin-left: 8px; padding: 2px 7px; font-size: 9.5px; }
  #s1 .pic, .step.build .stage .pic, .stage.uni .pic { width: 100%; margin-left: 0; }
  .crew-box { margin-top: 26px; padding: 16px; }
  .crew b { font-size: 34px; } .crew span { font-size: 14px; }
  .crew-box { width: auto; }
  .depts { flex-wrap: wrap; }
  .dp { font-size: 10.5px; }
  .step.build .conduit { display: none; }
  .ring { height: 240px; margin-top: 16px; } .ring .items { height: 166px; } .ring .it { width: 150px; height: 85px; } .ring .base { top: 134px; height: 54px; }
  .machine { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .inlet::after, .outlet::before { display: none; }
  .tube .hd { flex-wrap: wrap; gap: 8px 10px; }
  .tube .pn { font-size: 13px; letter-spacing: .1em; }
  .tube .st { font-size: 11px; gap: 7px; margin-left: auto; }
  .chs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tube .track { display: none; }
  .ch b { font-size: 12px; }
  .stage.duo { width: 100%; margin-left: 0; perspective: none; display: flex; flex-direction: column; gap: 20px; height: auto; }
  .stage.duo .near { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; transform: none; margin: 0; }
  .flow { display: none; }
  .b3 .rib { font-size: 11px; padding: 2px 7px 1px; gap: 4px; }
  .b3 .rib::before { width: 4px; height: 4px; }
  .b3 .teth { border-width: 3px; border-bottom: 0; }
  .users { font-size: 11.5px; padding: 4px 10px; top: 85%; } .users b { font-size: 16px; }
  .plus { font-size: 11px; left: 30%; top: 85%; }
  .stage.lab { top: 0; perspective: none; }
  .stage.lab .reactor { width: 100%; margin-left: 0; transform: none; }
  .lab-hud { font-size: 10.5px; padding: 7px 12px; gap: 7px; border-radius: 14px; max-width: 100%; flex-wrap: wrap; justify-content: center; text-align: center; }
  .lb-wrap { position: relative; right: auto; bottom: auto; top: auto; width: 100%; margin-top: 20px; perspective: none; }
  .lb { transform: none; padding: 16px 12px 12px; }
  .climb { width: 100%; margin-top: 8px; padding: 0; height: calc(6 * 48px); }
  .row { left: 0; right: 0; top: 0; height: 48px; grid-template-columns: 24px 32px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    grid-template-areas: "rk bd nm pz" "rk bd pp pz"; gap: 2px 8px; padding: 0 8px; }
  .row .pp { justify-content: flex-start; }
  .row .bar { display: none; }
  .row .rk { font-size: 17px; } .row .badge { width: 30px; height: 30px; } .row .nm { font-size: 13px; } .row .pp, .row .pp b { font-size: 11.5px; }
  .row .pz { font-size: 10px; }
  .b3.you-tag { transform: translate(-50%, calc(-100% - 5px)); }
  .b3.you-tag .rib { font-size: 10px; }
  .final { padding: 56px 16px 120px; }
  .final-hd { margin-bottom: 28px; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .door .cta { margin-top: -54px; padding: 0 18px 20px 20px; gap: 14px; }
  .door .cta .t { font-size: 21px; }
  .door .arr { width: 64px; height: 64px; border-radius: 19px; }
  .door .arr svg { width: 30px; height: 30px; }
  .door-tag { left: 14px; top: 14px; font-size: 10px; padding: 5px 10px; }
  .final::before { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pts li::before, .hlo g.hov .rn, .tube::before, .brand .qb-orbit, .brand .qb-star, #sun, .step.build .conduit i, .flow .fl, .pill i, .lab-hud .st-dot, .lb .gh .dot { animation: none; }
}