.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; background: #030812; }
#splash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .72; }
.splash__orb { position: absolute; width: min(58vw, 720px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.72), rgba(124,156,255,.33) 10%, rgba(78,232,212,.18) 32%, rgba(124,156,255,.06) 52%, transparent 67%); box-shadow: 0 0 130px rgba(124,156,255,.26); animation: orbFloat 6s ease-in-out infinite; }
.splash__orb::before, .splash__orb::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(164,198,255,.17); border-radius: 50%; transform: rotateX(67deg) rotateZ(12deg); }
.splash__orb::after { inset: 22%; transform: rotateY(70deg) rotateZ(-18deg); }
@keyframes orbFloat { 50% { transform: translateY(-14px) scale(1.018); } }
.splash__content { position: relative; z-index: 2; width: min(92vw, 1000px); text-align: center; }
.splash__content p { max-width: 650px; margin: 22px auto 30px; font-size: 1.08rem; }
.splash__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.app-shell { min-height: 100vh; }
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(6,11,22,.78); backdrop-filter: blur(26px); }
.topbar__identity { display:flex; align-items:center; gap:10px; min-width:0; }
.home-link { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.035); color:var(--text); transition:var(--transition); }
.home-link:hover { background:rgba(255,255,255,.09); border-color:var(--line-strong); transform:translateY(-1px); }
.home-link svg { width:20px; height:20px; fill:currentColor; }
.brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.brand__mark { width: 42px; height: 42px; position: relative; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 14px; background: radial-gradient(circle, rgba(78,232,212,.25), transparent 65%); }
.brand__mark span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 12px 6px 0 var(--primary), -9px 7px 0 var(--primary-strong); }
.brand strong, .brand small { display: block; }
.brand small { font-size: .69rem; margin-top: 2px; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.language-select { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text); }
.sidebar { position: fixed; top: var(--topbar-height); bottom: 0; left: 0; z-index: 80; width: var(--sidebar-width); padding: 20px 14px 18px; border-right: 1px solid var(--line); background: rgba(7,13,25,.88); backdrop-filter: blur(22px); overflow-y: auto; transition: transform .25s ease; }
.app-shell.sidebar-is-collapsed .sidebar { transform: translateX(-105%); }
.sidebar__intro { margin: 0 6px 18px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.028); }
.sidebar__intro p { margin: 8px 0 0; font-size: .76rem; line-height: 1.5; }
.zone-nav { display: grid; gap: 5px; }
.zone-link { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.zone-link:hover, .zone-link.is-active { background: rgba(124,156,255,.09); border-color: rgba(124,156,255,.18); color: var(--text); }
.zone-link__number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.04); font-size: .72rem; font-weight: 900; }
.zone-link__text strong, .zone-link__text small { display: block; }
.zone-link__text strong { font-size: .82rem; line-height: 1.25; }
.zone-link__text small { margin-top: 3px; font-size: .68rem; }
.zone-link__state { font-size: .76rem; }
.sidebar__footer { display: grid; gap: 8px; margin: 18px 6px 0; }
.ai-visitor-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.ai-visitor-stats > div { min-width:0; padding:11px 8px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); text-align:center; }
.ai-visitor-stats small { display:block; font-size:.68rem; }
.ai-visitor-stats b { display:block; margin-top:4px; color:var(--cyan); font-size:1.35rem; font-variant-numeric:tabular-nums; }
.ai-visitor-stats p { grid-column:1 / -1; margin:0; font-size:.67rem; line-height:1.45; text-align:center; }
.main { min-height: 100vh; margin-left: var(--sidebar-width); padding: calc(var(--topbar-height) + 28px) 28px 80px; transition: margin-left .25s ease; }
.app-shell.sidebar-is-collapsed .main { margin-left: 0; }
.site-footer { margin-left: var(--sidebar-width); padding: 0 28px 32px; transition: margin-left .25s ease, padding-left .25s ease; }
.app-shell.sidebar-is-collapsed .site-footer { margin-left: 0; }
.site-footer__inner { width: min(100%, var(--max-content)); margin: 0 auto; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.025); }
.ai-visitor-stats--footer { grid-template-columns: repeat(2, minmax(130px, 190px)); justify-content: center; margin: 0; }
.ai-visitor-stats--footer > div { padding: 13px 16px; }
.ai-visitor-stats--footer p { margin-top: 2px; }
.ai-kakao-ad { z-index: 70; align-items: center; justify-content: center; overflow: hidden; }
.ai-kakao-ad[hidden] { display: none !important; }
.ai-kakao-ad--desktop { position: fixed; top: calc(var(--topbar-height) + 14px); left: 14px; display: flex; width: 160px; min-height: 600px; }
.ai-kakao-ad--mobile { display: none; width: min(100%, 340px); min-height: 50px; margin: 30px auto; padding: 0 10px; }
body.ai-desktop-ad-visible .app-shell.sidebar-is-collapsed .main { padding-left: 188px; }
body.ai-desktop-ad-visible .app-shell.sidebar-is-collapsed .site-footer { padding-left: 188px; }
.page { width: min(100%, var(--max-content)); margin: 0 auto; }
.hero { position: relative; min-height: 480px; display: grid; align-content: end; padding: clamp(26px, 5vw, 64px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: radial-gradient(circle at 78% 20%, rgba(124,156,255,.27), transparent 25%), radial-gradient(circle at 18% 70%, rgba(78,232,212,.10), transparent 30%), linear-gradient(145deg, #111e37, #080e1a 72%); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; inset: auto -100px -190px auto; width: 520px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(124,156,255,.22); box-shadow: 0 0 0 30px rgba(124,156,255,.025), 0 0 0 100px rgba(124,156,255,.02); }
.hero__content { position: relative; z-index: 2; max-width: 760px; }
.hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hero__content p { max-width: 680px; font-size: 1.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 34px; }
.section { margin-top: 48px; }
.section__head { max-width: 760px; margin-bottom: 20px; }
.section__head p { margin-bottom: 0; }
.exhibit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.exhibit-card { min-height: 235px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.exhibit-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: linear-gradient(145deg, rgba(124,156,255,.11), rgba(255,255,255,.025)); }
.exhibit-card__index { color: var(--cyan); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.exhibit-card p { font-size: .88rem; margin-bottom: 0; }
.question-cloud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.question-card { min-height: 150px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s ease; text-align: left; }
.question-card:hover { transform: translateY(-4px); background: rgba(124,156,255,.10); border-color: var(--line-strong); }
.question-card span { color: var(--cyan); font-weight: 900; font-size: .75rem; }
.question-card strong { display: block; margin-top: 18px; line-height: 1.4; }
.lab { padding: clamp(20px, 4vw, 36px); }
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lab-panel { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(2,7,16,.45); padding: 20px; }
.lab-panel h3 { margin-bottom: 14px; }
.visual-stage { min-height: 320px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at center, rgba(124,156,255,.14), transparent 60%), #07101e; }
.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 54px; align-items: center; gap: 12px; }
.bar-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--primary)); transition: width .5s ease; }
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.timeline-card { scroll-snap-align: start; min-height: 260px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.timeline-card time { color: var(--cyan); font-weight: 900; }
.output-box { min-height: 170px; margin-top: 14px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 14px; background: rgba(0,0,0,.18); white-space: pre-wrap; line-height: 1.65; color: #dce6ff; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow__node { flex: 1 1 140px; min-height: 84px; padding: 14px; display: grid; place-items: center; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.flow__arrow { color: var(--cyan); font-size: 1.25rem; }
.locked-teaser { position: relative; overflow: hidden; }
.locked-teaser::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, var(--bg-soft)); pointer-events: none; }
.lock-overlay { display: grid; place-items: center; gap: 10px; text-align: center; margin-top: -40px; position: relative; z-index: 2; padding: 28px; border: 1px solid rgba(255,203,112,.24); border-radius: 20px; background: rgba(15,20,31,.9); }
.markdown-preview h1 { font-size: 2rem; }
.markdown-preview h2 { font-size: 1.45rem; }
.markdown-preview code { background: rgba(124,156,255,.14); border-radius: 6px; padding: 2px 6px; }
.markdown-preview pre { padding: 14px; border-radius: 12px; background: #050a14; }
.markdown-preview blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--cyan); color: var(--muted); }
.rag-library { display: grid; gap: 10px; }
.rag-doc { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; }
.rag-doc.is-selected { border-color: var(--cyan); background: rgba(78,232,212,.07); }
.chunk { padding: 12px; border-left: 3px solid var(--primary); background: rgba(124,156,255,.07); border-radius: 0 10px 10px 0; margin-bottom: 8px; font-size: .86rem; color: var(--muted); }
.vote-grid { display: grid; gap: 10px; }
.vote-option { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; text-align: left; }
.vote-option:hover { border-color: var(--line-strong); }
.vote-result { display: grid; gap: 8px; margin-top: 18px; }
.certificate { position: relative; padding: clamp(26px, 6vw, 62px); border: 1px solid rgba(255,203,112,.42); border-radius: 26px; background: radial-gradient(circle at top right, rgba(255,203,112,.16), transparent 33%), linear-gradient(145deg, #121b2b, #070c15); text-align: center; overflow: hidden; }
.certificate::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,203,112,.16); border-radius: 18px; pointer-events: none; }
.certificate__seal { width: 90px; height: 90px; margin: 28px auto; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--amber); color: var(--amber); font-weight: 900; transform: rotate(-8deg); }
.page-navigation { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; }

