:root {
     --bg: #080704;
     --surface: #0e0c08;
     --text: #eee8dc;
     --gold: #d5a435;
     --bright: #f0cf74;
     --muted: #a9a294;
     --score-red: #b85b52;
     --score-yellow: #d8b95d;
     --score-blue: #718da5;
     --gold-line: rgba(213, 164, 53, .25);
}
 * {
     box-sizing: border-box;
}
 body {
     width: 100%;
     height: 100svh;
     margin: 0;
     overflow: hidden;
     background: radial-gradient(ellipse at 50% 0, rgba(213,164,53,.07), transparent 38rem), var(--bg);
     color: var(--text);
     font: 500 18px/1.6 Montserrat, Arial, sans-serif;
}
 body.showing-report {
     height: auto;
     min-height: 100svh;
     overflow-x: hidden;
     overflow-y: auto;
}
 main {
     width: 100%;
     height: 100%;
     margin: 0 auto;
     padding: 0;
}
 body.showing-report main {
     width: min(1120px, calc(100% - 32px));
     height: auto;
     padding: 42px 0 64px;
}
 h1, h2, h3 {
     margin: 0;
     color: var(--bright);
     font-family: Cinzel, Georgia, serif;
     font-weight: 500;
}
 h1 {
     font-size: clamp(30px, 5vw, 52px);
     line-height: 1.12;
}
 h2 {
     margin-bottom: 16px;
     font-size: 28px;
     line-height: 1.25;
}
 h3 {
     font-size: 19px;
}
 p {
     margin: 8px 0 16px;
}
 header, .panel, .question-card, .report-card {
     border: 1px solid var(--gold-line);
     background: rgba(14,12,8,.82);
     padding: 22px;
}
 .eyebrow {
     color: var(--bright);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: .3em;
     text-transform: uppercase;
}
 .intro, .help, .muted {
     color: var(--muted);
}
 .help {
     margin-bottom: 20px;
}
 .quiz-shell {
     display: flex;
     flex-direction: column;
     width: min(100%, 820px);
     height: 100%;
     min-height: 0;
     margin: auto;
     padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
 .quiz-top {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 3px 16px;
     align-items: center;
     flex: none;
}
 .quiz-brand {
     color: var(--bright);
     font: 600 13px Cinzel, Georgia, serif;
     letter-spacing: .2em;
}
 .step-count {
     color: var(--muted);
     font-size: 14px;
}
 .progress-track {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 5px;
     grid-column: 1 / -1;
     margin-top: 9px;
}
 .progress-segment {
     height: 2px;
     background: rgba(213,164,53,.2);
}
 .progress-segment.active {
     background: var(--gold);
     box-shadow: 0 0 10px rgba(213,164,53,.3);
}
 .quiz-content {
     display: flex;
     flex: 1;
     min-height: 0;
     flex-direction: column;
     justify-content: center;
     padding: 12px 0;
}
 .axis-meta {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     color: var(--gold);
     font-size: 12px;
     letter-spacing: .16em;
     text-transform: uppercase;
}
 .axis-meta strong {
     color: var(--bright);
     font: 500 26px Cinzel, Georgia, serif;
}
 .question-heading {
     max-width: 690px;
     color: var(--text);
     font: 500 clamp(25px, 7vw, 42px)/1.25 Cinzel, Georgia, serif;
}
 .slider-area {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     margin-top: 18px;
}
 .slider-value {
     position: absolute;
     top: 0;
     right: auto;
     left: 50%;
     min-width: 0;
     color: var(--bright);
     font: 600 clamp(22px, 7vw, 30px)/1 Cinzel, Georgia, serif;
     text-align: center;
     white-space: nowrap;
     transform: translateX(-50%);
}
 .slider-decimal {
     font-size: .7em;
     vertical-align: .12em;
}
 .slider-value.pending {
     color: rgba(240,207,116,.45);
}
 .slider-control {
     position: relative;
     display: flex;
     width: 100%;
     height: 122px;
     align-items: center;
     justify-content: center;
     padding: 50px 50px 8px;
}
 .slider-control input[type="range"] {
     position: relative;
     width: 100%;
     height: 64px;
     max-width: none;
     margin: 0;
     padding: 0;
     border: 0;
     appearance: none;
     background: transparent;
     writing-mode: horizontal-tb;
     direction: ltr;
     touch-action: none;
     transform: none;
}
 .slider-control input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
     height: 4px;
     border: 0;
     background: linear-gradient(to right, rgba(213,164,53,.22), var(--gold));
}
 .slider-control input[type="range"]::-moz-range-track {
     width: 100%;
     height: 4px;
     border: 0;
     background: linear-gradient(to right, rgba(213,164,53,.22), var(--gold));
}
 .slider-control input[type="range"]::-webkit-slider-thumb {
     width: 27px;
     height: 27px;
     margin: -11.5px 0 0;
     appearance: none;
     border: 1px solid var(--bg);
     border-radius: 50%;
     background: linear-gradient(135deg, var(--bright), var(--gold));
     box-shadow: 0 0 20px rgba(213,164,53,.28);
}
 .slider-control input[type="range"]::-moz-range-thumb {
     width: 25px;
     height: 25px;
     border: 1px solid var(--bg);
     border-radius: 50%;
     background: linear-gradient(135deg, var(--bright), var(--gold));
     box-shadow: 0 0 20px rgba(213,164,53,.28);
}
 .slider-endpoint {
     position: absolute;
     top: 82px;
     color: var(--gold);
     font: 500 clamp(17px, 5.5vw, 21px)/1 Montserrat, Arial, sans-serif;
     transform: translateY(-50%);
}
 .slider-endpoint.start {
     left: 0;
     right: auto;
}
 .slider-endpoint.end {
     right: 0;
     left: auto;
}
 .slider-hint {
     width: 100%;
     margin: 0;
     color: var(--muted);
     text-align: center;
	 margin-bottom: 30px;
}
 .quiz-actions {
     display: flex;
     gap: 12px;
     flex: none;
     padding-top: 8px;
}
 .quiz-actions button {
     flex: 1;
     margin: 0;
}
 .quiz-actions button:disabled {
     visibility: hidden;
}
 .screen-enter {
     animation: screen-enter .22s ease both;
}
 @keyframes screen-enter {
     from {
         opacity: 0;
         transform: translateY(8px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .intro-screen {
     width: min(100%, 680px);
     margin: auto;
}
 .intro-screen h1 {
     color: var(--bright);
     font: 500 clamp(30px, 8vw, 52px)/1.16 Cinzel, Georgia, serif;
}
 .intro-screen .intro-guide {
     margin-top: 20px;
     color: var(--text);
     font-size: clamp(17px, 4.4vw, 21px);
     line-height: 1.6;
}
 .intro-screen .intro-detail {
     max-width: 560px;
     margin-top: 12px;
     color: var(--muted);
}
 .validation-toast {
     position: fixed;
     z-index: 100;
     top: max(18px, env(safe-area-inset-top));
     left: 50%;
     width: min(560px, calc(100vw - 28px));
     padding: 18px 22px;
     border: 1px solid var(--score-red);
     background: #351714;
     color: #fff;
     box-shadow: 0 12px 48px rgba(0,0,0,.62), 0 0 30px rgba(184,91,82,.2);
     font-size: clamp(19px, 5vw, 24px);
     font-weight: 600;
     line-height: 1.45;
     text-align: center;
     transform: translateX(-50%);
     animation: toast-enter .2s ease-out both;
     cursor: pointer;
}
 @keyframes toast-enter {
     from {
         opacity: 0;
         transform: translate(-50%, -10px);
    }
     to {
         opacity: 1;
         transform: translate(-50%, 0);
    }
}
 label {
     display: block;
     font-weight: 600;
}
 input, button {
     width: 100%;
     border: 1px solid rgba(213,164,53,.55);
     border-radius: 0;
     background: #090805;
     color: var(--text);
     font: inherit;
     padding: 12px 14px;
}
 input:focus-visible {
     outline: 1px solid var(--bright);
     outline-offset: 5px;
}
 button {
     cursor: pointer;
     margin-top: 20px;
     min-height: 50px;
     border: 0;
     background: linear-gradient(105deg,#b97b10,#f0cf74 52%,#c48c1c);
     color: #120e05;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase;
     box-shadow: 0 0 28px rgba(213,164,53,.1);
     transition: filter .2s ease, box-shadow .2s ease;
}
 button:hover {
     filter: brightness(1.12);
     box-shadow: 0 0 32px rgba(213,164,53,.2);
}
 button:focus-visible {
     outline: 1px solid var(--bright);
     outline-offset: 3px;
}
 button.secondary {
     border: 1px solid var(--gold);
     background: transparent;
     color: var(--bright);
     box-shadow: none;
}
 [hidden] {
     display: none !important;
}
 .summary {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
     margin-bottom: 20px;
}
 .summary-item {
     border-left: 1px solid var(--gold);
     padding: 8px 14px;
     background: rgba(213,164,53,.035);
}
 .summary-classification {
     display: grid;
     grid-column: 1 / -1;
     gap: 5px;
     border-left: 2px solid currentColor;
     padding: 14px 18px;
     background: rgba(213,164,53,.045);
}
 .summary-classification strong {
     color: currentColor;
     font: 600 clamp(24px, 6vw, 34px)/1.2 Cinzel, Georgia, serif;
}
 .summary-classification > span:last-child {
     color: var(--text);
     font-size: 16px;
}
 .summary-classification .summary-kicker {
     color: var(--muted);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
}
 .summary-classification.score-red {
     color: var(--score-red);
}
 .summary-classification.score-yellow {
     color: var(--score-yellow);
}
 .summary-classification.score-blue {
     color: var(--score-blue);
}
 .summary strong, .score-value {
     color: var(--bright);
     font-weight: 700;
}
 .report-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
     gap: 22px;
     align-items: start;
}
 #chart {
     display: block;
     width: 100%;
     height: auto;
     overflow: visible;
}
 #chart .chart-grid, #chart .chart-axis {
     fill: none;
     stroke: var(--gold);
     stroke-width: 1px;
}
 #chart .chart-grid {
     opacity: .3;
}
 #chart .chart-grid-major {
     opacity: .55;
}
 #chart .chart-axis {
     opacity: .7;
}
 #chart .chart-polygon {
     fill: var(--gold);
     fill-opacity: .16;
     stroke: var(--bright);
     stroke-width: 1.5px;
}
 #chart .chart-point {
     stroke: var(--bg);
     stroke-width: 2px;
}
 #chart .chart-scale {
     fill: var(--muted);
     font: 13px Montserrat, Arial, sans-serif;
}
 #chart .chart-letter {
     fill: var(--bright);
     font: 700 24px Montserrat, Arial, sans-serif;
     text-anchor: middle;
     dominant-baseline: middle;
}
 .score-red {
     color: var(--score-red);
}
 .score-yellow {
     color: var(--score-yellow);
}
 .score-blue {
     color: var(--score-blue);
}
 #chart .chart-point.score-red {
     fill: var(--score-red);
}
 #chart .chart-point.score-yellow {
     fill: var(--score-yellow);
}
 #chart .chart-point.score-blue {
     fill: var(--score-blue);
}
 .axis-report {
     display: grid;
     gap: 0;
}
 .axis-result {
     display: grid;
     grid-template-columns: 36px 1fr auto;
     gap: 9px;
     align-items: start;
     border-bottom: 1px solid var(--gold-line);
     padding: 12px 0;
}
 .axis-letter {
     color: var(--bright);
     font: 600 20px/1.3 Cinzel, Georgia, serif;
}
 .axis-result strong {
     display: block;
     color: var(--text);
     font-weight: 500;
}
 .axis-result small {
     display: block;
     color: var(--muted);
     font-size: 15px;
}
 .axis-score {
     text-align: right;
     white-space: nowrap;
     font-weight: 600;
}
 .report-actions {
     margin-top: 18px;
}
 @media (orientation: landscape) {
     .quiz-shell {
         width: min(100%, 920px);
    }
     .quiz-content {
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(270px, .75fr);
         column-gap: 28px;
         align-content: center;
    }
     .axis-meta, .question-heading {
         grid-column: 1;
    }
     .slider-area {
         grid-column: 2;
         grid-row: 1 / span 3;
         width: 100%;
         gap: 8px;
         margin: 0;
    }
}
 @media (max-width: 760px) {
     header, .panel, .question-card, .report-card {
         padding: 15px;
    }
     .report-grid {
         grid-template-columns: 1fr;
    }
     .summary {
         grid-template-columns: 1fr 1fr;
         gap: 8px;
    }
     .summary-item {
         padding: 7px 10px;
         font-size: 15px;
    }
     .axis-result {
         grid-template-columns: 30px 1fr auto;
         gap: 6px;
    }
}
 @media (max-height: 620px) and (orientation: landscape) {
     .quiz-content {
         padding: 4px 0;
    }
     .question-heading {
         font-size: clamp(21px, 4vw, 32px);
    }
     .axis-meta {
         margin-bottom: 4px;
    }
     .intro-screen h1 {
         font-size: clamp(24px, 5vh, 36px);
    }
     .intro-screen .intro-guide {
         margin-top: 10px;
         font-size: 16px;
    }
     .intro-screen .intro-detail {
         margin-top: 5px;
         font-size: 14px;
    }
}
 @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
         animation-duration: .01ms !important;
         scroll-behavior: auto !important;
    }
}