@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#172c36;--muted:#7c8688;--line:#e1e5e2;--blue:#003e87;--paper:#f5f5f0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e7a900;outline-offset:3px}button{border:1px solid var(--line);background:white;border-radius:9px;min-height:42px;padding:9px 13px}header{height:94px;margin:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink);font-size:15px;letter-spacing:1.4px}.brand b{font-weight:400}.brand small{display:block;font-size:9px;color:var(--muted);letter-spacing:3px;margin-top:5px}.brandmark{font:italic 800 47px 'Barlow Condensed',sans-serif;color:var(--blue);text-shadow:2px 1px #ffb900}.header-actions{display:flex;gap:10px;align-items:center}.header-actions>span{font-size:11px;color:var(--muted);margin-right:14px}.primary{background:var(--blue);border-color:var(--blue);color:white;font-weight:600}main{display:grid;grid-template-columns:minmax(0,1fr) 370px;max-width:1540px;margin:auto;padding:42px 4% 130px;gap:42px}.workspace-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#76817f;margin:0 0 9px}h1{font:700 clamp(30px,3.1vw,48px)/1 'Barlow Condensed',sans-serif;margin:0;text-transform:uppercase;letter-spacing:-.5px}.version{font-size:9px;letter-spacing:1px;color:var(--muted);padding-bottom:3px}.stage{position:relative;aspect-ratio:1.16;background:#fff;border:1px solid #e1e5e2;border-radius:15px;overflow:hidden;display:grid;place-items:center;background-image:radial-gradient(#a2aaa925 .8px,transparent .8px);background-size:18px 18px;transition:background-color .25s}.stage.dark{background-color:#101e32}.stage.blue{background-color:#003e87}.stage.dark,.stage.blue{color:#bdc7d4}.stage-meta,.stage-footer{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;color:#8a9395;z-index:1}.stage-meta{top:23px}.stage-footer{bottom:23px}.backgrounds{display:flex;gap:8px}.backgrounds button{border-radius:50%;width:19px;height:19px;min-height:0;padding:0;background:#fff;border:3px solid #fff;box-shadow:0 0 0 1px #cbd0d2}.backgrounds button[data-bg=dark]{background:#101e32}.backgrounds button[data-bg=blue]{background:#003e87}.backgrounds .selected{box-shadow:0 0 0 2px #b5bfbd}.art{width:84%;aspect-ratio:1;position:relative}.art svg{width:100%;height:100%;overflow:visible}.art [data-group]{cursor:pointer}.art [data-group]:hover{filter:drop-shadow(0 0 6px #e6b22955)}.below-stage{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin-top:15px}.below-stage button{border:0;background:transparent;font-size:11px;padding-right:0}.below-stage i{display:inline-block;background:#6b8c6f;width:6px;height:6px;border-radius:50%;margin-right:7px}aside{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px 25px 18px;align-self:start}.panel-top{padding-bottom:22px;border-bottom:1px solid var(--line)}h2{font:700 29px 'Barlow Condensed',sans-serif;margin:0 0 7px}.panel-top>p:last-child{font-size:12px;color:var(--muted);margin:0}.group-tabs{display:flex;background:#f3f5f3;border-radius:9px;padding:4px;margin-top:22px;gap:3px}.group-tabs button{border:0;flex:1;background:transparent;font-size:11px;min-height:35px;padding:8px 3px}.group-tabs button.active{background:white;box-shadow:0 2px 5px #18332512;color:var(--blue);font-weight:700}.section-label{display:flex;gap:10px;color:#9aa3a0;font-size:9px;letter-spacing:1.3px;margin:24px 0 13px}.section-label span{color:#56655f}.layer{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:9px;margin:7px 0;padding:9px 11px;min-height:49px}.layer.selected{border-color:#003e8750;background:#f6f9fd}.layer-name{border:0;background:transparent;padding:0;min-height:26px;font-size:12px;text-align:left}.color-control{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--muted)}input[type=color]{appearance:none;border:0;background:transparent;padding:0;width:26px;height:26px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #0002;border-radius:6px}.palette{display:flex;align-items:center;gap:8px;margin-top:14px}.palette>span{font-size:10px;color:var(--muted);margin-right:auto}.palette button{min-height:0;height:23px;width:23px;border-radius:50%;padding:0;background:var(--swatch);border:1px solid #0002}.position-controls{display:flex;gap:27px;align-items:center}.dpad{display:grid;grid-template-columns:repeat(3,37px);gap:4px}.dpad button{min-height:34px;padding:4px;background:#f8f9f7}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:last-child{grid-column:2}.coordinates{flex:1;display:grid;gap:9px}.coordinates label{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.coordinates input{width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;padding:8px;color:var(--ink)}.slider-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:11px;margin-top:21px}.slider-label output{color:var(--muted)}input[type=range]{width:100%;accent-color:var(--blue);height:4px;margin:0;cursor:pointer}.hint{font-size:10px;line-height:1.7;color:var(--muted);margin:22px 0}.panel-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;font-size:8px;letter-spacing:1px;color:#94a09c}.mode-pill{position:fixed;z-index:10;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:5px;border:1px solid #fff9;padding:7px;background:#eef0e8db;box-shadow:0 8px 35px #192f3a20,0 1px 3px #192f3a10;backdrop-filter:blur(18px);border-radius:40px}.mode-pill button{position:relative;z-index:1;background:none;border:0;border-radius:28px;display:flex;align-items:center;justify-content:center;gap:9px;width:132px;height:47px;color:#78837f;transition:color .3s}.mode-pill button.active{color:var(--blue);font-weight:700}.mode-pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.pill-highlight{position:absolute;left:7px;top:7px;width:132px;height:47px;background:#fff;border-radius:28px;box-shadow:0 2px 7px #192f3a10;transition:transform .35s cubic-bezier(.22,1,.36,1)}.mode-pill.animate .pill-highlight{transform:translateX(137px)}.preset{width:100%;text-align:left;display:flex;gap:13px;align-items:center;margin:10px 0;padding:15px}.preset.active{border-color:var(--blue);background:#f4f8fd}.preset-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:8px;background:#eef1f3;font-size:23px;color:var(--blue)}.preset strong{display:block;font-size:13px}.preset small{display:block;color:var(--muted);font-size:10px;line-height:1.6;margin-top:4px}.play{width:100%;margin-top:12px}.loop-label{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:25px;accent-color:var(--blue)}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#172c36;color:#fff;padding:12px 20px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:12}#toast.visible{opacity:1}.flash{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse,#ffb90066,transparent 65%);opacity:0}.stage.playing .flash{animation:flare var(--duration,3s) both}@keyframes flare{0%,35%,100%{opacity:0}45%{opacity:.8}60%{opacity:0}}@media(min-width:1450px){main{gap:65px;grid-template-columns:minmax(0,1fr) 390px}.stage{max-height:760px}}@media(max-width:950px){main{gap:22px;grid-template-columns:minmax(0,1fr) 325px;padding:30px 3% 130px}aside{padding:22px 18px}.version{display:none}.stage{aspect-ratio:.9}.header-actions>span{display:none}}@media(max-width:700px){header{height:76px;margin:0 5%}.brand{font-size:11px;gap:8px}.brandmark{font-size:38px}.brand small{font-size:7px;letter-spacing:2px}.header-actions button{padding:9px 11px;font-size:11px}.header-actions #undo span{display:none}main{display:block;padding:25px 5% 125px}.workspace-heading{margin-bottom:18px}h1{font-size:35px}.eyebrow{font-size:8px}.stage{aspect-ratio:1.08;border-radius:12px}.stage-meta,.stage-footer{left:16px;right:16px;font-size:7px;letter-spacing:.8px}.stage-meta{top:16px}.stage-footer{bottom:16px}.art{width:84%}.below-stage{font-size:10px;margin-top:8px}aside{margin-top:20px;padding:22px}.panel-top{padding-bottom:18px}.mode-pill{bottom:calc(16px + env(safe-area-inset-bottom))}.hint{margin-bottom:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.stage.playing .flash{animation:none}}

/* Compact studio layout after removing introductory copy. */
header{height:76px;justify-content:flex-end}main{padding-top:28px}.group-tabs{margin-top:0}
@media(max-width:700px){header{height:64px}main{padding-top:18px}}