@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* 9senses AI History Timeline — standalone plugin */
.ns-aih{
  --ns-aih-ink:#f1f1f1;
  --ns-aih-content:#d6d6d6;
  --ns-aih-link:#58a7f9;
  --ns-aih-muted:rgba(255,255,255,.66);
  --ns-aih-soft:rgba(255,255,255,.10);
  --ns-aih-faint:rgba(255,255,255,.055);
  --ns-aih-surface:rgba(5,12,27,.40);
  --ns-aih-surface-strong:rgba(6,14,31,.68);
  --ns-aih-line:rgba(255,255,255,.16);
  --ns-aih-body:"Open Sans",Arial,sans-serif;
  --ns-aih-tw:"Special Elite","Courier Prime",Georgia,serif;
  position:relative;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 0 4px;
  overflow:visible;
  isolation:isolate;
  color:var(--ns-aih-ink);
  font-family:var(--ns-aih-body);
}
.ns-aih *{box-sizing:border-box}
.ns-aih::before,
.ns-aih::after{display:none}

.ns-aih-theme-light{
  --ns-aih-ink:#122036;
  --ns-aih-muted:rgba(18,32,54,.68);
  --ns-aih-soft:rgba(18,32,54,.10);
  --ns-aih-faint:rgba(18,32,54,.05);
  --ns-aih-surface:rgba(255,255,255,.62);
  --ns-aih-surface-strong:rgba(255,255,255,.9);
  --ns-aih-line:rgba(18,32,54,.18);
}

.ns-aih-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
  white-space:nowrap;
}

/* ------------------------------------------------------------------ */
/* Timeline rail: full-width line with bare dots at blended-time        */
/* positions (42% even / 58% real gaps) and year labels below.          */
/* ------------------------------------------------------------------ */
.ns-aih-strip-wrap{
  width:100%;
  overflow-x:hidden;
  overflow-y:hidden;
  padding:30px 0 0;
  scrollbar-width:none;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}
.ns-aih-rail{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:830px;
  width:100%;
  padding:6px 4px 0;
  transform-origin:0 0;
}
.ns-aih-rail-track{
  position:relative;
  flex:1 1 auto;
  height:44px;
  margin:0 30px 0 14px;
}
.ns-aih-rail-line{
  position:absolute;
  left:0;
  right:0;
  top:13px;
  height:1px;
  background:var(--ns-aih-line);
}
.ns-aih-dot{
  appearance:none;
  position:absolute;
  top:6.5px;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:2px;
  margin:0;
  border:0;
  background:transparent;
  transform:translateX(-50%);
  cursor:pointer;
}
.ns-aih-dot-core{
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),color-mix(in srgb,var(--ns-aih-muted) 70%,transparent) 40%,rgba(10,18,34,.9) 100%);
  box-shadow:inset -1px -1.5px 2px rgba(2,6,16,.6);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.ns-aih-dot:hover .ns-aih-dot-core{
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 65%,var(--ns-aih-muted)) 42%,rgba(10,18,34,.9) 100%);
}
.ns-aih-dot.is-past .ns-aih-dot-core{
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 60%,transparent) 42%,rgba(8,14,28,.9) 100%);
}
.ns-aih-dot.is-active .ns-aih-dot-core{
  width:10px;
  height:10px;
  margin:-.5px 0;
  background:radial-gradient(circle at 32% 28%,#fff 14%,color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 60%,#fff) 42%,color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 90%,#fff) 70%,var(--ns-aih-accent,#58a7f9) 100%);
  box-shadow:inset -1px -1.5px 2px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 45%,rgba(2,6,16,.55)),0 0 10px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 85%,transparent),0 0 22px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 40%,transparent);
  animation:ns-aih-dot-land .5s cubic-bezier(.3,1.4,.4,1);
}
@keyframes ns-aih-dot-land{
  0%{transform:scale(.6)}
  55%{transform:scale(1.25)}
  100%{transform:scale(1)}
}
.ns-aih-dot:focus-visible{
  outline:2px solid var(--ns-aih-accent,#58a7f9);
  outline-offset:3px;
  border-radius:8px;
}
.ns-aih-dot-year{
  position:relative;
  z-index:4;
  color:var(--ns-aih-muted);
  font-family:var(--ns-aih-tw) !important;
  font-size:13px;
  line-height:1;
  letter-spacing:.05em;
  white-space:nowrap;
  text-shadow:0 1px 8px rgba(4,10,22,.9),0 0 3px rgba(4,10,22,.7);
  transition:color .3s ease,text-shadow .3s ease;
}
.ns-aih-dot:hover .ns-aih-dot-year{color:var(--ns-aih-ink)}
.ns-aih-dot.is-past .ns-aih-dot-year{
  color:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 55%,var(--ns-aih-muted));
}
.ns-aih-dot.is-active .ns-aih-dot-year{
  color:var(--ns-aih-accent,#58a7f9);
  text-shadow:0 1px 8px rgba(4,10,22,.9),0 0 10px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 45%,transparent);
}
.ns-aih-theme-light .ns-aih-dot-year{
  text-shadow:0 1px 8px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.85);
}

/* Integrated play/pause: the first token of the stream. */
.ns-aih-playtoken{
  appearance:none;
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:27px;
  margin-top:-1px;
  margin-left:2px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 55%,var(--ns-aih-line));
  border-radius:7px;
  background:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 9%,transparent);
  cursor:pointer;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.ns-aih-playtoken:hover{
  border-color:var(--ns-aih-accent,#58a7f9);
  background:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 16%,transparent);
}
.ns-aih-playtoken:focus-visible{
  outline:2px solid var(--ns-aih-accent,#58a7f9);
  outline-offset:2px;
}
.ns-aih-icon-play{
  display:inline-block;
  width:0;height:0;
  border-left:8px solid var(--ns-aih-accent,#58a7f9);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  margin-left:2px;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 55%,transparent));
}
.ns-aih-icon-pause{
  display:none;
  width:8px;height:10px;
  border-left:3px solid var(--ns-aih-accent,#58a7f9);
  border-right:3px solid var(--ns-aih-accent,#58a7f9);
}
.ns-aih.is-playing .ns-aih-icon-play{display:none}
.ns-aih.is-playing .ns-aih-icon-pause{display:inline-block}
.ns-aih.is-playing .ns-aih-playtoken{
  box-shadow:0 0 10px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 30%,transparent);
}

/* Traveling tokens: rendered on a canvas strip over the rail so the cloud
   has real depth (3D rotation, perspective scale, disperse/regroup). */
.ns-aih-rail-canvas{
  position:absolute;
  z-index:2;
  left:-18px;
  top:-30px;
  width:calc(100% + 68px);
  height:70px;
  pointer-events:none;
}

/* ------------------------------------------------------------------ */
/* Content pane: one horizontal pane below the strip.                  */
/* ------------------------------------------------------------------ */
.ns-aih-pane{
  position:relative;
  min-height:var(--ns-aih-pane-min,215px);
  margin-top:28px;
  overflow:hidden;
}
.ns-aih-slides{
  position:relative;
  height:100%;
  min-height:inherit;
}
.ns-aih-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:400px minmax(0,1fr);
  grid-template-rows:min-content minmax(0,1fr);
  grid-template-areas:
    "scene title"
    "scene body";
  column-gap:clamp(28px,3vw,44px);
  row-gap:4px;
  align-items:start;
  align-content:start;
  box-sizing:border-box;
  padding:0;
  opacity:1 !important;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(100%,0,0);
  transition:none !important;
  will-change:transform;
}
.ns-aih-slide.is-active,
.ns-aih-slide.is-entering,
.ns-aih-slide.is-leaving{
  visibility:visible;
}
.ns-aih-slide.is-active{pointer-events:auto}
.ns-aih-slide.is-entering,
.ns-aih-slide.is-leaving{pointer-events:none}
.ns-aih-slide-scene{
  grid-area:scene;
  align-self:start;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  width:100%;
  min-width:0;
  min-height:0;
}
/* Only target legacy SVGs placed directly in the scene slot. Imported
   History in Motion SVGs retain their original sizing and clipping rules. */
.ns-aih-slide-scene > svg{
  display:block;
  width:100%;
  height:100%;
  max-height:195px;
  overflow:visible;
}
/* Scene animations only run on the active slide. */
.ns-aih-slide:not(.is-active) svg *{
  animation-play-state:paused !important;
}
.ns-aih-slide-title{
  grid-area:title;
  align-self:start;
  margin:0 !important;
  color:var(--ns-aih-content,#d6d6d6) !important;
  font-family:var(--ns-aih-tw) !important;
  font-size:clamp(20px,1.9vw,26px);
  font-weight:400 !important;
  line-height:1.18 !important;
  letter-spacing:.015em;
}
.ns-aih-slide-text{
  grid-area:body;
  align-self:start;
  min-width:0;
  width:100%;
}
.ns-aih-slide-body{
  display:flow-root;
  margin:0;
  max-width:none;
  color:var(--ns-aih-content,#d6d6d6);
  font-family:var(--ns-aih-body) !important;
  font-size:clamp(14.5px,1.12vw,16.5px);
  font-weight:400 !important;
  line-height:1.55;
}
.ns-aih-slide-link-row{
  display:flex;
  justify-content:flex-end;
  margin-top:0;
  color:var(--ns-aih-content,#d6d6d6);
  font-family:var(--ns-aih-body) !important;
  font-size:clamp(14.5px,1.12vw,16.5px);
  font-weight:400 !important;
  line-height:1.55;
}
.ns-aih-slide-link{
  float:none;
  display:inline-flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:6px;
  margin:0;
  color:var(--ns-aih-link,#58a7f9) !important;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:.02em;
  white-space:nowrap;
  vertical-align:baseline;
  text-align:right;
  text-decoration:none !important;
  border:0 !important;
  padding:0;
}
.ns-aih-slide-link:hover,
.ns-aih-slide-link:focus,
.ns-aih-slide-link:active{
  text-decoration:none !important;
  border:0 !important;
}
.ns-aih-slide-link-arrow{transition:transform .25s ease}
.ns-aih-slide-link:hover .ns-aih-slide-link-arrow{transform:translateX(3px)}

/* ------------------------------------------------------------------ */
/* Scene drawing primitives                                            */
/* ------------------------------------------------------------------ */
.ns-aih-sc-panel{
  fill:var(--ns-aih-faint);
  stroke:var(--ns-aih-line);
  stroke-width:1.2;
}
.ns-aih-sc-panel-alt{
  stroke:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 60%,var(--ns-aih-line));
}
.ns-aih-sc-outline{
  fill:none;
  stroke:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 72%,rgba(255,255,255,.26));
  stroke-width:1.6;
}
.ns-aih-sc-line{
  stroke:var(--ns-aih-line);
  stroke-width:1;
}
.ns-aih-sc-dotmut{fill:var(--ns-aih-soft)}
.ns-aih-sc-corner{fill:var(--ns-aih-soft)}

/* 1816 — Olimpia, the automaton */
.ns-aih-sc-oli{
  animation:ns-aih-sway 4.6s ease-in-out infinite;
  transform-origin:150px 162px;
  transform-box:view-box;
}
@keyframes ns-aih-sway{
  0%,100%{transform:rotate(-2.6deg)}
  50%{transform:rotate(2.6deg)}
}
.ns-aih-sc-key{
  fill:none;
  stroke:var(--ns-aih-accent,#58a7f9);
  stroke-width:1.8;
  stroke-linecap:round;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 50%,transparent));
  animation:ns-aih-wind 3.2s steps(8) infinite;
  transform-origin:216px 118px;
  transform-box:view-box;
}
@keyframes ns-aih-wind{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.ns-aih-sc-notes text{
  fill:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 85%,#fff);
  font-size:19px;
  opacity:0;
  animation:ns-aih-notefloat 3.9s ease-out infinite;
}
@keyframes ns-aih-notefloat{
  0%{opacity:0;transform:translateY(8px)}
  14%{opacity:.95}
  68%{opacity:0;transform:translateY(-26px)}
  100%{opacity:0}
}

/* 1950 — imitation game */
.ns-aih-sc-bubble-l,.ns-aih-sc-bubble-r{
  animation:ns-aih-bubblefloat 5s ease-in-out infinite;
}
.ns-aih-sc-bubble-r{animation-delay:1.2s}
@keyframes ns-aih-bubblefloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.ns-aih-sc-typedot{
  fill:var(--ns-aih-muted);
  animation:ns-aih-typedot 1.8s ease infinite;
}
.ns-aih-sc-typedot-alt{fill:var(--ns-aih-accent,#58a7f9)}
@keyframes ns-aih-typedot{
  0%,60%,100%{opacity:.25;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}
.ns-aih-sc-question{
  fill:var(--ns-aih-accent,#58a7f9);
  font-family:var(--ns-aih-tw);
  font-size:34px;
  text-anchor:middle;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 55%,transparent));
  animation:ns-aih-qpulse 2.4s ease-in-out infinite;
}
@keyframes ns-aih-qpulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* 2010s — efforts converging into a network */
.ns-aih-sc-edges line{
  stroke:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 55%,var(--ns-aih-line));
  stroke-width:1.3;
  stroke-dasharray:200;
  stroke-dashoffset:200;
  animation:ns-aih-drawline 6s ease infinite;
}
.ns-aih-sc-edges line:nth-child(2){animation-delay:.25s}
.ns-aih-sc-edges line:nth-child(3){animation-delay:.5s}
.ns-aih-sc-edges line:nth-child(4){animation-delay:.75s}
.ns-aih-sc-edges line:nth-child(5){animation-delay:1s}
.ns-aih-sc-edges line:nth-child(6){animation-delay:1.25s}
.ns-aih-sc-edges line:nth-child(7){animation-delay:1.5s}
.ns-aih-sc-edges line:nth-child(8){animation-delay:1.75s}
@keyframes ns-aih-drawline{
  0%{stroke-dashoffset:200;opacity:.9}
  30%,80%{stroke-dashoffset:0;opacity:.9}
  95%,100%{stroke-dashoffset:0;opacity:0}
}
.ns-aih-sc-nodes circle{
  fill:var(--ns-aih-surface-strong);
  stroke:var(--ns-aih-accent,#58a7f9);
  stroke-width:2;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 45%,transparent));
  animation:ns-aih-nodein 6s ease infinite;
}
@keyframes ns-aih-nodein{
  0%{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box}
  8%,88%{opacity:1;transform:scale(1)}
  97%,100%{opacity:0}
}

/* 1966 / 2020s — terminal / chat lines that type themselves */
.ns-aih-sc-tl{
  fill:var(--ns-aih-soft);
  width:0;
  animation:ns-aih-typeline 6.2s ease infinite;
}
.ns-aih-sc-tl-alt{
  fill:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 45%,var(--ns-aih-soft));
}
@keyframes ns-aih-typeline{
  0%{width:0}
  14%,86%{width:var(--tl,160px)}
  95%,100%{width:0}
}
.ns-aih-sc-cursor{
  fill:var(--ns-aih-accent,#58a7f9);
  animation:ns-aih-blink 1s steps(1) infinite;
}
@keyframes ns-aih-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
.ns-aih-sc-msg-user{
  fill:color-mix(in srgb,var(--ns-aih-secondary,#0c71c3) 40%,var(--ns-aih-soft));
}

/* 1980s — machine learning (backpropagating error) */
.ns-aih-sc-bp-edges line{
  stroke:var(--ns-aih-line);
  stroke-width:1;
}
.ns-aih-sc-bp-nodes circle{
  fill:var(--ns-aih-surface-strong);
  stroke:color-mix(in srgb,var(--ns-aih-secondary,#0c71c3) 75%,var(--ns-aih-line));
  stroke-width:2;
}
.ns-aih-sc-bp-back line{
  stroke:var(--ns-aih-accent,#58a7f9);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:10 190;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 65%,transparent));
  animation:ns-aih-bpback 2.6s linear infinite;
}
.ns-aih-sc-bp-back line:nth-child(2){animation-delay:1.3s}
@keyframes ns-aih-bpback{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-200}
}

/* 1990s — Deep Blue knight tour */
.ns-aih-sc-sq{
  fill:var(--ns-aih-faint);
  stroke:var(--ns-aih-line);
  stroke-width:.7;
}
.ns-aih-sc-sq-dark{fill:var(--ns-aih-soft)}
.ns-aih-sc-sq-glow{
  fill:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 30%,transparent);
  stroke:var(--ns-aih-accent,#58a7f9);
  stroke-width:1.4;
  animation:ns-aih-knightsq 6s steps(1) infinite;
}
.ns-aih-sc-knight{
  fill:var(--ns-aih-ink);
  font-size:30px;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 50%,transparent));
  animation:ns-aih-knight 6s steps(1) infinite;
}
/* L-shaped knight tour over the 4x4 board (square origin 88,28; pitch 36). */
@keyframes ns-aih-knightsq{
  0%{transform:translate(0,0)}
  25%{transform:translate(72px,36px)}
  50%{transform:translate(108px,108px)}
  75%{transform:translate(36px,72px)}
  100%{transform:translate(0,0)}
}
@keyframes ns-aih-knight{
  0%{transform:translate(0,0)}
  25%{transform:translate(72px,36px)}
  50%{transform:translate(108px,108px)}
  75%{transform:translate(36px,72px)}
  100%{transform:translate(0,0)}
}

/* 2000s — pixels resolving into recognition */
.ns-aih-sc-pixel{
  fill:var(--ns-aih-faint);
  animation:ns-aih-px 7s ease infinite;
}
.ns-aih-sc-pixel.is-lit{
  animation:ns-aih-pxlit 7s ease infinite;
}
@keyframes ns-aih-px{
  0%{fill:var(--ns-aih-soft)}
  30%,85%{fill:var(--ns-aih-faint)}
  100%{fill:var(--ns-aih-soft)}
}
@keyframes ns-aih-pxlit{
  0%{fill:var(--ns-aih-soft)}
  35%,85%{fill:color-mix(in srgb,var(--ns-aih-accent,#58a7f9) 78%,transparent)}
  100%{fill:var(--ns-aih-soft)}
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width:880px){
  .ns-aih-slide{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "title"
      "scene"
      "body";
    column-gap:0;
    row-gap:16px;
    align-items:start;
    align-content:start;
    padding:0 0 26px;
    overflow:visible;
  }
  .ns-aih-slide-scene{
    min-height:0;
    max-height:none;
    width:100%;
    align-self:start;
    justify-content:flex-start;
  }
  .ns-aih-slide-scene svg{max-height:none}
  .ns-aih-slide-text{width:100%}
 .ns-aih-slide-body{max-width:none}
}
@media (max-width:520px){
  .ns-aih-slide{padding:0 0 26px;row-gap:16px}
  .ns-aih-token{padding:5px 8px 4px;font-size:12.5px}
  .ns-aih-filler{width:5px;height:5px}
}

/* ------------------------------------------------------------------ */
/* Reduced motion: everything readable, nothing moving                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ns-aih *,
  .ns-aih *::before,
  .ns-aih *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ns-aih-cluster{transition:none}
}

/* ------------------------------------------------------------------
 * Imported AI History Motion 0.7.5 scene styling.
 * ------------------------------------------------------------------ */
.aihm-scene {
  --aihm-height: 260px;
  --aihm-ink: #171514;
  --aihm-border: rgba(36, 29, 24, .18);
  --aihm-accent: #9f3426;
  --aihm-font-body: var(--ns-aih-body, "Open Sans", Arial, sans-serif);
  --aihm-font-display: var(--ns-aih-tw, "Special Elite", "Open Sans", serif);
  width: 100%;
  margin: 0;
  color: var(--aihm-ink);
  font-family: inherit;
}

.aihm-frame {
  position: relative;
  width: 100%;
  height: var(--aihm-height);
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--aihm-border);
  border-radius: 0 !important;
  background: #111;
}

.aihm-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.aihm-action-surface {
  display: block;
  border-radius: 0 !important;
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
}
.aihm-action-surface:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -3px;
}

/* Optional copy is disabled by default so the shortcode can replace an image
   without duplicating or rewriting the page text. */
.aihm-copy {
  padding: 1rem 0 0;
}
.aihm-title {
  margin: 0 0 .55rem !important;
  color: var(--aihm-ink);
  font-family: var(--aihm-font-display);
  font-size: 1.35rem;
  line-height: 1.15;
}
.aihm-description { font-family: var(--aihm-font-body); }
.aihm-description {
  margin: 0 !important;
  color: rgba(23, 21, 20, .78);
  font-size: 1rem;
  line-height: 1.55;
}

/* Automaton ----------------------------------------------------------- */
.aihm-automaton {
  background: #050505;
}
.aihm-automaton-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
}
.aihm-automaton::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 33%, transparent 82%, rgba(0,0,0,.10));
  box-shadow: inset 0 0 42px rgba(0,0,0,.18);
}
.aihm-credit {
  position: absolute;
  z-index: 5;
  right: .55rem;
  bottom: .45rem;
  padding: .24rem .38rem;
  border-radius: 0 !important;
  background: rgba(8, 7, 6, .56);
  color: rgba(255,255,255,.82);
  font-family: var(--aihm-font-body);
  font-size: .57rem;
  line-height: 1.2;
}
.aihm-credit-link { color: rgba(255,255,255,.88); text-decoration: none; }
.aihm-credit-link:hover,
.aihm-credit-link:focus-visible { color: #fff; text-decoration: underline; }

/* ELIZA --------------------------------------------------------------- */
.aihm-eliza-preview {
  background: #d5c9ad;
  background-image:
    radial-gradient(rgba(44,35,24,.055) .6px, transparent .7px),
    linear-gradient(115deg, rgba(255,255,255,.22), transparent 55%);
  background-size: 5px 5px, auto;
}

.aihm-eliza-paper {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  padding: 16px 18px 16px 54px;
  border: 1px solid #c9c2ad;
  border-radius: 0 !important;
  background-color: #f6f2e7;
  background-image:
    radial-gradient(circle 4px at 22px 12px,
      #28251d 0 2.6px,
      rgba(60, 54, 38, .34) 2.6px 3.6px,
      transparent 4px),
    repeating-linear-gradient(to bottom,
      rgba(120, 110, 80, .44) 0 5px,
      transparent 5px 11px),
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 23px,
      rgba(120, 110, 80, .07) 23px,
      rgba(120, 110, 80, .07) 24px);
  background-size: 100% 24px, 1px 11px, 100% 24px;
  background-position: 0 0, 42px 0, 0 0;
  background-repeat: repeat, repeat-y, repeat;
  color: #17140e;
  box-shadow: 0 10px 24px rgba(45,34,20,.15), inset 0 0 22px rgba(101,73,36,.06);
  font-family: var(--aihm-font-display);
  font-size: clamp(.72rem, 1.45vw, .84rem);
  line-height: 1.34;
}
.aihm-eliza-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42px;
  width: 1px;
  background: rgba(120, 110, 80, .28);
  pointer-events: none;
}
.aihm-eliza-log p {
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.34 !important;
}
.aihm-eliza-log .aihm-user-line { color: #3a3528; }
.aihm-eliza-cursor {
  display: inline-block;
  animation: aihm-blink .85s steps(1) infinite;
}
@keyframes aihm-blink { 50% { opacity: 0; } }

.aihm-button {
  position: absolute;
  z-index: 9;
  right: .65rem;
  bottom: .65rem;
  margin: 0;
  padding: .58rem .82rem;
  border: 1px solid rgba(22,18,14,.42);
  border-radius: 0 !important;
  background: rgba(255,255,255,.88);
  color: #211b16;
  font: inherit;
  font-family: var(--aihm-font-display);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
  transition: transform .18s ease, background .18s ease;
}
.aihm-button:hover { transform: translateY(-1px); background: #fff; }
.aihm-button:focus-visible { outline: 3px solid rgba(159,52,38,.42); outline-offset: 3px; }

/* Deep Blue -----------------------------------------------------------
 * Formatting, typography and palette copied from Deep Blue Chess Popup
 * 1.5.0. Only the geometry is compacted to fit the 400 x 260 timeline scene. */
.aihm-deepblue-preview {
  --dbct-void: #050a06;
  --dbct-panel: #0b1a10;
  --dbct-panel2: #0e2013;
  --dbct-phos: #38ff7c;
  --dbct-phos-dim: #8fe8ae;
  --dbct-phos-faint: #2c5e3c;
  --dbct-amber: #ffb000;
  --dbct-bezel: #161916;
  --dbct-bezel-edge: #2a2e2a;
  --dbct-sq-light: #16321f;
  --dbct-sq-dark: #0b2112;
  padding: 8px;
  background: var(--dbct-bezel);
  color: var(--dbct-phos);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  box-sizing: border-box;
}
.aihm-deepblue-preview *,
.aihm-deepblue-preview *::before,
.aihm-deepblue-preview *::after { box-sizing: border-box; }
.aihm-db-console {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 11px 12px 10px;
  border: 0;
  border-radius: 8px !important;
  background: var(--dbct-void);
  box-shadow: inset 0 0 60px rgba(20,255,110,.06), inset 0 0 8px rgba(0,0,0,.9);
  font-family: inherit;
}
.aihm-db-console::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .aihm-db-console::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 70px;
    top: -70px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(56,255,124,.05), transparent);
    animation: aihm-dbct-sweep 7s linear infinite;
  }
  @keyframes aihm-dbct-sweep { to { top: 110%; } }
}
.aihm-db-head.dbct-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-height: 39px;
  margin: 0 0 9px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--dbct-phos-faint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.aihm-deepblue-preview .dbct-bars {
  display: flex;
  flex: 0 0 28px;
  width: 28px;
  flex-direction: column;
  gap: 2px;
}
.aihm-deepblue-preview .dbct-bars i {
  display: block;
  height: 3px;
  background: var(--dbct-phos);
  opacity: .9;
}
.aihm-deepblue-preview .dbct-bars i:nth-child(odd) { opacity: .55; }
.aihm-deepblue-preview .dbct-title {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--dbct-phos);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}
.aihm-deepblue-preview .dbct-title small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--dbct-phos-dim);
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aihm-deepblue-preview .dbct-hright {
  flex: 0 0 auto;
  color: var(--dbct-phos-dim);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1.55;
  text-align: right;
  white-space: nowrap;
}
.aihm-deepblue-preview .dbct-hright b {
  color: var(--dbct-amber);
  font-weight: 500;
}
.aihm-db-layout {
  position: relative;
  z-index: 1;
  display: grid;
  height: calc(100% - 48px);
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(112px, .62fr);
  gap: 14px;
  padding: 0 0 34px;
}
.aihm-db-board {
  display: grid;
  width: min(100%, 174px);
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  align-self: start;
  justify-self: center;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1 / 1;
  border: 1px solid var(--dbct-phos-faint);
  box-shadow: 0 0 24px rgba(56,255,124,.08);
  user-select: none;
}
.aihm-db-square {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dbct-sq-dark);
  font-family: "Arial Unicode MS", "Segoe UI Symbol", sans-serif;
  font-size: clamp(15px, 4.4vw, 24px);
  line-height: 1;
}
.aihm-db-square:nth-child(16n+1), .aihm-db-square:nth-child(16n+3), .aihm-db-square:nth-child(16n+5), .aihm-db-square:nth-child(16n+7),
.aihm-db-square:nth-child(16n+10), .aihm-db-square:nth-child(16n+12), .aihm-db-square:nth-child(16n+14), .aihm-db-square:nth-child(16n+16) {
  background: var(--dbct-sq-light);
}
.aihm-db-square.is-white {
  color: #eafff0;
  filter: drop-shadow(0 0 4px rgba(56,255,124,.35));
}
.aihm-db-square.is-black {
  color: #34c463;
  filter: drop-shadow(0 0 4px rgba(56,255,124,.35));
}
.aihm-db-square.is-from,
.aihm-db-square.is-to {
  box-shadow: inset 0 0 0 2px rgba(143,232,174,.35);
}
.aihm-db-square.is-to::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 2px solid rgba(255,176,0,.6);
  border-radius: 4px;
}
.aihm-db-telemetry {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--dbct-phos-faint);
  background: var(--dbct-panel);
  color: var(--dbct-phos-dim);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .12em;
}
.aihm-db-telemetry div {
  min-width: 0;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--dbct-phos-faint);
}
.aihm-db-telemetry div:last-child { border-bottom: 0; }
.aihm-db-telemetry b {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--dbct-phos);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aihm-db-controls.dbct-controls {
  position: absolute;
  z-index: 5;
  right: 12px;
  bottom: 10px;
  display: flex;
  gap: 10px;
  margin: 0;
}
.aihm-deepblue-preview .aihm-db-controls button {
  all: unset;
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 8px 10px;
  border: 1px solid var(--dbct-phos-faint);
  border-radius: 0;
  background: var(--dbct-panel2);
  color: var(--dbct-phos);
  box-shadow: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: none;
  cursor: pointer;
}
.aihm-deepblue-preview .aihm-db-controls button:hover {
  background: #143020;
  border-color: var(--dbct-phos-dim);
}
.aihm-deepblue-preview .aihm-db-controls button:focus-visible {
  outline: 2px solid var(--dbct-amber);
  outline-offset: 2px;
}
.aihm-deepblue-preview .aihm-db-controls button:active { transform: translateY(1px); }

/* The native popup retains its own palette. These rules only prevent empty
 * chess squares from collapsing under aggressive WordPress theme CSS. */
.dbct-board {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
}
.dbct-board > .dbct-sq {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.aihm-error { padding: .75rem; border-left: 3px solid #b42318; background: #fff0ee; }

@media (max-width: 520px) {
  .aihm-frame { min-height: 190px; }
  .aihm-eliza-paper { padding-right: 12px; font-size: .68rem; }
  .aihm-db-layout { grid-template-columns: minmax(0, 1fr) 82px; gap: .45rem; padding-right: .45rem; padding-left: .45rem; }
  .aihm-db-telemetry { font-size: .52rem; }
  .aihm-db-telemetry b { font-size: .61rem; }
  .aihm-credit { font-size: .5rem; }
}

@media (max-width: 420px) {
  .aihm-deepblue-preview .dbct-hright { display: none; }
}


.aihm-scene[data-aihm-scene="vision"][data-autoplay="0"] .aihm-vision-layer--final { clip-path: inset(0 0 0 0); }
.aihm-scene[data-aihm-scene="vision"][data-autoplay="0"] .aihm-vision-scanline { opacity: 0; }
.aihm-scene[data-aihm-scene="vision"][data-autoplay="0"] .aihm-vision-tag-wrap { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aihm-vision-layer--final { clip-path: inset(0 0 0 0) !important; }
  .aihm-vision-scanline { opacity: 0 !important; }
  .aihm-vision-tag-wrap { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .aihm-scene *, .aihm-scene *::before, .aihm-scene *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


.aihm-hitarea {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.aihm-hitarea .aihm-button {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
}
.aihm-credit { border-radius: 0 !important; }

/* v0.2.3: preserve rounded corners against theme overrides. */
.aihm-scene,
.aihm-frame,
.aihm-visual,
.aihm-action-surface {
  border-radius: 0 !important;
}
.aihm-action-surface .aihm-button {
  pointer-events: none;
}

/* v0.2.4: tighter automaton source crop; no CSS zoom required. */

/* Vector history scenes -------------------------------------------------
   Built in the same visual family as the site's vector map: dark field,
   depth-scaled luminous nodes, restrained atmospheric points and one clearly
   legible traveling signal. */
.aihm-vector-scene {
  background:
    radial-gradient(circle at 50% 43%, rgba(34, 88, 130, .16), transparent 48%),
    #02091b;
}
.aihm-vector-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.aihm-vector-caption,
.aihm-terminal-title,
.aihm-terminal-letter,
.aihm-turing-choice,
.aihm-ml-error-value,
.aihm-ml-backprop-label {
  font-family: var(--aihm-font-display);
}
.aihm-vector-caption {
  fill: rgba(196, 222, 239, .62);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.aihm-vector-star {
  opacity: .34;
  transform-origin: center;
  animation: aihm-vector-twinkle 4.8s ease-in-out infinite paused;
}
.aihm-vector-star--2 { animation-delay: -1.4s; animation-duration: 5.8s; }
.aihm-vector-star--3 { animation-delay: -2.6s; animation-duration: 4.2s; }
.aihm-vector-star--4 { animation-delay: -.7s; animation-duration: 6.2s; }
.aihm-vector-star--5 { animation-delay: -3.4s; animation-duration: 5.1s; }
.aihm-vector-scene.is-playing .aihm-vector-star,
.aihm-scene.is-playing .aihm-vector-star { animation-play-state: running; }
@keyframes aihm-vector-twinkle {
  0%, 100% { opacity: .22; transform: scale(.84); }
  50% { opacity: .54; transform: scale(1.14); }
}
.aihm-vector-route {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.aihm-vector-route--query {
  stroke: rgba(120, 191, 255, .26);
  stroke-dasharray: 2 7;
}
.aihm-vector-route--return {
  stroke: rgba(112, 174, 236, .19);
  stroke-dasharray: 1 8;
}
.aihm-vector-token { opacity: 0; }
.aihm-scene.is-playing .aihm-vector-token { opacity: 1; }

/* Turing / imitation game -------------------------------------------- */
.aihm-turing-screenline {
  stroke: rgba(179, 211, 231, .23);
  stroke-width: 1;
  stroke-dasharray: 5 8;
}
.aihm-turing-screen-label-bg {
  fill: #071329;
  stroke: rgba(179, 211, 231, .18);
  stroke-width: 1;
}
.aihm-terminal-outline {
  fill: none;
  stroke: rgba(151, 192, 235, .32);
  stroke-width: 1.25;
}
.aihm-turing-terminal--b .aihm-terminal-outline {
  stroke: rgba(125, 184, 239, .32);
}
.aihm-terminal-title {
  fill: rgba(214, 229, 245, .82);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.25px;
}
.aihm-terminal-title--judge { fill: rgba(214, 231, 245, .82); }
.aihm-terminal-letter {
  fill: #04111f;
  font-size: 14px;
  font-weight: 900;
}
.aihm-terminal-rule {
  stroke: rgba(183, 211, 240, .30);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke .45s ease, opacity .45s ease;
}
.aihm-turing-terminal--b .aihm-terminal-rule { stroke: rgba(171, 205, 238, .28); }
.aihm-terminal-rule--short { opacity: .63; }
.aihm-terminal-rule--reply { opacity: .30; }
.aihm-turing-choice {
  fill: rgba(206, 227, 242, .58);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  transition: fill .5s ease, filter .5s ease;
}
.aihm-scene.aihm-phase-2 .aihm-turing-choice {
  fill: #dff8ff;
  filter: drop-shadow(0 0 7px rgba(108, 196, 255, .68));
}
.aihm-scene.aihm-phase-1 .aihm-terminal-rule--reply {
  opacity: 1;
  stroke: rgba(211, 242, 255, .72);
}

/* 1980s backpropagation ---------------------------------------------- */
.aihm-ml-panel-bg {
  fill: rgba(7, 20, 42, .82);
  stroke: rgba(130, 196, 220, .22);
  stroke-width: 1;
}
.aihm-ml-boundary {
  stroke: rgba(215, 239, 250, .46);
  stroke-width: 1.3;
  stroke-dasharray: 4 5;
}
.aihm-ml-sample-ring {
  fill: none;
  stroke: rgba(215, 235, 255, .76);
  stroke-width: 1.4;
  opacity: .5;
  transform-origin: 113px 190px;
  animation: aihm-sample-ring 2.2s ease-in-out infinite paused;
}
.aihm-scene.is-playing .aihm-ml-sample-ring { animation-play-state: running; }
@keyframes aihm-sample-ring {
  0%, 100% { opacity: .25; transform: scale(.82); }
  50% { opacity: .88; transform: scale(1.18); }
}
.aihm-ml-edge {
  fill: none;
  stroke: rgba(116, 177, 215, .20);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transition: stroke .55s ease, stroke-width .55s ease, opacity .55s ease;
}
.aihm-ml-edge--a { stroke-width: 1.8; stroke: rgba(112, 185, 255, .34); }
.aihm-ml-edge--b { stroke-width: 1.5; stroke: rgba(100, 191, 222, .31); }
.aihm-ml-edge--c { stroke-width: 1.25; stroke: rgba(112, 185, 255, .27); }
.aihm-scene.aihm-phase-0 .aihm-ml-edge--a,
.aihm-scene.aihm-phase-0 .aihm-ml-edge--b,
.aihm-scene.aihm-phase-0 .aihm-ml-edge--c,
.aihm-scene.aihm-phase-1 .aihm-ml-edge--a,
.aihm-scene.aihm-phase-1 .aihm-ml-edge--b {
  stroke: rgba(174, 216, 255, .68);
  opacity: 1;
}
.aihm-scene.aihm-phase-2 .aihm-ml-edge {
  stroke: rgba(232, 133, 108, .46);
}
.aihm-scene.aihm-phase-3 .aihm-ml-edge--a {
  stroke-width: 2.35;
  stroke: rgba(142, 201, 255, .58);
}
.aihm-scene.aihm-phase-3 .aihm-ml-edge--b { stroke-width: 1.9; }
.aihm-scene.aihm-phase-3 .aihm-ml-edge--c { stroke-width: 1.55; }
.aihm-ml-error-value {
  fill: #ffd4c8;
  font-size: 28px;
  font-weight: 700;
  transition: fill .4s ease, filter .4s ease;
}
.aihm-scene.aihm-phase-3 .aihm-ml-error-value {
  fill: #d6ebff;
  filter: drop-shadow(0 0 6px rgba(111, 184, 255, .48));
}
.aihm-ml-backprop-label {
  fill: rgba(232, 133, 108, 0);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.05px;
  transition: fill .5s ease;
}
.aihm-scene.aihm-phase-2 .aihm-ml-backprop-label { fill: rgba(255, 180, 158, .72); }

/* Legibility at timeline-card size. These overrides are deliberately larger
   than the shared vector labels because the network diagram is information-
   dense and is commonly rendered below the SVG's authored 640px width. */
.aihm-ml-preview .aihm-ml-heading {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .55px;
}
.aihm-ml-preview .aihm-ml-metric-label {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .35px;
}
.aihm-ml-preview .aihm-ml-error-value { font-size: 42px; }
.aihm-ml-preview .aihm-ml-backprop-label {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* 2000s computer vision ---------------------------------------------- */
.aihm-vision-real {
  background: #b9d9fb;
}
.aihm-vision-photo,
.aihm-vision-layer,
.aihm-vision-grid,
.aihm-vision-tag-wrap {
  position: absolute;
  inset: 0;
}
.aihm-vision-photo {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.aihm-vision-layer {
  clip-path: inset(0 100% 0 0);
}
.aihm-vision-photo--pixel { image-rendering: pixelated; }
.aihm-vision-grid {
  opacity: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px;
  mix-blend-mode: screen;
}
.aihm-vision-scanline {
  position: absolute; top: 0; bottom: 0; left: 0; width: 4px; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(245,255,251,.98), rgba(255,255,255,0));
  box-shadow: 0 0 0 1px rgba(214,235,255,.82), 0 0 14px rgba(214,235,255,.86), 0 0 28px rgba(214,235,255,.48);
}
.aihm-vision-scanline--invert { animation: aihm-vision-scan-invert 16s cubic-bezier(.42,0,.58,1) infinite paused; }
.aihm-vision-scanline--pixel { animation: aihm-vision-scan-pixel 16s cubic-bezier(.42,0,.58,1) infinite paused; }
.aihm-vision-scanline--final { animation: aihm-vision-scan-final 16s cubic-bezier(.42,0,.58,1) infinite paused; }
.aihm-vision-layer--invert { animation: aihm-vision-layer-invert 16s cubic-bezier(.42,0,.58,1) infinite paused; }
.aihm-vision-layer--pixel { animation: aihm-vision-layer-pixel 16s cubic-bezier(.42,0,.58,1) infinite paused; }
.aihm-vision-layer--final { animation: aihm-vision-layer-final 16s cubic-bezier(.42,0,.58,1) infinite paused; }
.aihm-vision-grid { animation: aihm-vision-grid 16s ease-in-out infinite paused; }
.aihm-vision-tag-wrap { opacity: 1; pointer-events: none; }
.aihm-vision-tag-box {
  position: absolute;
  left: 188px;
  top: 26px;
  min-width: 118px;
  padding: 7px 12px 4px;
  background: rgba(8,20,40,.94);
  border: 2px solid rgb(34, 90, 235);
  color: #f5f8ff;
  font-family: var(--aihm-font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  text-transform: none;
}
.aihm-vision-tag-wrap::after {
  content: '';
  position: absolute;
  left: 247px;
  top: 60px;
  width: 2px;
  height: 92px;
  background: rgb(34, 90, 235);
}
.aihm-scene.is-playing .aihm-vision-layer,
.aihm-scene.is-playing .aihm-vision-scanline,
.aihm-scene.is-playing .aihm-vision-grid { animation-play-state: running; }
@keyframes aihm-vision-layer-invert {
  0%, 8% { clip-path: inset(0 100% 0 0); }
  28%, 34% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes aihm-vision-layer-pixel {
  0%, 34% { clip-path: inset(0 100% 0 0); }
  54%, 60% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes aihm-vision-layer-final {
  0%, 58% { clip-path: inset(0 100% 0 0); }
  76%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes aihm-vision-grid {
  0%, 10% { opacity: 0; }
  14%, 56% { opacity: .18; }
  64%, 100% { opacity: 0; }
}
@keyframes aihm-vision-scan-invert {
  0%, 8% { opacity: 0; left: 0%; }
  10% { opacity: .95; }
  28% { opacity: .95; left: calc(100% - 4px); }
  32%, 100% { opacity: 0; left: calc(100% - 4px); }
}
@keyframes aihm-vision-scan-pixel {
  0%, 34% { opacity: 0; left: 0%; }
  36% { opacity: .95; }
  54% { opacity: .95; left: calc(100% - 4px); }
  58%, 100% { opacity: 0; left: calc(100% - 4px); }
}
@keyframes aihm-vision-scan-final {
  0%, 58% { opacity: 0; left: 0%; }
  60% { opacity: .95; }
  76% { opacity: .95; left: calc(100% - 4px); }
  80%, 100% { opacity: 0; left: calc(100% - 4px); }
}
@media (max-width: 520px) {
  .aihm-vector-caption { font-size: 11px; }
  .aihm-terminal-title { font-size: 12px; }
  .aihm-turing-choice { font-size: 20px; }
  .aihm-ml-preview .aihm-ml-heading { font-size: 20px; }
  .aihm-ml-preview .aihm-ml-metric-label { font-size: 18px; }
  .aihm-ml-preview .aihm-ml-error-value { font-size: 34px; }
  .aihm-ml-preview .aihm-ml-backprop-label { font-size: 16px; }
  .aihm-vision-tag-box { left: 164px; top: 26px; min-width: 104px; font-size: 17px; padding: 6px 10px 4px; }
  .aihm-vision-tag-wrap::after { left: 216px; top: 56px; height: 88px; }
}

/* 2010s deep learning -------------------------------------------------
   Compact adaptation of the 9Senses Machine Learning Explainer stage. */
.aihm-dl-preview {
  background: #020817;
  color: #f3fbff;
  font-family: var(--aihm-font-body);
}
.aihm-dl-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}
.aihm-dl-core,
.aihm-dl-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(4,10,27,.70);
  color: rgba(239,249,255,.76);
  font-family: var(--aihm-font-display);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0,0,0,.8);
  transition: color .7s ease, border-color .7s ease, box-shadow .7s ease, opacity .7s ease;
}
.aihm-dl-core {
  left: 50%;
  top: 43%;
  width: 96px;
  height: 96px;
  transform: translate(-50%,-50%);
  clip-path: circle(50% at 50% 50%);
  background: rgba(3,10,27,.42);
  font-size: 18px;
}
.aihm-dl-core::before,
.aihm-dl-core::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(255,255,255,.16);
  clip-path: circle(50% at 50% 50%);
  animation: aihm-dl-spin 24s linear infinite paused;
}
.aihm-dl-core::after {
  inset: 18px;
  animation-direction: reverse;
  animation-duration: 34s;
}
.aihm-scene.is-playing .aihm-dl-core::before,
.aihm-scene.is-playing .aihm-dl-core::after { animation-play-state: running; }
@keyframes aihm-dl-spin { to { transform: rotate(360deg); } }
.aihm-dl-node {
  min-width: 76px;
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
}
.aihm-dl-node--data { left: 5%; top: 12%; }
.aihm-dl-node--vectors { left: 12%; bottom: 17%; }
.aihm-dl-node--output { right: 5%; top: 14%; }
.aihm-dl-node--check { right: 12%; bottom: 17%; }
.aihm-dl-node--feedback { left: 42%; bottom: 5%; }
.aihm-dl-node.is-active,
.aihm-dl-core.is-active {
  color: #ffffff;
  border-color: rgba(142,197,255,.86);
  box-shadow: 0 0 16px rgba(88,167,249,.34), inset 0 0 18px rgba(88,167,249,.08);
}
@media (max-width:520px) {
  .aihm-dl-core { width: 82px; height: 82px; font-size: 16px; }
  .aihm-dl-node { min-width: 66px; height: 28px; padding: 0 6px; font-size: 11px; }
  .aihm-dl-node--feedback { left: 38%; }
}


/* 2020s language / NLP ------------------------------------------------
   Compact adaptation of the execution view in the 9Senses NLP explainer. */
.aihm-nlp-preview {
  background:
    radial-gradient(circle at 50% 42%, rgba(12,113,195,.16), transparent 40%),
    #030816;
  color: #f6fff9;
  overflow: hidden;
}
.aihm-nlp-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  pointer-events: none;
}
.aihm-nlp-node,
.aihm-nlp-core {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 0 !important;
  background: rgba(4,10,27,.62);
  color: rgba(239,249,255,.72);
  font-family: var(--aihm-font-display);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0,0,0,.8);
  transition: color .75s ease, border-color .75s ease, box-shadow .75s ease, opacity .75s ease;
}
.aihm-nlp-node {
  min-width: 78px;
  height: 31px;
  padding: 0 8px;
  font-size: 13px;
}
.aihm-nlp-node--input { left: 5%; top: 10%; }
.aihm-nlp-node--tokens { left: 10%; top: 49%; }
.aihm-nlp-node--vectors { left: 33%; bottom: 10%; }
.aihm-nlp-node--output { right: 5%; top: 12%; }
.aihm-nlp-node--check { right: 13%; bottom: 12%; }
.aihm-nlp-core {
  left: 51%;
  top: 42%;
  width: 102px;
  height: 102px;
  transform: translate(-50%,-50%);
  clip-path: circle(50% at 50% 50%);
  background: rgba(3,10,27,.34);
  font-size: 16px;
  letter-spacing: .055em;
}
.aihm-nlp-core::before,
.aihm-nlp-core::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(255,255,255,.16);
  clip-path: circle(50% at 50% 50%);
  animation: aihm-nlp-spin 25s linear infinite paused;
}
.aihm-nlp-core::after {
  inset: 19px;
  animation-direction: reverse;
  animation-duration: 39s;
}
.aihm-scene.is-playing .aihm-nlp-core::before,
.aihm-scene.is-playing .aihm-nlp-core::after { animation-play-state: running; }
@keyframes aihm-nlp-spin { to { transform: rotate(360deg); } }
.aihm-nlp-node.is-active,
.aihm-nlp-core.is-active {
  color: #fff;
  border-color: rgba(142,197,255,.88);
  box-shadow: 0 0 18px rgba(88,167,249,.35), inset 0 0 18px rgba(88,167,249,.08);
}
.aihm-nlp-tokenline,
.aihm-nlp-outputline {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 5px;
  font-family: var(--aihm-font-display);
  opacity: .24;
  transition: opacity .8s ease, filter .8s ease;
}
.aihm-nlp-tokenline { left: 5%; top: 28%; }
.aihm-nlp-outputline { right: 4%; top: 33%; }
.aihm-nlp-tokenline span,
.aihm-nlp-outputline span {
  display: inline-grid;
  min-width: 27px;
  height: 26px;
  padding: 0 6px;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 0 !important;
  background: rgba(4,8,18,.22);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.aihm-nlp-preview.is-step-0 .aihm-nlp-tokenline,
.aihm-nlp-preview.is-step-1 .aihm-nlp-tokenline,
.aihm-nlp-preview.is-step-2 .aihm-nlp-tokenline,
.aihm-nlp-preview.is-step-3 .aihm-nlp-tokenline { opacity: 1; filter: brightness(1.12); }
.aihm-nlp-preview.is-step-4 .aihm-nlp-outputline,
.aihm-nlp-preview.is-step-5 .aihm-nlp-outputline { opacity: 1; filter: brightness(1.14); }
.aihm-nlp-warning {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.62);
  font-family: var(--aihm-font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .8s ease;
}
.aihm-nlp-warning b { color: rgba(255,216,120,.96); font-size: 15px; }
.aihm-nlp-warning.is-active { opacity: 1; }
@media (max-width:520px) {
  .aihm-nlp-core { width: 88px; height: 88px; font-size: 14px; }
  .aihm-nlp-node { min-width: 66px; height: 28px; padding: 0 6px; font-size: 11px; }
  .aihm-nlp-tokenline span,
  .aihm-nlp-outputline span { min-width: 23px; height: 24px; padding: 0 4px; font-size: 10px; }
  .aihm-nlp-outputline { right: 2%; }
  .aihm-nlp-warning { font-size: 10px; }
}

/* v0.7.5 — shared text architecture ------------------------------------
   Deep Blue is intentionally excluded and retains its pre-cleanup styling.
   SVG labels use larger authored sizes because the 640px viewBox scales down
   inside a timeline card. HTML labels use equivalent on-screen sizes. */
.aihm-turing-preview,
.aihm-ml-preview,
.aihm-dl-preview,
.aihm-nlp-preview,
.aihm-vision-real {
  --aihm-motion-display: var(--ns-aih-tw, "Special Elite", "Courier Prime", Georgia, serif);
  --aihm-motion-body: var(--ns-aih-body, "Open Sans", Arial, sans-serif);
  font-synthesis: none;
}

/* SVG stage labels: ~15px rendered at a 400px card width. */
.aihm-turing-preview .aihm-vector-caption,
.aihm-turing-preview .aihm-terminal-title,
.aihm-ml-preview .aihm-ml-heading,
.aihm-ml-preview .aihm-ml-metric-label,
.aihm-ml-preview .aihm-ml-backprop-label {
  font-family: var(--aihm-motion-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: .03em !important;
}
.aihm-turing-preview .aihm-vector-caption { font-size: 20px !important; }
.aihm-turing-preview .aihm-terminal-title { font-size: 24px !important; }
.aihm-turing-preview .aihm-terminal-letter {
  font-family: var(--aihm-motion-display) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
}
.aihm-turing-preview .aihm-turing-choice {
  font-family: var(--aihm-motion-display) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: .05em !important;
}

.aihm-ml-preview .aihm-ml-heading { font-size: 24px !important; }
.aihm-ml-preview .aihm-ml-metric-label { font-size: 22px !important; }
.aihm-ml-preview .aihm-ml-backprop-label { font-size: 20px !important; }
.aihm-ml-preview .aihm-ml-error-value {
  font-family: var(--aihm-motion-body) !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* HTML stage labels: equivalent 15–18px on-screen hierarchy. */
.aihm-dl-node,
.aihm-dl-core,
.aihm-nlp-node,
.aihm-nlp-core,
.aihm-nlp-tokenline span,
.aihm-nlp-outputline span,
.aihm-nlp-warning,
.aihm-vision-tag-box {
  font-family: var(--aihm-motion-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: .03em !important;
}
.aihm-dl-node,
.aihm-nlp-node { font-size: 15px !important; }
.aihm-dl-core,
.aihm-nlp-core { font-size: 18px !important; }
.aihm-nlp-tokenline span,
.aihm-nlp-outputline span,
.aihm-nlp-warning { font-size: 13px !important; }
.aihm-nlp-warning b {
  font-family: var(--aihm-motion-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
.aihm-vision-tag-box {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Supporting copy and values remain regular Open Sans. */
.aihm-description,
.aihm-credit {
  font-family: var(--aihm-motion-body, "Open Sans", Arial, sans-serif) !important;
  font-weight: 400 !important;
}

@media (max-width: 520px) {
  .aihm-turing-preview .aihm-vector-caption { font-size: 18px !important; }
  .aihm-turing-preview .aihm-terminal-title { font-size: 21px !important; }
  .aihm-turing-preview .aihm-turing-choice { font-size: 27px !important; }
  .aihm-ml-preview .aihm-ml-heading { font-size: 22px !important; }
  .aihm-ml-preview .aihm-ml-metric-label { font-size: 20px !important; }
  .aihm-ml-preview .aihm-ml-error-value { font-size: 36px !important; }
  .aihm-ml-preview .aihm-ml-backprop-label { font-size: 18px !important; }
  .aihm-dl-node,
  .aihm-nlp-node { font-size: 13px !important; }
  .aihm-dl-core,
  .aihm-nlp-core { font-size: 16px !important; }
  .aihm-nlp-tokenline span,
  .aihm-nlp-outputline span,
  .aihm-nlp-warning { font-size: 11px !important; }
  .aihm-vision-tag-box { font-size: 16px !important; }
}

/* Timeline integration: fixed illustration footprint without altering the
   original History in Motion artwork, crop, SVG viewBox or internal layout. */
.ns-aih-slide-scene .aihm-scene{
  width:400px;
  max-width:100%;
  flex:0 0 auto;
  --aihm-height:260px !important;
}
.ns-aih-slide-scene .aihm-frame{
  width:100%;
  height:auto;
  min-height:0;
  max-height:260px;
  aspect-ratio:20 / 13;
}
.ns-aih-slide-scene .aihm-vector-svg{
  width:100%;
  height:100%;
  max-height:none;
  overflow:hidden;
}
@media (max-width:520px){
  .ns-aih-slide-scene{min-height:0}
}