:root{--bg:#101110;--panel:#191a19;--panel-hi:#222322;--line:#343634;--line-soft:#292b29;--ink:#f4f5f2;--muted:#8c908a;--lime:#d0ff55;--radius:16px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}.studio-shell{height:100%;padding:12px;display:grid;grid-template-rows:54px minmax(0,1fr);gap:10px}.studio-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px;background:rgba(27,28,27,.94);border:1px solid var(--line);border-radius:15px;box-shadow:0 10px 30px #0003}.studio-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.09em}.studio-brand i{width:14px;height:14px;border:2px solid var(--lime);transform:rotate(45deg)}.studio-brand span{color:#8f948d;border-left:1px solid var(--line);padding-left:10px;font:700 8px monospace}.studio-topbar nav{display:flex;gap:5px;padding:4px;background:#121312;border:1px solid #2d2f2d;border-radius:12px}.studio-topbar nav a{color:#838782;text-decoration:none;font-size:10px;font-weight:700;padding:8px 11px;border-radius:8px}.studio-topbar nav a:hover,.studio-topbar nav a.active{background:#2b2d2b;color:#fff}.project-actions{display:flex;gap:5px}.project-actions button,.stage-toolbar button,.context-bar button,.quiet-button,.icon-button,.tune-panel button{border:1px solid #3a3d3a;background:#242624;color:#dfe2dc;border-radius:9px;padding:8px 10px;font-size:9px;font-weight:700;cursor:pointer}.project-actions .export{background:#f0f1ee;color:#111;border-color:#f0f1ee;padding-inline:14px}.studio-workspace{min-height:0;display:grid;grid-template-columns:270px minmax(500px,1fr) 286px;gap:10px}.design-drawer{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.drawer-heading{padding:19px 17px 16px;border-bottom:1px solid var(--line-soft)}.drawer-heading>span,.section-label>span,.effects-heading span:first-child,.canvas-caption span,.stage-status{font:700 8px monospace;letter-spacing:.11em;color:#a2a69f}.drawer-heading>span,.effects-heading span:first-child{color:var(--lime)}.drawer-heading h1{font-size:21px;line-height:1.05;margin:9px 0 7px;letter-spacing:-.035em}.drawer-heading p{margin:0;font-size:9px;color:var(--muted)}.drawer-heading p b{color:#d8dbd5}.drawer-scroll{overflow:auto;padding-bottom:30px}.drawer-section{padding:15px;border-bottom:1px solid var(--line-soft);display:grid;gap:10px}.section-label{display:flex;justify-content:space-between;align-items:center}.section-label small{font:700 7px monospace;color:var(--lime)}.icon-button{padding:3px 7px}.category-tabs{display:flex;gap:4px;overflow:auto}.category-tabs button{border:1px solid #343734;background:#111211;color:#858a83;padding:6px 8px;border-radius:8px;font:700 7px monospace;white-space:nowrap;cursor:pointer}.category-tabs button.active{background:#f2f3ef;color:#121312;border-color:#f2f3ef}.template-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:270px;overflow:auto}.template-thumb{height:105px;position:relative;padding:0;border:1px solid #353835;background:#0d0e0d;border-radius:10px;overflow:hidden;color:white;text-align:left;cursor:pointer}.template-thumb canvas{width:100%;height:100%;display:block}.template-thumb:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#080908e8)}.template-thumb div{position:absolute;z-index:2;left:8px;right:8px;bottom:7px}.template-thumb span{font:700 6px monospace;color:var(--lime)}.template-thumb strong{display:block;font-size:9px;margin-top:3px}.template-thumb small{display:block;color:#a6aaa3;font-size:7px;margin-top:2px}.template-thumb.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}.drawer-section label{display:grid;gap:5px;color:#92968f;font-size:8px;font-weight:700}.drawer-section input[type=text],.drawer-section textarea,.drawer-section select{width:100%;background:#111211;border:1px solid #353835;border-radius:8px;color:#eef0eb;padding:9px;font:500 10px Arial;resize:none;outline:none}.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.asset-slot{height:55px;border:1px solid #353835;border-radius:9px;background:#111211;color:#cccfc9;display:grid;place-items:center;gap:3px;cursor:pointer}.asset-slot i{width:23px;height:23px;display:grid;place-items:center;border-radius:6px;background:#282a28;color:var(--lime);font:700 7px monospace;font-style:normal}.asset-slot span{font-size:7px}.asset-slot.has-asset{border-color:var(--lime)}.quiet-button{background:transparent;color:#858a83}.toggle-row{display:flex!important;grid-template-columns:1fr auto!important;align-items:center}.toggle-row input{accent-color:var(--lime)}.studio-stage{min-width:0;min-height:0;position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#0c0d0c}.canvas-viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:80px 60px 115px;background-image:radial-gradient(#272927 1px,transparent 1px);background-size:24px 24px}.canvas-viewport canvas{display:block;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 28px 80px #000c;border-radius:2px}.canvas-viewport.fill canvas{min-width:100%;min-height:100%;object-fit:cover}.canvas-viewport.actual{justify-content:flex-start;align-items:flex-start}.canvas-viewport.actual canvas{max-width:none;max-height:none}.floating-panel{background:rgba(27,28,27,.92);border:1px solid #3b3d3b;box-shadow:0 16px 45px #0007;backdrop-filter:blur(16px)}.stage-toolbar{position:absolute;z-index:5;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;min-width:400px;border-radius:13px;padding:5px}.stage-toolbar>div{display:flex;align-items:center;gap:4px}.stage-toolbar>div:last-child{color:#979b95;font:700 7px monospace;padding-right:7px;gap:9px}.stage-toolbar button{background:transparent;border-color:transparent;padding:7px 9px}.stage-toolbar button.active{background:#303230;color:#fff}.play-dot{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%;margin-right:5px;box-shadow:0 0 8px var(--lime)}.divider{width:1px;height:20px;background:#383a38;margin:0 4px}.canvas-caption{position:absolute;z-index:3;left:16px;bottom:79px;display:flex;gap:16px;align-items:end}.canvas-caption>div:first-child{display:grid;gap:3px;background:#111211c7;border:1px solid #353835;border-radius:9px;padding:8px 10px}.canvas-caption strong{font-size:10px}.template-tags{display:flex;gap:4px}.template-tags span{background:#272927;border:1px solid #3b3e3b;border-radius:20px;padding:6px 8px;color:#c5c8c2;font-size:6px}.context-bar{position:absolute;z-index:6;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:6px;border-radius:14px;max-width:calc(100% - 30px)}.context-bar label{height:39px;min-width:72px;display:grid;align-content:center;gap:3px;padding:4px 8px;border-right:1px solid #383a38;color:#a1a59e;font:700 7px monospace}.context-bar label:nth-child(-n+3){min-width:48px}.context-bar label span{display:flex;justify-content:space-between}.context-bar input[type=color]{width:34px;height:17px;padding:0;border:0;background:transparent}.context-bar input[type=range],.tune-panel input[type=range]{width:80px;accent-color:var(--lime)}.context-bar output,.tune-panel output{color:var(--lime)}.context-bar button{height:38px}.tune-panel{position:absolute;z-index:7;right:14px;bottom:72px;width:210px;padding:12px;border-radius:12px}.tune-panel label{display:grid;gap:5px;margin-bottom:10px;color:#989c96;font:700 8px monospace}.tune-panel label span{display:flex;justify-content:space-between}.tune-panel input[type=range]{width:100%}.tune-panel button{width:100%}.stage-status{position:absolute;left:13px;right:13px;bottom:3px;z-index:2;display:flex;gap:18px;color:#696d67}.stage-status span:nth-child(2){color:var(--lime)}.stage-status span:last-child{margin-left:auto}.effects-drawer{min-height:0;align-self:start;max-height:100%;border-radius:var(--radius);overflow:auto;padding:14px}.effects-heading{display:flex;justify-content:space-between;align-items:start}.effects-heading h2{font-size:17px;margin:6px 0 0}.effects-heading>span:last-child{font:700 8px monospace;color:#8f948d;background:#252725;padding:6px 7px;border-radius:8px}.effects-drawer>p{font-size:9px;line-height:1.45;color:#92968f;margin:10px 0 13px}.active-stack{display:grid;gap:5px;margin-bottom:12px}.stack-empty{padding:11px;border:1px dashed #3a3d3a;border-radius:10px;color:#737872;font-size:8px;text-align:center}.stack-row{height:38px;display:grid;grid-template-columns:26px 1fr 25px 25px;align-items:center;border:1px solid #363936;border-radius:9px;background:#202220;overflow:hidden;cursor:pointer}.stack-row.active{border-color:#747a71}.stack-row .fx-icon{display:grid;place-items:center;font-size:11px}.stack-row strong{font-size:8px}.stack-row button{height:100%;border:0;border-left:1px solid #343634;background:transparent;color:#8d918b;cursor:pointer;font-size:9px}.effect-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:9px 0;border-block:1px solid #303230}.effect-tile{aspect-ratio:1;border:1px solid #3b3e3b;border-radius:9px;background:#111;position:relative;overflow:hidden;padding:0;cursor:pointer;color:#fff}.effect-tile canvas{position:absolute;inset:0;width:100%;height:100%}.effect-tile span{position:absolute;inset:auto 3px 3px;background:#0a0b0acb;border-radius:5px;padding:3px 2px;font:700 5px monospace;text-align:center}.effect-tile:hover{border-color:var(--lime);transform:translateY(-1px)}.effect-editor{padding-top:12px}.effect-editor>p{font-size:8px;color:#777c75;text-align:center;padding:10px}.effect-editor h3{font-size:11px;margin:0 0 10px}.effect-editor label{display:grid;gap:5px;margin-bottom:10px;color:#969a94;font:700 7px monospace}.effect-editor label span{display:flex;justify-content:space-between}.effect-editor input[type=range]{width:100%;accent-color:var(--lime)}.effect-editor input[type=color],.effect-editor select{width:100%;height:29px;background:#141514;border:1px solid #383b38;color:#fff;border-radius:7px}.effect-editor .remove-effect{width:100%;border:1px solid #4b3636;background:#241919;color:#d3a4a4;border-radius:8px;padding:7px;font-size:8px;cursor:pointer}@media(max-width:1180px){.studio-workspace{grid-template-columns:235px minmax(430px,1fr) 255px}.studio-topbar nav{display:none}.context-bar label:nth-of-type(5),.context-bar label:nth-of-type(6){display:none}}@media(max-width:900px){body{overflow:auto}.studio-shell{height:auto;min-height:100%}.studio-workspace{grid-template-columns:1fr}.design-drawer{display:none}.studio-stage{height:78vh}.effects-drawer{max-height:none}.project-actions button:not(.export){display:none}.stage-toolbar{min-width:340px}.context-bar label:nth-of-type(n+4){display:none}}