:root {
      --bg: #080704; --surface: #0e0c08; --text: #eee8dc; --gold: #d5a435; --bright: #f0cf74; --muted: #a9a294;
      --score-red: #b85b52; --score-yellow: #d8b95d; --score-green: #82966b; --score-blue: #718da5;
      --gold-line: rgba(213, 164, 53, .25);
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: radial-gradient(ellipse at 50% 0, rgba(213, 164, 53, .07), transparent 38rem), var(--bg); color: var(--text); font: 300 16px/1.65 Montserrat, Arial, sans-serif; }
    main { width: min(1120px, calc(100% - 32px)); margin: 0 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; }
    .question-heading { display: flex; align-items: center; gap: 10px; }
    .question-icon { width: 30px; height: 30px; flex: none; }
    .question-icon-use { color: var(--gold); fill: currentColor; }
    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; }
    header { position: relative; margin-bottom: 24px; border-top-color: var(--gold); box-shadow: 0 0 55px rgba(213, 164, 53, .035); }
    .eyebrow { color: var(--bright); font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
    .intro, .help, .question-copy, .muted { color: var(--muted); }
    label { display: block; font-weight: 700; }
    input, select, textarea, 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, select:focus, textarea:focus { outline: 1px solid var(--bright); outline-offset: 2px; }
    input:disabled { opacity: .45; }
    .question-list { display: grid; gap: 12px; }
    .question-card { border-color: rgba(213, 164, 53, .2); transition: border-color .2s ease, background-color .2s ease; }
    .question-card:focus-within { border-color: rgba(240, 207, 116, .7); background: #100d08; }
    .question-copy { margin-bottom: 12px; }
    .question-tools { display: grid; grid-template-columns: 1fr 180px; gap: 12px; align-items: end; }
    .status-note { color: var(--bright); font-size: 13px; margin: 8px 0 0; }
    .transversal { margin-top: 20px; }
    textarea { min-height: 90px; resize: vertical; }
    button { cursor: pointer; margin-top: 20px; min-height: 50px; border: 0; background: linear-gradient(105deg, #b97b10, #f0cf74 52%, #c48c1c); color: #120e05; font-size: 11px; 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; }
    .report-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 20px; }
    #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: .35; }
    #chart .chart-grid-major { opacity: .6; }
    #chart .chart-axis { opacity: .7; }
    #chart .chart-polygon { fill: var(--gold); fill-opacity: .18; stroke: var(--bright); stroke-width: 1px; }
    #chart .chart-point { stroke: var(--bg); stroke-width: 1px; }
    #chart .chart-center { fill: var(--bright); }
    #chart .chart-scale { fill: var(--muted); font: 12px Montserrat, Arial, sans-serif; }
    #chart .chart-axis-label { fill: var(--text); font: 600 18px Montserrat, Arial, sans-serif; text-transform: uppercase; dominant-baseline: middle; }
    #chart .chart-axis-number { fill: currentColor; font-weight: 700; }
    #chart .chart-axis-name { fill: var(--text); }
    #chart .chart-label-left { text-anchor: end; }
    #chart .chart-label-right { text-anchor: start; }
    #chart .chart-label-center { text-anchor: middle; }
    #chart .icon-use { fill: currentColor; }
    .score-red { color: var(--score-red); }
    .score-yellow { color: var(--score-yellow); }
    .score-green { color: var(--score-green); }
    .score-blue { color: var(--score-blue); }
    .score-value { font-weight: 700; }
    #chart .chart-point.score-red { fill: var(--score-red); }
    #chart .chart-point.score-yellow { fill: var(--score-yellow); }
    #chart .chart-point.score-green { fill: var(--score-green); }
    #chart .chart-point.score-blue { fill: var(--score-blue); }
    .axis-report { display: grid; gap: 8px; }
    .axis-result { display: grid; grid-template-columns: 42px 1fr; align-items: center; border-bottom: 1px solid var(--gold-line); padding: 10px 0; }
    .axis-report-icon { width: 34px; height: 34px; }
    .axis-report-icon .icon-use { fill: currentColor; }
    .axis-result strong { color: var(--bright); }
    .summary { display: grid; gap: 6px; margin-bottom: 18px; }
    .summary strong { color: var(--bright); }
    .transversal-result { margin-top: 20px; white-space: pre-wrap; }
    @media (max-width: 700px) {
      .question-tools, .report-grid { grid-template-columns: 1fr; }
      main { width: min(100% - 20px, 1120px); padding-top: 20px; }
      header, .panel, .question-card, .report-card { padding: 14px; }
    }

    body { height: 100svh; overflow: hidden; 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; }
    .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(12, 1fr); gap: 4px; 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 { display: block; max-width: 690px; color: var(--text); font: 500 clamp(25px, 7vw, 42px)/1.25 Cinzel, Georgia, serif; }
    .question-icon { width: 32px; height: 32px; flex: none; }
    .question-icon-use { color: var(--gold); fill: currentColor; }
    .slider-area { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
    .slider-hint { width: 100%; margin: 0 0 30px; color: var(--muted); font-size: 16px; text-align: center; }
    .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; top: auto; left: auto; 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-value { position: absolute; top: 0; 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-value.pending { color: rgba(240, 207, 116, .45); }
    .slider-decimal { font-size: .7em; vertical-align: .12em; }
    .slider-endpoint { position: absolute; left: 50%; color: var(--gold); font: 500 clamp(17px, 5.5vw, 21px)/1 Montserrat, Arial, sans-serif; transform: translateX(-50%); }
    .quiz-actions { display: flex; gap: 12px; flex: none; padding-top: 8px; }
    .quiz-actions button { flex: 1; margin: 0; }
    .quiz-actions button:disabled { visibility: hidden; }
    button { margin-top: 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-guide { margin-top: 20px; color: var(--text); font-size: clamp(17px, 4.4vw, 21px); line-height: 1.6; }
    .intro-detail { max-width: 560px; margin-top: 12px; color: var(--muted); }
    .screen-enter { animation: screen-enter .22s ease both; }
    @keyframes screen-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .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); } }
    .summary { display: grid; gap: 8px; }
    .summary > div:not(.summary-classification) { border-left: 1px solid var(--gold); padding: 8px 14px; background: rgba(213, 164, 53, .035); }
    .summary-classification { display: grid; 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:not(.summary-kicker) { 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 .summary-value { color: var(--bright) !important; font-size: 17px; font-weight: 600; }
    .summary-classification.score-red { color: var(--score-red); }
    .summary-classification.score-yellow { color: var(--score-yellow); }
    .summary-classification.score-green { color: var(--score-green); }
    .summary-classification.score-blue { color: var(--score-blue); }
    .axis-report { gap: 0; }
    .axis-result { grid-template-columns: 42px 1fr; gap: 9px; align-items: start; }
    .slider-endpoint { top: 82px; left: auto; transform: translateY(-50%); }
    .slider-endpoint.start { left: 0; right: auto; bottom: auto; }
    .slider-endpoint.end { right: 0; left: auto; bottom: auto; }
    @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 2; width: 100%; gap: 8px; margin: 0; }
    }
    @media (max-width: 760px) {
      main { width: 100%; padding: 0; }
      body.showing-report main { width: min(100% - 20px, 1120px); padding: 20px 0 42px; }
      .panel, .report-card { padding: 15px; }
      .report-grid { grid-template-columns: 1fr; }
    }
    @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-guide { margin-top: 10px; font-size: 16px; }
      .intro-detail { margin-top: 5px; font-size: 14px; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }