:root {
        --bg: #ffffff;
        --text-tracking: -0.04em;
        --text-leading: 1.1;
        --intro-pink: #ef7bc5;
      }

      @font-face {
        font-family: "Heading Now";
        src: url("https://db.onlinewebfonts.com/t/7f8a5a9ce693fba74fd11c1e18a88797.eot");
        src: url("https://db.onlinewebfonts.com/t/7f8a5a9ce693fba74fd11c1e18a88797.eot?#iefix")
            format("embedded-opentype"),
          url("https://db.onlinewebfonts.com/t/7f8a5a9ce693fba74fd11c1e18a88797.woff2")
            format("woff2"),
          url("https://db.onlinewebfonts.com/t/7f8a5a9ce693fba74fd11c1e18a88797.woff") format("woff"),
          url("https://db.onlinewebfonts.com/t/7f8a5a9ce693fba74fd11c1e18a88797.ttf")
            format("truetype"),
          url("https://db.onlinewebfonts.com/t/7f8a5a9ce693fba74fd11c1e18a88797.svg#Heading%20Now")
            format("svg");
        font-display: swap;
      }

      * {
        box-sizing: border-box;
      }

      button {
        font: inherit;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        border: 0;
        white-space: nowrap;
      }

      body {
        margin: 0;
        min-height: 100vh;
        background: var(--bg);
        font-family: "Heading Now", "HeadingNow62Light", "headingnow61-68", sans-serif;
        letter-spacing: var(--text-tracking);
        line-height: var(--text-leading);
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }

      html.lock-stage-scroll,
      body.lock-stage-scroll {
        overflow-y: hidden;
        overscroll-behavior-y: none;
      }

      body.lock-stage-scroll .stage {
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
      }

      body.lock-stage-scroll .intro-page,
      body.lock-stage-scroll .trial-page,
      body.lock-stage-scroll .genre-page,
      body.lock-stage-scroll .survey-page,
      body.lock-stage-scroll .loading-page,
      body.lock-stage-scroll .report-page,
      body.lock-stage-scroll .reveal-page {
        display: none !important;
      }

      body.shared-report-mode .stage,
      body.shared-report-mode .intro-page,
      body.shared-report-mode .trial-page,
      body.shared-report-mode .genre-page,
      body.shared-report-mode .survey-page,
      body.shared-report-mode .loading-page,
      body.shared-report-mode .reveal-page {
        display: none !important;
      }

      .stage {
        width: 100%;
        overflow-x: auto;
        padding-top: 56px;
      }

      .stroke-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto 98px;
      }

      .stroke-control {
        width: clamp(320px, 38vw, 720px);
        min-height: 84px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 8px;
        cursor: ew-resize;
        touch-action: none;
        outline: none;
      }

      .stroke-line {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .stroke-segment {
        flex: 0 0 auto;
        background: #000;
      }

      .f0-wrap {
        display: flex;
        justify-content: center;
        margin: 46px auto 24px;
      }

      .f0-control {
        width: clamp(320px, 38vw, 720px);
        min-height: 84px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 8px;
        cursor: ew-resize;
        touch-action: none;
        outline: none;
      }

      .f0-line {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .f0-segment {
        flex: 0 0 auto;
        background: #000;
        transition: width 120ms ease, height 120ms ease, margin-right 120ms ease;
      }

      .board {
        width: min(100vw, 1896px);
        min-width: 980px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 226px;
      }

      .tile {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: clamp(44px, 4.5vw, 68px);
        font-weight: 400;
        line-height: var(--text-leading);
        cursor: pointer;
        user-select: none;
        transition: transform 80ms ease, filter 120ms ease;
      }

      .tile.dissonant {
        background: transparent;
      }

      .tile:focus-visible {
        outline: 3px solid #111;
        outline-offset: -3px;
      }

      .tile:active,
      .tile.playing {
        transform: scale(0.98);
        filter: brightness(0.95);
      }

      .plain {
        background: #ffffff;
      }

      .gray {
        background-color: #b5b5b9;
        background-image: linear-gradient(to bottom, #9f9fa4 0%, #cacacf 52%, #ffffff 100%);
      }

      .gray-soft {
        background-color: #c7c7cb;
        background-image: linear-gradient(to bottom, #b7b7bc 0%, #d8d8dc 58%, #ffffff 100%);
      }

      .top-dark {
        background: linear-gradient(
          to bottom,
          #000000 0%,
          #2f2f2f 22%,
          #8f8f8f 60%,
          #f3f3f3 100%
        );
      }

      .bottom-dark {
        background: linear-gradient(
          to bottom,
          #f3f3f3 0%,
          #b6b6b6 44%,
          #2f2f2f 86%,
          #000000 100%
        );
      }

      .controls {
        width: min(100vw, 1896px);
        min-width: 980px;
        margin: 28px auto 56px;
        padding: 0 clamp(44px, 10vw, 270px);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 44px;
      }

      .tone-toggle {
        border: 0;
        background: transparent;
        color: #111;
        font-size: clamp(30px, 2.4vw, 52px);
        line-height: var(--text-leading);
        padding: 0;
        cursor: pointer;
      }

      .tone-toggle:hover {
        opacity: 0.72;
      }

      .status-panel {
        display: none;
        text-align: center;
        color: #111;
        line-height: var(--text-leading);
      }

      .status-panel.visible {
        display: block;
      }

      .status-value {
        font-size: clamp(28px, 2.2vw, 46px);
        white-space: nowrap;
      }

      .random-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
      }

      .random-toggle {
        border: 0;
        background: transparent;
        font-size: clamp(30px, 2.4vw, 52px);
        line-height: var(--text-leading);
        color: #111;
        padding: 0;
        cursor: pointer;
      }

      .random-sub {
        display: none;
        flex-direction: row;
        align-items: center;
        gap: 8px;
      }

      .random-sub.open {
        display: flex;
      }

      .random-btn {
        border: 0;
        background: transparent;
        color: #111;
        font-size: clamp(30px, 2.4vw, 52px);
        line-height: var(--text-leading);
        padding: 0;
        cursor: pointer;
        opacity: 0.4;
        transition: opacity 120ms ease;
      }

      .random-btn:hover {
        opacity: 0.72;
      }

      .random-btn.active {
        opacity: 1;
      }

      .ios-haptic-switch {
        position: fixed;
        left: -1000px;
        top: -1000px;
        opacity: 0.001;
        pointer-events: none;
      }

      .intro-page {
        position: relative;
        min-height: 100vh;
        background: #000;
        color: var(--intro-pink);
        overflow: hidden;
        font-family: "DM Sans", sans-serif;
        letter-spacing: -0.02em;
      }

      .intro-deco {
        position: absolute;
        width: clamp(180px, 18vw, 320px);
        height: clamp(180px, 18vw, 320px);
        display: block;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
      }

      .intro-deco--tr {
        top: 0;
        right: 0;
      }

      .intro-deco--bl {
        left: 0;
        bottom: 0;
      }

      .intro-copy {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -54%);
        width: min(940px, 58vw);
        font-size: clamp(20px, 2.25vw, 40px);
        line-height: 1.02;
        letter-spacing: -0.03em;
        color: var(--intro-pink);
        opacity: 1;
        filter: blur(0);
        transition: opacity 820ms ease, transform 820ms ease, filter 820ms ease;
      }

      .intro-copy p {
        margin: 0;
      }

      .intro-copy p + p {
        margin-top: clamp(6px, 0.7vw, 12px);
      }

      .start-pill {
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%) scale(0.86);
        border: 0;
        border-radius: 999px;
        background: var(--intro-pink);
        color: #000;
        font-size: clamp(24px, 2.8vw, 52px);
        letter-spacing: -0.02em;
        padding: clamp(20px, 2.2vw, 34px) clamp(54px, 5.4vw, 110px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 860ms ease, transform 860ms ease;
      }

      .intro-skip {
        position: absolute;
        left: 50%;
        top: 62%;
        transform: translate(-50%, -50%);
        border: 0;
        background: transparent;
        color: var(--intro-pink);
        font-size: clamp(18px, 1.8vw, 30px);
        letter-spacing: -0.015em;
        opacity: 0;
        pointer-events: none;
        transition: opacity 420ms ease, transform 420ms ease;
      }

      .intro-page.phase-button .intro-copy {
        opacity: 0;
        transform: translate(-50%, -58%);
        filter: blur(2px);
        pointer-events: none;
      }

      .intro-page.phase-button .start-pill {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
        animation: start-pill-breathe 2.6s ease-in-out infinite;
      }

      .intro-page.phase-button .intro-skip {
        opacity: 0.88;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
      }

      @keyframes start-pill-breathe {
        0%,
        100% {
          box-shadow: 0 0 0 rgba(239, 123, 197, 0.25);
          transform: translate(-50%, -50%) scale(1);
        }
        50% {
          box-shadow: 0 0 26px rgba(239, 123, 197, 0.32);
          transform: translate(-50%, -50%) scale(1.03);
        }
      }

      .trial-page {
        display: none;
        min-height: 100vh;
        background: #dfdfdf;
        color: #000;
        font-family: "DM Sans", sans-serif;
        letter-spacing: -0.02em;
      }

      .trial-page.active {
        display: block;
      }

      .trial-stage {
        min-height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
      }

      .fixation-layer {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
      }

      .fixation-layer.active {
        opacity: 1;
      }

      .fixation-line {
        width: min(60vw, 1020px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .fixation-segment {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        margin-right: 22px;
        background: #000;
        border-radius: 50%;
        transform: scale(0.2);
        transform-origin: center;
      }

      .fixation-segment:last-child {
        margin-right: 0;
      }

      .fixation-layer.active .fixation-segment {
        animation: fixation-dot-grow 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-delay: calc(var(--dot-order, 0) * 28ms);
      }

      .loading-page.active .fixation-segment {
        animation: fixation-dot-grow 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-delay: calc(var(--dot-order, 0) * 28ms);
      }

      @keyframes fixation-dot-grow {
        0% {
          transform: scale(0.2);
        }
        100% {
          transform: scale(1);
        }
      }

      .fixation-text {
        position: absolute;
        font-size: clamp(54px, 5.2vw, 94px);
        line-height: 1;
        letter-spacing: -0.02em;
        color: #000;
        pointer-events: none;
      }

      .trial-transition {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(circle at center, rgba(239, 123, 197, 0.14) 0%, rgba(239, 123, 197, 0) 62%);
        transform: scale(0.96);
      }

      .trial-transition.active {
        animation: trial-stage-transition 360ms ease forwards;
      }

      @keyframes trial-stage-transition {
        0% {
          opacity: 0;
          transform: scale(0.94);
          filter: blur(4px);
        }
        45% {
          opacity: 0.5;
          transform: scale(1.01);
          filter: blur(0);
        }
        100% {
          opacity: 0;
          transform: scale(1.02);
          filter: blur(0);
        }
      }

      .interval-layer {
        width: min(1160px, 88vw);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(26px, 3vh, 42px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(18px) scale(0.97);
        filter: blur(3px);
        transition: opacity 240ms ease, transform 280ms ease, filter 280ms ease;
      }

      .interval-layer.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }

      .interval-layer.awaiting-play .trial-slider-row {
        opacity: 0.54;
      }

      .interval-layer.shape-hidden .trial-shape-wrap {
        opacity: 0;
        transform: scale(0.86);
        pointer-events: none;
      }

      .interval-layer.numbers-hidden .trial-shape-score {
        opacity: 0;
      }

      .interval-layer.switching-out {
        animation: trial-switch-out 280ms ease both;
      }

      .interval-layer.switching-in {
        animation: trial-switch-in 300ms ease both;
      }

      @keyframes trial-switch-out {
        from {
          opacity: 1;
          transform: translateX(0);
        }
        to {
          opacity: 0;
          transform: translateX(-72px);
        }
      }

      @keyframes trial-switch-in {
        from {
          opacity: 0;
          transform: translateX(72px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .trial-shape-wrap {
        width: clamp(240px, 34vw, 560px);
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        transition: transform 180ms ease, opacity 200ms ease;
      }

      .trial-shape-wrap:active {
        transform: scale(0.985);
      }

      .trial-shape-wrap:focus-visible {
        outline: 3px solid #000;
        outline-offset: 8px;
      }

      .trial-shape {
        width: 84%;
        height: 84%;
        background: #ef7bc5;
        clip-path: polygon(78% 50%, 72% 63%, 70% 80%, 55% 75%, 42% 83%, 37% 67%, 20% 67%, 27% 51%, 19% 38%, 35% 34%, 42% 18%, 55% 26%, 68% 16%, 71% 33%);
        transition: background 520ms cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
          clip-path 620ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 320ms ease,
          border-radius 520ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 0 18px rgba(239, 123, 197, 0.28);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        will-change: clip-path, border-radius, box-shadow, filter;
      }

      .trial-shape.playing {
        animation: trial-shape-pulse 420ms ease;
      }

      .interval-layer.awaiting-play .trial-shape:not(.playing) {
        animation: trial-shape-idle 1.8s ease-in-out infinite;
      }

      @keyframes trial-shape-pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
        100% {
          transform: scale(1);
        }
      }

      @keyframes trial-shape-idle {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.04);
        }
      }

      .trial-shape-score {
        font-size: clamp(56px, 5.8vw, 98px);
        letter-spacing: -0.02em;
        line-height: 1;
        color: #000;
        position: absolute;
        z-index: 2;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
        pointer-events: none;
        transition: opacity 140ms ease;
      }

      .interval-layer.awaiting-play .trial-shape-score {
        opacity: 0.72;
      }

      .trial-slider-row {
        width: min(82vw, 980px);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: clamp(12px, 1.9vw, 32px);
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .trial-question {
        font-size: clamp(14px, 1.2vw, 20px);
        line-height: 1.1;
        opacity: 0.72;
      }

      .trial-bound {
        font-size: clamp(24px, 2.2vw, 38px);
        line-height: 1;
        min-width: clamp(120px, 13vw, 230px);
        transition: opacity 180ms ease, font-size 240ms ease, min-width 240ms ease;
      }

      .interval-layer.bounds-numeric .trial-bound {
        font-size: clamp(54px, 5.2vw, 96px);
        min-width: clamp(48px, 5vw, 84px);
      }

      .trial-slider {
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        opacity: 0.42;
        transition: opacity 160ms ease;
      }

      .trial-slider.enabled {
        opacity: 1;
      }

      .trial-slider:focus {
        outline: none;
      }

      .trial-slider::-webkit-slider-runnable-track {
        height: 14px;
        background: repeating-linear-gradient(to right, #000 0 72px, transparent 72px 84px);
      }

      .trial-slider::-moz-range-track {
        height: 14px;
        border: 0;
        background: repeating-linear-gradient(to right, #000 0 72px, transparent 72px 84px);
      }

      .trial-slider::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: #000;
        margin-top: -10px;
        cursor: pointer;
      }

      .trial-slider::-moz-range-thumb {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: #000;
        cursor: pointer;
      }

      .trial-next {
        border: 0;
        background: transparent;
        color: #000;
        border-radius: 0;
        font-size: clamp(78px, 9.2vw, 138px);
        line-height: 1;
        font-weight: 700;
        padding: 0;
        opacity: 0.35;
        pointer-events: none;
        transition: opacity 140ms ease, transform 140ms ease;
        position: fixed;
        right: clamp(14px, 4.5vw, 78px);
        top: 50%;
        transform: translateY(-50%);
      }

      .trial-next.enabled {
        opacity: 1;
        pointer-events: auto;
      }

      .trial-next.enabled:active {
        transform: translateY(-50%) scale(0.94);
      }

      .trial-meta {
        display: none;
      }

      .trial-page.done .trial-next {
        display: none;
      }

      .genre-page {
        display: none;
        min-height: 100vh;
        background: #ffffff;
        color: #111;
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        letter-spacing: -0.02em;
      }

      .genre-page.active {
        display: block;
      }

      .genre-stage {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        background: #ffffff;
      }

      .genre-cloud {
        position: absolute;
        inset: 0;
        pointer-events: auto;
      }

      .genre-marquee-band {
        position: absolute;
        left: 0;
        width: 100%;
        display: grid;
        gap: clamp(18px, 2.2vh, 36px);
      }

      .genre-marquee-band--top {
        top: clamp(28px, 4.2vh, 62px);
      }

      .genre-marquee-band--bottom {
        bottom: clamp(28px, 4.2vh, 62px);
      }

      .genre-marquee-row {
        width: max-content;
        display: flex;
        align-items: center;
        gap: 0;
        will-change: transform;
        pointer-events: auto;
      }

      .genre-marquee-row.left {
        animation: genre-marquee-left var(--genre-scroll-duration, 34s) linear infinite;
      }

      .genre-marquee-row.right {
        animation: genre-marquee-right var(--genre-scroll-duration, 34s) linear infinite;
      }

      .genre-marquee-track {
        display: inline-flex;
        align-items: center;
        gap: clamp(28px, 2.5vw, 54px);
        padding-right: clamp(28px, 2.5vw, 54px);
      }

      .genre-tag {
        border: 0;
        background: transparent;
        color: rgba(38, 28, 30, 0.16);
        font-size: clamp(36px, 3.75vw, 74px);
        line-height: 1;
        font-weight: 400;
        letter-spacing: -0.02em;
        padding: 0;
        cursor: pointer;
        pointer-events: auto;
        transition: color 140ms ease;
      }

      .genre-tag:hover {
        color: rgba(38, 28, 30, 0.26);
      }

      .genre-tag.active {
        color: rgba(24, 20, 21, 0.58);
      }

      .genre-core {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(34px, 6.3vh, 64px);
        padding: 0 4vw;
      }

      .genre-title {
        margin: 0;
        font-size: clamp(40px, 3.4vw, 64px);
        font-weight: 400;
        line-height: 1.03;
        text-align: center;
      }

      .genre-slots {
        display: grid;
        grid-template-columns: repeat(3, minmax(190px, 340px));
        gap: clamp(16px, 1.5vw, 28px);
      }

      .genre-input-slot {
        height: clamp(72px, 6.4vw, 108px);
        border-radius: 28px;
        border: 0;
        outline: none;
        background: linear-gradient(to right, #acacae 0%, #dcdcdf 100%);
        color: #111;
        -webkit-text-fill-color: #111;
        opacity: 1;
        font-size: clamp(19px, 1.6vw, 30px);
        font-weight: 400;
        letter-spacing: -0.015em;
        text-align: center;
        caret-color: #111;
        padding: 0 clamp(12px, 1.2vw, 22px);
      }

      .genre-input-slot::placeholder {
        color: transparent;
      }

      .genre-input-slot:focus {
        box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.34);
      }

      .genre-next {
        position: absolute;
        right: clamp(10px, 2.2vw, 34px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(96px, 11vw, 170px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        opacity: 0.96;
        z-index: 3;
      }

      .genre-next:active {
        transform: translateY(-50%) scale(0.95);
      }

      .survey-page {
        display: none;
        min-height: 100vh;
        background: #dfdfdf;
        color: #111;
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
      }

      .survey-page.active {
        display: block;
      }

      .survey-stage {
        min-height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 clamp(14px, 2vw, 38px);
      }

      .survey-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(20px, 2.2vw, 42px);
        max-width: min(1160px, 94vw);
        width: 100%;
      }

      .survey-input-wrap {
        position: relative;
        width: clamp(78px, 8.8vw, 160px);
        height: clamp(34px, 4vw, 54px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .survey-input {
        width: 100%;
        border: 0;
        background: transparent;
        color: #111;
        text-align: center;
        font-size: clamp(30px, 2.8vw, 56px);
        line-height: 1;
        font-weight: 500;
        outline: none;
        padding: 0;
      }

      .survey-line-base,
      .survey-line-blink {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: clamp(4px, 0.4vw, 7px);
        border-radius: 4px;
        pointer-events: none;
      }

      .survey-line-base {
        background: rgba(0, 0, 0, 0.75);
      }

      .survey-line-blink {
        background: rgba(0, 0, 0, 1);
        opacity: 0;
      }

      .survey-input-wrap.empty .survey-line-blink {
        animation: survey-line-blink 0.95s steps(1, end) infinite;
      }

      .survey-question {
        font-size: clamp(30px, 3.2vw, 66px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        min-height: 1.2em;
      }

      .survey-question-text::after {
        content: "";
        display: inline-block;
        width: 0.06em;
        height: 0.98em;
        background: rgba(0, 0, 0, 0.92);
        margin-left: 0.08em;
        vertical-align: -0.08em;
        opacity: 0;
      }

      .survey-page.typing .survey-question-text::after {
        opacity: 1;
        animation: survey-caret 0.9s steps(1, end) infinite;
      }

      .survey-next {
        position: absolute;
        right: clamp(18px, 2.4vw, 42px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(94px, 11vw, 170px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        opacity: 0.96;
      }

      .survey-back {
        position: absolute;
        left: clamp(18px, 2.4vw, 42px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(94px, 11vw, 170px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        opacity: 0.96;
      }

      .survey-next:active {
        transform: translateY(-50%) scale(0.95);
      }

      .survey-back:active {
        transform: translateY(-50%) scale(0.95);
      }

      .survey-choice-layout {
        width: min(980px, 92vw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(34px, 5.2vh, 72px);
      }

      .survey-choice-question {
        font-size: clamp(34px, 3.6vw, 70px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        text-align: center;
      }

      .survey-choice-options {
        width: min(760px, 88vw);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: clamp(28px, 5vw, 120px);
      }

      .survey-choice-btn {
        border: 0;
        background: transparent;
        color: #111;
        font-size: clamp(36px, 3.8vw, 68px);
        line-height: 1;
        padding: clamp(16px, 1.8vw, 30px) clamp(26px, 2.8vw, 58px);
        justify-self: center;
        cursor: pointer;
        transition: background-color 140ms ease, transform 120ms ease;
      }

      .survey-choice-btn.active {
        background: #cfc8c6;
      }

      .survey-choice-btn:active {
        transform: scale(0.97);
      }

      .survey-expertise-layout {
        width: min(980px, 92vw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(36px, 7vh, 110px);
      }

      .survey-expertise-question {
        font-size: clamp(34px, 3.8vw, 72px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        text-align: center;
      }

      .expertise-scale {
        width: min(820px, 88vw);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: clamp(20px, 2.6vw, 48px);
        cursor: ew-resize;
        touch-action: none;
        outline: none;
      }

      .expertise-bound {
        font-size: clamp(52px, 5vw, 90px);
        line-height: 1;
      }

      .expertise-dots {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: center;
        gap: clamp(12px, 1.8vw, 30px);
      }

      .expertise-dot {
        width: clamp(36px, 3.2vw, 60px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: #000;
        justify-self: center;
        opacity: 0;
        transform: scale(0.2);
        transition: transform 150ms ease, opacity 150ms ease;
      }

      .expertise-dot.active {
        opacity: 1;
        transform: scale(1);
      }

      @keyframes survey-line-blink {
        0%,
        46% {
          opacity: 1;
        }
        47%,
        100% {
          opacity: 0;
        }
      }

      @keyframes survey-caret {
        0%,
        50% {
          opacity: 1;
        }
        51%,
        100% {
          opacity: 0;
        }
      }

      .loading-page {
        display: none;
        min-height: 100vh;
        background: #dfdfdf;
        color: #111;
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
      }

      .loading-page.active {
        display: block;
      }

      .loading-stage {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 clamp(14px, 2vw, 38px);
      }

      .loading-fixation {
        position: relative;
        width: min(60vw, 1020px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .loading-fixation .fixation-line {
        width: 100%;
      }

      .loading-fixation .fixation-text {
        position: absolute;
      }

      .report-page {
        display: none;
        min-height: 100vh;
        position: relative;
        background: #dfdfdf;
        color: #111;
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        --report-side-gutter: clamp(112px, 12.5vw, 186px);
      }

      .report-page.active {
        display: block;
      }

      .report-stage {
        min-height: 100vh;
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: clamp(28px, 4.2vh, 62px) var(--report-side-gutter);
      }

      .report-deck {
        width: min(1240px, 100%);
        min-height: min(72vh, 760px);
        position: relative;
        overflow: hidden;
      }

      .report-slide {
        display: none;
        width: min(1040px, 100%);
        min-height: min(72vh, 760px);
        margin: 0 auto;
        align-items: center;
        text-align: center;
        opacity: 0;
        transform: translateX(18px);
        transition: opacity 220ms ease, transform 240ms ease;
      }

      .report-slide.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(12px, 1.8vh, 18px);
        opacity: 1;
        transform: translateX(0);
      }

      .report-slide--disclaimer .report-slide-title {
        font-size: clamp(30px, 2.8vw, 44px);
      }

      .report-slide--disclaimer .report-slide-body {
        font-size: clamp(15px, 1.2vw, 20px);
        line-height: 1.24;
      }

      .report-slide--disclaimer .report-list li {
        font-size: clamp(15px, 1.15vw, 20px);
        line-height: 1.24;
      }

      .report-slide-title {
        margin: 0;
        font-size: clamp(34px, 3.2vw, 58px);
        line-height: 1.03;
        letter-spacing: -0.02em;
        font-weight: 500;
        transition: opacity 240ms ease, transform 260ms ease, max-height 260ms ease, margin 260ms ease;
      }

      .report-slide-body {
        margin: 0;
        font-size: clamp(19px, 1.5vw, 30px);
        line-height: 1.18;
        letter-spacing: -0.02em;
        transition: opacity 240ms ease, transform 260ms ease, max-height 260ms ease;
      }

      .report-list {
        margin: 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(6px, 1vh, 12px);
        transition: opacity 240ms ease, transform 260ms ease, max-height 260ms ease;
      }

      .report-slide.title-phase .report-slide-body,
      .report-slide.title-phase .report-list {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
      }

      .report-slide.title-hidden .report-slide-title {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        margin: 0;
        overflow: hidden;
      }

      .report-list li {
        font-size: clamp(18px, 1.45vw, 28px);
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-align: center;
        max-width: min(980px, 100%);
      }

      .report-next {
        position: absolute;
        right: clamp(10px, 2.2vw, 34px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(96px, 11vw, 170px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        opacity: 0.96;
      }

      .report-next:active {
        transform: translateY(-50%) scale(0.95);
      }

      .report-next.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .report-prev {
        position: absolute;
        left: clamp(10px, 2.2vw, 34px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(96px, 11vw, 170px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        opacity: 0.64;
        transition: opacity 120ms ease, transform 120ms ease;
      }

      .report-prev.disabled {
        opacity: 0.2;
        pointer-events: none;
      }

      .report-prev:active {
        transform: translateY(-50%) scale(0.95);
      }

      .report-prev.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .report-counter {
        position: absolute;
        left: 50%;
        bottom: clamp(14px, 2.6vh, 28px);
        transform: translateX(-50%);
        font-size: clamp(16px, 1.2vw, 24px);
        letter-spacing: -0.02em;
        opacity: 0.7;
      }

      .report-counter.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .report-end-controls {
        position: absolute;
        left: 50%;
        bottom: clamp(14px, 2.6vh, 30px);
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: clamp(10px, 1.4vw, 18px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
      }

      .report-end-controls.visible {
        opacity: 1;
        pointer-events: auto;
      }

      .report-end-btn {
        border: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, #b6b6b6 0%, #e8e8e8 100%);
        color: #111;
        font-family: "DM Sans", sans-serif;
        font-size: clamp(16px, 1.3vw, 22px);
        font-weight: 500;
        letter-spacing: -0.02em;
        padding: clamp(8px, 1.1vh, 12px) clamp(18px, 1.8vw, 28px);
        min-width: clamp(84px, 9.2vw, 118px);
        cursor: pointer;
        user-select: none;
      }

      .report-end-btn:disabled {
        opacity: 0.58;
        pointer-events: none;
      }

      .report-end-btn:active {
        transform: scale(0.97);
      }

      .report-share-status {
        position: absolute;
        left: 50%;
        bottom: clamp(64px, 8vh, 96px);
        transform: translateX(-50%);
        font-family: "DM Sans", sans-serif;
        font-size: clamp(14px, 1.05vw, 18px);
        letter-spacing: -0.01em;
        color: rgba(0, 0, 0, 0.74);
        opacity: 0;
        transition: opacity 160ms ease;
        pointer-events: none;
        text-align: center;
        max-width: min(90vw, 580px);
        overflow-wrap: anywhere;
      }

      .report-share-status.visible {
        opacity: 1;
      }

      .report-share-status.error {
        color: rgba(130, 32, 32, 0.9);
      }

      .report-page.disclaimer-mode .report-stage {
        align-items: stretch;
        padding-top: clamp(20px, 3.2vh, 42px);
        padding-bottom: clamp(106px, 15vh, 158px);
      }

      .report-page.disclaimer-mode .report-deck {
        min-height: 0;
        max-height: calc(100vh - clamp(156px, 22vh, 246px));
        overflow-y: auto;
        padding-bottom: 8px;
      }

      .report-page.disclaimer-mode .report-slide {
        min-height: 0;
      }

      .report-page.disclaimer-mode .report-slide.active {
        justify-content: flex-start;
      }

      .report-page.disclaimer-mode .report-end-controls {
        bottom: clamp(10px, 2.2vh, 22px);
      }

      .report-page.disclaimer-mode .report-share-status {
        bottom: clamp(56px, 8.2vh, 92px);
      }

      .reveal-back {
        position: absolute;
        left: clamp(24px, 2.8vw, 48px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(98px, 12vw, 180px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        transition: transform 120ms ease;
      }

      .reveal-back:active {
        transform: translateY(-50%) scale(0.95);
      }

      .reveal-page {
        display: none;
        min-height: 100vh;
        position: relative;
        background: #dfdfdf;
        color: #111;
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        overflow: hidden;
      }

      .reveal-page.active {
        display: block;
      }

      .reveal-panel {
        display: none;
        min-height: 100vh;
        width: 100%;
        padding: clamp(26px, 4.2vh, 56px) clamp(110px, 12vw, 190px) clamp(34px, 5.4vh, 62px)
          clamp(24px, 3vw, 52px);
        position: relative;
      }

      .reveal-panel.active {
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 2.2vh, 24px);
      }

      .reveal-panel-title {
        margin: 0;
        font-size: clamp(34px, 3.2vw, 58px);
        font-weight: 700;
        letter-spacing: -0.02em;
      }

      .reveal-chart-shell {
        width: min(1260px, calc(100vw - clamp(150px, 16vw, 250px)));
        height: min(56vh, 540px);
      }

      .reveal-chart-shell canvas {
        width: 100%;
        height: 100%;
        background: transparent;
      }

      .reveal-footnote {
        position: absolute;
        right: clamp(26px, 3vw, 52px);
        bottom: clamp(18px, 3.2vh, 42px);
        font-size: clamp(22px, 2.2vw, 46px);
        font-weight: 500;
        letter-spacing: -0.02em;
      }

      .index-summary {
        display: none;
      }

      .reveal-next {
        position: absolute;
        right: clamp(24px, 2.8vw, 48px);
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #000;
        font-size: clamp(98px, 12vw, 180px);
        line-height: 0.8;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        transition: transform 120ms ease;
      }

      .reveal-next:active {
        transform: translateY(-50%) scale(0.95);
      }

      @keyframes genre-marquee-left {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      @keyframes genre-marquee-right {
        from {
          transform: translateX(-50%);
        }
        to {
          transform: translateX(0);
        }
      }

      @media (max-width: 900px) {
        .stage {
          overflow-x: hidden;
          padding-top: 20px;
          padding-bottom: 24px;
        }

        .stroke-wrap {
          margin-bottom: 24px;
          padding: 0 16px;
        }

        .stroke-control {
          width: 100%;
          min-height: 52px;
        }

        .f0-wrap {
          margin: 24px 0 14px;
          padding: 0 16px;
        }

        .f0-control {
          width: 100%;
          min-height: 52px;
        }

        .board {
          width: 100%;
          min-width: 0;
          margin: 0;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: minmax(150px, 46vw);
        }

        .tile {
          font-size: clamp(48px, 14vw, 72px);
          justify-content: flex-start;
          text-align: left;
          padding-left: clamp(14px, 4vw, 22px);
        }

        .controls {
          width: 100%;
          min-width: 0;
          margin: 18px 0 24px;
          padding: 0 16px;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          justify-items: start;
          gap: 14px 18px;
        }

        .tone-toggle,
        .status-value,
        .random-toggle,
        .random-btn {
          font-size: 28px;
        }

        .status-panel {
          grid-column: 1 / -1;
          text-align: left;
        }

        .status-value {
          white-space: normal;
        }

        .random-group {
          gap: 12px;
          align-items: flex-start;
          justify-self: start;
        }

        .random-sub {
          flex-wrap: wrap;
          row-gap: 6px;
        }

        .intro-deco {
          width: 128px;
          height: 128px;
        }

        .intro-deco--tr {
          top: 0;
          right: 0;
        }

        .intro-deco--bl {
          left: 0;
          bottom: 0;
        }

        .intro-copy {
          left: 50%;
          right: auto;
          width: calc(100vw - 44px);
          top: 47%;
          transform: translate(-50%, -55%);
          font-size: clamp(16px, 4.8vw, 24px);
        }

        .start-pill {
          font-size: clamp(20px, 6vw, 32px);
          padding: 16px 44px;
        }

        .intro-skip {
          font-size: 15px;
          top: 61%;
        }

        .trial-stage {
          padding: 20px 14px;
        }

        .fixation-line {
          width: calc(100vw - 34px);
        }

        .fixation-text {
          font-size: clamp(34px, 10.4vw, 56px);
        }

        .interval-layer {
          width: 100%;
          gap: 20px;
        }

        .trial-shape-wrap {
          width: min(78vw, 360px);
        }

        .trial-shape-score {
          font-size: clamp(42px, 12vw, 70px);
        }

        .trial-slider-row {
          width: calc(100vw - 30px);
          gap: 10px;
        }

        .trial-question {
          font-size: 13px;
        }

        .trial-bound {
          font-size: clamp(18px, 4.2vw, 26px);
          min-width: clamp(100px, 26vw, 150px);
        }

        .interval-layer.bounds-numeric .trial-bound {
          font-size: clamp(36px, 10vw, 60px);
          min-width: clamp(38px, 9vw, 56px);
        }

        .trial-slider::-webkit-slider-runnable-track,
        .trial-slider::-moz-range-track {
          height: 12px;
          background: repeating-linear-gradient(to right, #000 0 38px, transparent 38px 48px);
        }

        .trial-slider::-webkit-slider-thumb,
        .trial-slider::-moz-range-thumb {
          width: 28px;
          height: 28px;
          margin-top: -8px;
        }

        .trial-next {
          font-size: clamp(66px, 15vw, 96px);
          right: 8px;
        }

        .genre-marquee-band {
          gap: 14px;
        }

        .genre-marquee-band--top {
          top: 16px;
        }

        .genre-marquee-band--bottom {
          bottom: 16px;
        }

        .genre-tag {
          font-size: clamp(18px, 6.5vw, 32px);
        }

        .genre-title {
          font-size: clamp(32px, 9vw, 50px);
          text-align: center;
        }

        .genre-slots {
          width: min(94vw, 520px);
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 10px;
        }

        .genre-input-slot {
          height: 54px;
          font-size: 16px;
          text-align: center;
          padding: 0 10px;
          border-radius: 16px;
        }

        .genre-next {
          right: 8px;
          font-size: 74px;
        }

        .survey-row {
          gap: 12px;
          align-items: center;
        }

        .survey-input-wrap {
          width: 64px;
          height: 26px;
        }

        .survey-input {
          font-size: 24px;
        }

        .survey-line-base,
        .survey-line-blink {
          height: 3px;
        }

        .survey-question {
          font-size: clamp(18px, 5vw, 30px);
          max-width: calc(100vw - 130px);
        }

        .survey-next {
          right: 8px;
          font-size: 74px;
        }

        .survey-back {
          left: 8px;
          font-size: 74px;
        }

        .survey-choice-layout {
          gap: 18px;
        }

        .survey-choice-question {
          font-size: clamp(22px, 6.5vw, 34px);
        }

        .survey-choice-options {
          width: min(92vw, 420px);
          gap: 16px;
        }

        .survey-choice-btn {
          font-size: clamp(24px, 7vw, 36px);
          padding: 12px 20px;
        }

        .survey-expertise-layout {
          gap: 36px;
        }

        .survey-expertise-question {
          font-size: clamp(22px, 6.5vw, 38px);
        }

        .expertise-scale {
          width: min(94vw, 560px);
          gap: 12px;
        }

        .expertise-bound {
          font-size: clamp(46px, 11vw, 68px);
        }

        .expertise-dots {
          gap: 8px;
        }

        .expertise-dot {
          width: clamp(24px, 6vw, 34px);
        }

        .loading-fixation {
          width: min(88vw, 620px);
        }

        .report-stage {
          --report-side-gutter: clamp(64px, 16vw, 92px);
          padding: 16px var(--report-side-gutter) 58px;
        }

        .report-deck {
          min-height: min(78vh, 680px);
        }

        .report-slide {
          min-height: min(78vh, 680px);
        }

        .report-slide-title {
          font-size: clamp(24px, 7.2vw, 36px);
        }

        .report-slide-body {
          font-size: clamp(15px, 4vw, 20px);
          line-height: 1.25;
        }

        .report-list li {
          font-size: clamp(15px, 3.9vw, 18px);
          line-height: 1.24;
        }

        .report-prev {
          left: 8px;
          font-size: 74px;
        }

        .report-next {
          right: 8px;
          font-size: 74px;
        }

        .report-counter {
          bottom: 10px;
          font-size: 14px;
        }

        .report-end-controls {
          bottom: 10px;
          gap: 8px;
        }

        .report-end-btn {
          font-size: 14px;
          min-width: 74px;
          padding: 8px 14px;
        }

        .report-share-status {
          bottom: 56px;
          font-size: 12px;
        }

        .report-slide--disclaimer .report-slide-title {
          font-size: clamp(20px, 6.2vw, 30px);
        }

        .report-slide--disclaimer .report-slide-body,
        .report-slide--disclaimer .report-list li {
          font-size: clamp(13px, 3.6vw, 17px);
          line-height: 1.26;
        }

        .report-page.disclaimer-mode .report-stage {
          align-items: stretch;
          padding-bottom: 84px;
        }

        .report-page.disclaimer-mode .report-deck {
          max-height: calc(100vh - 130px);
        }

        .reveal-back {
          left: 8px;
          font-size: 74px;
        }

        .reveal-panel {
          padding: 16px 56px 24px 10px;
        }

        .reveal-panel-title {
          font-size: clamp(26px, 8vw, 40px);
        }

        .reveal-chart-shell {
          width: calc(100vw - 72px);
          height: min(54vw, 300px);
        }

        .reveal-footnote {
          right: 10px;
          bottom: 12px;
          font-size: 16px;
        }

        .reveal-next {
          right: 8px;
          font-size: 74px;
        }
      }