:root{--text-primary: #1f1e1d;--text-secondary: #5e5d59;--text-muted: #8f8e89;--text-danger: #a32d2d;--surface-2: #fff;--surface-1: #f5f4f0;--border: rgba(0, 0, 0, .12);--border-strong: rgba(0, 0, 0, .22);--bg-accent: #dbe8fb;--text-accent: #185fa5;--radius: 8px;--font-mono: ui-monospace, Menlo, monospace;--page: #faf9f5}@media(prefers-color-scheme:dark){:root{--text-primary: #ecebe6;--text-secondary: #b4b2a9;--text-muted: #888780;--text-danger: #f09595;--surface-2: #2a2a28;--surface-1: #242422;--border: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .24);--bg-accent: #0c447c;--text-accent: #b5d4f4;--page: #1a1a19}}body{margin:0;background:var(--page);color:var(--text-primary);font-family:system-ui,-apple-system,sans-serif}main{max-width:720px;margin:0 auto;padding:16px}button,select{font:inherit;font-size:14px;color:var(--text-primary);background:transparent;border:.5px solid var(--border-strong);border-radius:var(--radius);padding:6px 12px;min-height:32px;cursor:pointer}button:hover{background:var(--surface-1)}button.is-on{background:var(--bg-accent);color:var(--text-accent)}input[type=range]{accent-color:var(--text-accent)}a{color:var(--text-accent)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.back{display:inline-block;font-size:13px;color:var(--text-secondary);text-decoration:none;margin-bottom:4px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 6px}.section{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:8px 0;border-top:.5px solid var(--border)}.section-label{font-size:13px;color:var(--text-secondary)}.divider{width:1px;height:20px;background:var(--border)}.hint{font-size:13px;color:var(--text-secondary);flex:1;min-width:160px}.spacer{flex:1}.layers{gap:6px 16px;margin-bottom:1rem;font-size:14px;color:var(--text-secondary)}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px}.slider{display:flex;align-items:center;gap:12px}.slider label{font-size:14px;color:var(--text-secondary);min-width:84px}.slider input{flex:1;min-width:0}.slider output{font-size:14px;font-weight:500;min-width:44px}.palette-panel{width:166px}.palette-panel canvas{display:block;border-radius:6px;touch-action:none}.palette-current{display:flex;align-items:center;gap:8px;margin-top:8px}.palette-preview{width:18px;height:18px;border-radius:50%;display:inline-block}.palette-hex{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}.palette-caption{font-size:11px;color:var(--text-muted);margin:8px 0 4px}.palette-recent{display:flex;flex-wrap:wrap;gap:5px;min-height:16px}.palette-swatches{display:grid;grid-template-columns:repeat(8,16px);gap:5px}.chip{width:16px;height:16px;min-height:0;padding:0;border:.5px solid var(--border-strong)}.chip.round{border-radius:50%}.chip.square{border-radius:4px}.chip.large{width:22px;height:22px;border-radius:50%}.saves{display:flex;flex-wrap:wrap;gap:6px;flex:1}.saves-empty{font-size:12px;color:var(--text-muted)}.save{display:inline-flex;align-items:center}.save-swatch{display:flex;width:56px;height:28px;min-height:0;padding:0;overflow:hidden;border-radius:var(--radius);border:.5px solid var(--border-strong);position:relative}.save-swatch span{flex:1}.save-swatch .tag{position:absolute;left:3px;top:1px;font-size:11px;color:#fff;text-shadow:0 0 2px #000}.save-delete{border:0;background:none;min-height:0;padding:0 4px;font-size:14px;color:var(--text-muted)}.json-panel textarea{width:100%;height:240px;box-sizing:border-box;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-primary);background:var(--surface-1);border:.5px solid var(--border-strong);border-radius:var(--radius);padding:8px}.json-actions{display:flex;align-items:center;gap:8px;margin-top:6px}.json-error{font-size:13px;color:var(--text-danger)}.app{color-scheme:dark;--text-primary: #ecebe6;--text-secondary: #b4b2a9;--text-muted: #888780;--text-danger: #f09595;--surface-2: #2a2a28;--surface-1: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .24);--bg-accent: #0c447c;--text-accent: #b5d4f4;--panel: rgba(18, 18, 20, .84);overflow:hidden;background:#000}.surface{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:crosshair}.app .back{position:fixed;z-index:3;left:12px;top:12px;margin:0;padding:4px 10px;font-size:12px;color:#ffffffb8;background:#00000073;border-radius:999px}.app .back:hover{color:#fff}.tip{position:fixed;z-index:1;left:14px;bottom:12px;margin:0;max-width:calc(100vw - 360px);font-size:12px;color:#fff9;pointer-events:none}.panel-collapsed .tip{max-width:calc(100vw - 28px)}.notice{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;color:#fff;font-size:14px}.panel-toggle{position:fixed;z-index:3;top:12px;right:12px;width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:18px;background:var(--panel);border-color:var(--border);border-radius:10px}.panel-toggle:hover{background:#2a2a2c}.panel{position:fixed;z-index:2;top:56px;right:12px;bottom:12px;width:min(292px,calc(100vw - 24px));box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 14px;font-size:13px;color:var(--text-primary);background:var(--panel);border:.5px solid var(--border);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .35s ease,opacity .35s ease;scrollbar-width:thin}.panel-collapsed .panel{transform:translate(calc(100% + 16px));opacity:0}.panel-toggle.pulse{animation:toggle-pulse .9s ease-out 2}@keyframes toggle-pulse{0%{box-shadow:0 0 #b5d4f48c;border-color:#b5d4f4b3}to{box-shadow:0 0 0 10px #b5d4f400}}@media(prefers-reduced-motion:reduce){.panel{transition:none}.panel-toggle.pulse{animation:toggle-pulse .01s 1}}.panel-title{margin:10px 0 2px;font-size:14px;font-weight:600}.panel-section{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:.5px solid var(--border)}.panel-title+.panel-section{border-top:0}.panel .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.panel button,.panel select{font-size:13px;min-height:28px;padding:3px 9px}.panel button:disabled{opacity:.4;cursor:default}.panel button:disabled:hover{background:transparent}.panel .icon-button{width:30px;padding:0;font-size:16px}.seg{display:flex}.seg button{flex:1;border-radius:0;margin-left:-.5px}.seg button:first-child{border-radius:var(--radius) 0 0 var(--radius);margin-left:0}.seg button:last-child{border-radius:0 var(--radius) var(--radius) 0}.panel .section-label{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.panel .status{font-size:12px;color:var(--text-secondary)}.panel .layers{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:0;font-size:13px}.panel .layers .section-label{grid-column:1 / -1}.panel .sliders{display:flex;flex-direction:column;gap:6px}.panel .slider{gap:8px}.panel .slider label{font-size:13px;min-width:92px}.panel .slider output{font-size:12px;min-width:34px;text-align:right}.panel .json-panel textarea{height:200px;font-size:11px}.panel .saves{flex:none}.panel .chip{flex:none;width:16px;height:16px;min-height:0;aspect-ratio:1;padding:0;box-sizing:border-box}.panel .palette-swatches{grid-auto-rows:16px}.surface.bg{display:none;pointer-events:none}.bg-loaded{display:none;flex-direction:column;gap:8px}.bg-thumb{width:64px;height:40px;object-fit:cover;border-radius:6px;border:.5px solid var(--border-strong)}.home{min-height:100vh;margin:0;display:flex;flex-direction:column;background:#000;color:#ecebe6}.home-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:none;padding:48px 16px;box-sizing:border-box}.home-title{margin:0 0 clamp(24px,4vw,44px);font-size:22px;font-weight:600;letter-spacing:-.01em;color:#ecebe6}.tiles{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,56px)}.study{display:flex;flex-direction:column;align-items:center;gap:14px;color:#ffffff9e;text-decoration:none;outline:none}.tile{display:block;width:min(28vw,340px);aspect-ratio:1;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.32);border-radius:14px;cursor:pointer;transition:border-color .2s ease,transform .2s ease,background-color .2s ease}.tile{position:relative}.tile canvas{display:block;width:100%;height:100%}.tile .tile-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.study:hover .tile,.study:focus-visible .tile{border-color:#ffffffbf;background-color:#0b0b0c;transform:translateY(-3px) scale(1.02)}.study:focus-visible .tile{box-shadow:0 0 0 2px #b5d4f4}.study:hover,.study:focus-visible{color:#fff}.tile-label{font-size:14px;letter-spacing:.08em}.home-footer{padding:0 16px 20px;text-align:center;font-size:11px;color:#ffffff52}.home-footer a{color:#ffffff80}@media(max-width:720px){.home-main{padding:32px 16px}.tiles{flex-direction:column}.tile{width:min(100vw - 32px,420px)}}@media(prefers-reduced-motion:reduce){.tile{transition:none}}