:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:radial-gradient(circle at top,#eab3082e,#0000 30%),linear-gradient(145deg,#111827 0%,#0f172a 48%,#1f2937 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.45;transform:none}#app{min-height:100vh}.page-shell{grid-template-columns:minmax(320px,420px) minmax(0,1fr);min-height:100vh;display:grid}.control-panel{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#0f172abd;border-right:1px solid #94a3b829;flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.panel-card{background:#0f172ae6;border:1px solid #94a3b829;border-radius:20px;padding:1.25rem;box-shadow:0 18px 40px #02061740}.intro-card{padding:1.5rem}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#fbbf24;margin:0 0 .65rem;font-size:.75rem}h1,h2,p{margin:0}h1{font-size:clamp(2.15rem,5vw,3.75rem);line-height:.98}h2{font-size:1.05rem}.lede{color:#cbd5e1;margin-top:1rem}.section-heading,.grid-meta,.board-header,.board-stats{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.section-heading span,.grid-meta,.board-stats{color:#94a3b8;font-size:.9rem}.field-label{color:#e2e8f0;margin:1rem 0 .5rem;font-size:.9rem;display:block}.range-input{accent-color:#f59e0b;width:100%}.grid-meta{margin-top:.75rem}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem;display:grid}.reset-button,.viewport-buttons button{color:#111827;background:linear-gradient(135deg,#f59e0b,#f97316);border-radius:14px;font-weight:700;transition:transform .18s,box-shadow .18s,opacity .18s}.reset-button{width:100%;padding:.85rem 1rem}.action-button{margin-top:0}.action-button--muted{color:#f8fafc;background:linear-gradient(135deg,#475569,#334155)}.reset-button:hover,.viewport-buttons button:hover,.swatch-button:hover{transform:translateY(-1px)}.palette-grid{gap:.75rem;margin-top:1rem;display:grid}.swatch-button{color:#f8fafc;text-align:left;background:#1e293bb8;border:1px solid #94a3b829;border-radius:16px;align-items:center;gap:.9rem;width:100%;padding:.8rem;transition:border-color .18s,background .18s,transform .18s;display:flex}.swatch-button.active{background:#334155f5;border-color:#fbbf24e6}.swatch-preview{border:2px solid #f8fafcb3;border-radius:14px;flex:0 0 2.75rem;width:2.75rem;height:2.75rem;box-shadow:inset 0 0 0 1px #0f172a33}.swatch-meta{justify-content:space-between;align-items:center;gap:.75rem;width:100%;display:flex}.color-input{background:0 0;border:0;border-radius:999px;width:3rem;height:3rem;padding:0}.viewport-controls{margin-top:.5rem}.viewport-buttons{justify-items:center;gap:.5rem;margin-top:1rem;display:grid}.viewport-buttons>div{gap:.5rem;display:flex}.viewport-buttons button{min-width:3rem;padding:.7rem .9rem}.board-panel{flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.board-header{padding:.5rem .25rem}.board-stats{flex-wrap:wrap;justify-content:flex-end}.board-frame{touch-action:none;background:linear-gradient(#ffffff05,#ffffff03),#0f172ac2;border:1px solid #94a3b829;border-radius:28px;flex:1;min-height:0;padding:1rem;box-shadow:inset 0 1px #ffffff0a}.quilt-board{aspect-ratio:1;background:linear-gradient(#f8fafc08,#f8fafc03),#0b1120;border-radius:20px;width:min(100%,960px);margin:0 auto;display:block}.triangle{stroke:none;transition:opacity .12s}.triangle:hover{opacity:.85}.cell-outline,.cell-line{fill:none;stroke:#0f172a85;stroke-width:1.2px;vector-effect:non-scaling-stroke;pointer-events:none}@media (width<=1100px){.page-shell{grid-template-columns:1fr}.control-panel{border-bottom:1px solid #94a3b829;border-right:0}.board-header{flex-direction:column;align-items:flex-start}.board-stats{justify-content:flex-start}}@media (width<=720px){.control-panel,.board-panel,.panel-card,.intro-card,.board-frame{padding:1rem}.action-grid{grid-template-columns:1fr}.swatch-meta{flex-direction:column;align-items:flex-start}}