/* Exhibit detail experience */
.exhibit-card--button {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.exhibit-card--button:focus-visible {
  outline: 3px solid rgba(78,232,212,.52);
  outline-offset: 4px;
}
.exhibit-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: #bdcaff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.exhibit-card__action b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(124,156,255,.08);
  transition: transform var(--transition), background var(--transition);
}
.exhibit-card--button:hover .exhibit-card__action b { transform: rotate(45deg); background: rgba(124,156,255,.18); }

.detail-modal {
  width: min(94vw, 1180px);
  max-height: min(92vh, 920px);
  overflow: auto;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, rgba(78,232,212,.09), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(124,156,255,.18), transparent 32%),
    linear-gradient(155deg, #111d33, #070d19 72%);
  box-shadow: 0 42px 140px rgba(0,0,0,.78);
  padding: clamp(22px, 3vw, 38px);
}
.detail-modal::backdrop { background: rgba(0,4,12,.82); backdrop-filter: blur(16px); }
.detail-modal__topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 44px; margin-bottom: 20px; }
.detail-modal__position { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.detail-modal__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: clamp(24px, 4vw, 54px); align-items: center; }
.detail-modal__visual { min-width: 0; }
.detail-modal__content h2 { margin: 5px 0 16px; font-size: clamp(2rem, 4vw, 4.1rem); line-height: 1.03; }
.detail-modal__description { color: #c8d3e8; font-size: 1rem; line-height: 1.85; }
.detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.detail-facts > div { min-height: 92px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.027); }
.detail-facts span, .detail-facts strong { display: block; }
.detail-facts span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-facts strong { margin-top: 10px; font-size: .84rem; line-height: 1.4; }
.detail-learning { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(4,10,20,.42); }
.detail-learning h3 { margin-bottom: 12px; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; }
.detail-learning ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); }
.detail-learning li::marker { color: var(--cyan); }
.detail-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-modal__navigation { display: flex; gap: 8px; }
.detail-modal__navigation .button { min-width: 52px; padding-inline: 14px; }

.detail-visual {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(rgba(124,156,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,156,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(124,156,255,.16), transparent 46%),
    #050b16;
  background-size: 32px 32px, 32px 32px, auto, auto;
  isolation: isolate;
}
.detail-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.05), transparent 28%, transparent 72%, rgba(78,232,212,.04)); }

/* Timeline visual */
.detail-visual--timeline { display: grid; place-items: center; }
.visual-time-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--primary), var(--amber)); box-shadow: 0 0 22px rgba(124,156,255,.45); }
.visual-time-node { --count: 4; position: absolute; left: calc(10% + (var(--i) * 20%)); top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); border: 4px solid #08101d; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 1px rgba(78,232,212,.65), 0 0 24px rgba(78,232,212,.35); }
.visual-time-node b { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); white-space: nowrap; color: #dce8ff; font-size: .78rem; }
.visual-time-node:nth-of-type(even) b { top: 34px; }

