@font-face{font-family:'Big Shoulders Display';src:url('./vendor/big-shoulders-display-latin.woff2') format('woff2');font-style:normal;font-weight:600 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./vendor/jetbrains-mono-latin.woff2') format('woff2');font-style:normal;font-weight:400 500;font-display:swap}
:root{--studio-accent:#ed8956;--studio-fg:#e8e9ee;--studio-muted:#a9aab3;--studio-panel:#14151d;--studio-line:#ffffff14;--studio-display:'Big Shoulders Display','Arial Narrow',sans-serif;--studio-mono:'JetBrains Mono',monospace;--studio-top:56px}
body{background:#100916;color:var(--studio-fg);-webkit-font-smoothing:antialiased;isolation:isolate}
.reference-night{pointer-events:none;position:fixed;inset:var(--studio-top) 0 0 238px;overflow:hidden;z-index:0}
.reference-night>*{position:absolute}
.reference-sky{inset:0;background:radial-gradient(70% 55% at 85% 0,#783cbe57,transparent 70%),radial-gradient(60% 45% at 10% 10%,#501e8242,transparent 70%),radial-gradient(90% 40% at 50% 112%,#ff6e144d,transparent 70%),linear-gradient(#160b22 0%,#100916 55%,#120a12 100%)}
.reference-moon{top:28px;right:8vw;width:clamp(78px,8.5vw,140px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 62% 38%,#8c7a5c73 0 9%,transparent 10.5%),radial-gradient(circle at 36% 62%,#8c7a5c66 0 7%,transparent 8.5%),radial-gradient(circle at 70% 70%,#8c7a5c52 0 5%,transparent 6.5%),radial-gradient(circle at 42% 30%,#8c7a5c47 0 4%,transparent 5.5%),radial-gradient(circle at 34% 32%,#fffbe9,#efe2bb 52%,#c4b287 86%);box-shadow:0 0 36px 8px #ffeec84d,0 0 140px 60px #9664ff33}
.reference-cloud{width:90%;height:16%;top:22%;left:40%;border-radius:999px;background:#28163caa;filter:blur(12px);opacity:.5;animation:studio-cloud 30s ease-in-out infinite alternate}
.reference-horizon{height:34vh;inset:auto 0 0;background:radial-gradient(70% 100% at 60% 100%,#ff781e4d,transparent 72%)}
.reference-graves{height:clamp(120px,20vh,210px);inset:auto 0 0;background:url('./assets/reference/graveyard.svg') bottom/auto 100% repeat-x}
.reference-fog{height:26vh;inset:auto -10% 0;background:radial-gradient(40% 60% at 20% 100%,#a08cc833,transparent 70%),radial-gradient(45% 55% at 70% 100%,#a08cc82b,transparent 70%),linear-gradient(transparent,#7846a024)}
.reference-pumpkins{bottom:5px;right:24px;display:flex;align-items:flex-end;gap:5px;filter:drop-shadow(0 0 22px #ff781e55)}
.reference-pumpkins img{width:74px;height:auto}.reference-pumpkins img+img{width:50px}
.reference-bat{width:40px;height:19px;top:22px;left:65%;background:#0a0510;clip-path:polygon(0 10%,18% 35%,26% 10%,36% 45%,44% 35%,50% 0,56% 35%,64% 45%,74% 10%,82% 35%,100% 10%,90% 75%,69% 67%,50% 100%,31% 67%,10% 75%);filter:drop-shadow(0 0 3px #aa78ff80);animation:studio-bat 8s ease-in-out infinite alternate}
.reference-bat.second{top:73px;left:86%;width:23px;height:11px;animation-delay:-3s}
.reference-front{pointer-events:none;position:fixed;top:calc(var(--studio-top) - 1px);right:0;left:238px;height:190px;z-index:6}
.reference-drip{position:absolute;inset:0 0 auto;height:24px;background:url('./assets/reference/drip.svg') 0 0/240px 24px repeat-x;filter:drop-shadow(0 3px 4px #0007)}
.reference-web{position:absolute;top:0;right:0;color:#e1d7f542;width:clamp(110px,13vw,190px);height:auto;fill:none;stroke:currentColor;stroke-width:.55;transform:scaleX(-1)}
.reference-web.left{right:auto;left:0;transform:none;width:110px;opacity:.45}
.shell{position:relative;z-index:1;min-height:100vh;background:transparent}
.sidebar{background:#0e0f16f7;border-color:var(--studio-line);backdrop-filter:blur(12px)}
.topbar{height:var(--studio-top);background:#0e0f16f5;border-color:#ffffff14}
.brand{letter-spacing:-.6px}.brand-icon,.orange{color:var(--studio-accent)}
.workspace-switch{background:#1a1b23;border-color:#ffffff14}.workspace-avatar{background:#ed89561f;color:#f0a86d;border-color:#ed895647}
.nav-item{font-size:12px;color:#a9aab3}.nav-item svg{color:#8a8c94}.nav-item.active{color:#f0a86d;background:#ed89561f;border-color:#ed895633}.nav-item.active svg{color:#ed8956}.nav-item:hover{background:#272831}
.nav-label,.eyebrow,.hero-kicker,.card-kicker,.card-tag,.panel-title,.viewport-chip,.format,.editor-statbar,.hero-caption,.format-bar,.pill,footer{font-family:var(--studio-mono)}
.nav-label{letter-spacing:1.3px;color:#8a8c94}.nav-line,.profile{border-color:#ffffff14}.nav-line{background:#ffffff14}
.button{border-radius:6px;font-size:12px;font-weight:650;background:#272831;border-color:#ffffff29;min-height:36px;color:#e8e9ee;padding:10px 15px}.button.primary{color:#16120f;background:var(--studio-accent);border-color:var(--studio-accent);box-shadow:none}.button.primary:hover{background:#f2a077}.button.ghost{background:#272831;border-color:#ffffff29;color:#e8e9ee}.button svg{width:15px;height:15px}
.page-heading h1,.editor-head h1{font-family:var(--studio-display);font-size:40px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.2px}
.page-heading p,.editor-head p{color:#a9aab3;font-size:13px;line-height:1.6;margin-top:9px}
main{padding-top:35px}.page-heading{margin-bottom:26px}.eyebrow{font-size:9px}.eyebrow .line{background:var(--studio-accent)}
.hero{height:535px;min-height:535px;background:transparent;border:0;border-bottom:1px solid #ffffff14;border-radius:0;overflow:hidden;isolation:isolate}
.hero:after{display:none}.hero-copy{padding:29px 8px 35px 0;width:48%;pointer-events:none}.hero-kicker{display:inline-flex;border:1px solid #ed895647;background:#ed895614;padding:7px 10px;font-size:9px;letter-spacing:1.3px;color:#f0a86d}
.hero :is(h1,h2){font-family:var(--studio-display);font-size:clamp(56px,5.6vw,82px);font-weight:900;line-height:.95;letter-spacing:0;margin:17px 0 22px;max-width:520px}.hero :is(h1,h2) .orange{color:var(--studio-accent)}
.hero p{font-size:14px;color:#a9aab3;line-height:1.7;max-width:350px;margin:0 0 24px}.hero-buttons{gap:10px}.hero-buttons .button{min-height:46px;font-size:13px;padding:13px 18px}
.reference-posters{position:absolute;inset:0 0 0 49%;z-index:1;isolation:isolate}.reference-posters:after{content:'';position:absolute;inset:auto -5% 0;height:25%;background:linear-gradient(transparent,#10091655);pointer-events:none;z-index:-1}
.reference-poster{position:absolute;width:27%;height:340px;top:72px;left:0;transform:skew(-7deg);border:3px solid #09070e;outline:1px solid #ffffff22;background:#0a0811;box-shadow:7px 10px 20px #0006;overflow:hidden;transition:transform .25s,box-shadow .25s}
.reference-poster:nth-child(2){left:23%;top:31px;height:350px;z-index:-1}.reference-poster:nth-child(3){left:46%;top:111px;height:348px;z-index:1}.reference-poster:nth-child(4){left:69%;top:57px;height:350px;z-index:2}
.reference-poster:hover{transform:skew(-7deg) translateY(-9px);box-shadow:0 0 0 1px #ed895688,7px 18px 30px #0009}
.reference-poster img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.1) skew(7deg)}
.reference-poster:nth-child(3) img,.reference-poster:nth-child(4) img{object-position:50% 50%;transform:scale(1.15) skew(7deg)}
.reference-poster:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#00000010 0px,#00000010 1px,transparent 1px,transparent 3px);pointer-events:none}
.reference-poster span{position:absolute;inset:auto 0 0;padding:25px 5px 11px;background:linear-gradient(transparent,#08070ee6 45%);font-family:var(--studio-display);font-size:18px;font-weight:800;line-height:1;text-transform:uppercase;text-align:center;color:#fafafa;z-index:2;transform:skew(7deg)}
.reference-poster small{display:block;font-family:var(--studio-mono);font-size:6px;letter-spacing:.7px;font-weight:400;color:#e7a17e;margin-top:5px}
.hero-badge{top:auto;right:0;bottom:20px;font-size:8px;border-color:#ffffff29;color:#b9a8d1;background:#10091688}.hero-caption{display:none}
.format-bar{color:#8a8c94;font-size:8px;margin:17px 0 34px}.format{background:#14151d;border-color:#ffffff14;color:#a9aab3}
.section-title h2{font-family:var(--studio-display);text-transform:uppercase;font-weight:800;font-size:29px;letter-spacing:.3px;line-height:1.1}.section-title h2 small{font-family:Hanken,sans-serif;text-transform:none;font-size:10px}
.tabs{background:#14151d;border-color:#ffffff14;border-radius:6px}.tab{font-size:11px;color:#a9aab3}.tab.active{background:#272831;color:#fafafa}
.tool-card{background:#14151df5;border-color:#ffffff14;border-radius:8px;box-shadow:0 5px 22px #0002}.tool-card:hover{border-color:#ed895673}.tool-art{height:178px;background:#14151d;border-bottom-color:#ffffff14}.tool-art img{object-position:center;transition:transform .3s}.tool-card:hover .tool-art img{transform:scale(1.04)}
.card-kicker{font-size:7px;background:#08070da6;left:9px;top:10px;right:auto;max-width:58%;padding:4px 6px;border-radius:2px;line-height:1.6;color:#e8e9ee;letter-spacing:.6px}.card-tag{font-size:6px;background:#0e0914d9;border-color:#ffffff29;color:#c3b9d2}.card-tag.ai{background:#29173ee6;color:#d3b8ff;border-color:#9d6bff59}
.card-content{padding:18px}.card-content h3{font-family:var(--studio-display);font-size:25px;font-weight:800;text-transform:uppercase;letter-spacing:.2px}.card-content p{font-size:12px;color:#a9aab3;max-width:none;line-height:1.65;min-height:60px}.card-bottom{border-color:#ffffff14}.card-bottom>span{font-size:8px;color:#8a8c94}.card-open{font-size:12px;color:#e8e9ee}.card-open svg{color:#ed8956}
.empty-projects{background:#14151de8;border-color:#ffffff29}.empty-projects h3{font-size:14px}.empty-projects p{font-size:12px;color:#a9aab3}.empty-icon{background:#1a1b23;border-color:#ffffff14;color:#8a8c94}
.info-strip{background:#14151df0;border-color:#ed895633}.info-strip p{font-size:11px;color:#a9aab3}.info-strip b{color:#e8e9ee}
.editor,.photo-panel,.project-card,.texture-panel{background:#14151df5;border-color:#ffffff29}.editor{border-radius:8px;box-shadow:0 15px 60px #0003}.editor-left,.editor-right{background:#14151d;border-color:#ffffff14}.editor-statbar{background:#0e0f16;border-color:#ffffff14;color:#8a8c94}.editor-statbar b{color:#e8e9ee}.part{color:#a9aab3}.part.active{background:#ed89561f;border-color:#ed895647;color:#f0a86d}.part input,.check-label input,.field input[type=range]{accent-color:var(--studio-accent)}
.panel-title{color:#8a8c94;line-height:1.6}.panel-divider{background:#ffffff14}.field{color:#a9aab3;font-size:11px}.field input:not([type=range]):not([type=color]),.field select,.field textarea{background:#0e0f16;border-color:#ffffff29;color:#e8e9ee;font-size:11px}.field output{color:#f0a86d}.file-info{border-color:#ffffff14;color:#8a8c94}.model-drop{background:#1a1b23;border-color:#ffffff29;color:#e8e9ee;font-size:11px}.model-drop small{font-size:9px;color:#8a8c94}.model-drop svg{color:#ed8956}.mini-help{color:#8a8c94;font-size:10px}.viewport-chip{background:#0e0f16cc;border-color:#ffffff29;color:#a9aab3}.viewport-chip.demo{color:#f0a86d;border-color:#ed895647}.viewport-tools{background:#14151de6;border-color:#ffffff29}.viewport-tools .icon-button.active{background:#ed89561f;color:#ed8956}
.fivem-format-notice{background:linear-gradient(110deg,#ed89560e,#9d6bff0a),#14101ce8;border-color:#ed895647}.fivem-format-notice strong{color:#f0a86d;font-size:13px}.fivem-format-notice p{color:#a9aab3;font-size:11px}.notice{background:#14101ce8;border-color:#ed895647;color:#cbb5aa;font-size:11px}.notice b{color:#f0a86d}
.texture-controls h3,.photo-panel h2{font-family:var(--studio-display);font-size:28px;text-transform:uppercase}.texture-controls p{font-size:12px;color:#a9aab3}.photo-upload{background:radial-gradient(at 100% 0,#9d6bff2e,transparent 65%),#0e0914;border-color:#9d6bff59}.photo-panel h2{margin-top:7px}.step-row p{color:#a9aab3;font-size:12px}.status-badge{background:#251735;color:#cdb4ff;border-color:#9d6bff59}.step-number{background:#1a1b23;border-color:#ffffff29;color:#f0a86d}
dialog{background:radial-gradient(at 100% 0,#9d6bff1f,transparent 55%),#14151d;border-color:#ffffff29}dialog h2{font-family:var(--studio-display);font-size:34px;font-weight:800;text-transform:uppercase}dialog p,dialog li{color:#a9aab3}.format-status,.file-check-row{background:#0e0f16;border-color:#ffffff14}.gta-format-list>div{border-color:#ffffff14}.icon-button{background:#1a1b23;border-color:#ffffff29;color:#a9aab3}footer{color:#a9aab3;background:#0e0f16aa;border-color:#ffffff14}
@keyframes studio-cloud{to{transform:translateX(-15%)}}@keyframes studio-bat{to{transform:translate(-60px,14px) rotate(-5deg)}}
@media(min-width:1500px){.hero{height:590px;min-height:590px}.hero-copy{padding-top:35px}.hero :is(h1,h2){font-size:88px}.reference-poster{height:380px;top:85px}.reference-poster:nth-child(2){top:38px;height:390px}.reference-poster:nth-child(3){top:130px;height:385px}.reference-poster:nth-child(4){top:63px;height:395px}.tool-art{height:200px}}
@media(max-width:1150px){.reference-night{left:210px}.reference-front{left:210px}.hero{height:495px;min-height:495px}.hero-copy{width:48%}.hero :is(h1,h2){font-size:62px}.hero p{font-size:12px;max-width:280px}.hero-buttons .button{font-size:11px;padding:11px 12px}.reference-poster{height:300px;top:70px}.reference-poster:nth-child(2){height:310px;top:35px}.reference-poster:nth-child(3){height:310px;top:105px}.reference-poster:nth-child(4){height:310px;top:60px}.reference-poster span{font-size:15px}.card-content h3{font-size:22px}.card-content p{font-size:11px}}
@media(max-width:950px){.reference-night,.reference-front{left:190px}.reference-web.left{display:none}.hero :is(h1,h2){font-size:52px}.hero{height:475px;min-height:475px}.hero-copy{width:50%}.reference-posters{left:48%}.hero-buttons{flex-wrap:wrap}.hero-buttons .button{min-height:37px;font-size:10px}.reference-poster{height:260px;top:94px}.reference-poster:nth-child(2){height:270px;top:55px}.reference-poster:nth-child(3){height:270px;top:130px}.reference-poster:nth-child(4){height:275px;top:85px}.reference-poster span{font-size:13px}.reference-poster small{font-size:5px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-art{height:150px}.page-heading h1,.editor-head h1{font-size:34px}.card-content p{min-height:65px}.reference-pumpkins img{width:56px}.reference-pumpkins img+img{width:39px}}
@media(max-width:740px){.reference-night,.reference-front{left:0}.reference-night{inset-block-start:57px}.reference-front{top:56px}.reference-web{width:100px}.reference-moon{width:78px;top:20px;right:20px}.reference-graves{height:120px}.reference-pumpkins{right:10px}.reference-pumpkins img{width:48px}.reference-pumpkins img+img{width:34px}.topbar{height:57px}.page-heading h1,.editor-head h1{font-size:34px}.page-heading p,.editor-head p{font-size:12px}.hero{height:725px;min-height:725px}.hero-copy{width:100%;padding:20px 0 0}.hero :is(h1,h2){font-size:64px;line-height:.94;max-width:100%;margin:17px 0 18px}.hero p{font-size:13px;max-width:290px;margin-bottom:20px}.hero-buttons{flex-wrap:nowrap}.hero-buttons .button{font-size:12px;min-height:42px;padding:10px 13px}.hero-kicker{font-size:8px}.reference-posters{inset:380px 3% 35px 3%}.reference-poster{height:245px;top:35px;width:27%}.reference-poster:nth-child(2){height:250px;top:5px}.reference-poster:nth-child(3){height:245px;top:65px}.reference-poster:nth-child(4){height:250px;top:25px}.reference-poster span{font-size:15px;padding-bottom:10px}.reference-poster small{font-size:5px}.hero-badge{bottom:8px;right:0;left:auto;font-size:6px}.format-bar{margin:15px 0 26px;font-size:7px}.section-title h2{font-size:26px;max-width:55%}.section-title h2 small{font-size:8px}.tab{font-size:10px;padding:6px}.tool-art{height:130px}.card-content{padding:13px}.card-content h3{font-size:21px;gap:5px}.card-content h3 svg{width:14px;height:14px}.card-content p{font-size:10px;min-height:80px}.card-open{font-size:11px}.card-kicker{display:none}.card-tag{font-size:6px;top:8px;right:8px}.empty-projects p{font-size:11px}.empty-projects h3{font-size:13px}.empty-projects .button{margin-left:0}.fivem-format-notice{padding:14px}.fivem-format-notice strong{font-size:12px}.fivem-format-notice p{font-size:10px}.editor-head{gap:15px}.editor-actions .button{font-size:11px;min-height:36px}.model-drop{font-size:11px}.model-drop small{font-size:8px}.texture-controls p{font-size:11px}.reference-bat{left:50%;top:22px}.reference-bat.second{left:73%;top:90px}}
@media(prefers-reduced-motion:reduce){.reference-cloud,.reference-bat{animation:none}.reference-bat{display:none}.reference-poster,.tool-art img{transition:none}}

.shell:has(.hero) main{padding-top:16px}
@media(max-width:740px){.hero{height:790px;min-height:790px}.hero :is(h1,h2){font-size:54px}.reference-posters{top:420px}}
body{overflow-x:hidden}@media(max-width:740px){.section-title{flex-wrap:wrap;gap:12px}.section-title h2{max-width:100%}.section-title .tabs{flex:none}}
.tool-card[data-tool=ped] .tool-art img{object-position:50% 22%}.tool-card[data-tool=vehicle] .tool-art img,.tool-card[data-tool=optimizer] .tool-art img{object-position:50% 57%}.tool-card[data-tool=prop] .tool-art img,.tool-card[data-tool=photo] .tool-art img{object-position:50% 48%}.tool-card[data-tool=clothing] .tool-art img{object-position:50% 42%}.reference-poster:nth-child(2) img{object-position:50% 58%}
.tool-card[data-tool=ped] .tool-art img{object-position:50% 10%}
