/* bundle: common.css number-picker.css round-flow.css quiz.css sense.css color-vision.css result-rank.css result-experience.css */
/* /portal-assets/apps/common.css */
/* NullerGames "Play" calculators — shared layout on top of portal.css tokens.
   Reference flow: 환생 배치소 (form → orbit stage → step cards → flash → result card → share). */
.app { padding-bottom: 40px; }
.app .hero { padding: 40px 0 22px; }
.app .hero h1 { max-width: 820px; }
.app .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.2px; background: color-mix(in srgb, var(--accent, var(--press)) 22%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--press)) 55%, transparent); color: var(--ink); margin-bottom: 14px; }
.app .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--press)); box-shadow: 0 0 10px var(--accent, var(--press)); }

/* Glass panels */
.panel-g { position: relative; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 22px; box-shadow: 6px 6px 0 var(--base), var(--shadow); }
.panel-g + .panel-g { margin-top: 18px; }
.panel-g .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); font-weight: 800; margin-bottom: 14px; }
.panel-g .panel-head .status { letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--muted); }

/* Form grid */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: block; min-width: 0; }
.field > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.field > span small { font-weight: 500; color: var(--faint); margin-left: 4px; }
.field input, .field select { width: 100%; height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--glass-line-2); background: var(--glass-2); color: var(--ink); font: inherit; font-size: 15px; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
.field input:focus, .field select:focus { border-color: var(--accent, var(--press)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--press)) 28%, transparent); }
.field .unit { position: relative; }
.field .unit input { padding-right: 52px; }
.field .unit b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--faint); font-weight: 700; pointer-events: none; }
.field .help { display: block; margin-top: 6px; font-size: 12px; color: var(--faint); }
.field.err input, .field.err select { border-color: #ff5d5d; }
.form-error { margin: 12px 0 0; color: #ff7a7a; font-size: 13px; font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.form-actions .privacy { font-size: 12px; color: var(--faint); }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg button { --depth: 3px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--glass-line-2); background: var(--glass-2); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: var(--depth) var(--depth) 0 var(--base); transition: transform 120ms ease, box-shadow 120ms ease; }
.seg button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--base); }
.seg button.on { background: var(--ink); color: var(--page); border-color: transparent; }

/* Result panel + orbit stage (환생 배치소 reference) */
.result-panel:focus { outline: none; }
.stage-wrap { position: relative; min-height: 420px; padding: 8px 0 26px; }
.stage { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; isolation: isolate; overflow: hidden; contain: layout paint; }
.stage .center { position: absolute; inset: 14%; display: grid; place-items: center; z-index: 2; text-align: center; }
.stage .center .idle { font-size: clamp(56px, 12vw, 96px); line-height: 1; animation: idle-cycle 2.7s ease both; filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); }
.orbit { position: absolute; border: 1px dashed var(--glass-line-2); border-radius: 50%; animation: orbit-turn 60s linear infinite; }
.orbit-inner { inset: 18%; --radius: 138px; }
.orbit-outer { inset: 3%; --radius: 208px; animation-duration: 100s; }
.orbit > span { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; display: grid; place-items: center; transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))); }
.orbit b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--glass-line-2); font-size: 19px; font-weight: 400; }
.particles { position: absolute; inset: 0; display: none; z-index: 3; pointer-events: none; }
.particles span { position: absolute; left: 50%; top: 50%; font-size: 30px; animation: time-flight 1.3s ease-in infinite; animation-delay: var(--delay); }
.stage.searching .particles { display: block; }
.stage-wrap.is-animation-away .stage * { animation-play-state: paused; }
.stage.searching .center .idle { opacity: .12; filter: blur(3px); }
.stage.searching .orbit { animation-duration: 4s; }
.stage-title { position: relative; z-index: 5; text-align: center; margin: 4px 0 0; font-size: clamp(19px, 3.4vw, 26px); font-weight: 800; letter-spacing: -0.4px; }
.stage-msg { position: relative; z-index: 5; text-align: center; margin: 6px 0 0; color: var(--muted); font-size: 14px; min-height: 21px; }
.stage-wrap.searching .stage-title { position: absolute; left: 12px; right: 12px; top: 46%; text-shadow: 0 0 6px var(--page), 0 0 14px var(--page), 0 2px 22px var(--page); }
.stage-timer { display: none; position: relative; z-index: 5; width: min(100%, 460px); height: 4px; margin: 14px auto 0; border-radius: 4px; background: var(--glass-line); overflow: hidden; }
.stage-timer i { display: block; height: 100%; background: var(--press); transform-origin: left; transform: scaleX(0); }
.stage-wrap.is-revealing .stage-timer { display: block; }
.impact { text-align: center; animation: impact-slam .45s cubic-bezier(.2,.8,.2,1) both; min-width: 100%; padding: 0 8px; }
.impact span { display: block; color: var(--muted); font-size: 17px; margin-bottom: 10px; font-weight: 600; }
.impact strong { display: block; font-size: clamp(34px, 7vw, 62px); line-height: 1.12; letter-spacing: -2px; color: var(--accent, var(--press)); font-variant-numeric: tabular-nums; word-break: keep-all; }
.impact strong small { font-size: .45em; letter-spacing: 0; margin-left: 4px; color: var(--ink); }
.flash { position: fixed; inset: 0; z-index: 10000; background: #fff; pointer-events: none; opacity: 0; }
:root[data-theme="dark"] .flash { background: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flash { background: #000; } }

/* Result card */
.result { animation: result-in .3s ease-out both; }
.result .headline { display: grid; gap: 4px; margin-bottom: 18px; }
.result .headline .who { color: var(--muted); font-size: 14px; font-weight: 600; }
.result .headline h2 { margin: 0; font-size: clamp(24px, 4.4vw, 38px); letter-spacing: -1px; line-height: 1.2; }
.result .headline h2 em { font-style: normal; color: var(--accent, var(--press)); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin: 16px 0; }
.metrics article { position: relative; border: 1px solid var(--glass-line); background: var(--glass-2); border-radius: 16px; padding: 18px 16px 16px; animation: metric-rise .55s ease both; overflow: hidden; }
.metrics article:nth-child(2) { animation-delay: .18s; }
.metrics article:nth-child(3) { animation-delay: .36s; }
.metrics article:nth-child(4) { animation-delay: .54s; }
.metrics article.hi { border-color: color-mix(in srgb, var(--accent, var(--press)) 60%, var(--glass-line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--press)) 30%, transparent); }
.metrics article > span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.metrics strong { display: block; font-size: clamp(26px, 3.2vw, 40px); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -1.5px; line-height: 1.1; color: var(--ink); margin: 8px 0 6px; }
.metrics strong small { font-size: .5em; letter-spacing: 0; margin-left: 3px; color: var(--muted); }
.metrics article.hi strong { color: var(--accent, var(--press)); }
.metrics b { display: block; font-size: 12.5px; color: var(--faint); font-weight: 600; line-height: 1.45; }
.result .note { font-size: 12.5px; color: var(--faint); margin: 8px 0 0; }
.result .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.result .story { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent, var(--press)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--press)) 35%, transparent); font-size: 15px; line-height: 1.6; }
.result .story b { color: var(--accent, var(--press)); }
.example-tag { position: absolute; top: 14px; right: 14px; z-index: 4; padding: 5px 10px; border-radius: 999px; background: var(--mark); color: var(--mark-ink); font-size: 12px; font-weight: 800; box-shadow: 3px 3px 0 var(--base); }
.shared-tag { background: var(--accent, var(--press)); color: #fff; }
.result > .example-tag { position: static; display: table; margin-bottom: 12px; }

/* Distribution chart */
.dist { position: relative; margin: 6px 0 4px; }
.dist svg { width: 100%; height: auto; display: block; overflow: visible; }
.dist .axis text { font-size: 11px; fill: var(--faint); font-weight: 600; }
.dist .bars rect { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.dist .bars rect.me { fill: var(--accent, var(--press)); }
.dist .curve { fill: none; stroke: var(--accent, var(--press)); stroke-width: 2.5; }
.dist .fill { fill: color-mix(in srgb, var(--accent, var(--press)) 22%, transparent); }
.dist .pin line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; }
.dist .pin circle { fill: var(--accent, var(--press)); stroke: var(--page); stroke-width: 3; }
.dist .pin text { font-size: 13px; font-weight: 800; fill: var(--ink); }
.dist .pin text.sub { font-size: 11px; font-weight: 600; fill: var(--muted); }

/* Table (statement) */
.table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.table th, .table td { padding: 11px 10px; border-bottom: 1px solid var(--glass-line); text-align: left; vertical-align: top; }
.table th { font-size: 12px; color: var(--faint); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.table td b { font-variant-numeric: tabular-nums; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.total td { font-weight: 800; border-bottom: 0; padding-top: 14px; }
.table tr.total td.num { color: var(--accent, var(--press)); font-size: 17px; }

/* Basis / details */
.basis { margin-top: 18px; }
.basis summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--muted); padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.basis summary::-webkit-details-marker { display: none; }
.basis summary::before { content: "＋"; font-weight: 400; width: 18px; }
.basis[open] summary::before { content: "−"; }
.basis .inner { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.basis .inner p { margin: 6px 0; }
.basis code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--glass-2); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.basis a { color: var(--press); font-weight: 700; }

/* 자료·출처: one source line under the intro copy + a collapsed, crawlable details line directly above the
   start/submit control. Plain muted text, no box: the ▸ bullet (▾ when open) alone says it folds. */
.source-line { margin: 8px auto 0; max-width: 680px; font-size: 12px; line-height: 1.6; font-weight: 700; color: var(--muted); }
.sources { flex: 0 0 auto; box-sizing: border-box; width: 100%; max-width: 680px; margin: 0 0 10px; padding: 0; text-align: left; font-size: 12.5px; line-height: 1.6; color: var(--muted); background: none; border: 0; border-radius: 0; }
.sources > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); border-radius: 6px; }
.sources > summary::-webkit-details-marker { display: none; }
.sources > summary::before { content: "▸"; display: inline-block; width: 10px; font-weight: 400; color: var(--faint); transition: transform .15s; }
.sources[open] > summary::before { transform: rotate(90deg); }
.sources > summary:hover { color: var(--ink); }
.sources > summary:focus-visible { outline: 2px solid var(--press); outline-offset: 2px; }
.sources-body { padding: 4px 0 2px 15px; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: left; }
.sources-body ul { margin: 0 0 6px; padding-left: 16px; }
.sources-body li { margin: 2px 0; }
.sources-body p { margin: 5px 0 0; max-width: none; line-height: 1.6; font-size: inherit; color: inherit; }
.sources-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--ink); }
.sources a { color: var(--press); font-weight: 700; }
.quiz-page .hero .source-line { margin-top: 6px; }
/* Flex-gap intros (sense/lab, rhythm) already space their children; the source line sits tight under the copy. */
.sense-intro .source-line, .rhythm-intro .source-line { margin-top: 0; }
.chat-intro .source-line, .bench-form-intro .source-line { margin-top: 4px; }
/* Centered bottom bars (sense/lab, deduction, chat, rhythm): the line is centered above the button; an open
   list scrolls inside the bar instead of pushing the button off the card. */
