:root { --ink:#16334b; --ink-soft:#526b79; --navy:#102b43; --sea:#e7f5f0; --mint:#9ce5d2; --sand:#fbf7ee; --coral:#ff6b4a; --line:#ccd9d8; --white:#fffefa; --shadow:0 20px 55px rgba(16,43,67,.12); }
* { box-sizing:border-box; } html { background:var(--sand); } body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 17%, rgba(156,229,210,.32), transparent 24rem),var(--sand); font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif; line-height:1.5; } button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; }
.topbar { width:min(1200px,calc(100% - 3rem)); margin:0 auto; padding:1.3rem 0; display:flex; align-items:center; justify-content:space-between; }.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.pulse { display:flex; align-items:flex-end; gap:3px; height:1rem; }.pulse i { display:block; width:3px; border-radius:99px; background:var(--coral); }.pulse i:nth-child(1){height:.4rem}.pulse i:nth-child(2){height:1rem}.pulse i:nth-child(3){height:.65rem}.edition { color:var(--ink-soft); font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.lab-shell { width:min(1200px,calc(100% - 3rem)); margin:0 auto 4rem; }.lab-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(17rem,.62fr); gap:3rem; align-items:end; min-height:29rem; padding:clamp(2rem,6vw,6rem); overflow:hidden; border-radius:1.55rem; background:var(--navy); color:var(--white); box-shadow:var(--shadow); position:relative; }.lab-hero::after { content:""; position:absolute; width:30rem; height:30rem; border:4rem solid var(--mint); border-radius:50%; bottom:-20rem; right:-8rem; }.lab-hero > * { position:relative; z-index:1; }.eyebrow { margin:0 0 .72rem; color:var(--coral); font-family:"DM Mono",monospace; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }h1,h2,h3,h4 { margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:600; letter-spacing:-.045em; line-height:1.05; }h1 { max-width:10ch; font-size:clamp(3.2rem,7vw,6.5rem); }h1 em { color:#b8f5e5; font-style:italic; }.lab-hero > div > p:last-child { max-width:34rem; margin:1.5rem 0 0; color:#d4e3e6; font-size:1.08rem; }.lab-hero aside { padding:1.3rem; border:1px solid rgba(255,255,255,.25); border-radius:.9rem; background:rgba(16,43,67,.9); color:#e0ebed; }.lab-hero aside p { margin:.55rem 0 0; font-size:.91rem; }.lab-hero strong { color:var(--white); }.flourish { display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--mint); color:var(--navy); font-size:1rem; font-weight:800; }
.scenario-picker { margin-top:4.5rem; }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.section-heading h2 { font-size:clamp(2rem,4vw,3.5rem); }.time-note { margin:.5rem 0 0; color:var(--ink-soft); font-family:"DM Mono",monospace; font-size:.7rem; white-space:nowrap; }.scenario-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem; }.scenario-card { min-height:17.5rem; display:flex; flex-direction:column; align-items:flex-start; padding:1.4rem; border:1px solid var(--line); border-radius:1rem; background:var(--white); color:var(--ink); text-align:left; box-shadow:0 6px 16px rgba(16,43,67,.04); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }.scenario-card:hover,.scenario-card:focus-visible { border-color:var(--coral); box-shadow:0 15px 28px rgba(16,43,67,.1); outline:none; transform:translateY(-.24rem); }.card-top { display:flex; width:100%; justify-content:space-between; gap:.5rem; }.modality { display:inline-block; padding:.28rem .5rem; border-radius:999px; background:var(--sea); color:#176b65; font-family:"DM Mono",monospace; font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }.card-time { color:var(--ink-soft); font-family:"DM Mono",monospace; font-size:.64rem; }.scenario-card h3 { margin-top:1.35rem; font-size:1.75rem; }.scenario-card p { margin:.65rem 0 1rem; color:var(--ink-soft); font-size:.9rem; }.scenario-card .card-link { margin-top:auto; color:var(--coral); font-family:"DM Mono",monospace; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.scenario-stage { max-width:950px; margin:4rem auto 0; animation:appear .32s ease both; }.scenario-stage[hidden] { display:none; }@keyframes appear { from {opacity:0;transform:translateY(.65rem)}to{opacity:1;transform:translateY(0)} }.back-button { padding:0; border:0; background:none; color:var(--ink-soft); font-size:.86rem; font-weight:700; text-decoration:underline; text-underline-offset:.25rem; }.scenario-meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.4rem; }.scenario-progress { color:var(--ink-soft); font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }.scenario-stage > h2 { max-width:14ch; margin-top:.75rem; font-size:clamp(2.5rem,5vw,4.6rem); }.moment-grid { display:grid; grid-template-columns:1.4fr .9fr; gap:1rem; margin-top:1.6rem; }.moment-grid section { padding:1.1rem; border:1px solid var(--line); border-radius:.8rem; background:var(--white); }.label { display:block; margin-bottom:.45rem; color:#176b65; font-family:"DM Mono",monospace; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.moment-grid p,.insight-grid p,.reflection-card p { margin:0; }.decision-panel,.insights { margin-top:1.4rem; padding:clamp(1.25rem,3vw,2.2rem); border-radius:1rem; background:var(--navy); color:var(--white); }.decision-panel h3,.insights h3 { max-width:29ch; font-size:clamp(1.75rem,3.5vw,2.8rem); }.decision-support { margin:.75rem 0 1.25rem; color:#d2e0e3; }.decision-options { display:grid; gap:.7rem; }.decision-options button { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.65rem; align-items:start; width:100%; padding:.9rem; border:1px solid rgba(255,255,255,.26); border-radius:.7rem; background:rgba(255,255,255,.05); color:var(--white); text-align:left; transition:background .16s ease,border-color .16s ease,transform .16s ease; }.decision-options button:hover,.decision-options button:focus-visible { border-color:var(--mint); background:rgba(156,229,210,.14); outline:none; transform:translateX(.18rem); }.decision-options button.selected { border-color:var(--mint); background:rgba(156,229,210,.18); }.option-letter { display:inline-grid; place-items:center; width:1.55rem; height:1.55rem; border:1px solid currentColor; border-radius:50%; color:var(--mint); font-family:"DM Mono",monospace; font-size:.66rem; font-weight:700; }.choice-consideration { margin-top:1rem; padding:1rem; border-left:3px solid var(--coral); background:rgba(255,255,255,.1); color:#eef5f5; font-size:.92rem; }.choice-consideration strong { display:block; margin-bottom:.3rem; color:var(--mint); font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; }.reveal-button { margin-top:1rem; padding:.82rem 1rem; border:0; border-radius:.45rem; background:var(--mint); color:var(--navy); font-weight:800; }.reveal-button:hover,.reveal-button:focus-visible { background:#d0fff2; outline:none; }
.insights { background:var(--sea); color:var(--ink); border:1px solid #b7ddd3; }.insights .eyebrow { color:#176b65; }.insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.3rem; }.insight-grid section { padding:1rem; border-radius:.7rem; background:var(--white); }.experiment-card { margin-top:1rem; padding:1.2rem; border:1px dashed #3a8e82; border-radius:.7rem; background:var(--white); }.experiment-card h4 { margin-top:.1rem; font-size:1.55rem; }.experiment-card ol { margin:.7rem 0 0; padding-left:1.3rem; }.experiment-card li + li { margin-top:.45rem; }.reflection-card { margin-top:1rem; padding:1rem; border-left:3px solid var(--coral); background:#fff4ef; }.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:1.25rem; }.copy-button,.secondary-button { padding:.75rem .9rem; border-radius:.45rem; font-weight:700; }.copy-button { border:1px solid var(--navy); background:var(--navy); color:var(--white); }.secondary-button { border:1px solid var(--ink); background:transparent; color:var(--ink); }.copy-button:hover,.copy-button:focus-visible { background:#176b65; outline:none; }.secondary-button:hover,.secondary-button:focus-visible { background:var(--white); outline:none; }.copy-status { width:100%; min-height:1.2rem; margin:0; color:#176b65; font-size:.84rem; font-weight:700; }
footer { width:min(1200px,calc(100% - 3rem)); margin:0 auto 2rem; padding:1.4rem 0; display:flex; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.8rem; }footer p { margin:0; }footer p + p { margin-top:.28rem; }footer a { font-weight:700; text-underline-offset:.25rem; }footer a span { color:var(--coral); }
@media(max-width:800px){.topbar,.lab-shell,footer{width:min(100% - 1.5rem,1200px)}.edition{display:none}.lab-hero{grid-template-columns:1fr;min-height:0;padding:2.3rem 1.4rem}.lab-hero::after{width:18rem;height:18rem;border-width:2.5rem;bottom:-12rem;right:-7rem}h1{font-size:clamp(3.1rem,15vw,4.8rem)}.scenario-picker{margin-top:3rem}.section-heading{display:block}.time-note{margin-top:.7rem}.scenario-cards{grid-template-columns:1fr}.scenario-card{min-height:12.5rem}.scenario-stage{margin-top:3rem}.moment-grid,.insight-grid{grid-template-columns:1fr}.scenario-stage > h2{font-size:clamp(2.4rem,12vw,3.7rem)}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}