:root{--bg: #0e0e14;--panel: #16161e;--line: #2a2a36;--text: #d8d8e4;--muted: #6f6f80;--accent: #f6c96f;--src: #6fa8f6;--dst: #f66fa8;--surface: #1f1f29;--overlay: rgba(14,14,20,.78);--dim: rgba(255,255,255,.06)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:0 0 64px}.morph-line{display:flex;align-items:center;gap:6px;padding:14px 16px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.morph-line::-webkit-scrollbar{height:4px}.morph-line::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}.stop{position:relative;display:flex;align-items:center;gap:4px;flex-shrink:0}.stop-input{width:120px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:7px 10px;font-family:inherit;font-size:14px;-moz-appearance:none;appearance:none;-webkit-appearance:none}.stop-input:focus{outline:1px solid var(--accent)}.rm-stop{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--panel);color:var(--muted);border:1px solid var(--line);cursor:pointer;font-size:11px;line-height:1;display:none;align-items:center;justify-content:center;padding:0;z-index:5}.stop:hover .rm-stop,.stop:focus-within .rm-stop{display:flex}.stop-thumb{width:120px;height:36px;border-radius:4px;border:1px solid var(--line);background-color:var(--surface);background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer;transition:border-color .15s}.stop-thumb:hover{border-color:var(--accent)}.arrow{display:flex;align-items:center;gap:4px;flex-shrink:0}.arrow-btn{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px;line-height:1;border-radius:4px;transition:color .15s,background .15s}.arrow-btn:hover{color:var(--accent);background:var(--dim)}.arrow.has-pause .arrow-btn{color:var(--accent)}.pause-ctrl{display:flex;align-items:center;gap:3px}.pause-dur{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:2px 4px;font-family:inherit;font-size:11px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.pause-dur:focus{outline:1px solid var(--accent)}.pause-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px;line-height:1}.pause-rm:hover{color:var(--dst)}.add-stop{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--dim);color:var(--muted);border:1px dashed var(--line);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;padding:0}.add-stop:hover{color:var(--text);border-color:var(--text)}.font-details{position:relative;flex-shrink:0}.font-details summary{list-style:none;cursor:pointer;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:7px 8px;font-size:11px;letter-spacing:.3px;text-align:center;-webkit-user-select:none;user-select:none;transition:color .15s}.font-details summary::-webkit-details-marker{display:none}.font-details summary::marker{display:none;content:""}.font-details summary:hover{color:var(--text)}.font-details[open] summary{color:var(--accent);border-color:var(--accent)}.font-pop{position:fixed;min-width:240px;max-width:calc(100vw - 32px);max-height:calc(100vh - 80px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px;z-index:50;box-shadow:0 8px 28px #000000a0}.font-pop .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.font-pop .row:last-child{margin-bottom:0}.font-pop .row>label{width:52px;text-align:left;color:var(--muted);font-size:11px;flex-shrink:0}.font-pop .row input[type=text],.font-pop .row select,.font-pop .row input[type=range]{flex:1;min-width:0}.font-pop .row input[type=checkbox]{flex:0 0 auto;width:14px;height:14px;accent-color:var(--accent);margin-right:auto}.font-pop .row .val{font-size:11px;color:var(--muted);width:40px;text-align:right;font-variant-numeric:tabular-nums}.fp-reset{display:block;background:none;border:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;padding:4px 0 0;margin-top:6px;border-top:1px solid var(--line);width:100%;text-align:left}.fp-reset:hover{color:var(--text)}.canvas-wrap{position:relative}canvas{display:block;background:var(--panel);border-radius:6px;box-shadow:0 1px #ffffff05 inset,0 8px 24px #00000040}.gl-canvas{position:absolute;top:0;left:0;display:none;border-radius:6px}body.present .gl-canvas{border-radius:0}.player{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:0 0 6px 6px;transition:opacity .4s}.play-btn{flex-shrink:0;width:28px;height:28px;background:none;border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:4px;transition:background .15s}.play-btn:hover{background:var(--dim)}.play-btn svg{display:block}.scrubber{flex:1;height:4px;border:none;border-radius:2px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;--fill: 0%;background:linear-gradient(to right,var(--accent) var(--fill),rgba(255,255,255,.15) var(--fill))}.scrubber:focus{outline:none}.scrubber::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.scrubber::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.scrubber::-moz-range-track{height:4px;border:none;border-radius:2px;background:transparent}.player-time{flex-shrink:0;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:72px;text-align:right}.player-icon-btn{flex-shrink:0;width:28px;height:28px;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:4px;transition:color .15s,background .15s}.player-icon-btn:hover{color:var(--text);background:var(--dim)}.player-icon-btn svg{display:block}.share-wrap{position:relative;flex-shrink:0}.share-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:4px 0;min-width:150px;box-shadow:0 -4px 16px #000000a0;display:none;z-index:60}.share-wrap.open .share-menu{display:block}.share-opt{display:block;width:100%;background:none;border:none;color:var(--text);font:inherit;font-size:12px;padding:8px 14px;text-align:left;cursor:pointer;white-space:nowrap}.share-opt:hover{background:var(--dim)}.share-opt:disabled{color:var(--muted);cursor:default}.share-opt:disabled:hover{background:none}.recording-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:5px 10px;border-radius:4px;font-size:11px;color:var(--muted);pointer-events:none;z-index:10}.rec-dot{width:8px;height:8px;border-radius:50%;background:#e44;animation:rec-blink 1s ease-in-out infinite}@keyframes rec-blink{0%,to{opacity:1}50%{opacity:.3}}.canvas-wrap:-webkit-full-screen,.canvas-wrap:fullscreen{background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center}.canvas-wrap:-webkit-full-screen canvas,.canvas-wrap:fullscreen canvas{border-radius:0;box-shadow:none;background:var(--bg)}.canvas-wrap:-webkit-full-screen .player,.canvas-wrap:fullscreen .player{position:fixed;bottom:0;left:0;right:0;border-radius:0}.style-btn{flex-shrink:0;background:var(--dim);color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:3px 8px;font:inherit;font-size:11px;letter-spacing:.3px;cursor:pointer;transition:color .15s,border-color .15s}.style-btn:hover{color:var(--text);border-color:var(--text)}.settings-wrap{position:relative;flex-shrink:0}.settings-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px;min-width:260px;max-width:calc(100vw - 24px);max-height:calc(100vh - 80px);overflow-y:auto;box-shadow:0 -4px 16px #000000a0;display:none;z-index:60}.settings-wrap.open .settings-menu{display:block}.settings-section{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}.settings-toggle{display:flex;align-items:center;gap:6px;color:var(--text);font-size:12px;cursor:pointer}.settings-toggle input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);margin:0;cursor:pointer}.st-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.st-src{background:var(--src)}.st-dst{background:var(--dst)}.settings-grid{display:grid;grid-template-columns:68px 1fr 48px;gap:8px 10px;align-items:center;font-size:12px}.settings-grid label{color:var(--muted);text-align:right;font-size:11px}.val{color:var(--text);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}input[type=text],input[type=range],select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:6px 9px;font-family:inherit;font-size:13px;width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none}input[type=text]:focus,select:focus{outline:1px solid var(--accent)}input[type=range]{padding:0;height:4px;background:var(--line);border:none}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.stats{margin-top:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}body.present{padding:0;justify-content:center}body.present .morph-line{display:none}body.present canvas{border-radius:0;box-shadow:none;background:var(--bg)}body.present .canvas-wrap{width:100vw}body.present .player{position:fixed;bottom:0;left:0;right:0;border-radius:0;z-index:20}body.present .player.hidden{opacity:0;pointer-events:none}.share-hint{font-size:12px;color:var(--muted);text-align:center;padding:12px 16px 0}.share-hint-btn{background:none;border:none;color:var(--accent);font:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0}.share-hint-btn:hover{opacity:.7}body.present .share-hint{display:none}.credit{font-size:10px;color:var(--muted);opacity:.4;text-align:center;padding:8px 0}.credit a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.credit a:hover{opacity:.7}body.present .credit{display:none}@media (max-width: 640px){body{padding-bottom:80px}.morph-line{flex-direction:column;align-items:stretch;padding:10px 16px;gap:4px;overflow-x:visible}.stop{flex-shrink:1}.stop-input{width:100%;font-size:15px;padding:10px 12px}.stop-thumb{width:100%;height:48px}.font-details summary{padding:6px 8px}.rm-stop{display:flex}.arrow{justify-content:center;padding:0}.arrow-btn{transform:rotate(90deg)}.add-stop{align-self:center;margin-top:2px}.settings-grid{grid-template-columns:56px 1fr 40px;gap:6px 8px}.settings-menu{min-width:220px}.player{padding:6px 10px;gap:6px}.player-time{font-size:10px;min-width:60px}}@media (max-width: 380px){.stop-input{font-size:14px}.player-time{display:none}}