@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #080808;
  --surface: #10100e;
  --surface-2: #16150f;
  --line: rgba(255, 255, 255, 0.11);
  --line-bright: rgba(255, 255, 255, 0.2);
  --text: #f4f3ed;
  --muted: #9b998f;
  --purple: #f5c400;
  --purple-bright: #ffdf3a;
  --green: #d9ba35;
  --orange: #efb700;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--text); background: #080808; font-family: "Manrope", Arial, sans-serif; line-height: 1.6; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(800px 520px at 82% 0%, rgba(245,196,0,.045), transparent 70%); pointer-events: none; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.noise { display: none; }
.section-shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header { width: min(calc(100% - 48px), var(--max)); height: 92px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 50; border-bottom: 1px solid var(--line); }
.brand-cluster { display: flex; align-items: center; gap: 15px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(245, 196, 0, .5); background: rgba(245, 196, 0, .08); color: var(--purple-bright); font: 500 13px "DM Mono", monospace; }
.brand-socials { display: flex; align-items: center; gap: 7px; padding-left: 14px; border-left: 1px solid var(--line); }
.brand-socials a { width: 30px; height: 30px; display: grid; place-items: center; color: #8c8991; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.018); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.brand-socials a:hover { color: #ddd9e2; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.055); transform: translateY(-1px); }
.brand-socials svg { width: 16px; height: 16px; fill: currentColor; }
.site-nav { display: flex; align-items: center; gap: 38px; }
.site-nav a { color: var(--muted); font-size: 14px; font-weight: 600; transition: .25s ease; position: relative; }
.site-nav a:hover, .site-nav a.active { color: var(--text); }
.site-nav a.active::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); left: 50%; top: 27px; }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 1px; background: white; margin: 6px 0; transition: .25s; }

