@import url('/static/steam-mockup/motiva_sans.css');
@font-face{font-family:'Vela Sans';src:url('/static/steam-mockup/fonts/VelaSans-Medium.ttf') format('truetype');font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:'Consolas';src:url('/static/steam-mockup/fonts/consolas.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}

.workspace-heading{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
#showcaseBuilder [hidden],#tab-projects [hidden]{display:none!important}
.workspace-switch{display:flex;align-items:center;border:1px solid rgba(80,210,255,.28);background:#07121b;padding:3px;box-shadow:8px 8px 0 rgba(28,83,141,.18)}
.workspace-switch[hidden]{display:none!important}
.workspace-switch button{border:0;background:transparent;color:#6f8293;padding:10px 14px;font:800 10px/1 Mulish,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.workspace-switch button:hover{color:#dff8ff;background:rgba(82,213,255,.07)}
.workspace-switch button.active{color:#041019;background:#52d5ff}

.builder-shell{display:grid;grid-template-columns:minmax(240px,290px) minmax(420px,1fr) minmax(220px,270px);gap:14px;align-items:start}
.builder-shell>.card{margin:0;min-width:0}
.builder-tools,.builder-layers{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:thin;scrollbar-color:#25657b transparent}
.builder-panel-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.13em;font-size:10px;color:#eaf9ff}
.builder-panel-title:before{content:"";width:18px;height:2px;background:#52d5ff}
.builder-panel-title span{color:#52d5ff;font:800 9px/1 monospace}
.builder-add-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.builder-add-grid button{min-height:68px;border:1px solid #213746;background:#07111a;color:#8598aa;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:10px 12px;cursor:pointer;font:700 11px Mulish,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.builder-add-grid button:hover,.builder-add-grid button:focus-visible{border-color:#52d5ff;color:#e9faff;background:#0b202c;outline:0}
.builder-add-grid b{font:900 20px/1 monospace;color:#52d5ff}
.builder-source{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #203441}
.builder-source p,.builder-stage-help,.builder-retention span,.builder-projects-head p{font-size:11px;line-height:1.55;color:#718596;margin:0}
.builder-catalog{margin-top:14px;border-top:1px solid #203441;padding-top:12px}
.builder-catalog-head{display:grid;grid-template-columns:1fr 34px;gap:6px}.builder-catalog-head input{min-width:0}.builder-catalog-head button{border:1px solid #29404e;background:#07111a;color:#9eb4c2;cursor:pointer}
.builder-catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:270px;overflow:auto;margin:8px 0}
.builder-catalog-grid button{position:relative;border:1px solid #203847;background:#02080d;padding:0;aspect-ratio:1.55;overflow:hidden;cursor:pointer}.builder-catalog-grid img,.builder-catalog-grid video{width:100%;height:100%;object-fit:cover}.builder-catalog-grid button:hover{border-color:#52d5ff}

.builder-inspector{margin-top:16px;padding-top:16px;border-top:1px solid #203441;display:grid;gap:11px}
.builder-inspector label{display:grid;gap:6px;color:#748898;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.builder-inspector input,.builder-inspector select,.builder-inspector textarea,.builder-actions input,.builder-catalog-head input{border:1px solid #213a49;background:#030b11;color:#eafaff;padding:10px 11px;font:600 12px Mulish,sans-serif;border-radius:0;outline:0}
.builder-inspector input:focus,.builder-inspector select:focus,.builder-inspector textarea:focus,.builder-actions input:focus,.builder-catalog-head input:focus{border-color:#52d5ff;box-shadow:0 0 0 1px rgba(82,213,255,.24)}
.builder-inspector input[type=color]{height:38px;padding:3px;width:100%}.builder-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.builder-text-controls,.builder-effect-controls,.builder-frame-controls,.builder-media-controls{display:grid;gap:10px}
.builder-inspector select optgroup{color:#52d5ff;background:#07141c;font:800 10px Consolas,monospace}.builder-inspector select option{color:#eafaff;background:#030b11;font:600 12px Mulish,sans-serif}
.builder-font-preview{min-width:0;border:1px solid #203a49;background:linear-gradient(90deg,rgba(82,213,255,.07),transparent),#050d13;padding:9px 11px;overflow:hidden}.builder-font-preview>span{display:block;margin-bottom:5px;color:#627b8a;font:800 8px Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}.builder-font-preview>strong{display:block;min-width:0;color:#eafaff;font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-effect-swatch{height:82px;border:1px solid #203a49;background-color:#02070b;background-position:center;background-size:cover;position:relative;overflow:hidden}
.builder-effect-swatch:after{content:"LIVE VFX";position:absolute;right:7px;bottom:6px;padding:3px 5px;background:rgba(2,8,13,.78);color:#52d5ff;font:800 8px/1 Consolas,monospace;letter-spacing:.12em}
.builder-effect-swatch[data-effect="petals"]{background-image:url('/static/assets/builder/effects/petals.png')}.builder-effect-swatch[data-effect="snow"]{background-image:url('/static/assets/builder/effects/snow.png')}.builder-effect-swatch[data-effect="rain"]{background-image:url('/static/assets/builder/effects/rain.png')}.builder-effect-swatch[data-effect="lightning"]{background-image:url('/static/assets/builder/effects/lightning.png')}
.builder-effect-swatch[data-effect="particle"],.builder-effect-swatch[data-effect="stars"],.builder-effect-swatch[data-effect="matrix"],.builder-effect-swatch[data-effect="streaks"],.builder-effect-swatch[data-effect="sparks"]{background-image:radial-gradient(circle at 24% 32%,#dffaff 0 2px,transparent 3px),radial-gradient(circle at 62% 68%,#52d5ff 0 3px,transparent 4px),linear-gradient(135deg,transparent 42%,rgba(82,213,255,.75) 43% 44%,transparent 45%)}
.builder-effect-swatch[data-effect="custom"]{background-image:repeating-linear-gradient(135deg,rgba(82,213,255,.08) 0 12px,transparent 12px 24px)}
.builder-toggle{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important;cursor:pointer}.builder-toggle input{position:absolute;opacity:0;pointer-events:none}.builder-toggle i{width:35px;height:19px;background:#152b35;border:1px solid #34505e;position:relative;transition:.2s}.builder-toggle i:after{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;background:#75909d;transition:.2s}.builder-toggle input:checked+i{background:#16485a;border-color:#52d5ff}.builder-toggle input:checked+i:after{left:18px;background:#52d5ff;box-shadow:0 0 10px rgba(82,213,255,.65)}
.builder-chroma-settings{display:grid;gap:10px;padding:11px;border-left:2px solid #52d5ff;background:linear-gradient(90deg,rgba(82,213,255,.08),rgba(82,213,255,.015))}.builder-chroma-settings label>span{display:flex;align-items:center;justify-content:space-between;gap:10px}.builder-chroma-settings label b{font:inherit;color:#8499a8}.builder-chroma-settings output{min-width:34px;color:#52d5ff;font:800 10px Consolas,monospace;text-align:right}.builder-chroma-settings input[type=range]{width:100%}
.builder-ai-cut{width:100%;display:flex;align-items:center;justify-content:center;gap:7px}.builder-ai-cut span{color:#52d5ff}.builder-ai-cut b{font:inherit}

.builder-stage{padding:14px}.builder-stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.builder-mode-switch{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #213744;min-width:0;flex:1}.builder-mode-switch button{border:0;border-right:1px solid #213744;background:#07111a;color:#728696;padding:9px 8px;display:flex;align-items:center;justify-content:center;gap:7px;font:800 10px Mulish,sans-serif;text-transform:uppercase;cursor:pointer}.builder-mode-switch button:last-child{border-right:0}.builder-mode-switch button.active{background:#e5f7fb;color:#07111a}.builder-mode-switch .mode-diagram{width:35px;height:18px;margin:0;transform:scale(.7)}
.builder-live{font:800 9px monospace;color:#52d5ff;letter-spacing:.12em}.builder-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#31e6ff;box-shadow:0 0 10px #31e6ff;margin-right:6px;animation:builderPulse 1.8s infinite}@keyframes builderPulse{50%{opacity:.35}}
.builder-canvas-wrap{position:relative;background:#010508;display:flex;align-items:center;justify-content:center;min-height:560px;overflow:hidden;border:1px solid #243946;background-image:linear-gradient(rgba(52,107,133,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(52,107,133,.08) 1px,transparent 1px);background-size:32px 32px}
#builderCanvas{display:block;max-height:70vh;max-width:100%;width:auto;height:auto;box-shadow:0 16px 60px rgba(0,0,0,.55);touch-action:none;cursor:default}
.builder-guides{position:absolute;inset:0;pointer-events:none}.builder-guides i{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.7);filter:drop-shadow(0 0 3px #001)}
.builder-stage-help{text-align:center;margin-top:9px}.builder-actions{display:grid;grid-template-columns:minmax(120px,1fr) auto auto;gap:8px;margin-top:12px}.builder-actions .btn{white-space:nowrap}

.builder-layer-list{display:grid;gap:6px}.builder-layer{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;border:1px solid #203542;background:#07121a;padding:8px;cursor:pointer}.builder-layer.is-selected{border-color:#52d5ff;background:#0b202b}.builder-layer__icon{height:28px;display:grid;place-items:center;background:#0c2430;color:#52d5ff;font:900 12px monospace}.builder-layer__copy{min-width:0}.builder-layer__copy b{display:block;color:#cfe2ea;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.builder-layer__copy span{font:700 8px monospace;color:#617887;text-transform:uppercase}.builder-layer__actions{display:flex}.builder-layer__actions button{width:24px;height:26px;border:0;background:transparent;color:#758b99;cursor:pointer;padding:0}.builder-layer__actions button:hover{color:#52d5ff}.builder-empty-layers{border:1px dashed #294452;color:#66808f;padding:20px 12px;text-align:center;font-size:11px;line-height:1.55}.builder-retention{margin-top:18px;border-left:2px solid #52d5ff;padding:9px 11px;background:#081721;display:grid;gap:4px}.builder-retention b{font-size:10px;color:#dff8ff;text-transform:uppercase;letter-spacing:.08em}

.builder-projects-page{min-height:430px}.builder-projects-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid #20333e}.builder-projects-head>div>span{font:800 9px monospace;color:#52d5ff;letter-spacing:.14em}.builder-projects-head h2{font-size:36px;margin:7px 0 4px;text-transform:uppercase}.builder-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.builder-project-card{border:1px solid #213844;background:#07121a;padding:14px;display:grid;gap:10px}.builder-project-card__preview{height:110px;background:linear-gradient(135deg,#0b2634,#071019 55%,#153759);display:flex;align-items:center;justify-content:center;color:#52d5ff;font:900 12px monospace;text-transform:uppercase}.builder-project-card h3{font-size:15px;margin:0;color:#e6f7fb}.builder-project-card p{font-size:10px;color:#708796;margin:0}.builder-project-card__actions{display:flex;gap:6px}.builder-project-card__actions button{flex:1}

@media(max-width:1150px){.builder-shell{grid-template-columns:minmax(230px,280px) 1fr}.builder-layers{grid-column:1/-1;position:static;max-height:none}.builder-layer-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.workspace-heading{gap:14px}.workspace-switch{width:100%;overflow:auto}.workspace-switch button{flex:1;padding:9px 10px}.builder-shell{display:flex;flex-direction:column}.builder-tools,.builder-layers{position:static;max-height:none;width:100%}.builder-stage{order:-1;width:100%}.builder-canvas-wrap{min-height:360px}.builder-actions{grid-template-columns:1fr 1fr}.builder-actions input{grid-column:1/-1}.builder-layer-list,.builder-project-grid{grid-template-columns:1fr}.builder-stage-head{align-items:stretch;flex-direction:column}.builder-mode-switch button{font-size:8px}.builder-live{align-self:flex-end}.builder-projects-head{flex-direction:column}.builder-projects-head h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.builder-live i{animation:none}}

/* Editor finishing controls */
.builder-inspector.is-locked{position:relative;opacity:.62}.builder-inspector.is-locked:after{content:"◆";position:absolute;right:2px;top:16px;color:#52d5ff;font-size:11px}
.builder-templates{margin-top:13px;border-top:1px solid #203441;padding-top:12px}.builder-templates>summary{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border:1px solid #294351;background:#07151d;color:#dff8ff;cursor:pointer;list-style:none;font:800 10px/1.2 Mulish,sans-serif;text-transform:uppercase;letter-spacing:.08em}.builder-templates>summary::-webkit-details-marker{display:none}.builder-templates>summary i:before{content:"+";color:#52d5ff;font:900 16px Consolas,monospace}.builder-templates[open]>summary i:before{content:"−"}.builder-templates>p{margin:9px 1px;color:#6f8492;font-size:10px;line-height:1.45}.builder-template-grid{display:grid;gap:6px}.builder-template-grid button{display:grid;gap:3px;padding:10px 11px;border:1px solid #243d49;background:linear-gradient(90deg,rgba(82,213,255,.06),transparent),#061018;color:#dff8ff;text-align:left;cursor:pointer}.builder-template-grid button:hover,.builder-template-grid button:focus-visible{border-color:#52d5ff;outline:0}.builder-template-grid b{font:800 10px/1.2 Mulish,sans-serif;text-transform:uppercase}.builder-template-grid span{color:#6f8795;font:500 9px/1.35 Mulish,sans-serif}
.builder-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-3px 0 10px;padding:8px 10px;border:1px solid #203744;background:#07121a}.builder-snap-toggle{font-size:9px!important}.builder-backdrops{display:flex;align-items:center;gap:5px}.builder-backdrops>span{margin-right:4px;color:#6f8592;font:800 8px/1 Consolas,monospace;text-transform:uppercase;letter-spacing:.08em}.builder-backdrops button{display:grid;place-items:center;width:27px;height:25px;padding:0;border:1px solid #2a4654;background:#061018;color:#7e96a2;cursor:pointer}.builder-backdrops button:hover,.builder-backdrops button.active{border-color:#52d5ff;color:#52d5ff;background:#0c2733}.builder-shortcuts{margin:5px 0 0;color:#607887;font:600 8px/1.45 Consolas,monospace;text-align:center;text-transform:uppercase;letter-spacing:.05em}
.builder-snap-guides{position:absolute;inset:0;pointer-events:none}.builder-snap-guides i,.builder-snap-guides b{display:none;position:absolute;background:#52d5ff;box-shadow:0 0 8px rgba(82,213,255,.65)}.builder-snap-guides i{top:0;bottom:0;left:50%;width:1px}.builder-snap-guides b{left:0;right:0;top:50%;height:1px}.builder-snap-guides.show-x i,.builder-snap-guides.show-y b{display:block}
.builder-layer__actions button{width:21px}.builder-layer.is-locked{border-style:dashed}.builder-layer.is-locked .builder-layer__icon{color:#7f95a0}
@media(max-width:760px){.builder-canvas-toolbar{align-items:flex-start;flex-direction:column}.builder-backdrops{width:100%;justify-content:flex-end}}