:root{--cream: #fbf6ee;--ink: #4a342a;--ink-soft: #8a7365;--line: rgba(90, 62, 50, .14);--panel: rgba(255, 253, 249, .82);--sage: #7c9a82;--sage-deep: #3e5c4b;--blush: #d98d99;--blush-deep: #b56b78;--bg-base: #f2efe7;--bg-accent: #dfeae1;--bg-energy: #e8efe4;--accent: var(--sage);--panel-max: 56vh;--radius: 14px;--shadow: 0 8px 30px rgba(74, 52, 42, .1)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Be Vietnam Pro,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}#app:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 8%,var(--bg-energy) 0%,transparent 58%),radial-gradient(90% 70% at 50% 108%,var(--bg-accent) 0%,transparent 62%),var(--bg-base);transition:background .9s cubic-bezier(.4,0,.2,1)}#stage{position:absolute;inset:0;touch-action:none}#stage canvas{display:block;width:100%;height:100%}#ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end}#ui>*{pointer-events:auto}#ui>.viewer{pointer-events:none}.viewer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:max(14px,env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom))}.viewer>*{pointer-events:auto}.viewer .close{align-self:flex-end;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);box-shadow:var(--shadow);color:var(--ink-soft);font:inherit;font-size:15px;line-height:1;cursor:pointer}.btn.big{min-width:190px;padding:15px 34px;font-size:15px;border-radius:999px;box-shadow:var(--shadow)}.tunes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;scroll-snap-type:x proximity}.tunes::-webkit-scrollbar{display:none}.tune{border:1px solid var(--line);background:#fff9;border-radius:999px;padding:9px 15px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;scroll-snap-align:start;transition:background .18s,color .18s,border-color .18s}.tune[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.build{display:flex;flex-direction:column;gap:12px}.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:#281e1a6b;backdrop-filter:blur(3px)}.sheet-box{width:min(460px,100%);max-height:86vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--cream);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 60px #32221a47}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head .close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff9;color:var(--ink-soft);font:inherit;cursor:pointer}.wave-wrap{height:110px;border:1px solid var(--line);border-radius:var(--radius);background:#ffffff80;overflow:hidden;touch-action:none}.wave{display:block;width:100%;height:100%;cursor:crosshair}.hint.grow{flex:1}.panel{margin:0 auto;width:min(560px,100%);background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:var(--shadow);padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;max-height:var(--panel-max);overflow-y:auto}.pbar{position:relative;display:flex;align-items:center;justify-content:center;margin:-8px -16px 0;padding:4px 16px 0;min-height:30px}.grip{display:grid;place-items:center;width:34px;height:30px;flex:none;padding:0;border:0;background:transparent;color:var(--ink-soft);cursor:pointer}.grip svg{display:block;width:20px;height:20px;transition:transform .22s cubic-bezier(.4,0,.2,1)}.btn.small{padding:9px 26px;font-size:13.5px;flex:none}.panel:not(.collapsed) .pbar .btn{display:none}.panel:not(.collapsed) .grip svg{transform:rotate(180deg)}.panel.collapsed .grip{position:absolute;left:10px;top:50%;transform:translateY(-50%)}.panel.collapsed>*:not(.pbar){display:none}.panel.collapsed{gap:0;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.row{display:flex;flex-direction:column;gap:7px}.row-inline{flex-direction:row;align-items:center;gap:10px}.label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:40px;height:40px;border-radius:50%;border:2px solid transparent;outline:1px solid var(--line);cursor:pointer;padding:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s}.swatch:hover{transform:scale(1.08)}.swatch[aria-pressed=true]{border-color:var(--ink);transform:scale(1.12)}.swatch.outside{opacity:.5}.swatch.outside:hover,.swatch.outside[aria-pressed=true]{opacity:1}.swatch.rest:after{content:"";position:absolute;left:24%;right:24%;top:calc(50% - 1px);height:2px;border-radius:2px;background:#4a342a73}.swatch.rest{position:relative}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#ffffff8c;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;transition:background .18s,color .18s,border-color .18s}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;background:#ffffff8c;padding:2px}.stepper button{width:30px;height:30px;border:0;background:transparent;border-radius:50%;cursor:pointer;font-size:17px;color:var(--ink);line-height:1}.stepper button:active{background:#0000000f}.stepper output{min-width:32px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;font-weight:500}.btn{border:0;border-radius:var(--radius);padding:11px 18px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;background:var(--accent);color:#fff;transition:filter .18s,transform .14s;white-space:nowrap}.btn:hover{filter:brightness(1.06)}.btn:active{transform:scale(.97)}.btn.ghost{background:#fff9;color:var(--ink-soft);border:1px solid var(--line)}.btn.grow{flex:1}.btn.danger{background:var(--blush-deep)}.btn:disabled{opacity:.4;cursor:not-allowed}.field{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff9;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);letter-spacing:.04em}.field:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}.field.link{flex:1;min-width:0}.btn.copy{padding:10px 16px;font-size:12.5px}.field.link{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-soft);text-overflow:ellipsis;padding:8px 10px}.hint{font-size:11.5px;color:var(--ink-soft);line-height:1.45}.hint b{color:var(--ink);font-weight:500}.hint.warn{color:var(--blush-deep)}.row.sel{gap:9px;padding:10px;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 10%,white);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.stat{display:flex;gap:14px;font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.stat b{color:var(--ink);font-weight:600}.tools{align-self:flex-end;margin:0 16px 10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}.tool{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);border-radius:50%;color:var(--ink-soft);cursor:pointer;box-shadow:var(--shadow)}.tool svg{display:block;width:18px;height:18px}@media(min-width:860px){#ui{flex-direction:row;align-items:stretch;justify-content:flex-start}.panel{margin:0;width:340px;height:100%;max-height:100%;border-radius:0;border:0;border-right:1px solid var(--line);padding:20px 20px calc(20px + env(safe-area-inset-bottom));gap:15px}.tools{position:absolute;right:22px;bottom:20px;margin:0}.pbar{display:none}.panel.collapsed>*{display:flex}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}