:root{color-scheme:dark;--bg:#0b121a;--panel:#17232d;--panel2:#1c2b37;--panel3:#223441;--line:#334754;--muted:#aabdc7;--text:#edf5f5;--cyan:#78e9ea;--mint:#7eddb8;--gold:#f4c971;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}
.site-header{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1540px;margin:auto;padding:0 36px;border-bottom:1px solid #263844}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;font-weight:750;font-size:19px;letter-spacing:-.03em}.brand em{font-size:12px;letter-spacing:.09em;color:var(--cyan);font-style:normal;text-transform:uppercase;margin-left:5px}.brand-mark{width:29px;height:29px;border:2px solid #b6f3e8;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:2px;transform:rotate(-6deg)}.brand-mark i{width:3px;height:11px;border-radius:2px;background:#a6ece4}.brand-mark i:first-child,.brand-mark i:last-child{height:5px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(4){height:8px}.header-links{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:650}.header-links a{text-decoration:none;color:#beced4}.header-links a:hover{color:#fff}.header-links .header-download{color:#0b2025;background:#b4eee7;padding:10px 14px;border-radius:7px}
.hero{max-width:1540px;margin:auto;min-height:480px;padding:55px 36px 66px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;background:radial-gradient(circle at 73% 47%,#213744 0,#0b121a 54%)}.hero-copy{max-width:620px}.eyebrow{margin:0 0 12px;font-size:11px;color:var(--cyan);letter-spacing:.17em;font-weight:800}.eyebrow-dot{display:inline-block;width:7px;height:7px;background:#81ead9;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #81ead9}.hero h1{font-size:clamp(38px,5vw,70px);line-height:1.05;letter-spacing:-.055em;margin:0 0 22px;max-width:680px}.hero h1 span{color:#9de5dd}.hero-lead{font-size:17px;line-height:1.65;max-width:570px;color:#b4c6ce;margin:0 0 25px}.hero-actions,.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.button{min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:13px;border-radius:7px;padding:10px 16px;border:1px solid #54707c;font-weight:700;font-size:13px;text-decoration:none;transition:transform .16s,background .16s}.button:hover{transform:translateY(-2px)}.button.primary{background:#adede4;color:#0b252b;border-color:#adede4}.button.ghost{color:#d7e5e8;background:#1c2a34}.button.ghost:hover{background:#263b48}.hero-note{color:#839ba5;font-size:12px;margin:18px 0 0}.hero-art{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}.hero-art:before{content:"";position:absolute;width:390px;height:170px;background:radial-gradient(ellipse,#36bdb846,transparent 65%);bottom:0;filter:blur(25px)}.hero-cube{position:relative;width:min(65%,340px);transform:perspective(800px) rotateY(-9deg) rotateX(3deg);filter:drop-shadow(20px 26px 20px #0008)}.hero-cube-face{height:230px;background:linear-gradient(117deg,#303536,#1d2224 38%,#292d2e 80%,#171b1d);border:1px solid #3e4545;border-radius:4px 5px 1px 1px}.hero-led{height:12px;margin:0 4px;background:linear-gradient(90deg,#1ab7d7 0 22%,#c2f8ec 35%,#30cf9f 50%,#f2be67 75%,#ee667e 100%);box-shadow:0 0 8px 2px #7debe7,0 0 18px #70ccce82;filter:blur(.4px)}.hero-base{height:50px;background:linear-gradient(105deg,#282e30,#171b1e 65%,#262b2d);display:flex;align-items:center;gap:8%;padding:0 6%;border-radius:0 0 4px 4px}.hero-base b{width:18%;height:11px;background:#090c0e;box-shadow:inset 0 2px 2px #000}.hero-base b:nth-child(3){width:10%;height:3px}.hero-base span{margin-left:auto;width:25px;height:25px;border:2px solid #0c1011;border-radius:50%;box-shadow:-35px 0 0 -10px #e3e9f2}.hero-caption{position:absolute;bottom:-14px;right:10%;font-size:10px;letter-spacing:.2em;color:#7195a0}
.intro-strip{border-top:1px solid #273945;border-bottom:1px solid #273945;background:#101b24;min-height:66px;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,50px);flex-wrap:wrap;padding:12px 20px;color:#94aab4}.intro-strip span{color:#6e8994;font-size:10px;letter-spacing:.16em;font-weight:800}.intro-strip strong{font-size:12px;font-weight:650}
.lab-section{max-width:1540px;margin:auto;padding:70px 36px 100px;scroll-margin-top:15px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:28px}.section-heading h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;margin:0}.section-heading>p{max-width:365px;line-height:1.6;margin:0;color:#8ca4af;font-size:13px}.workbench{display:grid;grid-template-columns:minmax(470px,.95fr) minmax(520px,1.05fr);gap:22px;align-items:start}.settings-shell,.stage-shell{border:1px solid #3b5361;border-radius:15px;background:#15212b;box-shadow:0 25px 70px #0004;overflow:hidden}.settings-header{height:72px;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid #334957;background:#1b2b36}.settings-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:#c6ffed;background:#2b4d51;font-size:22px}.settings-header strong,.settings-header small{display:block}.settings-header strong{font-size:16px}.settings-header small{font-size:11px;color:#91abb5;margin-top:2px}.mock-badge{margin-left:auto;font-size:10px;color:#a4f2e1;letter-spacing:.11em;padding:6px 8px;border:1px solid #3f7c78;border-radius:5px}.tab-list{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;padding:9px 10px;background:#14212b;border-bottom:1px solid #344a57}.tab{flex:none;display:flex;align-items:center;gap:5px;white-space:nowrap;border:0;border-radius:6px;background:transparent;color:#a9c0c8;padding:8px 10px;font-size:11px;font-weight:650}.tab span{font-size:14px}.tab:hover{background:#223744;color:#fff}.tab.active{background:#aeeae3;color:#11262d}.settings-content{min-height:640px;max-height:800px;overflow:auto;scrollbar-color:#44606e transparent}.pane{display:none;padding:22px}.pane.active{display:block}.pane-head{margin-bottom:24px}.pane-head h3{font-size:28px;line-height:1.14;letter-spacing:-.035em;margin:0 0 9px}.pane-head>p:last-child{color:#aec3ca;line-height:1.55;font-size:13px;margin:0}.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.scene-card{position:relative;text-align:left;min-height:116px;border:1px solid #415b67;border-radius:9px;padding:13px;background:linear-gradient(135deg,#223541,#1a2a35);color:#edf8f6}.scene-card:hover{background:#2a404a;border-color:#8cbbbf;transform:translateY(-1px)}.scene-card strong,.scene-card small{display:block}.scene-card strong{font-size:14px;margin:8px 0 3px}.scene-card small{font-size:11px;color:#a9bdc5;line-height:1.35;padding-right:15px}.scene-icon{font-size:18px}.scene-icon.violet{color:#d0a0ef}.scene-icon.cyan{color:#86e6e8}.scene-icon.amber{color:#f5c774}.scene-icon.green{color:#79dba7}.scene-icon.blue{color:#8badf4}.scene-icon.gold{color:#ffd16f}.scene-arrow{position:absolute;right:12px;top:11px;color:#7794a0}.callout{margin-top:20px;padding:14px 16px;border:1px solid #38605d;background:#19322f;border-radius:8px}.callout strong{font-size:13px;color:#c5f5e9}.callout p{font-size:12px;color:#a7c5c4;line-height:1.55;margin:5px 0 0}.callout.compact{margin-top:17px}
.control-group{margin-bottom:16px}.group-label{display:block;font-size:10px;letter-spacing:.13em;font-weight:800;color:#9ab3bc;margin-bottom:9px}.segmented{display:flex;gap:4px;padding:4px;border:1px solid #45606c;border-radius:7px;background:#15232d;overflow-x:auto}.segmented button{flex:1;min-width:0;border:0;border-radius:5px;background:transparent;color:#abc0c8;padding:10px 9px;font-size:12px;white-space:nowrap}.segmented button.selected{background:#385b63;color:#ecfffa;font-weight:750}.segmented button:hover:not(.selected){background:#273c47}.event-kinds{margin-bottom:17px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:650;color:#c9dadd}.field select{width:100%;height:38px;border-radius:6px;border:1px solid #55707e;padding:0 9px;background:#263c49;color:#fff;font-size:12px}.slider-field{display:block;margin:15px 0;font-size:12px;font-weight:650;color:#c9dadd}.slider-field>span{display:flex;justify-content:space-between;gap:8px}.slider-field output{color:#a9f0e9;font-weight:750}.slider-field input{width:100%;accent-color:#83e4e4;margin:13px 0 2px;cursor:pointer}.field-help{font-size:11px;line-height:1.55;color:#8fa8b2;margin:14px 0}.field-help a{color:#aeeae3}.toggle-line{display:flex;align-items:start;gap:11px;margin:17px 0;padding:12px;border:1px solid #3f5965;border-radius:7px;background:#20323d}.toggle-line input,.inline-check input{accent-color:#83ded6}.toggle-line strong,.toggle-line small{display:block}.toggle-line strong{font-size:12px}.toggle-line small{font-size:11px;color:#9bb3bd;line-height:1.4;margin-top:3px}.colour-row{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.colour-row label{flex:1;min-width:67px;font-size:11px;color:#b7cad1;display:flex;align-items:center;justify-content:space-between;gap:6px;background:#213541;border:1px solid #42606e;padding:6px;border-radius:6px}.colour-row input{width:30px;height:25px;border:0;background:none;padding:0;cursor:pointer}.inline-check{font-size:12px;color:#b8cbd1}.art-preview{background:#0f1a23;border:1px solid #49606b;border-radius:8px;overflow:hidden;margin-top:16px}.art-image-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:160px;padding:8px;background:#0d141d}.art-image-wrap img{display:block;max-width:100%;max-height:250px;width:auto;height:auto;border-radius:3px}.art-image-wrap #sampleLine{position:absolute;height:2px;background:#ff4758;box-shadow:0 0 9px 3px #f33b53;pointer-events:none}.art-preview-foot{display:flex;justify-content:space-between;gap:8px;padding:10px;font-size:11px}.art-preview-foot span{color:#9eafb8}.upload-button{margin-top:12px;border:1px solid #4b6e79;display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:7px;font-size:12px;cursor:pointer}.upload-button span{color:#9decdf}.upload-button input{position:absolute;width:1px;height:1px;opacity:0}.event-card{position:relative;overflow:hidden;border-radius:9px;background:radial-gradient(circle at 12% 20%,#3a6870 0,#1f3745 34%,#15242e 76%);border:1px solid #53727a;padding:22px;margin-bottom:16px;min-height:155px}.event-card .eyebrow{position:relative}.event-card h4{position:relative;font-size:23px;margin:0 0 6px;letter-spacing:-.02em}.event-card p:last-child{position:relative;font-size:12px;line-height:1.5;color:#bad0d4;max-width:330px;margin:0}.event-orbit{position:absolute;right:24px;top:5px;color:#a9eded55;font-size:100px}.priority-list{list-style:none;padding:0;margin:0 0 23px;counter-reset:p}.priority-list li{position:relative;padding:11px 12px 11px 47px;border:1px solid #3e5763;border-radius:7px;margin-bottom:7px;background:#1d2f3b}.priority-list li:before{counter-increment:p;content:counter(p);position:absolute;left:14px;top:15px;color:#a7eee5;font-weight:800;font-size:12px}.priority-list b,.priority-list span{display:block}.priority-list b{font-size:12px}.priority-list span{color:#9eb5bd;font-size:11px;margin-top:3px;line-height:1.35}.priority-feedback{padding:10px 12px;border-left:3px solid #86dacf;background:#1d3538;color:#bbd8d5;font-size:11px;line-height:1.45;border-radius:0 5px 5px 0}
.stage-shell{position:sticky;top:15px;background:#17232d}.stage-top{height:72px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#192a35;border-bottom:1px solid #3a5260}.stage-top .eyebrow{margin-bottom:4px}.stage-top strong{font-size:16px}.stage-controls{display:flex;gap:6px}.stage-controls button{background:#2b4350;color:#c7e6e8;border:1px solid #506d7b;border-radius:6px;width:32px;height:31px}.stage-controls button:hover{background:#3b606b}.stage-context{height:37px;display:flex;align-items:center;gap:8px;padding:0 17px;background:#13212b;color:#acbfc7;font-size:10px;letter-spacing:.08em;font-weight:750}.stage-context button{border:0;background:#2a404a;border-radius:4px;color:#b7dbda;padding:4px 7px;font-size:9px;white-space:nowrap}.stage-context button:hover{background:#385966}.status-dot{width:7px;height:7px;background:#8fe2be;border-radius:50%;box-shadow:0 0 9px #6ce7ac}.stage-mini{margin-left:auto;color:#9beddf;background:#254340;border-radius:4px;padding:5px 7px;white-space:nowrap}.machine-scene{height:385px;position:relative;overflow:hidden;display:flex;align-items:end;justify-content:center;padding-bottom:63px;background:radial-gradient(circle at 50% 26%,#b4a69f 0,#968983 62%,#7b706c 100%)}.scene-wall-line{position:absolute;top:67%;height:7px;background:#725b51;left:0;right:0;opacity:.8}.scene-shelf{position:absolute;bottom:0;left:0;right:0;height:84px;background:linear-gradient(173deg,#b79069,#e2c29a 40%,#bb956a);box-shadow:inset 0 6px 7px #fce7c4a0}.steam-machine{position:relative;width:min(62%,330px);z-index:2;filter:drop-shadow(12px 18px 11px #30241dc0)}.cube-face{height:225px;border:1px solid #373e3e;border-radius:3px 4px 0 0;background:linear-gradient(107deg,#2d3132,#1a1e20 42%,#272c2d 82%,#1b1e20);box-shadow:inset 1px 0 1px #bbc4bd55,inset -2px 0 3px #0006}.led-seam{position:relative;margin:0 5px;height:12px;background:#080c0e;isolation:isolate;overflow:visible}.led-seam canvas{position:absolute;width:100%;height:58px;left:0;top:-23px;pointer-events:none}.machine-front{height:50px;display:flex;align-items:center;gap:9%;padding:0 6%;background:linear-gradient(108deg,#282d2f,#191d20 67%,#2a2e2f);border-radius:0 0 3px 3px;box-shadow:inset 0 2px 3px #70777333}.port{width:16%;height:12px;background:#070b0c;box-shadow:inset 0 2px 3px #000,0 1px 1px #9a9e9833}.port:after{content:"";display:block;width:65%;height:3px;margin:5px auto;background:#4b5151}.sd-slot{width:11%;height:3px;background:#080b0b}.power-led{width:5px;height:5px;border-radius:50%;background:#edf3fb;margin-left:auto;box-shadow:0 0 7px #d8e3ff}.power-button{width:26px;height:26px;border-radius:50%;background:#292e2f;border:2px solid #0b0d0e;box-shadow:inset 1px 1px 3px #a8b1aa40}.logical-panel{padding:18px 17px 16px;background:#172530}.logical-head{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:12px}.logical-head strong{display:block;font-size:15px;margin-top:4px}.logical-kicker{font-size:9px;letter-spacing:.15em;color:#84a3b0;font-weight:750}.logical-head>span{font-size:11px;color:#a6d2d0;white-space:nowrap;text-align:right}.logical-leds{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:3px}.logical-leds i{display:block;height:22px;background:#33454e;border-radius:2px;transition:background .06s}.logical-foot{display:flex;justify-content:space-between;color:#7f9da9;font-size:9px;letter-spacing:.05em;margin-top:8px}.stage-explain{border-top:1px solid #36505d;margin-top:16px;padding-top:13px;color:#aec3c9;line-height:1.55;font-size:12px;min-height:50px}.demo-disclaimer{display:flex;gap:10px;align-items:start;border-top:1px solid #3d535f;padding:12px 16px;background:#12202a;color:#7f9ca8;font-size:10px;line-height:1.5}.info-icon{display:grid;place-items:center;border:1px solid #66818b;width:15px;height:15px;border-radius:50%;flex:none;font-family:Georgia,serif;font-size:11px}.mobile-preview{display:none}footer{border-top:1px solid #28404c;max-width:1540px;margin:auto;padding:35px 36px 65px;display:flex;justify-content:space-between;gap:30px;color:#8fa8b2;font-size:12px}footer strong{color:#e9f4f4;font-size:19px}footer p{max-width:450px;line-height:1.6}footer>div:last-child{display:flex;gap:20px}footer a{color:#afe9e1;text-decoration:none}
@media(max-width:1120px){.workbench{grid-template-columns:minmax(400px,1fr) minmax(380px,1fr)}.machine-scene{height:350px}.steam-machine{width:min(70%,300px)}.cube-face{height:205px}.pane{padding:18px}.tab{padding:8px 7px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:42px;gap:15px}.hero-art{min-height:270px}.hero-cube{width:275px}.hero-cube-face{height:190px}.intro-strip{gap:18px}.workbench{display:flex;flex-direction:column}.settings-shell,.stage-shell{width:100%}.stage-shell{position:static;order:-1}.settings-content{max-height:none;min-height:0}.machine-scene{height:350px}.section-heading{align-items:start;flex-direction:column;gap:10px}.lab-section{padding-top:48px}.mobile-preview{display:none;position:fixed;z-index:20;bottom:0;left:0;right:0;padding:9px 15px 12px;background:#101f29f5;border-top:1px solid #5a7d85;box-shadow:0 -8px 30px #0008;backdrop-filter:blur(12px)}.mobile-preview.visible{display:block}.mobile-preview>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:11px}.mobile-preview a{font-size:10px;color:#a9eae3;text-decoration:none}.mobile-leds{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:2px}.mobile-leds i{display:block;height:7px;border-radius:1px;background:#33454e}footer{padding-bottom:105px}}
@media(max-width:560px){.site-header{padding:0 17px}.brand{font-size:16px}.brand em{display:none}.header-links{gap:10px}.header-links>a:first-child{display:none}.header-links .header-download{font-size:11px;padding:9px}.hero{padding:34px 19px 43px}.hero h1{font-size:43px}.hero-lead{font-size:15px}.hero-art{min-height:250px}.hero-cube{width:260px}.intro-strip{justify-content:start}.intro-strip strong{font-size:11px}.lab-section{padding:42px 12px 70px}.section-heading{padding:0 7px}.pane{padding:17px}.scene-grid{gap:7px}.scene-card{min-height:113px;padding:10px}.form-grid{grid-template-columns:1fr;gap:4px}.segmented button{font-size:11px}.tab-list{display:flex;flex-wrap:nowrap}.stage-top{height:61px}.machine-scene{height:310px;padding-bottom:48px}.steam-machine{width:min(69%,270px)}.cube-face{height:178px}.machine-front{height:43px}.scene-shelf{height:65px}.logical-leds{gap:2px}.logical-leds i{height:18px}.logical-head{align-items:start;flex-direction:column}.logical-head>span{text-align:left}.pane-head h3{font-size:25px}footer{padding:30px 20px;flex-direction:column}footer>div:last-child{flex-wrap:wrap}}

/* Front-on silhouette: Valve specifies 156 mm wide by 152 mm tall.
   The three visible bands share that fixed overall aspect ratio at every viewport. */
.hero-cube,.steam-machine{aspect-ratio:156/152;display:flex;flex-direction:column}
.hero-cube{transform:none}
.hero-cube-face,.cube-face{height:auto;flex:0 0 82.9%}
.hero-led,.led-seam{height:auto;flex:0 0 1.3%}
.hero-base,.machine-front{height:auto;flex:0 0 15.8%}
.machine-measure{position:absolute;z-index:3;right:16px;top:15px;font-size:9px;letter-spacing:.09em;font-weight:800;color:#293a3e;text-decoration:none;background:#f2e4d3b8;border:1px solid #ffffff77;border-radius:3px;padding:6px 8px}
.machine-measure:hover{background:#fff1df}
.hero-art{min-height:365px}
.machine-scene{height:430px}
@media(max-width:1120px){.machine-scene{height:390px}}
@media(max-width:850px){.hero-art{min-height:315px}.machine-scene{height:390px}}
@media(max-width:560px){.hero-art{min-height:275px}.machine-scene{height:355px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.scene-card,.logical-leds i{transition:none}}
@media(min-width:561px){.tab-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.tab{justify-content:center}}