:root{--panel-bg:#1e1e24eb;--panel-border:1px solid #ffffff14;--btn-bg:#2a2a32;--btn-border:1px solid #ffffff1f;--accent:#5ad1e6;--go:#3fae5c;--danger:#e35d5d}html,body{touch-action:manipulation;background:#1a1a1f;width:100%;height:100%;margin:0;padding:0;font-family:system-ui,sans-serif;overflow:hidden}#app{width:100%;height:100%}#sim{z-index:1;touch-action:none;width:100%;height:100%;display:block;position:relative}#toast{z-index:4;box-sizing:border-box;color:#eee;text-align:center;pointer-events:none;background:#1e1e24f5;border:1px solid #ffffff1f;border-radius:10px;max-width:calc(100vw - 24px);padding:10px 16px;font-size:13px;position:fixed;bottom:84px;left:50%;transform:translate(-50%)}#toast[hidden]{display:none}#grid{z-index:0;pointer-events:none;background-image:linear-gradient(#ffffff1a 1px,#0000 1px),linear-gradient(90deg,#ffffff1a 1px,#0000 1px),linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-size:200px 200px,200px 200px,40px 40px,40px 40px;position:fixed;inset:0}#grid[hidden]{display:none}button{font-family:inherit}#palette{z-index:2;box-sizing:border-box;background:var(--panel-bg);border:var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;flex-direction:column;gap:4px;max-height:calc(100vh - 24px);padding:6px;display:flex;position:fixed;top:50%;left:12px;overflow-y:auto;transform:translateY(-50%)}.palette-btn{appearance:none;color:#c9c9d1;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:3px;width:58px;padding:8px 4px 6px;font-size:11px;transition:background .15s,color .15s;display:flex}.palette-btn svg,.action-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.palette-btn:hover:not(:disabled){color:#fff;background:#ffffff14}.palette-btn.active{background:var(--accent);color:#10151a;font-weight:600}.palette-btn:disabled{opacity:.35;cursor:not-allowed}#actions{z-index:2;box-sizing:border-box;background:var(--panel-bg);border:var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;align-items:center;gap:4px;padding:6px;display:flex;position:fixed;top:12px;right:12px}.action-btn{appearance:none;color:#c9c9d1;white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:6px;padding:8px 10px;font-size:13px;transition:background .15s,color .15s;display:flex}.action-btn:hover:not(:disabled),.action-btn.active{color:#fff;background:#ffffff14}.action-btn:disabled{opacity:.35;cursor:not-allowed}.action-btn.danger{color:var(--danger)}.action-btn.danger:hover:not(:disabled){color:var(--danger);background:#e35d5d24}.action-btn.primary{background:var(--go);color:#0d1a10;padding:8px 16px;font-size:14px;font-weight:700}.action-btn.primary:hover:not(:disabled){color:#0d1a10;background:#4cc46c}.action-btn.primary.playing{background:var(--danger);color:#fff}.action-btn.primary.playing:hover:not(:disabled){color:#fff;background:#ef7373}.action-btn.primary .icon-play{fill:currentColor}.action-btn.primary .icon-stop{fill:currentColor;display:none}.action-btn.primary.playing .icon-play{display:none}.action-btn.primary.playing .icon-stop{display:block}.divider{background:#ffffff1f;width:1px;height:24px;margin:0 4px}#help-panel{z-index:3;box-sizing:border-box;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#ddd;background:#1e1e24f5;border:1px solid #ffffff1a;border-radius:12px;width:min(420px,100vw - 24px);max-height:calc(100vh - 96px);padding:12px 16px;font-size:13px;position:fixed;top:72px;right:12px;overflow-y:auto}#help-panel[hidden]{display:none}#help-panel dl{grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;display:grid}#help-panel dt{color:var(--accent);font-weight:600}#help-panel dd{color:#ffffffbf;margin:0}#examples-panel{z-index:3;box-sizing:border-box;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#ddd;background:#1e1e24f7;border:1px solid #ffffff1a;border-radius:12px;width:min(520px,100vw - 24px);max-height:calc(100vh - 96px);padding:14px 16px 16px;position:fixed;top:72px;right:12px;overflow-y:auto}#examples-panel[hidden]{display:none}#examples-panel h2{color:#fff;margin:0 0 4px;font-size:15px}#examples-panel>p{color:#ffffffa6;margin:0 0 12px;font-size:13px}#examples-grid{grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:10px;display:grid}.example-card{appearance:none;background:var(--btn-bg);border:var(--btn-border);color:#ddd;text-align:left;cursor:pointer;border-radius:10px;flex-direction:column;gap:6px;padding:8px;font-size:12px;transition:background .15s,border-color .15s;display:flex}.example-card:hover,.example-card:focus-visible{border-color:var(--accent);background:#35353f;outline:none}.example-card canvas{background:#1a1a1f;border-radius:6px;max-width:100%;display:block}.example-card strong{color:#fff;font-size:13px}.example-card span{color:#ffffffb3;line-height:1.4}.tool-btn{appearance:none;border:var(--btn-border);background:var(--btn-bg);color:#ddd;white-space:nowrap;cursor:pointer;border-radius:6px;padding:8px 11px;font-size:14px;transition:background .15s,border-color .15s}.tool-btn:hover:not(:disabled){background:#35353f}.tool-btn.danger{border-color:var(--danger);color:var(--danger);background:0 0}.tool-btn.danger:hover:not(:disabled){background:#e35d5d1f}#props{z-index:2;box-sizing:border-box;background:var(--panel-bg);border:var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#ddd;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:8px 12px;font-size:13px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}#props[hidden],#props [hidden]{display:none}#props-title{color:var(--accent);font-weight:600}#props label{align-items:center;gap:6px;display:flex}#props select{background:var(--btn-bg);color:#ddd;border:var(--btn-border);border-radius:6px;padding:6px 8px;font-size:13px}.demo-btn{appearance:none;background:var(--btn-bg);border:var(--btn-border);color:#ddd;white-space:nowrap;cursor:pointer;border-radius:8px;padding:7px 12px;font-size:13px}.demo-btn:hover{background:#35353f}.demo-btn.primary{background:var(--accent);border-color:var(--accent);color:#10151a;font-weight:600}.demo-btn.primary:hover{background:#7ddcec}.demo-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.demo-actions[hidden]{display:none}#demo-prompt{z-index:4;box-sizing:border-box;background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#eee;border:1px solid #ffffff24;border-radius:12px;width:min(380px,100vw - 24px);padding:12px 16px;font-size:14px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}#demo-prompt[hidden]{display:none}#demo-prompt p{margin:0 0 10px}#demo-shield{z-index:5;position:fixed;inset:0}#demo-shield[hidden],#demo-cursor[hidden],#demo-caption[hidden]{display:none}#demo-cursor{z-index:8;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 3px #0000008c);width:28px;height:28px;margin:-3px 0 0 -5px;position:fixed;top:0;left:0}#demo-cursor svg{fill:#fff;stroke:#10151a;stroke-width:1.2px;stroke-linejoin:round;width:100%;height:100%}#demo-cursor.click:after{content:"";border:2px solid var(--accent);border-radius:50%;width:22px;height:22px;margin:-9px 0 0 -9px;animation:.45s ease-out demo-ripple;position:absolute;top:2px;left:4px}@keyframes demo-ripple{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.8)}}.demo-highlight{outline:3px solid var(--accent);outline-offset:3px;animation:1s ease-in-out infinite demo-pulse}@keyframes demo-pulse{50%{outline-color:#5ad1e64d}}#demo-caption{z-index:7;box-sizing:border-box;color:#eee;background:#1e1e24f7;border:1px solid #ffffff24;border-radius:12px;flex-direction:column;gap:6px;width:min(580px,100vw - 24px);min-height:120px;padding:12px 16px;font-size:14px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #00000073}.demo-head{min-height:30px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}#demo-text{flex:1;margin:0;line-height:1.45}body.demo-active #props{z-index:6;bottom:148px}@media (prefers-reduced-motion:reduce){.demo-highlight{animation:none}}@media (width<=820px){.action-btn .label{display:none}#actions{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 24px)}.action-btn{padding:8px}.action-btn.primary{padding:8px 14px}.divider{display:none}.palette-btn{width:44px;padding:9px 4px}.palette-btn span{display:none}}