.random-workspace{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start}.random-selector{display:grid;gap:10px;position:sticky;top:100px}.random-selector button{display:flex;align-items:center;gap:12px;width:100%;padding:17px 14px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:15px;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s;font:inherit}.random-selector button:hover{border-color:#8da9ef;box-shadow:0 4px 16px #254fea10}.random-selector button[aria-current=true]{border-color:#254fea;background:color-mix(in srgb,var(--surface) 93%,#254fea);box-shadow:0 4px 18px #254fea12}.random-tool-icon{font-size:26px;color:#254fea;flex:0 0 30px;text-align:center}.random-selector strong{display:block;font-size:16px}.random-selector small{display:block;font-size:14px;line-height:1.45;margin-top:4px;color:var(--muted)}.random-selected-mark{margin-left:auto;color:#254fea;opacity:0;font-size:24px}.random-selector [aria-current=true] .random-selected-mark{opacity:1}.random-page :is(button,input,select,textarea):focus-visible{outline:3px solid #7499fa;outline-offset:4px}.random-panels{min-width:0}.random-panels>[hidden]{display:none!important}.random-panels>[data-random-panel]:not([hidden]){animation:random-panel-in .2s ease-out}.random-panels>[data-random-panel]:focus{outline:none}.random-panels .random-wheel{gap:24px;padding:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.random-panels .random-game{margin:0;min-height:420px}.random-panels :is(input,textarea,select){max-width:100%;min-width:0}.random-panels fieldset{min-width:0}.random-panels .wheel-option{min-width:0}.random-panels .wheel-option input{width:100%;min-width:0}.magic-tool{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:24px;padding:30px;overflow:hidden}.magic-controls{min-width:0}.magic-controls h2{font-size:30px;margin:0 0 12px}.magic-controls p{line-height:1.6;margin:0 0 28px}.magic-controls label{display:block;margin-bottom:8px;font-size:14px}.magic-controls input{width:100%}.magic-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.magic-actions button{cursor:pointer}.magic-actions button:disabled{cursor:wait;opacity:.6}.magic-stage{position:relative;display:grid;place-items:center;min-width:0;padding:30px 8px 40px;isolation:isolate}.magic-stage:after{content:'';position:absolute;bottom:15px;width:70%;height:26px;border-radius:50%;background:radial-gradient(ellipse,#10234e42,transparent 70%);filter:blur(5px);z-index:-1}.magic-ball{position:relative;width:min(100%,350px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 28% 16%,#747c8a 0%,#343c49 12%,#131922 30%,#05070d 57%,#010205 73%,#15243e 92%,#5e85b3 100%);box-shadow:inset 2px 3px 5px #d9eaff80,inset -10px -16px 24px #000c,inset 0 -2px 3px #78aaff80,0 20px 30px #0b21472e;transform-origin:50% 75%;isolation:isolate}.magic-ball:before{content:'';position:absolute;left:18%;top:8%;width:41%;height:17%;border-radius:50%;transform:rotate(-28deg);background:linear-gradient(180deg,#fff8,#fff0);filter:blur(3px)}.magic-ball:after{content:'';position:absolute;inset:5%;border-radius:50%;border-left:1px solid #93bcff55;transform:rotate(-30deg);pointer-events:none}.magic-window{position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle at 48% 40%,#112d66,#040915 76%);border:4px solid #030710;box-shadow:0 1px 2px #b8d8ff50,inset 0 5px 13px #000,0 0 14px #3479db25;display:grid;place-items:center;overflow:visible}.magic-triangle{position:relative;width:116%;height:98%;display:grid;place-items:center;filter:drop-shadow(0 0 6px #4189ff80)}.magic-triangle:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#527cf5,#214ccb 52%,#09235f);clip-path:polygon(50% 2%,99% 89%,1% 89%);box-shadow:inset 0 0 30px #66bcff}.magic-triangle span{position:relative;display:block;text-align:center;color:#f0f6ff;font-size:clamp(14px,1.1vw,16px);font-weight:650;line-height:1.18;width:66%;margin-top:21%;text-wrap:balance;text-shadow:0 1px 3px #02123d;overflow-wrap:normal}.magic-glints{position:absolute;inset:-8%;color:#659dff;font-size:28px;opacity:0;pointer-events:none;text-shadow:210px 65px 0 #72b1ff,-10px 145px 0 #95c7ff}.magic-ball.shaking{animation:magic-shake 1.25s ease-in-out}.shaking .magic-triangle span{opacity:0}.magic-ball.revealed .magic-window{animation:magic-glow .95s ease-out}.revealed .magic-triangle{animation:magic-reveal .8s ease-out}.revealed .magic-glints{animation:magic-spark .95s ease-out}@keyframes random-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes magic-shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-10px) rotate(-8deg)}30%{transform:translateX(12px) rotate(8deg)}45%{transform:translateX(-9px) rotate(-6deg)}60%{transform:translateX(10px) rotate(6deg)}75%{transform:translateX(-5px) rotate(-3deg)}}@keyframes magic-glow{25%{box-shadow:0 0 28px #548fff99,inset 0 5px 13px #000}100%{box-shadow:0 0 14px #3479db25,inset 0 5px 13px #000}}@keyframes magic-reveal{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes magic-spark{0%,100%{opacity:0}35%{opacity:.8}}
@media(max-width:1100px){.random-workspace{grid-template-columns:250px minmax(0,1fr);gap:20px}.magic-tool{grid-template-columns:1fr}.magic-stage{width:min(100%,370px);justify-self:center}.random-panels .random-wheel{grid-template-columns:1fr}.random-panels .wheel-stage{grid-row:auto}.magic-triangle span{font-size:16px}}
@media(max-width:760px){.random-workspace{display:block}.random-selector{position:static;display:flex;overflow-x:auto;gap:10px;padding:4px 4px 14px;margin:0 -4px 12px;scroll-snap-type:x proximity}.random-selector button{flex:0 0 195px;scroll-snap-align:start;padding:12px}.random-selector small{font-size:14px}.random-tool-icon{font-size:23px;flex-basis:25px}.random-selected-mark{display:none}.magic-tool{padding:22px 18px;gap:8px}.magic-controls h2{font-size:27px}.magic-controls p{margin-bottom:20px}.magic-stage{width:min(100%,340px);padding:26px 12px 35px}.magic-triangle span{font-size:14px}.random-panels .random-wheel{padding:20px}.magic-actions .button{flex:1}.random-panels .random-game{min-height:350px}}
@media(prefers-reduced-motion:reduce){.random-panels>[data-random-panel]:not([hidden]),.magic-ball.shaking,.revealed .magic-glints{animation:none}.revealed .magic-triangle{animation:magic-reveal .12s linear}.revealed .magic-window{animation:none}.random-selector button{transition:none}}