:root{--serif: "Cabinet Grotesk", system-ui, sans-serif;--sans: "Supreme", -apple-system, BlinkMacSystemFont, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--maxw: 1320px;--gut: 40px;--section-y: clamp(30px, 4.5vw, 62px);--nav-top: max(12px, env(safe-area-inset-top));--nav-bottom: max(18px, env(safe-area-inset-bottom));--lab-nav-height: 52px;--fs-prose: 17px;--fs-ui: 15px;--fs-nav: 13px;--fs-micro: 12px;--fs-tag: 10px;--btn-radius: 12px;--nav-radius: 12px;--nav-item-radius: 8px;--btn-on-accent: var(--bg);--ease-out: cubic-bezier(.22, 1, .36, 1);--spring: linear(0, .006, .025, .101, .205, .404, .62, .86, 1.04, 1.146, 1.184, 1.169, 1.124, 1.075, 1.038, 1.016, 1.006, 1.001, 1);--dur: .62s;--dur-fast: .45s}[data-theme=dark]{--bg: #0c0c0d;--bg2: #141416;--ink: #f4f1ea;--ink-soft: #9b968d;--ink-faint: #8a8475;--line: rgba(244, 241, 234, .14);--line-soft: rgba(244, 241, 234, .07);--accent: #9ef0b0;--accent-text: #9ef0b0;--nav-bg: rgba(18, 18, 20, .6);--nav-border: rgba(244, 241, 234, .12);--nav-active: rgba(244, 241, 234, .08);--grid: rgba(244, 241, 234, .035)}[data-theme=light]{--bg: #f3f1ea;--bg2: #eae7dd;--ink: #16150f;--ink-soft: #6a655c;--ink-faint: #696254;--line: rgba(22, 21, 15, .16);--line-soft: rgba(22, 21, 15, .07);--accent: #1a8f55;--accent-text: #147544;--nav-bg: rgba(243, 241, 234, .65);--nav-border: rgba(22, 21, 15, .1);--nav-active: rgba(106, 101, 92, .13);--grid: rgba(22, 21, 15, .04)}@media (max-width: 760px){:root{--gut: 20px}}body{display:flex;flex-direction:column;min-height:100vh}#app{position:relative;z-index:1;flex:1;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gut) clamp(48px,6vw,80px);box-sizing:border-box}.demo-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(20px,3vw,32px);align-items:start}.settings-panel{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:0 20px 50px #00000038}.settings-group{border-bottom:1px solid var(--line)}.settings-group:last-child{border-bottom:0}.settings-group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--ink)}.settings-group summary::-webkit-details-marker{display:none}.settings-group summary:after{content:"";flex-shrink:0;width:7px;height:7px;margin-left:auto;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:transform .2s var(--ease-out)}.settings-group:not([open]) summary:after{transform:rotate(-45deg)}.settings-id{color:var(--ink-soft);font-size:12px}.field-label{display:block;padding:0 8px 8px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}.field-select{width:calc(100% - 16px);margin:0 8px 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.field-select:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 70%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}.hero-photo{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:2 / 3;overflow:hidden;border-radius:22px;box-shadow:0 20px 50px #0000004d;border:1px solid var(--line)}.hero-photo img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}.hero-photo canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:0;filter:blur(12px);transform:scale(1.04);transition:opacity 1.1s var(--ease-out),filter 1.1s var(--ease-out),transform 1.4s var(--ease-out)}.hero-photo.dithered canvas{opacity:.9;filter:blur(0);transform:scale(1)}[data-theme=light] .hero-photo.dithered canvas{opacity:.55}.hero-photo.dither-failed img{opacity:.5}@media (max-width: 768px){.demo-layout{grid-template-columns:1fr}.demo-header{flex-direction:column;align-items:flex-start;margin-bottom:clamp(12px,3vw,20px)}.hero-photo{order:-1;width:min(280px,72vw);max-width:min(360px,88vw);aspect-ratio:2 / 3;max-height:min(46vh,420px)}.settings-panel{order:1}.settings-group:not([open]) summary{padding-block:10px}}