:root { --ink: #eaf1ed; --muted: #85938b; --line: rgba(188, 214, 201, .13); --panel: rgba(14, 31, 27, .82); --deep: #07110f; --green: #e9ddb4; --lime: #f3cf68; --orange: #ffc56b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--deep); font-family: Manrope, ui-sans-serif, system-ui, sans-serif; min-width: 320px; }
body:before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .3; background-image: radial-gradient(rgba(209,255,224,.09) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.shell { max-width: 1320px; margin: 0 auto; padding: 0 34px 30px; position: relative; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font: 500 13px/1 "DM Mono", monospace; letter-spacing: .08em; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(214,255,115,.65); color: var(--lime); font: 500 11px "DM Mono", monospace; transform: rotate(-8deg); }
.muted { color: #6c7d75; }
nav { display: flex; gap: 26px; color: var(--muted); font: 500 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
nav a { transition: color .2s; } nav a:hover, nav a.active { color: var(--green); }
.status-cluster { display: flex; align-items: center; gap: 8px; color: var(--green); font: 500 10px "DM Mono", monospace; letter-spacing: .08em; }
.dot, .pulse, .note-dot, .status-ring { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214,255,115,.08); }
.mode-pill { margin-left: 8px; padding: 6px 8px; border: 1px solid rgba(214,255,115,.28); color: var(--lime); font-size: 9px; }
.hero { padding: 72px 0 56px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 62px; align-items: center; }
.eyebrow, .tiny-label, .scene-label, .camera-state { color: #789187; font: 500 10px "DM Mono", monospace; letter-spacing: .12em; }
.slash { color: #3a5b4e; margin: 0 8px; }
h1 { margin: 24px 0 22px; font-size: clamp(48px, 6vw, 84px); line-height: .97; letter-spacing: -.07em; font-weight: 700; }
h1 em { color: var(--lime); font-style: normal; }
.lede { max-width: 390px; color: #a2b2a9; font-size: 15px; line-height: 1.7; }
.hero-meta { margin-top: 34px; display: flex; align-items: center; gap: 9px; color: #759084; font: 10px "DM Mono", monospace; }
.hero-meta strong { color: var(--green); font-weight: 500; } .sep { height: 12px; border-left: 1px solid var(--line); margin: 0 4px; }
.scene-card { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(21, 44, 37, .84), rgba(10, 24, 21, .92)); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.scene-top, .scene-footer { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.camera-state { color: var(--lime); font-size: 9px; }
.scene-image { height: 370px; position: relative; overflow: hidden; contain: paint; background: radial-gradient(circle at 66% 34%, rgba(112, 173, 130, .32), transparent 27%), linear-gradient(135deg, #17372f, #071411 66%); }
.scene-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; filter: brightness(.62) saturate(.78) contrast(1.05); opacity: .9; }
.scene-image:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,16,13,.18), rgba(5,16,13,.02) 48%, rgba(5,16,13,.58)); }
.grid-lines { position: absolute; inset: 0; opacity: .16; background: linear-gradient(90deg, transparent 49%, rgba(175,255,204,.4) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(175,255,204,.4) 50%, transparent 51%); background-size: 72px 72px; transform: perspective(400px) rotateX(55deg) scale(1.5) translateY(90px); }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); } .orb-a { width: 260px; height: 260px; top: -135px; right: 12%; background: radial-gradient(circle at 40% 36%, rgba(211,255,150,.5), rgba(115,207,151,.05) 58%, transparent 70%); } .orb-b { width: 180px; height: 180px; bottom: -100px; left: 6%; background: radial-gradient(circle, rgba(85,157,133,.25), transparent 66%); }
.desk { position: absolute; left: 13%; right: 7%; bottom: 30px; height: 104px; border-top: 5px solid #294d40; background: linear-gradient(90deg, rgba(35,69,57,.9), rgba(11,27,23,.9)); transform: perspective(300px) rotateX(16deg); }
.screen { position: absolute; width: 172px; height: 105px; left: 22%; bottom: 23px; padding: 12px; border: 5px solid #203c33; background: #071612; box-shadow: 0 14px 30px rgba(0,0,0,.35); transform: rotateY(-10deg); } .screen span { color: #76998a; font: 8px "DM Mono", monospace; } .screen strong { display: block; margin-top: 17px; color: var(--lime); font-size: 11px; line-height: 1.35; } .screen i { display: block; width: 42px; height: 2px; margin-top: 12px; background: #79c78d; }
.lamp { position: absolute; right: 25%; bottom: 26px; width: 38px; height: 88px; border-left: 2px solid #6f9882; } .lamp:before { content: ""; position: absolute; left: -17px; top: -3px; width: 32px; height: 21px; border-radius: 50% 50% 4px 4px; background: #e4b57b; box-shadow: 0 0 42px rgba(255,190,96,.46); }
.paper { position: absolute; right: 9%; bottom: 13px; width: 54px; height: 40px; background: rgba(215,231,204,.78); transform: rotate(11deg); }
.founder-silhouette { display: none; position: absolute; left: 9%; bottom: 72px; width: 105px; height: 210px; opacity: .92; } .head { position: absolute; left: 28px; top: 0; width: 55px; height: 65px; border-radius: 50% 50% 46% 46%; background: #b6b695; box-shadow: inset -12px -5px 0 rgba(35,51,40,.7); } .body { position: absolute; left: 4px; top: 56px; width: 97px; height: 155px; border-radius: 48px 48px 0 0; background: linear-gradient(120deg, #375d4e, #12291f); } .arm { position: absolute; top: 111px; right: -22px; width: 80px; height: 20px; border-radius: 12px; background: #406f59; transform: rotate(19deg); }
.scene-caption { position: absolute; left: 16px; bottom: 14px; right: 16px; display: flex; justify-content: space-between; color: rgba(227,248,230,.58); font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.scene-footer { border-top: 1px solid var(--line); border-bottom: 0; color: #96aea2; font-size: 11px; } .scene-footer b { color: var(--ink); font-weight: 500; } .signal { color: var(--lime); font: 9px "DM Mono", monospace; } .signal i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--lime); }
.control-strip { display: grid; grid-template-columns: .75fr 1.5fr .55fr; gap: 35px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } h2 { margin: 8px 0 4px; font-size: 18px; letter-spacing: -.03em; } .muted-copy { margin: 0; color: #758e82; font-size: 12px; line-height: 1.5; }
.proposal-actions { display: flex; gap: 8px; } .proposal-actions button { flex: 1; min-height: 64px; padding: 12px; text-align: left; border: 1px solid var(--line); background: rgba(21,43,35,.56); color: #c9ddd0; cursor: pointer; transition: transform .2s, border .2s, background .2s; } .proposal-actions button:hover { border-color: rgba(214,255,115,.62); background: rgba(33,66,50,.75); transform: translateY(-2px); } .proposal-actions button:disabled { opacity: .5; cursor: wait; } .proposal-actions span { display: block; margin-bottom: 10px; color: #6c897a; font: 9px "DM Mono", monospace; } .proposal-actions i { float: right; color: var(--lime); font-style: normal; font-size: 17px; }
.proposal-status { justify-self: end; display: flex; align-items: center; gap: 8px; color: #789588; font: 9px "DM Mono", monospace; text-align: right; } .status-ring { background: #56766a; box-shadow: none; } .status-ring.queued { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,197,107,.1); }
.dashboard-grid, .lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .lower-grid { grid-template-columns: 1.2fr .8fr; }
.panel { padding: 21px 22px; border: 1px solid var(--line); background: var(--panel); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .private-tag { padding: 5px 7px; border: 1px solid var(--line); color: #78998a; font: 9px "DM Mono", monospace; } .panel blockquote { min-height: 68px; margin: 22px 0 26px; max-width: 540px; color: #e5f3e9; font-size: 20px; line-height: 1.35; letter-spacing: -.04em; }
.meter-row { display: grid; grid-template-columns: 105px 1fr 40px; align-items: center; gap: 12px; margin-top: 13px; color: #759386; font: 9px "DM Mono", monospace; } .meter { height: 4px; background: #1c3930; } .meter i { display: block; height: 100%; background: var(--green); } .meter.amber i { background: var(--orange); } .meter-row b { color: #c3dbca; font-weight: 500; text-align: right; }
.ledger { display: grid; grid-template-columns: 1fr 1fr; margin-top: 23px; } .ledger > div { padding: 15px 0; border-top: 1px solid var(--line); } .ledger > div:nth-child(odd) { margin-right: 20px; } .ledger span, .ledger small { display: block; color: #759286; font: 9px "DM Mono", monospace; } .ledger strong { display: inline-block; margin: 8px 5px 0 0; color: var(--green); font-size: 27px; letter-spacing: -.06em; } .ledger small { display: inline; color: #597366; } .ledger-note { margin-top: 12px; color: #789489; font: 10px "DM Mono", monospace; } .note-dot { width: 5px; height: 5px; margin-right: 5px; background: #7aa98d; box-shadow: none; }
.event-list { margin-top: 16px; } .event-row { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); } .event-index { color: #6b8e7e; font: 11px "DM Mono", monospace; } .event-main strong, .event-main span, .event-main small { display: block; } .event-main strong { color: #d8e9dc; font-size: 12px; font-weight: 600; } .event-main span { margin-top: 4px; color: #759083; font-size: 11px; line-height: 1.4; } .event-main small { margin-top: 7px; color: var(--lime); font: 8px "DM Mono", monospace; letter-spacing: .08em; } .event-row time { color: #5f7a6d; font: 9px "DM Mono", monospace; white-space: nowrap; } .view-link { color: var(--lime); font: 9px "DM Mono", monospace; }
.cast-list { margin-top: 16px; } .cast-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); } .cast-avatar, .cast-avatar img { width: 38px; height: 38px; border-radius: 50%; } .cast-avatar { overflow: hidden; border: 1px solid rgba(236,221,180,.24); background: #16362b; } .cast-avatar img { display: block; object-fit: cover; object-position: 68% 42%; filter: saturate(.82) contrast(1.04); } .avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #092117; background: #b5dfa7; font: 500 9px "DM Mono", monospace; } .avatar-1 { background: #e0b878; } .avatar-2 { background: #8fcad2; } .cast-row strong, .cast-row span { display: block; } .cast-row strong { color: #d8e9dc; font-size: 12px; } .cast-row span { margin-top: 3px; color: #759083; font-size: 10px; } .cast-row em { color: #82ad92; font: 9px "DM Mono", monospace; font-style: normal; } .cast-note { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--line); color: #759083; font-size: 11px; line-height: 1.55; }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 28px 0 0; color: #526b60; font: 9px "DM Mono", monospace; letter-spacing: .04em; } footer .connected { color: #83bb96; } footer .disconnected { color: var(--orange); }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 13px 16px; border: 1px solid rgba(214,255,115,.35); background: #11241d; color: var(--green); font: 11px "DM Mono", monospace; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .25s; } .toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 52px; } .hero-copy { max-width: 700px; } .scene-image { height: 340px; } .control-strip { grid-template-columns: 1fr; gap: 19px; } .proposal-status { justify-self: start; } }
@media (max-width: 700px) { .shell { padding: 0 16px 24px; } .topbar { height: 68px; } nav { display: none; } .status-cluster { margin-left: auto; } .hero { padding: 45px 0 35px; } h1 { font-size: 51px; } .lede { font-size: 14px; } .hero-meta { flex-wrap: wrap; line-height: 1.5; } .scene-image { height: 280px; } .desk { left: 8%; right: 0; } .founder-silhouette { transform: scale(.78); transform-origin: bottom left; left: 3%; } .screen { left: 27%; } .proposal-actions { display: grid; grid-template-columns: 1fr; } .proposal-actions button { min-height: 54px; } .dashboard-grid, .lower-grid { grid-template-columns: 1fr; } .panel { padding: 18px; } .panel blockquote { font-size: 18px; } .event-row { grid-template-columns: 27px 1fr; } .event-row time { grid-column: 2; } footer { flex-direction: column; line-height: 1.4; } }
.chapter-strip { border-top:1px solid var(--line); padding:22px 0; }
.chapters { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:16px 0; }
.chapters span { padding:12px 8px; border:1px solid var(--line); font-size:11px; color:var(--muted); }
.chapters span.selected { color:var(--lime); border-color:var(--lime); background:#332d18; }
.story-disclosure { font-size:11px; color:#a39474; margin-bottom:0; }
.chapter-detail { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; padding:18px 0 7px; border-top:1px solid var(--line); }
.chapter-detail h2 { color:var(--ink); margin:7px 0 0; }
.chapter-detail strong { color:var(--lime); font-size:13px; font-weight:600; }
.chapter-detail p { margin:8px 0 0; color:#889d91; font-size:12px; line-height:1.55; max-width:600px; }
.glasses { position:absolute; top:24px; left:0; width:49px; height:13px; border-top:2px solid #19271e; }
.glasses:before,.glasses:after { content:""; position:absolute; width:19px; height:12px; border:2px solid #19271e; border-radius:4px; top:-3px; }
.glasses:after { right:0; }
.head { background:#c7b291; border-top:6px solid #263328; }
.body:after { content:"CZ"; position:absolute; top:37px; left:29px; color:var(--lime); font:bold 16px monospace; }
.founder-silhouette { animation:breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { translate:0 -3px; } }
.scene-image { transition:filter 1s; }
.feed-controls { display:flex; gap:8px; padding-top:16px; }
.feed-controls button { border:1px solid var(--line); padding:8px 12px; background:#182b23; cursor:pointer; font-size:11px; }
.event-row[data-event] { cursor:pointer; }
.event-row[data-event]:hover { background:#203027; }
#replay-detail { margin-top:16px; padding:16px; border:1px solid var(--lime); font-size:13px; line-height:1.6; }
#replay-detail strong { color:var(--lime); }
body.offline .camera-state,body.offline .signal { color:var(--orange); }
body.offline .pulse, body.paused .pulse { background:var(--orange); }
body.paused .founder-silhouette,body.offline .founder-silhouette { animation-play-state:paused; }
@media(max-width:700px){ .chapters{grid-template-columns:repeat(3,1fr)} .brand{font-size:10px} .status-cluster{font-size:9px;gap:4px} .mode-pill{margin-left:0;font-size:8px} .topbar{gap:7px} .scene-footer{gap:10px} .signal{min-width:75px} }
@media(max-width:700px){ .chapter-detail{grid-template-columns:1fr;gap:7px} }
@media(prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important} }

.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.06) brightness(.74);opacity:.92;z-index:0;transition:opacity .35s ease,filter .35s ease}
.scene-image:has(.scene-video[src]) .scene-portrait{opacity:.10;mix-blend-mode:screen}
.scene-image:after{z-index:2}
.scene-image .desk,.scene-image .scene-caption{z-index:3}
.scene-image .grid-lines,.scene-image .orb{z-index:1}