:root{--bg-top:#f3f7ef;--bg-bottom:#d7e3ef;--surface:#fbfdffe0;--ink:#17324b;--muted:#53687d;--muted-strong:#34516d;--accent:#f5b85c;--accent-strong:#b7641f;--board-outline:#274863;--mono:"Cascadia Code", "SFMono-Regular", Consolas, monospace;--sans:"Aptos", "Trebuchet MS", "Segoe UI", sans-serif;--heading:"Aptos Display", "Aptos", "Trebuchet MS", "Segoe UI", sans-serif;color:var(--ink);font:16px/1.5 var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:radial-gradient(circle at top left, #fffcf2e6, transparent 26%), radial-gradient(circle at right 12% top 18%, #f9c16642, transparent 22%), linear-gradient(180deg, var(--bg-top), var(--bg-bottom));min-height:100svh;margin:0}body:before{content:"";pointer-events:none;background-color:#0000;background-image:linear-gradient(#ffffff38 1px,#0000 1px),linear-gradient(90deg,#ffffff24 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:36px 36px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#0000008c,#0000 75%);mask-image:linear-gradient(#0000008c,#0000 75%)}button,input{font:inherit}h1,h2{font-family:var(--heading);color:var(--ink)}#root{min-height:100svh}.shell{flex-direction:column;gap:24px;width:min(1180px,100% - 32px);margin:0 auto;padding:32px 0 48px;display:flex}.surface{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fbfdffe0;border:1px solid #18324a24;border-radius:28px;position:relative;overflow:hidden;box-shadow:0 18px 44px #1a385324,inset 0 1px #ffffffb8}.surface:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff6b,#0000 30%),radial-gradient(circle at 100% 0,#699dcb1a,#0000 28%);position:absolute;inset:0}.hero-panel,.toolbar,.panel,.preview-card,.share-surface{padding:24px}.hero-panel{gap:12px;padding:30px 28px;display:grid}.eyebrow,.section-kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);margin:0;font-size:.78rem;font-weight:800}.hero-panel h1,.panel-heading h2{margin:0}.hero-panel h1{max-width:12ch;font-size:clamp(2.8rem,6vw,4.8rem);line-height:.96}.hero-copy,.panel-copy,.share-note{max-width:70ch;color:var(--muted);margin:0}.toolbar{gap:18px;display:grid}.field-group{gap:10px;display:grid}.field-label{color:var(--muted-strong);font-size:.92rem;font-weight:700}.segmented-control{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.segmented-control button{color:var(--ink);text-align:left;cursor:pointer;background:#f1f7fbd1;border:1px solid #1c385229;border-radius:22px;gap:4px;padding:16px 18px;transition:transform .18s,border-color .18s,box-shadow .18s,background-color .18s;display:grid}.segmented-control button:hover{border-color:#1c38524d;transform:translateY(-1px);box-shadow:0 10px 24px #1e3e5c1f}.segmented-control button.is-active{background:var(--ink);color:#f6fbff;border-color:#0000}.segmented-control button span{font-weight:700}.segmented-control button small{color:inherit;opacity:.78}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}.status-pill,.param-chip{min-height:42px;color:var(--muted-strong);background:#143c5c14;border-radius:999px;align-items:center;padding:0 14px;font-size:.94rem;font-weight:700;display:inline-flex}.primary-button,.ghost-button{cursor:pointer;border:1px solid #0000;border-radius:999px;min-height:46px;padding:0 16px;font-weight:700;transition:transform .18s,opacity .18s,background-color .18s,border-color .18s}.primary-button:hover,.ghost-button:hover:not(:disabled){transform:translateY(-1px)}.primary-button{background:var(--accent-strong);color:#fffdf8}.ghost-button{color:var(--ink);background:#fafcffe6;border-color:#1c38522e}.ghost-button:disabled{opacity:.5;cursor:not-allowed}.panel-grid,.comparison-grid{gap:24px;display:grid}.panel-grid{grid-template-columns:minmax(240px,.72fr) minmax(0,1.72fr)}.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel,.preview-card,.share-surface{gap:18px;display:grid}.panel--palette-controls{grid-column:1/-1}.panel--selector .segmented-control{grid-template-columns:1fr}.segmented-control--compact{grid-template-columns:repeat(2,auto);justify-content:end;gap:8px;width:fit-content}.segmented-control--compact button{border-radius:999px;gap:0;padding:10px 12px;font-size:.88rem;line-height:1.1}.segmented-control--compact button:hover{box-shadow:none}.panel-heading{justify-content:space-between;align-items:start;gap:18px;display:flex}.inline-code,.swatch-editor__value,.readonly-swatch strong,.share-url{font-family:var(--mono)}.swatch-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.palette-control-grid{flex-wrap:wrap;gap:10px;display:flex}.palette-control-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px;display:flex}.palette-control-card{cursor:pointer;width:42px;height:42px;display:block;position:relative}.palette-control-card__split{background-repeat:no-repeat;border:1px solid #1c38521f;border-radius:0;width:100%;height:100%;display:block}.palette-control-card__picker{opacity:0;width:100%;height:100%;position:absolute;inset:0}.swatch-editor,.readonly-swatch{background:#eff5f9c7;border:1px solid #1c38521f;border-radius:22px;gap:10px;padding:14px;display:grid}.swatch-editor__title,.readonly-swatch__title{color:var(--muted-strong);font-size:.92rem;font-weight:700}.swatch-editor__picker{cursor:pointer;background:0 0;border:0;width:100%;height:60px;padding:0}.swatch-editor__picker::-webkit-color-swatch-wrapper{padding:0}.swatch-editor__picker::-webkit-color-swatch{border:3px solid #19324a2e;border-radius:18px}.swatch-editor__picker::-moz-color-swatch{border:3px solid #19324a2e;border-radius:18px}.swatch-editor__value,.readonly-swatch strong{color:var(--ink);font-size:.94rem}.readonly-swatch-grid{gap:12px;display:grid}.readonly-swatch{grid-template-columns:auto 1fr;align-items:center;gap:14px}.readonly-swatch__chip{border:3px solid #19324a2e;border-radius:16px;width:48px;height:48px;box-shadow:inset 0 1px #ffffff7a}.board-frame{background:linear-gradient(#ffffffd1,#dce8f2c7),radial-gradient(circle at 0 0,#fffc,#0000 30%);border-radius:24px;padding:18px}.board-grid{background:var(--board-outline);border:2px solid var(--board-outline);gap:2px;width:100%;max-width:360px;margin:0 auto;padding:2px;display:grid;box-shadow:0 14px 28px #18324a38}.board-cell{aspect-ratio:1;transition:transform .18s,opacity .18s;position:relative;overflow:hidden}.board-cell--control:after{content:"";border:2px solid #ffffffeb;border-radius:50%;position:absolute;inset:16%;box-shadow:0 0 0 1px #12263a80,inset 0 0 0 1px #12263a1f}.board-cell__marker,.board-cell__seed{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.board-cell__marker:after{content:"";background:#fffffff0;border-radius:50%;width:22%;height:22%;box-shadow:0 1px 5px #12263a59}.board-cell__seed{color:#fff;text-shadow:0 1px #12263ab8,0 2px 6px #12263a73;font-size:clamp(.9rem,2.5vw,1.2rem);font-weight:900}.board-cell__seed--corner{font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1;inset:12.5%}.param-grid{flex-wrap:wrap;gap:10px;display:flex}.share-url{color:#f5f8fc;background:#142436;border-radius:20px;padding:16px 18px;font-size:.95rem;line-height:1.5;display:block;overflow-x:auto}@media (width<=980px){.panel-grid,.comparison-grid,.segmented-control{grid-template-columns:1fr}.segmented-control--compact{grid-template-columns:repeat(2,auto);justify-content:start}.palette-control-grid{gap:10px}.palette-control-actions{justify-content:start}.panel-heading{flex-direction:column}}@media (width<=720px){.shell{gap:18px;width:min(100% - 20px,100%);padding:18px 0 28px}.hero-panel,.toolbar,.panel,.preview-card,.share-surface{padding:18px}.swatch-editor-grid{grid-template-columns:1fr}.palette-control-card{width:40px;height:40px}.toolbar-actions{align-items:stretch;width:100%}.status-pill,.primary-button,.ghost-button{justify-content:center;width:100%}}