@font-face {
  font-family: "Silkscreen8";
  src: url("assets/fonts/Silkscreen-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "GilRaster";
  src: url("assets/fonts/VT323-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JanRaster16";
  src: url("assets/fonts/DotGothic16-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --era-ok: #22a36a;
  --era-warn: #d18b22;
  --era-bad: #cf4b4b;
  --era-info: #297fc4;
  --era-ink: #171a1d;
  --era-paper: #f4f1e9;
  --era-shadow: 0 24px 70px rgba(25, 30, 35, 0.18);
}

* { box-sizing: border-box; }

body.interface-preview {
  margin: 0;
  color: #202327;
  background:
    radial-gradient(circle at 18% 8%, rgba(83, 149, 138, 0.12), transparent 34rem),
    linear-gradient(145deg, #f4f3ef, #e7ebe9 55%, #dde4e1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview-page { width: min(1560px, calc(100% - 56px)); margin: 0 auto; padding: 54px 0 90px; }
.preview-topnav{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 42px}.preview-topnav a,.preview-topnav span{padding:8px 11px;border:1px solid #c9d0cd;border-radius:8px;background:rgba(255,255,255,.64);color:#355d58;text-decoration:none;font:700 11px/1.2 ui-monospace,monospace;text-transform:uppercase}.preview-topnav span{margin-left:auto;color:#68706e}
.preview-kicker { margin: 0 0 10px; color: #437067; font: 700 12px/1.2 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.preview-title { max-width: 920px; margin: 0; font-size: clamp(38px, 5vw, 74px); line-height: .98; letter-spacing: -.055em; }
.preview-intro { max-width: 820px; margin: 24px 0 32px; color: #5e6664; font-size: 18px; line-height: 1.65; }
.preview-note { display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid #c9d0cd; background: rgba(255,255,255,.58); color: #59615f; font-size: 13px; }
.preview-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--era-ok); box-shadow: 0 0 0 4px rgba(34,163,106,.12); }

.preview-section { margin-top: 70px; }
.preview-section-head { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(380px,1.25fr); gap: 42px; align-items: end; margin-bottom: 22px; }
.preview-section h2 { margin: 0; font-size: clamp(30px, 3vw, 46px); letter-spacing: -.045em; }
.preview-section-head p { margin: 0; color: #68706e; line-height: 1.6; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.preview-grid.preview-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-card { overflow: hidden; border: 1px solid rgba(68,78,74,.2); background: rgba(255,255,255,.6); box-shadow: var(--era-shadow); }
.preview-card-meta { display: flex; justify-content: space-between; gap: 20px; padding: 14px 16px; border-bottom: 1px solid rgba(68,78,74,.14); color: #5f6966; font: 650 11px/1.2 ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.preview-card-meta strong { color: #252a28; }
.preview-stage { min-height: 470px; display: grid; place-items: center; padding: clamp(18px, 3vw, 42px); background: #eef0ed; }

.era-window { width: 100%; max-width: 690px; overflow: hidden; }
.era-titlebar { display: flex; align-items: center; min-height: 38px; padding: 0 12px; }
.era-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.era-controls { display: flex; gap: 7px; margin-left: auto; }
.era-body { min-height: 320px; padding: 24px; }
.era-mono { font-family: "Courier New", "Liberation Mono", ui-monospace, monospace; }
.era-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.era-label { opacity: .68; }
.era-ok { color: var(--era-ok); }
.era-warn { color: var(--era-warn); }
.era-bad { color: var(--era-bad); }
.era-cursor { display: inline-block; width: .72em; height: 1.05em; transform: translateY(.16em); background: currentColor; animation: era-blink 1s steps(1) infinite; }
.era-typed { width: 0; max-width: max-content; overflow: hidden; white-space: nowrap; animation: era-type 1.35s steps(38,end) .25s forwards; }
.era-delay-1 { opacity: 0; animation: era-line .25s ease-out 1.7s forwards; }
.era-delay-2 { opacity: 0; animation: era-line .25s ease-out 2.12s forwards; }
.era-delay-3 { opacity: 0; animation: era-line .25s ease-out 2.54s forwards; }
@keyframes era-blink { 50% { opacity: 0; } }
@keyframes era-type { to { width: 100%; } }
@keyframes era-line { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* JAN — FoxPro-for-DOS-inspired xBase IDE: mature, keyboard-led and text-mode. */
.jan-crt { position:relative;width:100%;max-width:760px;padding:28px 30px 48px;border:3px solid #777a71;border-radius:28px 28px 22px 22px;background:linear-gradient(145deg,#d4d2c3,#999c91);box-shadow:inset 4px 4px rgba(255,255,255,.5),inset -5px -5px rgba(52,56,52,.2),0 28px 65px rgba(0,0,0,.28) }
.jan-crt::before{content:"JAN TRAINING DISPLAY · 80×25";position:absolute;left:35px;bottom:17px;color:#575b55;font:9px/1 Silkscreen8,monospace;letter-spacing:0}
.jan-crt::after{content:"";position:absolute;right:35px;bottom:16px;width:9px;height:9px;border-radius:50%;background:#42de6a;box-shadow:0 0 8px rgba(66,222,106,.55),-20px 0 0 #5e625c}
.jan-crt-base{width:42%;height:17px;margin:-1px auto 0;border:2px solid #777a71;border-top:0;border-radius:0 0 60% 60%;background:#96998f;box-shadow:0 10px 20px rgba(0,0,0,.18)}
.era-dos { border: 5px solid #252825; border-radius:24px/18px; background: #b7b7b7; box-shadow: inset 0 0 30px rgba(83,210,255,.1), inset 0 0 0 2px #eefcff; color: #fff; }
.era-dos .era-titlebar { justify-content:center;border-bottom: 2px solid #000; background: #d7d7d7; color:#000;font: 13px/1 "Silkscreen8", monospace; letter-spacing: 0; }
.era-dos .era-controls { display: none; }
.era-dos .era-body { position: relative; min-height:280px;padding:18px;background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(117,211,255,.025) 3px 4px), #0000aa; font: 13px/1.58 "Silkscreen8", monospace; letter-spacing:0; text-shadow: 0 0 5px rgba(142,221,255,.22); }
.era-dos .era-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse, transparent 58%, rgba(0,0,0,.34)); }
.era-dos .era-ok, .era-dos .era-warn, .era-dos .era-bad { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.era-dos .era-cursor{width:.75em;height:1em;transform:none;background:transparent;font-style:normal}
.era-dos .era-cursor::after{content:"_"}
.jan-agent-glyph{position:relative;display:inline-block;width:13px;height:13px;margin-right:8px;border:2px solid #4b285e;background:#db68cc;vertical-align:-2px;image-rendering:pixelated;box-shadow:inset 0 -3px #954695}
.jan-agent-glyph::before{content:"";position:absolute;left:2px;top:3px;width:2px;height:2px;background:#120f13;box-shadow:5px 0 #120f13}
.jan-agent-glyph::after{content:"";position:absolute;left:3px;bottom:2px;width:4px;border-bottom:2px solid #120f13}
.jan-command{color:#ffff55}.jan-incoming{padding:7px 9px;border:1px solid #ffff55;color:#fff;background:#000080}
.dos-menu{display:flex;gap:19px;padding:6px 12px;border-bottom:2px solid #fff;background:#b7b7b7;color:#000;font:10px/1 Silkscreen8,monospace}.dos-menu span:first-letter{text-decoration:underline}
.dos-workspace{display:grid;grid-template-columns:1fr 148px;gap:12px}.dos-editor,.dos-watch{position:relative;padding:27px 12px 12px;border:2px solid #fff;background:#0000aa}.dos-watch{background:#000080}.dos-editor>b,.dos-watch>b{position:absolute;top:-7px;left:50%;padding:1px 7px;transform:translateX(-50%);background:#d7d7d7;color:#000;font-size:9px;white-space:nowrap;text-shadow:none}.dos-status{display:flex;justify-content:space-between;padding:5px 9px;border-top:2px solid #fff;background:#000080;color:#fff;font:9px/1 Silkscreen8,monospace}.dos-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;padding:2px;background:#000;color:#000;font:8px/1.2 Silkscreen8,monospace}.dos-keys span{padding:5px;background:#d7d7d7;text-align:center}.dos-keys b{color:#000080}
.jan-training-stage{min-height:620px;background:radial-gradient(circle at 50% 40%,#5c625b,#242724 72%)}
.jan-tape-shell{width:min(100%,850px);padding:28px 32px 42px;border:3px solid #74776f;border-radius:30px 30px 20px 20px;background:linear-gradient(145deg,#c9c7b8,#8b8e84);box-shadow:inset 5px 5px rgba(255,255,255,.4),inset -6px -6px rgba(41,45,41,.25),0 30px 75px rgba(0,0,0,.45)}
.jan-tape-screen{position:relative;aspect-ratio:4/3;overflow:hidden;border:9px solid #202620;border-radius:40px/30px;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(94,255,136,.045) 3px 4px),radial-gradient(ellipse,#092714,#001107 68%);color:#75ff98;box-shadow:inset 0 0 70px #000,inset 0 0 16px rgba(53,255,107,.28);font-family:Silkscreen8,monospace;text-shadow:0 0 8px rgba(78,255,123,.35)}
.jan-tape-screen::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,transparent 55%,rgba(0,0,0,.46));pointer-events:none}
.jan-tape-tracking{position:absolute;top:24px;left:29px;right:29px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em}
.jan-tape-clock{position:absolute;top:62px;left:29px;right:29px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;font-size:11px}.jan-tape-clock i{height:7px;border:1px solid #75ff98;background:linear-gradient(90deg,#75ff98 0 8%,transparent 8%)}
.jan-tape-title{position:absolute;inset:0;display:grid;place-content:center;padding:70px;text-align:left}.jan-tape-title small{font-size:11px;letter-spacing:.14em}.jan-tape-title h3{margin:18px 0 12px;font:400 clamp(35px,5.25vw,68px)/1.05 JanRaster16,Silkscreen8,monospace;letter-spacing:.015em}.jan-tape-title p{margin:0;font-size:12px}.jan-tape-rule{width:68%;height:5px;margin:0 0 17px;background:#75ff98}
.jan-tape-lower{position:absolute;left:29px;right:29px;bottom:27px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #75ff98;font-size:10px}.jan-tape-lower span,.jan-tape-lower strong{padding:10px;text-align:center;border-right:1px solid #75ff98}.jan-tape-lower strong{border:0;background:#75ff98;color:#001107}
.jan-tape-label{padding-top:17px;color:#4c504b;text-align:center;font:10px/1 Silkscreen8,monospace}

/* Current Jan tape language: inherited CRT, current blue xBase player. */
.jan-tape-screen{background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(117,211,255,.035) 3px 4px),radial-gradient(ellipse,#0000aa,#00005f 72%);color:#fff;box-shadow:inset 0 0 70px #000,inset 0 0 16px rgba(83,210,255,.24);text-shadow:0 0 7px rgba(142,221,255,.28)}
.jan-tape-dos-title{position:absolute;z-index:2;left:0;right:0;top:0;padding:10px;background:#d7d7d7;color:#000;text-align:center;font-size:10px;text-shadow:none}
.jan-tape-dos-menu{position:absolute;z-index:2;left:0;right:0;top:31px;display:flex;gap:25px;padding:7px 20px;background:#b7b7b7;color:#000;font-size:9px;text-shadow:none}.jan-tape-dos-menu span:first-letter{text-decoration:underline}
.jan-tape-tracking{top:72px;font-size:10px}.jan-tape-clock{top:101px;font-size:10px}.jan-tape-clock i{border-color:#fff;background:linear-gradient(90deg,#ffff55 0 8%,transparent 8%)}
.jan-tape-title{padding:105px 70px 65px}.jan-tape-rule{background:#ffff55}
.jan-tape-lower{border-color:#fff;font-size:9px}.jan-tape-lower span,.jan-tape-lower strong{border-color:#fff;background:#d7d7d7;color:#000;text-shadow:none}.jan-tape-lower strong{background:#ffff55;color:#000080}

/* GIL — Windows 95 shell, one generation ahead but still plainly legacy. */
.era-win95 { border: 3px outset #fff; background: #c0c0c0; box-shadow: 12px 12px 0 rgba(0,0,0,.22), var(--era-shadow); }
.era-win95 .era-titlebar { margin: 3px; background: #000080; color: white; font: 700 15px/1 Tahoma, "MS Sans Serif", sans-serif; }
.era-win95 .era-controls span { display: grid; place-items: center; width: 25px; height: 23px; border: 2px outset #fff; background: #c0c0c0; color: #111; font: 700 13px/1 Tahoma, sans-serif; }
.era-win95 .era-body { margin: 0 5px 5px; border: 2px inset #e8e8e8; background: #050505; color: #cacaca; font: 18px/1.58 "Cousine", "Lucida Console", "Courier New", monospace; letter-spacing:0; }
.era-win95 .era-ok { color: #55ff55; }.era-win95 .era-warn { color: #ffff55; }.era-win95 .era-bad { color: #ff5555; }
.cast-sprite{--sprite:#55d979;position:relative;display:inline-block;width:18px;height:16px;margin-right:7px;border:2px solid color-mix(in srgb,var(--sprite),#000 58%);border-radius:3px 3px 5px 5px;background:var(--sprite);vertical-align:-2px;image-rendering:pixelated;box-shadow:inset 0 -4px color-mix(in srgb,var(--sprite),#000 20%)}
.cast-sprite::before{content:"";position:absolute;left:3px;top:4px;width:3px;height:3px;background:#111;box-shadow:7px 0 #111}
.cast-sprite::after{content:"";position:absolute;left:5px;bottom:2px;width:5px;height:2px;border-bottom:2px solid rgba(0,0,0,.72)}
.cast-sprite.blue{--sprite:#63a7ff}.cast-sprite.orange{--sprite:#ed9658}.cast-sprite.pink{--sprite:#e984ae}.cast-sprite.amber{--sprite:#dfc45a}
.gil-deck-stage{min-height:560px;padding:34px;background:#747474}
.win95-desktop{position:relative;width:100%;max-width:1080px;min-height:490px;padding:24px 26px 54px;background:#008080;box-shadow:0 24px 62px rgba(0,0,0,.32)}
.ppt-window{position:relative;z-index:2;width:88%;margin:92px 0 0 9%;border:3px outset #fff;background:#c0c0c0;box-shadow:10px 10px 0 rgba(0,0,0,.22)}
.ppt-titlebar{display:flex;align-items:center;min-height:36px;padding:5px 9px;background:#000080;color:#fff;font:700 14px/1 Tahoma,sans-serif}.ppt-titlebar span:last-child{margin-left:auto;color:#000;padding:3px 7px;border:2px outset #fff;background:#c0c0c0;font-family:Tahoma,sans-serif}
.ppt-menu{display:flex;gap:22px;padding:8px 12px;border-bottom:2px groove #fff;font:13px/1 Tahoma,sans-serif}.ppt-menu u{text-underline-offset:2px}
.ppt-workspace{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:12px;background:#8c8c8c}
.ppt-thumbs{padding:8px;border:2px inset #fff;background:#c0c0c0}.ppt-thumb{height:76px;margin-bottom:10px;padding:6px;border:2px solid #111;background:#fff;color:#222;font:11px/1.2 "Cousine",monospace}.ppt-thumb.active{outline:3px solid #000080}
.ppt-canvas{display:grid;place-items:center;min-height:310px;padding:22px;border:2px inset #fff;background:#696969}
.ppt-slide{position:relative;width:min(100%,690px);aspect-ratio:16/9;overflow:hidden;padding:38px 42px;border:2px solid #111;background:#eee;color:#101010;box-shadow:5px 5px 0 rgba(0,0,0,.32)}
.ppt-slide::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 31px,rgba(0,0,128,.08) 31px 32px),repeating-linear-gradient(0deg,transparent 0 31px,rgba(0,0,128,.08) 31px 32px)}
.ppt-slide h3{position:relative;margin:0;color:#000080;font:700 clamp(22px,3vw,42px)/1.05 Tahoma,sans-serif;letter-spacing:-.04em}.ppt-slide .retro-rule{position:relative;width:72%;height:6px;margin:13px 0 19px;background:#008080;box-shadow:7px 7px 0 #c0c0c0}.ppt-cast-row{position:relative;display:grid;grid-template-columns:26px 105px 1fr;align-items:center;margin:7px 0;padding:6px 8px;border:2px solid #808080;background:#fff;font:16px/1.1 "Cousine","Lucida Console",monospace}.ppt-cast-row strong{color:#000080}.ppt-cast-row.alert{border-color:#800000;background:#fff2d8}.ppt-footer{position:absolute;left:42px;right:42px;bottom:14px;display:flex;justify-content:space-between;color:#555;font:11px/1 Tahoma,sans-serif}.win95-taskbar{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;align-items:center;height:39px;padding:4px;border-top:3px outset #fff;background:#c0c0c0;font:700 13px/1 Tahoma,sans-serif}.start-button,.task-app{padding:6px 11px;border:2px outset #fff}.task-app{min-width:124px;margin-left:5px;white-space:nowrap;overflow:hidden}.task-app.active{border-style:inset;background:#dedede}.task-clock{margin-left:auto;padding:6px 10px;border:2px inset #fff;font-weight:400}.desktop-icon{position:absolute;right:18px;width:68px;color:#fff;text-align:center;text-shadow:1px 1px #000;font:12px/1.2 Tahoma,sans-serif}.desktop-icon::before{content:"";display:block;width:29px;height:29px;margin:0 auto 5px;border:2px solid #111;background:linear-gradient(135deg,#fff 0 47%,#f2cf56 48%);box-shadow:2px 2px #111}.desktop-icon--agents{top:17px}.desktop-icon--terminal{top:94px}.desktop-icon--terminal::before{background:#050505;box-shadow:inset 0 0 0 3px #c0c0c0,2px 2px #111}.gil-terminal-window{position:absolute;z-index:1;left:22px;top:20px;width:70%;border:3px outset #fff;background:#c0c0c0;box-shadow:7px 7px 0 rgba(0,0,0,.2)}.gil-terminal-body{min-height:116px;margin:0 5px 5px;padding:13px 15px;border:2px inset #fff;background:#050505;color:#cacaca;font:13px/1.55 "Cousine","Lucida Console",monospace}.gil-terminal-body span{color:#55ff55}.terminal-block{margin-left:3px;animation:era-blink 1s steps(1) infinite}

.gil-terminal-window--primary{left:6%;top:34px;width:86%}.gil-terminal-body--primary{min-height:390px;padding:25px 28px;font-size:17px;line-height:1.62}.gil-terminal-body--primary small{color:#7f7f7f;font:inherit}.gil-terminal-body--primary .cast-sprite{margin-top:10px}

/* SAM / SITTER — a 2024 laptop displaying an intentionally retro client. */
.era-sitter-stage { background: linear-gradient(155deg, #ddd8ca, #bbb9ad); }
.era-laptop { width: 100%; max-width: 710px; padding: 14px 14px 11px; border-radius: 15px 15px 7px 7px; background: #282a28; box-shadow: 0 30px 55px rgba(0,0,0,.28); }
.era-sitter { border: 2px solid #050505; background: #b8b8b0; box-shadow: 4px 4px 0 #111; color: #111; }
.era-sitter .era-titlebar { min-height: 34px; border-bottom: 2px solid #050505; background: repeating-linear-gradient(0deg,#111 0 1px,#d7d7cf 1px 3px); font: 700 14px/1 Georgia, serif; }
.era-sitter .era-title { padding: 4px 12px; margin: auto; background: #d7d7cf; }
.era-sitter .era-controls { order: -1; margin: 0; }.era-sitter .era-controls span { width: 19px; height: 19px; border: 2px solid #111; background: #d7d7cf; }
.era-sitter .era-body { display: grid; grid-template-columns: 122px 1fr; gap: 10px; padding: 10px; background: #aaa9a2; font: 15px/1.35 "Courier New", monospace; }
.sitter-tools { padding: 8px; border: 2px solid #111; background: #cfcfc7; }
.sitter-tool { padding: 8px 5px; border-bottom: 1px solid #666; font-size: 11px; text-transform: uppercase; }
.sitter-tool.active { color: #f4f4ec; background: #111; }
.sitter-work { position: relative; min-height: 290px; padding: 18px; overflow: hidden; border: 2px solid #111; background: #ecece2; }
.sitter-thread { position: absolute; right: 15px; bottom: 15px; width: 62%; }
.sitter-message { margin-top: 7px; padding: 8px 10px; border: 2px solid #111; background: #f7f6ec; box-shadow: 3px 3px 0 #111; font-size: 12px; opacity: 0; animation: message-in .3s steps(4,end) forwards; }
.sitter-message:nth-child(2) { animation-delay: .8s; }.sitter-message:nth-child(3) { animation-delay: 1.65s; }
@keyframes message-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* RESEARCH — approachable, modern, charcoal/teal and information-dense. */
.era-research-stage { background: linear-gradient(145deg, #f8faf9, #dce6e3); }
.era-research { border: 1px solid #aab8b4; border-radius: 15px; background: #eef4f2; box-shadow: 0 25px 75px rgba(32,55,49,.2); }
.era-research .era-titlebar { min-height: 46px; background: #f8fbfa; border-bottom: 1px solid #c7d1ce; color: #31413d; font-size: 13px; }
.era-research .era-controls { order: -1; margin: 0 13px 0 0; }.era-research .era-controls span { width: 11px; height: 11px; border-radius: 50%; background: #9ea9a6; }.era-research .era-controls span:nth-child(1){background:#e66d63}.era-research .era-controls span:nth-child(2){background:#dbae53}.era-research .era-controls span:nth-child(3){background:#58a66e}
.era-research .era-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; padding: 15px; background: #dce7e4; }
.research-pane { min-height: 280px; padding: 20px; border: 1px solid #334b45; border-radius: 9px; background: #14201d; color: #d6e5e0; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.research-aside { padding: 17px; border: 1px solid #bdcac6; border-radius: 9px; background: #f7faf9; }
.research-stat { padding: 11px 0; border-bottom: 1px solid #d9e0de; }.research-stat strong { display: block; margin-top: 4px; font-size: 25px; letter-spacing: -.04em; }

/* BANK — newer Windows Enterprise, formal, squared and audit-led. */
.era-bank-stage { background: linear-gradient(145deg, #f5f2eb, #d9d7d0); }
.era-bank { border: 1px solid #aeb2b1; border-radius: 5px; background: #f8f8f6; box-shadow: 0 24px 65px rgba(37,39,45,.2); }
.era-bank .era-titlebar { min-height: 48px; color: white; background: #343444; border-bottom: 3px solid #7062a8; font: 600 13px/1 "Segoe UI", sans-serif; }
.era-bank .era-controls span { display: grid; place-items: center; width: 32px; height: 28px; background: rgba(255,255,255,.08); }.era-bank .era-controls span::before { content: "—"; }.era-bank .era-controls span:nth-child(2)::before { content: "□"; }.era-bank .era-controls span:nth-child(3)::before { content: "×"; }
.era-bank .era-body { padding: 0; background: #efefec; }
.bank-ribbon { display: flex; gap: 25px; padding: 13px 18px; border-bottom: 1px solid #cfd0cc; background: #fafaf8; color: #5b5c64; font-size: 12px; }
.bank-content { display: grid; grid-template-columns: .75fr 1.25fr; min-height: 285px; }
.bank-nav { padding: 17px; border-right: 1px solid #c8cac7; color: #5a5e62; font-size: 13px; }.bank-nav p { padding: 8px; margin: 0; }.bank-nav .active { border-left: 3px solid #7062a8; background: #e4e1ed; color: #353140; font-weight: 650; }
.bank-evidence { padding: 22px; background: #26272e; color: #dde0df; font: 14px/1.5 Consolas, ui-monospace, monospace; }
.audit-stamp { display: inline-block; margin-top: 25px; padding: 7px 11px; border: 2px solid var(--era-ok); color: #62d39a; font-weight: 800; letter-spacing: .12em; transform: rotate(-2deg); opacity: 0; animation: stamp-in .26s cubic-bezier(.2,1.6,.4,1) 2.2s forwards; }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.6) rotate(-2deg); } to { opacity: 1; transform: scale(1) rotate(-2deg); } }

/* RESEARCH-TO-COMMS — the later network view inherits the lab's visual language. */
.comms-stage{min-height:600px;background:linear-gradient(145deg,#f8faf9,#d9e5e1)}
.comms-workbench{width:min(100%,1040px);overflow:hidden;border:1px solid #aab8b4;border-radius:16px;background:#eef4f2;box-shadow:0 28px 80px rgba(32,55,49,.22)}
.comms-title{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #c7d1ce;background:#f8fbfa;color:#31413d;font-size:13px}.comms-title b{color:#23825d;font:750 11px/1 ui-monospace,monospace;letter-spacing:.08em}
.comms-canvas{position:relative;min-height:410px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#213a34,#111d1a 68%)}.comms-canvas svg{position:absolute;inset:30px 28px 50px;width:calc(100% - 56px);height:calc(100% - 80px)}
.comms-links path{fill:none;stroke:#4b8175;stroke-width:2;stroke-dasharray:7 9;opacity:.72;animation:comms-flow 3s linear infinite}.comms-links path:nth-child(2){animation-direction:reverse}.comms-links path:nth-child(3){stroke:#304f49;stroke-dasharray:2 10}.comms-nodes circle{fill:#203d36;stroke:#79c3b1;stroke-width:3;filter:drop-shadow(0 0 9px rgba(121,195,177,.35))}.comms-nodes circle:nth-child(4),.comms-nodes circle:nth-child(7){fill:#357966;stroke:#b6f0d5}.comms-packets circle{fill:#f4cf65;filter:drop-shadow(0 0 6px #f4cf65);animation:packet-pulse 1.15s ease-in-out infinite alternate}.comms-packets circle:nth-child(2){animation-delay:.35s}.comms-packets circle:nth-child(3){animation-delay:.7s}
.comms-readout{position:absolute;right:22px;bottom:22px;width:270px;padding:16px;border:1px solid #50776d;background:rgba(16,29,25,.9);color:#dcebe6;font:12px/1.45 ui-monospace,monospace;box-shadow:0 14px 34px rgba(0,0,0,.25)}.comms-readout small{display:block;color:#78a89b;letter-spacing:.1em}.comms-readout strong{display:block;margin:5px 0;color:#f4cf65;font-size:18px}.comms-readout p{margin:0;color:#aebfba}.comms-legend{position:absolute;left:22px;bottom:22px;display:flex;gap:16px;color:#aebfba;font:10px/1 ui-monospace,monospace;text-transform:uppercase}.comms-legend span{display:flex;align-items:center;gap:6px}.comms-legend i{width:9px;height:9px;border:2px solid #79c3b1;border-radius:50%}.comms-legend span:nth-child(2) i{border-radius:0;border-width:1px;background:#4b8175}.comms-legend span:nth-child(3) i{border-color:#f4cf65;background:#f4cf65}
@keyframes comms-flow{to{stroke-dashoffset:-64}}@keyframes packet-pulse{to{r:8;opacity:.5}}

/* THRONGLET EVOLUTION — identity stays fixed while rendering sophistication grows. */
.throng-stage { min-height: 390px; background: #e5e4dc; }
.throng-card { width: 100%; max-width: 350px; text-align: center; }
.throng-screen { position:relative;min-height: 240px; display: grid; place-items: center; padding: 30px; overflow:hidden;border: 4px solid #252725; background: #d7d8cf; }
.throng-caption { padding: 14px; color: #3b403d; font: 700 12px/1.5 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.throng { position: relative; flex: none; }
.throng::before, .throng::after { content: ""; position: absolute; }
.throng-v1 { width: 104px; height: 88px; border: 8px solid #111; background: #6bcf79; image-rendering: pixelated; box-shadow: inset 0 -16px #3d9b52; }
.throng-v1::before { top: 24px; left: 19px; width: 13px; height: 13px; background: #111; box-shadow: 44px 0 #111; }
.throng-v1::after { left: 36px; bottom: 16px; width: 25px; height: 8px; border-bottom: 7px solid #111; }
.throng-v2 { width: 118px; height: 104px; border: 6px solid #195c35; border-radius: 28% 28% 42% 42%; background: linear-gradient(#91eea5, #27ae60 65%, #168545); box-shadow: inset 0 -14px 0 rgba(0,0,0,.11), 0 9px 0 rgba(0,0,0,.12); animation: throng-bob 1.8s ease-in-out infinite; }
.throng-v2::before { top: 30px; left: 24px; width: 15px; height: 17px; border-radius: 50%; background: #162a20; box-shadow: 48px 0 #162a20; }
.throng-v2::after { left: 42px; bottom: 23px; width: 26px; height: 13px; border: 5px solid #195c35; border-top: 0; border-radius: 0 0 20px 20px; }
.throng-v3 { z-index:2;width: 144px; height: 126px; border: 4px solid #164b31; border-radius: 44% 44% 50% 50% / 36% 36% 57% 57%; background:radial-gradient(ellipse at 28% 17%,rgba(255,255,255,.88),transparent 18%),radial-gradient(circle at 75% 72%,rgba(20,125,72,.25),transparent 32%),linear-gradient(155deg,#b8f5c6,#39c978 56%,#168a4c); box-shadow:inset 0 -18px 26px rgba(8,67,35,.19),inset 0 0 0 4px rgba(255,255,255,.18),0 16px 28px rgba(20,77,49,.25),0 0 0 9px rgba(121,195,177,.08); animation:throng-bob 1.8s ease-in-out infinite; }
.throng-v3::before { top: 37px; left: 31px; width: 22px; height: 25px; border:3px solid #174d32;border-radius: 50%; background:radial-gradient(circle at 36% 30%,#fff 0 12%,#17241d 15% 48%,#8ce5b2 50% 58%,#17241d 60%);box-shadow:56px 0 0 -3px #17241d,56px 0 0 0 #174d32; }
.throng-v3::after { left: 49px; bottom: 25px; width: 38px; height: 18px; border: 5px solid #174d32; border-top: 0; border-radius: 0 0 22px 22px;box-shadow:inset 0 -4px rgba(255,255,255,.28) }
.throng-badge { position: absolute; right: -21px; top: -18px; display: grid; place-items: center; width: 43px; height: 43px; border: 3px solid #17221c; border-radius: 50%; background: #f4c94c; color: #17221c; font: 900 16px/1 ui-monospace, monospace; }
.throng-pixels { position: absolute; inset: auto 13px 9px; display: flex; justify-content: center; gap: 5px; }.throng-pixels i { width: 6px; height: 6px; background: rgba(255,255,255,.48); }
.throng-screen--service{background:radial-gradient(circle at 50% 46%,#26483f,#101b18 68%);border-color:#24342f;box-shadow:inset 0 0 0 1px #5c8177}.service-orbit{position:absolute;width:205px;height:205px;border:1px solid rgba(121,195,177,.35);border-radius:50%;animation:service-spin 8s linear infinite}.service-orbit::before,.service-orbit::after{content:"";position:absolute;inset:22px;border:1px dashed rgba(121,195,177,.3);border-radius:50%}.service-orbit::after{inset:52px;border-style:solid}.service-orbit i{position:absolute;width:10px;height:10px;border:2px solid #92d9c7;border-radius:50%;background:#1f443a;box-shadow:0 0 9px #79c3b1}.service-orbit i:nth-child(1){left:18px;top:42px}.service-orbit i:nth-child(2){right:4px;top:92px}.service-orbit i:nth-child(3){left:92px;bottom:-5px}.service-orbit i:nth-child(4){left:48px;top:9px}.service-readout{position:absolute;left:13px;right:13px;bottom:10px;display:flex;justify-content:space-between;color:#a9c6bd;font:8px/1 ui-monospace,monospace;letter-spacing:.08em}.service-readout b{color:#71e1a1}.throng-status{position:absolute;right:9px;bottom:10px;width:8px;height:8px;border-radius:50%;background:#86f0ae;box-shadow:0 0 8px #86f0ae}.throng-v3 .throng-badge{right:-18px;top:-15px;border-color:#5d4b12;background:linear-gradient(#ffe58b,#e8b92e);box-shadow:0 4px 12px rgba(0,0,0,.25)}
@keyframes service-spin{to{transform:rotate(360deg)}}
@keyframes throng-bob { 50% { transform: translateY(-7px); } }

.component-legend { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 30px; border: 1px solid #c8cfcc; background: rgba(255,255,255,.55); }
.component-legend div { padding: 16px; border-right: 1px solid #c8cfcc; }.component-legend div:last-child{border:0}.component-legend b{display:block;margin-bottom:4px;font-size:12px}.component-legend span{color:#69716f;font-size:12px;line-height:1.45}
.story-stage { min-height: 430px; align-items: stretch; background: #e8ebe8; }
.story-ui { width: 100%; min-height: 350px; position: relative; overflow: hidden; border: 1px solid #b7c0bc; background: #f7f8f6; }
.location-frame { display: grid; place-items: center; background: linear-gradient(120deg, #e4e7e4 0 54%, #c7cfcb 54% 55%, #f4f5f2 55%); }
.location-frame::before { content:""; position:absolute; inset:0; opacity:.35; background:linear-gradient(90deg,transparent 0 16%,#fff 16% 17%,transparent 17% 72%,#fff 72% 73%,transparent 73%); }
.location-third { position: absolute; left: 34px; bottom: 30px; min-width: 390px; padding: 14px 18px; border-left: 4px solid #4d766d; background: rgba(246,248,246,.9); box-shadow: 0 12px 30px rgba(36,49,45,.15); backdrop-filter: blur(12px); opacity:0; animation:third-in .45s cubic-bezier(.2,.9,.2,1) .4s forwards; }
.location-third b,.location-third span{display:block}.location-third b{font:800 15px/1.2 ui-monospace,monospace;letter-spacing:.08em}.location-third span{margin-top:6px;color:#5d6865;font:650 12px/1.2 ui-monospace,monospace;letter-spacing:.06em}
@keyframes third-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.dialogue-frame { display:grid;grid-template-columns:1fr minmax(290px,42%);background:linear-gradient(135deg,#e7ece9,#cbd5d1); }
.dialogue-negative-space { position:relative; }.dialogue-negative-space::before{content:"HUMAN REACTION / ENVIRONMENT";position:absolute;left:24px;bottom:24px;color:#7a8682;font:700 11px/1.2 ui-monospace,monospace;letter-spacing:.1em}
.dialogue-rail { align-self:end; padding:22px; background:linear-gradient(90deg,transparent,rgba(24,30,29,.06)); }
.dialogue-line { position:relative;margin:8px 0 0;padding:11px 13px 11px 42px;border:1px solid #c0c8c5;background:rgba(255,255,255,.92);box-shadow:0 7px 18px rgba(25,38,33,.1);font-size:13px;line-height:1.4;opacity:0;animation:message-in .3s ease-out forwards}.dialogue-line:nth-child(2){animation-delay:.8s}.dialogue-line:nth-child(3){animation-delay:1.65s}.dialogue-line i{position:absolute;left:11px;top:11px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#406f65;color:#fff;font:800 10px/1 ui-monospace,monospace}.dialogue-line.previous{opacity:.62;transform:scale(.97);transform-origin:right bottom}
.report-frame { display:grid;grid-template-columns:1fr .82fr;gap:24px;padding:24px;background:#d9dcda; }
.report-page { position:relative;padding:28px 30px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.14);font:10px/1.6 Georgia,serif;color:#555; }
.report-page h4{margin:0 0 15px;color:#222;font:800 13px/1.2 ui-sans-serif,sans-serif}.report-page mark{padding:1px 2px;background:#ffe17a;color:#24211a;box-shadow:0 0 0 2px rgba(255,225,122,.28);animation:mark-pulse 1.3s ease-in-out infinite alternate}.report-page::after{content:"REPORT 031 · PAGE 4 OF 12";position:absolute;right:22px;bottom:14px;color:#999;font:700 8px/1 ui-monospace,monospace;letter-spacing:.08em}@keyframes mark-pulse{to{background:#ffc84a}}
.extract-panel{display:flex;flex-direction:column;justify-content:center;padding:20px;border:1px solid #39443f;background:#1e2925;color:#d9e5e0;font:14px/1.55 ui-monospace,monospace}.extract-panel small{color:#82a399;letter-spacing:.08em}.extract-token{display:inline-block;margin:5px 3px 0 0;padding:5px 7px;border:1px solid #d8ba4b;background:rgba(216,186,75,.12);color:#f3dd82;opacity:0;animation:era-line .25s ease-out forwards}.extract-token:nth-of-type(2){animation-delay:.45s}.extract-token:nth-of-type(3){animation-delay:.9s}.extract-token:nth-of-type(4){animation-delay:1.35s}.extract-result{margin-top:22px;padding-top:17px;border-top:1px solid #56635e;color:#fff;opacity:0;animation:era-line .3s ease-out 1.8s forwards}
.metric-frame{padding:27px;background:#f5f5f2}.metric-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.metric-heading h4{margin:0;font-size:20px}.metric-heading span{color:#737b78;font:700 11px/1 ui-monospace,monospace}.bar-row{display:grid;grid-template-columns:120px 1fr 60px;gap:15px;align-items:center;margin:17px 0;font-size:13px}.bar-track{height:22px;background:#e0e2df}.bar-fill{height:100%;transform-origin:left;animation:bar-grow .8s cubic-bezier(.15,.75,.25,1) forwards}.bar-fill.low{width:36%;background:#58a278}.bar-fill.high{width:77%;background:#cf5954;animation-delay:.55s}.bar-fill.capacity{width:92%;background:#6876a3;animation-delay:1.1s}.metric-callout{margin-top:27px;padding:14px;border-left:4px solid #cf5954;background:#f3e4e2;color:#643631;font-weight:700;opacity:0;animation:era-line .3s ease-out 1.7s forwards}@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gate-frame{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px;background:#e3e6e3}.gate-card{padding:20px;border:1px solid #b9c0bd;background:#fafaf8}.gate-card h4{margin:0 0 18px;font-size:16px}.gate-step{display:flex;gap:10px;align-items:center;margin:11px 0;color:#5e6764;font:13px/1.35 ui-monospace,monospace}.gate-step::before{content:"";width:12px;height:12px;border:2px solid #7e8d87}.gate-step.ok::before{border-color:var(--era-ok);background:var(--era-ok);box-shadow:inset 0 0 0 2px #fff}.gate-step.bad::before{border-color:var(--era-bad);background:var(--era-bad);box-shadow:inset 0 0 0 2px #fff}.gate-alert{margin-top:21px;padding:10px 12px;background:#f5dfdc;color:#793c36;font:800 12px/1.4 ui-monospace,monospace}.approval-modal{align-self:center;padding:18px;border:1px solid #353b39;background:#fff;box-shadow:8px 8px 0 #303633}.approval-modal .modal-title{margin:-18px -18px 16px;padding:11px 14px;background:#343a38;color:#fff;font:700 12px/1 ui-monospace,monospace}.approval-person{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:13px}.approval-person strong{color:#8b3f39}.approval-action{margin-top:18px;padding:11px;text-align:center;background:#c94f48;color:#fff;font:800 12px/1 ui-monospace,monospace;letter-spacing:.08em}
.preview-actions { position: sticky; z-index: 20; bottom: 20px; display: flex; justify-content: center; margin-top: 42px; pointer-events: none; }
.preview-actions button { pointer-events: auto; padding: 12px 18px; border: 1px solid #33413d; background: rgba(31,41,38,.94); color: white; font: 700 12px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 12px 35px rgba(0,0,0,.25); cursor: pointer; }

@media (max-width: 1040px) {
  .preview-grid, .preview-grid.preview-grid--three { grid-template-columns: 1fr; }
  .preview-section-head { grid-template-columns: 1fr; gap: 12px; }
  .component-legend { grid-template-columns: 1fr; }.component-legend div { border-right: 0; border-bottom: 1px solid #c8cfcc; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; }
}