:root {
  color-scheme:dark;
  --paper:#e9e8e1;
  --muted:#989b94;
  --line:rgba(229,232,222,.14);
  --accent:#b7c5a7;
  --panel:rgba(20,22,20,.91);
  --visual-width:62vw;
}

* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; }
body { min-height:100svh; overflow-x:hidden; background:#101310; color:var(--paper); font-family:"Manrope",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }

/* The video-era ambient field is the continuous page background. */
.right-scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(circle at 66% 48%,rgba(92,101,84,.13),transparent 34%),linear-gradient(115deg,#151815,#101210 48%,#0c0e0d); }
.right-scene::before { position:absolute; inset:0; content:""; background-image:linear-gradient(rgba(220,225,214,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(220,225,214,.025) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,transparent,#000 28%,#000); }
#right-field-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s ease; }
.right-field-ready #right-field-canvas { opacity:1; }
.right-scene-vignette { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(13,15,13,.82),rgba(13,15,13,.18) 48%,rgba(8,10,9,.3)),radial-gradient(ellipse at center,transparent 38%,rgba(5,7,6,.56) 110%); }

/* Current interactive Lorenz scene, confined to the left and softly blended out. */
.scene { position:fixed; inset:0 auto 0 0; z-index:1; width:var(--visual-width); overflow:hidden; background:radial-gradient(circle at 51% 43%,rgba(68,71,106,.16),transparent 39%),radial-gradient(circle at 23% 72%,rgba(56,73,86,.1),transparent 36%); -webkit-mask-image:linear-gradient(90deg,#000 0 82%,rgba(0,0,0,.72) 89%,transparent 100%); mask-image:linear-gradient(90deg,#000 0 82%,rgba(0,0,0,.72) 89%,transparent 100%); }
.scene::before { position:absolute; inset:0; content:""; background-image:linear-gradient(rgba(185,192,205,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(185,192,205,.038) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:linear-gradient(90deg,#000 0 72%,transparent 100%),linear-gradient(to bottom,transparent 3%,#000 16%,#000 87%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#000 0 72%,transparent 100%),linear-gradient(to bottom,transparent 3%,#000 16%,#000 87%,transparent); mask-composite:intersect; }
#three-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s ease; }
.webgl-ready #three-canvas { opacity:1; }
.scene-vignette { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(7,9,8,.28),transparent 20%,transparent 82%,rgba(7,9,8,.08)),radial-gradient(ellipse at center,transparent 46%,rgba(4,6,5,.4) 115%); }
.static-math { position:absolute; inset:0; }
.formula { position:absolute; color:rgba(192,199,211,.1); font:400 10px/1 "DM Mono",monospace; letter-spacing:.08em; }
.formula-a { top:15%; right:8%; }
.formula-b { right:9%; bottom:10%; }
.formula-c { top:62%; left:4%; }

.page-shell { position:relative; z-index:2; display:grid; grid-template-rows:auto 1fr auto; width:100%; min-height:100svh; padding:28px clamp(24px,4vw,72px) 24px; }
.event-header,.page-footer { display:flex; align-items:center; justify-content:space-between; }
.identity { display:inline-flex; gap:13px; align-items:center; color:inherit; text-decoration:none; }
.delta-mark { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(231,233,225,.32); font:400 21px/1 Georgia,serif; }
.identity strong,.identity small { display:block; }
.identity strong { font-size:12px; letter-spacing:.24em; }
.identity small { margin-top:5px; color:var(--muted); font:400 8px/1 "DM Mono",monospace; letter-spacing:.12em; }
.round-index { display:flex; align-items:baseline; gap:12px; font-family:"DM Mono",monospace; }
.round-index span { color:var(--muted); font-size:9px; letter-spacing:.22em; }
.round-index strong { font-size:24px; font-weight:400; }

/* Exact video-era shell proportions; current left content is transplanted inside it. */
.login-layout { display:grid; grid-template-columns:minmax(360px,1fr) minmax(340px,430px); gap:clamp(48px,9vw,170px); align-items:center; width:min(1180px,100%); margin:0 auto; padding:58px 0 40px; }
.event-copy { position:relative; z-index:2; align-self:stretch; display:flex; flex-direction:column; min-width:0; padding:clamp(36px,7vh,76px) 0 6px; pointer-events:none; }
.overline { margin:0 0 20px; color:#aeb7d9; font:500 8px/1 "DM Mono",monospace; letter-spacing:.24em; }
.event-copy h1 { margin:0; max-width:620px; color:#e5e5de; font:500 clamp(43px,4.5vw,76px)/.96 "Manrope",sans-serif; letter-spacing:-.06em; text-shadow:0 2px 24px rgba(5,7,6,.7); }
.event-copy h1 em { color:#b5b9ad; font-family:Georgia,serif; font-weight:400; }
.event-description { margin:17px 0 0; color:#a1a59e; font-size:11px; line-height:1.7; letter-spacing:.045em; text-shadow:0 1px 12px #090b09; }
.event-description + .event-description { margin-top:0; }
.graph-readout { display:flex; gap:clamp(28px,4vw,68px); width:min(570px,100%); margin-top:auto; padding-top:24px; border-top:1px solid rgba(211,215,205,.18); }
.graph-readout div { display:grid; gap:8px; }
.graph-readout span { color:#858b84; font:500 7px/1 "DM Mono",monospace; letter-spacing:.18em; }
.graph-readout strong { color:#d3d7ce; font:400 11px/1 "DM Mono",monospace; letter-spacing:.05em; }
.graph-readout b { color:#b6b4e7; font-weight:500; }
.trajectory-legend { display:flex; gap:24px; margin-top:17px; color:#a4a9a1; font:400 9px/1 "DM Mono",monospace; }
.trajectory-legend span { display:flex; align-items:center; gap:8px; }
.trajectory-legend i { width:24px; height:1px; background:#83a4da; box-shadow:0 0 7px rgba(86,122,182,.3); }
.trajectory-legend .legend-delta i { background:#aa8ed9; box-shadow:0 0 7px rgba(137,101,190,.3); }

.login-card { align-self:center; width:100%; padding:31px 32px 25px; border:1px solid rgba(224,228,217,.16); background:var(--panel); box-shadow:0 26px 70px rgba(0,0,0,.35); transform:perspective(1200px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); transform-origin:center; }
.card-meta,.card-footer { display:flex; align-items:center; justify-content:space-between; color:#858981; font:500 8px/1 "DM Mono",monospace; letter-spacing:.16em; }
.system-state { display:flex; align-items:center; gap:7px; }
.system-state i { width:5px; height:5px; border-radius:50%; background:#9daf8c; box-shadow:0 0 7px rgba(157.0575,140,.45); }
.login-card h2 { margin:42px 0 9px; font-size:27px; font-weight:600; letter-spacing:-.035em; }
.login-description { margin:0 0 31px; color:var(--muted); font-size:11px; line-height:1.6; }
.field { margin-bottom:18px; }
.field label { display:block; margin:0 0 8px; color:#a9ada5; font:500 8px/1 "DM Mono",monospace; letter-spacing:.16em; }
.field input { display:block; width:100%; height:48px; padding:0 14px; border:1px solid rgba(224,228,217,.17); border-radius:0; outline:none; background:rgba(8,10,9,.72); color:var(--paper); font-size:12px; transition:border-color .2s,background .2s; }
.field input::placeholder { color:#555a54; }
.field input:focus { border-color:rgba(183,197,167,.62); background:rgba(7,9,8,.9); }
.submit { display:flex; align-items:center; justify-content:space-between; width:100%; height:49px; margin-top:6px; padding:0 16px; border:1px solid #c5c9be; border-radius:0; cursor:pointer; background:#d6d8cf; color:#151714; font:600 9px/1 "DM Mono",monospace; letter-spacing:.15em; transition:background .2s,transform .2s; }
.submit:hover { background:#eceee5; transform:translateY(-1px); }
.submit:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.submit:disabled { cursor:wait; opacity:.68; transform:none; }
.err { min-height:16px; margin:11px 0 0; color:#d6a49b; font-size:10px; line-height:1.5; }
.spectator-link { display:flex; align-items:center; justify-content:center; width:100%; min-height:43px; margin-top:8px; border:1px solid rgba(183,197,167,.27); color:#aeb4aa; background:rgba(8,10,9,.28); text-decoration:none; font:500 8px/1 "DM Mono",monospace; letter-spacing:.16em; transition:border-color .2s,color .2s,background .2s; }
.spectator-link:hover { border-color:rgba(183,197,167,.46); color:#d3d7ce; background:rgba(183,197,167,.045); }
.spectator-link:focus-visible { outline:2px solid rgba(183,197,167,.72); outline-offset:3px; }
.card-footer { margin-top:21px; padding-top:18px; border-top:1px solid var(--line); font-size:7px; }
.page-footer { color:#656962; font:400 8px/1 "DM Mono",monospace; letter-spacing:.17em; }

@media (min-width:821px) {
  .page-shell { width:calc(100% / 1.0575); min-height:calc(100svh / 1.0575); margin:0 auto; transform:scale(1.0575); transform-origin:top center; }
}

@media (max-width:1050px) and (min-width:821px) {
  :root { --visual-width:61vw; }
  .login-layout { gap:clamp(42px,6vw,76px); }
  .event-copy h1 { font-size:clamp(40px,5vw,58px); }
  .login-card { width:min(400px,100%); padding-left:27px; padding-right:27px; }
}

@media (max-width:820px) {
  :root { --visual-width:100vw; }
  body { background:#0c0f0d; }
  .right-scene { display:none; }
  .scene { width:100%; height:390px; bottom:auto; -webkit-mask-image:linear-gradient(to bottom,#000 0 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0 78%,transparent 100%); background:radial-gradient(circle at 52% 43%,rgba(68,71,106,.16),transparent 41%),linear-gradient(135deg,#141815,#0d1110 72%); }
  .scene::before { background-size:48px 48px; -webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 16%,#000 87%,transparent); mask-image:linear-gradient(to bottom,transparent 3%,#000 16%,#000 87%,transparent); }
  .scene-vignette { background:linear-gradient(to bottom,rgba(7,9,8,.16),rgba(8,10,9,.25) 58%,#0c0f0d 100%); }
  .page-shell { padding:0; }
  .event-header,.page-footer { padding-left:20px; padding-right:20px; }
  .event-header { padding-top:20px; }
  .page-footer { padding-bottom:17px; }
  .login-layout { grid-template-columns:1fr; gap:0; width:100%; margin:-58px 0 -39px; padding:0 0 39px; background:linear-gradient(to bottom,transparent 0 390px,#0c0f0d 390px 100%); }
  .event-copy { min-height:390px; padding:92px 20px 25px; text-align:center; }
  .overline { margin-bottom:13px; font-size:7px; }
  .event-copy h1 { max-width:560px; margin:0 auto; font-size:clamp(39px,11.5vw,58px); }
  .event-description { margin-top:10px; }
  .graph-readout { justify-content:center; width:min(450px,100%); margin:0 auto; padding-top:14px; }
  .trajectory-legend { justify-content:center; margin-top:12px; }
  .login-card { width:min(440px,calc(100% - 40px)); margin:27px auto 24px; padding:25px 23px 20px; transform:none; }
  .login-card h2 { margin-top:29px; }
  .page-footer { justify-content:center; text-align:center; }
  .coordinates { display:none; }
  .formula-a { top:12%; right:5%; }
  .formula-b { right:5%; bottom:5%; }
  .formula-c { display:none; }
}

@media (max-height:760px) and (min-width:821px) {
  .page-shell { padding-top:20px; padding-bottom:17px; }
  .login-layout { padding:25px 0 18px; }
  .event-copy { padding-top:28px; padding-bottom:2px; }
  .event-copy h1 { font-size:clamp(39px,4.3vw,61px); }
  .login-card { padding-top:25px; padding-bottom:20px; }
  .login-card h2 { margin-top:29px; }
  .login-description { margin-bottom:22px; }
  .field { margin-bottom:13px; }
}

@media (max-width:430px) {
  .identity small,.round-index span,.event-description { display:none; }
  .scene { height:350px; }
  .login-layout { background:linear-gradient(to bottom,transparent 0 350px,#0c0f0d 350px 100%); }
  .event-copy { min-height:350px; padding-top:85px; padding-bottom:19px; }
  .event-copy h1 { font-size:clamp(34px,10.3vw,44px); }
  .graph-readout { gap:20px; }
  .graph-readout strong { font-size:9px; }
  .trajectory-legend { margin-top:10px; }
  .login-card { margin-top:22px; transform:translateY(-88px); }
  .login-card h2 { font-size:24px; }
  .spectator-link { min-height:45px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}