:root{--bg:#08080b;--panel:#101014;--panel-2:#15151a;--line:#ffffff1f;--muted:#898995;--ink:#f6f4f8;--accent:#a970ff;--accent-rgb:169, 112, 255;--accent-2:#ff4fd8;--black:#050507}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:radial-gradient(circle at 14% 14%, #a970ff12, transparent 24rem), var(--bg);min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}.noise{pointer-events:none;opacity:.22;z-index:20;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");position:fixed;inset:0}.site-header{border-bottom:1px solid var(--line);z-index:10;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#08080be0;grid-template-columns:1fr auto 1fr;align-items:center;height:66px;padding:0 34px;display:grid;position:sticky;top:0}.brand{letter-spacing:-.02em;align-items:center;gap:9px;font-size:13px;font-weight:900;display:flex}.brand>span:last-child>span{color:var(--muted)}.brand-mark{color:#050507;background:var(--accent);clip-path:polygon(17% 0,100% 0,80% 45%,96% 45%,31% 100%,41% 55%,5% 55%);place-items:center;width:25px;height:25px;font-size:0;display:inline-grid}.site-header nav{height:100%;display:flex}.site-header nav a{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;place-items:center;padding:0 18px;font-size:11px;font-weight:800;display:grid;position:relative}.site-header nav a.active,.site-header nav a:hover{color:var(--ink)}.site-header nav a.active:after{content:"";background:var(--accent);height:2px;box-shadow:0 0 14px var(--accent);position:absolute;bottom:0;left:18px;right:18px}.status{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;justify-self:end;align-items:center;gap:8px;font:700 10px/1 monospace;display:flex}.status i{background:#56f58d;border-radius:50%;width:6px;height:6px;box-shadow:0 0 12px #56f58d}main{width:min(1480px,100% - 52px);margin:0 auto}.hero{grid-template-columns:1fr 360px;align-items:end;gap:40px;padding:76px 12px 50px;display:grid}.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;margin:0 0 14px;font:800 10px/1.3 monospace}.eyebrow span{color:var(--accent);margin-right:10px}h1{letter-spacing:-.078em;text-transform:uppercase;margin:0;font-size:clamp(54px,7vw,108px);font-weight:950;line-height:.84}h1 em{color:#0000;-webkit-text-stroke:1.5px var(--accent);text-shadow:0 0 35px rgba(var(--accent-rgb), .15);font-style:normal}.hero-copy{color:#aaa8b0;margin:0 0 5px;font-size:15px;line-height:1.7}.studio{border:1px solid var(--line);background:var(--black);grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr);min-height:700px;display:grid;box-shadow:0 32px 100px #00000059}.stage-panel{border-right:1px solid var(--line);flex-direction:column;min-width:0;display:flex}.panel-bar{border-bottom:1px solid var(--line);height:48px;color:var(--muted);letter-spacing:.1em;justify-content:space-between;align-items:center;padding:0 16px;font:800 10px/1 monospace;display:flex}.live-dot{background:#ff4059;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block;box-shadow:0 0 12px #ff4059}.stage-meta span{color:#3b3b42;margin:0 5px}.stage{background:radial-gradient(ellipse at 50% 46%, rgba(var(--accent-rgb), .16), transparent 43%), linear-gradient(155deg, #111118, #050507 72%);isolation:isolate;flex:1;place-items:center;min-height:520px;display:grid;position:relative;overflow:hidden}.stage-grid{opacity:.22;transform-origin:bottom;background-image:linear-gradient(#ffffff12 1px,#0000 1px),linear-gradient(90deg,#ffffff12 1px,#0000 1px);background-size:54px 54px;position:absolute;inset:0;transform:perspective(600px)rotateX(62deg)scale(1.5)translateY(29%);-webkit-mask-image:radial-gradient(circle,#000,#0000 73%);mask-image:radial-gradient(circle,#000,#0000 73%)}.safe-zone{border:1px dashed #ffffff17;position:absolute;inset:8%}.orb{filter:blur(55px);opacity:.24;border-radius:50%;position:absolute}.orb-one{background:var(--accent);width:240px;height:240px;top:-90px;right:-50px}.orb-two{background:var(--accent-2);width:230px;height:230px;bottom:-120px;left:-60px}.scanline{opacity:.7;background:linear-gradient(#0000 49%,#ffffff06 50%,#0000 51%) 0 0/100% 5px;position:absolute;inset:0}.corner-label{color:#5c5c67;letter-spacing:.14em;font:700 8px/1 monospace;position:absolute}.top-left{top:15px;left:16px}.bottom-right{bottom:15px;right:16px}.overlay-preview{--scale:1;--glow:.7;z-index:2;transform:scale(var(--scale));filter:drop-shadow(0 0 calc(22px * var(--glow)) rgba(var(--accent-rgb), .65));align-items:center;gap:20px;transition:all .25s;display:flex;position:relative}.platform-icon{flex:0 0 94px;width:94px;height:94px}.icon-badge{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));width:100%;height:100%;box-shadow:0 0 24px rgba(var(--accent-rgb), .38);border:max(3px,.07em) solid #050507;border-radius:21%;place-items:center;display:grid}.icon-badge svg{fill:currentColor;width:59%;height:59%;display:block}.icon-youtube{background:linear-gradient(135deg,#ff334b,#ff8c3a)}.icon-kick{color:#071006;background:linear-gradient(135deg,#53fc18,#d8ff3e)}.icon-tiktok{color:#fff;filter:drop-shadow(3px 1px #fe2c55)drop-shadow(-3px -1px #25f4ee);background:#08090b;border-color:#25f4ee}.preview-copy{text-transform:uppercase;white-space:nowrap;align-items:baseline;line-height:.85;display:flex}.preview-domain,.preview-copy strong{letter-spacing:-.065em;font-size:clamp(32px,4vw,62px);font-weight:950}.preview-domain{color:var(--ink)}.preview-domain:after{content:"/";color:var(--accent);margin:0 .04em}.preview-copy strong{color:var(--ink)}.style-edge .preview-copy{filter:drop-shadow(4px 4px #050507)drop-shadow(-2px -2px #050507)}.style-plate{border:1px solid rgba(var(--accent-rgb), .48);box-shadow:inset 0 0 28px rgba(var(--accent-rgb), .08);background:#050507d9;border-radius:22px;padding:16px 24px 16px 16px}.style-minimal .platform-icon{flex-basis:62px;width:62px;height:62px}.style-minimal .preview-domain,.style-minimal .preview-copy strong{letter-spacing:-.035em;font-size:clamp(26px,3vw,46px)}.control-panel{background:var(--panel);min-width:0}.control-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:94px;padding:20px 22px;display:flex}.control-heading .eyebrow{margin-bottom:7px}h2{text-transform:uppercase;letter-spacing:-.045em;margin:0;font-size:25px}.text-button{color:var(--muted);text-transform:uppercase;cursor:pointer;background:0 0;border:0;font:800 10px/1 monospace}.text-button:hover{color:var(--ink)}.control-section{border-bottom:1px solid var(--line)}.section-toggle{cursor:pointer;text-transform:uppercase;letter-spacing:.12em;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;padding:17px 22px;font:800 10px/1 monospace;display:flex}.section-toggle b{color:var(--accent);font-size:15px;font-weight:400}.section-body{padding:0 22px 22px;display:none}.control-section.open .section-body{display:block}.section-body>label:not(.range-label):not(.check-row){color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:13px;font:700 9px/1 monospace;display:block}.section-body input:not([type=range]):not([type=checkbox]){width:100%;color:var(--ink);border:1px solid var(--line);text-transform:uppercase;background:#0a0a0d;outline:none;margin-top:9px;padding:12px 13px;font:800 13px/1 monospace}.section-body input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb), .08)}.platform-grid{grid-template-columns:1fr 1fr;gap:7px;margin-top:4px;display:grid}.platform-button{border:1px solid var(--line);color:var(--muted);cursor:pointer;text-transform:uppercase;background:#0b0b0e;align-items:center;gap:8px;padding:10px;font:800 10px/1 monospace;display:flex}.platform-button .icon-badge{width:23px;height:23px;box-shadow:none;border-width:2px;flex:0 0 23px}.platform-button:hover,.platform-button.selected{color:var(--ink);border-color:rgba(var(--accent-rgb), .7);background:rgba(var(--accent-rgb), .1)}.platform-button.selected .icon-badge{box-shadow:0 0 12px rgba(var(--accent-rgb), .35)}.field-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:13px 0 10px;font:700 9px/1 monospace;display:block}.chip-row{gap:6px;display:flex}.chip{border:1px solid var(--line);color:var(--muted);cursor:pointer;text-transform:uppercase;background:#0b0b0e;flex:1;padding:9px 6px;font:800 9px/1 monospace}.chip:hover,.chip.selected{color:var(--ink);border-color:var(--accent)}.swatch-row{gap:9px;display:flex}.swatch{border:3px solid var(--panel);width:28px;height:28px;box-shadow:0 0 0 1px var(--line);cursor:pointer;border-radius:50%}.swatch.selected{box-shadow:0 0 0 1px var(--ink), 0 0 18px currentColor}.violet{color:#a970ff;background:linear-gradient(135deg,#a970ff,#ff4fd8)}.acid{color:#53fc18;background:linear-gradient(135deg,#53fc18,#d6ff3f)}.blue{color:#23b6ff;background:linear-gradient(135deg,#23b6ff,#5965ff)}.lava{color:#ff3b49;background:linear-gradient(135deg,#ff3b49,#ff9e38)}.range-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;justify-content:space-between;margin:18px 0 7px;font:700 9px/1 monospace;display:flex}.range-label output{color:var(--ink)}input[type=range]{width:100%;accent-color:var(--accent);height:4px}.check-row{cursor:pointer;align-items:center;gap:10px;margin-top:17px!important;display:flex!important}.check-row input{opacity:0;position:absolute}.check-row span{background:#2a2a31;border-radius:20px;width:30px;height:17px;transition:all .2s;position:relative}.check-row span:after{content:"";background:#777781;border-radius:50%;width:11px;height:11px;transition:all .2s;position:absolute;top:3px;left:3px}.check-row input:checked+span{background:rgba(var(--accent-rgb), .35)}.check-row input:checked+span:after{background:var(--accent);box-shadow:0 0 10px var(--accent);transform:translate(13px)}.export-box{border:1px solid rgba(var(--accent-rgb), .35);background:#09090c;gap:14px;margin:20px;padding:15px;display:grid}.export-box>div{flex-direction:column;gap:4px;display:flex}.export-box span{text-transform:uppercase;font:800 11px/1 monospace}.export-box small{color:var(--muted);text-transform:uppercase;font:700 9px/1.3 monospace}.export-button,.pack-button{background:var(--accent);color:#050507;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:0 0 25px rgba(var(--accent-rgb), .18);border:0;padding:14px 16px;font:950 11px/1 monospace}.export-button{justify-content:space-between;width:100%;display:flex}.export-button:hover,.pack-button:hover{filter:brightness(1.14);transform:translateY(-1px)}.pack-section{padding:110px 12px 100px}.pack-heading{justify-content:space-between;align-items:end;margin-bottom:35px;display:flex}.pack-heading h2{letter-spacing:-.065em;font-size:clamp(40px,5vw,72px);line-height:.92}.pack-button{min-width:220px}.export-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}.export-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b0b0e;min-width:0}.card-preview{aspect-ratio:1.45;background:radial-gradient(circle, rgba(var(--card-rgb), .17), transparent 55%), #0e0e13;place-items:center;padding:22px;display:grid;position:relative;overflow:hidden}.card-preview:before{content:"";background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0}.card-mini{align-items:center;gap:8px;display:flex;position:relative;transform:scale(.78)}.card-mini .platform-icon{flex-basis:46px;width:46px;height:46px}.card-mini .icon-badge{box-shadow:0 0 13px rgba(var(--card-rgb), .32)}.card-mini strong{white-space:nowrap;text-shadow:2px 2px #050507;font-size:19px}.card-mini strong i{color:var(--card-accent);font-style:normal}.card-info{justify-content:space-between;align-items:center;padding:14px 15px;display:flex}.card-info div{flex-direction:column;gap:4px;min-width:0;display:flex}.card-info strong{text-transform:uppercase;font:900 10px/1 monospace}.card-info span{color:var(--muted);text-transform:uppercase;font:700 8px/1 monospace}.card-download{border:1px solid var(--line);cursor:pointer;background:0 0;place-items:center;width:31px;height:31px;display:grid}.card-download:hover{border-color:var(--card-accent);color:var(--card-accent)}footer{border-top:1px solid var(--line);min-height:92px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;align-items:center;padding:0 max(34px,50vw - 728px);font:700 9px/1 monospace;display:flex}.toast{z-index:30;background:var(--ink);color:#08080b;opacity:0;pointer-events:none;text-transform:uppercase;padding:12px 16px;font:900 10px/1 monospace;transition:all .25s;position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (width<=1050px){.studio{grid-template-columns:1fr}.stage-panel{border-right:0;border-bottom:1px solid var(--line)}.stage{min-height:500px}.export-grid{grid-template-columns:1fr 1fr}}@media (width<=720px){.site-header{grid-template-columns:1fr auto;padding:0 16px}.site-header nav{display:none}.status{font-size:0}main{width:calc(100% - 24px)}.hero{grid-template-columns:1fr;padding:55px 4px 35px}.hero-copy{max-width:440px}.stage{min-height:420px}.overlay-preview{transform:scale(calc(var(--scale) * .68));gap:9px}.platform-icon{flex-basis:75px;width:75px;height:75px}.pack-heading{gap:28px;display:grid}.export-grid{grid-template-columns:1fr}footer{flex-wrap:wrap;gap:15px;padding:24px 16px}}@media (prefers-reduced-motion:no-preference){.scanline{animation:9s linear infinite scan}.orb-one{animation:8s ease-in-out infinite alternate drift}.live-dot{animation:1.8s ease-in-out infinite pulse}}@keyframes scan{0%{transform:translateY(-8px)}to{transform:translateY(8px)}}@keyframes drift{to{transform:translate(-40px,50px)}}@keyframes pulse{50%{opacity:.35}}