.sense-controls > .sources, .chat-footer > .sources, .rhythm-intro-footer > .sources { flex: 0 0 100%; max-width: none; margin: 0; text-align: center; }
.sense-controls > .sources[open] .sources-body, .chat-footer > .sources[open] .sources-body, .rhythm-intro-footer > .sources[open] .sources-body { box-sizing: border-box; max-width: 560px; margin: 0 auto; max-height: min(34vh, 260px); overflow: auto; overscroll-behavior: contain; }
.chat-footer > .sources { margin-bottom: 10px; }
.q-intro > .sources { margin: 10px auto 12px; text-align: center; }
.q-intro > .sources .sources-body { box-sizing: border-box; max-width: 560px; margin: 0 auto; }
form > .sources { margin: 14px 0 10px; }
.form-actions + .sources { margin: 12px 0 0; }
.sources-body .page-guide { margin-top: 10px; }
.sources-body .guide-item > summary { padding: 8px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.quiz-basis .sources-list { margin: 8px 0 0; padding-left: 18px; }
@media (max-width: 600px) { .sources, .sources > summary { font-size: 12px; } .sources-body { font-size: 11.5px; } .source-line { font-size: 11px; } }


/* Share dialog */
.share-dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 520px); width: 100%; }
.share-dialog::backdrop { background: rgba(5, 3, 25, .62); backdrop-filter: blur(6px); }
.share-dialog .box { background: var(--page); color: var(--ink); border: 1px solid var(--glass-line-2); border-radius: 22px; padding: 22px; box-shadow: 8px 8px 0 var(--base), var(--shadow); }
.share-dialog h2 { margin: 0; font-size: 20px; }
.share-dialog .heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.share-dialog .close { --depth: 3px; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--glass-line-2); background: var(--glass-2); font-size: 20px; cursor: pointer; }
.share-dialog p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
/* Link block (common.js linkBlock): the same controls inside the dialog and the result tail. */
.link-share-block p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.link-share-block label.inc { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.link-share-block .card-preview { border-radius: 16px; padding: 16px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, #1b1550, #5b1a5a 60%, #b8236b); border: 1px solid rgba(255,255,255,.18); }
.link-share-block .card-preview small { display: block; font-size: 11px; letter-spacing: 1.4px; opacity: .8; font-weight: 800; }
.link-share-block .card-preview b { display: block; font-size: 22px; line-height: 1.25; margin: 6px 0 4px; letter-spacing: -.5px; }
.link-share-block .card-preview span { font-size: 13px; opacity: .85; }
.link-share-block .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.link-share-block .opts .btn { justify-content: center; }
.link-share-block .url { width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--glass-line-2); background: var(--glass-2); color: var(--muted); padding: 0 12px; font: inherit; font-size: 12.5px; }
.link-share-block .fb { min-height: 20px; margin: 8px 0 0; font-size: 13px; color: var(--ok); font-weight: 700; }

@keyframes idle-cycle { 0% { opacity: 0; transform: translateY(6px) scale(.96); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes time-flight { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(.2); } 20% { opacity: .85; } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(360px) scale(2.2); } }
@keyframes impact-slam { 0% { opacity: 0; transform: scale(2.6); } 65% { opacity: 1; transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes metric-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes result-in { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 560px) {
  .orbit-inner { --radius: 92px; }
  .orbit-outer { --radius: 138px; }
  .stage { max-width: 300px; }
  .stage-wrap { min-height: 350px; }
  .panel-g { padding: 16px; border-radius: 18px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .table { font-size: 13px; }
  .table th, .table td { padding: 9px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit, .stage .center .idle, .particles span, .impact, .metrics article, .result { animation: none; }
  .particles { display: none !important; }
  .flash { display: none; }
}

/* Quiz (yes/no, one question per screen) */
.q-intro .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.q-intro .meta span { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line-2); color: var(--muted); }
.q-intro .meta span.time { color: var(--ink); border-color: color-mix(in srgb, var(--accent, var(--press)) 60%, transparent); background: color-mix(in srgb, var(--accent, var(--press)) 18%, transparent); }
.q-intro p.lead { margin: 0 0 14px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.q-progress { flex: 1; height: 8px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); overflow: hidden; }
.q-progress b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent, var(--press)), color-mix(in srgb, var(--accent, var(--press)) 60%, #fff)); transition: width 220ms ease; }
.q-count { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-card { min-height: 150px; padding: 8px 4px 18px; }
.q-num { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--accent, var(--press)); margin-bottom: 8px; }
.q-text { margin: 0; font-size: clamp(21px, 3.6vw, 30px); line-height: 1.3; letter-spacing: -0.6px; font-weight: 800; }
.q-sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.q-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-answers .btn { justify-content: center; font-size: 18px; padding: 18px 16px; border-radius: 16px; --depth: 5px; }
.q-answers .btn.picked { outline: 3px solid color-mix(in srgb, var(--accent, var(--press)) 60%, transparent); outline-offset: 2px; }
.q-answers .q-yes { --face: var(--press); color: var(--press-ink); --line: transparent; box-shadow: var(--depth) var(--depth) 0 var(--press-base); }
.q-answers .q-yes:hover { box-shadow: 2px 2px 0 var(--press-base); }
.q-answers .q-yes:active { box-shadow: 0 0 0 var(--press-base); }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.q-foot .hint { font-size: 12px; color: var(--faint); }
.q-back:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.gauge { position: relative; display: grid; place-items: center; margin: 6px auto 12px; }
.gauge svg { width: min(100%, 300px); height: auto; overflow: visible; }
.gauge .track { fill: none; stroke: var(--glass-line-2); stroke-width: 16; stroke-linecap: round; }
.gauge .val { fill: none; stroke: var(--accent, var(--press)); stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, var(--press)) 60%, transparent)); }
.gauge .num { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.gauge .num strong { display: block; font-size: clamp(44px, 9vw, 72px); letter-spacing: -3px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent, var(--press)); }
.gauge .num strong small { font-size: .4em; letter-spacing: 0; margin-left: 2px; color: var(--ink); }
.gauge .num span { display: block; font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 6px; }
.verdict { text-align: center; margin: 4px 0 14px; }
.verdict .grade { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--page); font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.verdict h2 { margin: 0 0 6px; font-size: clamp(22px, 4vw, 34px); letter-spacing: -0.8px; line-height: 1.25; }
.verdict p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.bars { display: grid; gap: 10px; margin: 14px 0; }
.bars .row { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 10px; font-size: 13.5px; }
.bars .row span { font-weight: 700; color: var(--muted); }
.bars .row i { display: block; height: 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); overflow: hidden; }
.bars .row i b { display: block; height: 100%; background: var(--accent, var(--press)); width: 0; transition: width .8s ease; }
.bars .row em { font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.task-list { display: grid; gap: 8px; margin-top: 10px; }
.task-list .t { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-line); font-size: 14px; }
.task-list .t b { font-variant-numeric: tabular-nums; color: var(--accent, var(--press)); }
.task-list .t.off { opacity: .45; }
@media (max-width: 560px) { .bars .row { grid-template-columns: 92px 1fr 46px; font-size: 12.5px; } .q-answers .btn { font-size: 16px; padding: 15px 12px; } }
#quiz-panel, #quiz-setup, #form-panel, #promise-form { scroll-margin-top: 140px; }

/* The floating title overlays the scrollport without resizing it at its threshold. */
.app-page { height: var(--app-viewport-height, 100dvh); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-page > .topbar { position: relative; flex: 0 0 auto; }
.app-page > .tabbar { display: none; }
.app-identity-slot { position: sticky; top: 0; height: 0; z-index: 28; pointer-events: none; }
.app-identity { --mark: #ffd23f; --mark-ink: #2a1c00; position: relative; background: linear-gradient(110deg, color-mix(in srgb, var(--mark) 8%, var(--page)), var(--page)); border-bottom: 1px solid color-mix(in srgb, var(--mark) 30%, var(--glass-line)); transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, visibility 220ms; }
.app-identity.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.app-identity .shell { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: center; gap: 10px; min-height: 70px; padding-top: 8px; padding-bottom: 8px; }
.app-identity .identity-title { text-wrap: balance; grid-column: 2; min-width: 0; margin: 0; font-size: clamp(26px, 3.3vw, 38px); letter-spacing: -1px; line-height: 1.3; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.identity-mark { max-width: 100%; display: inline-block; padding: 0 7px 2px; margin-inline: 2px; border: 1px solid color-mix(in srgb, var(--mark) 80%, white); border-radius: 11px; background: var(--mark); color: var(--mark-ink); font: inherit; font-weight: 850; letter-spacing: inherit; line-height: 1.3; text-align: center; word-break: keep-all; box-shadow: 4px 4px 0 var(--base); transform: rotate(-1.2deg); cursor: pointer; }
.identity-mark:focus-visible { outline: 3px solid var(--ink); outline-offset: 7px; }
.app-identity a { grid-column: 3; justify-self: end; white-space: nowrap; font-size: 12px; color: var(--muted); }
.app-session { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding: var(--identity-clearance, 20px) 20px 20px; }
.app-session .app { width: 100%; }
.app-page > .bottombar { position: relative; flex: 0 0 auto; }
.app-session #quiz-panel, .app-session #quiz-setup, .app-session #form-panel, .app-session #promise-form { scroll-margin-top: 20px; }
.app-session .footer { padding-bottom: 30px; }
@media (max-width: 560px) {
  .app-page > .topbar .shell { min-height: 50px; }
  .app-identity .shell { min-height: 66px; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 5px; padding-top: 7px; padding-bottom: 7px; }
  .app-identity .identity-title { font-size: clamp(20px, 5.9vw, 28px); letter-spacing: -.6px; }
  .identity-mark { padding: 0 5px 2px; border-radius: 9px; }
  .app-identity a { font-size: 11px; }
  .app .hero { padding-top: 26px; }
  .field input, .field select { font-size: 16px; }
  /* The visualViewport sizes the session; keyboard-hidden navigation leaves
     the flex layout entirely so input content recovers its former footprint. */
}
@media (prefers-reduced-motion: reduce) { .app-identity { transition: none; } }

/* Under the result: the result tail (#result-tail, image + link sharing) and then 「다른 테스트 더
   보기」 (#ranking, mini-card grid from portal.css). Single-screen pages lock the session to one
   viewport; in the result view the session scrolls, the app takes at most one viewport (its result
   panel is min(content, viewport) and scrolls inside only when the report is taller than that), and
   the tail and the cards follow below. Inner result scrollers chain to the session, so one gesture
   continues from the end of the report into the tail. */
.recs { flex: 0 0 auto; }
.quiz-page[data-quiz-view="result"] .app-session { flex-direction: column; overflow-y: auto; }
.quiz-page[data-quiz-view="result"] .app-session .app { flex: 0 0 auto; height: auto; max-height: 100%; }
.quiz-page[data-quiz-view="result"] .app > #result-panel:not([hidden]) { flex: 0 1 auto; max-height: none; }
.quiz-page[data-quiz-view="result"] #result-panel > #result { flex: 1 1 auto; min-height: 0; }
.quiz-page[data-quiz-view="result"] :is(#result, #result .quiz-result-scroll, #result .bench-result-content, #result .sense-scroll) { overscroll-behavior: auto; }
.app-session > .recs { border-top: 1px solid var(--glass-line); }
@media (max-height: 430px) { .quiz-page[data-quiz-view="result"] .app-session .app { max-height: none; } }

/* Result tail (#result-tail, build.py result_tail_section): 「이미지로 공유」 with the exact 800×1200
   preview (share-preview.js mount), 「링크로 공유」 (the link block) and app extras, each in the
   site's glass card. Mobile first: the preview frame keeps the 2:3 portrait at most 70vh tall. */
.result-tail { flex: 0 0 auto; width: 100%; max-width: 1000px; margin: 0 auto; padding: 8px 20px 18px; display: grid; gap: 14px; scroll-margin-top: 12px; }
.result-tail[hidden], .result-tail [hidden] { display: none !important; }
.tail-block { position: relative; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 20px; box-shadow: 6px 6px 0 var(--base), var(--shadow); scroll-margin-top: 14px; }
.tail-block > h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.4px; }
.tail-block > .tail-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.tail-share-image .share-preview-surface { display: flex; flex-direction: column; gap: 10px; }
.tail-share-image .share-preview-stage { margin: 0; min-height: 200px; max-height: 70vh; aspect-ratio: 2 / 3; width: min(100%, calc(70vh * 2 / 3)); margin-inline: auto; background: color-mix(in srgb, var(--base) 55%, transparent); }
.tail-share-image .share-preview-stage[aria-busy="true"] { background: linear-gradient(100deg, color-mix(in srgb, var(--base) 55%, transparent) 40%, color-mix(in srgb, var(--glass-2) 80%, transparent) 50%, color-mix(in srgb, var(--base) 55%, transparent) 60%) 0 0 / 250% 100%; animation: tail-skeleton 1.6s linear infinite; }
@keyframes tail-skeleton { to { background-position: -150% 0; } }
.tail-share-image .share-preview-stage img { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; box-shadow: 0 10px 30px #0004; }
.tail-share-image .share-preview-stage[aria-busy="true"] img { opacity: .35; }
.tail-share-image .share-preview-loading { position: absolute; inset: 0; margin: 0; }
.tail-share-image .share-preview-caption { order: 1; }
.tail-share-image .share-preview-feedback { font-size: 12px; line-height: 1.6; margin: 0; min-height: 20px; text-align: center; }
.tail-share-image .share-preview-actions { grid-template-columns: 1fr 1fr; }
.tail-share-image [data-state="error"] .share-preview-actions [data-image-action="retry"], .tail-share-image [data-state="empty"] .share-preview-actions [data-image-action="retry"] { grid-column: 1 / -1; }
.tail-share-link .link-share-block .fb:empty { display: none; }
.tail-block:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* App extras (quiz 「답변 보기」) are a light row, not a third card. */
.tail-extra { background: transparent; border: 0; box-shadow: none; padding: 0 4px; }
.tail-extra-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.tail-extra-actions .btn { justify-content: center; min-height: 44px; min-width: 160px; }
@media (min-width: 901px) {
  .result-tail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tail-extra { grid-column: 1 / -1; }
  .tail-share-image .share-preview-stage { width: min(100%, calc(70vh * 2 / 3), 360px); }
}
@media (max-width: 600px) { .result-tail { padding: 6px 14px 16px; gap: 12px; } .tail-block { padding: 16px; } .tail-block > h2 { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .tail-share-image .share-preview-stage[aria-busy="true"] { animation: none; } }

/* Shared utilities: an accessible text label follows a consistent leading icon. */
.utility-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.utility-icon { width: 1.15em; height: 1.15em; min-width: 1.15em; flex: 0 0 auto; vertical-align: middle; }
.utility-label { min-width: 0; line-height: 1.4; }
.utility-icon-only { padding: 7px; }
.share-dialog .close { display: inline-flex; align-items: center; justify-content: center; padding: 7px; color: var(--ink); }
.share-dialog { max-height: calc(100dvh - 32px); }
.share-dialog .box { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
/* Share preview: the exact 800×1200 PNG a reader is about to share, in a glass dialog
   matching .quiz-basis. The stage keeps the 2:3 portrait visible on a phone. */
.share-preview { max-width: min(94vw, 480px); width: 100%; border: 0; padding: 0; background: transparent; }
.share-preview[open] { display: block; }
.share-preview [hidden] { display: none !important; }
.share-preview::backdrop { background: #100b26a6; backdrop-filter: blur(8px); }
.share-preview .box { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--glass-line-2); border-radius: 24px; background: var(--page); color: var(--ink); box-shadow: 0 24px 100px #0005; }
.share-preview .heading { margin: 0; flex: 0 0 auto; gap: 12px; }
.share-preview-stage { position: relative; flex: 0 1 auto; display: flex; justify-content: center; align-items: center; min-height: 180px; max-height: min(70vh, calc(100dvh - 300px)); border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--base) 60%, transparent); }
.share-preview-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(70vh, calc(100dvh - 300px)); aspect-ratio: 2 / 3; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 30px #0004; }
.share-preview-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 24px; font-size: 14px; font-weight: 700; color: var(--muted); }
.share-preview-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--glass-line-2); border-top-color: var(--press); animation: share-preview-spin .8s linear infinite; }
@keyframes share-preview-spin { to { transform: rotate(360deg); } }
.share-preview-caption { margin: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--muted); }
.share-preview .share-preview-feedback { font-size: 12px; line-height: 1.6; margin: 0; min-height: 20px; text-align: center; }
.share-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; flex: 0 0 auto; }
.share-preview-actions .btn { min-height: 45px; font-size: 13px; justify-content: center; padding: 10px 12px; }
.share-preview-actions .btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }
.share-preview-actions [data-image-action="close"] { grid-column: 1 / -1; }
.share-preview[data-state="error"] .share-preview-actions [data-image-action="retry"] { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .share-preview-spinner { animation: none; border-top-color: var(--glass-line-2); } }
@media(max-width:600px) {
  .share-dialog .box { padding: 17px; }
  .share-dialog .opts .btn { font-size: 12px; padding: 12px 8px; }
  .quiz-page-title > a.utility-button { gap: 3px; font-size: 10px; }
  .share-preview .heading h2 { font-size: 18px; }
  .share-preview .box { padding: 14px; gap: 9px; }
}


/* Page guide: static explanation, collapsed for readers and always in the HTML for crawlers. */
.page-guide { margin-top: 14px; }
.page-guide .guide-lead { margin: 0 0 12px; }
.guide-item { border-top: 1px solid var(--glass-line); }
.guide-item:last-child { border-bottom: 1px solid var(--glass-line); }
.guide-item > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 750; color: var(--ink); }
.guide-item > summary::-webkit-details-marker { display: none; }
.guide-item > summary::after { content: "＋"; margin-left: auto; font-weight: 400; color: var(--muted); }
.guide-item[open] > summary::after { content: "−"; }
.guide-item > summary:hover { color: var(--press); }
.guide-body { padding: 0 0 14px; }
.guide-body p { margin: 0 0 10px; }
.guide-body p:last-child { margin-bottom: 0; }

/* Test pictures: no iOS long-press callout (이미지 저장/복사/보기), no drag-out, no selection
   highlight. common.js blocks the context menu. Share surfaces stay saveable. */
main[data-app] img, main[data-app] canvas, main[data-app] svg, main[data-app] [data-protect-image] {
  -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none;
}
main[data-app] #result-tail img, .share-dialog img, dialog img { -webkit-touch-callout: default; -webkit-user-drag: auto; user-drag: auto; }

