:root{font-family:Inter,Arial,sans-serif;color:#282335;background:#eae5f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,select:focus-visible,.upload:focus-within{outline:3px solid #9a66f1;outline-offset:3px}#studio{height:100svh;min-height:700px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 44% 35%,#faf7ff,#e4deed 70%)}#stage{position:absolute;width:100%;height:100%;touch-action:none}header{position:absolute;top:32px;left:40px;right:40px;display:flex;align-items:center;gap:18px;pointer-events:none}.brand{font:bold 35px Georgia;color:#292236;text-decoration:none;pointer-events:auto}.brand span{color:#9b71de}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#84778e}h1{font-size:17px;margin:5px 0}.pill{margin-left:auto;border:1px solid #cec5d6;border-radius:30px;padding:10px 14px;font-size:9px;letter-spacing:1.5px;background:#ffffff66}.pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#72a88c;margin-right:7px}.intro{position:absolute;top:155px;left:42px;pointer-events:none}.intro p{font:40px/1.12 Georgia,serif;letter-spacing:-1px;margin:15px 0}.intro small{font-size:11px;color:#95899d}.panel{position:absolute;right:35px;top:120px;width:290px;border:1px solid #fff9;background:#fbf9fdde;backdrop-filter:blur(14px);border-radius:22px;padding:23px;box-shadow:0 20px 70px #35224b0d}.paneltitle{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:24px}.panel label{display:block;font-size:9px;letter-spacing:1.6px;font-weight:bold;margin-bottom:12px;color:#8e7a9f}select{width:100%;border:1px solid #e1d9e8;background:#fff;border-radius:9px;padding:11px;color:#40334d;font-size:12px}audio{width:100%;height:34px;margin:12px 0}label.upload{cursor:pointer;background:#ede6f5;padding:12px;border-radius:10px;color:#65477e;letter-spacing:0;font-size:11px;margin-bottom:8px}.upload span{display:block;font-size:9px;color:#9a83aa;font-weight:400;margin-top:5px}#audioStatus{font-size:10px;line-height:1.5;color:#9b8da5;display:block}.divider{height:1px;background:#e9e2ef;margin:19px 0}.modes{display:flex;padding:3px;background:#ece6f1;border-radius:10px;gap:2px}.modes button{flex:1;padding:10px 0;border-radius:8px;font-size:11px;color:#82748e;background:transparent}.modes button.active{color:#fff;background:#5a3e72;box-shadow:0 2px 7px #51346b22}.hint{font-size:10px;color:#93849e;line-height:1.6;min-height:32px}.toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;padding:5px 0;font-size:12px;color:#54465f}.switch{width:29px;height:17px;background:#a48bb7;border-radius:10px;padding:3px}.switch:after{content:'';display:block;width:11px;height:11px;border-radius:50%;background:white;float:right}.toggle[aria-pressed=false] .switch{background:#d6cddd}.toggle[aria-pressed=false] .switch:after{float:left}.actions{display:flex;justify-content:space-between;margin-top:15px}.actions button{font-size:9px;text-decoration:underline;text-underline-offset:3px;color:#9d8ba9;background:none;padding:0}.expressions{display:flex;align-items:center;justify-content:space-between}.expressions button{background:#eee7f4;color:#655176;width:32px;height:32px;border-radius:50%}.expressions div{text-align:center}.expressions strong{font-size:13px;display:block;font-weight:500}.expressions small{font-size:9px;display:block;color:#ac9cb7;margin-top:5px}footer{position:absolute;bottom:27px;left:42px;right:35px;display:flex;justify-content:space-between;align-items:center}footer span{font-size:10px;color:#9b8da5;letter-spacing:.4px}footer button{font-size:10px;background:#ffffff88;border:1px solid #fff;border-radius:20px;padding:9px 13px;color:#796889;margin-left:5px}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:15px;flex-direction:column;background:#eae5f3ec;z-index:4}#loading small{color:#9b8da5;font-size:12px}.spinner{width:30px;height:30px;border:2px solid #cfc1dd;border-top-color:#604179;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:absolute;left:40%;bottom:90px;transform:translateX(-50%);background:#49325deb;color:#fff;font-size:12px;padding:12px 20px;border-radius:30px;opacity:0;transition:opacity .2s;pointer-events:none}@media(max-width:1000px){.intro{display:none}.panel{width:260px;right:20px;padding:18px}header{left:22px;right:22px}footer{left:22px;right:20px}}@media(max-width:650px){#studio{min-height:980px;height:auto}#stage{height:580px}.panel{top:570px;left:16px;right:16px;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}.paneltitle,.divider{display:none}.panel label{margin:0}.panel audio{margin:0}.panel .upload{margin:0}.panel .hint{margin:0}.panel .expressions{grid-column:1/-1}.actions{margin:0}header{top:20px}.pill{font-size:8px}footer{bottom:16px}.intro{display:none}#toast{left:50%;bottom:420px}}

.physics-panel{position:absolute;left:40px;bottom:88px;width:260px;background:#faf7fde6;border:1px solid #fff;border-radius:18px;padding:16px;backdrop-filter:blur(12px)}#ragdoll{width:100%;background:#5a3e72;color:white;border-radius:10px;padding:12px;font-size:12px}#ragdoll[aria-pressed=true]{background:#a16b43}.physics-panel p{font-size:11px;line-height:1.6;color:#83708f}.physics-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.physics-buttons button{padding:10px 6px;background:#e9e0f0;color:#5a3e72;border-radius:8px;font-size:10px}#cannon{background:#32263e;color:white;grid-column:1/-1}.auto-rise{display:flex;align-items:center;gap:6px;font-size:10px;margin:14px 0;color:#786586}#bodyState{color:#a16b43;font-size:11px}.arena-mode .intro{display:none}.arena-mode .panel{opacity:.93}.arena-mode #stage{cursor:grab}.arena-mode #stage:active{cursor:grabbing}@media(max-width:1000px){.physics-panel{left:20px;width:210px}}@media(max-width:650px){.physics-panel{left:16px;top:470px;bottom:auto;width:calc(100% - 32px);z-index:2}.arena-mode #studio{min-height:1250px}.arena-mode .panel{top:800px}.physics-panel p{margin:8px 0}.physics-panel .auto-rise{margin:8px 0}.arena-mode #stage{height:500px}}

.modes button:disabled{opacity:.35;cursor:default}footer button:disabled{opacity:.4;cursor:default}

/* The playground keeps the portrait studio available, but gives play the whole stage. */
.arcade-mode #studio{height:100svh;min-height:680px;background:radial-gradient(ellipse at 50% 30%,#faf3ff 0%,#e1d9ee 60%,#c7b8dc 100%)}
.arcade-mode header,.arcade-mode .intro,.arcade-mode .panel,.arcade-mode .physics-panel{display:none}
.arcade-mode #stage{height:calc(100% - 290px);top:52px;width:100%;cursor:crosshair}
.arcade-mode footer{bottom:9px;left:26px;right:26px;z-index:8}.arcade-mode #framing{display:none}.arcade-mode footer span{font-size:8px}.arcade-mode footer button{padding:6px 12px;font-size:9px}
#arcade{position:absolute;inset:0;pointer-events:none;color:#33233f}#arcade[hidden]{display:none}#arcade button{pointer-events:auto}#arcade button:focus-visible{outline:3px solid #9961da;outline-offset:2px}
.arcade-heading{position:absolute;left:32px;right:32px;top:24px;display:flex;align-items:center;justify-content:space-between}.arcade-kicker{font-size:9px;font-weight:800;letter-spacing:3px;color:#977aaa}.arcade-heading h2{font:29px/1.2 Georgia,serif;margin:7px 0;letter-spacing:-.8px}.arcade-heading h2 em{font-weight:normal;color:#9171a8}.arcade-heading button{padding:10px 15px;background:#ffffff91;border:1px solid #fff;border-radius:20px;font-size:10px;color:#735e85}
.scoreboard{position:absolute;left:32px;top:116px;display:flex;flex-direction:column;gap:10px;font-size:9px;letter-spacing:1.2px}.scoreboard b{display:block;font-size:31px;letter-spacing:-1px;color:#61467b;margin-top:4px;font-variant-numeric:tabular-nums}#comboBadge{color:#d05c86;font-weight:800;letter-spacing:1px}#discoveryCount{color:#9b88ad}
.arena-tools{position:absolute;right:30px;top:120px;display:flex;flex-direction:column;gap:8px}.arena-tools button{background:#fff9;color:#796187;padding:11px 15px;border:1px solid #fff;border-radius:12px;font-size:11px;text-align:left;transition:transform .15s,background .15s}.arena-tools button:hover{transform:translateX(-3px);background:white}.arena-tools button[aria-pressed=true]{background:#63417d;color:white;border-color:#63417d}
.toybox{pointer-events:auto;position:absolute;bottom:43px;left:26px;right:26px;max-width:1120px;margin:auto;padding:15px 19px 12px;background:#fffdf5e8;border:1px solid #fff;border-radius:24px;box-shadow:0 16px 70px #4a235529;backdrop-filter:blur(18px)}.toybox-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}#toyFilters{display:flex;gap:5px}#toyFilters button{padding:7px 13px;border-radius:20px;background:transparent;color:#95819e;font-size:10px;font-weight:600}#toyFilters button.active{background:#ece1f1;color:#61417a}#toyCount{font-size:9px;letter-spacing:1px;color:#a494ac}
#toyGrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}#toyGrid button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;background:#f3edf5;border:1px solid transparent;border-radius:12px;padding:9px 3px 8px;font-size:9px;font-weight:600;color:#766080;transition:transform .15s,background .15s,box-shadow .15s}#toyGrid button[hidden]{display:none}#toyGrid button:hover{background:#ece0f1;transform:translateY(-3px)}#toyGrid button.selected{background:#493256;color:#fff;box-shadow:0 6px 15px #62467733;border-color:var(--toy-color)}.toy-icon{font-size:23px;line-height:1.2;filter:drop-shadow(0 2px 2px #0001)}#toyGrid button i{position:absolute;width:4px;height:4px;background:transparent;right:7px;top:7px;border-radius:50%}#toyGrid button.tried i{background:#8acbac}
.toy-action{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px}.toy-action strong{display:block;font:16px Georgia,serif;color:#503759}.toy-action small{font-size:10px;color:#9b86a2;display:block;margin-top:4px}#useToy{background:#583768;color:#fff;border-radius:12px;padding:12px 26px;font-size:11px;font-weight:800;letter-spacing:1px;box-shadow:0 4px 0 #35213e;transition:transform .1s}#useToy:active{transform:translateY(3px);box-shadow:0 1px 0 #35213e}#useToy:disabled{opacity:.35;cursor:default}#useToy span{font-size:8px;font-weight:400;opacity:.55;margin-left:15px}.toy-help{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #e9e1ed;font-size:8px;color:#aa99b0;letter-spacing:.2px}
#impactWord{position:absolute;top:24%;left:50%;transform:translate(-50%,-50%) rotate(-7deg);font:900 42px Arial,sans-serif;letter-spacing:-2px;opacity:0;text-shadow:0 3px #fff,2px 0 #fff,-2px 0 #fff,0 -2px #fff,0 6px 18px #6e488833;white-space:nowrap}#impactWord.pop{animation:impactPop 1s both}@keyframes impactPop{0%{opacity:0;scale:.4}13%{opacity:1;scale:1.2}25%{scale:1}70%{opacity:1;translate:0 -8px}100%{opacity:0;translate:0 -32px;scale:.9}}
#reactionCaption{position:absolute;left:50%;top:61%;transform:translateX(-50%) translateY(8px);max-width:500px;text-align:center;background:#493356e8;color:#fff;font:italic 15px Georgia,serif;border:1px solid #fff6;box-shadow:0 8px 28px #47304c25;padding:12px 21px;border-radius:16px;opacity:0;transition:opacity .2s,transform .2s}#reactionCaption.visible{opacity:1;transform:translateX(-50%) translateY(0)}.arcade-mode #toast{bottom:360px;left:50%;z-index:5}
@media(max-width:900px){#toyGrid{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}#toyGrid button{font-size:8px}.toy-icon{font-size:20px}.arena-tools{right:20px;top:115px}.arena-tools button{font-size:10px;padding:9px}.arcade-heading{left:20px;right:20px}.scoreboard{left:22px}.toybox{left:14px;right:14px;padding:12px}.toy-help span{display:none}}
@media(max-width:650px){.arcade-mode #studio{height:100svh;min-height:750px}.arcade-mode #stage{height:calc(100% - 325px);top:55px}.arcade-heading{top:15px}.arcade-heading h2{font-size:22px}.arcade-heading button{font-size:9px;padding:8px}.arcade-kicker{font-size:8px;letter-spacing:2px}.scoreboard{top:103px;font-size:8px;gap:5px}.scoreboard b{font-size:23px}.arena-tools{right:15px;top:102px;gap:5px}.arena-tools button{padding:8px 9px;font-size:9px}.toybox{bottom:42px;padding:11px;border-radius:18px}#toyGrid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:154px;overflow:auto;scrollbar-width:thin;padding:2px}#toyGrid button{padding:7px 2px;font-size:8px}.toy-icon{font-size:21px}#toyFilters{gap:0}#toyFilters button{font-size:9px;padding:7px 9px}#toyCount{display:none}.toy-action strong{font-size:14px}.toy-action small{font-size:9px;max-width:210px;line-height:1.5}#useToy{font-size:10px;padding:13px 17px}#useToy span{display:none}.toy-help{font-size:7px;line-height:1.5;margin-top:8px;padding-top:8px}.arcade-mode footer{left:15px;right:15px}.arcade-mode footer span{max-width:170px;font-size:7px}#reactionCaption{top:48%;font-size:12px;width:70%;padding:9px 12px}#impactWord{font-size:28px;top:25%}.arcade-mode #toast{bottom:360px;width:80%;text-align:center;font-size:11px}}
@media(prefers-reduced-motion:reduce){#impactWord.pop{animation:none;opacity:0}.toy-icon{filter:none}*{scroll-behavior:auto!important}}
.character-picker{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:30;width:210px;padding:8px 12px;background:#fffef2;border:1px solid #ded4e8;border-radius:14px;box-shadow:0 4px 20px #30203b12}.character-picker label{display:block;font-size:9px;letter-spacing:1.4px;margin-bottom:4px;color:#695775}.character-picker select{width:100%;padding:7px;font-size:12px}@media(max-width:700px){.character-picker{top:70px;left:16px;transform:none;width:190px}}

#eyeInspector{position:fixed;z-index:45;left:24px;bottom:24px;width:275px;padding:20px;border-radius:18px;background:#fffef8;box-shadow:0 8px 32px #30203b28;color:#302b39}#eyeInspector[hidden]{display:none}#eyeInspector p{font-size:12px;line-height:1.5}#eyeInspector label{display:block;font-size:12px;margin:12px 0 6px}#eyeInspector input{width:100%;accent-color:#67507f}#eyeInspector button{margin:6px 4px 0 0;padding:10px;border-radius:8px;background:#e8e0ef;color:#40314d}#eyeInspector output{float:right}

.personalized-scene .character-picker,.personalized-scene footer a,.personalized-scene .upload,.personalized-scene #upload{display:none!important}.personalized-scene .brand{pointer-events:none}

.personalized-scene .brand{pointer-events:auto}.personalized-scene .puppet-back{position:fixed;right:24px;bottom:18px;z-index:30;background:#fff;border:1px solid #ded7e8;border-radius:20px;padding:10px 16px;color:#503865;font:12px sans-serif}