@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;--bg:#0b0d13;--ink:#f0f0e9;--muted:#a1a2ad;--line:#ffffff18;--mint:#b7f0d8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{outline-offset:6px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint)}header,main,footer{max-width:1440px;margin:auto}header{padding:30px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:32px;letter-spacing:-2px;display:flex;align-items:center;gap:10px;font-weight:600}.brand span{font:10px sans-serif;align-self:flex-start;margin-top:10px}nav{display:flex;gap:34px;font-size:13px}nav a:hover{color:var(--mint)}.hero{padding:70px 6% 100px;display:grid;grid-template-columns:1fr 1.35fr;align-items:center;gap:40px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 14px #b7f0d866}h1{font-size:clamp(62px,6.5vw,100px);font-weight:500;line-height:1.02;letter-spacing:-5px;margin:25px 0}em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--mint)}.intro{color:var(--muted);max-width:360px;line-height:1.8;margin:26px 0 32px}.button{background:var(--mint);color:#11241b;border-radius:8px;padding:15px 20px;display:inline-flex;gap:32px;align-items:center;font-size:13px;font-weight:700;transition:transform .2s}.button:hover{transform:translateY(-3px);background:#d1ffe9}.button span{font-size:20px}.fine{font-size:10px;color:var(--muted);margin-top:16px}.showcase{min-width:0}.screen{height:540px;position:relative;overflow:hidden;border:1px solid #ffffff25;border-radius:120px 120px 20px 20px;background:#0b0b16;box-shadow:0 40px 120px #4e407c25}canvas{width:100%;height:100%;display:block}#clock{position:absolute;top:55px;left:0;right:0;text-align:center;font-size:32px;font-weight:400;letter-spacing:5px;color:#fff;text-shadow:0 2px 12px #000;pointer-events:none}.screen-bottom{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:#ccc}.screen-bottom button{color:#ddd;background:#1119;border:1px solid #ffffff25;border-radius:30px;font-size:10px;letter-spacing:0;padding:7px 12px;cursor:pointer}.caption{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);padding:18px 4px;gap:16px}.caption span:first-child{font-style:italic;color:#ddd}.palettes{margin:0 6%;padding:70px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.2fr;gap:60px}h2{font-size:clamp(38px,4vw,58px);line-height:1.1;font-weight:500;letter-spacing:-2px;margin:18px 0}.palettes p:not(.eyebrow){color:var(--muted);font-size:13px;max-width:300px}.palette-controls{padding-top:15px}.swatches{display:flex;gap:12px;flex-wrap:wrap}.swatches button{background:none;color:var(--muted);font-size:11px;border:1px solid transparent;border-radius:12px;padding:10px;cursor:pointer;position:relative;flex:1;min-width:65px}.swatches button.selected{border-color:#b7f0d84d;color:#fff;background:#b7f0d806}.swatches i{display:block;width:46px;height:46px;border-radius:50%;margin:0 auto 10px;box-shadow:inset 0 0 8px #ffffff20}.swatches small{font-size:7px;display:block;color:var(--mint);letter-spacing:1px}.aurora{background:linear-gradient(135deg,#53e6c7,#8560d6,#e66db5)}.original{background:linear-gradient(135deg,#729cfa,#e77bac,#ebb669)}.plasma{background:linear-gradient(135deg,#5a244d,#ef5e40,#fac056)}.poolside{background:linear-gradient(135deg,#427fae,#a5d9f3,#78ddd6)}.freedom{background:linear-gradient(135deg,#0057b7 45%,#ffd700 55%)}.clock-toggle{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;font-size:13px;cursor:pointer}.clock-toggle input{accent-color:var(--mint);width:17px;height:17px}.clock-toggle .toggle-decoration{display:none}.palette-controls p.small{font-size:11px;max-width:100%}.details{margin:0 6%;padding:50px 0 85px;display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.number{font:italic 28px 'Instrument Serif',serif;color:var(--mint)}h3{font-size:17px;font-weight:500;letter-spacing:-.4px}.details p{font-size:13px;color:var(--muted);line-height:1.8}.install{padding:65px 6%;background:#12161b;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.install .button{margin-top:16px}.install ol{list-style:none;margin:10px 0;padding:0}.install li{display:flex;gap:22px;padding:5px 0 22px;margin-bottom:20px;border-bottom:1px solid var(--line)}.install li:last-child{border:0}.install li>span{width:30px;height:30px;border:1px solid #ffffff30;border-radius:50%;flex-shrink:0;text-align:center;font-size:12px;padding-top:4px;margin-top:13px}.install p{color:var(--muted);font-size:13px}.install h3{margin-bottom:8px}.note{margin:32px 6% 50px;font-size:11px;color:var(--muted);max-width:850px;line-height:1.9}.note a{text-decoration:underline}code{color:#d5e8dd}footer{border-top:1px solid var(--line);padding:40px 6%;display:flex;gap:50px;align-items:flex-start;color:var(--muted);font-size:10px}footer .brand{color:var(--ink);font-size:28px}footer p{margin:0}footer div{display:flex;flex-direction:column;gap:8px}.footer-note{margin-left:auto;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:15px}.skip{position:absolute;left:10px;top:-100px}.skip:focus{top:10px;z-index:10;background:#111;padding:10px}@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:40px;gap:35px}.hero-copy{max-width:580px}h1{font-size:76px;letter-spacing:-3px}.intro{max-width:440px}.screen{height:420px;border-radius:90px 90px 15px 15px}.palettes{gap:25px;grid-template-columns:1fr}.details{gap:25px}.install{gap:30px}footer{flex-wrap:wrap;gap:25px}.footer-note{margin-left:0}}@media(max-width:520px){header{padding:22px 6%}nav{gap:16px;font-size:11px}nav a:first-child{display:none}.hero{padding-bottom:55px}h1{font-size:64px}.screen{height:360px}.caption{font-size:8px}.details,.install{grid-template-columns:1fr}.details{padding-bottom:40px;gap:10px}.palettes{padding:40px 0}.swatches{gap:3px}.swatches button{padding:8px 3px;min-width:50px;font-size:9px}.swatches i{width:38px;height:38px}.install{padding-top:45px}.install h2 br{display:none}.install h2{font-size:48px}.install h2 em{padding-left:10px}.fine{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}