/* Neural network visual */
.detail-visual--network { display: grid; place-items: center; }
.visual-node { position: absolute; width: 42px; height: 42px; left: calc(17% + (var(--i) % 3) * 33%); top: 18%; border: 1px solid rgba(78,232,212,.52); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e7ffff, var(--cyan) 16%, #172c44 18%, #08111e 68%); box-shadow: 0 0 24px rgba(78,232,212,.2); }
.visual-node:nth-child(1), .visual-node:nth-child(4), .visual-node:nth-child(7) { left: 16%; }
.visual-node:nth-child(2), .visual-node:nth-child(5), .visual-node:nth-child(8) { left: 48%; }
.visual-node:nth-child(3), .visual-node:nth-child(6), .visual-node:nth-child(9) { left: 80%; }
.visual-node:nth-child(-n+3) { top: 18%; }
.visual-node:nth-child(n+4):nth-child(-n+6) { top: 46%; }
.visual-node:nth-child(n+7) { top: 74%; }
.visual-pulse { width: 72%; height: 58%; border: 1px solid rgba(124,156,255,.2); border-radius: 50%; box-shadow: 0 0 0 28px rgba(124,156,255,.025), 0 0 0 62px rgba(124,156,255,.018); animation: detailPulse 3s ease-in-out infinite; }
@keyframes detailPulse { 50% { transform: scale(1.06); opacity: .65; } }

/* Chip + HBM visual */
.detail-visual--chip { display: grid; place-items: center; }
.chip-die { position: absolute; left: 12%; top: 24%; width: 48%; aspect-ratio: 1.22; display: grid; place-items: center; border: 2px solid rgba(124,156,255,.65); border-radius: 20px; background: linear-gradient(145deg,#182a49,#0a1120); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(124,156,255,.15) inset; }
.chip-die b { font-size: 3rem; letter-spacing: -.08em; color: #cbd6ff; }
.chip-die span { position: absolute; width: 7px; height: 24px; border-radius: 5px; background: var(--primary); left: calc(8% + (var(--i) % 8) * 12%); top: calc(var(--i) < 8 ? -16px : auto); bottom: calc(var(--i) >= 8 ? -16px : auto); }
.memory-stack { position: absolute; right: 12%; top: 27%; width: 25%; height: 43%; display: grid; align-content: center; gap: 8px; }
.memory-stack i { height: 38px; border: 1px solid rgba(255,203,112,.5); border-radius: 8px; background: linear-gradient(90deg,#4c3821,#1b1820); box-shadow: 0 9px 18px rgba(0,0,0,.32); }
.memory-stack b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--amber); letter-spacing: .15em; }
.data-lanes { position: absolute; left: 58%; right: 34%; top: 40%; display: grid; gap: 9px; }
.data-lanes i { height: 3px; background: linear-gradient(90deg,var(--primary),var(--amber)); box-shadow: 0 0 15px rgba(255,203,112,.45); animation: laneFlow 1.8s linear infinite; transform-origin: left; }
@keyframes laneFlow { 50% { transform: scaleX(.55); opacity: .55; } }

/* Token visual */
.detail-visual--tokens { display: grid; place-items: center; }
.token-sequence { position: absolute; left: 7%; right: 7%; top: 20%; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.token-sequence span { padding: 12px 15px; border: 1px solid rgba(124,156,255,.35); border-radius: 12px; background: rgba(124,156,255,.09); font-weight: 800; }
.attention-lines { position: absolute; inset: 34% 12% 27%; border-radius: 50%; border-top: 1px solid rgba(78,232,212,.28); }
.attention-lines i { position: absolute; left: calc(8% + var(--i) * 16%); top: calc(12% + (var(--i) % 3) * 19%); width: calc(24% + var(--i) * 3%); height: calc(54% - var(--i) * 4%); border: 1px solid rgba(78,232,212,.24); border-left: 0; border-bottom: 0; border-radius: 50%; transform: rotate(calc(-18deg + var(--i) * 7deg)); }
.probability-orbit { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); width: 128px; height: 128px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(78,232,212,.42); border-radius: 50%; background: radial-gradient(circle,rgba(78,232,212,.16),rgba(5,11,22,.92) 68%); box-shadow: 0 0 0 18px rgba(78,232,212,.025), 0 0 42px rgba(78,232,212,.18); }
.probability-orbit b { font-size: 2rem; }
.probability-orbit small { color: var(--cyan); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }

/* Prompt visual */
.detail-visual--prompt { display: grid; place-items: center; align-content: center; gap: 12px; }
.prompt-layer { width: min(72%, 360px); padding: 17px 20px; border: 1px solid var(--line-strong); border-radius: 13px; background: linear-gradient(90deg,rgba(124,156,255,.15),rgba(255,255,255,.025)); box-shadow: 0 16px 30px rgba(0,0,0,.18); font-weight: 900; letter-spacing: .12em; transform: translateX(calc((var(--n, 0)) * 8px)); }
.prompt-layer:nth-child(2) { margin-left: 34px; }
.prompt-layer:nth-child(3) { margin-left: 68px; }
.prompt-layer:nth-child(4) { margin-left: 102px; border-color: rgba(78,232,212,.32); }
.prompt-output { margin-top: 22px; padding: 13px 24px; border-radius: 999px; background: linear-gradient(135deg,var(--cyan),var(--primary)); color: #06101c; font-weight: 950; box-shadow: 0 18px 40px rgba(78,232,212,.18); }

/* Document visual */
.detail-visual--document { display: grid; place-items: center; }
.doc-sheet { width: 67%; min-height: 68%; padding: 34px; display: grid; align-content: start; gap: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: linear-gradient(150deg,#f2f6ff,#cbd8ee); color: #16233a; transform: rotate(-3deg); box-shadow: 28px 35px 70px rgba(0,0,0,.45); }
.doc-sheet b { font-size: 1.2rem; }
.doc-sheet span { color: #425777; font-weight: 800; }
.doc-sheet i { height: 8px; border-radius: 99px; background: #8fa2be; opacity: .58; }
.doc-sheet i:nth-of-type(2) { width: 82%; }.doc-sheet i:nth-of-type(3) { width: 61%; }
.doc-sheet code { width: max-content; padding: 8px 10px; border-radius: 7px; background: #18263d; color: #c9fdf6; }
.doc-outline { position: absolute; right: 9%; top: 18%; display: grid; gap: 12px; }
.doc-outline span { width: 80px; height: 8px; border-radius: 99px; background: rgba(78,232,212,.35); }
.doc-outline span:nth-child(2) { width: 58px; }.doc-outline span:nth-child(3) { width: 68px; }.doc-outline span:nth-child(4) { width: 43px; }

/* Builder visual */
.detail-visual--builder { display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; gap: 20px; padding: 40px; }
.builder-parts { display: grid; gap: 12px; }
.builder-parts span { min-width: 130px; padding: 14px 17px; border: 1px solid rgba(78,232,212,.3); border-radius: 12px; background: rgba(78,232,212,.06); color: #c8fff8; font-weight: 850; }
.builder-arrow { color: var(--cyan); font-size: 2.3rem; }
.builder-result { width: 180px; height: 230px; padding: 24px; display: grid; align-content: start; gap: 16px; border: 1px solid rgba(124,156,255,.46); border-radius: 18px; background: linear-gradient(150deg,#172a49,#0a111e); box-shadow: 0 25px 70px rgba(0,0,0,.45); }
.builder-result b { color: #d4dcff; letter-spacing: .14em; }.builder-result i { height: 9px; border-radius: 99px; background: rgba(255,255,255,.18); }

/* RAG visual */
.detail-visual--rag { display: grid; place-items: center; }
.rag-query,.rag-context,.rag-answer { position: absolute; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: #111e33; font-weight: 900; letter-spacing: .08em; z-index: 2; }
.rag-query { left: 7%; top: 12%; }.rag-context { left: 42%; bottom: 12%; }.rag-answer { right: 6%; top: 12%; text-align: center; }.rag-answer small { color: var(--cyan); }
.rag-library-visual { width: 56%; height: 44%; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; transform: perspective(800px) rotateX(57deg) rotateZ(-7deg); }
.rag-library-visual span { border: 1px solid rgba(124,156,255,.32); border-radius: 10px; background: linear-gradient(145deg,#1a2943,#0b1322); box-shadow: 0 15px 24px rgba(0,0,0,.28); }
.rag-library-visual span.is-hit { border-color: var(--cyan); background: linear-gradient(145deg,rgba(78,232,212,.35),#0b1b25); box-shadow: 0 0 34px rgba(78,232,212,.24); }
.rag-path { position: absolute; inset: 17% 17%; border: 1px dashed rgba(78,232,212,.3); border-radius: 50%; animation: detailSpin 9s linear infinite; }
@keyframes detailSpin { to { transform: rotate(360deg); } }

/* Verification visual */
.detail-visual--shield { display: grid; place-items: center; }
.claim-card { position: absolute; left: 9%; top: 28%; width: 32%; min-height: 150px; padding: 22px; border: 1px solid rgba(255,113,134,.32); border-radius: 18px; background: rgba(255,113,134,.07); }
.claim-card b,.claim-card span { display:block; }.claim-card span { margin-top: 10px; font-size: 2.3rem; font-weight: 950; }.claim-card i { display:block; width:80%; height:8px; margin-top:18px; border-radius:99px; background:rgba(255,255,255,.16); }
.verify-beam { position: absolute; left: 42%; width: 23%; height: 4px; background: linear-gradient(90deg,#ff7186,var(--cyan)); box-shadow: 0 0 26px rgba(78,232,212,.45); }
.verify-shield { position: absolute; right: 11%; width: 165px; height: 190px; display: grid; place-items: center; align-content: center; clip-path: polygon(50% 0,92% 16%,86% 72%,50% 100%,14% 72%,8% 16%); background: linear-gradient(160deg,var(--cyan),#203a5c 70%); color:#06101d; font-size:3rem; font-weight:950; filter:drop-shadow(0 20px 32px rgba(78,232,212,.18)); }.verify-shield small{font-size:.65rem;letter-spacing:.15em;}
.source-dots { position:absolute; left:17%; bottom:16%; display:flex; gap:10px; }.source-dots i{width:13px;height:13px;border-radius:50%;background:var(--amber);box-shadow:0 0 20px rgba(255,203,112,.32);}

/* Ethics balance */
.detail-visual--balance { display:grid; place-items:center; }
.balance-pole { position:absolute; left:50%; top:22%; width:7px; height:47%; border-radius:99px; background:linear-gradient(var(--amber),#4c3821); }
.balance-arm { position:absolute; top:35%; width:68%; height:3px; background:var(--amber); transform:rotate(-4deg); transform-origin:center; }
.balance-arm::before,.balance-arm::after{content:"";position:absolute;top:0;width:1px;height:96px;background:rgba(255,203,112,.55);}
.balance-arm::before{left:5%;}.balance-arm::after{right:5%;}
.balance-arm span { position:absolute; top:82px; width:150px; padding:17px; border:1px solid rgba(255,203,112,.36); border-radius:50%; background:rgba(255,203,112,.08); text-align:center; font-weight:900; }
.balance-arm span:first-child{left:-60px}.balance-arm span:last-child{right:-60px}
.balance-base{position:absolute;bottom:18%;width:36%;height:18px;border-radius:50%;background:#4b3a27;box-shadow:0 15px 30px rgba(0,0,0,.42)}
.stakeholders{position:absolute;bottom:8%;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.18em;}

/* Future city */
.detail-visual--city { display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:12% 8% 15%; }
.city-sky{position:absolute;inset:0;background:radial-gradient(circle at 75% 18%,rgba(78,232,212,.2),transparent 14%),linear-gradient(180deg,rgba(124,156,255,.1),transparent 65%)}
.city-building{position:relative;width:11%;height:var(--h);min-height:100px;border:1px solid rgba(124,156,255,.34);border-radius:9px 9px 2px 2px;background:linear-gradient(90deg,#101d31,#1b3151 55%,#0a1220);box-shadow:0 22px 30px rgba(0,0,0,.34);z-index:2}
.city-building::after{content:"";position:absolute;inset:10px;background:repeating-linear-gradient(180deg,rgba(78,232,212,.45) 0 3px,transparent 3px 14px);opacity:calc(.35 + var(--i) * .08)}
.city-network{position:absolute;left:6%;right:6%;bottom:12%;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),var(--primary),transparent);box-shadow:0 0 30px rgba(78,232,212,.4);z-index:3}
.city-agency{position:absolute;right:7%;top:8%;width:105px;height:105px;display:grid;place-items:center;border:1px solid rgba(78,232,212,.42);border-radius:50%;background:rgba(7,16,30,.85);color:var(--cyan);text-align:center;font-size:.65rem;font-weight:950;letter-spacing:.12em;z-index:4}

/* Certificate visual */
.detail-visual--certificate { display:grid;place-items:center; }
.certificate-sheet{width:72%;min-height:65%;padding:42px;display:grid;place-items:center;align-content:center;gap:22px;border:1px solid rgba(255,203,112,.5);border-radius:12px;background:radial-gradient(circle at top right,rgba(255,203,112,.12),transparent 38%),linear-gradient(145deg,#172133,#0b111c);box-shadow:0 30px 70px rgba(0,0,0,.52);text-align:center}
.certificate-sheet span,.certificate-sheet small{color:var(--amber);font-size:.72rem;font-weight:900;letter-spacing:.18em}.certificate-sheet b{font-size:2.1rem}.certificate-sheet i{width:52%;height:1px;background:rgba(255,203,112,.48)}
.certificate-seal{position:absolute;right:15%;bottom:13%;width:96px;height:96px;display:grid;place-items:center;border:2px solid var(--amber);border-radius:50%;color:var(--amber);font-size:2rem;font-weight:950;transform:rotate(-12deg);background:rgba(7,12,21,.82)}

/* Web-research special collection */
.research-special {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(78,232,212,.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(78,232,212,.1), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(124,156,255,.14), transparent 33%),
    rgba(9,17,31,.72);
}
.research-special::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.025) 48% 49%, transparent 49% 100%);
  background-size: 36px 36px;
}
.research-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.research-card {
  min-height: 230px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.research-card:hover { transform: translateY(-5px); border-color: rgba(78,232,212,.42); background: linear-gradient(150deg, rgba(78,232,212,.075), rgba(124,156,255,.04)); }
.research-card__top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.research-card__zone { color:var(--muted); font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.research-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.research-card p { margin: 10px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.research-card__action { display:flex; align-items:center; justify-content:space-between; color:var(--cyan); font-size:.74rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }

/* Evidence section inside exhibit detail */
.detail-research { margin-top: 18px; padding: 18px; border: 1px solid rgba(78,232,212,.2); border-radius: 18px; background: rgba(78,232,212,.035); }
.detail-research[hidden] { display:none; }
.detail-research__head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.detail-research__head h3 { margin:0; font-size:.9rem; letter-spacing:.04em; }
.detail-sources { display:grid; gap:8px; }
.detail-sources a { display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; min-height:48px; padding:10px 12px; color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:12px; background:rgba(4,10,20,.44); transition:border-color var(--transition), transform var(--transition); }
.detail-sources a:hover { border-color:rgba(78,232,212,.46); transform:translateX(3px); }
.detail-sources span { color:var(--cyan); font-size:.68rem; font-weight:900; }
.detail-sources strong { font-size:.75rem; line-height:1.35; }
.detail-sources b { color:var(--cyan); }
.detail-research .fine-print { margin:12px 0 0; }

/* Research-driven visuals */
.detail-visual--variance { display:grid; place-items:center; }
.variance-prompt { position:absolute; top:14%; padding:15px 24px; border:1px solid rgba(124,156,255,.4); border-radius:14px; background:#111f37; font-weight:950; letter-spacing:.12em; }
.variance-prompt::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:62px; background:linear-gradient(var(--primary),transparent); }
.variance-branches { position:absolute; top:48%; left:8%; right:8%; display:flex; justify-content:space-between; gap:12px; }
.variance-branches span { flex:1; padding:18px 10px; border:1px solid var(--line-strong); border-radius:14px; background:rgba(124,156,255,.08); text-align:center; font-size:.76rem; font-weight:900; animation:varianceFloat 3s ease-in-out infinite; }
.variance-branches span:nth-child(2){animation-delay:.4s}.variance-branches span:nth-child(3){animation-delay:.8s}
.variance-dial { position:absolute; bottom:9%; width:106px; height:106px; display:grid; place-items:center; align-content:center; border:1px solid rgba(78,232,212,.45); border-radius:50%; background:rgba(7,18,29,.9); }
.variance-dial i { width:3px; height:35px; background:var(--cyan); transform-origin:bottom; transform:rotate(34deg); box-shadow:0 0 15px var(--cyan); }
.variance-dial b { margin-top:8px; font-size:.62rem; letter-spacing:.15em; }
@keyframes varianceFloat { 50% { transform:translateY(-8px); border-color:rgba(78,232,212,.42); } }

.detail-visual--model-picker { position:relative; }
.model-axis { position:absolute; color:var(--muted); font-size:.62rem; font-weight:900; letter-spacing:.12em; }
.model-axis--x { left:14%; right:10%; bottom:15%; padding-top:8px; border-top:1px solid rgba(255,255,255,.22); text-align:right; }
.model-axis--y { left:11%; top:12%; bottom:17%; padding-left:8px; border-left:1px solid rgba(255,255,255,.22); writing-mode:vertical-rl; transform:rotate(180deg); }
.model-dot { position:absolute; left:var(--x); top:var(--y); width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(78,232,212,.45); border-radius:50%; background:radial-gradient(circle at 35% 30%,#eaffff,var(--cyan) 12%,#152b46 15%,#08111e 70%); font-weight:950; box-shadow:0 0 28px rgba(78,232,212,.17); animation:detailPulse calc(2.8s + var(--i)*.3s) ease-in-out infinite; }
.model-legend { position:absolute; right:8%; top:8%; padding:9px 12px; border:1px solid var(--line); border-radius:99px; color:var(--amber); font-size:.6rem; font-weight:900; letter-spacing:.1em; }

.detail-visual--local-cloud { display:grid; grid-template-columns:1fr auto 1fr; place-items:center; gap:22px; padding:12%; }
.local-device,.cloud-cluster { width:100%; min-height:190px; padding:24px; display:grid; place-items:center; align-content:center; gap:12px; border:1px solid var(--line-strong); border-radius:22px; background:rgba(124,156,255,.07); text-align:center; }
.local-device { box-shadow:inset 0 0 35px rgba(78,232,212,.06); }
.local-device i { width:78%; height:8px; border-radius:99px; background:rgba(78,232,212,.45); }
.local-device small,.cloud-cluster small{color:var(--muted);font-size:.6rem;font-weight:900;letter-spacing:.1em}
.cloud-link{color:var(--cyan);font-size:2rem}.cloud-cluster{border-radius:46% 54% 42% 58%;position:relative}.cloud-cluster i{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--primary);box-shadow:0 0 18px rgba(124,156,255,.45)}
.cloud-cluster i:nth-of-type(1){left:14%;top:32%}.cloud-cluster i:nth-of-type(2){right:16%;top:25%}.cloud-cluster i:nth-of-type(3){left:24%;bottom:22%}.cloud-cluster i:nth-of-type(4){right:25%;bottom:18%}.cloud-cluster i:nth-of-type(5){top:12%}

.detail-visual--detector { display:grid; place-items:center; }
.detector-copy { position:absolute; left:9%; top:15%; width:48%; height:68%; padding:28px; display:grid; align-content:start; gap:14px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#ecf2ff,#c8d6ee); transform:rotate(-3deg); }
.detector-copy i { height:9px; border-radius:99px; background:#8294b0; }.detector-copy i:nth-child(2){width:86%}.detector-copy i:nth-child(3){width:68%}.detector-copy i:nth-child(4){width:91%}
.detector-scan { position:absolute; left:7%; right:39%; top:22%; height:3px; background:var(--cyan); box-shadow:0 0 25px var(--cyan); animation:detectorScan 2.4s ease-in-out infinite; }
.detector-scores { position:absolute; right:8%; display:grid; gap:14px; }
.detector-scores span { padding:14px 18px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(124,156,255,.08); font-weight:900; }.detector-scores b{font-size:4rem;color:var(--amber);text-align:center}
@keyframes detectorScan{50%{transform:translateY(260px)}}

.detail-visual--provenance { display:grid; place-items:center; }
.provenance-frame { position:absolute; left:8%; top:16%; width:38%; height:48%; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:18px; background:linear-gradient(135deg,#172941,#0a1423); overflow:hidden; }
.provenance-frame span{font-weight:950;letter-spacing:.12em}.provenance-frame i{position:absolute;inset:18%;border:1px dashed rgba(78,232,212,.4);border-radius:50%}
.provenance-chain{position:absolute;left:14%;right:12%;bottom:14%;display:flex;justify-content:space-between;align-items:center}.provenance-chain::before{content:"";position:absolute;left:4%;right:4%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--primary),var(--amber))}.provenance-chain b{position:relative;padding:10px 12px;border:1px solid var(--line);border-radius:99px;background:#07101d;font-size:.62rem;letter-spacing:.08em}
.provenance-seal{position:absolute;right:12%;top:19%;width:145px;height:145px;display:grid;place-items:center;border:2px solid var(--cyan);border-radius:50%;color:var(--cyan);font-size:1.5rem;font-weight:950;letter-spacing:.12em;box-shadow:0 0 0 12px rgba(78,232,212,.035)}

.detail-visual--slop { display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; padding:10%; }
.detail-visual--slop > span { width:54px; height:44px; display:grid; place-items:center; border:1px solid rgba(124,156,255,.2); border-radius:9px; background:rgba(124,156,255,.06); color:rgba(255,255,255,calc(.25 + (var(--i)%5)*.1)); font-size:.68rem; transform:rotate(calc((var(--i)%5 - 2)*2deg)); }
.slop-filter{position:absolute;right:10%;bottom:15%;width:145px;height:145px;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:50%;background:rgba(7,17,28,.94);color:var(--cyan);text-align:center;font-weight:950;letter-spacing:.08em;box-shadow:0 0 45px rgba(78,232,212,.16)}
.slop-quality{position:absolute;left:10%;bottom:9%;padding:11px 16px;border-radius:99px;background:linear-gradient(135deg,var(--cyan),var(--primary));color:#06101c;font-weight:950}

.detail-visual--privacy { display:grid; grid-template-columns:1fr 1fr; place-items:center; gap:28px; padding:12%; }
.privacy-chat { width:100%; min-height:230px; padding:25px; display:grid; align-content:start; gap:14px; border:1px solid var(--line-strong); border-radius:22px; background:rgba(124,156,255,.07); }.privacy-chat span{font-weight:950;letter-spacing:.12em}.privacy-chat i{height:11px;border-radius:99px;background:rgba(255,255,255,.15)}.privacy-chat i:nth-of-type(2){width:78%}.privacy-chat i:nth-of-type(3){width:58%}
.privacy-switches{display:grid;grid-template-columns:1fr auto;gap:18px 16px;align-items:center}.privacy-switches b{font-size:.7rem;letter-spacing:.08em}.privacy-switches span{width:50px;height:26px;border-radius:99px;background:rgba(78,232,212,.35);position:relative}.privacy-switches span::after{content:"";position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--cyan)}.privacy-switches span.is-off{background:rgba(255,113,134,.22)}.privacy-switches span.is-off::after{right:28px;background:#ff7186}.privacy-key{position:absolute;right:10%;bottom:10%;color:var(--amber);font-size:.62rem;font-weight:900;letter-spacing:.15em}

.detail-visual--vault { display:grid; place-items:center; }
.vault-door{position:absolute;left:12%;width:255px;height:255px;display:grid;place-items:center;border:14px solid #26364c;border-radius:50%;background:radial-gradient(circle,#13243a 0 38%,#07101d 40% 100%);box-shadow:0 20px 55px rgba(0,0,0,.45),inset 0 0 30px rgba(78,232,212,.08)}.vault-door span{position:absolute;width:94px;height:94px;border:8px solid #586b84;border-radius:50%}.vault-door span::before,.vault-door span::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:120px;background:#586b84;transform:translate(-50%,-50%)}.vault-door span::after{transform:translate(-50%,-50%) rotate(90deg)}.vault-door b{position:absolute;bottom:-58px;text-align:center;color:var(--cyan);font-size:.72rem;letter-spacing:.11em}
.vault-items{position:absolute;right:10%;display:grid;grid-template-columns:repeat(2,90px);gap:14px}.vault-items i{height:72px;display:grid;place-items:center;border:1px solid rgba(255,113,134,.3);border-radius:14px;background:rgba(255,113,134,.07);color:#ff8da0;font-style:normal;font-weight:950}.vault-redact{position:absolute;right:8%;bottom:10%;padding:12px 16px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-family:monospace}

.detail-visual--education { display:grid; place-items:center; }
.education-path{position:absolute;left:8%;right:8%;top:22%;display:flex;justify-content:space-between;align-items:center}.education-path::before{content:"";position:absolute;left:5%;right:5%;height:2px;background:linear-gradient(90deg,var(--primary),var(--cyan))}.education-path span{position:relative;width:92px;height:92px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:#0b1728;font-size:.68rem;font-weight:950;letter-spacing:.08em}
.education-fork{position:absolute;bottom:16%;display:flex;gap:55px}.education-fork b{padding:18px 30px;border:1px solid var(--line);border-radius:14px;background:rgba(124,156,255,.07)}.education-fork b:first-child{border-color:rgba(78,232,212,.42);color:var(--cyan)}.education-fork b:last-child{border-color:rgba(255,113,134,.3);color:#ff8da0}.education-pencil{position:absolute;bottom:39%;color:var(--amber);font-weight:950;letter-spacing:.12em}

.detail-visual--companion { display:grid; place-items:center; }
.companion-ai,.companion-human{position:absolute;width:150px;height:150px;display:grid;place-items:center;border-radius:50%;font-weight:950;text-align:center}.companion-ai{left:10%;background:radial-gradient(circle at 35% 30%,#efffff,var(--cyan) 10%,#142b45 14%,#07101d 70%);border:1px solid var(--cyan)}.companion-ai i{position:absolute;width:185px;height:185px;border:1px solid rgba(78,232,212,.2);border-radius:50%}.companion-human{right:10%;border:1px solid rgba(255,203,112,.45);background:rgba(255,203,112,.06);color:var(--amber);font-size:.75rem;letter-spacing:.08em}.companion-chat{display:grid;gap:16px}.companion-chat span{padding:13px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);font-size:.78rem}.companion-boundary{position:absolute;bottom:10%;padding:10px 18px;border:1px dashed rgba(255,113,134,.45);border-radius:99px;color:#ff8da0;font-size:.65rem;font-weight:950;letter-spacing:.12em}

.detail-visual--regulation { display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:30px;padding:10%; }
.risk-pyramid{width:100%;display:flex;flex-direction:column-reverse;align-items:center;gap:8px}.risk-pyramid span{height:48px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(124,156,255,.06);font-size:.64rem;font-weight:950;letter-spacing:.08em}.risk-pyramid span:nth-child(1){width:100%}.risk-pyramid span:nth-child(2){width:78%;border-color:rgba(78,232,212,.3)}.risk-pyramid span:nth-child(3){width:56%;border-color:rgba(255,203,112,.4)}.risk-pyramid span:nth-child(4){width:34%;border-color:rgba(255,113,134,.4);color:#ff8da0}.regulation-rules{display:grid;grid-template-columns:repeat(2,100px);gap:12px}.regulation-rules b{height:90px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:16px;background:rgba(255,255,255,.035);font-size:.68rem;letter-spacing:.08em}

.detail-visual--energy { display:grid;place-items:center; }
.energy-datacenter{position:absolute;left:9%;top:19%;width:45%;height:56%;padding:25px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border:1px solid var(--line-strong);border-radius:18px;background:#0c192a;color:var(--cyan);font-weight:950}.energy-datacenter i{border:1px solid rgba(124,156,255,.3);border-radius:6px;background:repeating-linear-gradient(180deg,rgba(78,232,212,.35) 0 2px,transparent 2px 7px)}.energy-meter{position:absolute;right:12%;top:18%;width:140px;height:220px;border:1px solid var(--line);border-radius:75px;background:#07101d;overflow:hidden}.energy-meter span{position:absolute;left:0;right:0;bottom:0;height:var(--v);background:linear-gradient(var(--amber),#ff775f);opacity:.65}.energy-meter b{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;letter-spacing:.14em}.energy-cooling{position:absolute;right:8%;bottom:18%;padding:13px 20px;border:1px solid rgba(78,232,212,.32);border-radius:99px;color:var(--cyan);font-size:.66rem;font-weight:950}.energy-grid{position:absolute;left:10%;bottom:7%;color:var(--muted);font-size:.65rem;font-weight:900;letter-spacing:.1em}

.detail-visual--agent { display:grid;place-items:center; }
.agent-core{width:150px;height:150px;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:50%;background:radial-gradient(circle,rgba(78,232,212,.2),#08111d 68%);color:var(--cyan);font-weight:950;letter-spacing:.12em;box-shadow:0 0 55px rgba(78,232,212,.14)}.agent-tools{position:absolute;inset:10%;}.agent-tools span{position:absolute;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:#0c1728;font-size:.65rem;font-weight:950}.agent-tools span:nth-child(1){left:0;top:10%}.agent-tools span:nth-child(2){right:0;top:12%}.agent-tools span:nth-child(3){left:2%;bottom:14%}.agent-tools span:nth-child(4){right:2%;bottom:14%;border-color:rgba(255,113,134,.35);color:#ff8da0}.agent-gate{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid var(--amber);border-radius:99px;color:var(--amber);font-size:.62rem;font-weight:950;text-align:center;letter-spacing:.08em}.agent-stop{position:absolute;right:6%;top:43%;width:62px;height:62px;display:grid;place-items:center;border:2px solid #ff7186;border-radius:50%;color:#ff7186;font-size:.65rem;font-weight:950}

.detail-visual--jobs { display:grid;place-items:center; }
.jobs-role{position:absolute;left:8%;width:130px;height:130px;display:grid;place-items:center;border:1px solid var(--primary);border-radius:50%;background:rgba(124,156,255,.09);font-weight:950}.jobs-tasks{position:absolute;right:7%;width:55%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.jobs-tasks span{padding:16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);text-align:center;font-size:.66rem;font-weight:950}.jobs-tasks span:nth-child(1){border-color:rgba(255,113,134,.28)}.jobs-tasks span:nth-child(2){border-color:rgba(78,232,212,.3)}.jobs-tasks span:nth-child(3),.jobs-tasks span:nth-child(5){border-color:rgba(255,203,112,.3)}.jobs-shift{position:absolute;bottom:10%;left:12%;color:var(--cyan);font-size:.7rem;font-weight:950;letter-spacing:.12em}

.detail-visual--thinking { display:grid;place-items:center; }
.thinking-brain,.thinking-ai{position:absolute;width:125px;height:125px;display:grid;place-items:center;border-radius:50%;font-weight:950}.thinking-brain{left:8%;border:1px solid var(--amber);color:var(--amber);background:rgba(255,203,112,.06)}.thinking-ai{right:8%;border:1px solid var(--cyan);color:var(--cyan);background:rgba(78,232,212,.06)}.thinking-loop{width:44%;height:68%;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;place-items:center;animation:detailSpin 16s linear infinite}.thinking-loop span{width:90px;height:90px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#0b1626;font-size:.6rem;font-weight:950;animation:detailSpin 16s linear reverse infinite}

.detail-visual--usage { display:grid;align-content:center;gap:17px;padding:10% 12%; }
.usage-bar{display:grid;grid-template-columns:80px 1fr 36px;gap:12px;align-items:center}.usage-bar span,.usage-bar b{font-size:.65rem;font-weight:950}.usage-bar i{height:15px;border-radius:99px;background:linear-gradient(90deg,var(--cyan) var(--v),rgba(255,255,255,.08) var(--v));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.detail-visual--usage small{color:var(--muted);font-size:.58rem;letter-spacing:.12em;text-align:right}

/* LLM response-generation simulator */
.llm-simulator {
  --llm-panel: rgba(3, 9, 19, .72);
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px);
  background:
    radial-gradient(circle at 10% 0%, rgba(78,232,212,.11), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(124,156,255,.16), transparent 32%),
    linear-gradient(145deg, rgba(15,26,45,.96), rgba(4,9,18,.96));
}
.llm-simulator::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
.llm-simulator > * { position:relative; z-index:1; }
.llm-simulator__header { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.llm-simulator__header h3 { margin:12px 0 8px; font-size:clamp(1.55rem,3vw,2.7rem); }
.llm-simulator__header p { max-width:840px; margin:0; }
.llm-fullscreen-button { flex:0 0 auto; }
.llm-control-deck { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); gap:16px; margin-top:24px; }
.llm-question-box,.llm-parameters { padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--llm-panel); }
.llm-question-box label,.llm-parameters label { display:block; margin-bottom:9px; color:#dce6ff; font-size:.8rem; font-weight:900; letter-spacing:.06em; }
.llm-question-box .textarea { min-height:92px; resize:none; }
.llm-samples { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.llm-samples button { max-width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(124,156,255,.07); color:var(--muted); cursor:pointer; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.llm-samples button:hover { color:var(--text); border-color:var(--line-strong); }
.llm-parameters { display:grid; align-content:center; gap:18px; }
.llm-parameters strong { float:right; color:var(--cyan); }
.llm-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:9px; }
.llm-pipeline { display:grid; grid-template-columns:repeat(7,minmax(108px,1fr)); gap:8px; margin:24px 0 16px; overflow-x:auto; scrollbar-width:thin; padding-bottom:5px; }
.llm-pipeline button { position:relative; min-height:78px; padding:12px 10px; display:grid; align-content:center; justify-items:start; gap:7px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); color:var(--muted); cursor:pointer; text-align:left; }
.llm-pipeline button::after { content:""; position:absolute; left:12px; right:12px; bottom:7px; height:2px; border-radius:99px; background:rgba(255,255,255,.07); }
.llm-pipeline button span { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:.66rem; }
.llm-pipeline button b { font-size:.7rem; line-height:1.25; }
.llm-pipeline button.is-active { border-color:rgba(78,232,212,.55); color:var(--text); background:rgba(78,232,212,.075); box-shadow:0 0 28px rgba(78,232,212,.08); }
.llm-pipeline button.is-active::after { background:linear-gradient(90deg,var(--cyan),var(--primary)); }
.llm-pipeline button.is-complete span { background:var(--cyan); border-color:var(--cyan); color:#06101c; }
.llm-workspace { display:grid; grid-template-columns:minmax(0,1.58fr) minmax(260px,.42fr); gap:16px; min-height:520px; }
.llm-stage,.llm-explainer { min-width:0; border:1px solid var(--line); border-radius:20px; background:var(--llm-panel); }
.llm-stage { min-height:520px; overflow:hidden; }
.llm-stage__visual { position:relative; width:100%; min-height:520px; height:100%; padding:clamp(18px,3vw,34px); display:grid; place-items:center; overflow:auto; }
.llm-explainer { padding:clamp(20px,3vw,30px); display:flex; flex-direction:column; justify-content:center; }
.llm-step-number { color:rgba(78,232,212,.34); font-size:clamp(3rem,7vw,6.5rem); font-weight:950; line-height:.8; letter-spacing:-.08em; }
.llm-explainer h4 { margin:22px 0 14px; font-size:clamp(1.25rem,2.2vw,2rem); line-height:1.2; }
.llm-explainer p { margin:0; }
.llm-step-mini { display:flex; align-items:center; gap:8px; margin-top:28px; color:var(--muted); font-size:.58rem; font-weight:950; letter-spacing:.12em; }
.llm-step-mini i { flex:1; height:1px; background:linear-gradient(90deg,var(--primary),var(--cyan)); }
.llm-simulator__note { display:flex; gap:12px; align-items:flex-start; margin-top:15px; padding:14px 16px; border:1px solid rgba(255,203,112,.2); border-radius:14px; background:rgba(255,203,112,.045); }
.llm-simulator__note > span { flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--amber); border-radius:50%; color:var(--amber); font-weight:900; }
.llm-simulator__note p { margin:0; font-size:.78rem; line-height:1.6; }

.llm-context-stack { width:min(100%,680px); display:grid; gap:12px; }
.llm-context-stack article { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:15px; background:rgba(124,156,255,.045); animation:llmRise .45s ease both; }
.llm-context-stack article:nth-child(2){margin-left:5%}.llm-context-stack article:nth-child(3){margin-left:10%}
.llm-context-stack article.is-user { border-color:rgba(78,232,212,.34); background:rgba(78,232,212,.055); }
.llm-context-stack article > span { width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;color:var(--cyan);font-size:.68rem;font-weight:950; }
.llm-context-stack b { font-size:.76rem; letter-spacing:.07em; }.llm-context-stack p{margin:5px 0 0;font-size:.78rem;line-height:1.45;overflow-wrap:anywhere}
.llm-window-meter { position:relative; height:38px; margin-top:8px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.03); }
.llm-window-meter i { position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(124,156,255,.4),rgba(78,232,212,.4)); }.llm-window-meter small{position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;font-weight:950;letter-spacing:.13em}
.llm-token-field { width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:10px; }
.llm-token-field span { min-width:70px; min-height:70px; padding:12px; display:grid; place-items:center; align-content:center; border:1px solid rgba(124,156,255,.38); border-radius:14px; background:linear-gradient(145deg,rgba(124,156,255,.15),rgba(78,232,212,.04)); font-weight:900; animation:llmTokenIn .4s ease both; animation-delay:var(--delay); }
.llm-token-field small { color:var(--cyan); font-size:.55rem; margin-bottom:5px; }
.llm-embedding { width:100%; min-width:620px; display:grid; gap:8px; }
.llm-matrix-head,.llm-vector-row { display:grid; grid-template-columns:100px 1fr 230px; gap:12px; align-items:center; }
.llm-matrix-head { color:var(--muted); font-size:.62rem; font-weight:950; letter-spacing:.1em; }
.llm-vector-row { padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.llm-vector-row > div { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; height:25px; align-items:end; }
.llm-vector-row i { position:relative; height:max(4px,var(--v)); max-height:25px; border-radius:3px; background:linear-gradient(var(--cyan),var(--primary)); }
.llm-vector-row i::after { content:attr(data-sign); position:absolute;inset:0;display:grid;place-items:center;color:#07101d;font-style:normal;font-size:.54rem;font-weight:950; }
.llm-vector-row code { color:#aebddd; font-size:.7rem; white-space:nowrap; }
.llm-attention-map { position:relative; width:100%; min-width:600px; min-height:390px; }
.llm-attention-map svg { position:absolute; inset:28px 0 45px; width:100%; height:calc(100% - 73px); overflow:visible; }
.llm-attention-map path { fill:none; stroke:rgba(78,232,212,calc(.14 + var(--strength) * .62)); stroke-width:calc(1px + var(--strength) * 4px); filter:drop-shadow(0 0 5px rgba(78,232,212,.24)); animation:llmDraw .8s ease both; }
.llm-attention-label { position:absolute;top:0;left:0;color:var(--cyan);font-size:.66rem;font-weight:950;letter-spacing:.12em; }
.llm-attention-tokens { position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:space-around;gap:8px; }
.llm-attention-tokens span { max-width:105px; min-width:62px; padding:11px 8px; border:1px solid var(--line-strong); border-radius:10px; background:#0d192b; text-align:center; font-weight:900; overflow:hidden;text-overflow:ellipsis; }
.llm-attention-tokens small { display:block;color:var(--muted);font-size:.55rem;margin-top:5px; }
.llm-layer-stack { position:absolute;right:0;top:0;display:flex;gap:5px; }.llm-layer-stack i{padding:5px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-style:normal;font-size:.52rem}
.llm-probabilities { width:min(100%,690px); display:grid; gap:13px; }
.llm-prob-title { display:flex;justify-content:space-between;align-items:end;margin-bottom:5px}.llm-prob-title small{color:var(--cyan)}
.llm-prob-row { display:grid;grid-template-columns:minmax(80px,140px) 1fr 54px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.024); }
.llm-prob-row > div { height:14px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.llm-prob-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--cyan));animation:llmGrow .7s ease both}.llm-prob-row.is-leading{border-color:rgba(78,232,212,.42);background:rgba(78,232,212,.045)}
.llm-fact-warning { margin-top:12px;padding:12px;border:1px dashed rgba(255,203,112,.32);border-radius:10px;color:var(--amber);text-align:center;font-size:.7rem;font-weight:900;letter-spacing:.07em; }
.llm-sampling { width:min(100%,650px); display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center; }
.llm-sampling-ring { width:210px;height:210px;padding:12px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--cyan) 0 62%,var(--primary) 62% 82%,var(--amber) 82% 93%,#ff7186 93%);box-shadow:0 0 0 18px rgba(78,232,212,.025),0 24px 55px rgba(0,0,0,.35);transform:rotate(calc((var(--temperature) - .4) * 14deg));transition:transform .4s ease}
.llm-sampling-ring > div { width:100%;height:100%;display:grid;place-items:center;align-content:center;border-radius:50%;background:#081321;text-align:center}.llm-sampling-ring small,.llm-sampling-ring span{color:var(--muted)}.llm-sampling-ring b{max-width:150px;margin:7px 0;font-size:1.55rem;overflow-wrap:anywhere}.llm-sampling-controls{display:grid;gap:8px}.llm-sampling-controls span{display:flex;justify-content:space-between;font-size:.75rem}.llm-sampling-controls i{height:9px;border-radius:99px;background:linear-gradient(90deg,var(--primary) var(--v),rgba(255,255,255,.06) var(--v));}.llm-sampling p{grid-column:2;margin:0;font-size:.82rem}
.llm-output-stage { width:min(100%,760px); display:grid;gap:13px; }
.llm-output-head { display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.7rem}.llm-output-head small{margin-left:auto}.llm-live-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:llmPulse 1.2s ease infinite}
.llm-chat-bubble { min-height:190px;padding:22px;border:1px solid rgba(78,232,212,.3);border-radius:22px 22px 22px 5px;background:linear-gradient(145deg,rgba(78,232,212,.075),rgba(124,156,255,.04));font-size:clamp(.92rem,1.7vw,1.1rem);line-height:1.85}.llm-chat-bubble span{animation:llmRise .45s ease both;animation-delay:var(--delay)}.llm-cursor{display:inline-block;width:8px;height:1.1em;margin-left:4px;vertical-align:middle;background:var(--cyan);animation:llmBlink .8s steps(1) infinite}
.llm-repeat-flow { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.56rem;font-weight:950;letter-spacing:.1em}.llm-repeat-flow span{padding:7px 9px;border:1px solid var(--line);border-radius:8px}.llm-repeat-flow b{color:var(--cyan)}
.llm-complete-badge { justify-self:end;padding:8px 12px;border:1px solid rgba(78,232,212,.28);border-radius:999px;color:var(--cyan);font-size:.68rem;font-weight:900; }

.llm-simulator:fullscreen,.llm-simulator.is-sim-fullscreen { width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;background:#050b15; }
.llm-simulator:fullscreen .llm-workspace,.llm-simulator.is-sim-fullscreen .llm-workspace { min-height:calc(100dvh - 390px); }
.llm-simulator:fullscreen .llm-stage,.llm-simulator:fullscreen .llm-stage__visual,.llm-simulator.is-sim-fullscreen .llm-stage,.llm-simulator.is-sim-fullscreen .llm-stage__visual { min-height:max(420px,calc(100dvh - 390px)); }
body.simulator-fullscreen-open { overflow:hidden; }

@keyframes llmRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes llmTokenIn{from{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:none}}
@keyframes llmDraw{from{stroke-dasharray:500;stroke-dashoffset:500}to{stroke-dasharray:500;stroke-dashoffset:0}}
@keyframes llmGrow{from{width:0}}
@keyframes llmPulse{50%{opacity:.35;transform:scale(.82)}}
@keyframes llmBlink{50%{opacity:0}}