:root { --ink:#123b56; --muted:#3f718b; --dim:#5d8ba2; --bg:#c8f2ff; --panel:rgba(255,255,255,.58); --line:rgba(35,128,174,.28); --cyan:#087fc0; --blue:#39aee8; --lime:#4fba54; --display:"Trebuchet MS","Lucida Sans Unicode",sans-serif; --body:"Segoe UI",Tahoma,sans-serif; font-family:var(--body); color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } html { min-height:100%; background:#c8f2ff; } body { min-height:100vh; margin:0; background:radial-gradient(ellipse at 16% 18%,rgba(255,255,255,.95) 0 5%,transparent 19%),radial-gradient(ellipse at 91% 8%,rgba(255,255,255,.82) 0 4%,transparent 17%),linear-gradient(180deg,#83d9f7 0%,#d8f8ff 53%,#a8e5a4 100%); overflow-x:hidden; } body:before,body:after { content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(1px); } body:before { width:28vw; height:9vw; top:14%; right:-5vw; background:rgba(255,255,255,.5); box-shadow:-8vw 2vw 0 rgba(255,255,255,.38); } body:after { width:23vw; height:7vw; bottom:14%; left:-4vw; background:rgba(255,255,255,.4); box-shadow:7vw 1vw 0 rgba(255,255,255,.3); }
.scanline { position:fixed; inset:0; pointer-events:none; opacity:.12; z-index:5; background:linear-gradient(120deg,transparent 0 47%,rgba(255,255,255,.45) 48%,transparent 50%); }
.site-header,.site-footer,main { width:min(1180px,calc(100% - 44px)); margin:0 auto; } .site-header { min-height:76px; display:flex; align-items:center; gap:30px; border-bottom:2px solid rgba(255,255,255,.65); } .wordmark { color:var(--ink); text-decoration:none; font:700 1.1rem var(--display); letter-spacing:.13em; text-shadow:0 1px 0 #fff; } .wordmark span { color:#006eaf; }.wordmark i { color:var(--muted); font-style:normal; }.wordmark b { color:#2e9d46; font-weight:700; } nav { display:flex; gap:10px; margin-left:auto; } nav a { padding:9px 13px; border:1px solid rgba(255,255,255,.7); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.3); box-shadow:inset 0 1px rgba(255,255,255,.9),0 2px 6px rgba(38,120,150,.12); font-size:.73rem; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } nav a:hover,nav a:focus { color:#075b89; background:rgba(255,255,255,.7); } .privacy-mark { color:var(--dim); font-size:.65rem; letter-spacing:.08em; }.status-dot { display:inline-block; width:7px; height:7px; margin-left:5px; background:#43b448; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.65),0 0 9px #43b448; }
main { min-height:calc(100vh - 136px); padding:68px 0 76px; } .eyebrow { color:var(--cyan); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }.eyebrow:before { content:"// "; color:var(--lime); } h1,h2,h3 { font-family:var(--display); font-weight:700; margin:0; } h1 { max-width:760px; margin-top:14px; font-size:clamp(2.8rem,7vw,6.5rem); line-height:.94; letter-spacing:.01em; } h1 em { color:var(--cyan); font-style:normal; } h2 { font-size:clamp(1.7rem,4vw,3.3rem); } h3 { font-size:1.05rem; } .lede { max-width:610px; color:var(--muted); line-height:1.7; font-size:1rem; } .hero-meta { display:flex; align-items:center; gap:18px; margin-top:26px; color:var(--dim); font-size:.73rem; text-transform:uppercase; letter-spacing:.1em; }.hero-meta strong { color:var(--lime); font-weight:500; } .detected { max-width:590px; margin:35px 0 0; padding:14px 17px; border-left:2px solid var(--cyan); background:rgba(115,227,255,.07); color:var(--muted); font-size:.83rem; }.detected strong { color:var(--ink); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:84px 0 22px; }.section-heading p { max-width:300px; margin:0; color:var(--dim); font-size:.78rem; line-height:1.5; text-align:right; } .console-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.console-card { min-height:220px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:18px; background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(224,249,255,.46)); border:1px solid rgba(255,255,255,.95); border-radius:18px; box-shadow:inset 0 2px rgba(255,255,255,.95),0 7px 18px rgba(39,131,159,.18); text-decoration:none; color:var(--ink); transition:border-color .2s,transform .2s,background .2s; }.console-card:before { content:""; position:absolute; top:10px; left:10px; width:30px; height:4px; border-radius:5px; background:var(--lime); }.console-card:hover,.console-card:focus { background:rgba(255,255,255,.9); border-color:#fff; transform:translateY(-4px); outline:none; box-shadow:inset 0 2px rgba(255,255,255,1),0 10px 22px rgba(39,131,159,.25); }.console-code { color:#0077b7; font:700 1.8rem var(--display); text-shadow:0 1px 0 #fff; }.console-name { display:block; margin-top:8px; font:700 .96rem var(--display); }.console-detail { display:block; color:var(--muted); font-size:.72rem; line-height:1.5; }.card-arrow { align-self:end; color:#2c9f48; font-size:1.3rem; }
.notice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }.panel { border:1px solid rgba(255,255,255,.85); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(225,249,255,.42)); box-shadow:inset 0 2px rgba(255,255,255,.9),0 6px 16px rgba(39,131,159,.14); padding:23px; }.panel p,.panel li { color:var(--muted); font-size:.86rem; line-height:1.65; }.panel ul { margin:12px 0 0; padding-left:18px; }.panel strong { color:var(--ink); } .page-top { display:flex; align-items:end; justify-content:space-between; gap:25px; padding-bottom:25px; border-bottom:2px solid rgba(255,255,255,.7); }.back { color:#0874ad; text-decoration:none; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }.back:hover { color:#238e3b; }
.console-hero { display:grid; grid-template-columns:1.3fr .7fr; gap:25px; margin-top:34px; }.launch-panel { border:1px solid rgba(255,255,255,.9); border-radius:20px; padding:26px; background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(221,249,255,.5)); box-shadow:inset 0 2px rgba(255,255,255,.95),0 7px 18px rgba(39,131,159,.16); }.launch-panel h2 { margin:8px 0 12px; }.launch-panel p { color:var(--muted); line-height:1.65; }.status { display:inline-flex; align-items:center; gap:8px; color:#319e46; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }.status:before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.7),0 0 12px currentColor; }.button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }.button { display:inline-block; padding:13px 17px; color:#fff; background:linear-gradient(#34b7ed,#087db9); border:1px solid #0570aa; border-radius:999px; box-shadow:inset 0 1px rgba(255,255,255,.72),0 3px 7px rgba(32,122,157,.22); font:700 .74rem var(--body); letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }.button:hover,.button:focus { background:linear-gradient(#72d66f,#319c42); border-color:#268d39; outline:none; }.button.secondary { color:#146082; background:rgba(255,255,255,.45); border-color:rgba(36,126,164,.3); }.button.secondary:hover,.button.secondary:focus { border-color:#319e46; background:rgba(255,255,255,.8); }
.spec-list { margin:0; }.spec-list div { padding:13px 0; border-bottom:1px solid rgba(35,128,174,.15); }.spec-list dt { color:var(--dim); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }.spec-list dd { margin:5px 0 0; color:var(--ink); font-size:.84rem; } .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:25px; }.step { padding:18px; border-top:4px solid var(--blue); border-radius:14px; background:rgba(255,255,255,.47); box-shadow:inset 0 1px rgba(255,255,255,.9),0 5px 14px rgba(39,131,159,.12); }.step b { color:#299842; font:700 1.4rem var(--display); }.step h3 { margin:12px 0 5px; }.step p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.6; }
.credit-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:28px; }.credit-item { padding:18px; border-left:4px solid var(--blue); border-radius:14px; background:rgba(255,255,255,.58); box-shadow:inset 0 1px rgba(255,255,255,.9),0 5px 14px rgba(39,131,159,.12); }.credit-item strong { display:block; color:var(--ink); }.credit-item span { display:block; margin-top:6px; color:var(--muted); font-size:.8rem; line-height:1.5; }.credit-item a { color:#0874ad; } .site-footer { display:flex; justify-content:space-between; gap:18px; padding:18px 0; border-top:2px solid rgba(255,255,255,.72); color:var(--dim); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:820px) { .console-grid { grid-template-columns:repeat(2,1fr); }.console-hero,.notice-grid { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; }.privacy-mark { display:none; }.site-footer { flex-direction:column; gap:7px; } } @media (max-width:520px) { .site-header,.site-footer,main { width:min(100% - 28px,1180px); }.site-header { gap:12px; }.site-header nav { gap:11px; }.site-header nav a { font-size:.61rem; }.wordmark { font-size:.9rem; } main { padding-top:46px; }.section-heading { display:block; margin-top:58px; }.section-heading p { margin-top:10px; text-align:left; }.console-grid { grid-template-columns:1fr 1fr; }.console-card { min-height:185px; padding:14px; }.credit-list { grid-template-columns:1fr; }.page-top { display:block; }.page-top .back { display:block; margin-top:16px; } } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { transition:none!important; animation:none!important; } }