/* Keep result actions in place while the entry gesture guard is armed. */
body[data-result-input-lock] :is(#result-panel,#result-tail) :is(button,.btn,[role="button"]){opacity:.5;cursor:wait}

/* Choice labels wrap between words; answer rows grow with their content. */
.sense-option, .chat-option, .q-answers .btn, .lab-choice, .iq-option { word-break: keep-all; overflow-wrap: break-word; white-space: normal; min-width: 0; height: auto; line-height: 1.5; }
.chat-option > span:not(.chat-letter) { min-width: 0; word-break: keep-all; }
#year-wage { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* /portal-assets/apps/number-picker.css */
/* Tokens have fallbacks so standalone tests can reuse the same picker. */
.number-picker, .number-picker * { box-sizing: border-box; }
.number-picker-input { display: block; position: relative; }
.has-number-picker input, .has-number-picker select { padding-right: 58px; }
/* Idle touch fields behave as picker entry points. Explicit manual mode restores
   native selection/caret; readonly itself is only held during the gesture. */
.has-number-picker input.number-picker-touch:not([data-picker-manual]) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; caret-color: transparent; }
.has-number-picker input::-webkit-inner-spin-button, .has-number-picker input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field .unit.has-number-picker input { padding-right: 94px; }
.field .unit.has-number-picker > b { right: 57px; }
.input-action { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid var(--glass-line-2, var(--line, #766b90)); background: var(--glass-2, var(--control, #f0ebf8)); color: var(--ink, #241938); font: inherit; font-size: 21px; cursor: pointer; display: grid; place-items: center; }
.input-action svg { display: block; width: 21px; height: 21px; flex: none; }
.number-picker { --picker-row: 40px; width: min(94vw, 390px); max-width: 390px; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--glass-line-2, var(--line, #766b90)); border-radius: 23px; background: var(--page, #f7f3fb); color: var(--ink, #241938); box-shadow: 0 20px 80px #10092488; font-family: inherit; overflow: auto; overscroll-behavior: contain; }
.number-picker::backdrop { background: #08041999; backdrop-filter: blur(5px); }
.number-picker-box { padding: 18px; }
.number-picker-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.number-picker-heading h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.number-picker button { font: inherit; cursor: pointer; }
.number-picker-tools { display: flex; flex: 0 0 auto; gap: 6px; margin-left: auto; }
.number-picker-tools button { display: grid; place-items: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--glass-line, #d1c4df); border-radius: 10px; background: var(--glass-2, #e8dfef); color: inherit; }
.number-picker-tools .number-picker-close { font-size: 24px; line-height: 1; }
.number-picker-sound svg { width: 20px; height: 20px; }
.number-picker-sound[aria-pressed="true"] .sound-slash, .number-picker-sound[aria-pressed="false"] .sound-waves { display: none; }
.number-picker-sound[aria-pressed="false"] { color: var(--muted, #6b5777); }
.number-picker-tip { margin: 9px 0; color: var(--muted, #6b5777); font-size: 12px; text-align: center; }
.number-picker-track { position: relative; width: min(100%, 244px); margin: 0 auto; }
.number-picker-focus { position: absolute; left: 8px; right: 8px; top: 80px; height: 40px; border: 2px solid var(--accent, var(--press, #ab3ba1)); border-radius: 11px; background: color-mix(in srgb, var(--accent, var(--press, #ab3ba1)) 12%, transparent); pointer-events: none; }
.number-picker-wheel { position: relative; height: 200px; padding: 80px 8px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; scroll-snap-type: y mandatory; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.number-picker-wheel::-webkit-scrollbar { display: none; }
.number-picker-wheel button { display: block; width: 100%; height: var(--picker-row); min-height: var(--picker-row); padding: 0; border: 0; background: transparent; color: var(--muted, #6b5777); font-size: 20px; font-weight: 600; scroll-snap-align: center; font-variant-numeric: tabular-nums; }
.number-picker-wheel button.selected { color: var(--ink, #241938); font-weight: 900; font-size: 25px; }
.number-picker-table { margin-top: 4px; }
.number-picker-table summary { cursor: pointer; color: var(--muted, #6b5777); font-size: 12px; margin-bottom: 8px; }
.number-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 112px; padding-block: 40px; overflow: auto; overscroll-behavior: contain; }
.number-picker-grid button { height: 32px; padding: 0 3px; background: var(--glass-2, #e8dfef); color: inherit; border: 1px solid var(--glass-line, #d1c4df); border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.number-picker-grid button[aria-pressed="true"] { color: var(--page, #fff); background: var(--ink, #241938); border-color: var(--ink, #241938); font-weight: 800; }
.number-picker-footer { display: flex; gap: 6px; margin-top: 15px; }
.number-picker-footer button { min-height: 40px; padding: 8px 10px; border: 1px solid var(--glass-line-2, var(--line, #766b90)); border-radius: 10px; color: inherit; background: var(--glass-2, #e8dfef); font-size: 12px; font-weight: 700; white-space: nowrap; }
.number-picker-footer .number-picker-done { flex: 1; background: var(--accent, var(--press, #ab3ba1)); border-color: transparent; color: #fff; }
@media (max-width: 560px) { .number-picker { margin-bottom: max(12px, env(safe-area-inset-bottom)); } }
@media (max-height: 650px) { .number-picker-table[open] .number-picker-grid { height: 76px; padding-block: 22px; } .number-picker-box { padding: 12px 16px; } }

/* Native selects retain platform keyboard/screen-reader behavior. The decorative
   action area uses exactly the numeric trigger's geometry and SVG stroke. */
.standard-select-wrap { display: block; position: relative; min-width: 0; }
.standard-select-wrap select, .has-number-picker select { -webkit-appearance: none; appearance: none; background-image: none; padding-right: 58px; color-scheme: light; --option-bg: var(--surface, #fff8e9); --option-ink: var(--ink, #211738); }
.standard-select-indicator { pointer-events: none; cursor: default; }
.standard-select-wrap:has(select:disabled) .standard-select-indicator { opacity: .4; }
.standard-select-wrap:focus-within .standard-select-indicator { border-color: var(--accent, var(--press, #ab3ba1)); }
.standard-select option, .standard-select optgroup, .has-number-picker select option, .has-number-picker select optgroup { color: var(--option-ink); background-color: var(--option-bg); }
:root[data-theme="dark"] .standard-select, :root[data-theme="dark"] .has-number-picker select { color-scheme: dark; --option-bg: var(--surface, #251b3c); --option-ink: var(--ink, #f6f1ff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .standard-select, :root:not([data-theme="light"]) .has-number-picker select { color-scheme: dark; --option-bg: var(--surface, #251b3c); --option-ink: var(--ink, #f6f1ff); }
}

/* Keep input scroll boundaries soft only in the direction with more content. */
.input-scroll-fade { --fade-top: 0px; --fade-bottom: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent); }
.input-scroll-fade.has-scroll-above { --fade-top: 24px; }
.input-scroll-fade.has-scroll-below { --fade-bottom: 24px; }
.number-picker-grid.input-scroll-fade.has-scroll-above { --fade-top: 12px; }
.number-picker-grid.input-scroll-fade.has-scroll-below { --fade-bottom: 12px; }

/* A time input retains its HH:MM value; the modal stages edits until confirmed. */
.has-time-picker input { padding-right: 58px; -webkit-touch-callout: none; user-select: none; caret-color: transparent; }
.has-time-picker input::-webkit-calendar-picker-indicator { display: none; }
.time-picker-columns { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: start; gap: 4px; padding: 8px 10px 12px; }
.time-picker-part { min-width: 0; text-align: center; }
.time-picker-part > span { display: block; color: var(--muted, #6b5777); font-size: 13px; margin-top: 6px; }
.time-picker-colon { padding-top: 83px; font-size: 24px; line-height: 36px; text-align: center; font-weight: 800; }
.time-picker-wheel button { font-size: 24px; }
.time-picker-wheel button.selected { font-size: 31px; }
.time-picker .number-picker-focus { left: 3px; right: 3px; }
.time-picker-error { font-size: 12px; line-height: 1.5; color: var(--accent, #ab3ba1); }
.time-picker button:focus-visible, .number-picker-wheel:focus-visible { outline: 2px solid var(--accent, #ab3ba1); outline-offset: 3px; }

/* Mouse-only drag is an addition to native touch/wheel scrolling. Suspend snap
   while held so every pixel follows the hand, then let the browser align it. */
@media (hover: hover) and (pointer: fine) {
  .number-picker-wheel.mouse-scroll-ready, .number-picker-grid.mouse-scroll-ready { cursor: grab; }
  .number-picker-wheel.mouse-scroll-ready button, .number-picker-grid.mouse-scroll-ready button { cursor: inherit; }
  .mouse-scroll-ready.is-mouse-dragging, .mouse-scroll-ready.is-mouse-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
}
.mouse-scroll-ready.is-mouse-dragging { scroll-snap-type: none; scroll-behavior: auto; }

/* Keep picker cells atomic; supplemental detail has its own full-width line. */
.number-picker-detail { margin: 10px 0 0; text-align: center; font-size: clamp(14px, 4vw, 17px); font-weight: 750; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.number-picker-wheel button, .number-picker-grid button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--picker-row); min-width: 0; }
.number-picker-grid { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
.number-picker-grid button { line-height: 30px; }
/* /portal-assets/apps/round-flow.css */
.round-flow-countdown{display:inline-flex;flex:0 0 24px;width:24px;height:24px;margin-inline-start:10px;vertical-align:middle;pointer-events:none}
.round-flow-countdown svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.round-flow-countdown circle{fill:none;stroke:currentColor;stroke-width:3}
.round-flow-track{opacity:.22}
.round-flow-ring{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}
.round-flow-countdown[data-paused="true"]{opacity:.6}
.round-flow-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.has-round-flow-hint{flex-wrap:wrap;row-gap:4px}.round-flow-tap-hint{display:block;flex:0 0 100%;grid-column:1 / -1;order:-1;width:100%;margin:0 0 2px;text-align:center;font-size:.7rem;line-height:1.4;color:var(--muted);pointer-events:none}
/* /portal-assets/apps/quiz.css */
/* Quiz pages use a single viewport. The result panel is min(report, viewport): it scrolls inside
   only when the report is taller than the screen, and the page continues into the result tail. */
.quiz-page [hidden] { display: none !important; }
.quiz-page .app-session { overflow: hidden; display: flex; min-height: 0; }
.quiz-page .app-session .app { width: 100%; max-width: 1000px; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; padding: 18px 24px 24px; }
.quiz-page-title { --mark: #ffdd62; --mark-ink: #30260f; flex: 0 0 auto; display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: center; gap: 10px; padding: 2px 0 8px; background: transparent; border: 0; }
.quiz-page-title .identity-title { text-wrap: balance; grid-column: 2; min-width: 0; margin: 0; text-align: center; font-size: clamp(24px, 2.6vw, 34px); font-weight: 850; line-height: 1.3; letter-spacing: -1px; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-page-title > a { grid-column: 3; justify-self: end; color: var(--muted); font-size: 12px; white-space: nowrap; padding: 8px 0; }
.quiz-page-title .identity-mark { vertical-align: baseline; }
.quiz-page .app > .hero { padding: 0; text-align: center; flex: 0 0 auto; }
.quiz-page .hero h1, .quiz-page .hero .badge { display: none; }
.quiz-page .hero p { margin: 0 auto; max-width: 680px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.quiz-page:not([data-quiz-view="intro"]) .app > .hero { display: none; }
.quiz-page .app > .panel-g:not([hidden]) { flex: 1 1 0; min-height: 0; max-height: 660px; margin: 0; padding: clamp(18px, 3vw, 34px); border-radius: 28px; display: flex; flex-direction: column; box-shadow: 0 12px 40px color-mix(in srgb, var(--base) 16%, transparent); }
.quiz-page .panel-g > .panel-head { flex: 0 0 auto; margin-bottom: 12px; font-size: 10px; letter-spacing: 2px; }
.quiz-page .q-intro .meta { flex: 0 0 auto; justify-content: center; margin: 0 0 16px; gap: 7px; }
.quiz-page .q-intro .meta span { padding: 7px 12px; font-size: 12px; }
.quiz-page .q-intro .lead { flex: 0 0 auto; text-align: center; max-width: 580px; margin: 0 auto; font-size: clamp(17px, 2.3vw, 23px); line-height: 1.65; letter-spacing: -.45px; word-break: keep-all; }
.quiz-page .q-intro .form-actions { flex: 0 0 auto; flex-direction: column; align-items: stretch; margin-top: 0; padding-top: 22px; text-align: center; }
.quiz-page .form-actions > .btn { justify-content: center; min-height: 50px; }
.quiz-page .q-intro .privacy { font-size: 11px; }
.quiz-page #quiz-setup #setup-body { width: 100%; max-width: 560px; margin: auto; }
.quiz-page #quiz-setup .field > span { font-size: 24px; letter-spacing: -.7px; margin-bottom: 18px; }
.quiz-page #quiz-setup .field select { height: 56px; }
.quiz-page #quiz-setup .field .help { margin-top: 14px; font-size: 13px; line-height: 1.7; }
.quiz-page #quiz-setup .form-actions { justify-content: center; padding-top: 22px; }
.quiz-page #setup-go { width: 100%; max-width: 560px; }
.quiz-page .q-top { margin: 0; gap: 18px; }
.quiz-page .q-progress { height: 5px; border: 0; }
.quiz-page .q-count { font-size: 12px; letter-spacing: 1px; }
.quiz-page .q-card { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 18px 4px; text-align: center; }
.quiz-page .q-num { font-size: 10px; letter-spacing: 2.5px; margin-bottom: 22px; }
.quiz-page .q-text { max-width: 720px; margin: 0 auto; font-size: clamp(23px, 3.2vw, 38px); line-height: 1.48; letter-spacing: -.8px; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-page .q-sub { font-size: 13px; margin-top: 16px; }
.quiz-page .q-answers { gap: 14px; flex: 0 0 auto; }
.quiz-page .q-answers .btn { min-height: 66px; font-size: 21px; border-radius: 18px; }
.quiz-page .q-foot { flex: 0 0 auto; margin-top: 18px; }
.quiz-page .q-foot .hint { font-size: 11px; }
.quiz-page .q-back { min-height: 40px; }
.quiz-page #result { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: none; }
.quiz-page .quiz-outcome { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 24px; }
/* The gauge owns the remaining cell, while its SVG stays square. Long verdicts
   and utilities reserve their real height first; no measuring loop is needed. */
.quiz-page .gauge { width: 100%; height: 100%; max-width: none; min-width: 0; min-height: 0; margin: 0; align-self: stretch; container-type: size; }
.quiz-page .gauge svg { display: block; width: min(100cqw, 100cqh, 600px); height: auto; }
.quiz-page .gauge .num { top: 50%; width: min(88cqw, 88cqh); }
.quiz-page .gauge .num strong { font-size: clamp(32px, min(23cqw, 23cqh), 112px); letter-spacing: -2px; }
.quiz-page .gauge .num span { font-size: clamp(9px, min(3.8cqw, 3.8cqh), 16px); line-height: 1.45; }
.quiz-page .verdict { margin: 0; text-align: left; }
.quiz-page .verdict .grade { font-size: 12px; padding: 6px 12px; margin-bottom: 18px; }
.quiz-page .verdict h2 { font-size: clamp(24px, 3vw, 36px); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-page .verdict .grade-subtitle { font-size: 13px; margin: -10px 0 10px; }
.quiz-page .verdict .grade-direction { font-size: 11px; line-height: 1.45; margin: 8px 0 0; }
.quiz-page .quiz-result-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.quiz-page .quiz-result-actions .btn { justify-content: center; font-size: 14px; min-height: 44px; }
.quiz-page .quiz-result-actions #q-retry, .quiz-page .quiz-result-actions #q-review { border-color: transparent; box-shadow: none; background: transparent; min-height: 32px; font-size: 12px; padding: 6px; color: var(--muted); }
.quiz-page .result > .example-tag { align-self: center; margin: 0 0 5px; padding: 3px 8px; font-size: 10px; box-shadow: none; }
.quiz-page .stage-wrap { flex: 1; min-height: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.quiz-page .stage { width: min(100%, 370px, 55dvh); height: auto; aspect-ratio: 1; flex: 0 0 auto; max-height: none; container-type: inline-size; }
.quiz-page .orbit-inner { inset: 22%; --radius: 28cqw; }
.quiz-page .orbit-outer { inset: 26px; --radius: calc(50cqw - 26px); }
.quiz-page .orbit > span { width: 34px; height: 34px; margin: -17px; }
.quiz-page .orbit b { width: 34px; height: 34px; font-size: 17px; }
.quiz-page .stage-title { position: static; margin: 0; font-size: 21px; line-height: 1.45; }
.quiz-page .stage-msg { position: static; margin: 0; font-size: 12px; min-height: 18px; }
.quiz-page .impact span { font-size: 14px; }
.quiz-page .impact strong { font-size: 45px; }
.quiz-page .quiz-basis-open { flex: 0 0 auto; align-self: center; font: inherit; font-size: 11px; color: var(--muted); border: 0; background: transparent; padding: 2px 10px; cursor: pointer; }
.quiz-page:not([data-quiz-view="intro"]):not([data-quiz-view="result"]) .quiz-basis-open:not(.quiz-help) { display: none; }
/* Shared dialog shell is also used by benchmark comparison references. */
.quiz-detail-dialog { width: min(92vw, 720px); max-height: min(86dvh, 780px); border: 1px solid var(--glass-line-2); border-radius: 24px; padding: 0; background: var(--page); color: var(--ink); box-shadow: 0 24px 100px #0005; overflow: hidden; }
.quiz-detail-dialog[open] { display: flex; flex-direction: column; }
.quiz-detail-dialog::backdrop { background: #100b26a6; backdrop-filter: blur(8px); }
.quiz-basis { width: min(92vw, 680px); max-height: 84dvh; border: 1px solid var(--glass-line-2); border-radius: 24px; padding: 0; background: var(--page); color: var(--ink); box-shadow: 0 24px 100px #0005; overflow: hidden; }
.quiz-basis[open] { display: flex; flex-direction: column; }
.quiz-basis::backdrop { background: #100b26a6; backdrop-filter: blur(8px); }
.quiz-dialog-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--glass-line); }
.quiz-dialog-head h2 { margin: 0; font-size: 18px; }
.quiz-basis-close { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--glass-line-2); border-radius: 11px; background: var(--glass-2); color: var(--ink); font: inherit; font-size: 23px; cursor: pointer; }
.quiz-basis .inner { overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px 22px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.quiz-basis .inner p { margin: 0 0 14px; }
.quiz-basis .inner p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .quiz-page .app-session .app { padding: 12px 16px 16px; gap: 10px; }
  .quiz-page-title { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 4px; padding: 2px 0 6px; }
  .quiz-page-title .identity-title { font-size: clamp(19px, 5.4vw, 24px); line-height: 1.3; letter-spacing: -.6px; }
  .quiz-page-title > a { font-size: 11px; }
  .quiz-page .app > .panel-g:not([hidden]) { padding: 20px; border-radius: 23px; }
  .quiz-page .hero p { font-size: 12px; line-height: 1.55; }
  .quiz-page .q-intro .meta span:nth-child(n+3) { display: none; }
  .quiz-page .q-intro .lead { font-size: 18px; }
  .quiz-page .q-intro .form-actions { padding-top: 18px; }
  .quiz-page .q-text { font-size: clamp(22px, 5.8vw, 28px); line-height: 1.5; }
  .quiz-page .q-num { margin-bottom: 20px; }
  .quiz-page .q-foot .hint { display: none; }
  .quiz-page .q-answers .btn { min-height: 58px; font-size: 18px; }
  .quiz-page .quiz-outcome { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
  .quiz-page .verdict { flex: 0 0 auto; text-align: center; }
  .quiz-page .verdict .grade { font-size: 10px; padding: 4px 10px; margin-bottom: 8px; }
  .quiz-page .verdict h2 { font-size: 22px; line-height: 1.4; margin: 0; }
  .quiz-page .verdict .grade-subtitle { font-size: 11px; margin: -4px 0 5px; }
  .quiz-page .quiz-result-actions { margin-top: 12px; gap: 7px; }
  .quiz-page .quiz-result-actions .btn { font-size: 12px; min-height: 42px; padding: 10px 8px; }
  .quiz-page .quiz-result-actions #q-retry, .quiz-page .quiz-result-actions #q-review { font-size: 11px; min-height: 30px; padding: 5px; }
  .quiz-page .stage { width: min(100%, 300px, 40dvh); }
  .quiz-page .stage-title { font-size: 18px; }
}
@media (max-height: 670px) and (max-width: 600px) {
  .quiz-page .app-session .app { padding: 8px 12px 12px; gap: 6px; }
  .quiz-page-title { padding: 1px 0 5px; }
  .quiz-page-title .identity-title { font-size: 19px; line-height: 1.3; }
  .quiz-page .app > .panel-g:not([hidden]) { padding: 14px; border-radius: 20px; }
  .quiz-page .panel-g > .panel-head { margin-bottom: 6px; font-size: 9px; }
  .quiz-page .hero p { display: none; }
  .quiz-page .q-intro .meta { margin-bottom: 12px; }
  .quiz-page .q-intro .meta span { padding: 5px 9px; font-size: 11px; }
  .quiz-page .q-intro .lead { font-size: 16px; line-height: 1.5; }
  .quiz-page .q-intro .form-actions { gap: 9px; padding-top: 12px; }
  .quiz-page .q-num { margin-bottom: 12px; }
  .quiz-page .q-text { font-size: 22px; line-height: 1.4; }
  .quiz-page .q-card { padding: 12px 2px; }
  .quiz-page .q-sub { margin-top: 10px; font-size: 12px; }
  .quiz-page .q-answers .btn { min-height: 48px; padding: 12px; }
  .quiz-page .q-foot { margin-top: 12px; }
  .quiz-page .q-back { min-height: 32px; padding: 7px 10px; }
  .quiz-page .gauge .num strong { letter-spacing: -1px; }
  .quiz-page .gauge .num span { font-size: clamp(8px, min(3.8cqw, 3.8cqh), 12px); margin-top: 3px; }
  .quiz-page .quiz-outcome { gap: 7px; }
  .quiz-page .verdict .grade { margin-bottom: 5px; font-size: 9px; padding: 3px 8px; }
  .quiz-page .verdict h2 { font-size: 18px; line-height: 1.35; }
  .quiz-page .verdict .grade-subtitle { font-size: 10px; margin: -2px 0 4px; }
  .quiz-page .verdict .grade-direction { font-size: 9px; margin-top: 5px; }
  .quiz-page .quiz-result-actions { margin-top: 8px; gap: 4px; }
  .quiz-page .quiz-result-actions .btn { min-height: 37px; padding: 8px 6px; font-size: 11px; }
  .quiz-page .quiz-result-actions #q-retry, .quiz-page .quiz-result-actions #q-review { min-height: 26px; padding: 4px; }
  .quiz-page .stage { width: min(100%, 230px, 34dvh); }
  .quiz-page .orbit-inner { inset: 28%; --radius: 22cqw; }
  .quiz-page .orbit-outer { inset: 20px; --radius: calc(50cqw - 20px); }
  .quiz-page .orbit > span { width: 26px; height: 26px; margin: -13px; }
  .quiz-page .orbit b { width: 26px; height: 26px; font-size: 14px; }
  .quiz-page .impact span { font-size: 11px; }
  .quiz-page .impact strong { font-size: 35px; }
  .quiz-page .stage-title { font-size: 15px; }
}
/* Extreme height/zoom must remain operable: only this accessibility fallback scrolls. */
@media (max-height: 430px) {
  .quiz-page .app-session { overflow-y: auto; }
  .quiz-page .app-session .app { min-height: 400px; height: auto; }
  .quiz-page .app > .panel-g:not([hidden]) { flex: none; min-height: 340px; }
}

/* Two sharing actions above three compact utilities, within the same viewport. */
.quiz-page .quiz-result-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quiz-page .quiz-result-actions > :nth-child(-n+2) { grid-column: span 3; }
.quiz-page .quiz-result-actions > :nth-child(n+3) { grid-column: span 2; }
.quiz-page .quiz-result-actions #q-details { border: 0; box-shadow: none; background: transparent; color: var(--muted); padding: 6px 2px; font-size: 12px; min-height: 32px; }
@media(max-width:600px) { .quiz-page .quiz-result-actions .utility-button { gap: 4px; } .quiz-page .quiz-result-actions #q-details { font-size: 11px; } }

/* On wide screens the actions sit beside the circle, freeing its full height. */
@media (min-width: 901px) {
  .quiz-page[data-quiz-view="result"] .app { max-width: 1120px; }
  .quiz-page[data-quiz-view="result"] .app > #result-panel { max-height: none; padding: 24px; }
  .quiz-page:not(.occupation-page) .quiz-outcome { display: contents; }
  .quiz-page:not(.occupation-page) .quiz-outcome > .gauge { grid-column: 1; grid-row: 1 / -1; }
  .quiz-page:not(.occupation-page) .quiz-outcome > .verdict { grid-column: 2; grid-row: 2; align-self: center; }
  .quiz-page:not(.occupation-page) .result > .example-tag { grid-column: 2; grid-row: 1; justify-self: start; }
  .quiz-page:not(.occupation-page) .quiz-result-actions { grid-column: 2; grid-row: 3; }
  .quiz-page .quiz-result-actions .btn { font-size: 12px; padding-inline: 6px; }
}
@media (max-height: 670px) and (max-width: 600px) {
  .quiz-page:not(.occupation-page) .app > #result-panel { padding: 10px 14px; }
  /* The panel heading already names shared results. Keep one visible label. */
  .quiz-page .result > .example-tag { display: none; }
  .quiz-page .verdict:has(.grade-subtitle) .grade { vertical-align: middle; margin: 0 4px 5px 0; }
  .quiz-page .verdict .grade-subtitle { display: inline; margin: 0; vertical-align: middle; }
  .quiz-page .verdict .grade-direction { margin-top: 4px; }
  .quiz-page .quiz-result-actions { margin-top: 6px; }
}

/* Introductions without a prepared cutout stay focused on the test copy. */
.quiz-page .q-intro .meta{margin-top:auto}.quiz-page .q-intro .form-actions{margin-bottom:auto}

/* Complete result in one panel: the report scrolls inside only when taller than the viewport (the
   scroll chains to the page, so the gesture continues into the result tail); 「다시 하기」 stays anchored. */
.quiz-page:not(.occupation-page) #result { position: relative; display: flex; flex-direction: column; gap: 0; }
.quiz-page .quiz-result-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--glass-line-2) transparent; padding: 0 4px 10px; }
.quiz-page .quiz-result-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.quiz-page:not(.occupation-page) .quiz-outcome { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.quiz-page .quiz-result-scroll .gauge { flex: 0 0 auto; width: clamp(130px, 24dvh, 206px); height: clamp(130px, 24dvh, 206px); align-self: center; container-type: size; }
.quiz-page .quiz-result-scroll .gauge svg { width: 100%; height: 100%; }
.quiz-page .quiz-result-scroll .gauge .num { width: 80%; }
.quiz-page .quiz-result-scroll .gauge .num strong { font-size: 29cqw; letter-spacing: -2px; }
.quiz-page .quiz-result-scroll .gauge .num span { font-size: 6cqw; }
.quiz-page .quiz-result-scroll .verdict { text-align: center; }
.quiz-page .quiz-result-scroll .verdict h2 { font-size: clamp(19px, 2vw, 25px); line-height: 1.4; }
.quiz-page .quiz-result-scroll .verdict .grade { margin-bottom: 7px; font-size: 10px; }
.quiz-page .quiz-result-scroll .verdict .grade-subtitle { margin: 0 0 6px; font-size: 11px; }
.quiz-page .quiz-result-scroll .verdict .grade-direction { margin-top: 6px; font-size: 10px; }
.quiz-page .quiz-result-detail { min-width: 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-line); }
.quiz-page .quiz-result-detail .quiz-result-explanation { margin: 0 0 14px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.quiz-page .quiz-result-detail .bars { margin: 12px 0; gap: 12px; }
.quiz-page .quiz-result-detail .bars .row { grid-template-columns: minmax(85px, auto) minmax(36px, 1fr) 38px; font-size: 12px; gap: 9px; }
.quiz-page .quiz-result-detail .bars .row i { height: 20px; }
.quiz-page .quiz-result-detail .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 16px; }
.quiz-page .quiz-result-detail .metrics article { padding: 12px 9px; border-radius: 12px; }
.quiz-page .quiz-result-detail .metrics article > span { font-size: 10px; line-height: 1.5; }
.quiz-page .quiz-result-detail .metrics strong { font-size: 24px; letter-spacing: -.8px; }
.quiz-page .quiz-result-detail .metrics b { font-size: 10px; }
.quiz-page .quiz-result-detail .story { padding: 12px; font-size: 12px; }
.quiz-page .quiz-result-detail .note { margin-top: 12px; font-size: 11px; line-height: 1.65; }
.quiz-page:not(.occupation-page) .quiz-result-actions { flex: 0 0 auto; position: relative; display: flex; justify-content: flex-end; min-height: 42px; margin: 4px 0 0; gap: 0; }
.quiz-page .quiz-result-actions > * { grid-column: auto; }
/* 「답변 보기」 is the quiet secondary next to 「다시 하기」; sharing lives in the result tail below. */
.quiz-page .quiz-result-actions .quiz-review { flex: 0 0 auto; min-height: 42px; padding: 8px 12px; border-radius: 14px; box-shadow: none; border-color: transparent; background: transparent; color: var(--muted); font-size: 13px; }
.quiz-page .quiz-result-actions .quiz-review:hover, .quiz-page .quiz-result-actions .quiz-review:focus-visible { background: var(--glass-2); color: var(--ink); }
@media (min-width: 901px) {
  .quiz-page .quiz-result-scroll { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
  .quiz-page .quiz-result-scroll .gauge { width: min(30dvh, 280px); height: min(30dvh, 280px); }
  .quiz-page .quiz-result-detail { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--glass-line); }
  .quiz-page .quiz-result-detail .bars .row { font-size: 13px; }
}
@media (max-height: 670px) and (max-width: 600px) {
  .quiz-page .quiz-result-scroll .gauge { width: 130px; height: 130px; }
  .quiz-page:not(.occupation-page) .quiz-outcome { gap: 8px; }
  .quiz-page .quiz-result-scroll .verdict h2 { font-size: 18px; }
  .quiz-page .quiz-result-detail { margin-top: 12px; padding-top: 12px; }
}
.quiz-human-dialog { width: min(90vw, 420px); max-height: 88dvh; overflow-y: auto; padding: clamp(20px, 5vw, 32px); border: 1px solid var(--glass-line-2); border-radius: 26px; background: var(--page); color: var(--ink); text-align: center; box-shadow: 0 24px 100px #0006; }
.quiz-human-dialog::backdrop { background: #100b26b8; backdrop-filter: blur(8px); }
.quiz-human-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 32px; font-weight: 800; }
.quiz-human-kicker { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.quiz-human-dialog h2 { font-size: clamp(23px, 6vw, 29px); margin: 0 0 24px; letter-spacing: -.8px; }
.quiz-human-check { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--glass-line-2); border-radius: 16px; background: var(--glass-2); text-align: left; font-weight: 700; cursor: pointer; }
.quiz-human-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.quiz-human-check input { width: 23px; height: 23px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.quiz-human-dialog #quiz-human-note { margin: 12px 0 22px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.quiz-human-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* Ticking the box confirms on its own (quiz.js); the separate confirm button is redundant. */
.quiz-human-actions [data-human-confirm] { display: none; }
.quiz-human-actions .btn { width: 100%; justify-content: center; min-height: 44px; font-size: 13px; }
.quiz-human-actions [data-human-confirm] { grid-row: 1; }
.quiz-human-actions [data-human-back] { box-shadow: none; border-color: transparent; background: transparent; color: var(--muted); }
.quiz-human-actions .btn:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; transform: none; }
/* /portal-assets/apps/sense.css */
/* Shared perception-test shell; each task owns only its stimulus and controls. */
.quiz-page .app-session .sense-app { max-width: 1040px; }
.sense-card { min-height: 0; flex: 1 1 0; max-height: min(88vh, 900px); border: 1px solid var(--glass-line-2); border-radius: 25px; background: var(--glass); display: flex; flex-direction: column; overflow: hidden; }
.sense-scroll { min-height: 0; flex: 1 1 0; overflow: auto; overscroll-behavior: contain; padding: 24px; scroll-padding: 20px; scrollbar-width: thin; }
.sense-scroll:focus-visible { outline: 2px solid var(--press); outline-offset: -3px; }
.sense-intro .sense-scroll { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; }
.sense-intro h2 { font-size: clamp(25px,3.5vw,40px); margin: 0; letter-spacing: -1px; line-height: 1.35; }
.sense-intro p { margin: 0; max-width: 600px; line-height: 1.8; }
.sense-intro-description { font-size: 16px; }
.sense-intro-symbol { width: 88px; height: 88px; border: 1px solid var(--glass-line-2); border-radius: 28px; background: var(--glass-2); display: grid; place-items: center; font-size: 42px; }
.sense-kicker { color: var(--press); font-size: 12px; font-weight: 800; letter-spacing: .7px; margin: 0 0 12px; }
.sense-note { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 8px 0; }
.sense-count { padding: 6px 13px; border-radius: 30px; border: 1px solid var(--glass-line-2); font-size: 12px; }
.sense-controls { flex: 0 0 auto; border-top: 1px solid var(--glass-line); padding: 14px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.sense-controls .btn { min-height: 45px; justify-content: center; font-size: 14px; }
.sense-controls .btn.primary { min-width: 200px; }
.sense-controls .btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.sense-progress-label { font-size: 12px; padding: 13px 22px 10px; font-weight: 700; }
#sense-progress { border: 0; height: 3px; width: 100%; background: var(--glass-line); flex: 0 0 auto; }
#sense-progress::-webkit-progress-bar { background: var(--glass-line); }
#sense-progress::-webkit-progress-value { background: var(--press); transition: width .2s; }
#sense-progress::-moz-progress-bar { background: var(--press); }
.sense-task-title,.sense-question { font-size: clamp(18px,2vw,20px); line-height: 1.4; margin: 0 0 10px; letter-spacing: -.4px; outline: none; text-align: center; }
.sense-visual { display: grid; place-items: center; width: 100%; margin: 10px auto; min-width: 0; }
.sense-visual canvas,.sense-visual svg { display: block; max-width: 100%; height: auto; }
.sense-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 12px auto; width: 100%; max-width: 670px; }
.sense-option { min-height: 48px; padding: 10px 12px; border-radius: 15px; border: 1px solid var(--glass-line-2); background: var(--glass-2); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; text-align: center; }
.sense-option:hover { border-color: var(--press); }
.sense-option:focus-visible { outline: 3px solid var(--press); outline-offset: 3px; }
.sense-option[aria-pressed="true"],.sense-option.selected { border-color: var(--press); background: color-mix(in srgb,var(--press) 14%,var(--page)); }
.sense-option:disabled { cursor: default; }
.sense-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.sense-big { font-size: clamp(32px,5vw,70px); line-height: 1.2; font-weight: 850; letter-spacing: -1px; }
.sense-feedback { padding: 14px 18px; margin-top: 16px; border: 1px solid var(--glass-line-2); border-radius: 16px; background: var(--glass); font-size: 14px; line-height: 1.8; }
.sense-loading { align-items: center; justify-content: center; text-align: center; padding: 24px; }
.sense-loading h2 { font-size: 25px; margin: 0 0 10px; outline: none; }
.sense-loading-dots { display: flex; gap: 12px; }
.sense-loading-dots i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--press); animation: sense-pulse 1s 3; }
.sense-loading-dots i:nth-child(2) { animation-delay: .1s; }
.sense-loading-dots i:nth-child(3) { animation-delay: .2s; }
@keyframes sense-pulse { 50% { opacity: .25; transform: translateY(-5px); } }
/* Result-delay loading: one draining time bar (same .lab-timer look as lab-kit.css; duplicated here because non-lab sense pages do not load it). */
.sense-loading-timer { width: min(100%, 320px); margin-top: 6px; }
.sense-loading .lab-timer-track { display: block; height: 4px; border-radius: 4px; background: var(--glass-line); overflow: hidden; }
.sense-loading .lab-timer-fill { display: block; height: 100%; background: var(--press); transform-origin: left; transform: scaleX(1); }
.sense-card #result { display: block; }
.sense-result-hero { text-align: center; padding: 15px 0 20px; }
.sense-result-hero h2 { font-size: clamp(22px,3vw,32px); margin: 14px 0; line-height: 1.4; outline: none; }
.sense-result-hero > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.8; }
/* Put the distribution in the initial view instead of spending the card on a headline. */
#result:has(.result-rank) .sense-result-hero { padding: 0 0 4px; }
#result:has(.result-rank) .sense-result-hero h2 { font-size: clamp(18px,2.6vw,27px); margin: 5px 0; }
#result:has(.result-rank) .sense-result-hero > p { margin: 5px 0; }
#result:has(.result-rank) .sense-result-hero > p:last-child { font-size: 12px; line-height: 1.55; }
#result:has(.result-rank) .sense-result-value strong { font-size: clamp(43px,6vw,72px); line-height: 1.1; }
.sense-result-value { color: var(--hexa); font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .sense-result-value { color: #087889; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sense-result-value { color: #087889; } }
.sense-result-value strong { font-size: clamp(55px,8vw,96px); font-weight: 850; line-height: 1.25; letter-spacing: -3px; }
.sense-result-value span { font-size: 21px; margin-left: 7px; }
.sense-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px auto; max-width: 720px; width: 100%; }
.sense-metrics > div { min-width: 0; padding: 17px; border: 1px solid var(--glass-line-2); border-radius: 17px; background: var(--glass); }
.sense-metrics span { display: block; color: var(--muted); font-size: 12px; }
.sense-metrics strong { display: block; font-size: 19px; margin-top: 8px; overflow-wrap: anywhere; }
.sense-result-note { font-size: 12px; color: var(--muted); line-height: 1.8; max-width: 720px; margin: 20px auto; }
.sense-details { max-width: 720px; border-top: 1px solid var(--glass-line-2); padding-top: 18px; margin: 20px auto 0; font-size: 13px; line-height: 1.8; }
.sense-details summary { cursor: pointer; font-weight: 700; padding: 5px 0; }
.sense-details table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sense-details th,.sense-details td { text-align: left; padding: 10px 5px; border-bottom: 1px solid var(--glass-line); word-break: keep-all; overflow-wrap: anywhere; }
.sense-shared { display: inline-block; font-size: 11px; border: 1px solid var(--glass-line-2); padding: 4px 10px; border-radius: 20px; margin-bottom: 14px; }
.sense-result-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; gap: 12px; border-top: 1px solid var(--glass-line); flex: 0 0 auto; }
.sense-menu-wrap { position: relative; }
.sense-more { display: grid; place-items: center; border: 1px solid var(--glass-line-2); border-radius: 12px; background: var(--glass-2); color: var(--ink); font: inherit; font-size: 25px; width: 44px; height: 44px; cursor: pointer; }
.sense-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: 215px; max-width: calc(100vw - 64px); padding: 7px; border: 1px solid var(--glass-line-2); border-radius: 16px; background: var(--page); box-shadow: 0 12px 50px #0006; z-index: 5; }
.sense-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 13px; min-height: 43px; text-align: left; padding: 9px; border-radius: 10px; cursor: pointer; }
.sense-menu button:hover,.sense-menu button:focus-visible { background: var(--glass-2); }
.sense-menu button:first-child { color: var(--press); font-weight: 750; }
.sense-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .sense-scroll { padding: 18px; }
  .sense-card { border-radius: 21px; }
  .sense-intro-description { font-size: 14px; }
  .sense-controls { padding: 12px 17px; gap: 8px; }
  .sense-controls .btn { flex: 1; min-width: 0; }
  .sense-controls .btn.primary { min-width: 0; }
  .sense-option { font-size: 13px; min-height: 47px; }
  .sense-metrics > div { padding: 13px; }
  .sense-metrics strong { font-size: 16px; }
  .sense-task-title,.sense-question { font-size: 18px; margin-bottom: 8px; }
  .sense-card { max-height: none; }
}
@media (max-height: 670px) and (max-width: 600px) {
  #result:has(.result-rank) .sense-result-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; text-align: left; }
  #result:has(.result-rank) .sense-result-hero > .sense-kicker { display: none; }
  #result:has(.result-rank) .sense-result-hero > p:last-child { grid-column: 1 / -1; font-size: 11px; }
  #result:has(.result-rank) .sense-result-hero h2 { font-size: 17px; line-height: 1.35; }
  #result:has(.result-rank) .sense-result-value strong { font-size: 35px; letter-spacing: -1px; }
  #result:has(.result-rank) .sense-result-value span { font-size: 13px; margin-left: 3px; }
  #result:has(.result-rank) .sense-shared { grid-column: 1 / -1; margin-bottom: 4px; }
  .sense-scroll { padding: 14px; }
  .sense-intro .sense-scroll { gap: 12px; }
  .sense-intro h2 { font-size: 24px; }
  .sense-intro-symbol { width: 58px; height: 58px; font-size: 29px; border-radius: 19px; }
  .sense-task-title,.sense-question { font-size: 17px; margin-bottom: 6px; }
  .sense-progress-label { padding: 9px 16px 7px; }
}
@media (prefers-reduced-motion: reduce) { .sense-loading-dots i { animation: none; } #sense-progress::-webkit-progress-value { transition: none; } }

/* Each scroll section owns its natural content height; never inherit an old
   quiz grid track that can collapse a metric row under long explanations. */
.quiz-page .sense-app .sense-card #result{display:block;grid-template-rows:none;grid-template-columns:none;align-content:start}
.sense-scroll>*{min-width:0;max-width:100%;box-sizing:border-box}
.sense-intro .sense-scroll>*{flex-shrink:0}
.sense-metrics{box-sizing:border-box}.sense-metrics>div{height:auto;align-self:stretch}
.sense-result-note,.sense-details{overflow-wrap:anywhere}
.sense-controls,.sense-result-footer{min-width:0}.sense-controls>.btn{white-space:normal}

.quiz-page[data-quiz-view="result"] .sense-app>#result-panel{padding:0}

/* Play area: one column that fills the card. Short content sits centred; a task that opts in with
   .sense-fill grows to the leftover height, and its .sense-stage row (a size container) lets the
   stimulus take that height and no more: `width:min(100cqw, calc(100cqh * ratio))` for boxes with a
   known ratio, or `max-width:100cqw; max-height:100cqh` for images and SVGs. */
:where(#sense-content) { display: flex; flex-direction: column; justify-content: safe center; }
:where(#sense-content) > * { flex: 0 0 auto; width: 100%; }
:where(#sense-content) > .sense-fill { flex: 1 1 auto; min-height: 0; }
.sense-stage { container-type: size; min-height: 0; min-width: 0; display: grid; place-items: center; }
.sense-stage > img, .sense-stage > svg { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; max-width: 100cqw; max-height: 100cqh; }
/* /portal-assets/apps/color-vision.css */
/* Stable neutral stimulus, independent of site theme. */
.ac-task { max-width: 740px; margin: auto; display: flex; flex-direction: column; }
.ac-task .ac-board { flex: 1 1 auto; min-height: 0; width: 100%; }
.ac-plate-stage { min-height: 120px; align-self: stretch; }
.ac-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ac-level { font-size: 11px; letter-spacing: 1px; font-weight: 750; color: var(--muted); }
.ac-level strong { font-size: 25px; color: var(--ink); letter-spacing: -1px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.ac-lives { font-size: 12px; white-space: nowrap; color: var(--muted); }
.ac-lives > span { color: var(--press); letter-spacing: 4px; font-size: 15px; margin-right: 5px; }
.ac-lives i { color: var(--muted); font-style: normal; }
.ac-board { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: 28px; align-items: center; max-width: 660px; margin: auto; }
.ac-plate-wrap { width: min(100%, 320px); width: min(100cqw, 100cqh, 420px); aspect-ratio: 1; margin: auto; border-radius: 50%; overflow: hidden; background: #d9d9d9; }
.ac-plate-wrap canvas { display: block; width: 100%; height: 100%; }
.ac-directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 7px; }
.ac-choice { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 3px; min-height: 74px; font-size: 12px; user-select: none; touch-action: manipulation; }
.ac-choice .ac-arrow { font-size: 25px; line-height: 1; }
.ac-choice kbd { font: inherit; font-size: 9px; opacity: .65; }
.ac-dir-0 { grid-column: 2; grid-row: 1; }.ac-dir-1 { grid-column: 3; grid-row: 2; }.ac-dir-2 { grid-column: 2; grid-row: 3; }.ac-dir-3 { grid-column: 1; grid-row: 2; }
.ac-choice:disabled { opacity: .65; }
.ac-choice.is-answer,.ac-choice.is-selected { opacity:1; }
.ac-choice.is-answer { border-color:var(--hexa); background:color-mix(in srgb,var(--hexa) 17%,var(--glass-2)); }
.ac-choice.is-selected:not(.is-answer) { border-color:var(--press); }
.ac-choice-state { font-size:9px; line-height:1.3; font-weight:750; }
.ac-choice-state:empty { display:none; }
.ac-choice:not(:disabled):active { transform: scale(.96); background: color-mix(in srgb, var(--press) 18%, var(--glass-2)); }
.ac-feedback { color: var(--ink); font-size: 13px; line-height: 1.5; text-align: center; margin: 15px 0 5px; min-height: 1.5em; }
.ac-key-help { text-align: center; }
.ac-feedback[data-correct="true"] { color:var(--hexa); font-weight:750; }
.ac-reveal-controls { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ac-reveal-controls .btn { min-width:160px; }
@media (max-width: 600px) {
  .ac-status { margin-bottom: 6px; }
  .ac-board { display: flex; flex-direction: column; gap: 10px; }
  .ac-plate-stage { flex: 1 1 auto; }
  .ac-plate-wrap { width: min(100%, 29dvh, 280px); width: min(100cqw, 100cqh); }
  .ac-directions { width: 100%; max-width: 360px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 7px; }
  .ac-choice { min-height: 54px; padding: 7px 2px; gap: 2px; font-size: 12px; }
  .ac-dir-0 { grid-column:2; grid-row:1; }.ac-dir-3 { grid-column:1; grid-row:2; }.ac-dir-2 { grid-column:2; grid-row:2; }.ac-dir-1 { grid-column:3; grid-row:2; }
  .ac-choice kbd { display: none; }.ac-feedback { font-size: 12px; margin-top: 10px; }.ac-key-help { margin: 5px 0 0; font-size: 11px; }
  .ac-reveal-controls { flex-wrap:wrap; justify-content:center; gap:7px; }.ac-reveal-controls .sense-note { font-size:10px; }.ac-reveal-controls .btn { width:100%; min-height:45px; }
}
@media (max-width: 600px) and (max-height: 670px) {
  .ac-level strong { font-size: 20px; }.ac-lives, .ac-level { font-size: 10px; }
  .ac-plate-wrap { width: min(100%, 25dvh, 190px); width: min(100cqw, 100cqh); }.ac-board { gap: 8px; }
  .ac-choice { min-height: 48px; padding: 5px 2px; }.ac-choice .ac-arrow { font-size: 21px; }
  .ac-feedback { font-size: 11px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ac-choice:not(:disabled):active { transform: none; } }
/* /portal-assets/apps/result-rank.css */
.result-rank{max-width:730px;margin:12px auto 20px;padding:18px 16px 12px;border:1px solid var(--glass-line-2);border-radius:20px;background:var(--glass-2);color:var(--ink);text-align:left}
.result-rank-heading{display:flex;justify-content:space-between;align-items:start;gap:8px}.result-rank-heading>div>span{font-size:11px;color:var(--muted);display:block}.result-rank-heading strong{display:block;font-size:clamp(23px,4vw,32px);color:var(--press);margin-top:3px;font-variant-numeric:tabular-nums}.rank-legend{font-size:10px;display:flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted)}.rank-legend i{width:8px;height:8px;background:var(--muted);opacity:.5;border-radius:2px}.rank-legend b{color:var(--press);margin-left:4px}.rank-chart{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}.rank-chart text{fill:var(--muted);font:16px system-ui,sans-serif}.rank-chart .rank-tag{fill:var(--ink);font-weight:750}.rank-bin{fill:var(--muted);opacity:.45}.rank-bars{transform-box:fill-box;transform-origin:center bottom}.rank-grid{stroke:var(--glass-line-2);stroke-width:1;fill:none}.rank-marker{stroke:var(--press);stroke-width:2;stroke-dasharray:4 3;fill:none}.rank-marker-dot{fill:var(--press);stroke:var(--page);stroke-width:2}.result-rank .rank-basis{font-size:11px;color:var(--muted);margin:4px 0 8px;line-height:1.5}.result-rank details{border-top:1px solid var(--glass-line);padding-top:8px;font-size:11px;color:var(--muted);line-height:1.6}.result-rank summary{cursor:pointer;font-weight:700}.result-rank details p{margin:8px 0 0}@media(max-width:360px){.result-rank{padding:12px 10px;border-radius:16px}.rank-legend{font-size:8px;gap:3px}.result-rank-heading strong{font-size:23px}}
.result-rank-heading{display:block;position:relative}.result-rank-heading>div>span{padding-right:100px;min-height:24px}.result-rank-heading strong{white-space:nowrap}.rank-legend{position:absolute;right:0;top:0}

.result-rank-heading strong{transform-origin:left center;max-width:100%;overflow-wrap:anywhere}
.result-rank{min-width:0;box-sizing:border-box;flex-shrink:0}
.rank-revealing{font-variant-numeric:tabular-nums}
/* /portal-assets/apps/result-experience.css */
/* Shared result hierarchy: a readable record and a persistent next action. */
body.quiz-page .quiz-page-title .quiz-help {
  display:grid; grid-column:1; grid-row:1; place-items:center; justify-self:start;
  width:36px;height:36px;padding:6px;margin:0;border:0;border-radius:50%;
  background:var(--glass);color:var(--muted);cursor:pointer;
}
body.quiz-page .quiz-page-title .quiz-help svg {width:24px;height:24px;flex:none}
body.quiz-page .quiz-page-title .quiz-help:hover {color:var(--ink);background:var(--glass-2)}
body.quiz-page .quiz-page-title .quiz-help:focus-visible {outline:2px solid var(--press);outline-offset:3px}
.sense-result-footer,.chat-result-footer,.rhythm-result-footer {gap:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
body.quiz-page .result-retry,body.quiz-page .quiz-result-actions #q-retry.result-retry {
  display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:48px;
  padding:12px 18px;border:1px solid transparent;border-radius:15px;background:var(--press);
  color:#fff;font:inherit;font-size:16px;font-weight:800;box-shadow:3px 4px 0 var(--press-shadow,#a71167);cursor:pointer;
}
body.quiz-page .result-retry:active {transform:translate(2px,2px);box-shadow:1px 2px 0 var(--press-shadow,#a71167)}
body.quiz-page .result-retry:focus-visible {outline:3px solid var(--ink);outline-offset:3px}
body.quiz-page:not(.occupation-page) .quiz-result-actions {display:flex;align-items:center;gap:12px;flex:0 0 auto;min-height:58px;margin-top:12px}
.sense-app #result .sense-result-hero {display:block;text-align:center;padding:6px 0 12px}
.sense-app #result .sense-result-value strong {font-size:clamp(80px,11vw,138px);line-height:1.1;letter-spacing:-4px}
.sense-app #result .sense-result-value span {font-size:24px;margin-left:7px}
.sense-app #result .sense-result-hero h2 {font-size:clamp(21px,2.8vw,30px);line-height:1.4;margin:10px 0}
.sense-app #result .sense-result-hero > p:last-child {font-size:13px;line-height:1.6}
.chat-result-panel .chat-score {font-size:clamp(88px,12vw,140px);line-height:1.1}
.quiz-page .quiz-result-scroll .gauge {width:clamp(210px,29dvh,290px);height:clamp(210px,29dvh,290px);margin:0 auto}
.quiz-page .quiz-result-scroll .gauge .num strong {font-size:clamp(58px,9vw,90px)}
.quiz-page .quiz-result-scroll .gauge .num span {font-size:12px}
@media(min-width:1000px) and (min-height:720px) {
 .quiz-page .quiz-result-scroll {display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
 .quiz-page .quiz-result-scroll .quiz-outcome {grid-row:span 2}
 .quiz-page .quiz-result-scroll .result-rank {width:100%;margin:0;box-sizing:border-box}
 .quiz-page .quiz-result-scroll .quiz-result-detail {grid-column:2;margin:0;border:0;padding:0}
}
@media(max-width:360px) {
 .sense-app #result .sense-result-value strong {font-size:76px}
 .sense-result-footer,.chat-result-footer,.rhythm-result-footer {padding-inline:12px}
 body.quiz-page .quiz-page-title .quiz-help {width:32px;height:32px;padding:4px}
}

/* Programmatically focused headings announce the result without a button outline. */
.chat-result-heading h2[tabindex="-1"]{outline:none}

@media (max-width: 360px) {
  [data-app="breakeven"] .metrics { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .quiz-page [data-app="ailove"] .quiz-result-detail .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-page [data-app="ailove"] .quiz-result-detail .metrics article:last-child { grid-column: 1 / -1; }
}