:root {
  --ink: #10110f;
  --ink-soft: #1a1c19;
  --paper: #e8e6dc;
  --paper-dim: #b8b6ab;
  --line: rgba(232, 230, 220, 0.17);
  --line-dark: rgba(16, 17, 15, 0.16);
  --signal: #d9ff43;
  --orange: #ff6840;
  --blue: #a9c7ff;
  --display: "Anybody", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mono);
  background:
    radial-gradient(circle at 72% 4%, rgba(217,255,67,.08), transparent 28rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--ink);
  background-size: auto, 32px 32px, 32px 32px, auto;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .12; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.eyebrow { margin: 0 0 .75rem; color: var(--signal); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.muted { color: #73766f; font-size: .72rem; }

.topbar {
  height: 76px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
  background: rgba(16,17,15,.86); backdrop-filter: blur(18px);
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 13px; }
.brand strong { display: block; font: 750 1.2rem/1 var(--display); letter-spacing: .08em; font-stretch: expanded; }
.brand small { display: block; margin-top: 6px; font-size: .52rem; letter-spacing: .17em; color: #8a8d85; }
.brand-orbit { width: 34px; height: 34px; border: 1px solid var(--paper); border-radius: 50%; display: grid; place-items: center; position: relative; }
.brand-orbit::after { content:""; position:absolute; width: 44px; height: 12px; border:1px solid var(--signal); border-radius:50%; transform:rotate(-22deg); }
.brand-orbit i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
.topbar-meta { display: flex; align-items: center; gap: 24px; }
.coordinate { color:#6f726b; font-size:.58rem; letter-spacing:.08em; }
.connection { border: 1px solid var(--line); background: transparent; color: var(--paper); padding: 9px 12px; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; display:flex; align-items:center; gap:8px; }
.connection i { width:7px; height:7px; border-radius:50%; background:var(--orange); }
.connection.online i { background:var(--signal); box-shadow:0 0 10px var(--signal); }

.shell { display: grid; grid-template-columns: 370px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.control-rail { border-right: 1px solid var(--line); padding: 34px 28px 60px; background: rgba(12,13,11,.56); }
.rail-heading h2 { margin:0 0 34px; font: 520 2.55rem/.91 var(--display); letter-spacing:-.055em; }
.rail-heading em, .workbench-head em { color:var(--signal); font-style:normal; }
.control-block { border-top:1px solid var(--line); padding:22px 0 25px; }
.control-label { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.control-label > span { color:var(--signal); font-size:.58rem; }
.control-label label, .control-label h3 { font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; }
.control-label small { margin-left:auto; color:#70736c; font-size:.56rem; }
.control-label button { margin-left:auto; color:#888b83; border:0; background:transparent; }

.dropzone {
  min-height:126px; border:1px dashed #4a4d46; background:rgba(255,255,255,.018); display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:7px; transition:.25s ease; outline:none; position:relative; overflow:hidden;
}
.dropzone::before { content:""; position:absolute; inset:8px; border:1px solid transparent; transition:.25s; }
.dropzone:hover, .dropzone.dragging, .dropzone:focus-visible { border-color:var(--signal); background:rgba(217,255,67,.035); }
.dropzone:hover::before, .dropzone.dragging::before { border-color:rgba(217,255,67,.16); }
.dropzone strong { font:600 .8rem var(--display); letter-spacing:.02em; }
.dropzone small { color:#686b64; font-size:.56rem; }
.drop-reticle { width:28px; height:28px; border:1px solid #61645d; border-radius:50%; display:grid; place-items:center; margin-bottom:3px; }
.drop-reticle::before,.drop-reticle::after { content:""; position:absolute; background:#61645d; }
.drop-reticle::before { width:38px; height:1px; }.drop-reticle::after { width:1px; height:38px; }
.drop-reticle span { width:5px; height:5px; background:var(--signal); border-radius:50%; }
.reference-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:7px; }
.reference-thumb { position:relative; aspect-ratio:1; background:#242621; overflow:hidden; animation:appear .35s both; }
.reference-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.reference-thumb button { position:absolute; top:3px; right:3px; width:19px; height:19px; border:0; border-radius:50%; color:var(--ink); background:var(--paper); padding:0; font-size:.7rem; opacity:0; transition:.2s; }
.reference-thumb:hover button { opacity:1; }

textarea, select, input[type="password"] { width:100%; border:1px solid #353832; color:var(--paper); background:#141613; outline:none; transition:.2s; }
textarea { resize:vertical; min-height:122px; padding:13px; font-size:.69rem; line-height:1.7; }
textarea:focus, select:focus, input:focus { border-color:var(--signal); box-shadow:0 0 0 2px rgba(217,255,67,.05); }
.field-note { color:#62655e; margin:9px 0 0; font-size:.55rem; line-height:1.55; }
.range-row { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.range-row > div { min-width:83px; }
.range-row strong { font:500 2.2rem/1 var(--display); }
.range-row small { display:block; color:#6e7169; font-size:.5rem; margin-top:5px; text-transform:uppercase; }
input[type="range"] { appearance:none; flex:1; height:2px; background:#3d4039; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border:3px solid var(--ink); background:var(--signal); border-radius:50%; box-shadow:0 0 0 1px var(--signal); }
.select-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.select-grid label span { display:block; font-size:.5rem; color:#686b64; text-transform:uppercase; margin-bottom:6px; }
select { padding:10px 8px; font-size:.62rem; appearance:none; background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); background-position:calc(100% - 12px) 14px,calc(100% - 8px) 14px;background-size:4px 4px;background-repeat:no-repeat; }
.button { border:0; padding:14px 18px; text-transform:uppercase; letter-spacing:.08em; font-size:.67rem; font-weight:500; }
.button-primary { background:var(--signal); color:var(--ink); transition:transform .18s,box-shadow .18s; }
.button-primary:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--paper); }
.launch-button { width:100%; display:flex; justify-content:space-between; align-items:center; padding:17px 18px; }
.launch-button b { font-size:1.1rem; }.launch-button:disabled { opacity:.35; pointer-events:none; }
.form-error { min-height:1rem; color:#ff8062; font-size:.58rem; line-height:1.45; }
.history-block { margin-top:28px; border-top:1px solid var(--line); padding-top:20px; }
.history-list { display:grid; gap:5px; }
.history-item { display:grid; grid-template-columns:1fr auto; gap:4px; padding:11px 10px; border:1px solid transparent; background:#151714; color:var(--paper); text-align:left; transition:.2s; }
.history-item:hover,.history-item.selected { border-color:#45483f; transform:translateX(3px); }
.history-item strong { font-size:.61rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.history-item span { grid-row:1/3; grid-column:2; align-self:center; width:7px; height:7px; border-radius:50%; background:#666; }
.history-item span.complete { background:var(--signal); }.history-item span.failed { background:var(--orange); }.history-item span.active { background:var(--blue); animation:pulse 1.2s infinite; }
.history-item small { color:#64675f; font-size:.51rem; }

.workbench { padding:42px clamp(26px,4vw,64px) 80px; min-width:0; }
.workbench-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:38px; }
.workbench-head h1 { margin:0; font:430 clamp(3rem,5.3vw,6.6rem)/.82 var(--display); letter-spacing:-.07em; max-width:820px; }
.job-stamp { border-left:1px solid var(--line); padding:2px 0 2px 18px; min-width:180px; }
.job-stamp span,.job-stamp small { display:block; color:#666a61; font-size:.49rem; letter-spacing:.12em; }
.job-stamp strong { display:block; margin:8px 0; font:500 .82rem var(--mono); color:var(--signal); }
.pipeline-track { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items:center; margin:0 0 28px; }
.phase { display:flex; align-items:center; gap:8px; color:#5f625b; transition:.3s; }
.phase i { width:26px; height:26px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.5rem; }
.phase span { font-size:.54rem; text-transform:uppercase; letter-spacing:.06em; }
.phase.active { color:var(--paper); }.phase.done { color:var(--signal); }
.track-line { height:1px; background:#30332d; margin:0 8px; position:relative; overflow:hidden; }.track-line b { display:block; width:0; height:100%; background:var(--signal); transition:width .55s; }
.track-line.done b { width:100%; }

.contact-panel,.model-panel { border:1px solid var(--line); background:rgba(22,24,20,.75); margin-bottom:18px; box-shadow:0 28px 90px rgba(0,0,0,.17); }
.panel-head { height:56px; border-bottom:1px solid var(--line); padding:0 15px; display:flex; align-items:center; justify-content:space-between; }
.panel-head > div { display:flex; align-items:center; gap:11px; }.panel-head h3 { margin:0; font:560 .75rem var(--display); letter-spacing:.04em; text-transform:uppercase; }
.panel-index { width:24px; height:24px; border:1px solid #4b4e46; display:grid; place-items:center; color:var(--signal); font-size:.56rem; }
.panel-tools { color:#6f726a; font-size:.53rem; letter-spacing:.07em; }
.panel-tools button { border:1px solid #3a3d36; background:transparent; color:#9b9e95; padding:8px 10px; font-size:.54rem; text-transform:uppercase; }
.panel-tools button:not(:disabled):hover { border-color:var(--signal); color:var(--signal); }
.panel-tools button:disabled { opacity:.3; cursor:not-allowed; }
.panel-tools .accent-action { color:var(--ink); background:var(--signal); border-color:var(--signal); }
.contact-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:#30332d; min-height:242px; }
.contact-frame { aspect-ratio:1; background:#11120f; position:relative; overflow:hidden; }
.contact-frame::before,.contact-frame::after { content:""; position:absolute; z-index:2; pointer-events:none; }
.contact-frame::before { inset:8px; border:1px solid rgba(255,255,255,.11); }
.contact-frame::after { width:10px;height:10px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(217,255,67,.25);border-radius:50%; }
.contact-frame img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; animation:develop .8s forwards; filter:saturate(.92) contrast(1.02); }
.contact-frame .angle { position:absolute; z-index:3; bottom:7px; left:8px; font-size:.47rem; color:rgba(255,255,255,.72); text-shadow:0 1px 4px #000; }
.contact-frame .frame-no { position:absolute; z-index:3; top:7px; right:8px; font-size:.43rem; color:var(--signal); }
.contact-frame.pending { background:linear-gradient(135deg,#181a16,#11120f); }
.contact-frame.pending i { position:absolute; width:42%; height:42%; left:29%; top:29%; border:1px dashed #30332d; border-radius:50%; }
.contact-frame.generating i { border-color:var(--signal); animation:spin 2s linear infinite; }
.coherence-bar { min-height:66px; display:grid; grid-template-columns:180px minmax(130px,250px) 1fr; align-items:center; gap:20px; padding:12px 16px; border-top:1px solid var(--line); }
.coherence-bar > div span { display:block; color:#666960; font-size:.47rem; letter-spacing:.1em; }.coherence-bar strong { font:500 .72rem var(--display); }
.meter { height:4px; background:#31342d; }.meter i { display:block; width:0;height:100%;background:var(--signal);box-shadow:0 0 12px rgba(217,255,67,.5);transition:width .7s; }
.coherence-bar p { margin:0;color:#65685f;font-size:.52rem;line-height:1.5; }

.viewport { height:clamp(400px,54vw,680px); position:relative; overflow:hidden; background:radial-gradient(circle at 50% 45%,#242821 0,#0c0e0c 65%); }
.viewport::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(217,255,67,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(217,255,67,.025) 1px,transparent 1px);background-size:28px 28px;z-index:0; }
#modelCanvas { width:100%;height:100%;display:block;position:relative;z-index:1; }
.viewport-empty { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:.4s; }
.viewport-empty.hidden { opacity:0; pointer-events:none; }
.viewport-empty strong { font:500 1.15rem var(--display);margin:18px 0 7px; }.viewport-empty p { max-width:390px;color:#62665d;font-size:.58rem;line-height:1.6;margin:0; }
.orbital-glyph { width:90px;height:90px;position:relative;display:grid;place-items:center; }.orbital-glyph i { position:absolute;inset:12px;border:1px solid #52564c;border-radius:50%; }.orbital-glyph i:nth-child(2){inset:28px -2px;transform:rotate(-28deg);border-color:var(--signal);}.orbital-glyph span{font:650 .85rem var(--display);}
.viewport-hud { position:absolute;z-index:3;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;color:#5e6258;font-size:.46rem;letter-spacing:.09em;pointer-events:none; }

.auth-gate { position:fixed;inset:0;z-index:90;background:rgba(9,10,8,.92);backdrop-filter:blur(22px);display:grid;place-items:center;padding:20px;transition:.45s; }
.auth-gate.hidden { opacity:0;pointer-events:none;visibility:hidden; }
.auth-card { width:min(460px,100%);padding:42px;border:1px solid #3c4037;background:#11130f;box-shadow:18px 18px 0 rgba(217,255,67,.08); }
.auth-card h1 { margin:0;font:500 4rem/.85 var(--display);letter-spacing:-.06em; }.auth-copy{color:#73776d;font-size:.64rem;line-height:1.7;margin:18px 0 28px;}
.auth-mark { display:flex;gap:4px;margin-bottom:28px; }.auth-mark span{display:block;width:22px;height:4px;background:var(--signal);}.auth-mark span:nth-child(2){width:9px;background:var(--paper)}.auth-mark span:nth-child(3){width:4px;background:var(--orange)}
.field span { display:block;font-size:.54rem;text-transform:uppercase;color:#73766e;margin-bottom:7px; }.auth-field input{padding:13px}.auth-button{width:100%;margin-top:10px;display:flex;justify-content:space-between;}

dialog { width:min(850px,calc(100% - 32px));height:min(650px,calc(100% - 32px));padding:0;border:1px solid #454940;background:#121410;color:var(--paper);box-shadow:0 40px 100px #000; }
dialog::backdrop { background:rgba(4,5,4,.82);backdrop-filter:blur(8px); }.dialog-head{height:78px;padding:0 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.dialog-head h3{margin:0;font:500 1.3rem var(--display)}.dialog-head .eyebrow{margin-bottom:4px}.dialog-head button{border:0;background:transparent;color:var(--paper);font-size:1.8rem}.dialog-head + pre{margin:0;padding:22px;height:calc(100% - 78px);overflow:auto;font:400 .65rem/1.7 var(--mono);color:#aeb4a6;white-space:pre-wrap;}
.toast { position:fixed;right:22px;bottom:22px;z-index:80;max-width:390px;background:var(--paper);color:var(--ink);padding:13px 16px;font-size:.61rem;transform:translateY(30px);opacity:0;transition:.3s;box-shadow:8px 8px 0 rgba(217,255,67,.35); }.toast.show{transform:none;opacity:1;}

@keyframes appear { from{opacity:0;transform:translateY(7px)} }
@keyframes develop { from{opacity:0;filter:brightness(3) grayscale(1)} to{opacity:1} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 50%{opacity:.3;box-shadow:0 0 12px var(--blue)} }

@media (max-width:1100px){.shell{grid-template-columns:320px 1fr}.control-rail{padding-inline:20px}.contact-grid{grid-template-columns:repeat(4,1fr)}.workbench-head h1{font-size:4rem}.coherence-bar{grid-template-columns:160px 1fr}.coherence-bar p{grid-column:1/-1}.phase span{display:none}}
@media (max-width:760px){.topbar{padding:0 16px}.coordinate{display:none}.shell{display:block}.control-rail{border-right:0;border-bottom:1px solid var(--line)}.workbench{padding:32px 14px 60px}.workbench-head{display:block}.job-stamp{margin-top:24px}.contact-grid{grid-template-columns:repeat(3,1fr)}.pipeline-track{overflow:auto;padding-bottom:6px}.phase{min-width:36px}.panel-tools>span{display:none}.coherence-bar{display:block}.meter{margin:12px 0}.viewport{height:430px}.viewport-hud span:last-child{display:none}.auth-card{padding:28px}.auth-card h1{font-size:3.2rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}