::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:4rem;width:100%;position:relative}.app-wrapper:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--sui-glass-border),transparent);transform:translate(-50%);pointer-events:none}.editor-panel{max-height:85vh;overflow-y:auto;padding-right:1.5rem}.preview-panel{background:#2a2d3066;border-radius:32px;padding:2rem;display:flex;justify-content:center;align-items:flex-start;overflow:auto;box-shadow:inset 0 0 60px #00000080;max-height:85vh;position:sticky;top:1rem;border:1px solid var(--sui-glass-border)}.a4-paper{background:#fff;width:210mm;min-height:297mm;padding:15mm;color:#1a1a1a;box-shadow:0 20px 50px #0009;font-family:Inter,sans-serif;text-align:left;transform:scale(.65);transform-origin:top center;margin-bottom:-100mm}@media(max-width:1024px){.app-wrapper{grid-template-columns:1fr;height:auto}.app-wrapper:before{display:none}.preview-panel{height:auto;position:relative;top:0}.editor-panel{max-height:none;padding-right:0}.a4-paper{transform:scale(.5);margin-bottom:-140mm}}@media(max-width:600px){.a4-paper{transform:scale(.35);margin-bottom:-190mm}.preview-panel{padding:.5rem;background:transparent;box-shadow:none;border:none}}@media print{@page{size:A4;margin:0}body{background:#fff;color:#000}.app-container,nav,footer,.editor-panel,.btn-primary{display:none!important}.preview-panel{background:#fff;box-shadow:none;padding:0;margin:0;overflow:visible;display:block;height:auto}.a4-paper{box-shadow:none;margin:0;width:100%;min-height:auto;padding:15mm}.app-wrapper{display:block;height:auto}}:root{--sui-blue: #4DA2FF;--sui-cyan: #00D1FF;--sui-purple: #9563FF;--sui-bg: #020617;--sui-card: rgba(255, 255, 255, .03);--sui-glass-border: rgba(255, 255, 255, .08);--sui-glass-glow: rgba(77, 162, 255, .1);--sui-text: #F8FAFC;--sui-text-dim: #94A3B8;--font-main: "Outfit", sans-serif;--glass-blur: blur(20px)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background-color:var(--sui-bg);background-image:radial-gradient(circle at 50% -20%,rgba(77,162,255,.15) 0%,transparent 50%),radial-gradient(circle at 0% 100%,rgba(149,99,255,.05) 0%,transparent 40%);color:var(--sui-text);min-height:100vh;overflow-x:hidden}.glass-panel{background:var(--sui-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--sui-glass-border);border-radius:28px;padding:2.5rem;box-shadow:0 10px 40px -10px #00000080;transition:all .4s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{border-color:#4da2ff4d;transform:translateY(-5px);box-shadow:0 20px 50px -10px #4da2ff26;background:#ffffff0d}.app-container{max-width:1200px;margin:0 auto;padding:0 24px}h1,h2,h3{font-weight:900;letter-spacing:-.04em;line-height:1}.gradient-text{background:linear-gradient(90deg,#FFF 0%,#FFF 30%,var(--sui-blue) 45%,var(--sui-cyan) 50%,var(--sui-blue) 55%,#FFF 70%,#FFF 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}@keyframes shine{to{background-position:200% center}}.mesh-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:var(--sui-bg);overflow:hidden}.mesh-bg:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;margin-bottom:2rem}.nav-link{color:var(--sui-text-dim);text-decoration:none;font-weight:600;padding:8px 16px;border-radius:12px;transition:all .3s ease}.nav-link:hover,.nav-link.active{color:#fff;background:#ffffff0d}.btn-primary{background:linear-gradient(135deg,var(--sui-blue),var(--sui-cyan));border:none;border-radius:14px;color:#fff;padding:1rem 2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4da2ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #4da2ff66}.tool-card{border:1px solid rgba(255,255,255,.06)}.tool-card:hover h3{color:var(--sui-blue)}.tool-card:hover .card-button{background:var(--sui-blue)!important;color:#fff!important;box-shadow:0 4px 20px #4da2ff66;transform:scale(1.02)}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.floating-icon{animation:float 6s ease-in-out infinite;display:inline-block}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(0)}}@media(max-width:768px){.app-container{padding:0 16px}.glass-panel{padding:1.5rem!important;border-radius:20px}h1{font-size:2rem!important}h2{font-size:1.5rem!important}input,select,button{min-height:48px;font-size:16px!important}}