/* The home page is a set of scenes; product and legal pages keep their own CSS. */
.home-page {
  --paper: #f7f5f1;
  --ink-home: #24272c;
  --tension: 0;
  margin: 0;
  background: #0c1427;
  color: var(--ink-home);
}
.home-page .landing { overflow: hidden; }
.home-page :focus-visible { outline: 3px solid #e3c076; outline-offset: 5px; }
.home-page .skip { z-index: 40; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.landing-header {
  position: absolute; inset: 0 0 auto; z-index: 9; text-align: center;
  padding: 19px 18px 0;
}
.landing-header nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 34px; }
.landing-header a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fdf4e8; font-size: 13px; letter-spacing: .12em; text-decoration: none;
}
.landing-header a:hover, .landing-header a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.home-page .opening, .home-page .work-scene, .home-page .grounded-info section { margin: 0; }
.opening {
  position: relative; height: clamp(540px, 76svh, 820px);
  display: grid; place-items: center; text-align: center;
  color: #fbf3e9;
  background: linear-gradient(to bottom,
    #12244b 0%, #2c3156 22%, #674563 44%, #af667c 60%,
    #e39588 72%, #f3b184 84%, #f9d59c 91%, #d58e92 95%, #353152 100%);
}
.opening__content { position: relative; z-index: 1; transform: translateY(-30px); padding: 70px 18px 50px; }
.opening__content.is-detached { opacity: 0; transition: opacity 1.5s ease; }
.opening__mark { width: 62px; height: 62px; margin: 0 auto 16px; filter: drop-shadow(0 0 13px #e3c07680); }
.opening h1 {
  margin: 0; border: 0; padding: 0; color: #fff8ee; background: none;
  -webkit-text-fill-color: initial; filter: none;
  font-family: "Hiragino Mincho ProN","Yu Mincho",serif;
  font-size: clamp(42px, 6.6vw, 84px); font-weight: 400;
  letter-spacing: .16em; text-indent: .16em; line-height: 1.4;
}
.opening__lead { margin-top: 12px; color: #fff6ea; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .22em; }
.opening__next {
  position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: 90%;
  color: #fff8ea; text-decoration: none; font-size: 12px; letter-spacing: .09em;
}
.opening__next span { font-size: 22px; line-height: 1; }
.opening__next:hover { text-decoration: underline; text-underline-offset: 4px; }
.work-stages { position: relative; isolation: isolate; }
.thread-rail {
  position: absolute; z-index: 3; inset: 0; width: 100%; pointer-events: none;
}
.thread-strand {
  position: absolute; top: 0; left: 50%; height: 20%; width: 1px;
  background: linear-gradient(to bottom,#efbf78,#b7a68e);
  transform-origin: top; transition: transform 3s ease, opacity 1.8s ease;
}
.thread-strand:nth-child(2) { top: 20%; background: #a7a7a3; }
.thread-strand:nth-child(3) { top: 40%; background: #93a485; }
.thread-strand:nth-child(4) { top: 60%; background: #82c2b4; }
.thread-strand:nth-child(5) { top: 80%; background: #e5bf78; }
.thread-knot {
  position: absolute; left: calc(50% - 5px); width: 10px; height: 10px;
  border-radius: 50%; border: 1px solid #dabf91; background: #f7efdf;
  box-shadow: 0 0 12px #e3c07655;
  transition: transform 3s ease, opacity 2s ease;
}
.thread-knot:nth-child(6) { top: 7%; }
.thread-knot:nth-child(7) { top: 27%; }
.thread-knot:nth-child(8) { top: 47%; }
.thread-knot:nth-child(9) { top: 67%; }
.thread-knot:nth-child(10) { top: 87%; }
.home-page.is-worn .thread-strand:nth-child(odd) { transform: translateX(calc(var(--tension) * 13px)) rotate(calc(var(--tension) * 2deg)); }
.home-page.is-worn .thread-strand:nth-child(even) { transform: translateX(calc(var(--tension) * -12px)) rotate(calc(var(--tension) * -2deg)); }
.home-page.is-worn .thread-knot { transform: translate(calc(var(--tension) * 9px), calc(var(--tension) * 7px)); }
.home-page.is-settled .thread-strand, .home-page.is-settled .thread-knot { opacity: .06; }
.thread-strand.is-detached, .thread-knot.is-detached { opacity: 0 !important; }
.work-scene { position: relative; min-height: 610px; overflow: hidden; }
.scene-inner {
  position: relative; z-index: 2; width: min(1200px, 100% - 96px); min-height: 610px;
  margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7%;
}
.scene-copy, .scene-art { transition: transform 3s ease, opacity .9s ease; }
.scene-copy { position: relative; z-index: 4; max-width: 490px; }
.home-page .scene-index, .home-page .scene-phrase, .home-page .scene-description, .home-page .scene-status {
  margin: 0; color: inherit;
}
.scene-index { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; opacity: .75; }
.scene-phrase {
  margin-top: 28px !important; font-family: "Hiragino Mincho ProN","Yu Mincho",serif;
  font-size: clamp(16px, 1.8vw, 22px); letter-spacing: .1em;
}
.home-page .scene-copy h3 {
  margin: 6px 0 12px; padding: 0; border: 0; color: inherit;
  font-family: "Hiragino Mincho ProN","Yu Mincho",serif;
  font-size: clamp(40px, 5vw, 70px); font-weight: 400; letter-spacing: .1em;
  line-height: 1.35;
}
.scene-description { font-size: clamp(14px, 1.3vw, 17px); line-height: 1.8; }
.scene-status { margin-top: 18px !important; font-size: 12px; opacity: .75; letter-spacing: .06em; }
.scene-link {
  display: inline-flex; align-items: center; gap: 16px; min-height: 48px;
  margin-top: 19px; border-bottom: 1px solid currentColor;
  color: inherit; text-decoration: none; font-size: 14px; letter-spacing: .08em;
}
.scene-link:hover { gap: 23px; }
.scene-art { position: relative; min-width: 0; }
.scene-engi {
  color: #eee7e6;
  background: radial-gradient(ellipse at 78% 49%,#171f39 0%,#0b1227 48%,#090e1d 100%);
}
.scene-art--engi { width: min(650px, 59vw); justify-self: center; transform: translateX(8%); }
.scene-art--engi img { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
.loose-node {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: #f2cc84; box-shadow: 0 0 14px 5px #e3c07670;
}
.loose-node:nth-child(2) { top: 19%; left: 53%; }
.loose-node:nth-child(3) { top: 43%; left: 21%; }
.loose-node:nth-child(4) { top: 76%; left: 39%; }
.loose-node:nth-child(5) { top: 65%; left: 78%; }
.scene-art--engi.is-unraveling img { transform: rotate(-2deg) translateY(6px); transition: transform .8s ease; }
.scene-square { color: #2e2f2e; background: #f7f6f2; }
.scene-art--square {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
  width: min(430px, 38vw); aspect-ratio: 1; transform: translateX(-7%);
}
.scene-art--square span { background: #cccac4; border-radius: 13px; transition: transform 2s ease, opacity 1.8s ease; }
.scene-art--square span.different { background: #989892; }
.scene-square .scene-copy { justify-self: end; }
.scene-square .scene-copy h3 { font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif; font-size: clamp(36px,4.2vw,58px); font-weight: 650; letter-spacing: .05em; }
.scene-yurushisan { color: #343d36; background: #f2e9d8; }
.scene-yurushisan .scene-copy h3 { font-size: clamp(34px,4.2vw,57px); }
.scene-art--yurushisan { align-self: stretch; width: min(560px, 50vw); display: flex; align-items: end; }
.gentle-graph { position: absolute; inset: 16% -10% 8% -24%; width: 130%; height: 76%; color: #7d9a7a; }
.gentle-graph circle { fill: #e8e9d4; stroke: #7d9a7a; stroke-width: 2; }
.gentle-graph path { stroke-dasharray: 850; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s ease; }
.scene-art--yurushisan.is-unraveling .gentle-graph path { stroke-dashoffset: 850; }
.scene-art--yurushisan img { position: relative; z-index: 1; display: block; width: min(100%,459px); height: auto; margin: 0 auto 100px; }
.scene-gemseed {
  color: #e9efe9;
  background: radial-gradient(ellipse at 24% 52%, #15302f 0%, #0d1a1e 46%, #0a1013 100%);
}
.scene-gemseed .scene-copy h3 { letter-spacing: .26em; font-size: clamp(34px,4.6vw,62px); }
.scene-art--gemseed { position: relative; width: min(500px, 44vw); justify-self: center; transform: translateX(-4%); }
.scene-art--gemseed img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 30px #4fd8b04d); }
.scene-art--gemseed img { transition: transform 2.4s ease; }
.scene-art--gemseed.is-unraveling img { transform: rotate(-5deg) translateY(10px) scale(.97); }
.scene-startrace {
  color: #f7f3e9;
  background-color: #0b152e;
  background-image: radial-gradient(circle at 8% 35%,#e6d8b4 1px,transparent 2px),radial-gradient(circle at 31% 77%,#a8b6d4 1px,transparent 2px),radial-gradient(circle at 73% 19%,#e6d8b4 1px,transparent 2px);
  background-size: 360px 260px, 270px 300px, 420px 330px;
}
.scene-art--startrace { width: min(670px,58vw); justify-self: center; color: #e8c17e; transform: translateX(7%); filter: drop-shadow(0 0 7px #e6ba7880); }
.scene-art--startrace svg { display: block; width: 100%; height: auto; }
.scene-art--startrace svg path { stroke-dasharray: 950; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s ease; }
.scene-art--startrace.is-unraveling svg path { stroke-dashoffset: 950; }
.scene-art--startrace svg circle { transition: opacity 1.8s ease; }
.home-page.is-worn .scene-engi .scene-art { transform: translateX(8%) rotate(calc(var(--tension) * -1deg)); }
.home-page.is-worn .scene-square .scene-art { transform: translateX(-7%) rotate(calc(var(--tension) * 1deg)); }
.home-page.is-worn .scene-yurushisan .scene-art, .home-page.is-worn .scene-startrace .scene-art { transform: translateX(calc(var(--tension) * 7px)) rotate(calc(var(--tension) * -1deg)); }
.home-page.is-worn .scene-gemseed .scene-art { transform: translateX(-4%) rotate(calc(var(--tension) * 1deg)); }
.home-page.is-worn .scene-copy { transform: translate(calc(var(--tension) * 5px), calc(var(--tension) * 4px)) rotate(calc(var(--tension) * -.35deg)); }
.home-page.is-worn .scene-art--square span:nth-child(5n+2) { transform: translateY(calc(var(--tension) * 5px)); }
.fallen-placeholder { display: inline-block; visibility: hidden; pointer-events: none; }
.text-fragment { display: inline-block; white-space: pre; }
.grounded-info { background: #f8f6f0; color: #303a38; padding: 85px max(24px, calc((100% - 980px)/2)) 45px; }
.grounded-info section { border-bottom: 1px solid #cdd4ce; padding: 24px 0 54px; }
.grounded-info section + section { padding-top: 54px; }
.grounded-info__eyebrow { font-size: 11px; letter-spacing: .28em; color: #537062 !important; }
.home-page .grounded-info h2 {
  margin: 9px 0 15px; border: 0; padding: 0; font-size: clamp(23px,3vw,32px);
  color: inherit; font-weight: 600;
}
.grounded-info p { color: #39443f; font-size: 15px; }
.grounded-info a { color: #315b4e; }
.contact-email { display: inline-block; padding: 13px 0; overflow-wrap: anywhere; }
.info-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.info-links h3 { margin: 0 0 10px; color: #303a38; font-size: 15px; }
.info-links a { display: block; width: fit-content; padding: 7px 0; font-size: 13px; }
.english p { max-width: 730px; }
.grounded-footer { padding: 36px 0 0; margin: 0; text-align: left; color: #5b665f; }
.fallen-ground {
  position: relative; min-height: 680px; padding: 20px 24px 55px;
  background: #f8f6f0;
}
.scrap-field { position: relative; height: 605px; max-width: 1000px; margin: 0 auto; }
.falling-piece {
  position: fixed !important; z-index: 30 !important; margin: 0 !important;
  pointer-events: none !important; transition: none !important;
}
.fallen-piece {
  position: absolute !important; margin: 0 !important; pointer-events: none !important;
  transition: none !important; user-select: none;
}
.fallen-piece.text-fragment { color: #39443f !important; }
@media (max-width: 760px) {
  .landing-header { padding-top: 6px; }
  .landing-header nav { gap: 0 18px; }
  .landing-header a { font-size: 11px; }
  .opening { height: clamp(470px, 70svh, 650px); }
  .opening__content { transform: translateY(-16px); }
  .opening__mark { width: 52px; height: 52px; }
  .opening h1 { font-size: clamp(34px,9vw,52px); }
  .opening__next { bottom: 30px; font-size: 11px; }
  .work-scene, .scene-inner { min-height: 670px; }
  .scene-inner { width: min(100% - 40px, 560px); display: flex; flex-direction: column; justify-content: center; gap: 25px; align-items: stretch; padding: 55px 0; }
  .thread-strand { left: 91%; }
  .thread-knot { left: calc(91% - 5px); }
  .scene-copy { order: 0; max-width: min(100%,500px); }
  .scene-index { font-size: 11px; }
  .scene-phrase { margin-top: 12px !important; }
  .home-page .scene-copy h3 { font-size: clamp(34px,10vw,52px); margin-bottom: 8px; }
  .scene-description { max-width: 380px; }
  .scene-status { margin-top: 12px !important; }
  .scene-link { margin-top: 10px; }
  .scene-art { order: 1; align-self: center; }
  .scene-art--engi { width: min(94%,370px); transform: none; }
  .scene-art--square { width: min(78vw,300px); gap: 11px; transform: none; }
  .scene-square .scene-copy { align-self: stretch; }
  .scene-art--yurushisan { align-self: center; height: 215px; width: min(95%,420px); }
  .scene-art--yurushisan img { margin-bottom: 16px; }
  .scene-art--gemseed { width: min(78vw,340px); transform: none; }
}

@media (max-width: 380px) {
  .landing-header nav { gap: 0 11px; }
  .landing-header a { font-size: 10px; }
  .scene-inner { width: calc(100% - 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}


/* Sixth product scene; threads keep one segment per work. */
.scene-field-bingo { color:#19483e; background:radial-gradient(ellipse at 26% 48%,#e1efc1,#f4f7ed 70%); }
.scene-art--field-bingo { width:min(440px,43vw); justify-self:center; transform:rotate(-4deg); }
.scene-art--field-bingo img { width:100%; height:auto; aspect-ratio:1; border-radius:30px; box-shadow:0 20px 45px #294c3820; }
.scene-art--field-bingo.is-unraveling { transform:rotate(6deg) translateY(10px); }
.thread-rail .thread-strand { height:calc(100% / var(--scene-count,5)); top:calc(var(--thread-index,0) * 100% / var(--scene-count,5)); }
.thread-rail .thread-knot { top:calc((var(--thread-index,0) + .35) * 100% / var(--scene-count,5)); }
.thread-rail .thread-strand:nth-child(5) { background:#a7c576; }
.thread-rail .thread-strand:nth-child(6) { background:#8f78b8; }
.thread-rail .thread-strand:nth-child(7) { background:#e5bf78; }
@media(max-width:760px) { .scene-art--field-bingo { width:min(75vw,300px); transform:rotate(-3deg); } }

/* Seventh product scene (Yusha no Hakaba). Dark violet with a single lantern, like the game. */
.scene-hakaba { color:#ece6d8; background:radial-gradient(ellipse at 74% 48%,#2a1d3d 0%,#15111f 48%,#0b0912 100%); }
.scene-hakaba .scene-copy h3 { font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",Georgia,serif; letter-spacing:.2em; font-size:clamp(34px,4.6vw,60px); color:#e8c46a; }
.scene-art--hakaba { position:relative; width:min(330px,34vw); justify-self:center; }
.scene-art--hakaba img { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:22%; image-rendering:pixelated; box-shadow:0 0 0 1px #e8c46a47,0 0 70px 6px #f0b25a38,0 22px 50px #0009; transition:transform 2.4s ease; }
.scene-art--hakaba.is-unraveling img { transform:rotate(5deg) translateY(10px) scale(.97); }
.home-page.is-worn .scene-hakaba .scene-art { transform:translateX(calc(var(--tension) * 6px)) rotate(calc(var(--tension) * -1deg)); }
@media(max-width:760px) { .scene-art--hakaba { width:min(52vw,210px); } }

/* Eighth product scene (KOTOKOTO). Graphite like the app's dark face, dial ticks around the icon and one signal-orange pointer. */
.scene-kotokoto { color:#ece9e2; background:radial-gradient(ellipse at 28% 50%,#26272a 0%,#17181a 52%,#0f1012 100%); }
.scene-kotokoto .scene-copy h3 { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700; letter-spacing:.24em; font-size:clamp(32px,4.4vw,58px); }
.scene-kotokoto .scene-phrase, .scene-kotokoto .scene-link { color:#e8843a; }
.scene-art--kotokoto { position:relative; width:min(300px,30vw); justify-self:center; transition:transform 2.4s ease; }
.scene-art--kotokoto::before { content:""; position:absolute; inset:-22%; border-radius:50%; background:repeating-conic-gradient(from -1deg,#ece9e22e 0 1.2deg,transparent 1.2deg 15deg); -webkit-mask:radial-gradient(circle closest-side,transparent 0 86%,#000 86.5% 100%); mask:radial-gradient(circle closest-side,transparent 0 86%,#000 86.5% 100%); }
.scene-art--kotokoto img { position:relative; display:block; width:100%; height:auto; aspect-ratio:1; border-radius:22%; box-shadow:0 0 0 1px #ece9e22e,0 22px 50px #0009; }
.scene-art--kotokoto.is-unraveling { transform:rotate(-15deg) translateY(10px); }
.home-page.is-worn .scene-kotokoto .scene-art { transform:translateX(calc(var(--tension) * -6px)) rotate(calc(var(--tension) * 1deg)); }
@media(max-width:760px) { .scene-art--kotokoto { width:min(46vw,190px); } }

/* Works are split into iPhone apps and web apps. Each group opens with a quiet
   band and carries its own thread rail, one strand per scene. */
.home-page .work-group { margin: 0; position: relative; }
.work-group__head {
  position: relative; z-index: 4; text-align: center;
  padding: 96px 24px 80px; color: #fbf3e9;
}
.work-group--ios .work-group__head { background: linear-gradient(to bottom, #353152, #090e1d); }
.work-group--web .work-group__head { background: linear-gradient(to bottom, #0b0912, #0b152e); }
.home-page .work-group__eyebrow, .home-page .work-group__lead { margin: 0; color: inherit; }
.work-group__eyebrow { font-size: 11px; letter-spacing: .34em; opacity: .7; }
.home-page .work-group__head h2 {
  margin: 14px 0 10px; padding: 0; border: 0; color: inherit;
  font-family: "Hiragino Mincho ProN","Yu Mincho",serif;
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 400;
  letter-spacing: .14em; text-indent: .14em; line-height: 1.4;
}
.work-group__lead { font-size: clamp(13px, 1.3vw, 15px); letter-spacing: .08em; opacity: .82; }
.work-group--web .thread-rail .thread-strand:nth-child(1) { background:#e5bf78; }
.work-group--web .thread-rail .thread-strand:nth-child(2) { background:#8fc8c4; }
.work-group--web .thread-rail .thread-strand:nth-child(3) { background:#7fe3ff; }

/* Sakigaki (web). A glowing line drawn just ahead of a white ball, as in the game. */
.scene-sakigaki { color:#e8eef2; background:radial-gradient(ellipse at 32% 55%,#10202a 0%,#0b0f14 52%,#080b0f 100%); }
.scene-sakigaki .scene-copy { justify-self: end; }
.scene-sakigaki .scene-copy h3 {
  font-family:"Hiragino Kaku Gothic StdN","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  font-weight:800; font-size:clamp(38px,4.8vw,66px); letter-spacing:.08em;
}
.scene-art--sakigaki { width:min(640px,56vw); justify-self:center; transform:translateX(-6%); }
.scene-art--sakigaki svg { display:block; width:100%; height:auto; overflow:visible; }
.scene-art--sakigaki .band-edge { stroke:#22313d; stroke-width:1; stroke-dasharray:2 8; }
.scene-art--sakigaki .lead-line {
  filter:drop-shadow(0 0 6px #7fe3ff99);
  stroke-dasharray:640; stroke-dashoffset:0; transition:stroke-dashoffset 2.4s ease;
}
.scene-art--sakigaki.is-unraveling .lead-line { stroke-dashoffset:640; }
.scene-art--sakigaki .flight { stroke:#ffb347; stroke-width:2; stroke-dasharray:2 8; stroke-linecap:round; }
.scene-art--sakigaki .ring { fill:none; stroke:#ffb347; stroke-width:2.5; filter:drop-shadow(0 0 5px #ffb34799); }
.scene-art--sakigaki .ball { fill:#ffffff; filter:drop-shadow(0 0 8px #ffffffaa); }
.home-page.is-worn .scene-sakigaki .scene-art { transform:translateX(-6%) rotate(calc(var(--tension) * 1deg)); }
@media(max-width:760px) {
  .work-group__head { padding: 72px 20px 60px; }
  .scene-art--sakigaki { width:min(94%,420px); transform:none; }
  .home-page.is-worn .scene-sakigaki .scene-art { transform:rotate(calc(var(--tension) * 1deg)); }
}

/* Zankyo (web). A pale whale from above, the rings of its voice, and a far light to swim toward. */
.scene-zankyo { color:#e9e2d0; background:radial-gradient(ellipse at 72% 50%,#0a1a22 0%,#050d13 54%,#02060a 100%); }
.scene-zankyo .scene-copy h3 {
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700;
  font-size:clamp(40px,5vw,70px); letter-spacing:.2em; text-indent:.2em;
}
.scene-art--zankyo { width:min(660px,58vw); justify-self:center; transform:translateX(5%); }
.scene-art--zankyo svg { display:block; width:100%; height:auto; overflow:visible; }
.scene-art--zankyo .ripples ellipse { stroke:#4fb0c0; stroke-width:1.4; stroke-dasharray:1 9; opacity:.7; }
.scene-art--zankyo .ripples ellipse:nth-child(2) { opacity:.5; }
.scene-art--zankyo .ripples ellipse:nth-child(3) { opacity:.34; }
.scene-art--zankyo .ripples ellipse:nth-child(4) { opacity:.2; }
.scene-art--zankyo .crack { stroke:#c01818; stroke-width:1.2; stroke-linejoin:round; opacity:.75; filter:drop-shadow(0 0 3px #c0181866); }
.scene-art--zankyo .whale path { fill:#e9e2d0; filter:drop-shadow(0 0 10px #e9e2d044); }
.scene-art--zankyo .exit { fill:#8fe8e0; filter:drop-shadow(0 0 6px #4fb0c0); }
.scene-art--zankyo .exit-halo { fill:none; stroke:#4fb0c0; stroke-width:1; stroke-opacity:.45; }
.scene-art--zankyo .ripples ellipse, .scene-art--zankyo .crack { transition:opacity 1.8s ease; }
.scene-art--zankyo.is-unraveling .ripples ellipse, .scene-art--zankyo.is-unraveling .crack { opacity:0; }
.home-page.is-worn .scene-zankyo .scene-art { transform:translateX(5%) rotate(calc(var(--tension) * -1deg)); }
@media(max-width:760px) {
  .scene-art--zankyo { width:min(94%,420px); transform:none; }
  .home-page.is-worn .scene-zankyo .scene-art { transform:rotate(calc(var(--tension) * -1deg)); }
}