:root{color:var(--studio-text, #f5f3eb);background:var(--studio-surface, #171923);font-family:var(--studio-font, ui-sans-serif, system-ui, sans-serif);font-synthesis:none}*{box-sizing:border-box}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{border:0;border-radius:10px;cursor:pointer;min-height:44px;min-width:44px}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:var(--studio-focus-width, 3px) solid var(--studio-focus, #f7c65b)!important;outline-offset:var(--studio-focus-offset, 3px)!important}button:disabled{cursor:not-allowed;opacity:.45}.studio-shell{min-height:100vh;background:radial-gradient(circle at top,#303752 0,var(--studio-surface, #171923) 48rem);padding:1.25rem}.topbar,.workspace{max-width:1560px;margin:0 auto}.topbar{align-items:center;display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0 1.25rem}.tool-panel h2,.layer-panel h2{margin:0}.project-title{color:#f5f3eb;display:grid;font-size:.75rem;font-weight:800;gap:.25rem;letter-spacing:.08em;text-transform:uppercase}.project-title input{background:transparent;border:0;border-bottom:2px solid #7785b6;color:#f5f3eb;font-size:clamp(1.3rem,2.5vw,2rem);font-weight:800;letter-spacing:normal;max-width:26rem;padding:.1rem 0;text-transform:none;width:100%}.topbar-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}.eyebrow{color:#b8c5ff;font-size:.75rem;font-weight:800;letter-spacing:.08em;margin:0 0 .25rem;text-transform:uppercase}.save-status{background:#25304c;border:1px solid #425079;border-radius:999px;color:#dce3ff;font-weight:700;padding:.55rem .8rem}.storage-warning{background:#4b3520;border:1px solid #f7c65b;border-radius:12px;margin:0 auto 1rem;max-width:1560px;padding:1rem}.storage-warning p{margin:0 0 .75rem}.storage-warning button{background:#f7c65b;color:#27202f;padding:.65rem .8rem}.workspace{display:grid;gap:var(--studio-gap, 1rem);grid-template-columns:minmax(10rem,14rem) minmax(0,1fr) minmax(13rem,18rem);min-width:0}.tool-panel,.layer-panel{background:var(--studio-panel, #222633);border:1px solid #42495f;border-radius:var(--studio-radius, 18px);padding:var(--studio-gap, 1rem)}.tool-panel label{display:flex;justify-content:space-between;margin-top:1.25rem}.tool-panel input[type=range]{accent-color:#f7c65b;margin:.75rem 0;width:100%}fieldset{border:0;margin:1rem 0;padding:0}legend{font-weight:700;margin-bottom:.5rem}.palette{display:flex;flex-wrap:wrap;gap:.55rem}.custom-color{align-items:center;display:flex!important;gap:.5rem;margin-top:.8rem}.custom-color input{height:2rem;padding:0;width:2.5rem}.color-swatch{border:3px solid transparent;box-shadow:inset 0 0 0 1px #fff5;height:2rem;width:2rem}.color-swatch[aria-pressed=true]{border-color:#f7c65b}.history-actions{display:grid;gap:.5rem}.history-actions button,.panel-heading button{background:#dce3ff;color:#1c2232;font-weight:800;padding:.65rem .75rem}.achievement{background:#2d4b42;border-radius:12px;color:#d5f6c2;margin:1rem 0 0;padding:.75rem}.canvas-frame{background:#0f1119;border-radius:18px;min-width:0;padding:.75rem}.drawing-canvas{background:#fffdf9;border-radius:10px;display:block;height:auto;touch-action:none;width:100%}.shape-panel{border-top:1px solid #42495f;margin-top:1rem;padding-top:1rem}.shape-panel label{display:grid;gap:.4rem;margin-top:.6rem}.shape-geometry{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.shape-panel input,.shape-panel select{background:#171923;border:1px solid #7785b6;border-radius:8px;color:#f5f3eb;min-height:44px;min-width:0;padding:.4rem;width:100%}.shape-panel button{background:#dce3ff;color:#1c2232;margin-top:.75rem;padding:.5rem;width:100%}.panel-heading{align-items:center;display:flex;justify-content:space-between;gap:.5rem}.layer-panel ol{list-style:none;margin:1rem 0;padding:0}.layer-panel li{align-items:center;display:grid;grid-template-columns:minmax(0,1fr) repeat(4,auto);gap:.35rem;margin-top:.4rem}.layer-panel li button{background:#31394d;color:#f5f3eb;padding:.55rem;text-align:left}.layer-panel li button:first-child,.project-list strong{overflow-wrap:anywhere}.layer-panel li input{background:#171923;border:2px solid #f7c65b;border-radius:8px;color:#f5f3eb;min-width:0;padding:.4rem;width:100%}.layer-panel li button:not(:first-child){min-width:2.1rem;text-align:center}.layer-panel .active-layer button:first-child{background:#596da8}.lesson-card{border-top:1px solid #42495f;margin-top:1rem;padding-top:1rem}.lesson-card p:last-child{color:#d2d6e3;line-height:1.45}.lesson-progress{color:#b8c5ff;font-weight:800;margin:1rem 0 .4rem}.lesson-steps{display:grid;gap:.55rem;list-style:none;margin:0;padding:0}.lesson-steps li{color:#d2d6e3;display:block;line-height:1.35}.lesson-steps li.complete{color:#d5f6c2}.timeline-card{border-top:1px solid #42495f;margin-top:1rem;padding-top:1rem}.timeline-card p{color:#d2d6e3;line-height:1.4}.frame-list{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.75rem 0 0;padding:0}.frame-list button{background:#31394d;color:#f5f3eb;padding:.45rem .55rem}.frame-list button[aria-pressed=true]{background:#596da8}.frame-duration{display:grid;gap:.35rem;margin-top:.8rem}.frame-duration span{color:#b8c5ff;font-weight:800}.frame-duration input{accent-color:#f7c65b;width:100%}.project-gallery{background:#222633;border:1px solid #667399;border-radius:18px;box-shadow:0 1.5rem 4rem #0008;color:#f5f3eb;max-height:90vh;max-width:38rem;overflow-y:auto;padding:1.25rem;width:calc(100% - 2rem)}.project-gallery::backdrop{background:#080a12b8}.gallery-copy{color:var(--studio-muted, #d2d6e3);line-height:1.45}.project-list{display:grid;gap:.6rem;list-style:none;margin:.75rem 0 0;padding:0}.project-list button{background:#31394d;color:#f5f3eb;display:grid;gap:.25rem;padding:.75rem;text-align:left;width:100%}.project-list button[aria-current=page]{background:#596da8}.project-list span{color:#d2d6e3;font-size:.85rem}.project-list button[aria-current=page] span{color:#fffdf9}@media(max-width:980px){.workspace{grid-template-columns:minmax(10rem,14rem) minmax(0,1fr)}.layer-panel{grid-column:1 / -1}}@media(max-width:650px){.studio-shell{padding:.75rem}.topbar{align-items:flex-start;flex-direction:column}.topbar-actions{justify-content:flex-start}.workspace{grid-template-columns:1fr}.tool-panel{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.tool-panel h2,.tool-panel>label{grid-column:1 / -1}.canvas-frame{order:-1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}@media(prefers-reduced-motion:reduce){.studio-shell button{transform:none!important}}