:root { color-scheme: dark; --black:#050505; --white:#f4f3ef; --muted:#858581; --line:rgba(255,255,255,.13); --glass:rgba(18,18,18,.76); --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; background:var(--black); color:var(--white); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x:hidden; }
button, a { color:inherit; font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; position:relative; overflow:hidden; background:radial-gradient(circle at 78% 53%, rgba(75,75,72,.12), transparent 28rem), var(--black); }
.topbar { position:fixed; z-index:20; top:1.4rem; left:1.5rem; right:1.5rem; height:4.4rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 .55rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--glass); backdrop-filter:blur(24px); box-shadow:0 1rem 4rem rgba(0,0,0,.25); }
.menu-toggle, .face-control { width:3.3rem; height:3.3rem; border:1px solid var(--line); border-radius:1.1rem; background:rgba(255,255,255,.03); display:grid; place-items:center; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.menu-toggle:hover, .face-control:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.3); }
.menu-toggle { justify-self:start; }
.menu-icon { width:1.15rem; height:1rem; position:relative; display:block; }
.menu-icon i { position:absolute; left:0; width:100%; height:1px; background:var(--white); transition:transform .35s var(--ease), top .35s var(--ease); }
.menu-icon i:first-child { top:.25rem; }.menu-icon i:last-child { top:.7rem; }
.brand { display:flex; align-items:center; gap:.55rem; color:var(--white); font-size:.85rem; font-weight:700; letter-spacing:.12em; text-decoration:none; }
.brand em { color:#888; font-style:normal; font-weight:500; }
.brand-mark { width:1.65rem; height:1.65rem; display:grid; place-items:center; border:1px solid var(--white); border-radius:50%; font-size:.75rem; letter-spacing:0; }
.face-control { justify-self:end; border-radius:50%; }.face-control span { width:1.2rem; height:1.2rem; border:1px solid var(--white); border-radius:50%; position:relative; }.face-control span:after { content:''; position:absolute; width:.24rem; height:.24rem; left:.44rem; top:.43rem; border-radius:50%; background:var(--white); }
.main-content { position:relative; min-height:100vh; display:flex; align-items:center; padding:8rem 8vw 5rem; }
.welcome-panel { position:relative; z-index:1; max-width:45rem; }.eyebrow, .build-label, .menu-header, .menu-footnote, .foundation-note { font-family:'DM Mono', monospace; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; color:var(--muted); }
.eyebrow { display:flex; align-items:center; gap:1rem; margin:0 0 2.3rem; }.eyebrow-line { width:3.4rem; height:1px; background:#777; }
h1 { margin:0; font-size:clamp(3.5rem,8vw,7.8rem); line-height:.93; letter-spacing:-.075em; font-weight:500; }.h1, h1 span { color:var(--white); } h1 span { color:#6e6e6a; }
.intro { max-width:24rem; margin:2.3rem 0 2rem; color:#a2a29e; font-size:1rem; line-height:1.65; }
.foundation-note { display:flex; align-items:center; gap:.65rem; color:#bdbdb8; }.status-dot { width:.4rem; height:.4rem; border-radius:50%; background:#c9c8bf; box-shadow:0 0 1rem #c9c8bf; }
.ambient-orbit { position:absolute; right:-8vw; top:15%; width:min(62vw,56rem); aspect-ratio:1; border:1px solid rgba(255,255,255,.09); border-radius:50%; transform:rotate(-24deg); }.ambient-orbit:before, .ambient-orbit:after { content:''; position:absolute; inset:12%; border:1px solid rgba(255,255,255,.055); border-radius:50%; }.ambient-orbit:after { inset:31%; border-color:rgba(255,255,255,.08); }
.build-label { position:absolute; right:2rem; bottom:1.5rem; margin:0; }.build-label span { margin-left:1rem; color:#4f4f4d; }
.side-menu { position:fixed; z-index:15; top:1.4rem; bottom:1.4rem; left:1.5rem; width:min(27rem,calc(100vw - 3rem)); padding:7rem 2.2rem 2rem; border:1px solid rgba(255,255,255,.15); border-radius:1.5rem; background:rgba(11,11,11,.96); backdrop-filter:blur(24px); transform:translateX(calc(-100% - 2rem)); transition:transform .55s var(--ease); box-shadow:2rem 2rem 5rem rgba(0,0,0,.35); }.side-menu.is-open { transform:translateX(0); }
.menu-header { display:flex; justify-content:space-between; padding-bottom:1.2rem; border-bottom:1px solid var(--line); }.menu-index { color:#51514e; }
.side-menu nav { display:flex; flex-direction:column; padding-top:.8rem; }.menu-item { display:flex; align-items:center; gap:1rem; padding:.73rem 0; border:0; background:none; color:#8d8d89; font-size:1rem; text-align:left; transition:color .25s var(--ease), padding-left .25s var(--ease); }.menu-item span { width:1.25rem; color:#4d4d4a; font: .68rem 'DM Mono', monospace; }.menu-item:hover, .menu-item.is-active { color:var(--white); padding-left:.4rem; }.menu-item.is-active span { color:#aaa9a4; }.menu-footnote { position:absolute; bottom:2rem; left:2.2rem; color:#555552; }
.menu-backdrop { position:fixed; z-index:10; inset:0; background:rgba(0,0,0,.52); opacity:0; transition:opacity .4s var(--ease); }.menu-backdrop.is-visible { opacity:1; }
.menu-toggle.is-open .menu-icon i:first-child { top:.48rem; transform:rotate(45deg); }.menu-toggle.is-open .menu-icon i:last-child { top:.48rem; transform:rotate(-45deg); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:2rem; background:radial-gradient(circle at 50% 46%, rgba(75,75,72,.13), transparent 28rem), var(--black); }
.login-card { width:min(100%, 27rem); padding:2.8rem 2.6rem 2.3rem; border:1px solid var(--line); border-radius:1.5rem; background:rgba(18,18,18,.76); backdrop-filter:blur(24px); box-shadow:0 1.5rem 5rem rgba(0,0,0,.28); }
.login-brand { display:flex; align-items:center; gap:.55rem; margin-bottom:4.2rem; font-size:.85rem; font-weight:700; letter-spacing:.12em; }.login-brand em { color:#888; font-style:normal; font-weight:500; }
.login-card .eyebrow { margin:0 0 1.15rem; }.login-card h1 { font-size:clamp(2.8rem, 10vw, 4rem); letter-spacing:-.065em; }.login-intro { margin:1.2rem 0 2rem; color:#999995; font-size:.94rem; line-height:1.6; }
.login-form { display:grid; gap:.65rem; }.login-form label { color:#bdbdb8; font-size:.82rem; }.login-form input { width:100%; height:3.1rem; padding:0 .9rem; border:1px solid rgba(255,255,255,.18); border-radius:.8rem; outline:0; background:rgba(255,255,255,.04); color:var(--white); font:inherit; transition:border-color .25s var(--ease), background .25s var(--ease); }.login-form input:focus { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.07); }.login-submit { height:3.1rem; margin-top:.65rem; border:1px solid var(--white); border-radius:.8rem; background:var(--white); color:#080808; font-weight:700; transition:opacity .25s var(--ease), transform .25s var(--ease); }.login-submit:hover:not(:disabled) { transform:translateY(-1px); }.login-submit:disabled { cursor:wait; opacity:.58; }.login-error { margin:.15rem 0 0; color:#d4a7a0; font-size:.82rem; }.login-footnote { margin:3.4rem 0 0; color:#555552; font: .68rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform:uppercase; letter-spacing:.13em; }
.logout-control { margin-top:1.3rem; padding:.65rem 0; border:0; background:none; color:#777773; font: .72rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align:left; text-transform:uppercase; letter-spacing:.12em; }.logout-control:hover { color:var(--white); }.logout-control:disabled { opacity:.45; }
@media (max-width:600px) { .topbar { top:1rem; left:1rem; right:1rem; }.main-content { padding:8rem 2rem 5rem; align-items:flex-start; padding-top:12rem; }.ambient-orbit { right:-55vw; top:43%; width:120vw; }.build-label { right:1rem; bottom:1rem; }.side-menu { top:1rem; bottom:1rem; left:1rem; width:calc(100vw - 2rem); padding-left:1.6rem; padding-right:1.6rem; }.menu-footnote { left:1.6rem; } h1 { font-size:clamp(3.4rem,16vw,5.6rem); } }