/* Three signature effects, loaded only by the Japanese/English TEST pages. */
.biot-test .profile-hero { position: relative; isolation: isolate; overflow: hidden; }
.biot-test .profile-hero > :not(.biot-hero-sweep) { position: relative; z-index: 1; }
.biot-test .biot-star-intro { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; width: 100%; height: 76px; min-height: 76px; padding: 8px 14px; margin: 0; border: 0; border-bottom: 1px solid #a4e9c325; background: transparent; pointer-events: none; }
.biot-test .biot-star-intro.is-opening { background: linear-gradient(110deg,#a4e9c308,transparent); }
.biot-test .biot-star-intro svg { width: 180px; height: 72px; flex: 0 1 180px; min-width: 90px; }
.biot-test .biot-star-intro path { stroke: #8cc9a47a; stroke-width: 1; fill: none; }
.biot-test .biot-star-intro circle { fill: #c9f8db; }
.biot-test .biot-star-caption { display: grid; gap: 6px; flex: 1; min-width: 0; }
.biot-test .biot-star-caption small { font-size: 10px; letter-spacing: .16em; color: #92bfa5; }
.biot-test .biot-star-caption strong { font-size: 19px; font-weight: 500; color: #d6f4e2; }
.biot-test .biot-motion-note { font-size: 10px; color: #b4c9bc; line-height: 1.5; }
.biot-test .biot-motion-note[hidden] { display: none; }
.biot-test .biot-motion-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.biot-test .biot-star-intro button { z-index: 1; min-height: 44px; padding: 6px 10px; background: #13271c; color: #c6dfd0; border: 1px solid #88bd9c50; border-radius: 8px; cursor: pointer; font: inherit; font-size: 11px; }
.biot-test .biot-star-intro button[hidden] { display: none; }
.biot-test .biot-star-intro::after { content: ''; pointer-events: none; position: absolute; inset: 0; opacity: 0; background: linear-gradient(100deg,transparent 30%,#b0ebcb20 50%,transparent 70%); transform: translateX(-100%); }
.biot-test .biot-hero-sweep { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(105deg,transparent 32%,#aeeecb12 42%,#dcffe62a 50%,#aeeecb12 58%,transparent 68%); }
.biot-test .biot-hero-opening>.biot-hero-sweep { animation: biot-star-sweep 1200ms ease-in-out; }
.biot-test .biot-star-intro.is-opening path { stroke: #b4f6cf; stroke-dasharray: 1; animation: biot-star-connect 700ms ease-out both; }
.biot-test .biot-star-intro.is-opening circle { transform-box: fill-box; transform-origin: center; animation: biot-star-light 350ms ease-out both; animation-delay: var(--star-delay); }
.biot-test .biot-star-intro.is-opening .biot-star-caption strong { animation: biot-star-name 350ms 750ms ease-out both; }
.biot-test .biot-star-intro button:disabled { opacity: .7; cursor: default; }
@keyframes biot-star-sweep { 0% { opacity: 0; transform: translateX(-100%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes biot-star-light { 0% { opacity: 0; transform: scale(.4); } 65% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 4px #bdffda); } 100% { opacity: 1; transform: scale(1); } }
@keyframes biot-star-connect { from { stroke-dashoffset: 1; opacity: .15; } to { stroke-dashoffset: 0; opacity: 1; } }
/* The name stays legible through every loop; only its emphasis changes. */
@keyframes biot-star-name { from { opacity: .7; text-shadow: 0 0 0 transparent; } to { opacity: 1; text-shadow: 0 0 12px #a4e9c333; } }
.biot-test .biot-element-row { width: 100%; min-height: 38px; padding: 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; font: inherit; text-align: left; cursor: pointer; opacity: 1 !important; }
.biot-test .biot-element-row[aria-pressed="true"] { background: #a4e9c30c; border-color: #9adbb24d; }
.biot-test .biot-element-fill { transform-origin: left center; transition: opacity 160ms ease; }
.biot-test .biot-element-row.is-muted .biot-element-fill { opacity: .25; }
.biot-test .biot-element-row { transition: border-color 160ms ease,background-color 160ms ease; }
.biot-test .biot-element-row[aria-pressed="true"] { box-shadow: inset 3px 0 0 #b4e9c8; }
.biot-test .biot-effects-note { font-size: 12px; line-height: 1.7; color: var(--text-dim); margin-top: 10px; }
.biot-test .biot-flip-shell { perspective: 1100px; margin-bottom: 18px; }
.biot-test .biot-flip-surface { display: grid; transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.biot-test .biot-flip-shell.is-flipped .biot-flip-surface { transform: rotateY(180deg); }
.biot-test .biot-flip-front,.biot-test .biot-flip-back { grid-area: 1/1; min-width: 0; min-height: 220px; padding: 22px; border: 1px solid #a4e9c333; border-radius: 16px; backface-visibility: hidden; background: linear-gradient(140deg,#243b2d,#132119); }
.biot-test .biot-flip-front { position: relative; overflow: hidden; display: flex; align-items: center; }
.biot-test .biot-flip-back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; }
.biot-test .biot-flip-back h3 { font-size: 18px; color: #c5eed7; }
.biot-test .biot-type-face { width: 100%; margin-bottom: 0 !important; }
.biot-test .biot-type-face>div { min-width: 0 !important; }
.biot-test .biot-type-face>div:last-child { margin-left: 0 !important; }
.biot-test .biot-type-portrait { flex-shrink: 0; width: 100px !important; height: 100px !important; }
.biot-test .biot-flip-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 30%,#ffe6aa18 50%,transparent 70%); opacity: 0; }
.biot-test .biot-type-reveal::after { animation: biot-star-sweep 700ms ease-out; }
.biot-test .biot-flip-toggle { display: block; width: 100%; margin: 0 0 12px; min-height: 44px; padding: 10px 18px; border: 1px solid #95d3ad66; border-radius: 999px; color: #c8efd8; background: #223d2d; cursor: pointer; font: inherit; font-size: 13px; }
@media(max-width:620px) {
  .biot-test .biot-star-intro { gap: 8px; padding: 8px; }
  .biot-test .biot-star-intro svg { flex: 0 1 100px; width: 100px; }
  .biot-test .biot-star-caption { padding-bottom: 0; }
  .biot-test .biot-star-caption small { font-size: 8px; }
  .biot-test .biot-flip-front,.biot-test .biot-flip-back { padding: 16px; }
  .biot-test .biot-type-face { flex-direction: column; align-items: flex-start !important; }
  .biot-test .biot-type-portrait { width: 80px !important; height: 80px !important; }
}
@media(prefers-reduced-motion:reduce) {
  .biot-test:not(.biot-motion-enabled) .biot-star-intro.is-opening:not(.biot-opening-opt-in)::after,.biot-test:not(.biot-motion-enabled) .biot-star-intro.is-opening:not(.biot-opening-opt-in) circle,.biot-test:not(.biot-motion-enabled) .biot-type-reveal::after,.biot-test:not(.biot-motion-enabled) .biot-star-intro.is-opening:not(.biot-opening-opt-in) path,.biot-test:not(.biot-motion-enabled) .biot-star-intro.is-opening:not(.biot-opening-opt-in) .biot-star-caption strong,.biot-test:not(.biot-motion-enabled) .biot-hero-opening:not(.biot-opening-opt-in)>.biot-hero-sweep { animation: none; }
  .biot-test:not(.biot-motion-enabled) .biot-flip-surface,.biot-test:not(.biot-motion-enabled) .biot-element-fill { transition: none; }
}
.biot-test.biot-motion-disabled .biot-flip-surface,.biot-test.biot-motion-disabled .biot-element-fill { transition: none; }
.biot-test .biot-motion-toggle { position: relative; z-index: 1; margin-left: auto; min-height: 36px; flex-shrink: 0; border: 1px solid #91bda54d; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 11px; color: #c6dfd0; background: #14281e; cursor: pointer; }
.biot-test .biot-body-map { position: relative; isolation: isolate; }
.biot-test .biot-body-layout { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(280px,1.2fr); gap: 20px; align-items: center; }
.biot-test .biot-body-sky { display: block; width: 100%; height: 280px; max-width: 440px; margin: 8px auto 16px; border-radius: 20px; background: radial-gradient(ellipse at center,#25453380,transparent 70%); }
.biot-test .biot-body-lines { pointer-events: none; }
.biot-test .biot-body-lines path { fill: none; stroke: #bdf8d8; stroke-width: 1.4; stroke-dasharray: 1; filter: drop-shadow(0 0 2px #bdf8d8); }
.biot-test .biot-map-star { cursor: pointer; outline: none; }
.biot-test .biot-map-hit { fill: transparent; }
.biot-test .biot-map-dot { fill: #87b69b; }
.biot-test .biot-map-ring { fill: none; stroke: #b4e9c8; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.biot-test .biot-map-star[aria-pressed="true"] .biot-map-ring { opacity: .5; }
.biot-test .biot-map-star[aria-pressed="true"] text { fill: #e2ffef; }
.biot-test .biot-map-star text { font: 11px sans-serif; fill: #b9d6c5; }
.biot-test .biot-map-star[aria-pressed="true"] .biot-map-dot,.biot-test .biot-map-star:focus .biot-map-dot { fill: #dfffee; stroke: #b8ffda66; stroke-width: 8; filter: drop-shadow(0 0 4px #bbefcf); }
.biot-test .jcell { position: relative; min-width: 0; cursor: pointer; }
.biot-test .jcell[aria-pressed="true"] { border-color: #c1ffdf !important; background: #1d4030 !important; box-shadow: 0 0 16px #8ed5ac24,inset 0 0 18px #83d2a91a; }
.biot-test .biot-body-point { display: block; width: 24px; margin: 0 auto 4px; color: #729982; font-size: 20px; }
.biot-test .jcell[aria-pressed="true"] .biot-body-point { color: #dcffe9; text-shadow: 0 0 12px #9bffc5; }
.biot-test .biot-star-reading,.biot-test .biot-curve-detail { margin: 14px 0; padding: 14px 16px; border: 1px solid #a4e9c333; border-radius: 12px; background: #1a322666; color: #cbded2; font-size: 13px; line-height: 1.8; }
.biot-test .biot-star-reading h3 { color: #d2f4e0; font-size: 16px; margin: 0 0 8px; }
.biot-test .biot-star-reading p,.biot-test .biot-curve-detail p { margin: 6px 0 0; }
.biot-test .biot-curve { margin: 12px 0 18px; }
.biot-test .biot-curve-scroll { overflow-x: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #527c63 #13251b; }
.biot-test .biot-curve-scroll::-webkit-scrollbar { height: 5px; }
.biot-test .biot-curve-scroll::-webkit-scrollbar-track { background: #13251b; }
.biot-test .biot-curve-scroll::-webkit-scrollbar-thumb { background: #527c63; border-radius: 5px; }
.biot-test .biot-curve-guide { stroke: #e8cd8b; stroke-width: 1; stroke-dasharray: 3 5; pointer-events: none; }
.biot-test .biot-curve-svg { display: block; width: 100%; min-width: 620px; overflow: visible; }
.biot-test .biot-curve-svg text { fill: #adc7b8; font: 11px sans-serif; }
.biot-test .biot-curve-grid { stroke: #a4e9c318; stroke-width: 1; }
.biot-test .biot-curve-line { fill: none; stroke: #9deac3; stroke-width: 2.5; stroke-dasharray: 1; stroke-linejoin: round; }
.biot-test .biot-curve-point { cursor: pointer; outline: none; }
.biot-test .biot-curve-hit { fill: transparent; }
.biot-test .biot-curve-dot { fill: #90bda4; stroke: #12261c; stroke-width: 2; }
.biot-test .biot-curve-point[aria-pressed="true"] .biot-curve-dot,.biot-test .biot-curve-point:focus .biot-curve-dot { fill: #fff2b6; stroke: #fff2b6; stroke-width: 4; }
.biot-test .biot-curve-now { pointer-events: none; }
.biot-test .biot-curve-now circle { fill: none; stroke: #efc77a; stroke-width: 1.5; }
.biot-test .biot-curve-now text { fill: #efc77a; }
.biot-test .biot-year-select { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: #adc7b8; white-space: nowrap; }
.biot-test .biot-year-select select { flex: 1; min-width: 0; width: auto; min-height: 40px; padding: 6px 12px; color: #d2e9dc; background: #14281e; border: 1px solid #a4e9c34d; border-radius: 8px; }
.biot-test .biot-goal-card { position: relative; }
.biot-test .biot-goal-spark { position: absolute; pointer-events: none; top: 16px; right: 20px; color: #ffe7aa; font-size: 24px; text-shadow: 0 0 12px #ffdf91; }
.biot-test .biot-save-status,.biot-test .biot-share-status { margin: 10px 0; font-size: 12px; color: #d7e9cf; line-height: 1.7; }
.biot-test .biot-save-status[role="alert"] { color: #ffd29a; }
.biot-test .biot-share-image { width: 100%; max-width: 420px; border: 1px solid var(--border); border-radius: 10px; display: block; margin: 12px auto 8px; transform-origin: bottom center; }
.biot-test .biot-share-image[hidden] { display: none; }
.biot-test .biot-heading { position: relative; isolation: isolate; }
.biot-test .biot-ambient { position: absolute; inset: -8px 0; pointer-events: none; z-index: -1; overflow: hidden; }
.biot-test .biot-ambient i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c4e8d2; opacity: .25; box-shadow: 0 0 5px #c4e8d288; }
@media(min-width:761px) and (pointer:fine) {
  .biot-test .biot-ambient i { animation: biot-ambient-star 4.8s ease-in-out infinite; animation-play-state: paused; }
  .biot-test .biot-ambient.is-active i { animation-play-state: running; }
}
@keyframes biot-ambient-star { 0%,100% { opacity: .15; } 50% { opacity: .65; } }
@media(prefers-reduced-motion:reduce) { .biot-test:not(.biot-motion-enabled) .biot-ambient i { animation: none; } }
.biot-test.biot-motion-disabled .biot-ambient i { animation: none; }
@media(max-width:620px) {
  .biot-test .biot-body-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  .biot-test .jcell { padding: 8px 4px !important; overflow-wrap: anywhere; }
  .biot-test .jcell>div:first-of-type { font-size: 10px !important; }
  .biot-test .jcell>div:last-of-type { font-size: 10px !important; }
  .biot-test .biot-motion-toggle { padding: 5px 9px; font-size: 10px; }
}
/* Discreet playback controls; the 44px hit target remains accessible. */
.biot-test .biot-motion-toggle,.biot-test .biot-star-intro button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid #a6c5b52b; background: #19312544;
  color: #a9c5b5; opacity: .48; font: 14px/1 sans-serif; flex-shrink: 0;
}
.biot-test .biot-motion-toggle::before,.biot-test .biot-star-intro button::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.biot-test .biot-star-intro button { position: absolute; top: 0; right: 0; pointer-events: auto; }
.biot-test .biot-motion-toggle:hover,.biot-test .biot-motion-toggle:focus-visible,.biot-test .biot-star-intro button:hover,.biot-test .biot-star-intro button:focus-visible { opacity: 1; color: #d4efdf; border-color: #aad6bc88; outline: 2px solid #aad6bc55; outline-offset: 3px; }
.biot-test .biot-motion-toggle:hover::after,.biot-test .biot-motion-toggle:focus-visible::after,.biot-test .biot-star-intro button:hover::after,.biot-test .biot-star-intro button:focus-visible::after { content: attr(aria-label); position: absolute; right: 0; bottom: calc(100% + 7px); width: max-content; max-width: 180px; padding: 5px 8px; border: 1px solid #8cad9866; border-radius: 6px; color: #d4efdf; background: #13261d; font: 11px/1.5 sans-serif; pointer-events: none; z-index: 5; }
.biot-test .biot-star-intro button:hover::after,.biot-test .biot-star-intro button:focus-visible::after { top: calc(100% + 7px); bottom: auto; }
@media(hover:hover) and (pointer:fine) {
  .biot-test .biot-map-star:hover .biot-map-ring { opacity: .3; }
  .biot-test .biot-curve-point:hover .biot-curve-dot { fill: #e8cd8b; }
  .biot-test .biot-flip-toggle:hover { background: #2b4936; }
}
@media(prefers-reduced-motion:reduce) {
  .biot-test:not(.biot-motion-enabled) .biot-element-row { transition: none; }
}
.biot-test.biot-motion-disabled .biot-element-row { transition: none; }