/* ============================================================
   Interface style switch + the "Anime" style.
   Anime follows Orbitals (Shapefarm) and its manual: black space
   with a blue nebula, Orbitals red for small bilingual labels,
   white square capitals for titles, film grain; screenshots toned
   like a printed booklet (cream paper, soft colour) instead of
   recoloured; a ◇ objective line in the HUD.
   Motion is held on threes, like limited animation.
   Everything below the switch is scoped to :root[data-style="anime"],
   so Studio (the default) is untouched.
   ============================================================ */

/* ── the switch (both styles) ─────────────────────────────── */
.style-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: 12.5px;
  line-height: 1;
  isolation: isolate;
}
.style-switch__opt {
  position: relative;
  z-index: 1;
  padding: 6px 11px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.style-switch__opt[aria-pressed="true"] { color: var(--bg); }
.style-switch__opt:not([aria-pressed="true"]):hover { color: var(--text); }
.style-switch__opt:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; border-radius: 100px; }
.style-switch__thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 100px;
  background: var(--text);
  transition: translate .35s var(--ease), background .25s var(--ease);
}
:root[data-style="anime"] .style-switch__thumb { translate: 100% 0; }
/* the menu's own "Get in touch" is for phones; on wider screens the header button has it */
.nav-menu__cta { display: none; }
/* phones: the switch stays in the header bar, and "Get in touch" moves to the end of the menu */
@media (max-width: 768px) {
  .site-header__end > .style-switch { font-size: 12px; }
  .style-switch__opt { padding: 7px 9px; }
  .site-header__end > .nav { display: none; }
  .nav-menu a.nav-menu__cta {
    display: block;
    margin-top: 4px;
    text-align: center;
    color: var(--bg);
    background: var(--text);
  }
  .nav-menu a.nav-menu__cta.is-active { color: var(--bg); background: var(--text); }
  :root[data-style="anime"] .nav-menu a.nav-menu__cta,
  :root[data-style="anime"] .nav-menu a.nav-menu__cta.is-active { color: #fff6ec; background: var(--ak-amber); border-radius: 6px; }
}

/* the swap: two dark halves close on a lit slash, then open on the new look */
.ak-wipe {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.ak-wipe i {
  position: absolute;
  inset: 0;
  display: block;
}
.ak-wipe i:nth-child(1) {
  background: #0a0f1a;
  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
  animation: ak-wipe-l .76s steps(10, end) both;
}
.ak-wipe i:nth-child(2) {
  background: #101a2c;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  animation: ak-wipe-r .76s steps(10, end) both;
}
.ak-wipe i:nth-child(3) {
  background: #fff3e4;
  clip-path: polygon(59.6% 0, 60.4% 0, 40.4% 100%, 39.6% 100%);
  filter: drop-shadow(0 0 12px #f2302b);
  opacity: 0;
  animation: ak-wipe-slash .76s steps(10, end) both;
}
@keyframes ak-wipe-l {
  0%   { transform: translateX(-100%); }
  38%, 62% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes ak-wipe-r {
  0%   { transform: translateX(100%); }
  38%, 62% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@keyframes ak-wipe-slash {
  0%, 30% { opacity: 0; }
  40%, 60% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* only Anime draws these */
.ak-hud, .ak-fx, .ak-slash, .ak-name, .ak-sky, .ak-jp { display: none; }

/* ============================================================
   ANIME
   ============================================================ */
:root[data-style="anime"] {
  --ak-night:  #05080f;
  --ak-navy:   #101a2c;
  --ak-slate:  #162133;
  --ak-steel:  #2a3a52;
  --ak-cream:  #f3e3c3;
  --ak-paper:  #ffe9c4;
  --ak-yellow: #fff3e4;
  --ak-amber:  #f2302b;
  --ak-orange: #ff7b2e;
  --ak-red:    #e0503c;
  --ak-wine:   #4a1610;
  --ak-teal:   #3cc6c4;
  --ak-sky:    #8cc4ef;
  --ak-ink:    #140c0a;
  --ak-disp:   "Russo One", "Rubik", system-ui, sans-serif;
  --ak-hud:    "Rubik", "M PLUS Rounded 1c", system-ui, sans-serif;
  --ak-kana:   "M PLUS Rounded 1c", "Rubik", system-ui, sans-serif;
  /* the HUD's lettering: a deep red contour and a drop under it */
  --ak-outline:
    2px 0 0 var(--ak-wine), -2px 0 0 var(--ak-wine), 0 2px 0 var(--ak-wine), 0 -2px 0 var(--ak-wine),
    1.5px 1.5px 0 var(--ak-wine), -1.5px 1.5px 0 var(--ak-wine), 1.5px -1.5px 0 var(--ak-wine), -1.5px -1.5px 0 var(--ak-wine),
    0 4px 0 rgba(4, 4, 10, .55);
  /* the manual's menu lettering: a thin deep-red edge stepping down-right */
  --ak-edge: 1px 1px 0 #8a1216, 2px 2px 0 #8a1216, 3px 3px 0 #3a0608;
  --ak-outline-s:
    1.25px 0 0 var(--ak-wine), -1.25px 0 0 var(--ak-wine), 0 1.25px 0 var(--ak-wine), 0 -1.25px 0 var(--ak-wine),
    0 2.5px 0 rgba(4, 4, 10, .5);

  --bg:      var(--ak-night);
  --bg-soft: var(--ak-navy);
  --surface: var(--ak-slate);
  --line:    rgba(243, 227, 195, .12);
  --line-2:  rgba(243, 227, 195, .3);
  --text:    var(--ak-cream);
  --muted:   #aeb6c8;
  --muted-2: #7f8aa3;
  --accent:  var(--ak-amber);
}

:root[data-style="anime"] body {
  font-family: var(--ak-hud);
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(243, 227, 195, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 9%, rgba(243, 227, 195, .6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 31%, rgba(140, 196, 239, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 42%, rgba(243, 227, 195, .5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 23% 63%, rgba(242, 48, 43, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 78%, rgba(243, 227, 195, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 92%, rgba(243, 227, 195, .4) 50%, transparent 51%),
    linear-gradient(180deg, #03050a 0%, #05080f 40%, #081022 100%);
  background-size: 560px 560px, 560px 560px, 560px 560px, 560px 560px, 560px 560px, 560px 560px, 560px 560px, 100% 100%;
  background-attachment: fixed;
}
:root[data-style="anime"] ::selection { background: var(--ak-amber); color: var(--ak-ink); }

/* film: heavy grain, a deep gate vignette, a warm leak top-left and a cool one bottom-right */
:root[data-style="anime"] body::before,
:root[data-style="anime"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}
:root[data-style="anime"] body::before {
  inset: -60px;
  opacity: .28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ak-grain .5s steps(4, end) infinite;
}
:root[data-style="anime"] body::after {
  background:
    radial-gradient(130% 105% at 50% 45%, transparent 55%, rgba(2, 3, 8, .72) 100%),
    radial-gradient(50% 40% at 0% 0%, rgba(242, 48, 43, .08), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(60, 198, 196, .07), transparent 70%);
}
@keyframes ak-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-23px, 14px); }
  50%  { transform: translate(17px, -29px); }
  75%  { transform: translate(-9px, 31px); }
  100% { transform: translate(0, 0); }
}

/* the HUD: the section's objective, top left, as the game names the next step */
:root[data-style="anime"] .ak-hud {
  display: block;
  position: fixed;
  top: calc(var(--site-header-h) + 18px);
  left: max(18px, calc(var(--page-inline) * .4));
  z-index: 49;
  pointer-events: none;
  font-family: var(--ak-hud);
  font-weight: 700;
  line-height: 1.25;
}
.ak-hud__goal {
  margin: 0;
  font-family: var(--ak-disp);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff6ec;
  text-shadow: 1px 1px 0 #8a1216, 2px 2px 0 #3a0608;
}
.ak-hud__task {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ak-amber);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.ak-hud__task i { font-style: normal; font-size: 12px; }
.ak-hud.is-new .ak-hud__goal { animation: ak-type .5s steps(8, end) both; }
.ak-hud.is-new .ak-hud__task { animation: ak-type .5s steps(8, end) .25s both; }
@keyframes ak-type {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (max-width: 899px) { :root[data-style="anime"] .ak-hud { display: none; } }

/* ── type ─────────────────────────────────────────────────── */
:root[data-style="anime"] :is(h1, h2, h3, .wordmark, .mail, .desk-tag b, .desk-stats b, .eyebrow, .card-tags, .card-foot, .about-block h3, .research-hint, .desk-stats, .desk-hint, .nav, .nav-menu, .style-switch, .site-footer, .desk-tag) {
  font-family: var(--ak-hud);
}
:root[data-style="anime"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; }

/* every section title the same way: a katakana label, the title in outlined HUD capitals */
:root[data-style="anime"] :is(.section-head h2, .about-lead h2) {
  position: relative;
  padding-top: 22px;
  font-family: var(--ak-disp);
  font-size: clamp(24px, 3.1vw, 38px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff6ec;
  text-shadow: var(--ak-edge);
}
:root[data-style="anime"] :is(.section-head h2, .about-lead h2)::before {
  position: absolute;
  top: 0;
  left: 2px;
  font-family: var(--ak-kana);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  color: var(--ak-amber);
  text-shadow: none;
  white-space: nowrap;
}
:root[data-style="anime"] #work .section-head h2::before          { content: "◇ ワーク"; }
:root[data-style="anime"] .about-lead h2::before                   { content: "◇ プロフィール"; }
:root[data-style="anime"] #sketchbook .section-head h2::before     { content: "◇ スケッチブック"; }
:root[data-style="anime"] #research .section-head h2::before       { content: "◇ リサーチ"; }
:root[data-style="anime"] .section-head p { color: var(--muted); }
:root[data-style="anime"] .experiments-bento__title {
  font-family: var(--ak-disp);
  font-weight: 400;
  font-size: clamp(16px, 2.1vw, 26px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff6ec;
  text-shadow: 1px 1px 0 #8a1216, 2px 2px 0 #3a0608;
}
@media (max-width: 820px) {
  :root[data-style="anime"] .experiments-bento__title { font-size: calc(17 / var(--bento-w) * 100cqi); letter-spacing: 0; }
}
:root[data-style="anime"] .experiments-bento__title::before {
  content: "◇ エクスペリメント";
  position: absolute;
  left: 2px;
  bottom: 100%;
  font-family: var(--ak-kana);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  color: var(--ak-amber);
  text-shadow: none;
  white-space: nowrap;
}

/* the studio fades are replaced by the beams */
:root[data-style="anime"] .reveal:not(.hero .reveal) { opacity: 1; transform: none; }

/* ── header ───────────────────────────────────────────────── */
:root[data-style="anime"] .site-header {
  background: color-mix(in srgb, #070b14 84%, transparent);
  border-bottom: 1px solid rgba(243, 227, 195, .14);
}
:root[data-style="anime"] .site-header.scrolled { border-bottom-color: rgba(243, 227, 195, .14); }
:root[data-style="anime"] .wordmark { font-size: 17px; font-weight: 800; letter-spacing: .02em; color: #fff6ec; text-shadow: 1px 1px 0 #8a1216, 2px 2px 0 #3a0608; }
:root[data-style="anime"] .nav-menu a { font-size: 14px; font-weight: 600; }
:root[data-style="anime"] .nav-menu a:hover { color: var(--ak-yellow); }
:root[data-style="anime"] .nav-menu a.is-active { color: var(--ak-yellow); box-shadow: inset 0 -2px 0 var(--ak-yellow); }
:root[data-style="anime"] .nav-cta {
  border: 1px solid var(--ak-amber);
  border-radius: 6px;
  font-weight: 700;
  color: #fff6ec !important;
  background: var(--ak-amber);
  box-shadow: none;
  transition: background .16s steps(2, end), box-shadow .16s steps(2, end);
}
:root[data-style="anime"] .nav-cta:hover { background: #fff6ec; border-color: #fff6ec; color: var(--ak-amber) !important; }
:root[data-style="anime"] .style-switch { border-color: rgba(243, 227, 195, .3); border-radius: 8px; font-weight: 600; }
:root[data-style="anime"] .style-switch__thumb { border-radius: 6px; background: var(--ak-cream); transition: translate .3s steps(3, end); }
:root[data-style="anime"] .style-switch__opt[aria-pressed="true"] { color: var(--ak-ink); }
@media (max-width: 768px) {
  :root[data-style="anime"] .nav-menu { background: var(--ak-navy); border-color: rgba(243, 227, 195, .2); }
  :root[data-style="anime"] .nav-menu a.is-active { background: var(--ak-steel); color: var(--ak-yellow); box-shadow: none; }
  :root[data-style="anime"] .wordmark { font-size: 15px; }
}

/* ── hero: deep space ───────────────────────────────────────
   black, a soft blue nebula across the lower half, a few stars with
   four-point glints (the .ak-sky SVG in anime.js), as on the
   Orbitals manual.                                              */
:root[data-style="anime"] .desk-glow {
  position: absolute;
  inset: -10% 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: none;
}
:root[data-style="anime"] .desk-glow::before,
:root[data-style="anime"] .desk-glow::after {
  content: "";
  position: absolute;
  width: auto;
  height: auto;
  translate: none;
  border-radius: 0;
  filter: none;
  transition: none;
  will-change: auto;
}
:root[data-style="anime"] .desk-glow::before,
:root[data-style="anime"] .desk-glow::after { display: none; }
:root[data-style="anime"] .ak-sky {
  display: block;
  position: absolute;
  /* the sky runs on past the desk, through the gap before Work, and fades into the page */
  top: -10%;
  left: 0;
  width: 100%;
  height: calc(110% + var(--section-y) + var(--section-top, 0px));
  z-index: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 0 62%, transparent 100%);
  mask: linear-gradient(180deg, #000 0 62%, transparent 100%);
}
.ak-sky__nebula { fill: #0d2a5c; opacity: .45; }
.ak-sky__nebula-lit path { fill: #2f6fc4; opacity: .35; }
.ak-sky__dots circle { fill: #e9eefc; opacity: .7; }
.ak-sky__stars path { fill: #eef4ff; filter: drop-shadow(0 0 4px rgba(79, 143, 255, .95)); }
:root[data-style="anime"] .ak-sky__stars { animation: ak-twinkle 1.6s steps(3, end) infinite alternate; }
@keyframes ak-twinkle { from { opacity: .45; } to { opacity: 1; } }

/* the headline set like the manual's menu: white square capitals with a deep red edge;
   the line that plays on hover in pale blue, hopping now and then until it's found; the role and the Japanese line as small red labels */
:root[data-style="anime"] .desk-center { width: min(40rem, 48%); }
:root[data-style="anime"] .desk-center .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--ak-disp);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ak-amber);
}
:root[data-style="anime"] .hero--desk .hero-title {
  font-family: var(--ak-disp);
  font-size: clamp(22px, calc(40 * var(--u)), 44px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff6ec;
  text-shadow: var(--ak-edge);
}
:root[data-style="anime"] .hero-title em,
:root[data-style="anime"] .hero-title em .hero-letter { font-style: normal; font-weight: 400; }
:root[data-style="anime"] .hero-title em.hero-title-word,
:root[data-style="anime"] .hero-phrase .hero-letter {
  background: none;
  color: #a9d6ff;
  -webkit-text-fill-color: #a9d6ff;
  text-shadow: 1px 1px 0 #123a72, 2px 2px 0 #0a2147, 3px 3px 0 #02060f, 0 0 18px rgba(79, 143, 255, .4);
}
:root[data-style="anime"] .hero-phrase .hero-letter::before { color: var(--ak-amber); }
:root[data-style="anime"] .hero-phrase .hero-letter::after  { color: #fff6ec; }
/* until it's found, the playable line keeps hopping: a wave runs through it every few
   seconds, each letter jumping on a held frame with its red and cream ghosts split off */
:root[data-style="anime"] .hero.is-ready .hero-phrase:not(.is-hot):not(.is-discovered) .hero-letter:not(.hero-letter--space) {
  animation: ak-hop 3.6s steps(1, end) infinite;
  animation-delay: calc(1.4s + var(--i) * 40ms);
}
:root[data-style="anime"] .hero.is-ready .hero-phrase:not(.is-hot):not(.is-discovered) .hero-letter:not(.hero-letter--space)::before,
:root[data-style="anime"] .hero.is-ready .hero-phrase:not(.is-hot):not(.is-discovered) .hero-letter:not(.hero-letter--space)::after {
  opacity: 0;
  animation: ak-hop-ghost 3.6s steps(1, end) infinite;
  animation-delay: calc(1.4s + var(--i) * 40ms);
}
:root[data-style="anime"] .hero.is-ready .hero-phrase:not(.is-hot):not(.is-discovered) .hero-letter:not(.hero-letter--space)::after {
  animation-name: ak-hop-ghost-r;
}
@keyframes ak-hop {
  0%, 9%, 100% { transform: none; }
  3%           { transform: translateY(-.16em); }
  6%           { transform: translateY(-.06em); }
}
@keyframes ak-hop-ghost {
  0%, 7%, 100% { opacity: 0; transform: none; }
  3%           { opacity: .85; transform: translate(-3px, .04em); }
}
@keyframes ak-hop-ghost-r {
  0%, 7%, 100% { opacity: 0; transform: none; }
  3%           { opacity: .85; transform: translate(3px, .04em); }
}
:root[data-style="anime"] .ak-jp {
  display: block;
  margin: 14px 0 0;
  font-family: var(--ak-kana);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ak-amber);
}
:root[data-style="anime"] .desk-stats { color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
:root[data-style="anime"] .desk-stats li + li { border-left: 1px solid rgba(242, 48, 43, .4); }
:root[data-style="anime"] .desk-stats b { font-family: var(--ak-disp); font-weight: 400; color: #fff6ec; }
:root[data-style="anime"] .desk-hint { font-size: 12.5px; font-weight: 500; color: var(--muted-2); }
@media (max-width: 899px) {
  :root[data-style="anime"] .desk-center { width: 94%; }
  :root[data-style="anime"] .desk-center .eyebrow { font-size: 10px; margin-bottom: 10px; }
  :root[data-style="anime"] .hero--desk .hero-title { font-size: clamp(18px, 5.4vw, 30px); }
  :root[data-style="anime"] .ak-jp { font-size: 10.5px; letter-spacing: .14em; margin-top: 8px; }
  /* WebKit clips a url() filter to the element's own box, so the sheets that stick out
     past it got cut: pad the filtered box out (and pull it back with a margin) */
  :root[data-style="anime"] :is(.desk-item--papers, .desk-item--sketchbook) .desk-obj { padding: 16%; margin: -16%; }
}

/* the apps' screens are toned like the manual's printed cover — whites go to cream paper,
   colour softens, nothing is posterised — then a blue rim from one side, red from the
   other, and the shadow they cast */
:root[data-style="anime"] {
  --ak-print: sepia(.2) saturate(.82) hue-rotate(-6deg) contrast(.93) brightness(1.01);
}
:root[data-style="anime"] .desk-obj {
  filter:
    var(--ak-print)
    drop-shadow(-2px 0 0 rgba(140, 196, 239, .5))
    drop-shadow(2px 0 0 rgba(242, 48, 43, .5))
    drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .6));
}
:root[data-style="anime"] :is(.desk-item--papers, .desk-item--sketchbook) .desk-obj {
  filter:
    url(#ak-line)
    drop-shadow(-2px 0 0 rgba(140, 196, 239, .5))
    drop-shadow(2px 0 0 rgba(242, 48, 43, .5))
    drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .6));
}
/* a folder's sheets fan out past its box, so each piece is drawn on its own */
:root[data-style="anime"] .desk-fan .desk-obj {
  filter: drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .6));
}
:root[data-style="anime"] .desk-fan .folder__sheet { filter: var(--ak-print); }
:root[data-style="anime"] .desk-fan :is(.folder__back, .folder__front) { filter: url(#ak-line); }
/* folders drawn flat: one face colour, a hard shadow band, a gloss stripe, an ink line */
:root[data-style="anime"] .folder { --face: #3b3f9a; --face-2: #2e3180; --back: #23265e; }
:root[data-style="anime"] .desk-item--client .folder { --face: #23706a; --face-2: #1b5853; --back: #133b38; }
:root[data-style="anime"] :is(.folder__back, .folder__back::before) {
  background: var(--back);
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
}
:root[data-style="anime"] .folder__front {
  background:
    linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, .13) 12% 17%, transparent 17% 20%, rgba(255, 255, 255, .07) 20% 22%, transparent 22%),
    linear-gradient(162deg, var(--face) 0 56%, var(--face-2) 56%);
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-style="anime"] .folder__sheet { box-shadow: 0 0 0 1.5px var(--ak-ink); }
:root[data-style="anime"] .folder__name { font-weight: 800; color: #ffe2cf; text-shadow: var(--ak-outline-s); }
:root[data-style="anime"] .desk-item:is(:hover, :focus-visible) .desk-obj,
:root[data-style="anime"] .desk-item.is-dragging .desk-obj {
  filter:
    var(--ak-print)
    drop-shadow(0 0 2px var(--ak-yellow))
    drop-shadow(0 0 calc(22 * var(--u)) rgba(140, 196, 239, .55))
    drop-shadow(0 calc(22 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .6));
}
:root[data-style="anime"] .desk-fan:is(:hover, :focus-visible, .is-open) .desk-obj {
  filter: drop-shadow(0 0 calc(22 * var(--u)) rgba(140, 196, 239, .45)) drop-shadow(0 calc(22 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .6));
}
/* hover: the lamp finds the object */
:root[data-style="anime"] .desk-item::before {
  inset: -20%;
  border-radius: 50%;
  filter: blur(24px);
  background: radial-gradient(circle, rgba(140, 196, 239, .32), rgba(242, 48, 43, .12) 45%, transparent 70%);
  transition: opacity .2s steps(2, end), scale .3s steps(3, end);
}
/* the label is a dialogue box: name in orange, line in cream */
:root[data-style="anime"] .desk-tag {
  padding: 9px 14px 11px;
  border: 1px solid rgba(243, 227, 195, .18);
  border-radius: 6px;
  background: rgba(8, 12, 22, .9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
  color: var(--ak-cream);
  font-size: 13px;
  font-weight: 500;
}
:root[data-style="anime"] .desk-tag b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ak-orange);
  text-shadow: var(--ak-outline-s);
}
/* the papers and the sketchbook are drawn flat: ink line, one hard shadow band, a gloss stripe */
:root[data-style="anime"] .paper {
  border-radius: calc(5 * var(--u));
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
}
:root[data-style="anime"] .paper--a { background: linear-gradient(118deg, #fbefd6 0 64%, #e9cfa6 64%); color: #4a2a18; }
:root[data-style="anime"] .paper--b { background: linear-gradient(118deg, #dfe9f7 0 64%, #b9cbe6 64%); color: #1e2f55; }
:root[data-style="anime"] .paper--c { background: linear-gradient(118deg, #dff1ea 0 64%, #b4d8cb 64%); color: #1d4438; }
:root[data-style="anime"] .paper__title { font-weight: 800; letter-spacing: 0; }
:root[data-style="anime"] .paper__body { opacity: .7; }
:root[data-style="anime"] .paper__body i { height: calc(2 * var(--u)); border-radius: 1px; }
:root[data-style="anime"] .papers__count { color: var(--ak-cream); font-weight: 700; }
:root[data-style="anime"] .papers__count b { color: var(--ak-yellow); font-weight: 800; text-shadow: var(--ak-outline-s); }
:root[data-style="anime"] .sketchbook-obj__sheet { box-shadow: inset 0 0 0 1.5px var(--ak-ink); }
:root[data-style="anime"] .sketchbook-obj__sheet img { filter: grayscale(.2) contrast(1.15); }
:root[data-style="anime"] .sketchbook-obj__cover {
  border-radius: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0;
  background:
    linear-gradient(90deg, #121a33 0 calc(16 * var(--u)), transparent 0),
    linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .14) 22% 27%, transparent 27% 31%, rgba(255, 255, 255, .08) 31% 33%, transparent 33%),
    linear-gradient(160deg, #34477a 0 52%, #26375f 52%);
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
}
:root[data-style="anime"] .sketchbook-obj__stamp { color: #ffe2cf; text-shadow: var(--ak-outline-s); }
:root[data-style="anime"] .sketchbook-obj__stamp small { color: var(--ak-yellow); text-shadow: none; font-family: var(--ak-hud); font-weight: 700; }
:root[data-style="anime"] :is(.folder__name, .folder__chip, .sketchbook-obj__stamp, .paper__title, .papers__count) {
  font-family: var(--ak-hud);
  font-weight: 700;
  font-style: normal;
}
:root[data-style="anime"] :is(.desk-tag, .card-tags) .live {
  border: 1px solid rgba(60, 198, 196, .6);
  border-radius: 4px;
  color: var(--ak-teal);
  font-family: var(--ak-hud);
  font-weight: 700;
  text-shadow: none;
}

/* the beams replace the deal-out from the centre */
:root[data-style="anime"] .hero.is-ready .desk-item {
  animation: none;
  opacity: 1;
  translate: none;
  scale: none;
}

/* ── work: project files, all built the same way ─────────────
   every preview toned like print (--ak-print) and cut by the same
   lit slash: a navy strip with the katakana name, the file number;
   then FILE 00 · NAME, tags, the case study, role and years.     */
:root[data-style="anime"] .work { border-top: 0; }
:root[data-style="anime"] .work-grid { gap: clamp(20px, 2.4vw, 28px); }
:root[data-style="anime"] .card {
  border: 1.5px solid #24324b;
  border-radius: 6px;
  background: var(--ak-slate);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transition: transform .24s steps(3, end), border-color .24s steps(3, end), box-shadow .24s steps(3, end);
}
:root[data-style="anime"] .card:hover {
  transform: translateY(-4px);
  background: var(--ak-slate);
  border-color: var(--ak-amber);
  box-shadow: 0 0 30px rgba(242, 48, 43, .22), 0 22px 44px rgba(0, 0, 0, .5);
}
:root[data-style="anime"] .card:focus-visible { outline: 2px solid var(--ak-yellow); outline-offset: 4px; }
:root[data-style="anime"] .card-visual {
  border-bottom: 1.5px solid #24324b;
  background: var(--ak-navy);
}
:root[data-style="anime"] .card-visual::before,
:root[data-style="anime"] .card-visual::after { background: none; }
:root[data-style="anime"] .card-visual > :not(.ak-slash) { filter: var(--ak-print); }
:root[data-style="anime"] .card:is(:hover, :focus-visible) .card-visual > :not(.ak-slash) { transform: scale(1.03); }

:root[data-style="anime"] .ak-slash {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transform: none !important;
  container-type: size;
}
.ak-slash > * { position: absolute; inset: 0; }
.ak-slash__grade { background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(4, 6, 12, .5) 100%); }
/* the strip: the same navy on every file, the name read top to bottom */
.ak-slash__strip {
  right: auto;
  width: 24%;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(140, 196, 239, .12) 1px, transparent 1.6px) 0 0 / 6px 6px,
    #101a2c;
  transition: translate .3s steps(4, end);
}
.ak-slash__kana {
  position: absolute;
  top: 14%;
  left: 12%;
  writing-mode: vertical-rl;
  font-family: var(--ak-kana);
  font-weight: 800;
  font-size: min(8.5cqh, 9cqw);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ak-amber);
  white-space: nowrap;
}
/* the slash: a lit cut along the strip's edge */
.ak-slash__cut {
  background: var(--ak-yellow);
  clip-path: polygon(23.6% 0, 24.6% 0, 14.5% 100%, 13.5% 100%);
  filter: drop-shadow(0 0 6px rgba(140, 196, 239, .9));
  transition: translate .3s steps(4, end);
}
.ak-slash__no {
  inset: 12px 12px auto auto;
  padding: 3px 8px 4px;
  border: 1px solid rgba(242, 48, 43, .7);
  border-radius: 4px;
  font-family: var(--ak-hud);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ak-amber);
  background: rgba(10, 15, 26, .8);
}
:root[data-style="anime"] .card:is(:hover, :focus-visible) :is(.ak-slash__strip, .ak-slash__cut) { translate: -8% 0; }

/* the body: one type style, one tag style */
:root[data-style="anime"] .card-body { padding-top: 20px; }
:root[data-style="anime"] .card-project { display: none; }
:root[data-style="anime"] .ak-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 12px;
}
:root[data-style="anime"] .ak-name__no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ak-amber);
}
:root[data-style="anime"] .ak-name__en {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ak-cream);
}
:root[data-style="anime"] .ak-name__kana {
  font-family: var(--ak-kana);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted-2);
}
:root[data-style="anime"] .card-tags { color: var(--muted-2); font-size: 11px; font-weight: 600; }
:root[data-style="anime"] .card-tags > span:first-child { letter-spacing: .1em; }
:root[data-style="anime"] .card-tags :is(.award, .new, .live, .metric, .phd) {
  border: 1px solid rgba(243, 227, 195, .22);
  border-radius: 4px;
  color: var(--ak-cream);
  font-size: 11px;
  font-weight: 600;
  text-shadow: none;
}
:root[data-style="anime"] .card h3 { color: var(--ak-cream); font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.25; }
:root[data-style="anime"] .card p { color: var(--muted); font-size: 15px; }
:root[data-style="anime"] .card-foot { border-top: 1px solid rgba(243, 227, 195, .1); color: var(--muted-2); font-size: 12px; font-weight: 500; }

/* ── about ────────────────────────────────────────────────── */
:root[data-style="anime"] .about-lead p { color: var(--muted); }
:root[data-style="anime"] .about-block {
  padding: 18px 20px 20px;
  border: 1px solid rgba(243, 227, 195, .14);
  border-radius: 8px;
  background: rgba(22, 33, 51, .85);
}
:root[data-style="anime"] .about-block h3 { color: var(--ak-amber); font-weight: 700; }
:root[data-style="anime"] .about-block li { color: var(--muted); border-color: rgba(243, 227, 195, .1); }
:root[data-style="anime"] .about-block li b { color: var(--ak-yellow); }

/* ── sketchbook, publications box: drawn as cels too ──────── */
:root[data-style="anime"] .sketchbook-intro { color: var(--muted); }
/* the book and the file box keep their 3D; every face gets an ink line and the scene a contour */
:root[data-style="anime"] .sketchbook-stage { filter: url(#ak-line); }
/* the sketchbook's pages: flat paper and an ink line; the drawings keep their own colour */
:root[data-style="anime"] :is(.book-face, .book-face--blank, .book-cover__inside) { background: #f3e3c3; }
:root[data-style="anime"] .book-caption__title { font-style: normal; font-weight: 800; color: #1a1220; }
:root[data-style="anime"] .book-caption__medium { font-weight: 700; color: #b0661f; }
:root[data-style="anime"] .about-book__arrow { border-radius: 6px; border: 1.5px solid #24324b; background: rgba(10, 15, 26, .82); color: var(--ak-cream); }
:root[data-style="anime"] .about-book__hint { color: var(--ak-amber); font-weight: 700; }
:root[data-style="anime"] .research-scene { filter: url(#ak-line); }
:root[data-style="anime"] :is(.book-face, .book-leaf, .research-box__face, .research-file__sheet, .research-file__tab) {
  outline: 1.5px solid var(--ak-ink);
  outline-offset: -1.5px;
}
:root[data-style="anime"] .research-file__sheet h3 { font-weight: 700; }
/* the sketchbook's cover drawn flat, like the one on the desk */
:root[data-style="anime"] .book-cover__front { background: #26375f; }
:root[data-style="anime"] .book-cover__cloth {
  background:
    linear-gradient(90deg, #121a33 0 16px, transparent 0),
    linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .14) 22% 27%, transparent 27% 31%, rgba(255, 255, 255, .08) 31% 33%, transparent 33%),
    linear-gradient(160deg, #34477a 0 52%, #26375f 52%);
}
:root[data-style="anime"] .book-cover__stamp h2 { font-family: var(--ak-hud); font-weight: 800; color: #ffe2cf; text-shadow: var(--ak-outline-s); }
:root[data-style="anime"] .book-cover__stamp .book-label__role { font-family: var(--ak-hud); font-weight: 700; color: var(--ak-yellow); }
:root[data-style="anime"] :is(.book-caption__title, .book-caption__medium, .about-book__hint) { font-family: var(--ak-hud); }
/* the file box becomes a piece of the ship: flat ochre panels, one hard shade, a dark plate */
:root[data-style="anime"] :is(.research-box__front, .research-box__back) {
  background: linear-gradient(180deg, #d99b4a 0 36%, #c4853b 36%);
  box-shadow: none;
}
:root[data-style="anime"] .research-box__inner-back { background: #7a4f22; }
:root[data-style="anime"] :is(.research-box__left, .research-box__right) {
  background: repeating-linear-gradient(90deg, #ad7131 0 22px, #8f5a24 22px 24px);
  box-shadow: none;
}
:root[data-style="anime"] .research-box__inner-left { background: #6e461e; }
:root[data-style="anime"] :is(.research-box__front, .research-box__left, .research-box__right)::after { display: none; }
:root[data-style="anime"] .research-box__tag {
  font-family: var(--ak-hud);
  font-weight: 800;
  color: var(--ak-yellow);
  background: #1a1410;
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
}
:root[data-style="anime"] .research-hint { color: var(--ak-yellow); font-weight: 600; }
:root[data-style="anime"] .research-more a { color: var(--ak-yellow); border-bottom-color: rgba(140, 196, 239, .5); font-weight: 600; }
:root[data-style="anime"] .exp-tile { border-radius: 12px; box-shadow: 0 0 0 1px rgba(243, 227, 195, .14), 0 18px 40px rgba(0, 0, 0, .45); }
:root[data-style="anime"] :is(.about-book__hint, .about-book__arrow) { font-family: var(--ak-hud); }

/* ── contact: the end card ────────────────────────────────── */
:root[data-style="anime"] .contact h2 {
  font-family: var(--ak-disp);
  font-size: clamp(22px, 3.1vw, 38px);
  font-weight: 400;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff6ec;
  text-shadow: var(--ak-edge);
}
:root[data-style="anime"] .mail {
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--ak-amber);
  border-bottom: 1.5px solid rgba(242, 48, 43, .5);
}
:root[data-style="anime"] .mail::before { content: "◇ "; font-size: .7em; }
:root[data-style="anime"] .mail:hover { color: #fff6ec; border-color: #fff6ec; }
/* the toy's readouts and buttons as HUD panels */
:root[data-style="anime"] .wine__figures { font-family: var(--ak-hud); gap: 6px; }
:root[data-style="anime"] .wine__stat {
  min-width: 0;
  padding: 4px 8px 5px;
  border: 1.5px solid #24324b;
  border-radius: 6px;
  background: rgba(10, 15, 26, .82);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
:root[data-style="anime"] .wine__stat b { font-family: var(--ak-hud); font-weight: 800; font-size: 14px; color: var(--ak-yellow); }
:root[data-style="anime"] .wine__stat small { font-size: 9.5px; }
:root[data-style="anime"] .wine__broke-icons svg { width: 12px; height: 12px; }
:root[data-style="anime"] .wine__stat small { color: var(--ak-amber); font-weight: 700; }
:root[data-style="anime"] .wine__stat dt {
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
:root[data-style="anime"] .wine__broke-icons svg { stroke: var(--ak-amber); }
:root[data-style="anime"] .wine__amp { color: var(--ak-amber); }
:root[data-style="anime"] .wine__tally.is-bumped b { color: var(--ak-orange); }
:root[data-style="anime"] .wine__icon {
  border: 1.5px solid #24324b;
  border-radius: 6px;
  color: var(--ak-cream);
  background: rgba(10, 15, 26, .82);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: hover) and (pointer: fine) {
  :root[data-style="anime"] .wine__icon:hover { color: var(--ak-yellow); border-color: var(--ak-amber); }
}
:root[data-style="anime"] .wine__icon:focus-visible { outline-color: var(--ak-yellow); }
:root[data-style="anime"] .wine__note {
  font-family: var(--ak-hud);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ak-yellow);
  text-shadow: var(--ak-outline-s);
}
@media (min-width: 601px) { :root[data-style="anime"] .wine__note { margin-top: 18px; } }
:root[data-style="anime"] .site-footer { border-top: 1px solid var(--line); background: #070b14; font-weight: 500; }
:root[data-style="anime"] .foot-links a:hover { color: var(--ak-yellow); }

/* ── the light beams (anime.js) ───────────────────────────── */
:root[data-style="anime"] .ak-fx {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 48;
  pointer-events: none;
}
.ak-beam {
  position: absolute;
  width: 0;
}
/* a streak of light: white-hot core, its colour glowing around it */
.ak-beam__trail {
  position: absolute;
  inset: 0 auto 0 -2.5px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--c) 25%, #fff8e6 90%);
  box-shadow: 0 0 8px 1px var(--c), 0 0 26px 5px color-mix(in srgb, var(--c) 50%, transparent);
  transform: scaleY(0);
}
.ak-beam__head {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 46px;
  border-radius: 50%;
  background: #fff8e6;
  box-shadow: 0 0 14px 5px var(--c), 0 0 40px 12px color-mix(in srgb, var(--c) 55%, transparent);
  transform: translate(-50%, -50%);
}
.ak-burst {
  position: absolute;
  width: 0;
  height: 0;
}
.ak-burst > i { position: absolute; left: 0; top: 0; display: block; }
.ak-burst__flash {
  width: 170px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff8e6 30%, var(--c) 60%, transparent);
  transform: translate(-50%, -50%);
  animation: ak-flash .5s steps(5, end) forwards;
}
.ak-burst__ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff8e6;
  box-shadow: 0 0 10px var(--c), inset 0 0 10px var(--c);
  transform: translate(-50%, -50%) scaleY(.4);
  animation: ak-ring .55s steps(6, end) forwards;
}
/* the four-point star at the impact */
.ak-burst__star {
  width: 120px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.4 7 13 9.6 20 10 13 10.4 10.4 13 10 20 9.6 13 7 10.4 0 10 7 9.6 9.6 7 10 0Z' fill='%23fff8e6'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c));
  transform: translate(-50%, -50%) scale(.2);
  animation: ak-star .55s steps(6, end) forwards;
}
.ak-burst__spark {
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.6 6.4 13.6 9.4 20 10 13.6 10.6 10.6 13.6 10 20 9.4 13.6 6.4 10.6 0 10 6.4 9.4 9.4 6.4 10 0Z' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 3px var(--s, #fff)) drop-shadow(0 0 6px var(--s, #fff));
  transform: translate(-50%, -50%);
}
@keyframes ak-flash {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.4, .6); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3, 1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8, .3); }
}
@keyframes ak-ring {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3, .12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5, 1.6); }
}
@keyframes ak-star {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(20deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(45deg); }
}

/* waiting for its beam; then it lights up out of the flash */
:root[data-style="anime"] .ak-wait { opacity: 0 !important; }
:root[data-style="anime"] .ak-in {
  opacity: 1 !important;
  animation: ak-on .54s steps(6, end) backwards !important;
}
@keyframes ak-on {
  0%   { clip-path: inset(100% -30% 0 -30%); filter: brightness(3) saturate(0); }
  40%  { clip-path: inset(-30%); filter: brightness(2) saturate(.5); }
  100% { clip-path: inset(-30%); filter: none; }
}
/* desk items and cards keep their own filters and transforms; they only flash on */
:root[data-style="anime"] :is(.desk-item, .card).ak-in { animation-name: ak-on-flash !important; }
@keyframes ak-on-flash {
  0%   { opacity: .2; }
  30%  { opacity: 1; }
  45%  { opacity: .55; }
  60%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style="anime"] body::before,
  :root[data-style="anime"] .desk-glow::before,
  :root[data-style="anime"] .ak-sky__stars,
  :root[data-style="anime"] .hero-phrase .hero-letter,
  :root[data-style="anime"] .hero-phrase .hero-letter::before,
  :root[data-style="anime"] .hero-phrase .hero-letter::after,
  :root[data-style="anime"] .ak-hud.is-new :is(.ak-hud__goal, .ak-hud__task) { animation: none !important; }
  .ak-wipe { display: none; }
}

/* ── the cursor: a red dot; over anything you can press, a ring around it;
   over things you can pick up, the ring opens wide ─────────────── */
@media (hover: hover) and (pointer: fine) {
  :root[data-style="anime"],
  :root[data-style="anime"] body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='5' fill='%23f2302b' stroke='%2305080f' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, default;
  }
  :root[data-style="anime"] :is(a, button, [role="button"], label, summary, select, .card, .hero-phrase, .style-switch__opt),
  :root[data-style="anime"] :is(a, button, [role="button"], .card) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23fff6ec' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='%23f2302b' stroke='%2305080f' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, pointer;
  }
  :root[data-style="anime"] :is(.desk-item, .desk-fan, .desk-item *, .desk-fan *),
  :root[data-style="anime"] .wine__stage canvas[style*="grab"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='15' fill='none' stroke='%23f2302b' stroke-width='2' stroke-dasharray='5 4'/%3E%3Ccircle cx='20' cy='20' r='4' fill='%23f2302b' stroke='%2305080f' stroke-width='1.5'/%3E%3C/svg%3E") 20 20, grab !important;
  }
  :root[data-style="anime"] :is(.desk-item.is-dragging, .desk-item.is-dragging *),
  :root[data-style="anime"] .contact.is-grabbing .wine__stage canvas {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='9' fill='none' stroke='%23f2302b' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='20' r='4' fill='%23f2302b'/%3E%3C/svg%3E") 20 20, grabbing !important;
  }
  :root[data-style="anime"] :is(input, textarea, [contenteditable="true"]) { cursor: text; }
}