:root{--bg: #0b0e14;--bg-raised: #111623;--bg-code: #0d1420;--border: #1e293b;--text: #cdd6f4;--text-dim: #8b98b8;--accent: #60a5fa;--green: #34d399;--yellow: #fbbf24;--red: #f87171;--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}code{font-family:var(--mono);font-size:.88em;background:var(--bg-code);border:1px solid var(--border);border-radius:4px;padding:.1em .35em}pre{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:14px 16px;overflow-x:auto;line-height:1.55}pre code{background:none;border:none;padding:0;font-size:13.5px;color:#a5b4d4}.nav{display:flex;align-items:center;gap:22px;padding:0 22px;height:52px;border-bottom:1px solid var(--border);background:#0b0e14eb;position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.nav .logo{font-weight:800;letter-spacing:.08em;color:var(--text);font-size:17px}.nav .logo span{color:var(--green)}.nav a.navlink{color:var(--text-dim);font-size:14.5px}.nav a.navlink:hover,.nav a.navlink.active{color:var(--text);text-decoration:none}.nav .spacer{flex:1}.hero{position:relative;overflow:hidden;min-height:480px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}.hero iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;opacity:.55;pointer-events:none}.hero .inner{position:relative;text-align:center;padding:60px 20px}.hero h1{font-size:54px;margin:0 0 6px;letter-spacing:.06em}.hero h1 span{color:var(--green)}.hero p.tag{font-size:20px;color:var(--text-dim);margin:0 0 28px}.hero p.tag strong{color:var(--text)}.buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn{display:inline-block;padding:10px 22px;border-radius:8px;font-weight:600;font-size:15px;border:1px solid var(--border);color:var(--text);background:var(--bg-raised)}.btn:hover{text-decoration:none;border-color:var(--accent)}.btn.primary{background:var(--accent);color:#0b1020;border-color:var(--accent)}.btn.primary:hover{filter:brightness(1.1)}.section{max-width:1060px;margin:0 auto;padding:48px 22px}.section h2{font-size:26px;margin:0 0 18px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:18px}.card h3{margin:0 0 6px;font-size:16px}.card h3 a{color:var(--text)}.card p{margin:0;color:var(--text-dim);font-size:14px}.card .chip{color:var(--green);font-family:var(--mono);font-size:12px}.footer{border-top:1px solid var(--border);color:var(--text-dim);text-align:center;padding:26px;font-size:13.5px}.pg{display:flex;flex-direction:column;height:100vh}.pg-toolbar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg-raised)}.pg-toolbar select,.pg-toolbar button{background:var(--bg-code);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:14px;cursor:pointer}.pg-toolbar button.run{background:var(--accent);color:#0b1020;font-weight:700;border-color:var(--accent)}.pg-toolbar .hint{color:var(--text-dim);font-size:12.5px;margin-left:auto}.pg-main{flex:1;display:flex;min-height:0}.pg-editor{width:46%;min-width:320px;display:flex;flex-direction:column;border-right:1px solid var(--border)}.pg-editor textarea{flex:1;resize:none;border:0;outline:none;background:var(--bg-code);color:#a5b4d4;font-family:var(--mono);font-size:13px;line-height:1.55;padding:14px 16px;white-space:pre;-moz-tab-size:2;tab-size:2}.pg-preview{flex:1;position:relative}.pg-preview iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.pg-error{position:absolute;left:0;right:0;bottom:0;background:#431417;color:#fecaca;border-top:1px solid #7f1d1d;font-family:var(--mono);font-size:12.5px;padding:10px 14px;white-space:pre-wrap;max-height:40%;overflow:auto;display:none}@media (max-width: 800px){.pg-main{flex-direction:column}.pg-editor{width:100%;height:45%;border-right:0;border-bottom:1px solid var(--border)}}.guide{display:flex;max-width:1160px;margin:0 auto}.guide-sidebar{width:230px;flex-shrink:0;padding:26px 18px;border-right:1px solid var(--border);position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto}.guide-sidebar h4{margin:14px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.guide-sidebar a{display:block;color:var(--text-dim);font-size:14px;padding:3px 0}.guide-sidebar a.active{color:var(--green)}.guide-sidebar a.toc{font-size:13px;padding-left:10px}.guide-content{flex:1;min-width:0;padding:30px 34px 80px}.guide-content h1{font-size:32px;margin:6px 0 16px}.guide-content h2{font-size:23px;margin:34px 0 10px;padding-top:8px;border-top:1px solid var(--border)}.guide-content h3{font-size:18px;margin:24px 0 8px}.guide-content h4{font-size:15px;margin:18px 0 6px}.guide-content p,.guide-content li{color:#b9c3dd;font-size:15px}.guide-content table{border-collapse:collapse;margin:12px 0;width:100%}.guide-content th,.guide-content td{border:1px solid var(--border);padding:7px 11px;font-size:14px;text-align:left}.guide-content th{background:var(--bg-raised)}.guide-content .try{display:inline-block;margin:4px 0 14px;font-size:13.5px;color:var(--green);font-family:var(--mono)}