:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #20242a;
  --muted: #5d6673;
  --border: #d9dee6;
  --accent: #254f7a;
  --accent-strong: #17395d;
  --accent-soft: #e8f0f8;
  --focus: #1f6fb2;
  --shadow: 0 8px 24px rgba(24, 38, 55, 0.08);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111418;
  --surface: #191e24;
  --text: #f0f3f6;
  --muted: #b3bdc9;
  --border: #333b45;
  --accent: #91bee8;
  --accent-strong: #c3ddf5;
  --accent-soft: #1f2d3b;
  --focus: #9ccbf2;
  --shadow: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
body.no-js .js-only { display: none; }
body.no-js [data-lang="en"] { display: none; }
body:not(.no-js) [data-lang] { display: none; }
html[data-lang="ja"] body:not(.no-js) [data-lang="ja"],
html[data-lang="en"] body:not(.no-js) [data-lang="en"] { display: revert; }
/* These restore the right display value per element type, because `revert` above is
   not specific enough for li/tr/span/a. Each group must only ever match the SELECTED
   language: an unqualified `body:not(.no-js) li[data-lang]` here scores (0,2,2) and
   beats the hiding rule at (0,2,1), which would show both languages at once. */
html[data-lang="ja"] body:not(.no-js) li[data-lang="ja"],
html[data-lang="en"] body:not(.no-js) li[data-lang="en"] { display: list-item; }
html[data-lang="ja"] body:not(.no-js) tr[data-lang="ja"],
html[data-lang="en"] body:not(.no-js) tr[data-lang="en"] { display: table-row; }
html[data-lang="ja"] body:not(.no-js) span[data-lang="ja"],
html[data-lang="en"] body:not(.no-js) span[data-lang="en"] { display: inline; }
html[data-lang="ja"] body:not(.no-js) a[data-lang="ja"],
html[data-lang="en"] body:not(.no-js) a[data-lang="en"] { display: inline-flex; }
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 0.8rem;
  color: var(--surface);
  background: var(--accent-strong);
  border-radius: 6px;
  transition: top 0.12s ease;
}
.skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.header-inner {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0;
  display: grid;
  gap: 0.9rem;
}
.brand-row, .nav-row, .control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
}
.brand-mark { font-weight: 700; font-size: 1.18rem; }
.brand-subtitle { color: var(--muted); font-size: 0.88rem; }
.site-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.site-nav a, .button-link, .mail-link { color: var(--accent); text-decoration: none; }
.site-nav a { padding: 0.4rem 0.58rem; border-radius: 6px; font-size: 0.95rem; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.segmented {
  display: inline-flex;
  padding: 0.2rem;
  gap: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.segmented button {
  min-height: 2.4rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { color: var(--surface); background: var(--accent-strong); }
main {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3.5rem;
}
.hero, .page-title { padding: 1.5rem 0 1rem; }
.eyebrow { margin: 0 0 0.45rem; color: var(--accent); font-weight: 700; font-size: 0.88rem; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.2; }
h2 { margin: 0 0 0.85rem; font-size: 1.35rem; line-height: 1.35; }
h3 { margin: 0 0 0.55rem; font-size: 1.05rem; line-height: 1.4; }
.lead { max-width: 42rem; margin: 1rem 0 0; color: var(--muted); font-size: 1.08rem; }
.updated { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.95rem; }
.section-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section, .info-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.section { margin-top: 1rem; padding: 1.25rem; }
.info-card { padding: 1.15rem; }
.info-card p, .section p { margin: 0.4rem 0 0; }
.apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-card { display: flex; min-width: 0; flex-direction: column; }
.app-card h2 { margin-bottom: 0.6rem; font-size: 1.1rem; }
.app-summary { font-weight: 700; }
.app-details { margin: 0.85rem 0 0; }
.app-details div { padding: 0.65rem 0; border-top: 1px solid var(--border); }
.app-details dt { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.app-details dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.app-card > .actions { margin-top: auto; padding-top: 0.65rem; }
@media (max-width: 960px) { .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Card mascot. The width/height attributes carry the intrinsic ratio so the
   row does not shift while the image loads; max-width keeps it small on a
   phone and on a wide desktop card alike. */
.info-card-visual { display: block; width: 100%; max-width: 160px; height: auto; margin: 0.9rem auto 0.2rem; }
.link-list, .clean-list { margin: 0.7rem 0 0; padding-left: 1.2rem; }
.link-list li, .clean-list li { margin: 0.35rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.3rem; }
.button-link, .mail-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
}
.button-link.primary, .mail-link.primary { color: var(--surface); background: var(--accent-strong); border-color: var(--accent-strong); }
.button-link:hover, .button-link:focus-visible, .mail-link:hover, .mail-link:focus-visible { border-color: var(--accent); text-decoration: underline; }
.table-wrap { overflow-x: auto; margin-top: 0.7rem; }
table { width: 100%; border-collapse: collapse; min-width: 34rem; }
th, td { padding: 0.7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.note { color: var(--muted); font-size: 0.95rem; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.3rem 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.92rem;
}
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* On a phone the header used to stack five full-width rows - brand, subtitle, a nav
   that wrapped onto three lines, then the language and theme toggles one above the
   other - which pushed the page heading below the fold. The content comes first
   here: the brand sits on one line, the nav stays a single scrollable row, and the
   two toggles share a row. */
@media (max-width: 720px) {
  .header-inner, main, .footer-inner { width: min(100% - 1.1rem, 1120px); }
  .header-inner {
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem 0;
    gap: 0.45rem;
  }
  .header-inner > *,
  .nav-row,
  .control-row {
    min-width: 0;
    max-width: 100%;
  }
  .brand-row, .footer-inner { align-items: stretch; flex-direction: column; }
  .brand { flex-direction: row; align-items: baseline; gap: 0.4rem; }
  .brand-mark { font-size: 1.05rem; }
  .brand-subtitle { font-size: 0.78rem; }

  .nav-row {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  /* One row that scrolls sideways beats three wrapped rows of links. */
  .site-nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0.1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .control-row {
    width: 100%;
    align-items: center;
    flex-direction: row;
    gap: 0.4rem;
  }
  .segmented { min-width: 0; max-width: 100%; flex: 1 1 0; padding: 0.15rem; }
  .segmented button { min-width: 0; flex: 1 1 0; min-height: 2.1rem; padding: 0.25rem 0.4rem; font-size: 0.85rem; }

  main { padding: 1.1rem 0 2.5rem; }
  .hero, .page-title { padding: 1rem 0 0.75rem; }
  .section-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.95rem; }
  /* Keep the last line clear of the home indicator when the page is edge to edge. */
  .footer-inner { padding-bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------------------
   Dark-mode starfield

   Drawn by starfield.js, which creates the canvas itself; this file only places
   it. The canvas sits at z-index -1, which is painted before body's own
   background, so body gives up its background colour here. html carries the same
   colour and its background is propagated to the page canvas, so nothing looks
   different apart from the stars.

   Readability is unchanged: the canvas is behind everything, and .site-header,
   .site-footer, .section and .info-card each paint an opaque var(--surface)
   over it wherever body text sits.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body:not(.portfolio-page) { background-color: transparent; }

#starfield {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* starfield.js sizes the buffer from window.innerHeight; on iOS that is the
     visible height, while a fixed inset:0 box is the taller layout viewport. */
  height: 100dvh;
  pointer-events: none;
}
html[data-theme="dark"] body:not(.portfolio-page) #starfield { display: block; }

/* ---------------------------------------------------------------------------
   Polar bear footer scenes

   The bear bitmap is intentionally shared unchanged by every scene. Page-specific
   props and movement are CSS layers around it, so the original character remains
   consistent and the scene still reads when JavaScript is unavailable.
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-footer { position: relative; }

.footer-scene {
  --scene-accent: #64dcff;
  --scene-hot: #ffd875;
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 300px;
  overflow: hidden;
  color: #eafaff;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--scene-accent) 20%, transparent), transparent 28%),
    linear-gradient(145deg, #081328 0%, #0b2038 48%, #07101f 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--scene-accent) 28%, transparent);
}

.footer-scene-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(118, 214, 255, 0.04) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(118, 214, 255, 0.035) 53px 54px);
}

.footer-scene-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 7, 17, 0.82), transparent 24% 76%, rgba(1, 7, 17, 0.82)),
    linear-gradient(0deg, rgba(1, 6, 16, 0.54), transparent 48%);
}

.footer-scene-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: -10%;
  bottom: -95px;
  left: -10%;
  height: 185px;
  border-top: 1px solid color-mix(in srgb, var(--scene-accent) 50%, transparent);
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(108, 222, 255, 0.11) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(108, 222, 255, 0.1) 27px 28px),
    linear-gradient(rgba(11, 32, 56, 0.92), #050b16);
  transform: perspective(260px) rotateX(58deg);
  transform-origin: 50% 0;
}

.footer-lab-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.footer-lab-frame::before,
.footer-lab-frame::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(88px, 14vw, 178px);
  height: 58%;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 36%, #243751);
  background:
    radial-gradient(circle at 50% 30%, var(--scene-hot) 0 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(116, 215, 255, 0.09) 0 2px, transparent 2px 22px),
    linear-gradient(145deg, rgba(20, 45, 69, 0.9), rgba(5, 15, 30, 0.94));
  box-shadow: inset 0 0 18px rgba(61, 197, 255, 0.13), 0 0 24px rgba(0, 0, 0, 0.34);
  transform: translateY(-50%);
}
.footer-lab-frame::before { left: clamp(-46px, -3vw, -12px); clip-path: polygon(0 0, 82% 0, 100% 15%, 100% 85%, 82% 100%, 0 100%); }
.footer-lab-frame::after { right: clamp(-46px, -3vw, -12px); clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 85%, 0 15%); }

.footer-lab-frame > span {
  position: absolute;
  display: block;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 42%, #23354d);
  background: linear-gradient(90deg, #15263a, color-mix(in srgb, var(--scene-accent) 22%, #0b1728), #15263a);
  box-shadow: 0 0 12px color-mix(in srgb, var(--scene-accent) 17%, transparent);
}
.footer-lab-frame > span:nth-child(1) { top: 17px; right: 11%; left: 11%; height: 12px; border-radius: 999px; }
.footer-lab-frame > span:nth-child(2) { top: 30px; bottom: 36px; left: 17%; width: 7px; border-radius: 999px; opacity: 0.62; }
.footer-lab-frame > span:nth-child(3) { top: 30px; right: 17%; bottom: 36px; width: 7px; border-radius: 999px; opacity: 0.62; }

.footer-bear-stage {
  --bear-scale: 1;
  position: absolute;
  z-index: 5;
  bottom: -18px;
  left: 50%;
  width: 270px;
  height: 270px;
  transform: translateX(-50%) scale(var(--bear-scale));
  transform-origin: 50% 100%;
  pointer-events: none;
}

.footer-bear-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 11px 13px 0;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 66%, white);
  border-radius: 48% 48% 43% 43%;
  background: radial-gradient(circle at 50% 44%, rgba(49, 133, 170, 0.16), rgba(5, 15, 30, 0.2) 62%, transparent 74%);
  box-shadow:
    0 0 0 7px rgba(8, 22, 40, 0.72),
    0 0 30px color-mix(in srgb, var(--scene-accent) 35%, transparent);
}

.footer-bear {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 15px;
  display: block;
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 46% 46% 41% 41%;
  transform-origin: 50% 82%;
  filter: saturate(0.94) contrast(1.02) drop-shadow(0 9px 11px rgba(0, 0, 0, 0.3));
}

.footer-prop,
.footer-signal {
  position: absolute;
  z-index: 4;
  display: block;
  box-sizing: border-box;
}

.footer-scene-controls {
  position: absolute;
  top: 0.75rem;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 10;
  display: flex;
  gap: 0.4rem;
}

.footer-scene-control {
  display: grid;
  width: 2.75rem;
  min-width: 44px;
  height: 2.75rem;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(152, 224, 255, 0.48);
  border-radius: 999px;
  color: #eafbff;
  background: rgba(3, 13, 27, 0.78);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  font: 700 1rem/1 system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.footer-scene-control:hover { border-color: var(--scene-accent); background: rgba(13, 37, 58, 0.92); }
.footer-scene-control[aria-pressed="true"] { color: #07101f; background: var(--scene-hot); border-color: var(--scene-hot); }
.footer-scene-control:disabled { opacity: 0.52; cursor: default; }

.footer-panorama-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.footer-panorama-fallback { object-fit: cover; transform: scale(1.05); transition: opacity 400ms ease; }
[data-footer-scene="home"] .footer-panorama-fallback { object-position: 50% 52%; transform: scale(1); }
[data-footer-scene="home"] .footer-lab-frame { opacity: 0.36; }

/* Home: the bear sits behind a monitor while the room pans independently. */
[data-footer-scene="home"] { --scene-accent: #62dcff; --scene-hot: #ffd06f; height: 360px; }
[data-footer-scene="home"] .footer-bear-stage { left: 54%; }
[data-footer-scene="home"] .footer-prop-primary {
  z-index: 5;
  bottom: 23px;
  left: 50%;
  width: 150px;
  height: 96px;
  border: 4px solid #3a5265;
  border-radius: 9px;
  background: linear-gradient(145deg, #2c4253, #142838 58%, #0a1824);
  box-shadow: inset 0 0 0 2px #07101b, inset -15px 0 18px rgba(0, 0, 0, 0.22), 0 12px 22px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%) perspective(360px) rotateY(-14deg) rotateZ(-1deg);
}
[data-footer-scene="home"] .footer-prop-primary::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 43%, #445f72 0 8px, #172b3a 9px 13px, transparent 14px),
    repeating-linear-gradient(90deg, rgba(102, 155, 184, 0.42) 0 3px, transparent 3px 8px) 50% 82% / 66px 9px no-repeat,
    radial-gradient(circle at 84% 84%, #ffd06f 0 3px, transparent 4px),
    linear-gradient(145deg, #21394a, #102330);
  box-shadow: inset 0 0 14px rgba(3, 10, 18, 0.52);
}
[data-footer-scene="home"] .footer-prop-primary::after {
  content: "";
  position: absolute;
  right: 57px;
  bottom: -20px;
  width: 30px;
  height: 20px;
  border-bottom: 5px solid #263a4c;
  background: #263a4c;
  clip-path: polygon(38% 0, 62% 0, 72% 75%, 100% 75%, 100% 100%, 0 100%, 0 75%, 28% 75%);
}
[data-footer-scene="home"] .footer-prop-secondary {
  z-index: 3;
  bottom: 1px;
  left: 50%;
  width: 138px;
  height: 18px;
  border: 2px solid #344b60;
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, #13283b 0 8px, #63dfff 8px 9px, #13283b 9px 12px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  transform: translateX(-48%) perspective(90px) rotateX(31deg) rotateZ(-2deg);
}
[data-footer-scene="home"] .footer-signal {
  right: 42px;
  bottom: 114px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scene-hot);
  box-shadow: 0 0 10px var(--scene-hot), 12px 0 0 #58e7a5, 12px 0 10px #58e7a5;
}

/* Portfolio: a pair of project cards hover beside the inspection pod. */
[data-footer-scene="portfolio"] { --scene-accent: #a98aff; --scene-hot: #62e8ff; }
[data-footer-scene="portfolio"] .footer-prop-primary,
[data-footer-scene="portfolio"] .footer-prop-secondary {
  width: 104px;
  height: 68px;
  border: 1px solid rgba(181, 157, 255, 0.8);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(98, 232, 255, 0.75) 0 34%, transparent 34%),
    repeating-linear-gradient(0deg, rgba(209, 199, 255, 0.62) 0 2px, transparent 2px 12px),
    rgba(27, 21, 62, 0.88);
  background-size: 100% 6px, 58% 34px, auto;
  background-position: 0 9px, 35px 25px, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 20px rgba(152, 115, 255, 0.34);
}
[data-footer-scene="portfolio"] .footer-prop-primary { top: 62px; left: -74px; transform: rotate(-7deg); }
[data-footer-scene="portfolio"] .footer-prop-secondary { top: 88px; right: -78px; transform: rotate(8deg) scale(0.9); }
[data-footer-scene="portfolio"] .footer-signal {
  top: 42px;
  right: 20px;
  width: 38px;
  height: 2px;
  background: var(--scene-hot);
  box-shadow: 0 0 10px var(--scene-hot), 0 9px 0 rgba(98, 232, 255, 0.48);
}

/* Omikuji: a mechanical capsule shakes and releases a fortune strip. */
[data-footer-scene="omikuji"] { --scene-accent: #ff8fd8; --scene-hot: #ffe17d; }
[data-footer-scene="omikuji"] .footer-bear-stage { left: 47%; }
[data-footer-scene="omikuji"] .footer-prop-primary {
  right: -37px;
  bottom: 44px;
  width: 82px;
  height: 82px;
  border: 6px solid #38445c;
  border-radius: 50%;
  background: conic-gradient(from 25deg, #ff8fd8, #ffe17d, #68ddff, #ff8fd8);
  box-shadow: inset 0 0 0 12px #11223a, 0 0 22px rgba(255, 143, 216, 0.45);
}
[data-footer-scene="omikuji"] .footer-prop-primary::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #f8fbff;
}
[data-footer-scene="omikuji"] .footer-prop-secondary {
  right: -8px;
  bottom: 20px;
  width: 20px;
  height: 66px;
  border: 1px solid #d0eaff;
  background: repeating-linear-gradient(0deg, #e7fbff 0 8px, #8ecbe0 8px 10px);
  transform: rotate(13deg);
  transform-origin: 50% 0;
}
[data-footer-scene="omikuji"] .footer-signal {
  top: 48px;
  right: -24px;
  width: 10px;
  height: 10px;
  background: var(--scene-hot);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 7px var(--scene-hot));
}

/* Privacy: a heavy circular data vault locks behind the bear. */
[data-footer-scene="privacy"] { --scene-accent: #68e6bf; --scene-hot: #ffda79; }
[data-footer-scene="privacy"] .footer-bear-stage { left: 58%; }
[data-footer-scene="privacy"] .footer-prop-primary {
  z-index: 1;
  left: -92px;
  bottom: 54px;
  width: 132px;
  height: 132px;
  border: 8px double #5e7280;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 47%, #68e6bf 48% 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, #68e6bf 48% 52%, transparent 53%),
    radial-gradient(circle, #132d35 0 24%, #263e47 25% 43%, #0e1f2c 44%);
  box-shadow: 0 0 20px rgba(104, 230, 191, 0.3);
}
[data-footer-scene="privacy"] .footer-prop-secondary {
  left: -45px;
  bottom: 95px;
  width: 36px;
  height: 43px;
  border: 4px solid var(--scene-hot);
  border-radius: 8px;
  background: #152735;
  box-shadow: 0 0 14px rgba(255, 218, 121, 0.44);
}
[data-footer-scene="privacy"] .footer-prop-secondary::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 5px;
  width: 18px;
  height: 24px;
  border: 4px solid var(--scene-hot);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
[data-footer-scene="privacy"] .footer-signal { left: -39px; bottom: 111px; width: 8px; height: 8px; border-radius: 50%; background: var(--scene-hot); }

/* Terms: ordered document panes wait for the bear's approval. */
[data-footer-scene="terms"] { --scene-accent: #7fc4ff; --scene-hot: #ffcd73; }
[data-footer-scene="terms"] .footer-prop-primary,
[data-footer-scene="terms"] .footer-prop-secondary {
  top: 61px;
  width: 84px;
  height: 112px;
  border: 1px solid rgba(127, 196, 255, 0.88);
  border-radius: 5px;
  background:
    radial-gradient(circle at 18px 17px, var(--scene-hot) 0 4px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(180, 226, 255, 0.64) 0 2px, transparent 2px 13px),
    rgba(13, 39, 63, 0.92);
  background-size: auto, 54px 70px, auto;
  background-position: 0 0, 15px 34px, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 18px rgba(69, 164, 244, 0.28);
}
[data-footer-scene="terms"] .footer-prop-primary { left: -62px; transform: rotate(-5deg); }
[data-footer-scene="terms"] .footer-prop-secondary { right: -66px; transform: rotate(5deg) scale(0.88); }
[data-footer-scene="terms"] .footer-signal { top: 37px; left: 50%; width: 46px; height: 3px; background: var(--scene-hot); transform: translateX(-50%); box-shadow: 0 0 11px var(--scene-hot); }

/* Licenses: a beam reads a tag over a compact scanner deck. */
[data-footer-scene="licenses"] { --scene-accent: #72e5ff; --scene-hot: #b9ff7a; }
[data-footer-scene="licenses"] .footer-prop-primary {
  right: -60px;
  bottom: 33px;
  width: 122px;
  height: 34px;
  border: 3px solid #355067;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #142d42 0 12px, #72e5ff 13px 14px);
  box-shadow: 0 0 17px rgba(114, 229, 255, 0.3);
}
[data-footer-scene="licenses"] .footer-prop-secondary {
  right: -26px;
  bottom: 78px;
  width: 58px;
  height: 72px;
  border: 1px solid var(--scene-hot);
  border-radius: 5px;
  background:
    linear-gradient(var(--scene-hot), var(--scene-hot)) 11px 12px / 36px 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(185, 255, 122, 0.72) 0 2px, transparent 2px 6px) 11px 32px / 36px 23px no-repeat,
    rgba(18, 43, 52, 0.95);
  box-shadow: 0 0 15px rgba(185, 255, 122, 0.25);
}
[data-footer-scene="licenses"] .footer-signal { right: 1px; bottom: 64px; width: 3px; height: 100px; background: linear-gradient(transparent, var(--scene-accent), transparent); filter: drop-shadow(0 0 6px var(--scene-accent)); }

/* Support: a calm communications console receives a three-dot message. */
[data-footer-scene="support"] { --scene-accent: #68d8ff; --scene-hot: #ffb86f; }
[data-footer-scene="support"] .footer-bear-stage { left: 47%; }
[data-footer-scene="support"] .footer-prop-primary {
  right: -76px;
  bottom: 28px;
  width: 136px;
  height: 86px;
  border: 4px solid #334c61;
  border-radius: 10px 10px 4px 4px;
  background:
    radial-gradient(circle at 27px 28px, #62e6ae 0 5px, transparent 6px),
    repeating-linear-gradient(0deg, rgba(104, 216, 255, 0.6) 0 2px, transparent 2px 13px),
    #0b2133;
  background-size: auto, 62px 45px, auto;
  background-position: 0 0, 58px 18px, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 20px rgba(104, 216, 255, 0.28);
}
[data-footer-scene="support"] .footer-prop-secondary {
  top: 45px;
  right: -51px;
  width: 91px;
  height: 55px;
  border: 2px solid var(--scene-hot);
  border-radius: 14px;
  background: rgba(42, 35, 48, 0.92);
  box-shadow: 0 0 16px rgba(255, 184, 111, 0.31);
}
[data-footer-scene="support"] .footer-prop-secondary::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -12px;
  border-top: 13px solid var(--scene-hot);
  border-right: 13px solid transparent;
}
[data-footer-scene="support"] .footer-prop-secondary::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 26px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scene-hot);
  box-shadow: 16px 0 0 var(--scene-hot), 32px 0 0 var(--scene-hot);
}
[data-footer-scene="support"] .footer-signal { right: -19px; bottom: 96px; width: 8px; height: 8px; border-radius: 50%; background: #62e6ae; box-shadow: 0 0 10px #62e6ae; }

/* 404: the bear sweeps a radar dish for the missing destination. */
[data-footer-scene="404"] { --scene-accent: #7ad7ff; --scene-hot: #ff8d87; }
[data-footer-scene="404"] .footer-bear-stage { left: 55%; }
[data-footer-scene="404"] .footer-prop-primary {
  left: -75px;
  bottom: 35px;
  width: 128px;
  height: 128px;
  overflow: hidden;
  border: 4px solid #38546b;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(122, 215, 255, 0.48) 50% 51%, transparent 52%),
    linear-gradient(0deg, transparent 49%, rgba(122, 215, 255, 0.48) 50% 51%, transparent 52%),
    repeating-radial-gradient(circle, rgba(122, 215, 255, 0.2) 0 1px, transparent 2px 21px),
    #081d31;
  box-shadow: inset 0 0 22px rgba(122, 215, 255, 0.24), 0 0 18px rgba(0, 0, 0, 0.35);
}
[data-footer-scene="404"] .footer-prop-primary::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  height: 2px;
  background: linear-gradient(90deg, var(--scene-hot), transparent);
  box-shadow: 18px -25px 0 -1px var(--scene-hot);
  transform-origin: 0 50%;
}
[data-footer-scene="404"] .footer-prop-secondary { left: -17px; bottom: 20px; width: 12px; height: 30px; background: #38546b; clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); }
[data-footer-scene="404"] .footer-signal { left: -20px; bottom: 104px; width: 9px; height: 9px; border-radius: 50%; background: var(--scene-hot); box-shadow: 0 0 13px var(--scene-hot); }

/* Movement only starts while the scene is visible and the user has not paused it. */
.footer-scene.is-running .footer-bear { animation: footer-bear-bob 2.8s ease-in-out infinite; }
.footer-scene.is-running .footer-signal { animation: footer-signal-pulse 1.35s ease-in-out infinite; }
[data-footer-scene="home"].is-running .footer-panorama-fallback { animation: footer-pan-fallback 22s ease-in-out infinite alternate; }
[data-footer-scene="portfolio"].is-running .footer-prop-primary { animation: footer-card-left 3.6s ease-in-out infinite; }
[data-footer-scene="portfolio"].is-running .footer-prop-secondary { animation: footer-card-right 3.9s ease-in-out infinite; }
[data-footer-scene="omikuji"].is-running .footer-prop-primary { animation: footer-capsule-shake 2.6s ease-in-out infinite; }
[data-footer-scene="omikuji"].is-running .footer-prop-secondary { animation: footer-slip-sway 2.1s ease-in-out infinite; }
[data-footer-scene="privacy"].is-running .footer-prop-primary { animation: footer-vault-turn 9s linear infinite; }
[data-footer-scene="terms"].is-running .footer-prop-primary { animation: footer-paper-left 3.4s ease-in-out infinite; }
[data-footer-scene="terms"].is-running .footer-prop-secondary { animation: footer-paper-right 3.8s ease-in-out infinite; }
[data-footer-scene="licenses"].is-running .footer-signal { animation: footer-scan-beam 2.4s ease-in-out infinite; }
[data-footer-scene="support"].is-running .footer-prop-secondary { animation: footer-message-arrive 3.4s ease-in-out infinite; }
[data-footer-scene="404"].is-running .footer-prop-primary::after { animation: footer-radar-sweep 3s linear infinite; }
[data-footer-scene="404"].is-running .footer-bear { animation-name: footer-bear-search; animation-duration: 3.7s; }

@keyframes footer-bear-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-0.8deg); }
}
@keyframes footer-bear-search {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-3px); }
}
@keyframes footer-signal-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes footer-pan-fallback { from { transform: scale(1.01) translateX(-0.5%); } to { transform: scale(1.01) translateX(0.5%); } }
@keyframes footer-card-left { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-9px) rotate(-4deg); } }
@keyframes footer-card-right { 0%, 100% { transform: translateY(0) rotate(8deg) scale(0.9); } 50% { transform: translateY(8px) rotate(5deg) scale(0.9); } }
@keyframes footer-capsule-shake { 0%, 65%, 100% { transform: rotate(0); } 72% { transform: rotate(-9deg); } 79% { transform: rotate(8deg); } 86% { transform: rotate(-5deg); } }
@keyframes footer-slip-sway { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(17deg); } }
@keyframes footer-vault-turn { to { transform: rotate(360deg); } }
@keyframes footer-paper-left { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes footer-paper-right { 0%, 100% { transform: translateY(0) rotate(5deg) scale(0.88); } 50% { transform: translateY(6px) rotate(2deg) scale(0.88); } }
@keyframes footer-scan-beam { 0%, 100% { transform: translateY(-22px); opacity: 0.25; } 50% { transform: translateY(34px); opacity: 1; } }
@keyframes footer-message-arrive { 0%, 18% { transform: translateY(9px) scale(0.94); opacity: 0.25; } 35%, 80% { transform: translateY(0) scale(1); opacity: 1; } 100% { opacity: 0.25; } }
@keyframes footer-radar-sweep { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .footer-scene { height: 220px; }
  [data-footer-scene="home"] { height: 220px; }
  .footer-bear-stage { --bear-scale: 0.78; bottom: -20px; }
  [data-footer-scene="home"] .footer-bear-stage,
  [data-footer-scene="omikuji"] .footer-bear-stage,
  [data-footer-scene="privacy"] .footer-bear-stage,
  [data-footer-scene="support"] .footer-bear-stage,
  [data-footer-scene="404"] .footer-bear-stage { left: 50%; }
  .footer-lab-frame > span:nth-child(2) { left: 8%; }
  .footer-lab-frame > span:nth-child(3) { right: 8%; }
  .footer-scene-controls { top: 0.55rem; right: max(0.55rem, env(safe-area-inset-right, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-scene *,
  .footer-scene *::before,
  .footer-scene *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}