.design-preview-studio{grid-column:1/-1;width:100%;padding:18px;border:1px solid rgba(246,189,69,.32);border-radius:18px;background:rgba(4,14,30,.42)}
.design-preview-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.design-preview-heading h3{margin:0;font-size:1.45rem}.design-preview-heading p:last-child{margin:7px 0 0;color:var(--muted);line-height:1.5}.design-preview-heading>button{min-height:42px;padding:8px 13px;border:1px solid var(--border);border-radius:10px;color:var(--ink);background:rgba(255,255,255,.05);font-weight:800}
.design-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:17px}.design-preview-card{display:grid;gap:8px;min-height:205px;padding:14px;border:1px solid var(--border);border-radius:15px;color:var(--ink);background:rgba(255,255,255,.035);text-align:left;transition:transform .2s ease,border-color .2s ease,background .2s ease}.design-preview-card:hover{transform:translateY(-3px);border-color:var(--gold)}.design-preview-card.active{border-color:var(--gold);background:rgba(246,189,69,.09);box-shadow:inset 0 0 0 1px rgba(246,189,69,.25)}.design-preview-card strong{font-size:1.05rem}.design-preview-card small{color:var(--muted);line-height:1.45}.design-preview-card em{color:var(--gold);font-style:normal;font-size:.8rem;font-weight:800}.active-design-message{margin:13px 0 0;color:var(--gold-2);font-weight:800}
.design-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:74px;padding:9px;border-radius:10px;background:#071225}.design-mini i{grid-row:1;height:12px;border-radius:4px;background:#f6bd45}.design-mini b{grid-row:2;height:34px;border-radius:5px;background:#0e56b8}.design-mini.show{background:linear-gradient(145deg,#220a45,#07194d);box-shadow:inset 0 0 18px rgba(49,210,255,.25)}.design-mini.show i{background:#35e7ff}.design-mini.show b{background:linear-gradient(145deg,#7040ff,#d42c91)}.design-mini.study{background:#eaf1f8}.design-mini.study i{background:#173f67}.design-mini.study b{background:#fff;border:1px solid #bdd0df}
body,body .app-shell,body .setup-card,body .score-card,body .clue-button,body dialog{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,border-radius .28s ease,color .28s ease}
body[data-design=show]{background:radial-gradient(circle at 50% -10%,rgba(47,213,255,.28),transparent 36rem),radial-gradient(circle at 12% 70%,rgba(221,41,150,.22),transparent 30rem),linear-gradient(145deg,#09051e,#071638 58%,#17092b)}body[data-design=show] .stage-glow{background-image:linear-gradient(rgba(65,218,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(65,218,255,.055) 1px,transparent 1px);mask-image:none}body[data-design=show] .topbar{position:sticky;z-index:20;top:0;padding:10px 0;background:linear-gradient(180deg,rgba(6,10,31,.97),rgba(6,10,31,.72),transparent);backdrop-filter:blur(10px)}body[data-design=show] .setup-card{border:2px solid color-mix(in srgb,var(--gold) 70%,#30dfff);border-radius:32px;box-shadow:0 0 45px rgba(43,198,255,.14),0 35px 100px rgba(0,0,0,.46)}body[data-design=show] .setup-copy h1 em{text-shadow:0 0 32px color-mix(in srgb,var(--gold) 36%,transparent)}body[data-design=show] .score-card{border-radius:18px;background:linear-gradient(145deg,rgba(27,60,115,.72),rgba(17,25,70,.86))}body[data-design=show] .score-card.active{box-shadow:0 0 24px color-mix(in srgb,var(--gold) 24%,transparent),inset 0 0 0 2px var(--gold)}body[data-design=show] .clue-button{border-radius:14px;background:linear-gradient(145deg,#713de1,#164cbf);box-shadow:inset 0 1px rgba(255,255,255,.2),0 9px 24px rgba(17,55,170,.25)}body[data-design=show] .clue-button:hover{background:linear-gradient(145deg,#9954f4,#167de0);transform:translateY(-4px) scale(1.02)}body[data-design=show] dialog{border:2px solid color-mix(in srgb,var(--gold) 42%,#35dbff);box-shadow:0 0 60px rgba(36,193,255,.14),var(--shadow)}
body[data-design=study]{--ink:#17283c;--muted:#52657a;--navy:#eaf1f7;--navy-2:#f6f9fc;--panel:rgba(255,255,255,.97);--gold:#a76216;--gold-2:#74400b;--blue:#245f88;--blue-2:#317da8;--border:rgba(30,66,92,.18);background:linear-gradient(145deg,#e5eef5,#f8fbfd 60%,#eaf3f6)}body[data-design=study] .stage-glow{opacity:.28}body[data-design=study] .app-shell{width:min(1320px,100%)}body[data-design=study] .setup-screen{gap:clamp(28px,5vw,70px)}body[data-design=study] .setup-copy h1{font-size:clamp(3rem,6vw,6rem);letter-spacing:-.045em}body[data-design=study] .setup-card,body[data-design=study] dialog{color:var(--ink);background:rgba(255,255,255,.95);border-radius:14px;box-shadow:0 18px 55px rgba(39,67,88,.12)}body[data-design=study] .mode-switch label>span,body[data-design=study] .format-switch label>span,body[data-design=study] .score-card{background:#fff}body[data-design=study] .clue-button{border:0;border-radius:7px;background:#245f88;color:#fff;text-shadow:none;box-shadow:none}body[data-design=study] .clue-button:hover{background:#17496d;transform:translateY(-1px)}body[data-design=study] .question-fixed-top{background:#fff}body[data-design=study] .learning-card{background:#f5f0e8}body[data-design=study] input,body[data-design=study] select,body[data-design=study] textarea{color:var(--ink)}
@media(max-width:760px){.design-preview-heading{align-items:stretch;flex-direction:column}.design-preview-grid{grid-template-columns:1fr}.design-preview-card{grid-template-columns:110px 1fr;min-height:auto}.design-preview-card .design-mini{grid-row:1/4}.design-preview-card em{grid-column:2}.design-preview-card small{grid-column:2}.design-preview-card strong{align-self:end}.design-preview-studio{padding:14px}body[data-design=show] .topbar{position:relative}}
@media(prefers-reduced-motion:reduce){.design-preview-card,body,body .app-shell,body .setup-card,body .score-card,body .clue-button,body dialog{transition:none!important}}