:root { color-scheme: dark; --bg:#0a0c0f; --panel:#11171d; --border:#29343e; --ink:#eaf0f3; --muted:#99a9b6; --accent:#aaf4dc; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; left:15px; top:-80px; z-index:20; background:var(--accent); color:#091610; padding:12px; }
.skip-link:focus { top:12px; }
.lab-header { display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:auto; padding:26px 40px; border-bottom:1px solid #1f2930; gap:20px; }
.lab-identity { font-size:21px; font-weight:800; text-decoration:none; letter-spacing:.04em; }
.lab-identity span { font:10px ui-monospace,monospace; color:var(--muted); margin-left:8px; }
.back-link { font-size:12px; color:var(--muted); text-decoration:none; }
main { max-width:1280px; padding:0 40px; margin:auto; }
.lab-intro { display:flex; align-items:flex-end; justify-content:space-between; padding:58px 0 38px; gap:30px; }
.eyebrow { font:10px/1.6 ui-monospace,monospace; letter-spacing:.15em; color:var(--accent); }
h1 { font-size:clamp(38px,5vw,66px); line-height:1.04; letter-spacing:-.055em; font-weight:550; margin:18px 0 20px; }
h1 em { color:var(--accent); font-style:normal; }
.lab-intro p:not(.eyebrow) { color:var(--muted); max-width:520px; font-size:15px; margin:0; }
.lab-stamp { min-width:180px; padding-bottom:4px; font:10px/1.8 ui-monospace,monospace; color:var(--accent); }
.lab-stamp > span:last-child { display:block; color:var(--muted); margin:8px 0 0 16px; }
.status-dot { display:inline-block; width:5px; height:5px; background:var(--accent); border-radius:50%; margin-right:10px; }
.demo-tabs { display:flex; gap:10px; border-bottom:1px solid var(--border); }
.demo-tabs button { display:flex; align-items:center; gap:12px; padding:17px 20px; color:var(--muted); background:transparent; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; font-size:14px; }
.demo-tabs button[aria-current] { color:var(--ink); background:var(--panel); border-color:var(--border); }
.demo-tabs button > span:first-child { font:10px ui-monospace,monospace; color:var(--accent); }
.tab-arrow { margin-left:25px; }
.demo-context { display:flex; justify-content:space-between; gap:20px; margin:20px 0; color:var(--muted); font:10px/1.6 ui-monospace,monospace; }
.demo-context span { color:#c9d4dc; }
.demo-context p { margin:0; text-align:right; }
.demo-grid { display:grid; grid-template-columns:minmax(290px,.88fr) minmax(0,1.55fr); gap:18px; }
.control-panel,.preview-panel { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:23px; min-width:0; }
.panel-heading { display:flex; align-items:center; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.panel-heading h2 { font-size:15px; font-weight:550; margin:0; }
.step { color:var(--accent); border:1px solid #355148; padding:2px 6px; font:10px/1.6 ui-monospace,monospace; border-radius:4px; }
.field { display:flex; flex-direction:column; gap:7px; color:#c8d4dc; font-size:12px; margin:15px 0; }
input:not([type=checkbox]),select,textarea { width:100%; min-width:0; color:var(--ink); padding:10px 11px; border:1px solid #39454f; background:#0c1117; border-radius:6px; font-size:13px; min-height:43px; }
textarea { resize:vertical; }
input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; margin:0; }
fieldset { border:0; padding:0; margin:20px 0; min-width:0; }
legend { color:var(--muted); font-size:11px; margin-bottom:10px; }
.product-option { display:flex; align-items:center; gap:12px; padding:10px 0; cursor:pointer; font-size:13px; }
.product-option small { display:block; color:var(--muted); font:9px ui-monospace,monospace; }
.product-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:7px; font-size:26px; }
.mint.product-mark { background:#25423c; color:#aaf4dc; }
.purple.product-mark { background:#302b45; color:#c3afff; }
.amber.product-mark { background:#423725; color:#f0c780; }
.product-price { color:var(--muted); margin-left:auto; font:11px ui-monospace,monospace; }
.rule-products { border-top:1px solid var(--border); padding-top:16px; }
.rule-products legend { float:left; width:100%; }
.rule-products label { display:flex; gap:10px; align-items:center; font-size:12px; min-height:35px; clear:both; }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor-toggle { display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); font-size:12px; }
.editor-toggle small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.status-badge { margin-left:auto; color:#b0bcc7; background:#202b35; border:1px solid #3e4a56; border-radius:30px; padding:4px 8px; font:9px ui-monospace,monospace; }
.status-badge.positive { color:var(--accent); border-color:#355148; background:#18362c; }
.store-preview { border:1px solid #35423f; border-radius:9px; background:#e6ede5; color:#203a32; overflow:hidden; min-height:420px; }
.store-header { display:flex; justify-content:space-between; gap:10px; padding:18px; border-bottom:1px solid #baccc0; font:8px ui-monospace,monospace; letter-spacing:.06em; }
.store-intro { position:relative; min-height:250px; padding:35px 23px; overflow:hidden; }
.store-intro .eyebrow { color:#526c59; font-size:8px; }
.store-intro h3 { font-size:43px; font-weight:500; line-height:1.05; letter-spacing:-.055em; margin:12px 0; position:relative; z-index:1; }
.store-intro p { font-size:11px; color:#5d7163; max-width:160px; position:relative; z-index:1; }
.orbit-illustration { position:absolute; right:-35px; top:26px; width:240px; height:240px; transform:rotate(-30deg); }
.orbit-illustration i { position:absolute; border:1px solid #7da58b; width:190px; height:90px; border-radius:50%; top:70px; left:25px; }
.orbit-illustration i:nth-child(2) { transform:rotate(60deg); }.orbit-illustration i:nth-child(3) { transform:rotate(120deg); }
.orbit-illustration b { position:absolute; font-size:70px; font-weight:400; top:52px; left:90px; color:#315f4a; }
.offer-card { display:flex; align-items:flex-start; gap:13px; margin:0 16px 18px; padding:20px 16px; border-radius:6px; border:1px solid #a0b8a6; background:#f7faf4; flex-wrap:wrap; }
.offer-star { font-size:26px; color:#456b51; }.offer-card > div { flex:1; min-width:130px; }
.offer-card .eyebrow { color:#54715b; font-size:8px; }.offer-card h3 { font-size:17px; line-height:1.3; margin:7px 0; font-weight:550; letter-spacing:-.03em; }
.offer-card p { font-size:11px; line-height:1.6; color:#637568; margin:0; }.sample-tag { color:#4a6552; font:8px ui-monospace,monospace; padding:4px 7px; border:1px solid #b8cab9; border-radius:3px; }
.empty-preview { text-align:center; padding:20px; margin:0 16px 18px; border:1px dashed #9db7a5; border-radius:6px; background:#dce7dc; }.empty-icon { font-size:29px; }.empty-preview h3 { margin:6px 0; font-size:16px; font-weight:550; }.empty-preview p { font-size:11px; color:#5b7261; }
.editor-ghost .offer-card { opacity:.42; }.editor-marker { padding:8px 16px; color:#5d4a22; background:#f5e1ad; font:9px ui-monospace,monospace; }
.decision-trace { margin:20px 0 0; padding-left:14px; border-left:2px solid #517f6d; }.decision-trace p { font-size:13px; color:#c4d0d9; margin:8px 0; }.decision-trace small { color:var(--muted); font-size:11px; }
.check-line { display:flex; gap:10px; align-items:center; font-size:12px; }.field-help { font-size:11px; color:var(--muted); margin:8px 0 16px; }.error-text { color:#ffb4a9; font-size:12px; }.event-log { background:#0c1116; padding:15px; border:1px solid #29343e; border-radius:7px; margin:20px 0; }.event-log h3 { font-size:12px; margin:0 0 5px; }.event-log p { color:var(--muted); font-size:11px; }.event-log ul,.media-events ul { padding:0; list-style:none; font:10px/1.8 ui-monospace,monospace; color:var(--accent); }
.engineering-notes { margin-top:46px; }.engineering-notes > h2,.original-section h2 { font-size:23px; letter-spacing:-.035em; font-weight:500; margin:0 0 24px; }.notes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:22px 0 30px; }.notes-grid article > span { color:var(--accent); font:9px ui-monospace,monospace; letter-spacing:.1em; }.notes-grid h3 { font-size:16px; font-weight:500; letter-spacing:-.025em; margin:11px 0; }.notes-grid p { font-size:13px; color:var(--muted); margin:0; }
details { padding:17px 0; border-block:1px solid var(--border); margin:20px 0; }summary { cursor:pointer; font-size:13px; color:#cbd7df; }details > p { font-size:13px; color:var(--muted); max-width:850px; }.source-links { display:flex; gap:20px; flex-wrap:wrap; font:11px ui-monospace,monospace; color:var(--accent); }
.original-section { padding:28px 24px; border:1px solid var(--border); background:#0f141a; border-radius:10px; margin-top:38px; }.original-section h2 { margin:10px 0; }.original-section > div > p:last-child { color:var(--muted); font-size:13px; max-width:750px; }.original-section details { margin-bottom:0; border-bottom:0; }.original-caption { font:11px/1.8 ui-monospace,monospace; }pre { padding:20px; background:#080b10; border:1px solid #25313b; border-radius:8px; max-height:420px; overflow:auto; color:#c6e4d6; font:11px/1.8 ui-monospace,monospace; tab-size:2; }
.lab-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--border); margin:48px 0 0; padding:25px 0 35px; color:var(--muted); font-size:11px; }
.media-stage { container-type:inline-size; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#112723; transition:background .5s ease; }.media-stage.purple { background:#22203a; }.media-stage.amber { background:#30271b; }.media-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:28px 30px 0; }.media-heading .eyebrow { color:var(--tone); }.media-heading h2 { font-size:clamp(24px,3.5vw,40px); line-height:1.13; font-weight:500; letter-spacing:-.045em; margin:13px 0 8px; }.media-state { font:10px ui-monospace,monospace; color:var(--tone); white-space:nowrap; display:flex; gap:8px; align-items:center; }.media-state i { width:5px; height:5px; background:var(--tone); border-radius:50%; }
.media-track { display:flex; gap:22px; overflow-x:auto; padding:22px max(20px,calc((100cqw - 520px)/2)) 28px; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x pan-y; }.media-track::-webkit-scrollbar { display:none; }.media-card { flex:0 0 min(520px,calc(100cqw - 40px)); width:min(520px,calc(100cqw - 40px)); min-width:0; scroll-snap-align:center; background:#0e141a; border:1px solid #526d66; border-radius:10px; overflow:hidden; opacity:.5; transform:scale(.94); transition:transform .3s,opacity .3s; }.media-card[data-active=true] { opacity:1; transform:scale(1); }.video-frame { position:relative; aspect-ratio:16/9; background:#0e2426; }.video-frame video { display:block; width:100%; height:100%; object-fit:cover; }.video-play { position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:10px; border:1px solid #b5d5c699; border-radius:30px; padding:10px 14px; min-height:44px; background:#081412df; color:#e5f6ec; font-size:11px; }.video-play.is-playing { top:12px; right:12px; bottom:auto; left:auto; opacity:.8; }.media-card-caption { display:flex; align-items:flex-start; gap:14px; padding:19px; }.clip-number { font:11px ui-monospace,monospace; color:var(--tone); padding-top:3px; }.media-card-caption h3 { font-size:17px; font-weight:500; margin:0 0 5px; letter-spacing:-.02em; }.media-card-caption p { color:var(--muted); font-size:11px; margin:0; }.clip-length { font:9px ui-monospace,monospace; margin-left:auto; white-space:nowrap; color:var(--muted); padding-top:5px; }
.carousel-footer { display:flex; align-items:center; gap:20px; padding:0 30px 24px; }.carousel-arrows { display:flex; gap:8px; }.carousel-arrows button { width:44px; height:44px; border:1px solid #6c827b; border-radius:50%; color:var(--ink); background:transparent; font-size:18px; }.carousel-arrows button:hover { background:#ffffff15; }.carousel-dots { display:flex; gap:0; margin-left:10px; }.carousel-dots button { display:grid; place-items:center; width:35px; height:44px; background:transparent; border:0; }.carousel-dots span { display:block; width:5px; height:5px; background:#72867e; border-radius:50%; transition:width .2s; }.carousel-dots button[aria-pressed=true] span { width:24px; background:var(--tone); border-radius:4px; }.slide-announcement { margin-left:auto; font:10px ui-monospace,monospace; color:var(--tone); }.media-under { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:22px 0; }.media-under p { margin-bottom:0; }.gesture-hint { font:10px ui-monospace,monospace; color:var(--muted); }.media-events { padding:14px 18px; border:1px solid var(--border); border-radius:8px; }.no-script { padding:40px; }
@media(max-width:800px) { .lab-header { padding:22px; }main { padding:0 22px; }.lab-intro { padding:36px 0 26px; }.lab-stamp { display:none; }.demo-grid { grid-template-columns:1fr; }.demo-context { flex-direction:column; gap:6px; }.demo-context p { text-align:left; }.notes-grid { gap:22px; }.media-heading { padding:22px 20px 0; }.media-state { display:none; }.carousel-footer { padding:0 20px 22px; gap:10px; }.carousel-dots { margin-left:0; }.slide-announcement { max-width:110px; line-height:1.6; text-align:right; }.media-under { flex-direction:column; align-items:flex-start; gap:8px; } }
@media(max-width:480px) { .lab-header { padding:18px; }.lab-identity span { font-size:8px; margin-left:3px; }.back-link { font-size:11px; }main { padding:0 16px; }.lab-intro p:not(.eyebrow) { font-size:13px; }.eyebrow { font-size:8px; }.demo-tabs { gap:0; }.demo-tabs button { padding:14px 11px; font-size:11px; gap:8px; flex:1; }.tab-arrow { display:none; }.control-panel,.preview-panel { padding:17px; }.notes-grid { grid-template-columns:1fr; gap:25px; }.notes-grid h3 { margin:8px 0; }.original-section { padding:20px 16px; }.original-section h2 { font-size:21px; }.lab-footer { flex-direction:column; align-items:flex-start; gap:8px; }.media-card-caption { gap:10px; padding:14px; }.media-card-caption h3 { font-size:15px; }.media-card-caption p { font-size:10px; }.clip-length { display:none; }.carousel-dots button { width:26px; }.slide-announcement { font-size:8px; }.carousel-footer { gap:4px; }.store-intro h3 { font-size:38px; }.orbit-illustration { right:-85px; }.field-pair { gap:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:480px) { .field-pair { grid-template-columns:1fr; gap:0; } }