:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;--background:#0a0d12;--surface:#111722;--surface-raised:#182131;--surface-soft:#0f141d;--border:#2a3547;--text:#eef4ff;--muted:#91a0b7;--accent:#70e1b2;--accent-dark:#163f34;--radius:14px;--gap:clamp(.65rem, 1.5vw, 1rem);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at top, #152030 0, var(--background) 36rem), var(--background);min-height:100vh;color:var(--text);overflow:hidden}button,input{font:inherit}button{touch-action:manipulation}.app-shell{grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:0;display:grid}.app-header{z-index:2;justify-content:space-between;align-items:center;gap:var(--gap);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0d12e0;min-height:68px;padding:.75rem clamp(.8rem,2vw,1.4rem);display:flex}.brand h1{margin:0;font-size:clamp(1.05rem,2.5vw,1.45rem)}.brand p{color:var(--muted);margin:.2rem 0 0;font-size:.76rem}.header-actions,.playback-buttons{align-items:center;gap:.45rem;display:flex}.button,.tool-button{border:1px solid var(--border);background:var(--surface-raised);min-height:40px;color:var(--text);cursor:pointer;border-radius:10px;padding:.55rem .8rem}.button:hover,.tool-button:hover{border-color:#44536b}.button--primary,.tool-button.is-active,.mobile-nav__button.is-active{border-color:var(--accent);background:var(--accent-dark);color:var(--accent)}.workspace{gap:var(--gap);min-height:0;padding:var(--gap);grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(190px,230px);display:grid}.panel{border:1px solid var(--border);border-radius:var(--radius);background:#111722e6;min-width:0;padding:1rem;overflow:auto}.panel__title{letter-spacing:.08em;text-transform:uppercase;margin:0 0 1rem;font-size:.95rem}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;display:grid}.tool-button{min-width:0;font-size:.82rem}.settings-card{border:1px solid var(--border);border-radius:12px;gap:.75rem;margin-top:1rem;padding:.9rem;display:grid}.field{color:var(--muted);grid-template-columns:1fr 76px;align-items:center;gap:.75rem;font-size:.82rem;display:grid}.field input{border:1px solid var(--border);background:var(--surface-soft);width:100%;color:var(--text);border-radius:8px;padding:.45rem .55rem}.check-field{color:var(--muted);font-size:.82rem}.board-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-soft);min-width:0;min-height:260px;position:relative;overflow:hidden;box-shadow:inset 0 0 80px #00000047}.life-canvas{cursor:crosshair;width:100%;height:100%;display:block}.stats-list{gap:.6rem;margin:0;display:grid}.stat-card{border-bottom:1px solid #2a3547a6;justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:.55rem;display:flex}.stat-card dt{color:var(--muted);font-size:.8rem}.stat-card dd{font-variant-numeric:tabular-nums;margin:0;font-weight:700}.instructions{border:1px dashed var(--border);color:var(--muted);border-radius:12px;gap:.45rem;margin-top:1rem;padding:.9rem;font-size:.78rem;line-height:1.4;display:grid}.instructions strong{color:var(--text)}.playback-bar{align-items:center;gap:var(--gap);border-top:1px solid var(--border);background:#0a0d12f0;grid-template-columns:auto minmax(180px,1fr) minmax(180px,260px);min-height:72px;padding:.75rem clamp(.8rem,2vw,1.4rem);display:grid}.timeline-placeholder{color:var(--muted);grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:.65rem;font-size:.72rem;display:grid}.timeline-track{background:var(--surface-raised);border-radius:999px;height:7px;overflow:hidden}.timeline-progress{background:var(--accent);width:0;height:100%}.speed-control{color:var(--muted);grid-template-columns:auto minmax(80px,1fr);align-items:center;gap:.65rem;font-size:.78rem;display:grid}.mobile-nav{display:none}@media (width<=900px){.workspace{grid-template-columns:minmax(0,1fr)}.tools-panel,.stats-panel,.header-actions,.playback-bar{display:none}.mobile-nav{padding:.45rem max(.45rem, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));border-top:1px solid var(--border);background:#0a0d12f5;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;display:grid}.mobile-nav__button{min-width:0;min-height:46px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:10px;padding:.35rem .2rem;font-size:.72rem}.mobile-nav__button--primary{background:var(--accent-dark);color:var(--accent)}}@media (width<=520px){.app-header{min-height:60px}.brand p{display:none}.workspace{padding:.45rem}.board-panel{border-radius:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}select,input[type=text]{border:1px solid var(--border);background:var(--surface-soft);width:100%;color:var(--text);border-radius:8px;padding:.45rem .55rem}button:disabled{cursor:not-allowed;opacity:.45}.timeline-control{color:var(--muted);grid-template-columns:auto minmax(100px,1fr) auto;align-items:center;gap:.65rem;font-size:.72rem;display:grid}.timeline-control input{width:100%}.dialog{border:1px solid var(--border);background:var(--surface);width:min(92vw,720px);color:var(--text);border-radius:16px;padding:0;box-shadow:0 24px 90px #000000a6}.dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000000ad}.dialog__content{padding:1.1rem}.dialog__header{justify-content:space-between;align-items:start;gap:1rem;margin-bottom:1rem;display:flex}.dialog__header h2{margin:0}.dialog__header p{color:var(--muted);margin:.3rem 0 0}.dialog__close{border:1px solid var(--border);background:var(--surface-raised);width:38px;height:38px;color:var(--text);border-radius:10px}.dialog__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem;display:grid}.dialog__actions{flex-wrap:wrap;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;display:flex}@media (width<=640px){.dialog__grid{grid-template-columns:1fr}.dialog__actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}}.dialog--wide{width:min(96vw,980px)}.pattern-library-layout,.editor-layout{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:1rem;display:grid}.pattern-list{align-content:start;gap:.5rem;max-height:60vh;padding-right:.25rem;display:grid;overflow:auto}.pattern-list-item{border:1px solid var(--border);background:var(--surface-soft);width:100%;color:var(--text);text-align:left;border-radius:10px;gap:.25rem;padding:.75rem;display:grid}.pattern-list-item span{color:var(--muted);font-size:.75rem}.pattern-list-item.is-selected{border-color:var(--accent);background:var(--accent-dark)}.pattern-preview-panel{min-width:0}.pattern-preview-panel h3{margin:0 0 .35rem}.pattern-preview-panel p{color:var(--muted);margin:0 0 1rem}.mini-pattern-grid{grid-template-columns:repeat(var(--pattern-width), minmax(8px, 18px));border:1px solid var(--border);background:var(--surface-soft);border-radius:12px;justify-content:start;gap:2px;max-width:100%;max-height:360px;padding:.75rem;display:grid;overflow:auto}.mini-cell{aspect-ratio:1;background:#1a2230;border-radius:2px;min-width:8px}.mini-cell.is-alive{background:var(--accent)}.pattern-transform-row{flex-wrap:wrap;gap:.5rem;margin-top:.8rem;display:flex}.editor-controls{align-content:start;gap:.7rem;display:grid}.editor-grid-wrap{border:1px solid var(--border);background:var(--surface-soft);border-radius:12px;max-height:60vh;padding:.75rem;overflow:auto}.pattern-editor-grid{grid-template-columns:repeat(var(--editor-width), 22px);gap:2px;width:max-content;display:grid}.editor-cell{background:#151c28;border:1px solid #283447;border-radius:2px;width:22px;height:22px;padding:0}.editor-cell.is-alive{background:var(--accent)}.pattern-transform-row .is-active{border-color:var(--accent);background:var(--accent-dark);color:var(--accent)}@media (width<=760px){.pattern-library-layout,.editor-layout{grid-template-columns:1fr}.pattern-list{max-height:30vh}.editor-grid-wrap{max-height:42vh}}.recording-controls{gap:.45rem;display:flex}.field--stacked{grid-template-columns:1fr}textarea{resize:vertical;border:1px solid var(--border);background:var(--surface-soft);width:100%;color:var(--text);border-radius:8px;padding:.65rem;font:.78rem ui-monospace,Consolas,monospace}.saved-list{gap:.65rem;max-height:62vh;display:grid;overflow:auto}.saved-item{border:1px solid var(--border);background:var(--surface-soft);border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem;display:flex}.saved-item>div:first-child{gap:.3rem;display:grid}.saved-item span,.empty-message{color:var(--muted);font-size:.78rem}.saved-item__actions{flex-wrap:wrap;gap:.45rem;display:flex}@media (width<=1120px){.recording-controls{display:none}}@media (width<=640px){.saved-item{flex-direction:column;align-items:stretch}.saved-item__actions{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}}.pattern-browser-controls{grid-template-columns:minmax(180px,1fr) minmax(150px,220px) auto;gap:.6rem;margin-bottom:.8rem;display:grid}.pattern-browser-controls input,.pattern-browser-controls select{min-width:0}.pattern-list-row{grid-template-columns:1fr auto;gap:.35rem;display:grid}.favorite-button{border:1px solid var(--border);background:var(--surface-soft);color:#ffe08a;border-radius:10px;width:42px;font-size:1.15rem}.pattern-metadata{color:var(--muted);grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .75rem;margin-bottom:.75rem;font-size:.78rem;display:grid}@media (width<=700px){.pattern-browser-controls,.pattern-metadata{grid-template-columns:1fr}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#edf2f7;--surface:#fff;--surface-raised:#e7eef6;--surface-soft:#f5f8fb;--border:#b9c5d2;--text:#17202b;--muted:#536274;--accent:#187c5a;--accent-dark:#d4f1e6}@media (prefers-color-scheme:light){:root[data-theme=system]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#edf2f7;--surface:#fff;--surface-raised:#e7eef6;--surface-soft:#f5f8fb;--border:#b9c5d2;--text:#17202b;--muted:#536274;--accent:#187c5a;--accent-dark:#d4f1e6}}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.charts-panel{gap:.45rem;margin-top:1rem;display:grid}.charts-panel h3{margin:.45rem 0 0;font-size:.78rem}.stats-chart{background:var(--surface-soft);border-radius:8px;width:100%;height:92px}.help-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.help-grid dl{gap:.45rem;display:grid}.help-grid dl div{grid-template-columns:110px 1fr;gap:.6rem;display:grid}.help-grid dt{font-weight:700}.help-grid dd{color:var(--muted);margin:0}.storage-summary{border:1px solid var(--border);background:var(--surface-soft);border-radius:12px;gap:.5rem;padding:.9rem;display:grid}.onboarding-list{gap:.6rem;padding-left:1.4rem;display:grid}@media (width<=900px){.mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (width<=640px){.help-grid{grid-template-columns:1fr}}.pwa-banner{z-index:1000;right:max(1rem, env(safe-area-inset-right));bottom:max(1rem, env(safe-area-inset-bottom));border:1px solid var(--border);background:var(--surface);width:min(92vw,430px);color:var(--text);border-radius:12px;gap:.75rem;padding:.9rem;display:grid;position:fixed;left:auto;box-shadow:0 16px 50px #0000006b}.pwa-banner__actions{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;display:flex}:root[data-network=offline] .state-status:after{content:" · Offline";color:var(--accent)}@media (display-mode:standalone){.brand p:after{content:" · Installed"}}@media (width<=640px){.pwa-banner{right:.5rem;bottom:calc(4.5rem + env(safe-area-inset-bottom));width:auto;left:.5rem}}