.hero { min-height: 750px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 80px; padding-block: 95px 110px; }
.hero-identity { width: fit-content; display: flex; align-items: center; gap: 15px; color: #bbb7c1; font: 700 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .13em; }
.hero-socials { display: flex; align-items: center; gap: 7px; }
.hero-socials a { width: 31px; height: 31px; display: grid; place-items: center; color: #8e8a94; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.02); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-socials a:hover { color: #e1dde6; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.hero-socials svg { width: 16px; height: 16px; fill: currentColor; }
.eyebrow { width: fit-content; display: flex; align-items: center; gap: 10px; color: #b8b4c0; font: 400 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; border: 1px solid var(--line); padding: 9px 13px; background: rgba(255,255,255,.025); }
.status-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: blink 2s ease-in-out infinite; }
.hero h1, .page-hero h1, .case-hero h1 { font-size: clamp(55px, 6.6vw, 91px); line-height: .98; letter-spacing: -.065em; margin: 28px 0; max-width: 830px; }
.hero h1 span, .page-hero h1 span, .case-hero h1 span, .contact-inner h2 span { color: var(--purple); }
.hero-lede { color: #aaa7b1; font-size: 18px; line-height: 1.75; max-width: 610px; }
.hero-actions { display: flex; gap: 13px; margin-top: 36px; }
.button { min-height: 52px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; font-size: 14px; font-weight: 700; border: 1px solid var(--line-bright); transition: .25s ease; }
.button-primary { background: var(--purple); color: #100b1c; border-color: var(--purple); }
.button-primary:hover { background: var(--purple-bright); transform: translateY(-2px); box-shadow: 0 12px 35px rgba(245,196,0,.2); }
.button-ghost:hover { background: white; color: #111; }
.hero-meta { display: flex; gap: 42px; padding-top: 50px; margin-top: 54px; border-top: 1px solid var(--line); }
.hero-meta div { display: flex; flex-direction: column; }
.hero-meta strong { font-size: 24px; letter-spacing: -.04em; }
.hero-meta span { color: #77737f; font-size: 12px; margin-top: 3px; }

.hero-visual { position: relative; height: 560px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(245, 196, 0, .11); filter: blur(70px); }
.code-window { position: relative; z-index: 3; width: min(100%, 520px); border: 1px solid var(--line-bright); background: rgba(13, 13, 18, .88); backdrop-filter: blur(18px); box-shadow: 0 35px 100px rgba(0,0,0,.5); transform: perspective(900px) rotateY(-4deg) rotateX(2deg); animation: hover 6s ease-in-out infinite; }
.window-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 16px; color: #6f6b76; font: 12px "DM Mono", monospace; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #494750; }
.window-dots i:first-child { background: #8f791b; }.window-dots i:nth-child(2) { background: #c7a620; }.window-dots i:nth-child(3) { background: #e0bd28; }
.terminal-lines { padding: 38px 28px 44px; font: 13px/2.1 "DM Mono", monospace; color: #d3d0d8; }
.terminal-lines p { margin: 0; white-space: nowrap; }
.terminal-lines em { color: #4a4851; font-style: normal; display: inline-block; width: 34px; user-select: none; }
.syntax-purple { color: #ffe36b; }.syntax-green { color: #f2cf43; }.syntax-orange { color: #f3c13d; }
.terminal-command { margin-top: 12px !important; color: #f1edf7; }
.terminal-command > span { color: var(--green); margin-right: 9px; }
.cursor { display: inline-block; width: 7px; height: 15px; background: var(--purple); vertical-align: middle; margin-left: 2px; animation: cursor .8s steps(1) infinite; }
.build-status { height: 44px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 9px; padding: 0 17px; color: #85818d; font: 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.build-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.orbit { position: absolute; border: 1px solid rgba(245,196,0,.15); border-radius: 50%; }
.orbit-one { width: 510px; height: 510px; animation: spin 25s linear infinite; }.orbit-two { width: 390px; height: 390px; border-style: dashed; animation: spin 18s linear infinite reverse; }
.float-tag { position: absolute; z-index: 4; padding: 7px 11px; background: #111117; border: 1px solid var(--line-bright); color: #aaa5b1; font: 12px "DM Mono", monospace; box-shadow: 0 10px 30px #000; }
.tag-java { top: 70px; right: 4%; animation: hover 5s 1s ease-in-out infinite; }.tag-node { bottom: 68px; left: 0; animation: hover 6s .5s ease-in-out infinite; }.tag-cloud { bottom: 26%; right: -2%; animation: hover 5.5s 1.4s ease-in-out infinite; }

.section-block { padding-block: 145px; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr auto; align-items: end; gap: 30px; margin-bottom: 60px; }
.section-heading > div { align-self: start; display: flex; align-items: center; gap: 15px; }
.section-number { font: 12px "DM Mono", monospace; color: var(--purple); }
.eyebrow-text { font: 12px "DM Mono", monospace; color: #77737f; text-transform: uppercase; letter-spacing: .14em; }
.section-heading h2, .skills-intro h2 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -.055em; line-height: 1.05; }
.text-link { font-size: 13px; color: #aaa6af; border-bottom: 1px solid var(--line-bright); padding-bottom: 5px; }
.text-link span { color: var(--purple); margin-left: 9px; }

.featured-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 22px; }
.project-card { background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .35s ease, border-color .35s ease; }
.project-card:hover { transform: translateY(-7px); border-color: rgba(245,196,0,.45); }
.project-art { height: 330px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: #0b0b0f; }
.network-grid, .digit-grid { position: absolute; inset: 0; background: rgba(245,196,0,.025); }
.network-art::after { content: ""; position: absolute; inset: 0; background: none; }
.server-stack { position: absolute; left: 50%; top: 50%; width: 110px; transform: translate(-50%, -50%); z-index: 3; }
.server-stack span { display: block; height: 30px; margin: 5px; border: 1px solid rgba(255,223,58,.55); background: rgba(245,196,0,.12); box-shadow: 0 8px 28px rgba(154,115,0,.18); position: relative; }
.server-stack span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); position: absolute; right: 10px; top: 11px; box-shadow: -12px 0 #797281; }
.network-node { position: absolute; z-index: 3; width: 15px; height: 15px; border: 2px solid var(--purple); border-radius: 50%; background: #111017; box-shadow: 0 0 20px rgba(245,196,0,.65); animation: nodePulse 2s ease infinite; }
.n1 { left: 17%; top: 28%; }.n2 { right: 16%; top: 33%; animation-delay: .7s; }.n3 { right: 23%; bottom: 17%; animation-delay: 1.2s; }
.network-line { position: absolute; height: 1px; z-index: 2; transform-origin: left; background: linear-gradient(90deg, rgba(245,196,0,.1), var(--purple)); }
.l1 { left: 19%; top: 31%; width: 34%; transform: rotate(20deg); }.l2 { left: 52%; top: 50%; width: 32%; transform: rotate(-25deg); }.l3 { left: 51%; top: 54%; width: 31%; transform: rotate(28deg); }
.metric-pill { position: absolute; z-index: 5; left: 25px; bottom: 24px; background: rgba(9,9,13,.85); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 10px 15px; display: flex; flex-direction: column; }
.metric-pill small { font: 12px "DM Mono"; color: #6f6b75; }.metric-pill strong { font-size: 19px; }
.mnist-art { display: grid; place-items: center; background: #0b0b09; }
.digit-seven { font: 300 180px "DM Mono", monospace; color: #eee9f8; text-shadow: 0 0 40px rgba(245,196,0,.35); z-index: 2; transform: rotate(4deg); }
.confidence-ring { position: absolute; right: 25px; bottom: 25px; width: 76px; height: 76px; border: 3px solid rgba(245,196,0,.2); border-top-color: var(--purple); border-right-color: var(--purple); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: rotate(10deg); animation: slowTurn 12s linear infinite; }
.confidence-ring span, .confidence-ring small { transform: rotate(-10deg); }.confidence-ring span { font-weight: 700; }.confidence-ring small { font-size: 12px; color: var(--muted); }
.project-card-copy { padding: 28px 30px 33px; }
.project-card-copy > div { display: flex; justify-content: space-between; }
.project-index { color: var(--purple); font: 12px "DM Mono"; }.project-state { color: #726f7a; font: 12px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; }
.project-card h3 { font-size: 27px; margin: 18px 0 9px; letter-spacing: -.035em; }
.project-card p { color: #918e98; font-size: 14px; line-height: 1.7; margin: 0; max-width: 570px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 0; list-style: none; }
.tag-list li { color: #928e9a; border: 1px solid var(--line); background: rgba(255,255,255,.015); padding: 5px 9px; font: 12px "DM Mono"; text-transform: uppercase; letter-spacing: .06em; }

#experience { border-top: 1px solid var(--line); }
.experience-layout { display: grid; grid-template-columns: 315px minmax(0,1fr); gap: 65px; align-items: start; }
.experience-overview { position: sticky; top: 40px; padding: 29px; border: 1px solid var(--line); background: #0d0d0b; }
.experience-overview > span,.experience-card-header span { color: var(--purple); font: 12px "DM Mono",monospace; letter-spacing: .14em; }
.experience-overview h3 { margin: 38px 0 15px; font-size: 27px; line-height: 1.12; letter-spacing: -.045em; }
.experience-overview > p { color: #8d8a81; margin: 0; font-size: 12px; line-height: 1.8; }
.experience-totals { margin-top: 35px; border-top: 1px solid var(--line); }
.experience-totals > div { min-height: 76px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.experience-totals > div:last-child { border-bottom: 0; }
.experience-totals strong { color: var(--purple-bright); font-size: 21px; letter-spacing: -.03em; }
.experience-totals small { color: #66635b; font: 12px "DM Mono",monospace; text-transform: uppercase; letter-spacing: .08em; }
.experience-list { border-top: 1px solid var(--line); }
.experience-card { position: relative; padding: 37px 0 44px; border-bottom: 1px solid var(--line); }
.experience-card::before { content: ""; position: absolute; left: -17px; top: 43px; width: 5px; height: 5px; background: var(--purple); box-shadow: 0 0 12px rgba(245,196,0,.42); }
.experience-card-header { display: flex; justify-content: space-between; gap: 25px; color: #67645c; }
.experience-card-header > div { display: flex; align-items: center; gap: 18px; }
.experience-card-header time,.experience-card-header small { font: 12px "DM Mono",monospace; }
.experience-card-header small { text-align: right; line-height: 1.55; }
.experience-role { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 42px 0 20px; }
.experience-role h3 { margin: 0; font-size: clamp(25px,2.6vw,35px); line-height: 1.05; letter-spacing: -.045em; }
.experience-role > a,.experience-role > span { max-width: 310px; color: #aaa69c; font-size: 12px; text-align: right; }
.experience-role a { transition: color .2s; }.experience-role a:hover { color: var(--purple); }.experience-role a span { color: var(--purple); margin-left: 5px; }
.experience-card > p { max-width: 790px; margin: 0 0 30px; color: #969289; font-size: 14px; line-height: 1.8; }
.experience-results { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.experience-results > div { min-height: 175px; padding: 20px; border-right: 1px solid var(--line); background: rgba(255,255,255,.008); }
.experience-results > div:last-child { border-right: 0; }
.experience-results span { color: var(--purple); font: 12px "DM Mono",monospace; }
.experience-results p { margin: 38px 0 0; color: #77746c; font-size: 12px; line-height: 1.75; }
.experience-stack { display: flex; flex-wrap: wrap; gap: 7px; margin: 19px 0 0; padding: 0; list-style: none; }
.experience-stack li { padding: 6px 9px; border: 1px solid var(--line); color: #817e75; background: rgba(245,196,0,.018); font: 12px "DM Mono",monospace; text-transform: uppercase; letter-spacing: .06em; }
.skills-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; border-top: 1px solid var(--line); }
.skills-intro .eyebrow-text { margin-left: 12px; }.skills-intro h2 { margin: 28px 0 23px; }.skills-intro p { color: #8d8994; font-size: 15px; max-width: 450px; }
.skill-groups > div { display: grid; grid-template-columns: 160px 1fr; border-top: 1px solid var(--line); padding: 27px 0; }
.skill-groups > div:last-child { border-bottom: 1px solid var(--line); }
.skill-groups span { color: var(--purple); font: 12px "DM Mono"; text-transform: uppercase; letter-spacing: .1em; }.skill-groups p { margin: 0; color: #aaa6b0; font-size: 15px; }
.contact-section { background: var(--purple); color: #0b0812; padding: 110px 0; }
.contact-inner { text-align: center; }.contact-inner .eyebrow-text { color: rgba(13,8,22,.55); }.contact-inner h2 { font-size: clamp(55px, 8vw, 110px); margin: 20px 0 38px; letter-spacing: -.075em; line-height: 1; }.contact-inner h2 span { color: rgba(13,8,22,.28); }
.button-light { border-color: rgba(9,6,15,.35); background: rgba(255,255,255,.78); }.button-light:hover { background: #fff; transform: translateY(-3px); }
.site-footer { min-height: 120px; display: flex; justify-content: space-between; align-items: center; color: #686570; font-size: 12px; }.site-footer p span { margin-left: 20px; }.site-footer div { display: flex; gap: 28px; }.site-footer a:hover { color: var(--text); }

/* Projects */
.page-hero { padding: 120px 0 110px; }.page-hero h1 { max-width: 950px; margin-bottom: 28px; }.page-hero > p { max-width: 600px; color: #97939e; font-size: 17px; }
.project-list { border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: 55px 330px 1fr 50px; gap: 35px; align-items: center; padding: 55px 0; border-bottom: 1px solid var(--line); transition: .3s; }
.project-row:hover { padding-inline: 18px; background: rgba(255,255,255,.02); }.project-row:hover .project-row-arrow { color: var(--purple); transform: translate(4px,-4px); }
.project-row-number { align-self: start; color: var(--purple); font: 12px "DM Mono"; padding-top: 7px; }
.project-row-art { height: 220px; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.mini-network .server-stack { width: 80px; }.pulse-orb { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; transform: translate(-50%,-50%); border: 1px solid rgba(245,196,0,.3); border-radius: 50%; animation: nodePulse 2.5s infinite; }
.mini-mnist { display: grid; place-items: center; }.mini-mnist > span { z-index: 2; font: 300 120px "DM Mono"; }.scan-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--purple); box-shadow: 0 0 15px var(--purple); animation: scan 3s ease-in-out infinite; }
.project-row-copy h2 { font-size: 37px; margin: 10px 0; letter-spacing: -.05em; }.project-row-copy p { color: #8d8994; font-size: 14px; max-width: 580px; }.project-row-arrow { font-size: 25px; transition: .3s; }
.project-philosophy { margin-block: 130px; text-align: center; }.project-philosophy p { max-width: 900px; margin: 0 auto 20px; font-size: clamp(28px,4vw,54px); line-height: 1.2; letter-spacing: -.045em; }.project-philosophy span { color: #716e78; font: 12px "DM Mono"; }

/* Project detail */
.case-hero { padding: 75px 0 90px; }.back-link { color: #85818c; font: 12px "DM Mono"; }.back-link:hover { color: var(--purple); }.case-kicker { margin-top: 80px; color: #797580; font: 12px "DM Mono"; text-transform: uppercase; letter-spacing: .11em; }.case-kicker span { color: var(--purple); margin-right: 16px; }.case-hero h1 { max-width: 1100px; }.case-hero > p { color: #a7a3ad; font-size: 18px; max-width: 740px; }.case-meta { display: flex; gap: 80px; margin-top: 55px; padding-top: 30px; border-top: 1px solid var(--line); }.case-meta div { display: flex; flex-direction: column; gap: 8px; }.case-meta small { color: #66636d; font: 12px "DM Mono"; letter-spacing: .12em; }.case-meta strong { font-size: 13px; }
.demo-shell { margin-bottom: 150px; }.demo-topbar { height: 48px; padding: 0 17px; border: 1px solid var(--line); background: #131318; display: flex; align-items: center; justify-content: space-between; color: #88848e; font: 12px "DM Mono"; letter-spacing: .08em; }.demo-topbar > div { display: flex; align-items: center; gap: 10px; }.demo-topbar small { color: #504d56; }.demo-clock { color: #5f5b65; }
.vise-dashboard { height: 630px; display: flex; border: 1px solid var(--line); border-top: 0; background: #0b0b0f; box-shadow: 0 40px 100px rgba(0,0,0,.3); }
.demo-sidebar { width: 68px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 17px; }.demo-logo { width: 35px; height: 35px; display: grid; place-items: center; background: var(--purple); color: #0c0715; font-weight: 800; margin-bottom: 24px; }.demo-sidebar button { width: 35px; height: 35px; background: transparent; border: 0; color: #514e57; cursor: pointer; }.demo-sidebar button.active { color: var(--purple); background: rgba(245,196,0,.1); }
.dashboard-main { flex: 1; padding: 31px; min-width: 0; }.dashboard-head { display: flex; justify-content: space-between; align-items: center; }.dashboard-head small { color: #5f5c65; font: 12px "DM Mono"; }.dashboard-head h2 { margin: 4px 0 0; font-size: 24px; }.server-online { color: #77737e; border: 1px solid var(--line); padding: 7px 10px; font: 12px "DM Mono"; }.server-online i, .model-ready i { display: inline-block; width: 5px; height: 5px; background: var(--green); border-radius: 50%; margin-right: 7px; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 25px 0 15px; }.stat-grid > div { border: 1px solid var(--line); background: #101015; padding: 17px; display: flex; flex-direction: column; }.stat-grid small { color: #696570; font: 12px "DM Mono"; letter-spacing: .08em; }.stat-grid strong { font-size: 25px; margin: 5px 0; }.stat-grid strong em { color: #77737e; font-size: 12px; font-style: normal; }.stat-grid span { color: #caa91c; font-size: 12px; }
.dashboard-content { display: grid; grid-template-columns: 1.35fr .65fr; gap: 15px; }.match-panel, .leader-panel { background: #101015; border: 1px solid var(--line); min-height: 370px; padding: 19px; }.panel-title { display: flex; justify-content: space-between; }.panel-title h3 { margin: 0; font-size: 14px; }.panel-title p { color: #5d5a63; font-size: 12px; margin: 2px 0; }.panel-title > span { color: var(--purple); font: 12px "DM Mono"; }.queue-count { border: 1px solid var(--line); padding: 6px; }
.versus-box { height: 225px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; text-align: center; }.player { display: flex; flex-direction: column; align-items: center; transition: .4s; }.avatar { width: 50px; height: 50px; border: 1px solid rgba(245,196,0,.6); display: grid; place-items: center; color: var(--purple); background: rgba(245,196,0,.1); font-size: 12px; margin-bottom: 10px; }.player strong { font-size: 12px; }.player span { color: #67636e; font-size: 12px; }.hidden-player { opacity: .28; filter: blur(1px); }.hidden-player.found { opacity: 1; filter: none; }.match-state p { color: #625e68; font: 12px "DM Mono"; }.radar { width: 90px; height: 90px; border: 1px solid rgba(245,196,0,.18); border-radius: 50%; margin: auto; position: relative; display: grid; place-items: center; }.radar i { position: absolute; border: 1px solid rgba(245,196,0,.16); border-radius: 50%; }.radar i:first-child { width: 60px; height: 60px; }.radar i:nth-child(2) { width: 30px; height: 30px; }.radar i:nth-child(3) { inset: 50%; width: 44px; height: 1px; border: 0; background: linear-gradient(90deg,var(--purple),transparent); transform-origin: left; animation: spin 2.1s linear infinite; }.radar span { color: var(--purple); font: 12px "DM Mono"; }.queue-button, .classify-button { width: 100%; height: 42px; border: 0; background: var(--purple); color: #0d0816; font: 700 12px "DM Mono"; letter-spacing: .08em; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 25px; transition: .25s; }.queue-button:hover, .classify-button:hover { background: var(--purple-bright); }.queue-button.searching { background: #25212d; color: var(--purple); }
.leader-panel ol { list-style: none; padding: 8px 0 0; margin: 0; }.leader-panel li { display: grid; grid-template-columns: 18px 30px 1fr 28px; gap: 8px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }.leader-panel li > b { color: #5d5963; font: 12px "DM Mono"; }.tiny-avatar { width: 26px; height: 26px; display: grid; place-items: center; background: #232028; color: #aaa5b1; font: 12px "DM Mono"; }.tiny-avatar.purple { background: rgba(245,196,0,.18); color: var(--purple); }.tiny-avatar.blue { background: rgba(230,195,74,.15); color: #e6c34a; }.tiny-avatar.orange { background: rgba(239,183,0,.15); color: var(--orange); }.leader-panel li div { display: flex; flex-direction: column; }.leader-panel li strong { font-size: 12px; }.leader-panel li small { color: #5d5963; font-size: 12px; }.leader-panel li em { color: #d6b526; font: 12px "DM Mono"; font-style: normal; }.leader-panel .current-player { background: rgba(245,196,0,.06); }
.demo-caption { margin: 13px 0 0; color: #68646e; font: 12px "DM Mono"; }.demo-caption span { color: var(--purple); margin-right: 12px; }
.case-content { border-top: 1px solid var(--line); padding: 140px 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px 100px; }.case-intro { display: grid; grid-template-columns: 35px 1fr; }.case-intro h2 { font-size: clamp(35px,4vw,54px); line-height: 1.1; letter-spacing: -.05em; margin: 0; }.case-body .large-copy { color: var(--text); font-size: 20px; line-height: 1.6; margin-top: 0; }.case-body p { color: #918d98; font-size: 15px; line-height: 1.8; }.architecture, .neural-diagram { grid-column: 1/-1; min-height: 280px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 30px; padding: 50px; }.arch-node { min-width: 180px; padding: 22px; background: #0d0d11; border: 1px solid var(--line); display: flex; flex-direction: column; text-align: center; }.arch-node small { color: var(--purple); font: 12px "DM Mono"; }.arch-node strong { font-size: 15px; margin: 6px; }.arch-node span { color: #686570; font-size: 12px; }.arch-node.core { border-color: rgba(245,196,0,.5); box-shadow: 0 0 45px rgba(245,196,0,.08); }.arch-arrow { color: var(--purple); }.arch-stack { display: flex; flex-direction: column; gap: 8px; }.outcomes { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }.outcomes div { padding: 35px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }.outcomes div:last-child { border: 0; }.outcomes strong { color: var(--purple); font-size: 25px; }.outcomes span { color: #7d7984; font-size: 12px; margin-top: 5px; }
.next-project { min-height: 210px; border-block: 1px solid var(--line); display: grid; grid-template-columns: 160px 1fr auto; align-items: center; transition: .3s; }.next-project:hover { padding-inline: 25px; }.next-project span { color: #716d78; font: 12px "DM Mono"; text-transform: uppercase; }.next-project strong { font-size: clamp(25px,4vw,48px); letter-spacing: -.05em; }.next-project i { color: var(--purple); font-size: 30px; font-style: normal; }

/* MNIST demo */
.mnist-lab { min-height: 610px; display: grid; grid-template-columns: .9fr 1.1fr; background: #0b0b0f; border: 1px solid var(--line); border-top: 0; }.draw-panel, .prediction-panel { padding: 32px; }.draw-panel { border-right: 1px solid var(--line); }.lab-heading { display: flex; justify-content: space-between; align-items: center; }.lab-heading small { color: #5d5963; font: 12px "DM Mono"; }.lab-heading h2 { margin: 3px 0; font-size: 19px; }.lab-heading button { background: transparent; border: 1px solid var(--line); color: #817d87; font: 12px "DM Mono"; padding: 7px 11px; cursor: pointer; }.canvas-wrap { width: min(100%, 360px); aspect-ratio: 1; position: relative; margin: 26px auto; border: 1px solid rgba(245,196,0,.25); background-image: linear-gradient(rgba(245,196,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(245,196,0,.055) 1px,transparent 1px); background-size: 10px 10px; background-color: #07070a; }.canvas-wrap canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }.draw-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #38353e; pointer-events: none; font: 12px "DM Mono"; text-transform: uppercase; }.model-ready { color: #75717b; font: 12px "DM Mono"; border: 1px solid var(--line); padding: 7px; }.prediction-result { display: flex; align-items: center; gap: 25px; padding: 22px 0; border-bottom: 1px solid var(--line); }.prediction-result > span { font-size: 70px; color: var(--purple); font-weight: 300; line-height: 1; min-width: 55px; }.prediction-result div { display: flex; flex-direction: column; }.prediction-result small { color: #5c5962; font: 12px "DM Mono"; }.prediction-result strong { font-size: 13px; margin-top: 5px; }.probability-bars { margin-top: 18px; }.probability-bars > div { display: grid; grid-template-columns: 15px 1fr 33px; align-items: center; gap: 10px; margin: 9px 0; }.probability-bars b, .probability-bars em { color: #716d77; font: 12px "DM Mono"; font-style: normal; }.probability-bars em { text-align: right; }.probability-bars span { height: 4px; background: #1c1b20; overflow: hidden; }.probability-bars i { display: block; width: var(--value); height: 100%; background: var(--purple); transition: width .8s cubic-bezier(.2,.8,.2,1); }.neural-diagram { gap: 70px; position: relative; overflow: hidden; }.layer { display: flex; flex-direction: column; align-items: center; z-index: 2; min-width: 140px; }.layer small { color: var(--purple); font: 12px "DM Mono"; }.layer strong { font-size: 13px; margin-top: 15px; }.layer span { color: #65616c; font-size: 12px; }.neurons { display: flex; gap: 7px; margin-top: 20px; }.neurons i { width: 12px; height: 12px; border: 1px solid var(--purple); border-radius: 50%; box-shadow: 0 0 12px rgba(245,196,0,.2); }.neurons.many { max-width: 60px; flex-wrap: wrap; justify-content: center; }.neurons.output { max-width: 90px; flex-wrap: wrap; justify-content: center; }.connections { width: 100px; height: 100px; opacity: .3; background: repeating-linear-gradient(15deg, transparent 0 7px, var(--purple) 8px 9px, transparent 10px 15px); mask-image: linear-gradient(90deg,transparent,black,transparent); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; transition-delay: var(--delay, 0ms); }.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes blink { 50% { opacity: .35; box-shadow: 0 0 4px var(--green); } }
@keyframes cursor { 50% { opacity: 0; } }
@keyframes hover { 50% { transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slowTurn { to { transform: rotate(370deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes nodePulse { 50% { box-shadow: 0 0 35px rgba(245,196,0,.8); transform: scale(1.15); } }
@keyframes scan { 0%,100% { top: 15%; opacity: .2; } 50% { top: 85%; opacity: 1; } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 25px; padding-top: 80px; }.hero-visual { height: 500px; }.featured-grid { grid-template-columns: 1fr; }.skills-section { grid-template-columns: 1fr; gap: 60px; }.section-heading { grid-template-columns: 1fr auto; }.section-heading > div { grid-column: 1/-1; }.project-row { grid-template-columns: 35px 250px 1fr 30px; gap: 22px; }.case-content { grid-template-columns: 1fr; }.case-intro, .case-body { grid-column: 1; }.architecture { gap: 12px; padding: 30px 15px; }.arch-node { min-width: 135px; }.vise-dashboard { overflow-x: auto; }.dashboard-main { min-width: 760px; }.neural-diagram { gap: 25px; }.connections { width: 60px; }
}
@media (max-width: 700px) {
  .section-shell, .site-header { width: min(calc(100% - 30px), var(--max)); }.site-header { height: 72px; }.brand-cluster { gap: 10px; }.brand-socials { gap: 5px; padding-left: 10px; }.brand-socials a { width: 28px; height: 28px; }.menu-toggle { display: block; z-index: 3; }.site-nav { position: fixed; inset: 0; background: rgba(8,8,11,.97); backdrop-filter: blur(15px); flex-direction: column; justify-content: center; gap: 30px; opacity: 0; visibility: hidden; transition: .25s; }.site-nav.open { opacity: 1; visibility: visible; }.site-nav a { font-size: 22px; }.menu-toggle.open span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { min-height: auto; padding-block: 70px 80px; }.hero h1, .page-hero h1, .case-hero h1 { font-size: clamp(46px,15vw,67px); }.hero-lede { font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-meta { gap: 18px; justify-content: space-between; }.hero-meta strong { font-size: 20px; }.hero-meta span { max-width: 85px; }.hero-visual { height: 410px; }.code-window { transform: none; }.terminal-lines { padding: 27px 14px; font-size: 12px; overflow: hidden; }.orbit-one { width: 390px; height: 390px; }.orbit-two { width: 300px; height: 300px; }.float-tag { display: none; }
  .section-block { padding-block: 95px; }.section-heading { grid-template-columns: 1fr; align-items: start; }.section-heading h2 { font-size: 42px; }.text-link { width: fit-content; }.project-art { height: 260px; }.timeline-item { grid-template-columns: 15px 1fr; }.timeline-date { grid-column: 2; padding: 0 0 15px 20px; }.timeline-marker { grid-row: 1/3; grid-column: 1; }.timeline-copy { grid-column: 2; padding: 0 0 60px 20px; }.role-line { flex-direction: column; gap: 5px; }.impact-list { display: block; }.impact-list li { margin: 9px 0; }.skill-groups > div { grid-template-columns: 1fr; gap: 10px; }.site-footer { padding-block: 35px; flex-direction: column; gap: 15px; align-items: flex-start; }
  .page-hero { padding: 75px 0; }.project-row { grid-template-columns: 28px 1fr 24px; gap: 14px; }.project-row-art { grid-column: 2/4; width: 100%; height: 210px; }.project-row-copy { grid-column: 2; }.project-row-arrow { grid-column: 3; }.project-row-copy h2 { font-size: 30px; }.project-philosophy { margin-block: 90px; }
  .case-kicker { margin-top: 55px; }.case-meta { gap: 24px; flex-wrap: wrap; }.demo-shell { width: 100%; margin-bottom: 100px; }.demo-topbar { border-inline: 0; }.vise-dashboard { border-inline: 0; }.demo-caption { padding-inline: 15px; line-height: 1.6; }.case-content { padding: 100px 0; gap: 60px; }.architecture { flex-direction: column; }.arch-arrow { transform: rotate(90deg); }.arch-stack { width: 100%; }.arch-node { width: 100%; }.outcomes { grid-template-columns: 1fr; }.outcomes div { border-right: 0; border-bottom: 1px solid var(--line); }.next-project { grid-template-columns: 1fr auto; min-height: 170px; }.next-project span { grid-column: 1/-1; align-self: end; }.next-project strong { align-self: start; }.next-project i { align-self: start; }
  .mnist-lab { grid-template-columns: 1fr; }.draw-panel { border-right: 0; border-bottom: 1px solid var(--line); }.draw-panel, .prediction-panel { padding: 22px 15px; }.canvas-wrap { max-width: 300px; }.neural-diagram { flex-direction: column; }.connections { transform: rotate(90deg); height: 60px; }.case-hero { padding-bottom: 70px; }
}

@media (max-width: 980px) {
  .experience-layout { grid-template-columns: 1fr; gap: 35px; }
  .experience-overview { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 45px; }
  .experience-overview h3 { margin: 18px 0 0; }
  .experience-overview > p { align-self: end; }
  .experience-overview > span,.experience-totals { grid-column: 1/-1; }
  .experience-totals { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 5px; }
  .experience-totals > div { padding-left: 18px; border-right: 1px solid var(--line); border-bottom: 0; }
  .experience-totals > div:first-child { padding-left: 0; }
  .experience-totals > div:last-child { border-right: 0; }
}

@media (max-width: 700px) {
  #experience { padding-bottom: 105px; }
  .experience-overview { display: block; padding: 24px 20px; }
  .experience-overview h3 { margin-top: 30px; font-size: 25px; }
  .experience-overview > p { margin-top: 15px; }
  .experience-totals { grid-template-columns: 1fr; margin-top: 28px; }
  .experience-totals > div { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .experience-card { padding: 30px 0 38px; }
  .experience-card::before { display: none; }
  .experience-card-header,.experience-card-header > div,.experience-role { align-items: flex-start; flex-direction: column; gap: 8px; }
  .experience-card-header small,.experience-role > a,.experience-role > span { max-width: none; text-align: left; }
  .experience-role { margin: 32px 0 17px; }
  .experience-role h3 { font-size: 28px; }
  .experience-card > p { font-size: 13px; }
  .experience-results { grid-template-columns: 1fr; }
  .experience-results > div { min-height: 135px; border-right: 0; border-bottom: 1px solid var(--line); }
  .experience-results > div:last-child { border-bottom: 0; }
  .experience-results p { margin-top: 24px; }
}

/* Vise infrastructure narrative */
.vise-infrastructure-page { background: #080808; }
.vise-infrastructure-page::before { background: radial-gradient(850px 620px at 82% 7%,rgba(245,196,0,.045),transparent 74%); }
.infra-hero { width: min(calc(100% - 48px),1500px); min-height: calc(100svh - 92px); margin: 0 auto; position: relative; display: grid; grid-template-columns: minmax(460px,.92fr) minmax(600px,1.08fr); grid-template-rows: 1fr auto; align-items: center; gap: 20px 60px; padding: 72px 0 32px; overflow: hidden; }
.infra-hero-glow { position: absolute; right: 5%; top: 12%; width: 560px; height: 560px; border-radius: 50%; background: rgba(245,196,0,.045); filter: blur(95px); pointer-events: none; }
.infra-hero-copy { position: relative; z-index: 4; padding-left: max(0px,calc((100% - 1240px)/2)); }
.infra-hero-copy .case-kicker { margin-top: 72px; }
.infra-hero h1 { max-width: 780px; margin: 29px 0 26px; font-size: clamp(64px,6.9vw,116px); line-height: .9; letter-spacing: -.075em; }
.infra-hero h1 span { color: var(--purple); }
.infra-hero-copy > p { max-width: 640px; color: #a5a1ad; font-size: clamp(15px,1.25vw,19px); line-height: 1.78; }
.infra-hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 39px; }
.primary-link { min-height: 53px; display: inline-flex; align-items: center; gap: 46px; padding: 0 20px; background: var(--purple); color: #100a1b; font-size: 13px; font-weight: 800; transition: .3s ease; }
.primary-link:hover { background: var(--purple-bright); transform: translateY(-3px); box-shadow: 0 18px 45px rgba(245,196,0,.2); }
.infra-live { display: inline-flex; align-items: center; gap: 9px; color: #77737f; font: 12px "DM Mono",monospace; text-transform: uppercase; letter-spacing: .09em; }
.infra-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: blink 2s infinite; }

.infra-hero-system { min-height: 650px; position: relative; z-index: 2; display: grid; place-items: center; }
.infra-hero-system::before { content: ""; position: absolute; width: 67%; aspect-ratio: 1; border-radius: 50%; background: rgba(245,196,0,.025); }
.hero-orbit { position: absolute; border: 1px solid rgba(245,196,0,.17); border-radius: 50%; }
.hero-orbit::before,.hero-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 15px var(--purple); }
.hero-orbit::before { left: 12%; top: 20%; }.hero-orbit::after { right: 10%; bottom: 18%; }
.hero-orbit-one::before,.hero-orbit-one::after { display: none; }
.hero-orbit-one { width: 520px; height: 520px; animation: infraSpin 36s linear infinite; }
.hero-orbit-two { width: 380px; height: 380px; border-style: dashed; animation: infraSpin 26s linear infinite reverse; }
.hero-core { position: relative; z-index: 4; width: 184px; height: 184px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #11100b; border: 1px solid rgba(255,218,80,.65); box-shadow: 0 0 0 15px rgba(245,196,0,.02),0 0 55px rgba(245,196,0,.14); }
.hero-core::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; }
.hero-core small { color: #777080; font: 12px "DM Mono"; letter-spacing: .22em; }.hero-core strong { font-size: 31px; line-height: 1; letter-spacing: -.04em; }.hero-core span { margin-top: 8px; color: var(--purple); font: 12px "DM Mono"; }
.hero-satellite { position: absolute; z-index: 5; min-width: 150px; padding: 14px 15px 13px 38px; border: 1px solid rgba(255,255,255,.12); background: rgba(13,12,18,.84); backdrop-filter: blur(15px); box-shadow: 0 16px 50px rgba(0,0,0,.3); }
.hero-satellite i { position: absolute; left: 15px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero-satellite span,.hero-satellite strong { display: block; }.hero-satellite span { color: #76717d; font: 12px "DM Mono"; letter-spacing: .1em; }.hero-satellite strong { margin-top: 4px; font: 500 12px "DM Mono"; }
.satellite-fleet { left: 3%; top: 21%; }.satellite-cache { right: 1%; top: 29%; }.satellite-data { right: 7%; bottom: 19%; }.satellite-ops { left: 0; bottom: 18%; }
.hero-signal { position: absolute; z-index: 1; height: 1px; transform-origin: left; background: linear-gradient(90deg,transparent,rgba(245,196,0,.65),transparent); overflow: hidden; }
.hero-signal::after { content: ""; position: absolute; width: 30%; height: 100%; background: white; box-shadow: 0 0 10px var(--purple); animation: signalSweep 2.3s linear infinite; }
.signal-one { width: 235px; left: 20%; top: 32%; transform: rotate(27deg); }.signal-two { width: 245px; left: 54%; top: 48%; transform: rotate(-20deg); }.signal-three { width: 220px; left: 26%; top: 64%; transform: rotate(-27deg); }
.infra-hero-facts { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,1fr); position: relative; z-index: 6; border-top: 1px solid var(--line); }
.infra-hero-facts > div { min-height: 84px; padding: 22px 25px; border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }.infra-hero-facts > div:last-child { border: 0; }
.infra-hero-facts strong { color: var(--purple-bright); font: 500 18px "DM Mono"; }.infra-hero-facts span { color: #6e6a75; font-size: 12px; }

.infra-intro { min-height: 600px; display: grid; grid-template-columns: 60px 1.2fr .8fr; align-items: center; gap: 55px; border-bottom: 1px solid var(--line); }
.infra-intro > div small,.infra-scroll-heading small,.stat-journey-heading small,.operations-heading small,.infra-outcome > small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .16em; }
.infra-intro h2 { margin: 16px 0 0; max-width: 730px; font-size: clamp(40px,4.6vw,65px); line-height: 1.05; letter-spacing: -.06em; }
.infra-intro > p { color: #918d98; font-size: 15px; line-height: 1.9; max-width: 480px; }

.infra-scroll { padding: 135px 0 170px; }
.infra-scroll-heading { position: relative; z-index: 12; margin-bottom: 110px; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.infra-scroll-heading small { grid-column: 1/-1; margin-bottom: 13px; }.infra-scroll-heading h2 { margin: 0; font-size: clamp(49px,6vw,82px); line-height: .95; letter-spacing: -.065em; }.infra-scroll-heading p { color: #716d78; font-size: 12px; margin: 0; }
.infra-scroll-layout { width: min(calc(100% - 48px),1440px); display: grid; grid-template-columns: minmax(410px,.68fr) minmax(700px,1.32fr); gap: 58px; align-items: start; }
.infra-chapters { min-width: 0; }
.infra-chapter { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0; opacity: .22; transition: opacity .45s ease; }
.infra-chapter.active { opacity: 1; }
.infra-chapter > span { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .12em; }
.infra-chapter h3 { max-width: 520px; margin: 19px 0 22px; font-size: clamp(28px,3vw,44px); line-height: 1.08; letter-spacing: -.05em; }
.infra-chapter > p { max-width: 520px; color: #98949f; font-size: 15px; line-height: 1.82; }
.infra-chapter ul { margin: 19px 0 25px; padding: 0; list-style: none; }
.infra-chapter li { position: relative; padding: 7px 0 7px 18px; color: #7f7b86; font-size: 13px; line-height: 1.55; }.infra-chapter li::before { content: "+"; position: absolute; left: 0; color: var(--green); font: 12px "DM Mono"; }
.infra-chapter li code { color: #aaa1bb; font-size: 13px; }
.infra-chapter > code { width: fit-content; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.018); color: #85808d; font: 13px "DM Mono"; }
.infra-sticky-wrap { position: sticky; top: max(36px,calc((100svh - 820px)/2)); align-self: start; height: fit-content; }
.infra-map { height: min(820px,calc(100svh - 72px)); min-height: min(650px,calc(100svh - 72px)); position: relative; display: grid; grid-template-rows: 52px 1fr 220px 4px; border: 1px solid rgba(255,255,255,.14); background: #0c0c0a; box-shadow: 0 38px 100px rgba(0,0,0,.42); overflow: hidden; }
.infra-map::before { content: ""; position: absolute; inset: 52px 0 224px; background: rgba(245,196,0,.012); pointer-events: none; }
.infra-map-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 22px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); color: #77727e; font: 12px "DM Mono"; letter-spacing: .1em; }
.infra-map-header > div { display: flex; align-items: center; gap: 9px; }.infra-map-header i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2s infinite; }.infra-map-header strong { color: var(--purple); font-weight: 400; }
.infra-drag-hint { color: #55515d; font-size: 12px; letter-spacing: .13em; }
.infra-map-tools { gap: 12px!important; }.infra-map-tools button { padding: 5px 7px; border: 1px solid var(--line); background: transparent; color: #625e69; cursor: pointer; font: 12px "DM Mono"; letter-spacing: .08em; transition: .2s; }.infra-map-tools button:hover { color: var(--text); border-color: var(--purple); }
.infra-map-canvas { min-height: 0; position: relative; overflow: hidden; isolation: isolate; }
.infra-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.infra-links path { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: stroke .4s,opacity .4s; }
.infra-links path.active { stroke: var(--purple); stroke-width: 1.8; stroke-dasharray: 7 11; opacity: .95; animation: infraPath 1.1s linear infinite; filter: drop-shadow(0 0 4px rgba(245,196,0,.65)); }
.infra-links path.complete { stroke: rgba(217,186,53,.42); }
.infra-node { position: absolute; z-index: 3; min-width: 106px; padding: 15px 15px 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(15,14,20,.91); box-shadow: 0 10px 30px rgba(0,0,0,.22); opacity: .22; transform: translate(-50%,-50%) scale(.96); transition: opacity .45s,transform .45s,border-color .45s,box-shadow .45s,background .45s; cursor: grab; touch-action: none; user-select: none; }
.infra-node::before { content: ""; position: absolute; left: 12px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #5d5964; transition: .4s; }
.infra-node > span,.infra-node > strong,.infra-node > small { display: block; padding-left: 13px; }.infra-node > span { color: #5f5b66; font: 12px "DM Mono"; letter-spacing: .11em; }.infra-node > strong { margin-top: 5px; font-size: 13px; }.infra-node > small { margin-top: 3px; color: #625e69; font-size: 12px; white-space: nowrap; }
.infra-node.context { opacity: .52; }.infra-node.active { opacity: 1; transform: translate(-50%,-50%) scale(1); border-color: rgba(245,196,0,.62); background: rgba(28,24,12,.96); box-shadow: 0 13px 42px rgba(181,135,0,.18),0 0 0 1px rgba(245,196,0,.08); }.infra-node.active::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.infra-node:hover { opacity: 1; border-color: rgba(245,196,0,.45); }.infra-node:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }.infra-node.dragging { z-index: 12; cursor: grabbing; transition: none; opacity: 1; transform: translate(-50%,-50%) scale(1.04); }.infra-node.focused { z-index: 8; opacity: 1; transform: translate(-50%,-50%) scale(1.06); border-color: var(--purple-bright); background: #221d0d; box-shadow: 0 18px 60px rgba(220,168,0,.3),0 0 0 5px rgba(245,196,0,.06); }
.node-player { left: 9%; top: 20%; }.node-proxy { left: 29%; top: 20%; }.node-core { left: 49%; top: 50%; width: 150px; min-height: 112px; }.node-redis { left: 72%; top: 20%; }.node-sql { left: 91%; top: 50%; min-width: 126px; }.node-services { left: 70%; top: 80%; }.node-ops { left: 91%; top: 80%; }
.fleet-mini { display: flex; gap: 3px; padding-top: 9px; }.fleet-mini i { flex: 1; padding: 3px 2px; border: 1px solid rgba(245,196,0,.19); color: #77717f; font: normal 12px "DM Mono"; text-align: center; }
.infra-packet { position: absolute; z-index: 5; width: 7px; height: 7px; border-radius: 50%; background: white; box-shadow: 0 0 6px white,0 0 16px var(--purple); opacity: 0; pointer-events: none; }
.infra-map[data-scene="0"] .packet-a { left: 10%; top: 49%; animation: packetIngress 2.2s ease-in-out infinite; }
.infra-map[data-scene="1"] .packet-a { left: 53%; top: 51%; animation: packetPub 2.2s ease-in-out infinite; }.infra-map[data-scene="1"] .packet-b { left: 73%; top: 24%; animation: packetReturn 2.2s 1.1s ease-in-out infinite; }
.infra-map[data-scene="2"] .packet-a { left: 53%; top: 47%; animation: packetRedis 2s ease-in-out infinite; }.infra-map[data-scene="2"] .packet-b { left: 74%; top: 23%; animation: packetSql 2s 1s ease-in-out infinite; }
.infra-map[data-scene="3"] .packet-a { left: 54%; top: 54%; animation: packetOps 2.2s ease-in-out infinite; }
.infra-map[data-scene="4"] .packet-a { left: 73%; top: 23%; animation: packetRetry 2.2s ease-in-out infinite; }
.infra-map[data-scene="5"] .packet-a { left: 53%; top: 52%; animation: packetServices 2.1s ease-in-out infinite; }.infra-map[data-scene="5"] .packet-b { left: 74%; top: 72%; animation: packetBoundary 2.1s 1s ease-in-out infinite; }
.infra-map-console { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto 1fr; gap: 15px 20px; padding: 20px; border-top: 1px solid var(--line); background: rgba(10,10,14,.92); }
.infra-console-copy span,.infra-console-metrics small { display: block; color: var(--purple); font: 12px "DM Mono"; letter-spacing: .1em; }.infra-console-copy strong { display: block; margin-top: 6px; font-size: 14px; }
.infra-console-metrics { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }.infra-console-metrics div { padding: 9px; border-right: 1px solid var(--line); }.infra-console-metrics div:last-child { border: 0; }.infra-console-metrics strong { display: block; margin-top: 4px; color: #c5c1ca; font: 12px "DM Mono"; }
.infra-console-log { grid-column: 1/-1; list-style: none; margin: 0; padding: 0; min-height: 92px; }
.infra-console-log li { display: grid; grid-template-columns: 65px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.045); animation: consoleLine .35s both; }.infra-console-log li:nth-child(2) { animation-delay: .08s; }.infra-console-log li:nth-child(3) { animation-delay: .16s; }
.infra-console-log time { color: #4d4953; font: 12px "DM Mono"; }.infra-console-log span { color: #797580; font: 12px "DM Mono"; }
.infra-map-progress { background: #1d1b22; }.infra-map-progress i { display: block; width: 16.66%; height: 100%; background: linear-gradient(90deg,#b28a00,var(--purple-bright)); transition: width .45s ease; box-shadow: 0 0 14px rgba(245,196,0,.45); }
.infra-map-nav { position: absolute; z-index: 8; right: 9px; top: 58px; display: flex; flex-direction: column; gap: 5px; }.infra-map-nav button { width: 27px; height: 27px; padding: 0; border: 1px solid var(--line); background: rgba(10,10,14,.78); color: #56525c; cursor: pointer; font: 12px "DM Mono"; transition: .25s; }.infra-map-nav button:hover,.infra-map-nav button.active { color: #0e0917; border-color: var(--purple); background: var(--purple); }

/* Keep normal copy readable while preserving the dense technical map layout. */
.vise-infrastructure-page .infra-map-header { font-size: 10px; letter-spacing: .08em; }
.vise-infrastructure-page .infra-drag-hint,.vise-infrastructure-page .infra-map-tools button { font-size: 10px; }
.vise-infrastructure-page .infra-node { min-width: 118px; padding: 13px 13px 12px; }
.vise-infrastructure-page .infra-node > span { font: 10px "DM Mono"; letter-spacing: .08em; }
.vise-infrastructure-page .infra-node > strong { font-size: 12px; }
.vise-infrastructure-page .infra-node > small { max-width: 138px; font-size: 10px; line-height: 1.35; white-space: normal; }
.vise-infrastructure-page .node-core { width: 150px; min-height: 108px; }
.vise-infrastructure-page .node-sql { min-width: 134px; }
.vise-infrastructure-page .node-services { min-width: 160px; }
.vise-infrastructure-page .fleet-mini i { font-size: 10px; }
.vise-infrastructure-page .infra-console-copy span,.vise-infrastructure-page .infra-console-metrics small,.vise-infrastructure-page .infra-console-metrics strong,.vise-infrastructure-page .infra-console-log time,.vise-infrastructure-page .infra-console-log span { font-size: 10px; }
.vise-infrastructure-page .infra-console-copy strong { font-size: 13px; line-height: 1.25; }
.vise-infrastructure-page .infra-console-log li { grid-template-columns: 62px 1fr; gap: 8px; }
.vise-infrastructure-page .infra-map-nav button { font-size: 10px; }
.vise-infrastructure-page .stat-event-card > small,.vise-infrastructure-page .stat-event-card > code,.vise-infrastructure-page .stat-event-card > div span,.vise-infrastructure-page .stat-event-card > div strong,.vise-infrastructure-page .stat-layer > span,.vise-infrastructure-page .stat-layer > small,.vise-infrastructure-page .stat-layer > div b,.vise-infrastructure-page .stat-layer > div strong,.vise-infrastructure-page .stat-layer > code,.vise-infrastructure-page .stat-commit span,.vise-infrastructure-page .stat-commit strong { font-size: 10px; }
.vise-infrastructure-page .ops-topbar,.vise-infrastructure-page .ops-server-list button span,.vise-infrastructure-page .ops-server-list button small,.vise-infrastructure-page .ops-card-head small,.vise-infrastructure-page .ops-card-head span,.vise-infrastructure-page .ops-chart-labels,.vise-infrastructure-page .ops-metrics small,.vise-infrastructure-page .ops-metrics span,.vise-infrastructure-page .ops-stream small,.vise-infrastructure-page .ops-stream strong,.vise-infrastructure-page .ops-pulse span { font-size: 10px; }
.vise-infrastructure-page .ops-stream strong { overflow-wrap: anywhere; }

.stat-journey { padding: 130px 0 170px; border-top: 1px solid var(--line); }
.stat-journey-heading { display: grid; grid-template-columns: 45px 1fr auto; align-items: end; gap: 25px; margin-bottom: 60px; }
.stat-journey-heading h2 { max-width: 800px; margin: 10px 0 0; font-size: clamp(38px,4.5vw,62px); line-height: 1.04; letter-spacing: -.055em; }
.stat-journey-heading button { min-height: 46px; padding: 0 17px; border: 1px solid var(--line-bright); background: transparent; color: #aaa5b0; cursor: pointer; font: 12px "DM Mono"; transition: .25s; }.stat-journey-heading button span { color: var(--purple); margin-left: 22px; }.stat-journey-heading button:hover { border-color: var(--purple); color: white; }
.stat-transaction { position: relative; display: grid; grid-template-columns: .8fr 56px repeat(3,1fr); align-items: stretch; min-height: 430px; border: 1px solid var(--line); background: #0c0c0a; overflow: hidden; }
.stat-transaction::before { content: ""; position: absolute; left: 15%; right: 9%; top: 50%; height: 1px; background: rgba(245,196,0,.11); }
.stat-event-card { position: relative; z-index: 2; margin: 45px 25px; padding: 25px 18px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(245,196,0,.28); background: rgba(22,20,13,.9); box-shadow: 0 25px 55px rgba(0,0,0,.25); }
.stat-event-card > small { color: var(--purple); font: 12px "DM Mono"; }.stat-event-card > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 35px 0; text-align: center; }.stat-event-card > div span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); color: #aaa5b0; font: 12px "DM Mono"; }.stat-event-card > div strong { color: var(--green); font: 12px "DM Mono"; }.stat-event-card > code { color: #625e69; font: 12px "DM Mono"; }
.stat-route { position: relative; z-index: 3; }.stat-route::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }.stat-route i { position: absolute; left: 0; top: calc(50% - 2px); width: 0; height: 3px; background: var(--purple); box-shadow: 0 0 12px var(--purple); }.stat-route b { position: absolute; right: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid var(--purple); border-right: 1px solid var(--purple); transform: rotate(45deg); }
.stat-layer { position: relative; z-index: 2; margin: 28px 0; padding: 29px 24px; border-left: 1px solid var(--line); background: rgba(13,13,18,.8); opacity: .32; transform: translateY(12px); transition: .45s; }.stat-layer:last-of-type { border-right: 1px solid var(--line); }
.stat-layer > span { position: absolute; right: 19px; top: 18px; color: #4f4b55; font: 12px "DM Mono"; }.stat-layer > small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .13em; }.stat-layer h3 { margin: 38px 0 25px; font-size: 17px; }.stat-layer > div { padding: 13px 0; border-top: 1px solid var(--line); }.stat-layer > div b,.stat-layer > div strong { display: block; }.stat-layer > div b { color: #625e69; font: 12px "DM Mono"; }.stat-layer > div strong { margin-top: 4px; font-size: 12px; }.stat-layer > div i { color: var(--purple); font-style: normal; }.stat-layer > code { position: absolute; left: 24px; bottom: 24px; color: #5c5863; font: 12px "DM Mono"; }
.stat-commit { position: absolute; z-index: 6; right: 25px; bottom: 13px; display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(5px); transition: .4s; }.stat-commit i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.stat-commit span { color: var(--green); font: 12px "DM Mono"; }.stat-commit strong { color: #696570; font: 12px "DM Mono"; font-weight: 400; }
.stat-transaction.running .stat-route i { animation: routeFill .7s .2s forwards; }.stat-transaction.running .stat-layer { animation: layerActivate .55s forwards; }.stat-transaction.running .layer-memory { animation-delay: .65s; }.stat-transaction.running .layer-redis { animation-delay: 1.15s; }.stat-transaction.running .layer-maria { animation-delay: 1.65s; }.stat-transaction.running .stat-commit { animation: commitIn .4s 2.2s forwards; }

.operations-room { padding: 150px 0; background: #0a0a08; border-block: 1px solid var(--line); }
.operations-heading { display: grid; grid-template-columns: 100px 1.05fr .75fr; gap: 50px; align-items: start; margin-bottom: 70px; }.operations-heading > div { display: flex; flex-direction: column; gap: 10px; }.operations-heading h2 { margin: 0; font-size: clamp(43px,5.3vw,73px); line-height: .98; letter-spacing: -.065em; }.operations-heading > p { color: #918d98; font-size: 14px; line-height: 1.9; margin: 0; }
.operations-dashboard { border: 1px solid rgba(255,255,255,.15); background: #0c0c11; box-shadow: 0 45px 100px rgba(0,0,0,.35); }
.ops-topbar { min-height: 47px; padding: 0 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); color: #6e6a75; font: 12px "DM Mono"; }.ops-topbar > div { display: flex; align-items: center; gap: 9px; }.ops-topbar i,.ops-card-head span i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.ops-topbar time { color: #504d56; }
.ops-server-list { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }.ops-server-list button { min-height: 66px; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 0 17px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #77737e; cursor: pointer; text-align: left; transition: .25s; }.ops-server-list button:last-child { border: 0; }.ops-server-list button i { width: 6px; height: 6px; border-radius: 50%; background: #4d4a53; }.ops-server-list button span { font: 12px "DM Mono"; }.ops-server-list button small { color: #55515b; font: 12px "DM Mono"; }.ops-server-list button.active { background: rgba(245,196,0,.055); color: var(--purple-bright); box-shadow: inset 0 -2px var(--purple); }.ops-server-list button.active i { background: var(--green); box-shadow: 0 0 10px var(--green); }
.ops-main { min-height: 450px; display: grid; grid-template-columns: 1fr 270px; }.ops-chart-card { min-width: 0; padding: 27px 28px 20px; border-right: 1px solid var(--line); }.ops-card-head { display: flex; justify-content: space-between; align-items: start; }.ops-card-head small { display: block; color: #625e69; font: 12px "DM Mono"; letter-spacing: .11em; }.ops-card-head strong { display: block; margin-top: 5px; font-size: 19px; }.ops-card-head span { color: var(--green); font: 12px "DM Mono"; }.ops-card-head span i { margin-right: 6px; }
.ops-chart { width: 100%; height: 285px; margin-top: 28px; overflow: visible; }.ops-grid-line { fill: none; stroke: rgba(255,255,255,.055); stroke-width: 1; vector-effect: non-scaling-stroke; }.ops-area { fill: url(#opsArea); transition: .5s; }.ops-line { fill: none; stroke: var(--purple); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(245,196,0,.35)); transition: .5s; }.ops-chart-labels { display: flex; justify-content: space-between; color: #504c56; font: 12px "DM Mono"; }
.ops-metrics { display: grid; grid-template-rows: repeat(4,1fr); }.ops-metrics article { padding: 23px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }.ops-metrics article:last-child { border: 0; }.ops-metrics small { color: #5c5863; font: 12px "DM Mono"; letter-spacing: .11em; }.ops-metrics strong { margin: 7px 0 3px; font-size: 22px; letter-spacing: -.03em; }.ops-metrics span { color: #5d5963; font-size: 12px; }
.ops-stream { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-top: 1px solid var(--line); }.ops-stream > div { min-height: 76px; padding: 17px; border-right: 1px solid var(--line); }.ops-stream > div:last-child { border: 0; }.ops-stream small,.ops-stream strong { display: block; }.ops-stream small { color: #57535d; font: 12px "DM Mono"; }.ops-stream strong { margin-top: 6px; color: #8b8791; font: 12px "DM Mono"; }.ops-pulse { display: grid!important; grid-template-columns: 12px 1fr; align-content: center; }.ops-pulse i { grid-row: 1/3; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px var(--purple); animation: blink 1s infinite; }.ops-pulse span { color: #57535d; font: 12px "DM Mono"; }.ops-pulse strong { margin: 2px 0 0; color: var(--purple-bright); }

.infra-principles { padding: 150px 0; }.infra-principles .section-heading { grid-template-columns: .55fr 1.45fr; }.principle-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }.principle-grid article { position: relative; min-height: 360px; padding: 30px 27px; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); transition: .3s; }.principle-grid article:last-child { border: 0; }.principle-grid article:hover { background: rgba(245,196,0,.045); transform: translateY(-5px); }.principle-grid article > span { color: var(--purple); font: 12px "DM Mono"; }.principle-grid h3 { margin: 70px 0 15px; font-size: 20px; letter-spacing: -.035em; }.principle-grid p { color: #7c7883; font-size: 12px; line-height: 1.75; }.principle-grid code { position: absolute; left: 27px; bottom: 27px; color: #5c5862; font: 12px "DM Mono"; }
.infra-outcome { min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-top: 1px solid var(--line); }.infra-outcome h2 { max-width: 910px; margin: 20px auto; font-size: clamp(48px,6vw,80px); line-height: 1; letter-spacing: -.065em; }.infra-outcome > p { max-width: 730px; color: #918d98; font-size: 15px; line-height: 1.8; }.infra-outcome > div { max-width: 950px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 35px; }.infra-outcome > div span { padding: 8px 11px; border: 1px solid var(--line); color: #7f7b86; background: rgba(255,255,255,.015); font: 12px "DM Mono"; }

@keyframes infraSpin { to { transform: rotate(360deg); } }
@keyframes signalSweep { from { left: -35%; } to { left: 110%; } }
@keyframes infraPath { to { stroke-dashoffset: -18; } }
@keyframes consoleLine { from { opacity: 0; transform: translateX(8px); } }
@keyframes packetIngress { 0% { opacity: 0; transform: translate(0,0); } 12% { opacity: 1; } 50% { opacity: 1; transform: translate(150px,0); } 100% { opacity: 0; transform: translate(330px,0); } }
@keyframes packetPub { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(185px,-125px); } }
@keyframes packetReturn { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-180px,135px); } }
@keyframes packetRedis { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(185px,-125px); } }
@keyframes packetSql { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(145px,0); } }
@keyframes packetOps { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(330px,130px); } }
@keyframes packetRetry { 0%,100% { opacity: 0; transform: translate(0,0); } 18% { opacity: 1; } 48% { opacity: 1; transform: translate(140px,0); } 70% { opacity: .7; transform: translate(90px,0); } }
@keyframes packetServices { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(185px,115px); } }
@keyframes packetBoundary { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(140px,-125px); } }
@keyframes routeFill { to { width: 100%; } }
@keyframes layerActivate { to { opacity: 1; transform: translateY(0); background: rgba(28,24,12,.86); box-shadow: inset 0 2px var(--purple); } }
@keyframes commitIn { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1250px) {
  .infra-hero { grid-template-columns: .9fr 1.1fr; }.infra-hero-system { transform: scale(.9); }.infra-scroll-layout { grid-template-columns: minmax(350px,.62fr) minmax(620px,1.38fr); gap: 35px; }.infra-map { min-height: min(620px,calc(100svh - 72px)); }.infra-node { padding-inline: 10px; }.node-core { width: 125px; }.stat-transaction { grid-template-columns: .75fr 42px repeat(3,1fr); }.stat-layer { padding-inline: 18px; }.stat-layer > code { left: 18px; }
}
@media (max-width: 1050px) {
  .infra-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 70px; }.infra-hero-copy { padding: 0 max(0px,calc((100% - 900px)/2)); }.infra-hero-system { min-height: 560px; transform: none; }.infra-hero-facts { width: 100%; }.infra-intro { grid-template-columns: 40px 1fr; padding-block: 130px; }.infra-intro > p { grid-column: 2; max-width: 700px; }.infra-scroll-layout { display: flex; flex-direction: column; gap: 0; }.infra-sticky-wrap { order: -1; width: 100%; top: 15svh; z-index: 10; transform: none; }.infra-map { height: 70svh; min-height: min(600px,calc(100svh - 70px)); }.infra-chapter { min-height: 95vh; padding: 58vh 25px 80px; }.infra-chapter h3,.infra-chapter > p { max-width: 680px; }.stat-transaction { grid-template-columns: .7fr 35px repeat(3,1fr); }.stat-event-card { margin-inline: 14px; padding-inline: 12px; }.stat-layer { padding: 25px 14px; }.stat-layer > code { left: 14px; }.operations-heading { grid-template-columns: 70px 1fr; }.operations-heading > p { grid-column: 2; max-width: 700px; }.principle-grid { grid-template-columns: 1fr 1fr; }.principle-grid article:nth-child(2) { border-right: 0; }.principle-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .infra-hero { width: min(calc(100% - 30px),1500px); display: block; padding: 48px 0 20px; overflow: visible; }.infra-hero-copy .case-kicker { margin-top: 58px; }.infra-hero h1 { margin-top: 23px; font-size: clamp(54px,16vw,78px); }.infra-hero-copy > p { font-size: 15px; }.infra-hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }.primary-link { justify-content: space-between; }.infra-hero-system { min-height: 470px; margin: 20px -15px 0; overflow: hidden; }.hero-orbit-one { width: 400px; height: 400px; }.hero-orbit-two { width: 290px; height: 290px; }.hero-core { width: 135px; height: 135px; }.hero-core strong { font-size: 24px; }.hero-satellite { min-width: 120px; padding: 11px 10px 10px 29px; }.hero-satellite i { left: 11px; top: 15px; }.satellite-fleet { left: 2%; top: 20%; }.satellite-cache { right: 0; top: 25%; }.satellite-data { right: 1%; bottom: 18%; }.satellite-ops { left: 1%; bottom: 17%; }.hero-signal { display: none; }.infra-hero-facts { grid-template-columns: 1fr 1fr; }.infra-hero-facts > div { min-height: 74px; padding: 17px 10px; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--line); }.infra-hero-facts > div:nth-child(2) { border-right: 0; }.infra-hero-facts strong { font-size: 16px; }
  .infra-intro { min-height: auto; grid-template-columns: 28px 1fr; gap: 25px 10px; padding-block: 100px; }.infra-intro h2 { font-size: 39px; }.infra-intro > p { font-size: 13px; }.infra-scroll { padding: 90px 0 110px; }.infra-scroll-heading { display: block; margin-bottom: 55px; }.infra-scroll-heading h2 { margin-top: 12px; font-size: 51px; }.infra-scroll-heading p { margin-top: 15px; }.infra-sticky-wrap { top: 72px; width: calc(100% + 30px); margin-left: -15px; transform: none; }.infra-map { height: 47svh; min-height: min(360px,calc(100svh - 90px)); grid-template-rows: 35px 1fr 93px 3px; box-shadow: 0 22px 60px rgba(0,0,0,.5); }.infra-map::before { inset: 35px 0 96px; }.infra-map-header { grid-template-columns: 1fr auto; padding-inline: 11px; }.infra-drag-hint,.infra-map-tools button { display: none; }.infra-map-canvas { min-height: 225px; }.infra-node { min-width: 58px; padding: 8px 5px 7px; touch-action: manipulation; }.infra-node::before { left: 7px; top: 8px; width: 4px; height: 4px; }.infra-node > span,.infra-node > strong,.infra-node > small { padding-left: 8px; }.infra-node > span { font-size: 12px; }.infra-node > strong { font-size: 12px; margin-top: 3px; }.infra-node > small { display: none; }.node-player { left: 9%; }.node-proxy { left: 27%; }.node-core { left: 50%; width: 78px; min-height: 68px; }.node-redis { left: 72%; }.node-sql { left: 91%; min-width: 68px; }.node-services { left: 72%; }.node-ops { left: 91%; }.fleet-mini { padding-top: 5px; }.fleet-mini i { font-size: 12px; padding: 2px 0; }.infra-map-nav { top: 42px; right: 5px; gap: 3px; }.infra-map-nav button { width: 20px; height: 20px; font-size: 12px; }.infra-map-console { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 12px; }.infra-console-copy strong { font-size: 12px; }.infra-console-metrics,.infra-console-log { display: none; }.infra-chapter { min-height: 93svh; padding: 54svh 5px 55px; opacity: .3; }.infra-chapter h3 { font-size: 30px; }.infra-chapter > p { font-size: 14px; line-height: 1.8; }.infra-chapter li { font-size: 13px; }.infra-chapter > code { white-space: normal; line-height: 1.55; font-size: 12px; }
  .stat-journey { padding: 100px 0; }.stat-journey-heading { grid-template-columns: 28px 1fr; }.stat-journey-heading h2 { font-size: 38px; }.stat-journey-heading button { grid-column: 2; width: 100%; display: flex; justify-content: space-between; align-items: center; }.stat-transaction { display: flex; flex-direction: column; min-height: auto; padding: 20px 15px 48px; }.stat-transaction::before { left: 50%; right: auto; top: 220px; bottom: 80px; width: 1px; height: auto; }.stat-event-card { min-height: 175px; margin: 0; }.stat-event-card > div { margin: 20px 0; }.stat-route { height: 50px; }.stat-route::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }.stat-route i { left: calc(50% - 1px); top: 0; width: 3px; height: 0; }.stat-route b { right: auto; left: calc(50% - 4px); top: auto; bottom: 0; transform: rotate(135deg); }.stat-layer { width: 100%; min-height: 230px; margin: 0 0 12px; border: 1px solid var(--line)!important; }.stat-layer h3 { margin-top: 28px; }.stat-layer > code { bottom: 18px; }.stat-commit { left: 20px; right: 20px; bottom: 17px; justify-content: center; }.stat-commit strong { display: none; }.stat-transaction.running .stat-route i { animation-name: routeFillVertical; }
  .operations-room { padding: 100px 0; }.operations-heading { grid-template-columns: 28px 1fr; gap: 25px 10px; }.operations-heading h2 { font-size: 44px; }.operations-heading > p { font-size: 12px; }.ops-server-list { grid-template-columns: 1fr; }.ops-server-list button { border-right: 0; border-bottom: 1px solid var(--line); }.ops-server-list button:last-child { border: 0; }.ops-main { display: block; }.ops-chart-card { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 15px; }.ops-chart { height: 210px; }.ops-metrics { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.ops-metrics article { min-height: 125px; border-right: 1px solid var(--line); }.ops-metrics article:nth-child(2) { border-right: 0; }.ops-stream { grid-template-columns: 1fr 1fr; }.ops-stream > div:nth-child(2) { border-right: 0; }.ops-stream > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.ops-stream strong { word-break: break-word; }
  .infra-principles { padding: 100px 0; }.infra-principles .section-heading { display: block; }.infra-principles .section-heading h2 { margin-top: 24px; font-size: 40px; }.principle-grid { grid-template-columns: 1fr; }.principle-grid article { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--line); }.principle-grid article:last-child { border-bottom: 0; }.principle-grid h3 { margin-top: 43px; }.infra-outcome { min-height: 650px; }.infra-outcome h2 { font-size: 48px; }.infra-outcome > p { font-size: 13px; }
}
@media (max-width: 760px) {
  .vise-infrastructure-page .infra-map-header { font-size: 9px; letter-spacing: .06em; }
  .vise-infrastructure-page .infra-node { min-width: 64px; padding: 8px 5px 7px; }
  .vise-infrastructure-page .infra-node > span { font-size: 8px; letter-spacing: .04em; }
  .vise-infrastructure-page .infra-node > strong { font-size: 10px; line-height: 1.05; }
  .vise-infrastructure-page .node-core { width: 86px; min-height: 70px; }
  .vise-infrastructure-page .node-sql { min-width: 74px; }
  .vise-infrastructure-page .node-services { min-width: 82px; }
  .vise-infrastructure-page .node-redis { left: 71%; }
  .vise-infrastructure-page .node-sql,.vise-infrastructure-page .node-ops { left: 89%; }
  .vise-infrastructure-page .node-services { left: 70%; }
  .vise-infrastructure-page .fleet-mini { display: none; }
  .vise-infrastructure-page .infra-map-nav button { width: 18px; height: 18px; font-size: 9px; }
  .vise-infrastructure-page .infra-console-copy span { font-size: 9px; }
  .vise-infrastructure-page .infra-console-copy strong { font-size: 11px; }
}
@keyframes routeFillVertical { to { height: 100%; } }

/* Vise guided system tour */
.vise-hero { padding-bottom: 120px; }
.vise-tour { margin-bottom: 155px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.023), rgba(255,255,255,.008)); box-shadow: 0 35px 90px rgba(0,0,0,.22); }
.tour-heading { min-height: 112px; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 24px 30px; border-bottom: 1px solid var(--line); }
.tour-heading small { color: var(--purple); font: 12px "DM Mono", monospace; letter-spacing: .13em; }
.tour-heading h2 { margin: 6px 0 0; font-size: clamp(22px,2.5vw,32px); letter-spacing: -.045em; }
.tour-play { min-height: 42px; padding: 0 16px; border: 1px solid var(--line-bright); background: rgba(255,255,255,.025); color: #b3afb9; cursor: pointer; font: 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .07em; transition: .25s; }
.tour-play:hover, .tour-play.playing { color: #100b18; background: var(--purple); border-color: var(--purple); }
.play-icon { margin-right: 8px; }
.tour-progress { height: 38px; display: flex; align-items: center; gap: 18px; padding: 0 30px; border-bottom: 1px solid var(--line); }
.tour-progress > i { flex: 1; height: 2px; background: rgba(255,255,255,.07); overflow: hidden; }.tour-progress b { display: block; width: 20%; height: 100%; background: var(--purple); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.tour-progress > span { color: #716d77; font: 12px "DM Mono", monospace; min-width: 68px; text-align: right; }
.tour-layout { display: grid; grid-template-columns: 205px minmax(390px,1fr) 350px; min-height: 590px; }
.tour-steps { border-right: 1px solid var(--line); padding: 20px 0; }
.tour-steps button { width: 100%; min-height: 98px; display: grid; grid-template-columns: 34px 1fr; align-items: center; text-align: left; gap: 7px; padding: 15px 20px; border: 0; border-left: 2px solid transparent; background: transparent; color: #68646f; cursor: pointer; transition: .25s; }
.tour-steps button:hover { color: #aaa6b0; background: rgba(255,255,255,.018); }.tour-steps button.active { color: var(--text); border-left-color: var(--purple); background: linear-gradient(90deg, rgba(245,196,0,.09), transparent); }
.tour-steps button > span { color: #4f4b55; font: 12px "DM Mono", monospace; }.tour-steps button.active > span { color: var(--purple); }
.tour-steps button div { display: flex; flex-direction: column; }.tour-steps strong { font-size: 12px; }.tour-steps small { color: #5e5a65; font-size: 12px; margin-top: 3px; }.tour-steps button.active small { color: #85818b; }
.tour-stage { position: relative; overflow: hidden; min-height: 590px; background: radial-gradient(circle at 50% 45%, rgba(245,196,0,.075), transparent 48%), linear-gradient(160deg,#0d0d12,#09090d); }
.tour-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .5s ease, transform .5s ease, visibility .5s; pointer-events: none; }
.tour-scene.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tour-copy { border-left: 1px solid var(--line); padding: 42px 32px 30px; display: flex; flex-direction: column; background: rgba(12,12,16,.58); }
.tour-copy > span { color: var(--purple); font: 12px "DM Mono", monospace; letter-spacing: .1em; }.tour-copy h3 { font-size: 28px; line-height: 1.15; letter-spacing: -.045em; margin: 20px 0 14px; }.tour-copy > p { color: #96929d; font-size: 13px; line-height: 1.75; margin: 0; }
.tour-copy ul { list-style: none; padding: 22px 0; margin: 22px 0; border-block: 1px solid var(--line); }.tour-copy li { color: #85818c; font-size: 12px; margin: 10px 0; padding-left: 17px; position: relative; }.tour-copy li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.tour-copy > code { color: var(--purple-bright); font: 12px/1.6 "DM Mono", monospace; padding: 12px; background: rgba(245,196,0,.055); border: 1px solid rgba(245,196,0,.15); }
.tour-controls { display: flex; gap: 8px; margin-top: auto; padding-top: 28px; }.tour-controls button { flex: 1; min-height: 42px; border: 1px solid var(--line); background: transparent; color: #96929d; cursor: pointer; font: 12px "DM Mono", monospace; transition: .2s; }.tour-controls button:last-child { color: #100b18; background: var(--purple); border-color: var(--purple); }.tour-controls button:hover:not(:disabled) { border-color: var(--purple); }.tour-controls button:disabled { opacity: .35; cursor: default; }

.scene-capture { display: grid; place-items: center; }.arena-ring { width: 76%; height: 220px; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 13%; border: 1px solid rgba(245,196,0,.22); border-radius: 50%; background: radial-gradient(ellipse,rgba(245,196,0,.08),transparent 66%); transform: perspective(700px) rotateX(58deg); }
.arena-ring::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; }.fighter { width: 76px; height: 76px; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(245,196,0,.6); background: #17150e; transform: rotateX(-58deg); box-shadow: 0 16px 35px rgba(0,0,0,.35); }.fighter span { color: var(--purple-bright); font-weight: 800; }.fighter small { color: #77727e; font-size: 12px; }.fighter-right { border-color: rgba(255,255,255,.2); }.scene-capture.active .fighter-left { animation: fighterStrike 1.8s .35s ease both; }.scene-capture.active .defeated { animation: fighterDefeat 1.8s .35s ease both; }
.impact-mark { position: absolute; left: 50%; top: 50%; z-index: 3; color: var(--purple); font: 800 25px "DM Mono"; opacity: 0; transform: translate(-50%,-50%) rotateX(-58deg) scale(.5); }.scene-capture.active .impact-mark { animation: impactFlash .6s 1.15s ease both; }
.event-packet { position: absolute; left: 50%; bottom: 58px; width: min(76%,410px); transform: translateX(-50%); padding: 16px 18px; border: 1px solid var(--line); background: rgba(18,18,24,.94); display: grid; grid-template-columns: 1fr auto; box-shadow: 0 20px 50px rgba(0,0,0,.35); opacity: 0; }.event-packet small { color: var(--purple); font: 12px "DM Mono"; grid-column: 1/-1; }.event-packet strong { font-size: 12px; margin-top: 5px; }.event-packet code { color: #77737d; font: 12px "DM Mono"; align-self: end; }.event-packet i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--green); }.scene-capture.active .event-packet { animation: packetReveal .55s 1.65s ease forwards; }.scene-capture.active .event-packet i { animation: packetLoad 1.2s 2s ease forwards; }

.scene-memory { padding: 55px 11%; }.memory-header { display: flex; justify-content: space-between; color: #5e5a64; font: 12px "DM Mono"; }.memory-header i { color: var(--purple); font-style: normal; }.profile-object { margin-top: 28px; border: 1px solid var(--line); background: rgba(17,17,23,.92); box-shadow: 0 25px 60px rgba(0,0,0,.25); }.profile-object-head { min-height: 82px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid var(--line); }.profile-object-head > span { width: 45px; height: 45px; display: grid; place-items: center; color: var(--purple); border: 1px solid rgba(245,196,0,.45); background: rgba(245,196,0,.08); font: 12px "DM Mono"; }.profile-object-head div { display: flex; flex-direction: column; }.profile-object-head strong { font-size: 13px; }.profile-object-head small { color: #5f5b65; font: 12px "DM Mono"; }.profile-object-head > i { color: var(--orange); font: normal 12px "DM Mono"; border: 1px solid rgba(239,183,0,.25); padding: 5px 7px; animation: blink 1.4s infinite; }
.stat-changes { display: grid; grid-template-columns: repeat(4,1fr); }.stat-changes > div { min-height: 105px; padding: 19px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }.stat-changes > div:last-child { border: 0; }.stat-changes span { color: #5e5a64; font: 12px "DM Mono"; }.stat-changes strong { font-size: 24px; margin-top: 11px; transition: .25s; }.stat-changes strong.changed { color: var(--green); transform: translateY(-2px); }.stat-changes em { color: var(--green); font: normal 12px "DM Mono"; }
.dirty-queue { min-height: 58px; margin-top: 13px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }.dirty-queue span { color: #6f6b75; font: 12px "DM Mono"; margin-right: auto; }.dirty-queue b { color: #8e8995; border: 1px solid var(--line); padding: 5px 7px; font: 400 12px "DM Mono"; opacity: 0; transform: translateY(5px); }.scene-memory.active .dirty-queue b { animation: queueItem .35s ease forwards; }.scene-memory.active .dirty-queue b:nth-child(3) { animation-delay: .15s; }.scene-memory.active .dirty-queue b:nth-child(4) { animation-delay: .3s; }

.scene-redis { padding: 50px 9%; }.redis-core { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); width: 105px; height: 105px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #18160d; border: 1px solid rgba(245,196,0,.5); box-shadow: 0 0 55px rgba(245,196,0,.13); z-index: 2; }.redis-core > span { color: var(--purple); font: 800 24px "DM Mono"; }.redis-core strong { font-size: 12px; }.redis-core small { color: #615d68; font: 12px "DM Mono"; }
.redis-command { position: absolute; left: 8%; width: 39%; padding: 15px; border: 1px solid var(--line); background: rgba(17,17,22,.95); opacity: 0; }.command-one { top: 205px; }.command-two { top: 330px; }.redis-command small { display: block; color: var(--purple); font: 12px "DM Mono"; }.redis-command code { display: block; color: #aaa5b0; font: 12px/1.5 "DM Mono"; margin: 8px 0; word-break: break-all; }.redis-command span { color: var(--green); font: 12px "DM Mono"; }.scene-redis.active .command-one { animation: slideCommand .55s .55s ease forwards; }.scene-redis.active .command-two { animation: slideCommand .55s 1.05s ease forwards; }
.leader-shift { position: absolute; right: 8%; top: 235px; width: 38%; padding: 17px; border: 1px solid var(--line); background: rgba(17,17,22,.95); opacity: 0; }.leader-shift > small { color: #66616c; font: 12px "DM Mono"; }.leader-shift > div { display: grid; grid-template-columns: 25px 1fr auto auto; gap: 10px; align-items: center; margin-top: 12px; padding: 12px; background: rgba(245,196,0,.07); }.leader-shift b { color: var(--purple); font: 12px "DM Mono"; }.leader-shift span, .leader-shift strong { font-size: 12px; }.leader-shift i { color: var(--green); font: normal 12px "DM Mono"; }.scene-redis.active .leader-shift { animation: leaderReveal .55s 1.65s ease forwards; }
.data-pulse { position: absolute; left: 50%; top: 145px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 14px var(--purple); opacity: 0; }.scene-redis.active .pulse-a { animation: pulseLeft 1.2s .2s ease forwards; }.scene-redis.active .pulse-b { animation: pulseRight 1.2s 1.25s ease forwards; }

.scene-sql { padding: 65px 9%; }.sql-window { border: 1px solid var(--line); background: rgba(15,15,20,.96); box-shadow: 0 25px 60px rgba(0,0,0,.3); opacity: 0; transform: translateY(10px); }.scene-sql.active .sql-window { animation: fadeUp .5s .15s ease forwards; }.sql-title { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); }.sql-title span { font-size: 12px; }.sql-title small { color: var(--green); font: 12px "DM Mono"; }.sql-window > code { display: block; padding: 25px; color: #9b96a2; font: 12px/2 "DM Mono"; }.sql-window code em { color: var(--purple-bright); font-style: normal; }.query-status { min-height: 43px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; padding: 0 17px; border-top: 1px solid var(--line); color: #77727d; font: 12px "DM Mono"; }.query-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.query-status b { color: var(--green); font-weight: 400; }
.table-preview { margin-top: 16px; border: 1px solid var(--line); opacity: 0; }.table-preview > div { display: grid; grid-template-columns: .8fr 1fr 1fr; }.table-preview > div:first-child { color: #5d5963; background: rgba(255,255,255,.018); font: 12px "DM Mono"; }.table-preview span, .table-preview strong, .table-preview code { padding: 9px 12px; border-right: 1px solid var(--line); }.inserted-row { color: #87838d; font: 12px "DM Mono"; background: rgba(217,186,53,.035); }.inserted-row strong { color: var(--green); font-weight: 400; }.scene-sql.active .table-preview { animation: fadeUp .5s 1s ease forwards; }

.scene-access { display: grid; grid-template-columns: 1fr 70px 1.1fr; align-items: center; padding: 50px 7%; }.access-clients { display: grid; gap: 11px; }.access-clients > div { min-height: 57px; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); background: rgba(17,17,22,.9); opacity: 0; transform: translateX(-10px); }.access-clients span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--purple); border: 1px solid rgba(245,196,0,.3); font: 12px "DM Mono"; }.access-clients small { color: #827e88; font: 12px "DM Mono"; }.scene-access.active .access-clients > div { animation: clientIn .4s ease forwards; }.scene-access.active .access-clients > div:nth-child(2) { animation-delay: .15s; }.scene-access.active .access-clients > div:nth-child(3) { animation-delay: .3s; }
.access-lines { height: 180px; position: relative; }.access-lines i { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,var(--line),var(--purple)); transform-origin: right; opacity: 0; }.access-lines i:first-child { top: 28px; transform: rotate(25deg); }.access-lines i:nth-child(2) { top: 89px; }.access-lines i:last-child { bottom: 28px; transform: rotate(-25deg); }.scene-access.active .access-lines i { animation: lineIn .55s .45s ease forwards; }
.access-boundary { min-height: 160px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(245,196,0,.45); background: rgba(245,196,0,.065); text-align: center; opacity: 0; }.access-boundary small { color: var(--purple); font: 12px "DM Mono"; }.access-boundary strong { font-size: 21px; margin: 7px; }.access-boundary span { color: #77737d; font-size: 12px; }.scene-access.active .access-boundary { animation: boundaryIn .55s .8s ease forwards; }
.access-store { position: absolute; right: 7%; bottom: 55px; width: 42%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; }.access-store > div { padding: 11px; border: 1px solid var(--line); background: #111116; display: flex; flex-direction: column; }.access-store span { font-size: 12px; }.access-store small { color: #66626d; font-size: 12px; }.scene-access.active .access-store { animation: fadeUp .5s 1.3s ease forwards; }
.link-code { position: absolute; right: 10%; top: 55px; min-width: 180px; padding: 14px; border: 1px solid rgba(217,186,53,.25); background: rgba(13,20,17,.94); display: flex; flex-direction: column; opacity: 0; }.link-code small { color: var(--green); font: 12px "DM Mono"; }.link-code strong { font: 18px "DM Mono"; letter-spacing: .12em; margin: 5px 0; }.link-code span { color: #6c756f; font: 12px "DM Mono"; }.link-code i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 5px; }.scene-access.active .link-code { animation: fadeUp .5s 1.8s ease forwards; }

.vise-stories { padding-bottom: 150px; }.story-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.story-card { min-height: 390px; padding: 29px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }.story-card > small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .11em; }.story-card h3 { font-size: 23px; line-height: 1.18; letter-spacing: -.035em; margin: 18px 0 13px; }.story-card > p { color: #85818c; font-size: 12px; line-height: 1.75; }.story-icon { height: 92px; margin-bottom: 30px; display: flex; align-items: end; gap: 8px; }.stats-icon i { width: 23px; background: rgba(245,196,0,.25); border-top: 2px solid var(--purple); }.stats-icon i:first-child { height: 38%; }.stats-icon i:nth-child(2) { height: 66%; }.stats-icon i:last-child { height: 100%; animation: barGrow 2.4s ease-in-out infinite alternate; }.match-icon span { width: 72px; height: 72px; display: grid; place-items: center; color: var(--purple); border: 1px solid rgba(245,196,0,.4); font: 19px "DM Mono"; }.link-icon { align-items: center; }.link-icon span { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--green); color: var(--green); font: 18px "DM Mono"; }.link-icon i { width: 48px; height: 1px; background: linear-gradient(90deg,var(--green),transparent); }
.story-flow { display: flex; align-items: center; gap: 7px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }.story-flow span { color: #77727d; font: 12px "DM Mono"; text-transform: uppercase; }.story-flow i { flex: 1; height: 1px; background: linear-gradient(90deg,var(--purple),var(--line)); }.story-detail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 27px; }.story-detail span { color: #7d7983; border: 1px solid var(--line); padding: 6px 8px; font: 12px "DM Mono"; text-transform: uppercase; }
.vise-details { padding-top: 135px; }.storage-summary { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }.storage-summary article { min-height: 215px; padding: 30px; border-right: 1px solid var(--line); }.storage-summary article:last-child { border: 0; }.storage-summary article > span { color: #4f4b55; font: 12px "DM Mono"; }.storage-summary small { display: block; color: var(--purple); font: 12px "DM Mono"; margin-top: 45px; }.storage-summary strong { display: block; font-size: 23px; margin: 5px 0; }.storage-summary p { color: #797580; font-size: 12px; margin: 0; }
.feature-cloud { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 55px 35px; border: 1px solid var(--line); background: radial-gradient(circle at center,rgba(245,196,0,.055),transparent 65%); }.feature-cloud span { padding: 10px 14px; color: #9995a0; border: 1px solid var(--line); background: rgba(255,255,255,.012); font: 12px "DM Mono"; }

@keyframes fighterStrike { 0%,35% { transform: rotateX(-58deg) translateX(0); } 60% { transform: rotateX(-58deg) translateX(62px); } 100% { transform: rotateX(-58deg) translateX(0); } }
@keyframes fighterDefeat { 0%,55% { opacity: 1; transform: rotateX(-58deg) scale(1); } 100% { opacity: .3; transform: rotateX(-58deg) scale(.85) translateX(18px); } }
@keyframes impactFlash { 50% { opacity: 1; transform: translate(-50%,-50%) rotateX(-58deg) scale(1.35); } 100% { opacity: 0; transform: translate(-50%,-50%) rotateX(-58deg) scale(1.8); } }
@keyframes packetReveal { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes packetLoad { to { width: 100%; } }
@keyframes queueItem { to { opacity: 1; transform: translateY(0); } }
@keyframes slideCommand { to { opacity: 1; transform: translateX(8px); } }
@keyframes leaderReveal { to { opacity: 1; transform: translateY(-6px); } }
@keyframes pulseLeft { 0% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0; transform: translate(-185px,145px); } }
@keyframes pulseRight { 0% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0; transform: translate(170px,185px); } }
@keyframes clientIn { to { opacity: 1; transform: translateX(0); } }
@keyframes lineIn { to { opacity: 1; } }
@keyframes boundaryIn { to { opacity: 1; transform: scale(1.02); } }
@keyframes barGrow { to { height: 72%; } }

@media (max-width: 1120px) {
  .tour-layout { grid-template-columns: 175px minmax(360px,1fr); }.tour-copy { grid-column: 1/-1; border-left: 0; border-top: 1px solid var(--line); min-height: 400px; }.tour-controls { max-width: 430px; }.tour-stage { min-height: 560px; }
}
@media (max-width: 760px) {
  .vise-hero { padding-bottom: 80px; }.vise-tour { width: 100%; border-inline: 0; margin-bottom: 105px; }.tour-heading { align-items: stretch; flex-direction: column; padding: 24px 15px; }.tour-play { width: 100%; }.tour-progress { padding-inline: 15px; }.tour-layout { display: flex; flex-direction: column; }.tour-steps { order: 1; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 15px; scrollbar-width: none; }.tour-steps button { flex: 0 0 145px; min-height: 76px; padding: 10px; grid-template-columns: 24px 1fr; border-left: 0; border-bottom: 2px solid transparent; }.tour-steps button.active { border-bottom-color: var(--purple); background: linear-gradient(0deg,rgba(245,196,0,.08),transparent); }.tour-stage { order: 2; min-height: 480px; }.tour-copy { order: 3; min-height: 510px; padding: 35px 20px 24px; }.tour-copy h3 { font-size: 25px; }
  .scene-capture .arena-ring { width: 90%; padding-inline: 8%; }.fighter { width: 63px; height: 63px; }.event-packet { width: 88%; bottom: 45px; }.scene-memory, .scene-redis, .scene-sql { padding-inline: 18px; }.stat-changes { grid-template-columns: 1fr 1fr; }.stat-changes > div { min-height: 82px; border-bottom: 1px solid var(--line); }.dirty-queue { flex-wrap: wrap; height: auto; padding-block: 12px; }.dirty-queue span { width: 100%; }.redis-core { top: 30px; width: 85px; height: 85px; }.redis-command { left: 5%; width: 90%; }.command-one { top: 145px; }.command-two { top: 255px; }.leader-shift { left: 5%; right: auto; top: 365px; width: 90%; }.scene-access { grid-template-columns: 1fr 35px 1fr; padding-inline: 15px; }.access-clients small { font-size: 12px; }.access-store { left: 15px; right: 15px; bottom: 25px; width: auto; }.link-code { right: 15px; top: 35px; min-width: 145px; }.access-boundary strong { font-size: 16px; }
  .vise-stories { padding-bottom: 100px; }.story-grid { grid-template-columns: 1fr; }.story-card { min-height: 330px; }.storage-summary { grid-template-columns: 1fr; }.storage-summary article { min-height: 160px; border-right: 0; border-bottom: 1px solid var(--line); }.storage-summary small { margin-top: 25px; }.feature-cloud { padding: 35px 15px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Architecture trace */
.persistence-shell { margin-bottom: 130px; }
.trace-console { border: 1px solid var(--line); border-top: 0; background: #0b0b0f; box-shadow: 0 40px 100px rgba(0,0,0,.3); }
.trace-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 30px; border-bottom: 1px solid var(--line); }
.trace-header small, .training-heading small { color: var(--purple); font: 12px "DM Mono", monospace; letter-spacing: .12em; }
.trace-header h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.035em; }
.trace-tabs { display: flex; border: 1px solid var(--line); padding: 3px; }
.trace-tabs button { border: 0; background: transparent; color: #716d78; padding: 9px 13px; cursor: pointer; font: 12px "DM Mono", monospace; text-transform: uppercase; transition: .25s; }
.trace-tabs button.active { color: #0c0813; background: var(--purple); }
.trace-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; min-height: 500px; }
.trace-flow { position: relative; display: grid; grid-template-columns: minmax(150px,1fr) 68px minmax(150px,1fr) 84px minmax(210px,1.2fr); align-items: center; padding: 48px 30px; overflow: hidden; }
.trace-flow::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,196,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,196,0,.035) 1px,transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg,transparent,black 20%,black 80%,transparent); }
.trace-node { min-height: 210px; position: relative; z-index: 2; display: flex; flex-direction: column; padding: 22px; background: rgba(16,16,21,.96); border: 1px solid var(--line); transition: .35s ease; }
.trace-node::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; pointer-events: none; transition: .35s; }
.trace-node.active { transform: translateY(-5px); border-color: var(--purple); box-shadow: 0 12px 45px rgba(245,196,0,.12); }
.trace-node.active::after { border-color: rgba(245,196,0,.35); animation: tracePulse 1s ease infinite; }
.trace-node.complete { border-color: rgba(217,186,53,.35); }
.trace-node .node-index { color: #514d58; font: 12px "DM Mono", monospace; position: absolute; top: 13px; right: 13px; }
.trace-node small { color: var(--purple); font: 12px "DM Mono", monospace; letter-spacing: .12em; }
.trace-node strong { margin-top: 30px; font-size: 16px; }
.trace-node p { color: #77737e; font-size: 12px; line-height: 1.65; margin: 8px 0 14px; }
.trace-node code { color: #8a8691; font: 12px "DM Mono", monospace; margin-top: auto; }
.node-state { width: fit-content; margin-top: auto; color: #57535e; font: normal 12px "DM Mono", monospace; letter-spacing: .08em; }
.node-state::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 7px; }
.trace-node.active .node-state { color: var(--purple); }.trace-node.complete .node-state { color: var(--green); }
.trace-connector { height: 1px; position: relative; z-index: 2; overflow: hidden; background: var(--line); }
.trace-connector i { position: absolute; inset: 0; width: 0; background: var(--purple); transition: width .7s; }.trace-connector.active i { width: 100%; }
.trace-connector span { position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--purple); border-right: 1px solid var(--purple); transform: rotate(45deg); }
.trace-branch { height: 210px; position: relative; z-index: 2; }
.branch-line { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; }
.branch-line::before, .branch-line i { content: ""; position: absolute; inset: 0; border-right: 1px solid var(--line); }
.branch-line::after { content: ""; position: absolute; right: 0; width: 50%; height: 1px; background: var(--line); }
.branch-line i { border-color: var(--purple); height: 0; transition: height .65s; }
.branch-line.active i { height: 100%; }
.branch-a { top: 0; }.branch-a::before, .branch-a i { border-top: 1px solid var(--line); border-radius: 0 14px 0 0; }.branch-a::after { top: 0; }
.branch-b { bottom: 0; }.branch-b::before, .branch-b i { border-bottom: 1px solid var(--line); border-radius: 0 0 14px 0; }.branch-b::after { bottom: 0; }
.storage-pair { display: grid; gap: 12px; }.storage-pair .trace-node { min-height: 188px; }
.redis-node.active { box-shadow: 0 12px 45px rgba(245,196,0,.13); }.sql-node.active { border-color: var(--green); box-shadow: 0 12px 45px rgba(217,186,53,.09); }
.trace-log { border-left: 1px solid var(--line); padding: 25px; background: #0e0e13; display: flex; flex-direction: column; }
.log-title { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: #797580; font: 12px "DM Mono", monospace; }.log-title i { color: var(--green); font-style: normal; }
.trace-log ol { list-style: none; margin: 0; padding: 18px 0; flex: 1; }
.trace-log li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.045); animation: logIn .35s ease; }
.trace-log time { color: #4d4a53; font: 12px "DM Mono", monospace; }.trace-log li span { color: #8a8691; font: 12px/1.55 "DM Mono", monospace; }
.trace-run, .training-heading button { min-height: 43px; border: 0; background: var(--purple); color: #0b0712; cursor: pointer; font: 700 12px "DM Mono", monospace; letter-spacing: .07em; transition: .25s; }.trace-run:hover, .training-heading button:hover { background: var(--purple-bright); }.trace-run:disabled, .training-heading button:disabled { cursor: wait; opacity: .65; }
.security-strip { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.security-strip > div { min-height: 126px; padding: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }.security-strip > div:last-child { border: 0; }
.security-strip span { color: var(--purple); font: 12px "DM Mono", monospace; }.security-strip strong { font-size: 12px; margin: 12px 0 5px; }.security-strip small { color: #706c76; font-size: 12px; line-height: 1.5; }
.system-facts { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.system-facts article, .problem-grid article { border: 1px solid var(--line); background: var(--surface); padding: 28px; }.system-facts small, .problem-grid small { color: var(--purple); font: 12px "DM Mono", monospace; letter-spacing: .1em; }.system-facts strong { display: block; font-size: 22px; margin: 18px 0 8px; }.system-facts p { color: #78747f; font-size: 12px; line-height: 1.65; margin: 0; }
.module-map { grid-column: 1/-1; min-height: 440px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle,rgba(245,196,0,.1),transparent 42%),var(--surface); }
.module-map::before, .module-map::after { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(245,196,0,.15); border-radius: 50%; }.module-map::after { width: 430px; height: 430px; border-style: dashed; animation: spin 30s linear infinite; }
.module-center { width: 170px; height: 170px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(245,196,0,.55); background: #0c0c11; box-shadow: 0 0 55px rgba(245,196,0,.12); border-radius: 50%; }.module-center small { color: var(--purple); font: 12px "DM Mono"; }.module-center strong { margin: 7px; }.module-center span { color: #6d6974; font-size: 12px; }
.module-orbit { position: absolute; width: 380px; height: 380px; z-index: 3; }.module-orbit span { --angle: calc(var(--i) * 45deg); position: absolute; left: calc(50% + cos(var(--angle)) * 170px); top: calc(50% + sin(var(--angle)) * 170px); transform: translate(-50%,-50%); min-width: 74px; padding: 8px; text-align: center; border: 1px solid var(--line); background: #101015; color: #96919d; font: 12px "DM Mono"; }

/* Real MNIST model */
.real-model-lab { grid-template-columns: .9fr 1.1fr; }
.real-model-lab .input-note { color: #625e69; font: 12px/1.6 "DM Mono", monospace; margin: 15px auto 0; max-width: 360px; }
.real-model-lab .input-note code, .case-body code { color: var(--purple-bright); }
.model-ready.loaded { color: var(--green); }.model-ready.loaded i { box-shadow: 0 0 10px var(--green); }
.classify-button:disabled { opacity: .6; cursor: wait; }
.inference-stage { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr; padding: 25px 32px; border-top: 1px solid var(--line); background: #0d0d12; }
.inference-step { min-height: 88px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 13px 13px 13px 43px; border: 1px solid var(--line); transition: .35s; }
.inference-step > span { position: absolute; left: 13px; top: 15px; color: #4e4a54; font: 12px "DM Mono"; }.inference-step > i { position: absolute; left: 14px; bottom: 18px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #55515c; }
.inference-step strong { font-size: 12px; }.inference-step small { color: #66626d; font: 12px "DM Mono"; margin-top: 4px; }
.inference-step.active { border-color: var(--purple); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(245,196,0,.1); }.inference-step.active > i { background: var(--purple); border-color: var(--purple); box-shadow: 0 0 14px var(--purple); animation: blink .7s infinite; }
.inference-step.complete { border-color: rgba(217,186,53,.3); }.inference-step.complete > i { background: var(--green); border-color: var(--green); }
.inference-arrow { position: relative; display: grid; place-items: center; overflow: hidden; }.inference-arrow::before { content: ""; width: 100%; height: 1px; background: var(--line); }.inference-arrow i { position: absolute; left: -100%; width: 100%; height: 1px; background: linear-gradient(90deg,transparent,var(--purple)); animation: dataFlow 1.6s linear infinite; }
.training-loop { grid-column: 1/-1; border: 1px solid var(--line); background: var(--surface); }
.training-heading { display: flex; align-items: center; justify-content: space-between; padding: 25px 28px; border-bottom: 1px solid var(--line); }.training-heading h3 { margin: 5px 0 0; font-size: 21px; }.training-heading button { padding: 0 18px; }
.training-steps { display: grid; grid-template-columns: repeat(5,1fr); }.training-steps article { min-height: 190px; padding: 25px 21px; border-right: 1px solid var(--line); transition: .3s; }.training-steps article:last-child { border: 0; }.training-steps article > span { color: #514d57; font: 12px "DM Mono"; }.training-steps strong { display: block; margin: 40px 0 8px; font-size: 15px; }.training-steps p { color: #716d78; font-size: 12px; line-height: 1.6; margin: 0; }.training-steps article.active { background: rgba(245,196,0,.08); box-shadow: inset 0 2px var(--purple); }.training-steps article.active > span, .training-steps article.active strong { color: var(--purple-bright); }
.epoch-meter { min-height: 55px; display: grid; grid-template-columns: 100px 1fr 90px; align-items: center; gap: 20px; padding: 0 28px; border-top: 1px solid var(--line); color: #706c77; font: 12px "DM Mono"; }.epoch-meter > i { height: 3px; background: #222027; overflow: hidden; }.epoch-meter b { display: block; height: 100%; width: 0; background: var(--purple); transition: width .25s; }.epoch-meter strong { color: var(--green); text-align: right; font-weight: 400; }
.problem-grid { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.problem-grid h3 { margin: 20px 0 8px; font-size: 20px; }.problem-grid p { color: #77737e; font-size: 12px; }.problem-grid article div { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); color: #9b97a2; font-size: 12px; }.problem-grid article div span { color: var(--green); font: 12px "DM Mono"; margin-right: 10px; }

@keyframes tracePulse { 50% { inset: -6px; opacity: 0; } }
@keyframes logIn { from { opacity: 0; transform: translateX(8px); } }
@keyframes dataFlow { to { left: 100%; } }

@media (max-width: 1050px) {
  .trace-layout { grid-template-columns: 1fr; }.trace-log { border-left: 0; border-top: 1px solid var(--line); min-height: 300px; }.trace-flow { min-height: 500px; }.security-strip { grid-template-columns: 1fr 1fr; }.security-strip > div:nth-child(2) { border-right: 0; }.security-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .training-steps { grid-template-columns: repeat(3,1fr); }.training-steps article:nth-child(3) { border-right: 0; }.training-steps article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .trace-header { align-items: stretch; flex-direction: column; padding: 23px 15px; }.trace-tabs { width: 100%; }.trace-tabs button { flex: 1; padding-inline: 6px; }.trace-layout { display: block; }.trace-flow { display: flex; flex-direction: column; gap: 0; padding: 30px 15px; }.trace-node, .storage-pair, .storage-pair .trace-node { width: 100%; min-height: 170px; }.trace-connector { width: 1px; height: 44px; }.trace-connector i { width: 1px; height: 0; transition: height .7s; }.trace-connector.active i { width: 1px; height: 100%; }.trace-connector span { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }.trace-branch { width: 100%; height: 45px; }.branch-line { display: none; }.storage-pair { gap: 10px; }.security-strip { grid-template-columns: 1fr; }.security-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }.system-facts { grid-template-columns: 1fr; }.module-map { min-height: 390px; }.module-map::after { width: 350px; height: 350px; }.module-orbit { width: 330px; height: 330px; }.module-orbit span { left: calc(50% + cos(var(--angle)) * 145px); top: calc(50% + sin(var(--angle)) * 145px); min-width: 61px; padding: 6px 4px; }
  .real-model-lab { grid-template-columns: 1fr; }.inference-stage { grid-template-columns: 1fr; gap: 0; padding: 22px 15px; }.inference-arrow { height: 28px; transform: rotate(90deg); }.training-heading { align-items: stretch; flex-direction: column; gap: 18px; }.training-heading button { min-height: 42px; }.training-steps { grid-template-columns: 1fr; }.training-steps article { min-height: 125px; border-right: 0; border-bottom: 1px solid var(--line); }.training-steps strong { margin-top: 23px; }.epoch-meter { grid-template-columns: 1fr; gap: 10px; padding-block: 17px; }.epoch-meter strong { text-align: left; }.problem-grid { grid-template-columns: 1fr; }
  .orbit-one { width: 330px; height: 330px; }.orbit-two { width: 260px; height: 260px; }
}

/* Announcements infrastructure */
.project-card-announcement { grid-column: 1 / -1; display: grid; grid-template-columns: .92fr 1.08fr; }
.project-card-announcement .project-art { height: auto; min-height: 340px; border-bottom: 0; border-right: 1px solid var(--line); }
.announcement-art { background: radial-gradient(circle at 45% 50%,rgba(245,196,0,.1),transparent 36%),#0b0b09; }
.announcement-art::before, .mini-announcement::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,196,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,196,0,.035) 1px,transparent 1px); background-size: 28px 28px; }
.announcement-sheet { position: absolute; left: 12%; top: 50%; width: 145px; min-height: 170px; padding: 18px; transform: translateY(-50%); border: 1px solid rgba(245,196,0,.38); background: #11110e; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.announcement-sheet span { color: var(--purple); font: 12px "DM Mono"; }.announcement-sheet i { display: block; height: 22px; margin-top: 12px; border: 1px solid var(--line); background: linear-gradient(90deg,rgba(245,196,0,.18) 58%,transparent 58%); }
.announcement-route { position: absolute; left: calc(12% + 145px); right: 31%; top: 50%; height: 1px; background: var(--line); }
.announcement-route::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--purple); border-right: 1px solid var(--purple); transform: rotate(45deg); }
.announcement-route i { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 14px var(--purple); animation: announcementPacket 2.4s linear infinite; }.announcement-route i:nth-child(2) { animation-delay: .8s; }.announcement-route i:nth-child(3) { animation-delay: 1.6s; }
.announcement-output { position: absolute; right: 9%; top: 50%; width: 130px; height: 130px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(217,186,53,.4); background: rgba(15,17,12,.95); box-shadow: 0 0 45px rgba(245,196,0,.08); }
.announcement-output small { color: #6f6b62; font: 12px "DM Mono"; }.announcement-output strong { color: var(--green); font: 19px "DM Mono"; margin: 8px 0; }.announcement-output span { color: #7d796f; font: 12px "DM Mono"; }

.mini-announcement { background: #0b0b09; }
.mini-sheet { position: absolute; left: 13%; top: 50%; width: 74px; height: 100px; padding: 10px; transform: translateY(-50%); border: 1px solid rgba(245,196,0,.38); background: #11110e; }
.mini-sheet i { display: block; height: 14px; margin: 7px 0; border: 1px solid var(--line); }
.mini-pipeline { position: absolute; left: 38%; right: 27%; top: 50%; height: 1px; background: var(--line); }.mini-pipeline span { position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: announcementPacket 2.2s linear infinite; }.mini-pipeline span:nth-child(2) { animation-delay: .7s; }.mini-pipeline span:nth-child(3) { animation-delay: 1.4s; }
.mini-live { position: absolute; right: 10%; top: 50%; width: 66px; height: 66px; transform: translateY(-50%); display: grid; place-items: center; border: 1px solid rgba(217,186,53,.4); color: var(--green); background: #11120e; font: 12px "DM Mono"; }

.announcement-hero { min-height: 720px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: center; padding: 65px 0 105px; }
.announcement-hero h1 { margin: 26px 0; font-size: clamp(55px,6.3vw,88px); line-height: .98; letter-spacing: -.065em; }.announcement-hero h1 span { color: var(--purple); }
.announcement-mobile-break { display: none; }
.announcement-hero-copy > p { max-width: 680px; color: #a7a39a; font-size: 17px; line-height: 1.75; }
.announcement-hero .case-kicker { margin-top: 60px; }
.announcement-hero-map { height: 540px; position: relative; overflow: hidden; border: 1px solid var(--line); background: #0b0b09; box-shadow: 0 35px 90px rgba(0,0,0,.32); }
.hero-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(245,196,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,196,0,.035) 1px,transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg,transparent,black 15%,black 85%,transparent); }
.announcement-hero-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }.announcement-hero-map svg path { fill: none; stroke: rgba(245,196,0,.36); stroke-width: 1.2; stroke-dasharray: 8 8; animation: pipelineDash 13s linear infinite; }
.hero-source, .hero-builder, .hero-delivery { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 15px; border: 1px solid var(--line); background: rgba(16,16,13,.96); }
.hero-source { left: 5%; width: 150px; height: 88px; }.source-drive { top: 9%; }.source-sheets { top: 36%; }.source-schedule { bottom: 9%; }
.hero-source small, .hero-builder small, .hero-delivery small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .11em; }.hero-source strong, .hero-builder strong, .hero-delivery strong { font-size: 12px; margin: 7px 0 2px; }.hero-source span, .hero-builder span, .hero-delivery span { color: #6f6b64; font: 12px "DM Mono"; }
.hero-builder { left: 44%; top: 50%; width: 170px; height: 170px; transform: translate(-50%,-50%); align-items: center; text-align: center; border-radius: 50%; border-color: rgba(245,196,0,.5); box-shadow: 0 0 55px rgba(245,196,0,.12); }.hero-builder i { width: 8px; height: 8px; margin-bottom: 16px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 18px var(--purple); animation: blink 1.6s ease infinite; }
.hero-delivery { right: 4%; top: 50%; width: 150px; min-height: 100px; transform: translateY(-50%); border-color: rgba(217,186,53,.35); }

.announcement-intro { display: grid; grid-template-columns: 45px 1.15fr .85fr; gap: 45px; padding: 120px 0; border-top: 1px solid var(--line); align-items: start; }
.announcement-intro small, .cadence-heading small, .anatomy-heading small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .12em; }.announcement-intro h2, .cadence-heading h2, .anatomy-heading h2 { margin: 14px 0 0; font-size: clamp(34px,4vw,55px); line-height: 1.08; letter-spacing: -.05em; }.announcement-intro p { color: #8c887f; font-size: 15px; line-height: 1.85; margin: 34px 0 0; }

.publish-demo { margin-bottom: 145px; border: 1px solid var(--line); background: #0b0b09; box-shadow: 0 35px 95px rgba(0,0,0,.28); }
.publish-topbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); color: #77736b; font: 12px "DM Mono"; letter-spacing: .09em; }.publish-topbar > div { display: flex; align-items: center; gap: 9px; }.publish-topbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.publish-topbar strong { color: #7c786f; font-weight: 400; }.publish-topbar strong.running { color: var(--purple); }.publish-topbar strong.ready { color: var(--green); }
.publish-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 30px; border-bottom: 1px solid var(--line); }.publish-heading small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .12em; }.publish-heading h2 { margin: 7px 0 0; font-size: clamp(25px,3vw,40px); letter-spacing: -.045em; }.publish-heading button { min-height: 45px; padding: 0 20px; border: 0; background: var(--purple); color: #0c0a06; cursor: pointer; font: 700 12px "DM Mono"; letter-spacing: .08em; }.publish-heading button:hover { background: var(--purple-bright); }.publish-heading button:disabled { opacity: .65; cursor: wait; }
.publish-stage { display: grid; grid-template-columns: minmax(145px,1fr) repeat(5,minmax(32px,.18fr) minmax(145px,1fr)); align-items: center; min-width: 1160px; padding: 35px 25px; }.publish-demo { overflow: hidden; }
.publish-stage article { min-height: 230px; position: relative; display: flex; flex-direction: column; padding: 20px 16px; border: 1px solid var(--line); background: #10100d; transition: .35s; }.publish-stage article > span { position: absolute; right: 12px; top: 10px; color: #4f4c45; font: 12px "DM Mono"; }.publish-stage article small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .1em; }.publish-stage article strong { margin: 42px 0 8px; font-size: 13px; }.publish-stage article p { margin: 0; color: #77736b; font-size: 12px; line-height: 1.65; }.publish-stage article code { margin-top: auto; color: #68645d; font: 12px "DM Mono"; }
.publish-stage article.active { transform: translateY(-5px); border-color: var(--purple); box-shadow: 0 10px 35px rgba(245,196,0,.11); }.publish-stage article.active::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--purple); animation: tracePulse 1s ease infinite; }.publish-stage article.complete { border-color: rgba(217,186,53,.35); }.publish-stage article.complete small, .publish-stage article.complete > span { color: var(--green); }
.publish-arrow { height: 1px; position: relative; background: var(--line); overflow: hidden; }.publish-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--purple); border-right: 1px solid var(--purple); transform: rotate(45deg); }.publish-arrow i { position: absolute; left: -100%; top: 0; width: 100%; height: 1px; opacity: 0; background: var(--purple); }.publish-demo.is-running .publish-arrow.active i { opacity: 1; animation: dataFlow 1.1s linear infinite; }.publish-arrow.complete i { left: 0; opacity: .55; animation: none; }
.publish-console { display: grid; grid-template-columns: 1fr 260px; min-height: 165px; border-top: 1px solid var(--line); background: #0e0e0c; }.publish-console ol { max-height: 165px; overflow: auto; list-style: none; margin: 0; padding: 16px 25px; }.publish-console li { display: grid; grid-template-columns: 65px 1fr; gap: 10px; padding: 6px 0; color: #858178; font: 12px/1.5 "DM Mono"; animation: logIn .3s ease; }.publish-console time { color: #4e4b45; }.publish-console > div { display: flex; flex-direction: column; justify-content: center; padding: 25px; border-left: 1px solid var(--line); }.publish-console small { color: #6e6a63; font: 12px "DM Mono"; }.publish-console > div > i { height: 3px; margin-top: 18px; overflow: hidden; background: #24231f; }.publish-console b { display: block; width: 0; height: 100%; background: var(--purple); transition: width .45s ease; }

.cadence-section { padding: 20px 0 150px; }.cadence-heading { display: grid; grid-template-columns: 45px 1fr; gap: 45px; margin-bottom: 60px; }.cadence-map { min-height: 530px; position: relative; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 1fr 1fr; gap: 14px 90px; padding: 40px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle at 15% 50%,rgba(245,196,0,.08),transparent 25%),#0d0d0b; }
.cadence-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,196,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(245,196,0,.025) 1px,transparent 1px); background-size: 32px 32px; }
.cadence-clock { grid-row: 1 / 3; align-self: center; z-index: 2; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(245,196,0,.42); border-radius: 50%; background: #10100d; box-shadow: 0 0 55px rgba(245,196,0,.08); }.cadence-clock span { color: var(--purple); font: 12px "DM Mono"; }.cadence-clock strong { margin: 8px 0; font: 29px "DM Mono"; }.cadence-clock small { color: #68645c; font: 12px "DM Mono"; }.cadence-clock i { width: 7px; height: 7px; margin-top: 17px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px var(--green); animation: blink 1.8s infinite; }
.cadence-line { position: absolute; z-index: 1; left: 220px; width: 120px; height: 1px; background: var(--line); }.cadence-line::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--purple); border-right: 1px solid var(--purple); transform: rotate(45deg); }.cadence-line span { position: absolute; left: 22px; bottom: 9px; color: #5c5952; font: 12px "DM Mono"; }.cadence-line i { position: absolute; left: 0; width: 35%; height: 1px; background: var(--purple); animation: cadencePulse 2.4s ease-in-out infinite; }.cadence-line-hourly { top: 27%; }.cadence-line-daily { bottom: 27%; }.cadence-line-daily i { animation-delay: 1.2s; }
.cadence-lane { z-index: 2; display: grid; grid-template-columns: 225px 1fr; gap: 22px; padding: 25px; border: 1px solid var(--line); background: rgba(16,16,13,.96); }.cadence-lane header { display: flex; flex-direction: column; justify-content: center; }.cadence-lane header small { color: var(--purple); font: 12px "DM Mono"; }.cadence-lane header strong { font-size: 14px; margin-top: 7px; }.cadence-lane > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }.cadence-lane > div span { padding: 7px 8px; border: 1px solid var(--line); color: #89857c; font: 12px "DM Mono"; }.cadence-lane p { grid-column: 2; color: #706d65; font-size: 12px; line-height: 1.65; margin: -12px 0 0; }

.build-anatomy { padding: 135px 0; border-block: 1px solid var(--line); background: #0b0b09; }.anatomy-heading { display: grid; grid-template-columns: 45px 1fr .7fr; gap: 45px; align-items: end; margin-bottom: 60px; }.anatomy-heading p { color: #858178; font-size: 14px; line-height: 1.75; margin: 0; }.anatomy-diagram { display: grid; grid-template-columns: .7fr 1.35fr .9fr; gap: 65px; align-items: center; min-height: 470px; position: relative; padding: 45px; border: 1px solid var(--line); background: #0e0e0c; }.anatomy-diagram::before, .anatomy-diagram::after { content: ""; position: absolute; top: 50%; height: 1px; background: linear-gradient(90deg,var(--line),var(--purple),var(--line)); }.anatomy-diagram::before { left: 23%; width: 12%; }.anatomy-diagram::after { right: 22%; width: 12%; }
.anatomy-source { min-height: 190px; display: flex; flex-direction: column; justify-content: center; padding: 28px; border: 1px solid rgba(245,196,0,.35); background: #11110e; }.anatomy-source small { color: var(--purple); font: 12px "DM Mono"; }.anatomy-source strong { font-size: 19px; margin: 35px 0 7px; }.anatomy-source span { color: #706c64; font-size: 12px; }
.anatomy-transform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.anatomy-transform article { min-height: 145px; padding: 18px; border: 1px solid var(--line); background: #11110f; }.anatomy-transform span { color: var(--purple); font: 12px "DM Mono"; }.anatomy-transform strong { display: block; margin: 34px 0 5px; font-size: 14px; }.anatomy-transform small { color: #6e6a62; font-size: 12px; }
.anatomy-outputs { display: grid; gap: 8px; }.anatomy-outputs > div { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 14px; border: 1px solid var(--line); background: #11110f; }.anatomy-outputs small { color: var(--green); font: 12px "DM Mono"; }.anatomy-outputs strong { font-size: 12px; margin-top: 6px; }

.reliability-section { padding: 145px 0; }.reliability-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }.reliability-grid article { min-height: 335px; display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--line); background: rgba(255,255,255,.008); }.reliability-grid article:last-child { border-right: 0; }.reliability-grid article > span { color: var(--purple); font: 12px "DM Mono"; }.reliability-grid h3 { margin: 55px 0 13px; font-size: 19px; line-height: 1.2; }.reliability-grid p { color: #7c786f; font-size: 12px; line-height: 1.75; margin: 0; }.reliability-grid code { margin-top: auto; color: var(--green); font: 12px "DM Mono"; }
.announcement-outcome { padding: 115px 0 135px; text-align: center; border-top: 1px solid var(--line); }.announcement-outcome > small { color: var(--purple); font: 12px "DM Mono"; letter-spacing: .14em; }.announcement-outcome h2 { max-width: 940px; margin: 24px auto; font-size: clamp(38px,5.7vw,72px); line-height: 1.05; letter-spacing: -.06em; }.announcement-outcome > p { max-width: 720px; margin: 0 auto 55px; color: #8b877e; font-size: 15px; line-height: 1.85; }.announcement-outcome > div { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--line); }.announcement-outcome > div span { min-height: 115px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-right: 1px solid var(--line); color: #77736b; font-size: 12px; }.announcement-outcome > div span:last-child { border: 0; }.announcement-outcome > div strong { color: var(--purple); font-size: 23px; }

@keyframes announcementPacket { from { left: 0; opacity: 0; } 15%,85% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes pipelineDash { to { stroke-dashoffset: -120; } }
@keyframes cadencePulse { 0% { left: 0; opacity: 0; } 25%,75% { opacity: 1; } 100% { left: 70%; opacity: 0; } }
@keyframes dataFlowDown { to { top: 100%; } }

@media (max-width: 1080px) {
  .announcement-hero { grid-template-columns: 1fr; }.announcement-hero-map { height: 500px; }.announcement-intro { grid-template-columns: 45px 1fr; }.announcement-intro p { grid-column: 2; margin-top: 0; }.publish-demo { overflow-x: auto; }.publish-topbar, .publish-heading, .publish-console { min-width: 1160px; }.cadence-map { grid-template-columns: 180px 1fr; column-gap: 60px; }.cadence-line { left: 195px; width: 95px; }.cadence-lane { grid-template-columns: 1fr; }.cadence-lane p { grid-column: 1; margin-top: 0; }.anatomy-diagram { gap: 38px; padding: 30px; }.reliability-grid { grid-template-columns: 1fr 1fr; }.reliability-grid article:nth-child(2) { border-right: 0; }.reliability-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .project-card-announcement { display: block; }.project-card-announcement .project-art { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--line); }.announcement-sheet { left: 7%; width: 110px; }.announcement-route { left: calc(7% + 110px); right: 32%; }.announcement-output { right: 6%; width: 100px; height: 100px; }
  .announcement-hero { min-height: auto; gap: 55px; padding: 55px 0 90px; }.announcement-hero h1 { font-size: clamp(48px,14vw,68px); }.announcement-mobile-break { display: initial; }.announcement-hero-copy > p { font-size: 16px; }.announcement-hero-map { width: calc(100% + 48px); height: 610px; margin-left: -24px; border-inline: 0; }.hero-source { left: 7%; width: 135px; }.hero-builder { left: 50%; top: 52%; width: 150px; height: 150px; }.hero-delivery { right: 7%; top: auto; bottom: 5%; transform: none; }.announcement-hero-map svg { transform: rotate(18deg) scale(1.1); }
  .announcement-intro { grid-template-columns: 28px 1fr; gap: 22px; padding: 95px 0; }.announcement-intro p { grid-column: 2; }.publish-demo { width: calc(100% + 48px); margin-left: -24px; border-inline: 0; }.publish-stage { min-width: 0; display: flex; flex-direction: column; padding: 28px 15px; }.publish-stage article { width: 100%; min-height: 175px; }.publish-arrow { width: 1px; height: 35px; }.publish-arrow i { left: 0; top: -100%; width: 1px; height: 100%; }.publish-demo.is-running .publish-arrow.active i { animation: dataFlowDown 1.1s linear infinite; }.publish-arrow.complete i { top: 0; }.publish-arrow::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }.publish-topbar, .publish-heading, .publish-console { min-width: 0; }.publish-heading { align-items: stretch; flex-direction: column; padding: 24px 15px; }.publish-heading button { width: 100%; }.publish-console { grid-template-columns: 1fr; }.publish-console > div { border-left: 0; border-top: 1px solid var(--line); }.publish-console ol { min-height: 170px; }
  .cadence-section { padding-bottom: 100px; }.cadence-heading { grid-template-columns: 28px 1fr; gap: 22px; }.cadence-map { display: flex; flex-direction: column; gap: 35px; padding: 30px 15px; }.cadence-clock { align-self: center; width: 160px; height: 160px; }.cadence-line { display: none; }.cadence-lane { padding: 20px; }.build-anatomy { padding: 100px 0; }.anatomy-heading { grid-template-columns: 28px 1fr; gap: 22px; }.anatomy-heading p { grid-column: 2; }.anatomy-diagram { grid-template-columns: 1fr; gap: 38px; padding: 20px 15px; }.anatomy-diagram::before, .anatomy-diagram::after { display: none; }.anatomy-transform { grid-template-columns: 1fr 1fr; }.reliability-section { padding: 100px 0; }.reliability-grid { grid-template-columns: 1fr; }.reliability-grid article { min-height: 265px; border-right: 0; border-bottom: 1px solid var(--line); }.reliability-grid article:last-child { border-bottom: 0; }.reliability-grid h3 { margin-top: 35px; }.announcement-outcome { padding: 95px 0 110px; }.announcement-outcome > div { grid-template-columns: 1fr 1fr; }.announcement-outcome > div span:nth-child(2) { border-right: 0; }.announcement-outcome > div span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}