.character{color:#243248;cursor:pointer;background:#fff7e9;border:2px solid #655681;border-radius:24px;width:100%;min-width:44px;min-height:204px;padding:12px;position:relative}.character svg{width:min(100%,144px);margin:auto;display:block}.character .char-body{transform-origin:50% 85%;animation:3.7s ease-in-out infinite character-idle}.character .char-mouth{transform-origin:52% 55%}.character .char-hand{transform-origin:50% 65%}.character .char-status,.character .char-loading,.character .char-error{display:none}.character[data-selected=true]{border-color:#243248;box-shadow:inset 0 0 0 2px #243248}.character[data-state=active]{background:#eadcff}.character[data-state=active] .char-body{transform:translateY(calc(var(--pulse,0) * -5px));animation:none}.character[data-state=active] .char-mouth{transform:scaleY(calc(1 + var(--pulse,0) * .45))}.character[data-state=active] .char-hand{transform:rotate(calc(var(--pulse,0) * 4deg))}.character[data-state=loading] .char-status,.character[data-state=loading] .char-loading{display:initial}.character[data-state=loading] .char-loading{transform-origin:116px 116px;animation:1.4s linear infinite character-loading}.character[data-state=error]{border-style:dashed}.character[data-state=error] .char-status,.character[data-state=error] .char-error{display:initial}.character:focus-visible,.character[data-focus-preview=true]{outline-offset:4px;outline:4px solid #ffcf65}.character-name{font-size:1.15rem;font-weight:800;display:block}.character-role{margin-top:4px;font-size:.84rem;display:block}@keyframes character-idle{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-3px)rotate(1deg)}}@keyframes character-loading{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.character *,.character[data-state=active] .char-body,.character[data-state=active] .char-mouth,.character[data-state=active] .char-hand{animation:none!important;transform:none!important}}.beatbox-page{padding-top:32px;padding-bottom:48px}.bb-intro{justify-content:space-between;align-items:center;gap:24px;display:flex}.bb-intro h1{font-family:var(--font-display);letter-spacing:-.065em;margin:12px 0 16px;font-size:clamp(2rem,4vw,3.8rem);font-weight:600;line-height:1.03}.bb-intro h1 em{color:var(--green);font-style:normal}.bb-intro-copy{color:var(--muted);font-size:1rem}.bb-pack{border:1px solid var(--line);background:#1c201c;border-radius:20px;min-width:230px;padding:18px 22px}.bb-pack p{font-weight:600;font-family:var(--font-display);margin:14px 0;font-size:1.15rem}.bb-pack>div{color:var(--muted);gap:14px;font-size:.78rem;display:flex}.bb-pack strong{color:var(--color-text)}.bb-preview{text-transform:uppercase;letter-spacing:.1em;color:#dec99b;font-size:.7rem}.bb-pack-mark{color:var(--green)}.bb-guide{color:#c5ccbf;flex-wrap:wrap;gap:24px;margin:24px 0;padding:0;font-size:.83rem;list-style:none;display:flex}.bb-guide li{align-items:center;gap:8px;display:flex}.bb-guide b{border:1px solid var(--line);width:26px;height:26px;color:var(--green);border-radius:50%;place-items:center;display:grid}.bb-stage{background:radial-gradient(at 50% 10%,#2c3424 0%,#1a2019 75%);border:1px solid #454d39;border-radius:28px;padding:20px 18px 14px;box-shadow:0 24px 70px #0004}.bb-stage-top{color:#c5ccbf;text-transform:uppercase;letter-spacing:.09em;justify-content:space-between;align-items:center;gap:16px;margin:0 2px 20px;font-size:.75rem;display:flex}.bb-beats{gap:7px;display:flex}.bb-beats i{border:1px solid #9aa592;border-radius:50%;width:8px;height:8px;display:block}.bb-beats i.is-current{background:#c3f36b;border-color:#c3f36b}.bb-cast{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;display:grid}.bb-role{min-width:0}.bb-role .character{border-color:#736b60;border-radius:24px;min-height:218px;padding:14px 8px 12px;transition:background-color .18s,border-color .18s;position:relative;box-shadow:0 6px #10170f}.bb-role .character[data-selected=true]{border-color:#c3f36b;box-shadow:0 6px #10170f,inset 0 0 0 2px #243248}.bb-role .character[data-active=true]{background:#e5edc8}.bb-role .character[data-pending=true]{border-style:dashed;border-color:#eccb87}.bb-role .character svg{height:140px}.bb-role-number{font-family:var(--font-display);font-size:.62rem;font-weight:600;position:absolute;top:11px;left:12px}.bb-role .character-name{font-family:var(--font-display);font-size:1.13rem}.bb-role .character-role{font-size:.72rem}.bb-variations{color:#c5ccbf;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:14px;font-size:.65rem;display:flex}.bb-variations>div{background:#141a12;border:1px solid #616a57;border-radius:14px;gap:3px;padding:3px;display:flex}.beatbox-page button:not(.character){font:inherit;color:var(--color-text);cursor:pointer;background:#293023;border:1px solid #637054;border-radius:12px;min-width:44px;min-height:44px;padding:8px 14px}.bb-variations button:not(.character){font-family:var(--font-display);border:0;border-radius:10px;padding:8px;font-size:.83rem}.bb-variations button[aria-pressed=true]:not(.character){color:#17210d;background:#c3f36b;font-weight:700}.beatbox-page button:disabled{cursor:wait;opacity:.6}.bb-role-status{text-align:center;color:#c5ccbf;min-height:36px;margin:10px 0 0;font-size:.68rem;line-height:1.4}.bb-role[data-error=true] .bb-role-status{color:#ffe0ad}.bb-retry{margin:8px auto 0;display:block;font-size:.75rem!important}.bb-retry[hidden]{display:none}.bb-bar-track{background:#414a36;border-radius:4px;height:3px;margin-top:12px;overflow:hidden}.bb-bar-track i{transform-origin:0;width:100%;height:100%;transform:scaleX(var(--bar-progress,0));background:#c3f36b;display:block}.bb-transport{z-index:4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#20261bf5;border:1px solid #586149;border-radius:22px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding:14px 16px 10px;display:flex;position:sticky;bottom:12px;box-shadow:0 8px 28px #0007}.bb-transport-buttons{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.bb-transport .bb-primary{align-items:center;gap:8px;display:flex;color:#17210d!important;background:#c3f36b!important;font-weight:700!important}.bb-volume{align-items:center;gap:10px;font-size:.8rem;display:flex}.bb-volume input{accent-color:#c3f36b;cursor:pointer;width:115px;min-height:44px}.bb-transport-meta{color:#c5ccbf;flex-basis:100%;justify-content:space-between;gap:14px;font-size:.7rem;display:flex}.bb-transport-meta p{margin:0}.bb-help{border-bottom:1px solid var(--line);margin-top:20px;padding:12px 0}.bb-help summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:.85rem;display:list-item}.bb-help p{color:var(--muted);max-width:780px;font-size:.83rem;line-height:1.65}.bb-bottom{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:18px;font-size:.7rem;display:flex}.bb-bottom a{align-items:center;min-height:44px;text-decoration:underline;display:flex}.bb-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.beatbox-page :is(button,input,summary):focus-visible{outline-offset:4px;outline:3px solid #ffcf65;scroll-margin-block:12px}.beatbox-page .character:focus-visible{outline-width:4px}.beatbox-page.motion-lite .char-body,.beatbox-page.motion-lite .char-mouth,.beatbox-page.motion-lite .char-hand{animation:none!important;transform:none!important}@media (width<=1000px){.bb-cast{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.bb-role .character{min-height:218px}}@media (width<=640px){.beatbox-page{padding-top:12px}.bb-intro{display:block}.bb-intro h1{font-size:clamp(1.9rem,7.8vw,2.7rem)}.bb-intro .eyebrow{font-size:.66rem}.bb-intro-copy{margin-bottom:20px;font-size:.82rem}.bb-pack{border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:12px 14px;display:flex}.bb-pack p{margin:0;font-size:.9rem}.bb-pack>div{gap:8px;font-size:.67rem}.bb-preview{flex-basis:100%;font-size:.57rem}.bb-guide{justify-content:space-between;gap:12px;margin:18px 0;font-size:.63rem}.bb-guide li{gap:5px}.bb-guide b{width:20px;height:20px}.bb-stage{border-radius:20px;padding:16px 10px 10px}.bb-stage-top{gap:8px;font-size:.58rem}.bb-cast{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.bb-role .character{border-radius:18px;min-height:192px;padding:12px 4px}.bb-role .character svg{height:114px}.bb-role .character-name{font-size:1rem}.bb-role .character-role{font-size:.61rem}.bb-variations{gap:4px;margin-top:11px}.bb-variations>span{text-align:center;flex-basis:100%}.bb-role-status{min-height:34px;font-size:.62rem}.bb-transport{border-radius:16px;gap:6px;padding:10px;bottom:8px}.bb-transport-buttons{flex-wrap:nowrap;flex-basis:100%;justify-content:space-between;gap:4px}.bb-transport-buttons button:not(.character){padding:8px 9px;font-size:.7rem}.bb-transport-buttons .bb-demo{font-size:.65rem!important}.bb-volume{font-size:.67rem}.bb-volume input{width:110px}.bb-transport-meta{font-size:.61rem}.bb-bottom{font-size:.66rem}}@media (prefers-reduced-motion:reduce){.beatbox-page *,.bb-role .character{transition:none!important}}.project-panel{border:1px solid var(--border,#454c38);background:#1b2119;border-radius:24px;margin:28px 0;padding:28px;scroll-margin-bottom:180px}.project-panel h2{margin:0 0 10px;font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.3}.project-panel h3{margin:0 0 18px;font-size:1.1rem}.project-panel p{line-height:1.65}.project-panel header>p{color:#d5e2ba}.project-note{color:#c0c9b8;margin:10px 0 18px;font-size:.83rem}.project-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin:26px 0 10px;display:grid}.project-grid>div{min-width:0}.project-panel label{margin:16px 0 8px;font-size:.85rem;display:block}.project-panel input,.project-panel select{color:#f5f8ed;width:100%;min-width:0;max-width:100%;min-height:44px;font:inherit;background:#11170f;border:1px solid #899775;border-radius:10px;padding:10px 12px}.project-panel input[type=file]{font-size:.8rem}.project-panel input::file-selector-button{color:#15210b;min-height:44px;font:inherit;background:#c3f16c;border:0;border-radius:6px;margin-right:10px;padding:8px}.project-actions{flex-wrap:wrap;gap:8px;margin:14px 0 22px;display:flex}.project-panel button:not(.character){white-space:normal;max-width:100%;min-height:44px;padding:10px 14px;font-size:.83rem}.project-panel :focus-visible{outline-offset:4px;outline:3px solid #c5f770}.project-panel progress{accent-color:#c5f770;width:100%;height:12px;margin:20px 0;display:block}.project-panel [hidden]{display:none!important}#project-status,#project-storage-warning{overflow-wrap:anywhere;background:#11170f;border-radius:10px;padding:12px 14px;font-size:.85rem}#project-status[role=alert],#project-storage-warning{color:#ffe2b9;border:1px solid #ecb974}#project-filename{overflow-wrap:anywhere;font-size:.82rem}@media (width<=680px){.project-panel{border-radius:18px;padding:18px 14px}.project-grid{grid-template-columns:minmax(0,1fr);gap:22px}.project-audio{border-top:1px solid #454c38;padding-top:24px}.project-actions{gap:8px}.project-panel button:not(.character){flex:125px}}