:root { --paper:#f3f4ee; --ink:#11130f; --muted:#666a61; --line:#cfd2c7; --signal:#c8ff3d; --route:#ff6b2c; --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--sans); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[hidden] { display:none !important; }
.topbar { min-height:76px; padding:0 max(24px,calc((100vw - 1200px)/2)); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:19px; line-height:1; font-weight:700; }
.brand-mark { position:relative; width:25px; height:25px; flex:none; }
.brand-mark i { position:absolute; width:7px; height:7px; border:2px solid currentColor; border-radius:50%; }
.brand-mark i:nth-child(1) { left:0; top:9px; }
.brand-mark i:nth-child(2) { right:0; top:0; background:var(--signal); }
.brand-mark i:nth-child(3) { right:0; bottom:0; background:var(--route); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; left:7px; width:13px; height:1px; background:currentColor; transform-origin:left center; }
.brand-mark::before { top:12px; transform:rotate(-35deg); }
.brand-mark::after { bottom:11px; transform:rotate(35deg); }
.topbar-label,.topbar-link,.eyebrow,.panel-top,.panel-kicker,.panel-bottom,.route-diagram,.intro-footer,.project-heading span,footer { font-family:var(--mono); font-size:12px; letter-spacing:.035em; }
.topbar-label { color:var(--muted); }
.topbar-dot { display:inline-block; width:6px; height:6px; margin:0 6px 2px; background:var(--route); border-radius:50%; }
.topbar-link { font-size:14px; border-bottom:1px solid currentColor; padding-bottom:3px; white-space:nowrap; }
.topbar-link span { color:var(--route); }
.layout { min-height:calc(100vh - 130px); width:min(1200px,calc(100% - 48px)); margin:auto; padding:clamp(50px,8vw,122px) 0; display:grid; grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr); gap:clamp(56px,7vw,110px); align-items:center; }
.eyebrow { color:var(--muted); display:flex; align-items:center; gap:10px; }
.eyebrow span { width:7px; height:7px; background:var(--route); border-radius:50%; }
h1 { margin:28px 0; font-size:clamp(58px,6.4vw,88px); line-height:.99; font-weight:600; letter-spacing:-.065em; }
h1 em { color:var(--route); font-style:normal; }
.intro > p { max-width:500px; color:#4d5149; font-size:18px; line-height:1.7; }
.route-diagram { display:flex; align-items:center; gap:12px; margin:70px 0 38px; white-space:nowrap; color:var(--muted); }
.route-line { flex:1; min-width:12px; height:1px; background:var(--line); }
.route-node { display:grid; place-items:center; width:40px; height:40px; flex:none; background:var(--signal); border:1px solid var(--ink); color:var(--ink); font-size:18px; }
.intro-footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; color:var(--muted); }
.panel { border:1px solid var(--ink); background:#fbfcf6; box-shadow:12px 12px 0 var(--signal); }
.panel-top,.panel-bottom { display:flex; justify-content:space-between; align-items:center; padding:17px 25px; }
.panel-top { border-bottom:1px solid var(--line); }
.panel-indicator { width:7px; height:7px; border-radius:50%; background:var(--route); }
.panel-bottom { border-top:1px solid var(--line); color:var(--muted); gap:10px; }
.panel-state { min-height:390px; padding:48px 36px 42px; }
.panel-kicker { color:var(--route); margin:0 0 22px; }
.panel-state h2 { font-size:clamp(27px,2.6vw,38px); line-height:1.18; letter-spacing:-.045em; font-weight:600; margin:0 0 20px; }
.panel-state > p:not(.panel-kicker),.identity p { color:var(--muted); line-height:1.68; margin:0 0 28px; }
.panel-state .fine-print { margin:18px 0 0 !important; font-size:13px; }
.primary-action { min-height:58px; background:var(--ink); color:#fff; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 16px; }
.primary-action:hover { background:#33392b; }
.primary-action img { width:22px; height:22px; filter:invert(1); }
.primary-action span { margin-left:auto; }
.identity { display:flex; align-items:center; gap:18px; margin-bottom:36px; }
.identity h2 { margin-bottom:2px; }
.identity p { margin:0; }
.project-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid var(--ink); }
.project-heading h3 { margin:0 0 12px; font-size:20px; }
.project-heading span { color:var(--muted); }
.projects { min-height:80px; }
.project { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.project strong { font-size:16px; font-weight:600; }
.project small { display:block; color:var(--muted); font:12px/1.5 var(--mono); margin-top:5px; overflow-wrap:anywhere; }
.project-status { flex:none; color:var(--muted); font:12px var(--mono); text-transform:uppercase; }
.empty-projects { margin:20px 0 !important; }
.project-error { color:#ad3526 !important; margin:20px 0 !important; }
.logout { cursor:pointer; border:0; border-bottom:1px solid var(--ink); background:transparent; margin-top:26px; padding:0 0 4px; font:14px var(--mono); }
.logout:disabled { opacity:.5; cursor:wait; }
footer { min-height:54px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 max(24px,calc((100vw - 1200px)/2)); border-top:1px solid var(--line); color:var(--muted); }
footer a { color:var(--ink); }
@media (max-width:900px) { .layout { grid-template-columns:1fr; gap:45px; padding:70px 0; } .intro > p { max-width:680px; } .route-diagram { margin:40px 0 25px; } .panel { max-width:600px; } }
@media (max-width:600px) { .topbar { min-height:68px; } .topbar-label { display:none; } .layout { width:calc(100% - 40px); padding:60px 0; } h1 { font-size:clamp(48px,12vw,68px); } .intro > p { font-size:16px; } .route-diagram { gap:6px; font-size:11px; } .route-node { width:34px; height:34px; } .intro-footer { font-size:11px; } .panel { box-shadow:7px 7px 0 var(--signal); } .panel-state { padding:36px 24px; min-height:360px; } .panel-top,.panel-bottom { padding:15px 20px; } .panel-bottom { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }