@font-face{font-family:Instrument Sans;src:url(../fonts/InstrumentSans-latin-var.woff2) format("woff2");font-weight:400 700;font-display:swap}@font-face{font-family:DM Mono;src:url(../fonts/DMMono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}:root{--bg: #efece8;--bg-2: #e5e1db;--paper: #f8f6f3;--ink: #161514;--ink-2: #57534e;--line: rgba(22, 21, 20, .12);--accent: #b5471b;--night: #2b2926;--sans: "Instrument Sans", system-ui, sans-serif;--mono: "DM Mono", ui-monospace, monospace;--pad: clamp(20px, 4vw, 64px)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.dim{color:var(--ink-2)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}h2{font-weight:500;font-size:clamp(32px,4.2vw,60px);line-height:1.04;letter-spacing:-.025em}.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:999px;font-weight:500;font-size:15px;transition:transform .3s,background .3s}.btn-ink{background:var(--ink);color:var(--paper)}@media (hover: hover) and (pointer: fine){.btn-ink:hover{transform:translateY(-1px);background:#000}.chip:hover{transform:translateY(-2px)}}.btn-ink:active{background:#000}.chip:active{transform:scale(.94)}.link{text-decoration:underline;text-underline-offset:4px;font-size:14px}.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:32px;padding:16px var(--pad)}.wordmark{font-weight:600;font-size:17px;letter-spacing:-.01em;margin-right:auto}.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;user-select:none;transition:color .8s}.hero-cyc{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 75% at 50% 38%,#f7f5f2 0%,var(--bg) 52%,#ddd8d1 100%);transition:filter 1s}.hero-cyc:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(#d8d3cc00,#d8d3ccb3 60%,#d6d1ca)}.hero-cyc:before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 60% at 58% 62%,#3b3732,#22201d 55%,#141311);opacity:0;transition:opacity 1s}.hero.is-night .hero-cyc:before{opacity:1}html.is-night .nav{color:#f3f0eb}html.is-night .nav .btn-ink{background:#f3f0eb;color:var(--ink)}.hero.is-night{color:#f3f0eb}.hero.is-night .hero-copy p,.hero.is-night .dim{color:#f3f0eba6}.hero-loading{position:absolute;left:50%;top:58%;transform:translate(-50%);color:var(--ink-2);transition:opacity .6s}.hero.is-ready .hero-loading{opacity:0}.hero-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity 1.2s .1s}.hero.is-ready .hero-canvas{opacity:1}.hero-canvas:active{cursor:grabbing}.hero-copy{position:absolute;left:var(--pad);top:clamp(96px,13vh,140px);max-width:640px;pointer-events:none}.hero-copy h1{font-weight:500;font-size:clamp(40px,4.8vw,74px);line-height:1.02;letter-spacing:-.035em}.hero-copy p{margin-top:18px;font-size:17px;color:var(--ink-2);max-width:420px}.hero-hint{position:absolute;left:50%;bottom:96px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:opacity .6s;pointer-events:none;animation:hint 2.4s ease-in-out infinite}.hero-hint.is-gone{opacity:0}@keyframes hint{50%{transform:translate(calc(-50% + 10px))}}.hero-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px}.listing{display:flex;flex-direction:column;gap:2px}.listing strong{font-weight:500;font-size:26px;letter-spacing:-.02em}.paints{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:#ffffff8c;backdrop-filter:blur(12px);box-shadow:0 1px #ffffffb3 inset,0 8px 30px #281e1414}.hero.is-night .paints,.hero.is-night .tool{background:#ffffff1a;color:#f3f0eb}.chip{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,white),var(--c) 55%,color-mix(in srgb,var(--c) 75%,black));box-shadow:0 0 0 1px #0000001f inset;transition:transform .25s;position:relative}.chip:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;opacity:0;transform:scale(.8);transition:.25s}.chip.is-on:after{opacity:.9;transform:none}.paint-name{min-width:110px;padding-left:6px}.tools{display:flex;justify-content:flex-end;gap:8px}.tool{flex:none}.tool{height:38px;padding:0 16px;border-radius:999px;background:#ffffff8c;backdrop-filter:blur(12px);font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:background .25s,color .25s}.tool:hover{background:#ffffffd9}.tool.is-on{background:var(--ink);color:var(--paper)}.hero.is-night .tool.is-on{background:#f3f0eb;color:var(--ink)}.lamp-dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.4}.lamp.is-on .lamp-dot{background:#ffd98a;opacity:1;box-shadow:0 0 10px 2px #ffd98a}.spot-card{position:absolute;right:var(--pad);top:50%;width:300px;transform:translate(20px,-50%);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;padding:22px;border-radius:18px;background:#ffffffb8;backdrop-filter:blur(16px);color:var(--ink)}.spot-card.is-open{opacity:1;transform:translateY(-50%);pointer-events:auto}.spot-card h2{font-size:24px;margin:10px 0 8px}.spot-card p{color:var(--ink-2);font-size:15px;margin-bottom:14px}@media (max-width: 760px){.nav{gap:12px;padding:12px 16px}.nav .btn{height:38px;padding:0 14px;font-size:14px}.hero{min-height:600px}.hero-copy{top:100px;left:20px;right:20px}.hero-copy h1{font-size:40px}.hero-copy p{font-size:16px;margin-top:12px}.hero-hint{bottom:196px}.hero-bar{grid-template-columns:1fr;left:16px;right:16px;bottom:16px;gap:12px}.listing{flex-direction:row;align-items:baseline;gap:10px}.listing strong{font-size:20px}.paints{justify-self:start;gap:8px;padding:6px 12px 6px 8px}.chip{width:24px;height:24px}.paint-name{min-width:0}.tools{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tool{height:34px;padding:0 12px;font-size:13px;flex:none}.spot-card{inset:auto 16px 170px;width:auto;transform:translateY(20px);padding:16px}.spot-card.is-open{transform:none}.spot-card h2{font-size:19px;margin:6px 0}.spot-card p{font-size:14px;margin-bottom:8px}}.hero-copy{transition:opacity .6s,transform .6s}.hero.has-spot .hero-copy{opacity:0;transform:translateY(-12px)}
