:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#080d14; color:#e7eff5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 18% 35%,#0e3240 0,transparent 31rem),radial-gradient(circle at 78% 70%,#202343 0,transparent 34rem),#080d14; }
.shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr); gap:clamp(3rem,9vw,12rem); align-items:center; padding:clamp(2rem,8vw,9rem); }
.core { max-width:660px; }
.eyebrow { margin:0 0:1rem; color:#64e4df; font-size:.67rem; font-weight:750; letter-spacing:.19em; }
h1 { margin:0; font-size:clamp(2.8rem,6.4vw,6rem); letter-spacing:-.07em; line-height:.89; }
h2 { margin:0 0 1rem; font-size:clamp(1.8rem,3vw,2.8rem); letter-spacing:-.045em; }
.intro { max-width:540px; color:#aebecb; font-size:1.05rem; line-height:1.7; margin:2rem 0; }
.orb { position:relative; width:12rem; height:12rem; margin:0 0 3rem; border:1px solid rgba(100,228,223,.16); border-radius:50%; box-shadow:0 0 100px rgba(78,226,215,.12), inset 0 0 55px rgba(80,157,250,.08); animation:breathe 5s ease-in-out infinite; }
.orb:before,.orb:after,.orb i { content:""; position:absolute; inset:14%; border:1px solid rgba(130,220,255,.23); border-radius:50%; transform:rotate(33deg) scaleX(.55); }
.orb:after { inset:24%; border-color:#ff9a40; transform:rotate(-52deg) scaleX(.42); box-shadow:0 0 35px rgba(255,132,45,.4); }
.orb i:nth-child(1) { inset:44%; background:#6ae7df; border:0; box-shadow:0 0 32px 13px rgba(75,229,218,.46); }
.orb i:nth-child(2) { inset:-7%; border-style:dashed; animation:spin 19s linear infinite; }
.orb i:nth-child(3) { inset:5%; border-color:rgba(255,152,67,.28); animation:spin 13s linear infinite reverse; }
.signals { display:flex; gap:clamp(1.1rem,4vw,4rem); margin:3rem 0 0; }
.signals div { min-width:110px; border-top:1px solid rgba(169,196,210,.22); padding-top:.75rem; }
dt { color:#8195a2; font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; } dd { margin:.4rem 0 0; font-size:.82rem; color:#6de0d9; }
.access { width:100%; max-width:420px; justify-self:end; padding:2.2rem; border:1px solid rgba(166,198,212,.19); background:rgba(12,21,31,.78); box-shadow:0 25px 90px rgba(0,0,0,.25); backdrop-filter:blur(16px); }
.access > p:not(.eyebrow) { color:#9eafb9; line-height:1.55; }
form { margin-top:2rem; } label { display:block; margin-bottom:.55rem; color:#aebcc5; font-size:.78rem; }
input { width:100%; padding:.85rem .9rem; border:1px solid #314452; background:#0a1119; color:#e9f4fa; font:inherit; outline:none; } input:focus { border-color:#64e4df; }
button { width:100%; margin-top:.8rem; padding:.9rem 1rem; border:1px solid #70efe7; background:#70efe7; color:#051116; font:700 .82rem inherit; cursor:pointer; } button:hover { background:#a2fff8; } button.quiet { border-color:#3a4c58; background:transparent; color:#b7c7d1; }
.button-link { display:block; width:100%; margin-top:1rem; padding:.9rem 1rem; border:1px solid #70efe7; background:#70efe7; color:#051116; font:700 .82rem inherit; text-align:center; text-decoration:none; }
.button-link:hover { background:#a2fff8; }
.notice { min-height:2.4rem; margin:1.35rem 0 0; color:#8ba3af; font-size:.8rem; line-height:1.45; }.notice.error{color:#ffb071}.notice.ok{color:#72e8c1}.identity{font-weight:650;color:#dcebf1;}
.cloud-home { margin-top:1.7rem; }
.session-label { margin:0 0 .6rem; color:#6de0d9; font-size:.67rem; font-weight:750; letter-spacing:.15em; }
.workspace-copy { margin:0; color:#d7e5eb; font-weight:620; line-height:1.45; }
.cloud-status { display:grid; gap:.65rem; margin:1.3rem 0; }
.cloud-status div { padding:.8rem .85rem; border:1px solid rgba(151,192,207,.17); background:rgba(6,14,22,.34); }
.cloud-status span { display:block; color:#8095a3; font-size:.61rem; font-weight:700; letter-spacing:.13em; }
.cloud-status strong { display:block; margin-top:.35rem; color:#81ede2; font-size:.84rem; }
.workspace-hint { margin:1.1rem 0 0; color:#91a4b0; font-size:.8rem; line-height:1.55; }
.local-hint { margin:.7rem 0 0; color:#8ba3af; font-size:.76rem; line-height:1.45; }
@keyframes breathe { 50% { transform:scale(1.06); filter:brightness(1.18); } } @keyframes spin { to { transform:rotate(360deg) scaleX(.55); } }
@media (max-width:760px) { .shell { grid-template-columns:1fr; gap:3rem; padding:2rem 1.4rem; }.access{justify-self:stretch;max-width:none}.signals{gap:1rem}.orb{width:8rem;height:8rem;margin-bottom:2rem} }