/* ========================================================= PulseNode Concierge — SHARED THEME One file, every page. Edit here, it changes everywhere. Usage: ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ========================================================= Theme system — 6 selectable themes (3 dark, 3 light). Set via — persisted in localStorage under "srt-theme". Every theme defines the same variable set plus --glowA/--glowB, used by the site-wide ambient background (see body::before below), so the glow shows on every page, not just heroes. ========================================================= */ :root, html[data-theme="dark"]{ --bg:#0A0614; --bg2:#100A1F; --panel:#150E28; --line:rgba(255,255,255,.08); --fg:#FFFFFF; --dim:#C9C1DC; --dim2:#A196BB; --magenta:#FF00AA; --violet:#7B2FFF; --cyan:#00E5FF; --grad:linear-gradient(100deg,#FF00AA 0%,#7B2FFF 55%,#00E5FF 100%); --glowA:#FF0DAE; --glowB:#8239FF; --radius:16px; --shadow:0 30px 80px rgba(0,0,0,.6); --ok:#1FA34B; --err:#E5484D; } html[data-theme="dark-emerald"]{ --bg:#040F0C; --bg2:#08211A; --panel:#0D2A21; --line:rgba(255,255,255,.08); --fg:#FFFFFF; --dim:#BFDFCF; --dim2:#8FB8A3; --magenta:#00E08A; --violet:#12B6C9; --cyan:#7CFF6B; --grad:linear-gradient(100deg,#00E08A 0%,#12B6C9 55%,#7CFF6B 100%); --glowA:#1BE89C; --glowB:#2BC4D6; --radius:16px; --shadow:0 30px 80px rgba(0,0,0,.6); --ok:#2FD37E; --err:#FF5D5D; } html[data-theme="dark-amber"]{ --bg:#100804; --bg2:#1E100A; --panel:#291708; --line:rgba(255,255,255,.09); --fg:#FFFDF8; --dim:#E4C9B0; --dim2:#BE9C7C; --magenta:#FF7A1A; --violet:#FF3D5E; --cyan:#FFC93C; --grad:linear-gradient(100deg,#FF7A1A 0%,#FF3D5E 55%,#FFC93C 100%); --glowA:#FF8A33; --glowB:#FF5677; --radius:16px; --shadow:0 30px 80px rgba(0,0,0,.6); --ok:#3BC46D; --err:#FF4D4D; } html[data-theme="light"]{ --bg:#F7F5FB; --bg2:#FFFFFF; --panel:#FFFFFF; --line:rgba(20,10,40,.09); --fg:#160E29; --dim:#4B4360; --dim2:#726886; --magenta:#D6008F; --violet:#6420D9; --cyan:#0091A8; --grad:linear-gradient(100deg,#D6008F 0%,#6420D9 55%,#0091A8 100%); --glowA:#E619A3; --glowB:#7A3DF0; --shadow:0 20px 50px rgba(40,20,70,.08); --ok:#1FA34B; --err:#E5484D; } html[data-theme="light-emerald"]{ --bg:#F5FBF7; --bg2:#FFFFFF; --panel:#FFFFFF; --line:rgba(6,40,25,.09); --fg:#0B241A; --dim:#3E5A4B; --dim2:#66856F; --magenta:#049966; --violet:#0A8FA0; --cyan:#3FA33A; --grad:linear-gradient(100deg,#049966 0%,#0A8FA0 55%,#3FA33A 100%); --glowA:#15B87D; --glowB:#1AACBE; --shadow:0 20px 50px rgba(10,50,35,.08); --ok:#1FA34B; --err:#E5484D; } html[data-theme="light-amber"]{ --bg:#FBF6F0; --bg2:#FFFFFF; --panel:#FFFFFF; --line:rgba(60,30,10,.09); --fg:#2A1608; --dim:#6B4A32; --dim2:#93725A; --magenta:#E05F00; --violet:#D6274B; --cyan:#C98A00; --grad:linear-gradient(100deg,#E05F00 0%,#D6274B 55%,#C98A00 100%); --glowA:#F07A22; --glowB:#DE3F63; --shadow:0 20px 50px rgba(60,30,10,.08); --ok:#1FA34B; --err:#E5484D; } html[data-theme="dark-ion"]{ --bg:#050914; --bg2:#0A1226; --panel:#101B36; --line:rgba(255,255,255,.08); --fg:#FFFFFF; --dim:#BFCBEA; --dim2:#8FA0CC; --magenta:#3B82F6; --violet:#6366F1; --cyan:#22D3EE; --grad:linear-gradient(100deg,#3B82F6 0%,#6366F1 55%,#22D3EE 100%); --glowA:#4F8CFB; --glowB:#7C7AFB; --radius:16px; --shadow:0 30px 80px rgba(0,0,0,.6); --ok:#1FA34B; --err:#E5484D; } html[data-theme="light-ion"]{ --bg:#F4F7FE; --bg2:#FFFFFF; --panel:#FFFFFF; --line:rgba(10,30,70,.09); --fg:#0B1730; --dim:#3E4C70; --dim2:#69759B; --magenta:#1D4ED8; --violet:#4338CA; --cyan:#0E7490; --grad:linear-gradient(100deg,#1D4ED8 0%,#4338CA 55%,#0E7490 100%); --glowA:#3A63E8; --glowB:#5750D9; --shadow:0 20px 50px rgba(10,30,70,.08); --ok:#1FA34B; --err:#E5484D; } /* ---------- Site-wide ambient background (every page) ---------- */ body{position:relative} body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(650px 460px at 12% 8%, color-mix(in srgb, var(--glowA) 16%, transparent), transparent 60%), radial-gradient(760px 560px at 88% 26%, color-mix(in srgb, var(--glowB) 18%, transparent), transparent 60%), radial-gradient(600px 500px at 50% 100%, color-mix(in srgb, var(--glowA) 8%, transparent), transparent 65%); } /* ---------- Reset / base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.65;transition:background .25s,color .25s;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:'Sora',sans-serif;color:var(--fg);line-height:1.15} a{color:var(--cyan);text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .dim{color:var(--dim)} .mono{font-family:'JetBrains Mono',monospace} /* ---------- Nav ---------- */ nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:color-mix(in srgb, var(--bg) 78%, transparent);border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px} .logo{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;color:var(--fg);white-space:nowrap;display:flex;align-items:center;gap:9px} .logo-icon{width:28px;height:28px;border-radius:7px;flex-shrink:0} .logo-text{display:flex;flex-direction:column;line-height:1.2} .logo span{color:var(--magenta)} .logo small{display:block;font-family:'Plus Jakarta Sans';font-weight:400;font-size:11px;color:var(--dim2)} .navlinks{display:flex;gap:24px;align-items:center} .navlinks a:not(.btn){color:var(--dim);font-size:14px;font-weight:500;transition:color .2s} .navlinks a:not(.btn):hover,.navlinks a.active{color:var(--fg)} /* ---------- Buttons ---------- */ .btn{display:inline-block;padding:11px 24px;border-radius:999px;font-weight:600;font-size:14.5px;font-family:'Sora',sans-serif;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s} .btn-grad{background:var(--grad);color:#fff} .btn-grad:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(214,0,143,.3)} .btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--magenta)} .theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;flex-shrink:0} /* ---------- Hero ---------- */ .hero{position:relative;padding:88px 0 72px;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(600px 400px at 15% 10%,color-mix(in srgb, var(--glowA) 19%, transparent),transparent 60%), radial-gradient(700px 500px at 85% 30%,color-mix(in srgb, var(--glowB) 21%, transparent),transparent 60%);pointer-events:none} .hero .wrap{position:relative} .hero h1{font-size:clamp(34px,4.6vw,52px);font-weight:700;margin:16px 0 18px} .hero p.lead{color:var(--dim);font-size:17.5px;max-width:560px;margin-bottom:30px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap} .trust{display:flex;gap:24px;margin-top:34px;flex-wrap:wrap} .trust div{font-size:13px;color:var(--dim)} .trust strong{display:block;font-family:'Sora',sans-serif;font-size:19px;color:var(--fg)} /* ---------- Panels / terminal ---------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .panel-bar{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)} .panel-bar i{width:10px;height:10px;border-radius:50%;display:block} .panel-bar i:nth-child(1){background:#FF5F57}.panel-bar i:nth-child(2){background:#FEBC2E}.panel-bar i:nth-child(3){background:#28C840} .panel-bar span{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)} .panel-body{padding:20px 22px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.9;min-height:240px;color:var(--dim)} .panel-body .c{color:var(--dim2)} .panel-body .ok{color:var(--ok)} .panel-body .m{color:var(--magenta)} .panel-body .cy{color:var(--cyan)} .cursor{display:inline-block;width:8px;height:15px;background:var(--magenta);vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} /* ---------- Sections ---------- */ section{padding:80px 0} .section-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec-head{max-width:660px;margin-bottom:48px} .sec-head h2{font-size:clamp(26px,3.2vw,36px);margin:12px 0 12px} .sec-head p{color:var(--dim);font-size:16.5px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} /* ---------- Custody banner ---------- */ .keys{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .keys .wrap{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:40px 24px} .keys .lock{font-size:46px;line-height:1} .keys h3{font-size:22px;margin-bottom:8px} .keys p{color:var(--dim);max-width:720px} /* ---------- Card grids ---------- */ .model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .model-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px} .model-card h4{font-size:15px;margin-bottom:8px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em} .model-card p{color:var(--dim);font-size:14px} .model-card .who{margin-top:10px;font-size:13px;color:var(--dim2)} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:border-color .2s,transform .2s} .card:hover{border-color:color-mix(in srgb, var(--magenta) 45%, transparent);transform:translateY(-3px)} .card .step{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);letter-spacing:.14em;margin-bottom:12px} .card h3{font-size:18px;margin-bottom:8px} .card p{color:var(--dim);font-size:14.5px} /* ---------- Pricing cards ---------- */ .grid-pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .price-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px} .price-card.featured{border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--grad) border-box} .badge{position:absolute;top:-11px;right:18px;background:var(--grad);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:5px 11px;border-radius:999px} .price-card .amount{font-family:'Sora',sans-serif;font-size:34px;font-weight:700;margin:6px 0 2px} .price-card .amount small{font-size:14px;font-weight:500;color:var(--dim)} .price-card .setup{font-size:12.5px;color:var(--dim);margin-bottom:16px;min-height:32px} .price-card ul{list-style:none;margin:0 0 22px;flex:1} .price-card li{padding:6px 0 6px 22px;position:relative;font-size:13.5px;color:var(--fg)} .price-card li::before{content:"✓";position:absolute;left:0;color:var(--magenta);font-weight:700} .price-card .btn{width:100%;text-align:center;font-size:13.5px;padding:11px} .price-note{font-size:11.5px;color:var(--dim2);margin-top:14px;line-height:1.5} /* ---------- FAQ / accordions ---------- */ details{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden} summary{cursor:pointer;padding:18px 22px;font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center} summary::after{content:"+";color:var(--magenta);font-size:20px;transition:transform .2s} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 22px 18px;color:var(--dim);font-size:14.5px} /* ---------- Tables ---------- */ table{width:100%;border-collapse:collapse} table th,table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px} table th{color:var(--dim2);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500} table td{color:var(--fg)} /* ---------- Top nav (compact, site-wide) ---------- */ .topbar{position:sticky;top:0;z-index:60;height:52px;display:flex;align-items:center;gap:22px;padding:0 18px;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .topbar .logo{font-size:15px;flex-shrink:0} .topbar .navlinks{display:flex;gap:2px;align-items:center;flex:1} .topbar .navlinks a{padding:7px 13px;border-radius:8px;font-size:13.5px;color:var(--dim);font-weight:500} .topbar .navlinks a:hover{color:var(--fg);background:var(--panel)} .topbar .navlinks a.active{color:var(--fg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)} .topbar .right{display:flex;align-items:center;gap:10px;margin-left:auto} .topbar .theme-toggle{width:32px;height:32px;font-size:14px} /* ---------- Theme dropdown menu ---------- */ .theme-menu-wrap{position:relative} .theme-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:172px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;gap:2px;z-index:80} .theme-menu.open{display:flex} .theme-menu-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);padding:8px 8px 4px} .theme-swatch{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:9px;border:none;background:transparent;color:var(--dim);font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;cursor:pointer;text-align:left} .theme-swatch:hover{background:var(--bg2);color:var(--fg)} .theme-swatch.active{background:var(--bg2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)} .swatch-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px var(--line)} .topbar .status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)} .topbar .status{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim2)} /* ---------- Terminal shell (charts / trade / portfolio) ---------- */ .terminal{display:grid;grid-template-columns:240px 1fr 300px;grid-template-rows:auto 1fr;height:calc(100vh - 52px);gap:1px;background:var(--line);overflow:hidden} .term-toolbar{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap} .term-search{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 12px;color:var(--fg);font-size:13px;font-family:'JetBrains Mono',monospace;min-width:200px} .term-search:focus{outline:none;border-color:var(--magenta)} .chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--dim);cursor:pointer;background:transparent;white-space:nowrap} .chip.active{color:var(--fg);border-color:var(--magenta);background:color-mix(in srgb, var(--magenta) 12%, transparent)} .chip:hover{color:var(--fg)} .term-side{background:var(--bg2);overflow-y:auto;display:flex;flex-direction:column;min-height:0} .term-side-head{padding:12px 14px 8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2);display:flex;justify-content:space-between;align-items:center} .watchlist-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;border-left:2px solid transparent} .watchlist-row:hover{background:var(--panel)} .watchlist-row.active{background:var(--panel);border-left-color:var(--magenta)} .watchlist-row .pair{font-size:13px;font-weight:600} .watchlist-row .chain{font-size:10.5px;color:var(--dim2);font-family:'JetBrains Mono',monospace} .watchlist-row .px{font-family:'JetBrains Mono',monospace;font-size:12.5px;text-align:right} .watchlist-row .chg-up{color:var(--ok)}.watchlist-row .chg-down{color:var(--err)} .term-center{display:grid;grid-template-rows:1fr auto;min-width:0;min-height:0;background:var(--bg)} .term-chart-wrap{position:relative;min-height:0;background:var(--bg)} #tv-chart-container{width:100%;height:100%} .term-trades{border-top:1px solid var(--line);background:var(--bg2);max-height:220px;display:flex;flex-direction:column;min-height:0} .term-trades-head{display:flex;padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim2);border-bottom:1px solid var(--line)} .term-trades-body{overflow-y:auto;flex:1} .trade-row{display:flex;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)} .trade-row.buy{color:var(--ok)}.trade-row.sell{color:var(--err)} .trade-row > span{flex:1} .term-info{background:var(--bg2);overflow-y:auto;padding:16px 16px 40px} .info-block{margin-bottom:20px} .info-block h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2);font-family:'JetBrains Mono',monospace;margin-bottom:10px} .stat-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent)} .stat-row span:last-child{font-family:'JetBrains Mono',monospace;color:var(--fg)} /* draggable/resizable float panels (trade page) */ .dock-area{position:relative;flex:1;min-height:0;overflow:auto;background: radial-gradient(circle,var(--line) 1px,transparent 1px) 0 0/22px 22px} .dock-panel{position:absolute;background:color-mix(in srgb, var(--panel) 92%, transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:220px;min-height:44px;overflow:hidden;transition:box-shadow .15s} .dock-panel:hover{box-shadow:0 30px 90px rgba(0,0,0,.65)} .dock-panel .dock-head{cursor:move;padding:9px 8px 9px 14px;background:color-mix(in srgb, var(--bg2) 88%, transparent);border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--dim);display:flex;justify-content:space-between;align-items:center;user-select:none;flex-shrink:0} .dock-head .dock-title{display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dock-head .dock-controls{display:flex;align-items:center;gap:2px;flex-shrink:0} .dock-btn{width:22px;height:22px;border-radius:6px;border:none;background:transparent;color:var(--dim2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px} .dock-btn:hover{background:var(--panel);color:var(--fg)} .dock-panel .dock-body{flex:1;overflow:auto;padding:14px;min-height:0} .dock-panel.collapsed{height:auto !important} .dock-panel.collapsed .dock-body, .dock-panel.collapsed .dock-resize{display:none} .dock-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize} .dock-resize::after{content:"";position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-right:2px solid var(--dim2);border-bottom:2px solid var(--dim2)} .dock-resize-e{position:absolute;top:0;right:-5px;bottom:0;width:11px;cursor:ew-resize;z-index:6} .dock-resize-e::before{content:"";position:absolute;top:0;right:5px;bottom:0;width:1px;background:var(--line)} .dock-resize-e::after{content:"";position:absolute;top:50%;right:2px;transform:translateY(-50%);width:3px;height:34px;border-radius:3px;background:var(--dim2)} .dock-resize-e:hover::after,.dock-resize-e:hover::before{background:var(--magenta)} .dock-resize-s{position:absolute;left:0;right:0;bottom:-5px;height:11px;cursor:ns-resize;z-index:6} .dock-resize-s::before{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--line)} .dock-resize-s::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:34px;height:3px;border-radius:3px;background:var(--dim2)} .dock-resize-s:hover::after,.dock-resize-s:hover::before{background:var(--magenta)} /* While dragging/resizing a panel, disable pointer events on iframes so the browser doesn't route mousemove into them and "lose" the drag mid-motion. */ body.dock-interacting iframe{pointer-events:none} /* ---------- Collapsible side-rail (DexTools-style hover-to-expand sidebar) ---------- */ .side-rail{flex-shrink:0;width:56px;position:relative;overflow:visible;transition:width .18s ease} .side-rail.pinned{width:var(--rail-w, 270px);transition:none} .rail-inner{position:absolute;top:0;bottom:0;left:0;width:56px;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:width .18s ease,box-shadow .18s ease;z-index:5} .side-rail.right .rail-inner{left:auto;right:0;border-right:none;border-left:1px solid var(--line)} .side-rail.pinned .rail-inner{width:var(--rail-w, 270px);transition:none} .side-rail.rail-expanded:not(.pinned) .rail-inner{width:270px;box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:30} .rail-resize{display:none;position:absolute;top:0;bottom:0;width:11px;cursor:ew-resize;z-index:32} .side-rail.pinned .rail-resize{display:block} .side-rail:not(.right) .rail-resize{right:-5px} .side-rail.right .rail-resize{left:-5px} .rail-resize::before{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px;background:var(--line)} .rail-resize::after{content:"";position:absolute;top:50%;left:2px;transform:translateY(-50%);width:3px;height:40px;border-radius:3px;background:var(--dim2)} .rail-resize:hover::after,.rail-resize:hover::before{background:var(--magenta)} .rail-header{display:flex;align-items:center;padding:10px 12px 10px 34px;border-bottom:1px solid var(--line);flex-shrink:0;min-height:41px} .side-rail.right .rail-header{padding:10px 34px 10px 12px;justify-content:flex-end} .rail-header .rail-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--dim);white-space:nowrap;opacity:0;transition:opacity .12s} .side-rail.rail-expanded .rail-header .rail-title{opacity:1} /* Collapse/expand tab — fixed on the outer edge of the rail, same spot whether the rail is mini or pinned, instead of living inside the header where its position moved around and got hard to find. */ .rail-pin-btn{position:absolute;top:8px;width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--dim2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:6} .side-rail:not(.right) .rail-pin-btn{left:6px} .side-rail.right .rail-pin-btn{right:6px} .rail-pin-btn:hover{border-color:var(--magenta);color:var(--fg)} .rail-full{display:none;flex:1;overflow-y:auto;min-height:0} .rail-mini{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;margin-top:2px} .side-rail.rail-expanded .rail-full{display:block} .side-rail.rail-expanded .rail-mini{display:none} .rail-mini-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--dim);border:1px solid transparent} .rail-mini-icon:hover{background:var(--panel);border-color:var(--line);color:var(--fg)} .rail-mini-icon img{width:24px;height:24px;border-radius:50%;object-fit:cover} @media (max-width:980px){ .terminal{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto} .term-side, .term-info{max-height:180px} } /* ---------- Modal ---------- */ .modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(5,3,12,.7);backdrop-filter:blur(6px);padding:20px} .modal.open{display:flex} .modal-box{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:32px;max-width:440px;width:100%} .modal-box h3{font-size:21px;margin-bottom:6px} .modal-box p{color:var(--dim);font-size:13.5px;margin-bottom:20px} .field{margin-bottom:14px} .field label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:6px} .field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--fg);font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px} .field input:focus,.field textarea:focus{outline:none;border-color:var(--magenta)} .modal-close{float:right;background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer} .msg{font-size:13.5px;margin-top:10px;display:none} .msg.ok{color:var(--ok);display:block} .msg.err{color:var(--err);display:block} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);padding:40px 0;color:var(--dim);font-size:13px} footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} /* ---------- Responsive ---------- */ @media (max-width:980px){ .grid4,.grid-pricing,.model-grid{grid-template-columns:1fr 1fr} .grid3{grid-template-columns:1fr 1fr} .keys .wrap{grid-template-columns:1fr} .navlinks a:not(.btn):not(.theme-toggle){display:none} } @media (max-width:600px){ .grid2,.grid3,.grid4,.grid-pricing,.model-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}