.resonance-root {
  --res-ivory: var(--res-text, #e3dfc9); --res-gold: var(--res-metal, #c6ad79); --core-x: 50vw; --core-y: 43dvh;
  position: fixed; inset: 0; z-index: 20; overflow: hidden; isolation: isolate;
  width: 100%; height: 100vh; height: 100dvh; color: var(--res-ivory); background: var(--res-background, #061210);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  font-family: "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  outline: none !important;
}
.resonance-art { position: absolute; inset: 0; background: radial-gradient(ellipse at 57% 32%, var(--res-haze, #254a3c3b), transparent 54%), radial-gradient(ellipse at 5% 4%, var(--res-warm-haze, #4c493122), transparent 45%), linear-gradient(165deg, var(--res-background-top, #0b1916), var(--res-background-bottom, #07110f) 65%, var(--res-background-edge, #101b15)); }
.resonance-root:not([data-creature="yaya"]) .resonance-art {
  isolation: isolate;
  background: radial-gradient(ellipse at var(--res-haze-x) var(--res-haze-y), var(--res-haze), transparent 62%), radial-gradient(ellipse at var(--res-accent-x) var(--res-accent-y), var(--res-warm-haze), transparent 52%), linear-gradient(var(--res-background-angle), var(--res-background-top), var(--res-background-bottom) 78%, var(--res-background-edge));
}
.resonance-root:not([data-creature="yaya"]) .resonance-art::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 65% at var(--res-accent-x) var(--res-accent-y), var(--res-accent-mist), transparent 78%);
  opacity: var(--res-atmosphere, .16);
}
.resonance-root:not([data-creature="yaya"]) .resonance-canvas { position: relative; z-index: 1; }
.resonance-canvas { display: block; width: 100%; height: 100%; }
.resonance-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 43%, transparent 27%, var(--res-vignette-edge, #020b0750) 83%), linear-gradient(transparent 65%, var(--res-vignette-bottom, #020d08aa)); }
.resonance-root button { min-width: 44px; min-height: 44px; border: 0; border-radius: 0; color: inherit; background: none; font: inherit; font-size: 12px; letter-spacing: .12em; touch-action: manipulation; }
.resonance-root button:focus-visible { outline: 1px solid var(--res-focus, #e1d1a5); outline-offset: 5px; }
.resonance-root button:hover { color: var(--res-hover, #fff5cf); }
.resonance-root button:active { opacity: .65; }
.resonance-header { position: absolute; top: max(24px, env(safe-area-inset-top)); left: max(40px, env(safe-area-inset-left)); right: max(40px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resonance-wordmark { font-size: 10px; letter-spacing: .26em; font-weight: 500; white-space: nowrap; }
.resonance-wordmark span { color: var(--res-divider, #687e67); padding: 0 12px; }
.resonance-controls { display: flex; gap: 16px; color: var(--res-controls, #bcc6af); }
.resonance-controls button { padding: 0 8px; }
.resonance-editorial { position: absolute; top: 25%; left: max(6.2vw, env(safe-area-inset-left)); pointer-events: none; }
.resonance-chapter { margin: 0 0 19px; font-size: 10px; color: var(--res-gold); letter-spacing: .24em; }
.resonance-title { margin: 0; font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: clamp(28px, 3vw, 49px); font-weight: 400; line-height: 1.4; letter-spacing: .16em; }
.resonance-editorial-line { display: block; width: 34px; height: 1px; margin-top: 28px; background: var(--res-editorial-line, #c6ad7970); }
.resonance-target { position: absolute; left: var(--core-x); top: var(--core-y); width: var(--target-size, 120px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid var(--res-target, #e3d4a372); border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 24px var(--res-target-glow, #d9bf7120); }
.resonance-root[data-available="true"] .resonance-target { opacity: .7; }
.resonance-root[data-holding="true"] .resonance-target { opacity: 1; }
.resonance-target-mark::before, .resonance-target-mark::after { content: ""; position: absolute; width: 1px; height: 7px; background: var(--res-target-mark, #ddcc9a); left: 50%; top: -4px; }
.resonance-target-mark::after { top: auto; bottom: -4px; }
.resonance-charge { position: absolute; inset: -1px; border: 2px solid var(--res-charge, #c3ffe0); border-radius: 50%; transform: scale(var(--charge, 0)); opacity: 0; box-shadow: 0 0 13px var(--res-charge-glow, #a5f3cf4d), inset 0 0 13px var(--res-charge-inset, #a5f3cf24); }
.resonance-root[data-holding="true"] .resonance-charge { opacity: .9; }
.resonance-bottom { position: absolute; left: 18px; right: 18px; bottom: max(7%, calc(env(safe-area-inset-bottom) + 22px)); text-align: center; pointer-events: none; }
.resonance-progress { display: flex; justify-content: center; gap: 14px; margin-bottom: 25px; }
.resonance-progress i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--res-progress-waiting, #6c7b6266); }
.resonance-progress i[data-status="current"] { background: var(--res-progress-current, #b8b79c); box-shadow: 0 0 0 4px var(--res-progress-halo, #c8b48112); }
.resonance-progress i[data-status="wake"] { background: var(--res-progress-wake, #8b9f87); }
.resonance-progress i[data-status="resonant"], .resonance-progress i[data-status="perfect"] { background: var(--res-progress-lit, #d1e9bf); box-shadow: 0 0 8px var(--res-progress-glow, #b7fbbd80); }
.resonance-progress i[data-status="perfect"] { border-radius: 0; transform: rotate(45deg); }
.resonance-hint { margin: 0 0 12px; font-family: "Songti TC", "PMingLiU", serif; font-size: clamp(16px, 1.3vw, 20px); letter-spacing: .16em; line-height: 1.6; }
.resonance-corner { position: absolute; bottom: max(40px, env(safe-area-inset-bottom)); right: max(40px, env(safe-area-inset-right)); font-size: 9px; line-height: 1.8; letter-spacing: .2em; color: var(--res-corner, #9aa98b88); text-align: right; pointer-events: none; }
.resonance-seam { position: absolute; border: 2px solid var(--res-seam, #edf3cb); box-shadow: 0 0 40px var(--res-seam-glow, #bedc9c80), inset 0 0 40px var(--res-seam-inset, #bedc9c40); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.resonance-root:not([data-phase="intro"]) .resonance-seam { display: none; }
.resonance-apparition { position: absolute; left: var(--core-x); top: var(--core-y); width: clamp(78px, 9vw, 145px); transform: translate(-50%, -50%); object-fit: contain; opacity: 0; filter: sepia(1) saturate(.3) brightness(1.8); mix-blend-mode: screen; pointer-events: none; image-rendering: auto; }
.resonance-root[data-phase="intro"] .resonance-header, .resonance-root[data-phase="intro"] .resonance-editorial { opacity: 0; }
.resonance-root[data-phase="finale"] .resonance-editorial { opacity: 0; }
.resonance-result { position: absolute; inset: auto auto 17% 7%; max-width: 430px; }
.resonance-result-kicker { color: var(--res-gold); font-size: 10px; letter-spacing: .24em; margin: 0 0 20px; }
.resonance-result-title { font-family: "Songti TC", "PMingLiU", serif; font-size: clamp(30px, 3.5vw, 54px); font-weight: 400; letter-spacing: .1em; line-height: 1.6; margin: 0; outline: none; }
.resonance-root .resonance-result-title:focus-visible { outline: none; }
.resonance-result-count { color: var(--res-result-count, #a9bba2); font-size: 12px; letter-spacing: .18em; margin: 20px 0 28px; }
.resonance-result-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.resonance-result-actions .resonance-replay { padding: 8px 0; border-bottom: 1px solid var(--res-replay-line, #bda97b80); font-size: 13px; }
.resonance-replay span { margin-left: 24px; font-size: 18px; }
.resonance-result-actions .resonance-exit { color: var(--res-exit, #a3b49c); }
.resonance-root[data-phase="result"] .resonance-editorial, .resonance-root[data-phase="result"] .resonance-bottom, .resonance-root[data-phase="result"] .resonance-pause { display: none; }
.resonance-paused { position: absolute; inset: 0; background: var(--res-pause-panel, #05100bc9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 5; backdrop-filter: blur(6px); }
.resonance-paused p { font-family: "Songti TC", "PMingLiU", serif; font-size: 26px; letter-spacing: .13em; }
.resonance-paused button { border-bottom: 1px solid var(--res-pause-line, #c6ad7980); padding: 8px 16px; }
.resonance-root[data-paused="true"] .resonance-header { z-index: 6; }
@media (max-aspect-ratio: 1.05) {
  .resonance-header { top: max(14px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); }
  .resonance-wordmark { font-size: 8px; letter-spacing: .18em; }
  .resonance-wordmark span { padding: 0 6px; }
  .resonance-controls { gap: 0; }
  .resonance-controls button { font-size: 12px; padding: 0 6px; }
  .resonance-editorial { top: max(105px, calc(env(safe-area-inset-top) + 85px)); left: 28px; }
  .resonance-title { font-size: 32px; }
  .resonance-chapter { font-size: 9px; margin-bottom: 12px; }
  .resonance-editorial-line { margin-top: 18px; width: 26px; }
  .resonance-bottom { bottom: max(10%, calc(env(safe-area-inset-bottom) + 28px)); }
  .resonance-progress { margin-bottom: 24px; }
  .resonance-hint { font-size: 16px; letter-spacing: .08em; }
  .resonance-corner { display: none; }
  .resonance-result { left: 28px; right: 20px; bottom: max(8%, calc(env(safe-area-inset-bottom) + 22px)); max-width: none; }
  .resonance-result-title { font-size: 31px; line-height: 1.5; }
  .resonance-result-title br { display: initial; }
  .resonance-result-kicker { font-size: 9px; margin-bottom: 12px; }
  .resonance-result-count { margin: 12px 0 16px; }
  .resonance-root[data-phase="result"] .resonance-vignette { background: linear-gradient(transparent 40%, var(--res-result-shade, #04120ae8) 85%); }
}
@media (max-height: 500px) {
  .resonance-header { top: max(6px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); }
  .resonance-editorial { top: 29%; left: max(26px, env(safe-area-inset-left)); }
  .resonance-title { font-size: 25px; }
  .resonance-chapter { margin-bottom: 10px; font-size: 8px; }
  .resonance-editorial-line, .resonance-corner { display: none; }
  .resonance-bottom { bottom: max(16px, env(safe-area-inset-bottom)); }
  .resonance-progress { margin-bottom: 10px; }
  .resonance-hint { font-size: 14px; margin-bottom: 4px; }
  .resonance-result { bottom: 14%; left: max(28px, env(safe-area-inset-left)); }
  .resonance-result-title { font-size: 28px; line-height: 1.3; }
  .resonance-result-count { margin: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .resonance-target { transition: none; } .resonance-seam { display: none; } }

/* One interaction surface alternates between touch, response and the next invitation. */
.resonance-bottom { bottom: max(5%, calc(env(safe-area-inset-bottom) + 20px)); }
.resonance-progress { margin-bottom: 16px; }
.resonance-hint { margin-bottom: 0; font-size: clamp(14px, 1.2vw, 18px); }
.resonance-touchpoint { position: relative; width: 76px; height: 76px; margin: 0 auto 14px; opacity: 0; }
.resonance-touch-ring { position: absolute; inset: 8px; border: 1px solid var(--res-touch-ring, #b4dab052); border-radius: 50%; background: radial-gradient(circle, var(--res-touch-fill, #91e2b41c), transparent 65%); box-shadow: 0 0 calc(12px + 15px * var(--touch-pulse)) var(--res-touch-glow, #9ad2ad25); transform: scale(calc(.97 + .05 * var(--touch-pulse))); }
.resonance-touch-ring::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--res-touch-metal, #c6ad792a); border-radius: 50%; }
.resonance-touch-seed { position: absolute; width: 18px; height: 25px; left: 29px; top: 25px; border-radius: 65% 30% 60% 40%; transform: rotate(35deg); background: radial-gradient(ellipse at 30% 20%, var(--res-seed-highlight, #e5f9d3), var(--res-seed, #92c8a0) 40%, var(--res-seed-shadow, #305f49) 85%); box-shadow: 0 0 18px var(--res-seed-glow, #b6f2b359); }
.resonance-root[data-available="true"] .resonance-touchpoint, .resonance-root[data-holding="true"] .resonance-touchpoint { opacity: 1; }
.resonance-root[data-pressed="true"] .resonance-touch-ring { transform: scale(.9); border-color: var(--res-touch-pressed, #c6f5d1); background: var(--res-touch-pressed-fill, #a0e7bd18); }
.resonance-root[data-pressed="true"] .resonance-touch-seed { transform: translateY(3px) rotate(35deg) scale(.88); box-shadow: 0 0 32px var(--res-seed-pressed-glow, #b6f2b3a0); }
.resonance-root[data-preview="true"] .resonance-touchpoint { opacity: calc(.6 * var(--preview)); }
.resonance-root[data-preview="true"] .resonance-touch-ring { box-shadow: none; background: none; transform: none; }
.resonance-root[data-preview="true"] .resonance-touch-seed { opacity: .35; }
.resonance-root[data-preview="true"] .resonance-target { opacity: calc(.7 * var(--preview)); transform: translate(-50%, -50%) scale(calc(.8 + .2 * var(--preview))); }
.resonance-root[data-response="link"] .resonance-hint, .resonance-root[data-response="story"] .resonance-hint, .resonance-root[data-response="return"] .resonance-hint { visibility: hidden; }
.resonance-root[data-phase="intro"] .resonance-touchpoint, .resonance-root[data-phase="finale"] .resonance-touchpoint { opacity: 0; }
.resonance-root[data-phase="intro"] .resonance-progress { visibility: hidden; }
.resonance-gesture { position: absolute; width: 52px; height: 59px; left: 14px; top: 28px; overflow: visible; fill: var(--res-gesture-fill, #071710b8); stroke: var(--res-gesture-stroke, #dbdbc0); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: var(--gesture-opacity); transform: translateY(var(--gesture-y)); }
.resonance-root[data-available="true"] .resonance-art { cursor: pointer; }
.resonance-gesture-finger { display: none; }
.resonance-mouse-key { fill: var(--res-gesture-key, #b8ecc55c); stroke: none; opacity: 0; }
.resonance-root[data-demo-contact="true"] .resonance-mouse-key { opacity: 1; }
.resonance-root[data-demo-contact="true"] .resonance-charge { opacity: .75; }
.resonance-target-mark { position: absolute; inset: 0; transform: rotate(15deg); }
.resonance-root[data-match="resonant"] .resonance-target, .resonance-root[data-match="perfect"] .resonance-target { border-color: var(--res-match, #d1ffdb); box-shadow: 0 0 26px var(--res-match-glow, #c1e8b555); }
.resonance-root[data-match="resonant"] .resonance-target-mark, .resonance-root[data-match="perfect"] .resonance-target-mark { transform: rotate(0); }
.resonance-root[data-match="perfect"] .resonance-target { outline: 1px solid var(--res-perfect-outline, #ebd9aa); outline-offset: 5px; box-shadow: 0 0 35px var(--res-perfect-glow, #d5e4a570); }
.resonance-root[data-match="perfect"] .resonance-charge { border-color: var(--res-perfect-charge, #f4e6b7); }
.resonance-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.resonance-story-line, .resonance-flow-line, .resonance-ring-focus { fill: none; stroke: var(--res-story-line, #c4cda0); stroke-width: .7; }
.resonance-flow-line { stroke: var(--res-flow-line, #d0f9cf); stroke-width: 1.2; }
.resonance-flow-head { fill: var(--res-flow-head, #e4f5bf); filter: drop-shadow(0 0 5px var(--res-flow-glow, #c1f9b7)); }
.resonance-ring-focus { stroke: var(--res-ring-focus, #e2d7ac); stroke-dasharray: 2 9; }
.resonance-story { position: absolute; bottom: 30%; width: 290px; padding: 16px 0 16px 18px; border-left: 1px solid var(--res-story-border, #c8ae7880); background: linear-gradient(90deg, var(--res-story-panel, #071610ed), var(--res-story-panel-fade, #071610b8) 65%, transparent); pointer-events: none; }
.resonance-root[data-story-side="left"] .resonance-story { left: max(6.2vw, env(safe-area-inset-left)); }
.resonance-root[data-story-side="right"] .resonance-story { right: max(6.2vw, env(safe-area-inset-right)); }
.resonance-story h3 { font-family: "Songti TC", "PMingLiU", serif; font-size: 18px; letter-spacing: .035em; font-weight: 400; line-height: 1.6; margin: 0 0 8px; white-space: nowrap; }
.resonance-story p { font-size: 12px; line-height: 1.7; letter-spacing: .025em; color: var(--res-story-copy, #afc0ab); margin: 0; white-space: nowrap; }
.resonance-review { display: flex; gap: 8px; margin: -10px 0 18px; }
.resonance-review button { position: relative; padding: 14px 4px 5px; min-width: 44px; min-height: 48px; font-size: 11px; letter-spacing: .08em; color: var(--res-review-text, #9aab95); }
.resonance-review button::before { content: ''; position: absolute; width: 5px; height: 5px; border: 1px solid var(--res-review-dot, #b6c398); border-radius: 50%; top: 5px; left: calc(50% - 3px); }
.resonance-review button[aria-pressed="true"] { color: var(--res-review-selected, #e8e3c7); }
.resonance-review button[aria-pressed="true"]::before { background: var(--res-review-lit, #d6edba); box-shadow: 0 0 12px var(--res-review-glow, #cbf3a8); }
@media (pointer: coarse) {
  .resonance-gesture-mouse { display: none; }
  .resonance-gesture-finger { display: initial; }
}
@media (max-aspect-ratio: 1.05) {
  .resonance-bottom { bottom: max(5%, calc(env(safe-area-inset-bottom) + 22px)); }
  .resonance-editorial { top: max(80px, calc(env(safe-area-inset-top) + 40px)); display: flex; align-items: baseline; gap: 14px; }
  .resonance-title { order: 0; font-size: 26px; letter-spacing: .12em; }
  .resonance-chapter { order: 1; font-size: 8px; letter-spacing: .15em; margin: 0; }
  .resonance-editorial-line { display: none; }
  .resonance-story, .resonance-root[data-story-side="left"] .resonance-story, .resonance-root[data-story-side="right"] .resonance-story { left: 20px; right: 20px; bottom: max(8%, calc(env(safe-area-inset-bottom) + 32px)); width: auto; border-left: 0; padding: 20px 0; text-align: center; background: radial-gradient(ellipse, var(--res-story-mobile, #061710ed), var(--res-story-mobile-fade, #06171080) 65%, transparent); }
  .resonance-story h3 { font-size: 17px; margin-bottom: 8px; }
  .resonance-story p { font-size: 12px; letter-spacing: 0; }
  .resonance-root[data-phase="result"] .resonance-story { top: max(100px, calc(env(safe-area-inset-top) + 80px)); bottom: auto; }
  .resonance-root[data-response="story"] .resonance-progress, .resonance-root[data-response="link"] .resonance-progress { opacity: .6; }
  .resonance-result { bottom: max(6%, calc(env(safe-area-inset-bottom) + 22px)); }
  .resonance-review { gap: 7px; margin: 0 0 14px; }
  .resonance-result-count { margin-bottom: 8px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1.05) {
  .resonance-bottom { bottom: max(14px, env(safe-area-inset-bottom)); }
  .resonance-touchpoint { width: 60px; height: 60px; margin-bottom: 6px; }
  .resonance-touch-seed { left: 21px; top: 17px; }
  .resonance-gesture { left: 6px; top: 20px; }
  .resonance-progress { margin-bottom: 8px; }
  .resonance-hint { font-size: 12px; }
  .resonance-story { width: 260px; bottom: 29%; }
  .resonance-story h3 { font-size: 16px; }
  .resonance-story p { font-size: 11px; }
  .resonance-root[data-story-side="left"] .resonance-story { left: max(26px, env(safe-area-inset-left)); }
  .resonance-root[data-story-side="right"] .resonance-story { right: max(26px, env(safe-area-inset-right)); }
  .resonance-result { bottom: 10%; }
  .resonance-result-kicker { margin-bottom: 10px; }
  .resonance-result-count { margin-bottom: 6px; }
  .resonance-review { margin: 0 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .resonance-gesture { transform: none; }
  .resonance-root[data-preview="true"] .resonance-target { transform: translate(-50%, -50%); }
}

.resonance-root:not([data-creature="yaya"]) .resonance-apparition { filter: brightness(1.6); }