:root { --ink: #ebebf2; --muted: #8c8e9f; --line: rgba(235,235,242,.15); --deep: #111321; --panel: rgba(25,28,47,.75); --violet: #bcaaff; --coral: #f78b75; --mint: #9ce0c4; --gold: #f5d58c; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--deep); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; } button { cursor: pointer; }
.ambient-glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 76% 38%, rgba(120,112,214,.16), transparent 35%), radial-gradient(circle at 12% 90%, rgba(57,133,153,.13), transparent 27%); }
.app-shell { position: relative; max-width: 1480px; min-height: 100vh; margin: auto; padding: 0 5vw; }
.project-nav { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.back-link { color: var(--muted); transition: color .2s; }.back-link:hover { color: var(--ink); }
.project-id { display: flex; align-items: center; gap: 15px; }.project-id span { color: var(--muted); }.project-id strong { color: var(--violet); font-weight: 400; }
.nav-status { color: var(--muted); }.nav-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-right: 8px; box-shadow: 0 0 13px var(--mint); }
.orbit-layout { display: grid; grid-template-columns: minmax(285px, .7fr) minmax(560px, 1.3fr); gap: 7vw; align-items: center; min-height: calc(100vh - 84px); padding: 65px 0 75px; }
.eyebrow, .console-top, .ledger-head, .console-bottom, .copy-note, .field-coordinate { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { color: var(--violet); margin: 0 0 27px; }.orbit-copy h1 { margin: 0 0 29px; font-size: clamp(62px, 8vw, 113px); line-height: .8; letter-spacing: -.09em; font-weight: 600; }.orbit-copy h1 em { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.09em; color: var(--violet); }
.lede { max-width: 350px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.orbit-form { margin-top: 64px; }.orbit-form label { display: block; margin-bottom: 12px; color: #babcca; font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }.input-wrap { display: flex; border-bottom: 1px solid rgba(235,235,242,.45); }.input-wrap input { min-width: 0; flex: 1; padding: 14px 0; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 17px; }.input-wrap input::placeholder { color: #5d6072; }.input-wrap button { border: 0; background: transparent; color: var(--violet); padding: 0 0 0 16px; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }.input-wrap button span { display: inline-block; margin-left: 7px; transition: transform .2s; }.input-wrap button:hover span { transform: translate(3px,-3px); }
.tone-picker { display: flex; align-items: center; gap: 11px; margin-top: 20px; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.tone-picker > span { margin-right: 5px; }.tone { width: 17px; height: 17px; padding: 0; border: 1px solid transparent; border-radius: 50%; transition: transform .2s, box-shadow .2s; }.tone:hover, .tone.is-selected { transform: scale(1.25); box-shadow: 0 0 0 4px var(--deep), 0 0 0 5px var(--ink); }.tone-violet { background: var(--violet); }.tone-coral { background: var(--coral); }.tone-mint { background: var(--mint); }.tone-gold { background: var(--gold); }
.copy-note { display: flex; gap: 13px; color: #606375; line-height: 1.6; margin-top: 68px; }.note-line { display: block; width: 37px; height: 1px; margin-top: 6px; background: var(--violet); }
.orbit-console { min-width: 0; padding: 20px 24px 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 25px 100px rgba(0,0,0,.2); }.console-top, .console-bottom, .ledger-head { display: flex; justify-content: space-between; color: var(--muted); }.console-top { padding-bottom: 16px; border-bottom: 1px solid var(--line); }.console-top span:last-child { color: var(--violet); }
.field-wrap { position: relative; height: min(62vh, 570px); min-height: 380px; margin: 18px 0 22px; border: 1px solid rgba(235,235,242,.08); overflow: hidden; background: radial-gradient(circle at 50% 47%, rgba(112,105,186,.21), transparent 36%), #131728; }.field-wrap:before { content: ''; position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(235,235,242,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(235,235,242,.07) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }.field-wrap:after { content: ''; position: absolute; width: 70%; aspect-ratio: 1; left: 15%; top: 11%; border: 1px solid rgba(188,170,255,.17); border-radius: 50%; box-shadow: 0 0 0 72px rgba(188,170,255,.025), 0 0 0 145px rgba(188,170,255,.018); pointer-events: none; }
#orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }.field-center { position: absolute; top: 50%; left: 50%; z-index: 1; width: 148px; min-height: 148px; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 17px; text-align: center; border: 1px solid rgba(188,170,255,.48); border-radius: 50%; background: rgba(17,19,33,.78); box-shadow: 0 0 45px rgba(188,170,255,.14); }.center-kicker { color: var(--violet); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .09em; }.field-center strong { max-width: 120px; margin-top: 9px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.field-center small { max-width: 130px; margin-top: 7px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.field-coordinate { position: absolute; z-index: 2; color: #606477; }.coordinate-a { top: 13px; left: 14px; }.coordinate-b { right: 14px; bottom: 13px; }
.ledger-head { padding-bottom: 13px; font-size: 9px; }.ledger-head button { padding: 0; border: 0; background: transparent; color: #65687b; font: inherit; text-transform: uppercase; letter-spacing: inherit; }.ledger-head button:hover { color: var(--coral); }.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 58px; }.ledger-empty { grid-column: 1 / -1; padding: 11px 0 7px; color: #606375; font-size: 11px; }.ledger-item { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 10px 8px; border: 1px solid rgba(235,235,242,.1); color: #b9bac5; font-size: 11px; }.ledger-item i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; }.ledger-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.console-bottom { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 9px; }.console-bottom span:last-child { color: #616477; }
@media (max-width: 900px) { .orbit-layout { grid-template-columns: 1fr; gap: 58px; padding-top: 60px; }.orbit-copy { max-width: 570px; }.orbit-form { margin-top: 45px; }.copy-note { margin-top: 38px; }.orbit-console { width: 100%; } }
@media (max-width: 560px) { .app-shell { padding: 0 19px; }.project-id span, .nav-status { display: none; }.project-nav { height: 69px; }.orbit-layout { min-height: auto; padding: 56px 0 45px; }.orbit-copy h1 { font-size: 76px; }.orbit-console { padding: 15px 13px 14px; }.field-wrap { min-height: 330px; height: 74vw; }.ledger { grid-template-columns: 1fr; }.ledger-item:nth-child(n+4) { display: none; }.console-bottom { gap: 8px; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }