:root {
  /* Interface labels: IBM Plex Sans JP** compact HUD captions */
  --parchment: #F6E8C8;
  --honey: #D99A2B;
  --cream: #FFF4D6;
  --umber: #2A2118;
  --caramel: #9B6A32;
  --mint: #8EF0C1;
  --lilac: #B9A0FF;
  --glass: #14120F;
  --display: "Instrument Serif", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --interface: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
  --compliance-jp-token: "JP*";
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--parchment);
  color: var(--umber);
}

button,
body { font-family: var(--body); }

.prototype-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(142,240,193,.45), transparent 34%),
    radial-gradient(circle at 28% 8%, rgba(185,160,255,.30), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(217,154,43,.25), transparent 42%),
    linear-gradient(135deg, #FFF4D6 0%, #F6E8C8 48%, #efd49d 100%);
}

.aurora-field {
  position: fixed;
  inset: -20%;
  background:
    linear-gradient(105deg, transparent 11%, rgba(142,240,193,.20) 22%, transparent 34%),
    linear-gradient(72deg, transparent 31%, rgba(185,160,255,.22) 46%, transparent 58%),
    linear-gradient(155deg, transparent 46%, rgba(217,154,43,.18) 60%, transparent 72%);
  filter: blur(14px) saturate(110%);
  animation: auroraDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
}

.grain-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(42,33,24,.20) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 24%, rgba(155,106,50,.16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 82%, rgba(42,33,24,.14) 0 1px, transparent 1.7px),
    repeating-radial-gradient(circle at 50% 50%, rgba(20,18,15,.035) 0 1px, transparent 1px 4px);
  background-size: 31px 29px, 43px 37px, 53px 47px, 7px 7px;
  animation: grainShift .9s steps(2) infinite;
}

.pinhole-field span {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 18px rgba(142,240,193,.95), 0 0 3px var(--honey);
  animation: pinBreath 5s ease-in-out infinite;
}

.pinhole-field span:nth-child(1) { top: 14%; left: 19%; animation-delay: -.5s; }
.pinhole-field span:nth-child(2) { top: 27%; right: 13%; animation-delay: -2s; }
.pinhole-field span:nth-child(3) { top: 62%; left: 11%; animation-delay: -1s; }
.pinhole-field span:nth-child(4) { top: 77%; right: 18%; animation-delay: -3s; }
.pinhole-field span:nth-child(5) { top: 45%; right: 42%; animation-delay: -4s; }
.pinhole-field span:nth-child(6) { top: 8%; right: 36%; animation-delay: -2.8s; }

.viewport-shell {
  position: absolute;
  inset: clamp(14px, 2.4vw, 34px);
  border: 1px solid rgba(155,106,50,.48);
  box-shadow: inset 0 0 0 1px rgba(255,244,214,.55), inset 0 0 80px rgba(217,154,43,.12);
  background: linear-gradient(120deg, rgba(255,244,214,.25), rgba(217,154,43,.08) 52%, rgba(142,240,193,.08));
}

.viewport-shell::before,
.viewport-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.viewport-shell::before {
  inset: 11%;
  border: 1px solid rgba(217,154,43,.32);
  border-radius: 42% 58% 48% 52%;
  transform: rotate(-8deg);
}

.viewport-shell::after {
  left: 3%;
  right: 3%;
  top: 50%;
  border-top: 1px dashed rgba(155,106,50,.26);
}

.corner {
  position: absolute;
  width: 88px;
  height: 88px;
  border-color: var(--honey);
  opacity: .78;
  filter: drop-shadow(0 0 9px rgba(217,154,43,.32));
}
.corner-tl { top: 18px; left: 18px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: 18px; right: 18px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: 18px; left: 18px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { bottom: 18px; right: 18px; border-bottom: 2px solid; border-right: 2px solid; }

.chamber-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(155,106,50,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,106,50,.28) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 52% 50%, black, transparent 73%);
}

.specimen-header {
  position: absolute;
  left: clamp(30px, 6vw, 86px);
  bottom: clamp(58px, 8vw, 110px);
  z-index: 5;
  max-width: min(650px, 50vw);
}

.interface-kicker,
.frame-label,
.mode-button,
.calibration-strip,
.readout-title {
  font-family: var(--interface);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.interface-kicker {
  margin: 0 0 8px;
  color: var(--caramel);
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(76px, 12vw, 178px);
  line-height: .78;
  letter-spacing: .035em;
  color: var(--umber);
  text-shadow: 0 7px 30px rgba(217,154,43,.22);
  animation: inkArrive 2.2s ease both .9s;
}

.status-phrase {
  margin: 18px 0 0 6px;
  font-size: clamp(20px, 2.4vw, 34px);
  color: rgba(42,33,24,.72);
  font-style: italic;
  animation: inkArrive 2s ease both 1.35s;
}

.mode-rail {
  position: absolute;
  top: clamp(34px, 5vw, 74px);
  left: clamp(34px, 5vw, 74px);
  z-index: 8;
  display: grid;
  gap: 10px;
}

.mode-button {
  width: 208px;
  padding: 10px 13px;
  color: var(--umber);
  border: 1px solid rgba(155,106,50,.55);
  border-left: 4px solid rgba(217,154,43,.7);
  background: rgba(255,244,214,.38);
  text-align: left;
  cursor: pointer;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
}

.mode-button:hover,
.mode-button.is-active {
  transform: translateX(10px);
  background: rgba(217,154,43,.26);
  border-color: var(--honey);
}

.prototype-illustration {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(58vw, 680px);
  height: min(82vh, 760px);
  margin: 0;
  transform: translate(-41%, -51%);
}

.specimen-svg { width: 100%; height: 100%; overflow: visible; }

.draw-line,
.tick-ring path {
  fill: none;
  stroke: var(--umber);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .76;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawPath 3.4s cubic-bezier(.64,.04,.25,1) forwards;
}

.halo-line,
.ribbon-line { stroke: var(--honey); stroke-width: 2.5; }
.capsule-line { stroke-width: 2.8; }
.inner-line { stroke: var(--caramel); opacity: .62; }
.ring-line { stroke: rgba(155,106,50,.48); stroke-width: 1.35; }
.dashed { stroke-dasharray: 12 18; animation: ringDash 24s linear infinite, drawPath 3.4s ease forwards 1.2s; }
.annotation { stroke: var(--honey); stroke-width: 1.55; }
.tick-ring path { stroke: var(--honey); stroke-width: 2; animation-delay: 1.75s; }
.halo-group .draw-line { animation-delay: .65s; }
.capsule-group .draw-line { animation-delay: 1.05s; }
.silhouette-group .draw-line { animation-delay: 1.75s; }
.antenna-group .draw-line { animation-delay: 2.15s; }
.hud-rings .draw-line { animation-delay: 2.55s; }

.node { fill: var(--honey); opacity: 0; animation: nodeBloom 1.2s ease forwards 3.1s; }
.node-mint { fill: var(--mint); animation-delay: 3.35s; }
.node-lilac { fill: var(--lilac); animation-delay: 3.55s; }
.node-honey { fill: var(--honey); animation-delay: 3.75s; }
.heart-node { fill: rgba(185,160,255,.54); stroke: var(--lilac); stroke-width: 2; opacity: 0; transform-origin: 505px 448px; }

.internal,
.signal-only { opacity: 0; transition: opacity .7s ease; }

.annotation-frame {
  position: absolute;
  z-index: 6;
  width: 248px;
  padding: 15px 17px 16px;
  border: 1px solid rgba(155,106,50,.55);
  background: linear-gradient(135deg, rgba(255,244,214,.58), rgba(217,154,43,.12));
  box-shadow: 0 18px 50px rgba(42,33,24,.08), inset 0 0 24px rgba(255,244,214,.34);
  backdrop-filter: blur(1px);
  animation: fragmentArrive 1.3s ease both;
}

.annotation-frame::before,
.annotation-frame::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--honey);
  opacity: .8;
}
.annotation-frame::before { top: -5px; left: -5px; border-top: 2px solid; border-left: 2px solid; }
.annotation-frame::after { bottom: -5px; right: -5px; border-bottom: 2px solid; border-right: 2px solid; }
.annotation-frame strong {
  display: block;
  margin: 4px 0 5px;
  font-family: var(--display);
  font-size: 31px;
  font-weight: 400;
  line-height: .95;
}
.annotation-frame p {
  margin: 0;
  color: rgba(42,33,24,.68);
  font-size: 15px;
  line-height: 1.35;
}
.frame-label { color: var(--caramel); }
.frame-a { top: 21%; left: 15%; animation-delay: 2.9s; }
.frame-b { top: 16%; right: 7%; animation-delay: 3.15s; }
.frame-c { right: 6%; bottom: 20%; animation-delay: 3.4s; }
.frame-d { left: 7%; bottom: 26%; animation-delay: 3.65s; }

.mode-readout {
  position: absolute;
  right: clamp(28px, 5vw, 70px);
  top: 48%;
  z-index: 7;
  width: 286px;
  padding: 18px;
  border-top: 1px solid rgba(217,154,43,.82);
  border-bottom: 1px solid rgba(217,154,43,.45);
  background: rgba(255,244,214,.22);
}
.readout-title { margin: 0 0 9px; color: var(--caramel); }
.readout-copy { margin: 0; font-size: 20px; line-height: 1.25; }

.calibration-strip {
  position: absolute;
  z-index: 7;
  left: 4%;
  right: 4%;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  color: rgba(42,33,24,.58);
}

.honeycomb-cells {
  position: absolute;
  z-index: 2;
  right: 14%;
  top: 8%;
  width: 170px;
  display: grid;
  grid-template-columns: repeat(3, 38px);
  gap: 9px 2px;
  transform: rotate(8deg);
  opacity: .58;
}
.honeycomb-cells i {
  width: 35px;
  height: 31px;
  background: linear-gradient(90deg, rgba(217,154,43,.24), rgba(255,244,214,.14));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border: 1px solid rgba(155,106,50,.35);
}

.prototype-stage[data-mode="emotion"] .emotion-only,
.prototype-stage[data-mode="signal"] .emotion-only,
.prototype-stage[data-mode="signal"] .signal-only,
.prototype-stage[data-mode="ready"] .emotion-only,
.prototype-stage[data-mode="ready"] .signal-only {
  opacity: .86;
}

.prototype-stage[data-mode="emotion"] .aurora-field { filter: blur(13px) hue-rotate(18deg) saturate(125%); }
.prototype-stage[data-mode="signal"] .aurora-field { filter: blur(11px) hue-rotate(42deg) saturate(145%); animation-duration: 13s; }
.prototype-stage[data-mode="ready"] .aurora-field { filter: blur(10px) hue-rotate(-10deg) saturate(118%); }
.prototype-stage[data-mode="signal"] .heart-node { animation: heartBloom 1.2s ease forwards, heartPulse 2.4s ease-in-out infinite 1.2s; }
.prototype-stage[data-mode="ready"] .capsule-line { stroke: var(--glass); }
.prototype-stage[data-mode="ready"] h1 { color: var(--glass); }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes ringDash { to { stroke-dashoffset: -900; } }
@keyframes nodeBloom { from { opacity: 0; transform: scale(.35); } to { opacity: .92; transform: scale(1); } }
@keyframes heartBloom { from { opacity: 0; transform: scale(.55); } to { opacity: .8; transform: scale(1); } }
@keyframes heartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes auroraDrift { from { transform: translate3d(-3%, -1%, 0) rotate(-2deg); } to { transform: translate3d(4%, 3%, 0) rotate(3deg); } }
@keyframes grainShift { 0% { transform: translate(0,0); } 50% { transform: translate(1px,-1px); } 100% { transform: translate(-1px,1px); } }
@keyframes pinBreath { 0%, 100% { opacity: .18; transform: scale(.7); } 45% { opacity: .8; transform: scale(1.2); } }
@keyframes inkArrive { from { opacity: 0; filter: blur(9px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes fragmentArrive { from { opacity: 0; transform: translateY(10px) rotate(-.4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (max-width: 980px) {
  body { overflow: auto; }
  .prototype-stage { min-height: 100vh; height: auto; overflow: hidden; }
  .viewport-shell { position: relative; min-height: 1180px; }
  .specimen-header { max-width: 86vw; bottom: 86px; }
  .prototype-illustration { width: 84vw; transform: translate(-50%, -50%); top: 46%; }
  .frame-a { top: 31%; left: 5%; }
  .frame-b { top: 24%; right: 4%; }
  .frame-c { right: 5%; bottom: 34%; }
  .frame-d { left: 5%; bottom: 42%; }
  .mode-readout { top: auto; right: 6%; bottom: 17%; }
  .calibration-strip { gap: 8px; flex-direction: column; }
}

@media (max-width: 680px) {
  .viewport-shell { min-height: 1120px; inset: 10px; }
  .mode-rail { left: 24px; top: 26px; }
  .mode-button { width: 178px; font-size: 9px; }
  .annotation-frame { width: 210px; padding: 12px; }
  .annotation-frame strong { font-size: 25px; }
  .prototype-illustration { top: 42%; }
  .specimen-header { left: 24px; bottom: 76px; }
  h1 { font-size: 64px; }
  .status-phrase { font-size: 20px; }
  .mode-readout { left: 24px; right: 24px; width: auto; }
  .honeycomb-cells { display: none; }
}