:root{--bg-dark: #060911;--bg-surface: #0c121e;--bg-card: rgba(12, 18, 30, .85);--neon-cyan: #06b6d4;--neon-blue: #3b82f6;--neon-emerald: #10b981;--neon-amber: #f59e0b;--neon-purple: #a855f7;--text-main: #f8fafc;--text-muted: #94a3b8;--border-subtle: rgba(255, 255, 255, .08);--border-glow: rgba(6, 182, 212, .4);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;display:flex;flex-direction:column;background-image:radial-gradient(ellipse at top right,rgba(6,182,212,.12),transparent 50%),radial-gradient(ellipse at bottom left,rgba(59,130,246,.1),transparent 50%),radial-gradient(circle at 50% 20%,rgba(16,185,129,.05),transparent 45%);background-attachment:fixed;overflow-x:hidden}header{border-bottom:1px solid var(--border-subtle);background:#060911e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;padding:.85rem 1.5rem}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff}.brand img{height:38px;width:auto;border-radius:var(--radius-sm)}.brand-text h1{font-size:1.15rem;font-weight:800;background:linear-gradient(135deg,#fff,var(--neon-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}.brand-text p{font-size:.72rem;color:var(--neon-cyan);font-weight:600}.nav-links{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}.nav-link{color:var(--text-muted);text-decoration:none;font-size:.82rem;font-weight:600;padding:.45rem .85rem;border-radius:9999px;border:1px solid var(--border-subtle);background:#ffffff08;transition:all .2s ease;display:inline-flex;align-items:center;gap:.4rem}.nav-link:hover{color:#fff;border-color:#06b6d480;background:#06b6d41f}.nav-link.portal-link{color:#f472b6;border-color:#ec489959}.nav-link.portal-link:hover{background:#ec489926;border-color:#ec4899}main{flex:1;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;width:100%}.hero-deck{background:linear-gradient(135deg,#06b6d41f,#0c121ee6);border:1px solid var(--border-glow);border-radius:var(--radius-lg);padding:2.25rem;box-shadow:0 20px 45px #0009,0 0 30px #06b6d426;margin-bottom:2.5rem;position:relative;overflow:hidden}.hero-deck:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#06b6d4,#3b82f6,#10b981)}.hero-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .65rem;border-radius:9999px;font-size:.72rem;font-weight:700;background:#06b6d42e;color:var(--neon-cyan);border:1px solid rgba(6,182,212,.35);margin-bottom:.85rem}.hero-title{font-size:2.3rem;font-weight:800;line-height:1.2}.hero-subtitle{font-size:.98rem;color:var(--text-muted);margin-top:.65rem;max-width:720px;line-height:1.55}.metrics-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-subtle)}.metric-item{display:flex;flex-direction:column}.metric-val{font-size:1.4rem;font-weight:800;color:#fff;line-height:1.2}.metric-val.cyan{color:var(--neon-cyan)}.metric-val.emerald{color:var(--neon-emerald)}.metric-val.amber{color:var(--neon-amber)}.metric-label{font-size:.75rem;color:var(--text-muted);margin-top:.2rem}.sandbox-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.75rem;margin-bottom:2.5rem;box-shadow:0 15px 35px #00000080}.sandbox-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;border-bottom:1px solid var(--border-subtle);padding-bottom:.75rem}.tab-btn{background:#ffffff0a;border:1px solid var(--border-subtle);color:var(--text-muted);padding:.55rem 1rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.45rem}.tab-btn:hover{color:#fff;border-color:#06b6d466}.tab-btn.active{background:linear-gradient(135deg,#06b6d433,#3b82f633);border-color:var(--neon-cyan);color:#fff;box-shadow:0 0 15px #06b6d44d}.sandbox-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.editor-box{background:#04060a;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem;font-size:.75rem;font-weight:700;color:var(--text-muted)}.editor-textarea{width:100%;height:240px;background:transparent;border:none;color:#67e8f9;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.82rem;line-height:1.5;resize:vertical;outline:none}.editor-output{width:100%;height:240px;background:transparent;color:#a7f3d0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.82rem;line-height:1.5;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.sandbox-action-bar{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem;flex-wrap:wrap;gap:.75rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .2s ease;line-height:1}.btn-primary{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue));color:#fff;box-shadow:0 0 20px #06b6d466}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 25px #06b6d499}.btn-secondary{background:#ffffff0d;border-color:var(--border-subtle);color:var(--text-main)}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-amber{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;box-shadow:0 0 20px #f59e0b59}.btn-amber:hover{transform:translateY(-2px);box-shadow:0 0 25px #f59e0b80}.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.25rem;border-bottom:1px solid var(--border-subtle);padding-bottom:.75rem}.section-title{font-size:1.35rem;font-weight:800;display:flex;align-items:center;gap:.6rem}.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem;margin-bottom:3rem}.showcase-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;transition:all .2s ease}.showcase-card:hover{transform:translateY(-4px);border-color:var(--border-glow);box-shadow:0 10px 25px #00000080}.showcase-badge{font-size:.7rem;font-weight:800;padding:.2rem .55rem;border-radius:9999px;background:#06b6d42e;color:var(--neon-cyan);border:1px solid rgba(6,182,212,.35);display:inline-block;margin-bottom:.5rem}.showcase-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.35rem}.showcase-desc{font-size:.8rem;color:var(--text-muted);line-height:1.45;margin-bottom:1rem}.showcase-footer{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;border-top:1px solid var(--border-subtle);padding-top:.75rem;margin-top:auto}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal-content{background:var(--bg-surface);border:1px solid var(--border-glow);border-radius:var(--radius-md);padding:2rem;max-width:520px;width:100%;box-shadow:0 20px 50px #000c,0 0 30px #06b6d440;max-height:85vh;overflow-y:auto}.form-group{margin-bottom:1.15rem}.form-label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.35rem;color:var(--text-main)}.form-input{width:100%;background:#04060a;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.65rem .85rem;color:#fff;font-size:.85rem;outline:none;transition:border-color .2s;box-sizing:border-box}.form-input:focus{border-color:var(--neon-cyan)}footer{border-top:1px solid var(--border-subtle);background:#060911f2;padding:2rem 1.5rem;text-align:center;font-size:.78rem;color:var(--text-muted);margin-top:auto}footer a{color:var(--neon-cyan);text-decoration:none}.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#0c121ef2;border:1px solid var(--neon-cyan);border-radius:var(--radius-sm);padding:.75rem 1.25rem;font-size:.85rem;color:#fff;box-shadow:0 10px 25px #000c;z-index:1100;display:flex;align-items:center;gap:.5rem;animation:slideIn .3s cubic-bezier(.16,1,.3,1)}@keyframes slideIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:768px){header{padding:.75rem 1rem}.nav-container{flex-direction:column;align-items:stretch;gap:.75rem}.nav-links{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.25rem;scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}main{padding:1.25rem 1rem}.hero-deck{padding:1.25rem 1rem}.hero-title{font-size:1.65rem}.metrics-strip{grid-template-columns:1fr 1fr;gap:.75rem}.sandbox-card{padding:1rem}.sandbox-split{grid-template-columns:1fr}.editor-textarea,.editor-output{height:180px}.sandbox-action-bar{flex-direction:column;align-items:stretch}.sandbox-action-bar .btn{width:100%}.showcase-grid{grid-template-columns:1fr;gap:1rem}}