*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}:root{--font-heading: "Space Grotesk", sans-serif;--font-body: "Space Grotesk", sans-serif;--bg-obsidian: #050505;--bg-card: #0f0f0f;--bg-input: #1a1a1a;--accent-neon: #38bdf8;--text-main: #ffffff;--text-dim: #a1a1aa;--border-subtle: rgba(255, 255, 255, .08);--nav-width: 80px;--drawer-width: 400px}*{box-sizing:border-box}body{margin:0;background-color:var(--bg-obsidian);color:var(--text-main);font-family:var(--font-body);overflow:hidden}.studio-container{display:flex;height:100vh;width:100vw}.studio-nav{width:var(--nav-width);background:var(--bg-card);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:2rem 0;gap:.5rem;z-index:100;transition:width .4s cubic-bezier(.16,1,.3,1);overflow:hidden;white-space:nowrap}.studio-nav:hover{width:260px}.nav-item{width:100%;height:64px;display:flex;align-items:center;padding:0 20px;gap:1.5rem;cursor:pointer;color:var(--text-dim)}.nav-item.active svg{color:var(--accent-neon);background:#38bdf81a;border-radius:12px}.nav-item svg{width:40px;height:40px;padding:8px;flex-shrink:0}.nav-item span{font-weight:700;opacity:0;transition:opacity .3s}.studio-nav:hover .nav-item span{opacity:1}.studio-workbench{flex:1;display:flex;flex-direction:row;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 50%,#111,#050505)}.qr-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.brand-badge{position:absolute;top:2rem;left:2rem;display:flex;align-items:center;gap:1rem}.brand-badge h1{font-family:var(--font-heading);font-size:1.25rem;margin:0;font-weight:700}.qr-pedestal{background:#fff;padding:2.5rem;border-radius:3rem;box-shadow:0 50px 100px -20px #000c,0 0 30px #ffffff0d,0 0 0 1px #ffffff1a;min-width:min-content;position:relative}.qr-pedestal:after{content:"";position:absolute;inset:-2px;border-radius:3.1rem;padding:2px;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent,rgba(255,255,255,.1));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.reset-container{z-index:20}.version-badge{font-size:.65rem;font-weight:800;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;opacity:.5}.studio-drawer{width:var(--drawer-width);background:var(--bg-card);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:2rem;overflow-y:auto;z-index:50}.drawer-header{margin-bottom:2rem}.drawer-header h2{font-size:1.5rem;margin:0;font-family:var(--font-heading)}.drawer-header p{color:var(--text-dim);margin:.5rem 0}.panel-section{margin-bottom:2rem;display:flex;flex-direction:column;gap:1rem}.label-group{font-size:.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase}.studio-input{width:100%;background:var(--bg-input);border:1px solid var(--border-subtle);padding:1rem;border-radius:12px;color:#fff}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.studio-option{background:var(--bg-input);border:1px solid var(--border-subtle);padding:1rem;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all .2s;color:#fff;font-weight:600;text-align:center}.studio-option.active{border-color:var(--accent-neon);background:#38bdf81a}.template-card{padding:1.25rem!important}.template-qr-container{padding:6px;border-radius:8px;margin-bottom:.5rem;background:#fff}.color-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border-subtle)}.color-swatch{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;background:none}.logo-studio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.logo-studio-item{aspect-ratio:1;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;padding:6px}.logo-studio-item.active{border-color:var(--accent-neon)}.logo-studio-item img{width:100%;height:100%;object-fit:contain}.logo-color-mode-bw img{filter:brightness(0)}.cta-frame{display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap}.style-pill{border-radius:999px!important}.style-tech{clip-path:polygon(12% 0,100% 0,100% 70%,88% 100%,0 100%,0 30%)}.style-ribbon{clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%)}.style-banner{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}.style-chat{border-radius:16px 16px 16px 0!important}.style-brutal{border-radius:0!important}.style-glass{border-radius:12px!important}.mobile-nav{display:none}@media(max-width:1024px){body{overflow:hidden}.studio-container{flex-direction:column;height:100vh}.desktop-only{display:none}.studio-workbench{flex-direction:column;flex:1;height:100%;overflow:hidden}.qr-stage{height:380px;min-height:380px;flex:none;padding:6rem 1rem 2.5rem}.qr-pedestal{transform:scale(.7)}.reset-container{position:absolute!important;top:1rem;right:1rem;margin-top:0!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:.25rem!important;z-index:20}.version-badge{font-size:.5rem!important;text-align:right}.reset-container .btn-premium{padding:.5rem .75rem!important;font-size:.6rem!important}.reset-container .btn-premium svg{width:14px;height:14px}.mobile-nav{display:flex;justify-content:space-around;background:var(--bg-card);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:.5rem;flex-shrink:0}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;flex:1;color:var(--text-dim);font-size:.5rem;font-weight:700}.mobile-nav-item.active{color:var(--accent-neon)}.mobile-nav-item svg{width:20px;height:20px;margin-bottom:2px}.studio-drawer{width:100%;flex:1;overflow-y:auto;border-left:none;background:var(--bg-obsidian);padding-bottom:2rem}.option-grid{grid-template-columns:repeat(3,1fr)}.brand-badge{top:1rem;left:1rem}.brand-badge h1{font-size:1rem}}@media(max-width:480px){.option-grid{grid-template-columns:repeat(2,1fr)}}.font-tab-header{width:100%;padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-bottom:1px solid var(--border-subtle)}.font-tab-header.active span{color:var(--accent-neon)}.export-stack{display:flex;flex-direction:column;gap:1rem}.btn-premium{padding:1rem;border-radius:12px;font-weight:700;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:.75rem}.btn-primary{background:var(--accent-neon);color:#000}.btn-ghost{background:transparent;color:var(--text-main);border:1px solid var(--border-subtle)}