:root { color-scheme: dark; --bg:#080b0d; --panel:#11161a; --line:#263139; --text:#eef4f7; --muted:#92a1aa; --green:#40f0a0; --cyan:#54c7ff; --red:#ff6577; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 15% -10%,#153126 0,transparent 35%),var(--bg); color:var(--text); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
main { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:64px 0; }
header { max-width:850px; margin-bottom:40px; }
.eyebrow { color:var(--green); letter-spacing:.18em; font-size:12px; font-weight:800; }
h1 { margin:12px 0; font-size:clamp(40px,7vw,78px); line-height:.98; letter-spacing:-.055em; }
header p { color:#b7c2c8; max-width:720px; font-size:19px; }
.status { display:inline-flex; gap:9px; align-items:center; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 12px; }
.status span:first-child { width:8px; height:8px; border-radius:50%; background:#81909a; }
.status span:first-child.live { background:var(--green); box-shadow:0 0 12px var(--green); }
.links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.link-chip { color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:11px; text-decoration:none; }
a.link-chip:hover { color:var(--cyan); border-color:var(--cyan); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:28px 0; }
.steps article { padding:22px; background:rgba(17,22,26,.72); border-right:1px solid var(--line); }
.steps article:last-child { border:0; }
.steps strong { color:var(--green); }
.steps h2 { margin:6px 0 2px; font-size:17px; }
.steps p { color:var(--muted); margin:0; }
.workspace { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; min-width:0; }
.panel-title { display:flex; justify-content:space-between; align-items:center; min-height:54px; padding:0 16px; border-bottom:1px solid var(--line); font-weight:750; }
textarea,pre { width:100%; height:430px; margin:0; padding:18px; border:0; background:#0b0f12; color:#c9e5d9; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; overflow:auto; }
textarea { resize:none; outline:none; }
.actions { display:flex; gap:8px; flex-wrap:wrap; padding:14px; border-top:1px solid var(--line); }
button { border:1px solid #3b4a53; border-radius:9px; background:#1a2227; color:var(--text); padding:9px 12px; font-weight:700; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--cyan); }
button:disabled { opacity:.4; cursor:not-allowed; }
button.accent { background:var(--green); color:#07130d; border-color:var(--green); }
button.danger { color:#ff9aa6; }
button.ghost { padding:6px 9px; font-size:12px; }
.pill { border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:11px; letter-spacing:.08em; }
.pill.good { border-color:#277650; color:var(--green); }
.pill.bad { border-color:#783641; color:var(--red); }
.privacy { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:16px; }
.privacy div { background:var(--panel); padding:18px; }
.privacy span { display:block; color:var(--muted); font-size:10px; letter-spacing:.12em; }
.privacy strong { display:block; margin-top:3px; }
.architecture { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(17,22,26,.72); }
.architecture span { display:block; color:var(--green); font-size:10px; letter-spacing:.12em; }
.architecture strong { display:block; margin-top:4px; font-size:13px; }
.architecture .arrow { color:var(--cyan); font-size:22px; }
@media (max-width:850px) { main{padding-top:36px}.steps,.workspace,.privacy,.architecture{grid-template-columns:1fr}.steps article{border-right:0;border-bottom:1px solid var(--line)}.architecture .arrow{transform:rotate(90deg);width:min-content}textarea,pre{height:330px} }