*{box-sizing:border-box}body.ringPage{margin:0;background:#20373b url('../classic/assets/ui/studio-scene.webp') center/cover fixed;color:#fff0cf;font-family:var(--studioFont,BloomKai,serif)}.ringPage:before{content:'';position:fixed;inset:0;background:#112b3277;pointer-events:none}.ringStudio{position:relative;width:min(100%,520px);min-height:100dvh;margin:auto;padding-bottom:max(25px,env(safe-area-inset-bottom));background:linear-gradient(#102b3bc9,#18374444 44%,#5b351c33),url('../classic/assets/ui/studio-scene.webp') center top/cover;box-shadow:0 0 70px #0a181c99}button,a,select,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ffe0a3;outline-offset:3px}header{display:flex;align-items:center;gap:7px;padding:14px 13px 8px}.brand{display:flex;align-items:center;gap:7px;min-width:0;flex:1;text-decoration:none;color:#ffe8bd;font-size:23px;letter-spacing:2px;white-space:nowrap;text-shadow:0 2px 3px #172c32}html[lang=en] .brand{font-family:BloomScript,cursive;font-size:27px;letter-spacing:0}.brand .mark{font-family:BloomKai,serif;letter-spacing:0}.homeLink,.smallBtn{min-height:35px;display:grid;place-items:center;padding:5px 9px;font:12px var(--studioFont);border:1px solid #bb985f;border-radius:7px;background:#193a46;color:#ffe8bd;text-decoration:none}.homeLink{background:#f2dfb6;color:#4f3821;border-radius:18px}.gearBtn{width:36px;height:36px;flex:none;border:0;border-radius:50%;background:transparent;color:#eac788;font:28px Georgia;padding:0;filter:drop-shadow(0 2px 2px #13252b)}main{padding:0 12px;text-align:center}.ribbon{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;color:#edd6ad;font-size:12px;text-shadow:0 1px 3px #302116}.modeBtn{background:#214d55;border:1px solid #ba965b;border-radius:14px;padding:5px 12px;color:#ffe7b4;font-size:12px;min-height:31px}h1{font:24px/1.35 var(--studioFont);font-weight:400;margin:6px 0 8px;text-shadow:0 2px 3px #251d17}.hud{display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-size:11px;color:#f2dfb9;min-height:25px}#timer{font:22px Georgia;font-variant-numeric:tabular-nums;color:#ffe4a4;text-shadow:0 2px #302012}#timer.urgent{color:#ffac8d}.hoop{position:relative;width:100%;aspect-ratio:1;margin:8px auto 0;border-radius:50%;background:radial-gradient(circle,transparent 63%,#432715 63.5%,#a77a43 65%,#f3d79a 66%,#825c31 68%,#382310 69%,transparent 70%);filter:drop-shadow(0 9px 7px #1d100c99)}.hoop:before{content:'';position:absolute;inset:5.1%;border-radius:50%;border:2px solid #d3ad6c;box-shadow:0 0 0 4px #63421e,inset 0 0 0 3px #48301d;pointer-events:none;z-index:2}#wheel{display:block;width:100%;height:100%;border-radius:50%;touch-action:none;cursor:grab}#wheel:active{cursor:grabbing}.loading{position:absolute;inset:6%;display:grid;place-items:center;border-radius:50%;background:#173d47;color:#f6dab0;font-size:14px}.loading[hidden]{display:none}.hoop.is-complete{animation:ringBloom 2.4s ease both}.ringControls{display:flex;gap:9px;justify-content:center;margin:9px 0 3px}.ringControls button{width:35px;height:35px;min-height:35px;border:1px solid #bb965f;border-radius:50%;background:#193b44;color:#e1ca9d;font:13px Georgia;box-shadow:0 3px 0 #132c32}.ringControls button.selected{background:#d7b16e;color:#493019;border-color:#f4d79c;box-shadow:0 3px 0 #75502a,0 0 0 3px #e5c17c22}.ringControls button.locked{color:#fae4ac;background:#254b40;opacity:1}.turnControls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 5px 8px}.turnControls p{font-size:12px;line-height:1.5;min-height:36px;display:grid;align-items:center;margin:0;color:#efdcba;text-shadow:0 1px 2px #27190e}.turnControls button{width:42px;height:42px;min-height:42px;border:1px solid #b18d55;background:#183942;border-radius:50%;font:25px Georgia;color:#f6d89a;box-shadow:0 3px 0 #112a31;flex:none}.tools{display:flex;justify-content:space-around;gap:5px;margin-top:10px}.tools button{display:flex;flex-direction:column;align-items:center;gap:1px;width:23%;min-height:65px;padding:0;border:0;background:none;color:#f5deb5;font-size:11px;text-shadow:0 2px 2px #2f2118}.toolArt{display:block;width:57px;height:42px;background:url('../classic/assets/ui/studio-props.webp') 0 0/300% 300% no-repeat;filter:drop-shadow(0 3px 2px #25160faa)}.previewArt{background-position:0 0}.patternsArt{background-position:100% 50%}.restartArt{background-position:50% 100%}.soundArt{background-position:0 50%}.tools .muted{opacity:.48}.progressText{font-size:11px;color:#ddc394;margin:10px 0 5px}.progressRail{width:65%;height:3px;background:#193c3f;border-radius:3px;margin:auto;overflow:hidden}.progressRail i{display:block;height:100%;background:#d9b577}.result{margin:12px auto 5px;color:#ffe2a4}.result h2{font:27px Georgia,var(--studioFont);font-weight:400;margin:0 0 8px}.result p{font-size:12px;margin:0 0 10px}.paintButton{display:block;margin:auto;min-height:55px;min-width:180px;border:0;background:url('../classic/assets/ui/studio-button.webp') center/100% 100% no-repeat;color:#ffecc3;font:18px var(--studioFont);padding:10px 25px 16px}.textButton{background:transparent;border:0;color:#efdbb5;padding:12px;font:12px var(--studioFont)}.ringDialog{width:min(430px,92vw);max-height:90dvh;overflow:auto;padding:30px 25px 24px;color:#ffe9c0;background:linear-gradient(145deg,#23444b,#122f37);border:3px solid #a78048;border-radius:10px;font-family:var(--studioFont)}.ringDialog::backdrop,#patternDialog::backdrop{background:#0a232cc7;backdrop-filter:blur(4px)}.ringDialog h2{font-size:24px;line-height:1.35;font-weight:400;text-align:center;margin:10px 15px 25px}.ringDialog p{font-size:12px;line-height:1.8;color:#d8c4a0}.dialogClose{position:absolute;right:8px;top:7px;width:34px;height:34px;border-radius:50%;background:#173740;border:1px solid #bd995f;color:#f3dba6;font:25px Georgia}.settingRow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:15px 0;font-size:14px}.settingRow select{min-width:150px;max-width:62%;padding:8px 27px 8px 10px;background:#173741;color:#ffe9c0;border:1px solid #a88750;border-radius:6px;font:13px var(--studioFont)}.settingRow button{background:#cfa767;border:1px solid #eed398;border-radius:14px;padding:6px 18px;color:#402b19;font-size:13px}.settingRow input{max-width:60%;accent-color:#d6b573}.smallNote{font-size:11px!important}.previewDialog img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:5px solid #bd985e}.previewDialog h2{font-size:20px}.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@keyframes ringBloom{40%{filter:drop-shadow(0 0 22px #ffe0a38c) brightness(1.08)}}@media(max-width:380px){header{gap:4px;padding-left:9px;padding-right:9px}.brand{font-size:20px}html[lang=en] .brand{font-size:25px}main{padding:0 8px}h1{font-size:21px}.ringControls{gap:6px}.turnControls p{font-size:11px}}@media(prefers-reduced-motion:reduce){.hoop.is-complete{animation:none}}

.gearArt{display:block;width:45px;height:36px;margin-left:-5px;background:url('../classic/assets/ui/studio-props.webp') 50% 50%/300% 300% no-repeat}

.ringControls button.linked{background:#315258;color:#ffedc0;border-color:#edc982}.ringControls button.selected{box-shadow:0 3px 0 #75502a,0 0 0 3px #e5c17c44}