:root{color-scheme:dark;--bg: #070b11;--board-bg: #0b111a;--surface: #0c131d;--surface-raised: #101925;--surface-soft: #151f2c;--text: #e8f2fb;--text-muted: #9db0c2;--border: #26384b;--border-strong: #36536c;--focus: #56d8ff;--primary: #56d8ff;--primary-strong: #8be8ff;--live-cell: #62f0ff;--normal-zone: #b8b2a4;--fertile-zone: #86ff6f;--harsh-zone: #ff635d;--stable-zone: #61c8ff;--success: #86ff6f;--warning: #ffc857;--danger: #ff635d;--code: "Cascadia Code", Consolas, "SFMono-Regular", monospace;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}*{box-sizing:border-box;scrollbar-color:#43576b #0a1018;scrollbar-width:thin}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#0a1018}*::-webkit-scrollbar-thumb{background:#43576b;border:2px solid #0a1018}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);background:var(--bg)}button,input,select{font:inherit}.app-shell{height:100vh;min-height:100vh;overflow:hidden;display:grid;grid-template-columns:220px minmax(0,1fr) 328px;grid-template-rows:minmax(0,1fr);background:var(--bg)}.eyebrow{margin:0;color:var(--primary);font-family:var(--code);font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2{margin:0}h1{color:var(--text);font-size:1.45rem;line-height:1.1}h2{color:var(--text);font-family:var(--code);font-size:.78rem;line-height:1.2;text-transform:uppercase}.info-panel{grid-row:1;min-width:0;border-right:1px solid var(--border);background:#0a1018;padding:22px 18px;display:flex;flex-direction:column;gap:24px;overflow:auto}.info-block{display:grid;gap:12px}.info-block+.info-block{border-top:1px solid var(--border);padding-top:22px}.hint-list{margin:0;display:grid;gap:9px}.hint-list div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:center}.hint-list dt{min-height:28px;border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--primary);display:grid;place-items:center;font-family:var(--code);font-size:.72rem;font-weight:800}.hint-list dd{margin:0;color:var(--text-muted);font-size:.83rem;line-height:1.3}.info-list,.zone-guide ul{margin:0;padding:0;list-style:none}.info-list{display:grid;gap:9px}.info-list li{color:var(--text-muted);font-size:.84rem;line-height:1.35}.info-copy{margin:0;color:var(--text-muted);font-size:.84rem;line-height:1.45}.info-copy a{color:var(--primary);font-weight:700;text-decoration:none}.info-copy a:hover{color:var(--primary-strong);text-decoration:underline;text-underline-offset:3px}.zone-guide ul{display:grid;gap:10px}.zone-guide li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:start}.zone-swatch{width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--normal-zone);box-shadow:0 0 0 1px #ffffff2e}.zone-guide li[data-zone=fertile] .zone-swatch{background:var(--fertile-zone)}.zone-guide li[data-zone=harsh] .zone-swatch{background:var(--harsh-zone)}.zone-guide li[data-zone=stable] .zone-swatch{background:var(--stable-zone)}.zone-guide strong{display:block;color:var(--text);font-size:.85rem;line-height:1.2}.zone-guide small{display:block;margin-top:2px;color:var(--text-muted);font-size:.78rem;line-height:1.3}.playfield{grid-row:1;min-width:0;min-height:0;padding:28px 20px;display:grid}.canvas-wrap{min-height:0;border:1px solid var(--primary);background:linear-gradient(rgb(86 216 255 / 7%) 1px,transparent 1px),linear-gradient(90deg,rgb(86 216 255 / 7%) 1px,transparent 1px),var(--board-bg);background-size:28px 28px;box-shadow:inset 0 0 0 1px #56d8ff1c,0 0 0 1px #0000008c;position:relative;overflow:hidden;cursor:crosshair;touch-action:none}.canvas-wrap:before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";background:linear-gradient(90deg,transparent 0,rgb(86 216 255 / 8%) 50%,transparent 100%),linear-gradient(rgb(255 255 255 / 4%) 1px,transparent 1px);background-size:100% 100%,100% 24px;mix-blend-mode:screen;opacity:.38;z-index:2}.canvas-wrap:after{position:absolute;left:18px;top:18px;z-index:3;color:var(--primary);content:"WEBGL SURFACE VIEW";font-family:var(--code);font-size:.72rem;font-weight:800;pointer-events:none}.game-canvas{width:100%;height:100%;display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.control-panel{grid-row:1;border-left:1px solid var(--border);background:#0a1018;padding:18px 22px;display:flex;flex-direction:column;gap:14px;overflow:auto}.title-block{border:1px solid var(--border);background:var(--surface);padding:12px 16px;display:grid;gap:6px}.control-panel h1{font-size:1.31rem}.run-state{justify-self:start;color:var(--text-muted);font-family:var(--code);font-size:.78rem}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.stats-grid>div{border:1px solid var(--border);padding:11px 14px;background:var(--surface-raised)}.stat-label{display:block;color:var(--text-muted);font-size:.8rem;font-weight:700;line-height:1.2}.stats-grid strong{display:block;margin-top:6px;color:var(--text);font-size:1.67rem;line-height:1}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:11px 13px}button,.pattern-control select,.rule-control input{border:1px solid var(--border);color:var(--text);background:var(--surface-raised)}button{min-height:40px;padding:0 13px;cursor:pointer}button:hover,.pattern-control select:hover,.rule-control input:hover,.control-group label:hover{border-color:var(--border-strong);background:var(--surface-soft)}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible{border-color:var(--focus);outline:2px solid rgb(86 216 255 / 36%);outline-offset:2px}button:disabled{color:#6f8193;cursor:not-allowed;background:#111822;border-color:#1f2d3d}button.primary{border-color:var(--primary);color:#061019;background:var(--primary);font-weight:800}button.primary:hover{border-color:var(--primary-strong);background:var(--primary-strong)}#add-pattern{border-color:var(--warning);color:#071019;background:var(--warning);font-weight:800}#add-pattern:hover{background:#ffd77a}.control-group{margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 13px}.control-group legend,.speed-control>span,.rule-control>span,.pattern-control>span:first-child{grid-column:1 / -1;margin-bottom:2px;color:var(--text-muted);font-size:.8rem;font-weight:800}.pattern-control{display:grid;gap:7px}.select-action{display:grid;grid-template-columns:minmax(0,1fr) 59px;gap:9px}.pattern-control select{min-width:0;min-height:40px;width:100%;padding:0 11px;font-family:var(--code);font-weight:700}.rule-control{display:grid;gap:7px}.rule-control input{min-height:40px;width:100%;padding:0 13px;font-family:var(--code);font-weight:800;text-transform:uppercase}.rule-control input.is-invalid{border-color:var(--danger);background:#2a1317}.control-group label{min-height:34px;border:1px solid var(--border);padding:7px 9px;display:flex;align-items:center;gap:7px;color:var(--text);background:var(--surface-raised);cursor:pointer;-webkit-user-select:none;user-select:none}.control-group input{margin:0;accent-color:var(--primary)}.control-group label:has(input:checked){border-color:var(--primary);background:#142637;box-shadow:inset 3px 0 0 var(--primary)}.zones label:before{width:10px;height:10px;border-radius:50%;content:"";background:var(--normal-zone);box-shadow:0 0 0 1px #ffffff2e}.zones label[data-zone=fertile]:before{background:var(--fertile-zone)}.zones label[data-zone=harsh]:before{background:var(--harsh-zone)}.zones label[data-zone=stable]:before{background:var(--stable-zone)}.speed-control{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.speed-control input{grid-column:1 / -1;width:100%;accent-color:var(--primary)}.speed-control strong{color:var(--text);font-size:.84rem}@media (min-width: 1121px) and (max-height: 780px){.control-panel{padding:18px 20px;gap:11px}.title-block{padding:10px 14px;gap:4px}.control-panel h1{font-size:1.32rem}.stats-grid{gap:10px}.stats-grid>div{padding:9px 12px}.stats-grid strong{margin-top:4px;font-size:1.55rem}.button-row{gap:9px 10px}button{min-height:38px;padding:0 12px}.control-group{gap:7px 10px}.pattern-control,.rule-control{gap:6px}.select-action{grid-template-columns:minmax(0,1fr) 58px;gap:8px}.pattern-control select,.rule-control input{min-height:38px}.control-group label{min-height:34px;padding:6px 9px}.speed-control{gap:6px}}@media (max-width: 1120px){.app-shell{height:auto;grid-template-columns:200px minmax(0,1fr);grid-template-rows:minmax(430px,58vh) auto;overflow:visible}.info-panel{grid-column:1;grid-row:1}.playfield{grid-column:2;grid-row:1;padding:18px}.control-panel{grid-column:1 / -1;grid-row:2;border-left:0;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}.title-block,.stats-grid,.button-row,.control-group,.rule-control,.pattern-control,.speed-control{grid-column:span 1}}@media (max-width: 780px){.app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(360px,56vh) auto auto}.playfield{grid-column:1;grid-row:1;padding:12px}.info-panel{grid-column:1;grid-row:2;border-right:0;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr;gap:18px}.info-block+.info-block{padding-top:18px}.control-panel{grid-column:1;grid-row:3;padding:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.title-block,.stats-grid,.button-row,.control-group,.rule-control,.pattern-control,.speed-control{grid-column:1 / -1}}