/* Hallmark · shape: app screen · genre: playful · theme: Werkstatt (deal 1/3) · redesign: full
 * nav: kept home identity · signature: white character dossier and sharp verdict · states: home, answering, selected, paused, result, share, failure
 * werkstatt: user-approved white, ink and orange palette · axes: light/geometric-sans/warm · posture: restrained · surface: absolute-white · v2.0.0 */
/* Hallmark · pre-emit critique: readable Chinese, neutral answer choices; weakest: wide original illustrations, use contained full-frame image areas. */
/* Hallmark · waive 7b · user requires white single-character illustrations · matching white image surfaces avoid visible boxes. */
/* Hallmark · answered F4 · answer highlights are selected states, not additional primary actions. */
@import url('./tokens.css');
@import url('./base.css');

html,body { overflow-x:clip; }
body { background:var(--color-paper); }
button { cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:var(--color-clear); }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--color-focus); outline-offset:4px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.masthead,.site-footer,main { width:calc(100% - 64px); max-width:var(--container); margin-inline:auto; }
.masthead { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); border-bottom:2px solid var(--color-ink); }
.brand { display:inline-flex; align-items:center; gap:var(--space-sm); font-size:18px; font-weight:800; text-decoration:none; }
.brand-mark { width:32px; height:32px; background:var(--color-ink); color:var(--color-paper); display:grid; place-items:center; font-size:20px; }
.header-note { font-size:14px; color:var(--color-muted); }
.screen { min-height:640px; }
.home-screen { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--space-xl) var(--space-48); align-items:center; padding:var(--space-56) 0 var(--space-32); }
.home-copy h1 { max-width:13ch; font-size:56px; line-height:1.24; letter-spacing:-.05em; }
.home-copy .lead { margin-top:var(--space-lg); color:var(--color-ink-2); font-size:18px; }
.btn { min-height:52px; padding:var(--space-sm) var(--space-lg); display:inline-flex; justify-content:center; align-items:center; gap:var(--space-lg); border:1px solid var(--color-ink); font-weight:700; font-size:16px; line-height:1.5; text-decoration:none; background:var(--color-clear); color:var(--color-ink); }
.btn.primary { background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-accent); }
.btn.primary:hover { background:var(--color-ink); border-color:var(--color-ink); }
.btn.secondary:hover { background:var(--color-paper-2); }
.btn:active { transform:translateY(1px); }
.btn[aria-busy='true'] { cursor:progress; }
.start-btn { margin-top:var(--space-32); min-width:232px; justify-content:space-between; }
.home-meta { font-size:13px; color:var(--color-muted); margin-top:var(--space-sm); }
.home-facts { display:flex; gap:var(--space-32); padding:0; margin:var(--space-32) 0 0; }
.home-facts div { display:flex; flex-direction:column-reverse; gap:var(--space-2xs); }
.home-facts dt { font-size:13px; color:var(--color-muted); }
.home-facts dd { margin:0; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.2; }
.home-visual { margin:0; align-self:stretch; display:flex; flex-direction:column; background:var(--color-white); border-bottom:2px solid var(--color-ink); }
.character-lineup { flex:1; min-height:296px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; padding:var(--space-lg) var(--space-2xs) var(--space-xs); }
.character-lineup img { width:100%; height:256px; object-fit:cover; object-position:center; }
.character-lineup img:nth-child(2) { height:312px; }
.home-visual figcaption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-xs); padding:var(--space-20) var(--space-lg); border-top:1px solid var(--color-rule); font-size:16px; }
.home-visual figcaption strong { font-weight:800; }
.dimension-intro { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-lg); padding-top:var(--space-lg); border-top:1px solid var(--color-rule); }
.dimension-intro>div { position:relative; padding-right:var(--space-xs); }
.dimension-intro b { float:right; font-size:18px; color:var(--color-muted); font-weight:500; }
.dimension-intro h2 { font-size:16px; line-height:1.4; letter-spacing:0; }
.dimension-intro p { margin-top:var(--space-xs); font-size:13px; line-height:1.7; color:var(--color-muted); max-width:17em; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); min-height:72px; border-top:1px solid var(--color-rule); font-size:12px; color:var(--color-muted); }
.test-screen { padding:var(--space-32) 0; }
.test-toolbar,.result-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); font-size:14px; }
.text-btn { border:0; background:var(--color-clear); padding:var(--space-sm) 0; color:var(--color-muted); font-size:14px; }
.text-btn:hover:not(:disabled) { color:var(--color-accent); text-decoration:underline; text-underline-offset:4px; }
.progress-text { font-weight:700; font-variant-numeric:tabular-nums; }
.progress-track { height:4px; background:var(--color-rule); margin-top:var(--space-sm); overflow:clip; }
#progress-fill { height:100%; width:100%; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-short) var(--ease-out); }
.question-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-80); padding:var(--space-48) 0 var(--space-32); align-items:start; }
.question-number { font-size:64px; font-weight:800; line-height:1; color:var(--color-rule); font-variant-numeric:tabular-nums; }
.question-copy h1 { font-size:32px; line-height:1.6; letter-spacing:-.025em; margin-top:var(--space-lg); min-width:0; overflow-wrap:break-word; }
.question-copy h1:focus { outline:none; }
.answer-guide { font-size:14px; color:var(--color-muted); line-height:1.8; margin-top:var(--space-32); }
.answers { display:grid; gap:var(--space-sm); padding-top:var(--space-xs); }
.option-btn { position:relative; display:grid; gap:var(--space-2xs); text-align:left; background:var(--color-paper-3); border:1px solid var(--color-rule); color:var(--color-ink); min-height:80px; padding:var(--space-md) var(--space-56) var(--space-md) var(--space-lg); }
.option-btn:hover:not(:disabled) { border-color:var(--color-ink); background:var(--color-white); }
.option-label { font-size:16px; font-weight:700; }
.option-hint { font-size:13px; color:var(--color-muted); }
.option-circle { position:absolute; right:24px; top:calc(50% - 9px); width:18px; height:18px; border:1px solid var(--color-rule); border-radius:50%; }
.option-btn.chosen { border-color:var(--color-accent); background:var(--color-accent-soft); opacity:1; }
.option-btn.chosen .option-circle { border-color:var(--color-accent); background:var(--color-accent); box-shadow:inset 0 0 0 4px var(--color-accent-soft); }
.test-note { color:var(--color-muted); text-align:center; font-size:13px; margin-top:var(--space-md); }
.result-screen { padding:var(--space-lg) 0 var(--space-xl); }
.result-toolbar { min-height:48px; border-bottom:1px solid var(--color-rule); padding-bottom:var(--space-md); }
#result-code { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
#preview-label { color:var(--color-accent); font-size:13px; }
.result-poster { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-56); padding:var(--space-32) 0; align-items:center; }
.result-portrait { background:var(--color-white); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
#result-avatar { width:100%; min-height:300px; display:flex; align-items:center; flex:1; }
#result-image { width:100%; height:344px; object-fit:contain; }
.portrait-caption { padding:var(--space-md); text-align:center; font-size:12px; color:var(--color-muted); border-top:1px solid var(--color-rule); }
.result-summary h1 { font-size:36px; line-height:1.25; letter-spacing:-.035em; }
.result-tags { display:flex; flex-wrap:wrap; gap:var(--space-md); color:var(--color-muted); font-size:13px; margin-top:var(--space-sm); }
.result-tags span+span { padding-left:var(--space-md); border-left:1px solid var(--color-rule); }
.result-summary blockquote { margin:var(--space-lg) 0 var(--space-28); padding:0; font-size:19px; line-height:1.7; font-weight:700; }
.score-list { display:grid; gap:var(--space-md); }
.score-label { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-md); font-size:14px; margin-bottom:var(--space-xs); }
.score-label small { color:var(--color-muted); margin-left:var(--space-xs); }
.score-label strong { font-variant-numeric:tabular-nums; font-size:16px; font-weight:700; }
.dim-bar-track { height:6px; background:var(--color-rule); position:relative; overflow:clip; }
.dim-bar-fill { width:100%; height:100%; transform-origin:left; transform:scaleX(0); }
.dim-s .dim-bar-fill { background:var(--color-s); }.dim-a .dim-bar-fill { background:var(--color-a); }.dim-d .dim-bar-fill { background:var(--color-d); }.dim-b .dim-bar-fill { background:var(--color-b); }
.result-bottom { display:grid; grid-template-columns:1fr 300px; gap:var(--space-56); padding:var(--space-32) 0 0; border-top:2px solid var(--color-ink); }
.result-reading h2 { font-size:20px; line-height:1.4; letter-spacing:0; }
#result-desc { font-size:16px; line-height:1.9; margin-top:var(--space-md); max-width:44em; }
.result-actions { display:flex; flex-direction:column; gap:var(--space-sm); align-self:start; }
.result-actions p { font-size:13px; color:var(--color-muted); text-align:center; line-height:1.8; margin-top:var(--space-2xs); }
#image-error { color:var(--color-muted); font-size:14px; padding:var(--space-lg); }
dialog { padding:0; border:1px solid var(--color-ink); background:var(--color-paper-3); color:var(--color-ink); width:calc(100% - 48px); max-width:440px; }
dialog::backdrop { background:var(--color-overlay); }
.share-content { padding:var(--space-32); display:grid; gap:var(--space-md); }
.share-content h2 { font-size:24px; line-height:1.4; }.share-content p { font-size:15px; line-height:1.8; color:var(--color-muted); }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); background:var(--color-ink); color:var(--color-white); padding:var(--space-sm) var(--space-lg); font-size:14px; z-index:var(--z-toast); opacity:0; pointer-events:none; }
#toast.show { opacity:1; }
.skip { position:absolute; transform:translateY(-200%); padding:var(--space-md); background:var(--color-ink); color:var(--color-white); z-index:var(--z-toast); }
.skip:focus { transform:none; }
.noscript { padding:var(--space-lg); text-align:center; }
@media (min-width:1440px) { .home-screen { padding-top:var(--space-2xl); padding-bottom:var(--space-xl); } }
@media (max-width:800px) {
 .masthead,.site-footer,main { width:calc(100% - 40px); }
 .home-screen { gap:var(--space-32); }.home-copy h1 { font-size:44px; }.home-visual figcaption { padding:var(--space-md); font-size:14px; }.question-layout { gap:var(--space-xl); }
 .result-poster { gap:var(--space-32); }.result-bottom { grid-template-columns:1fr 260px; gap:var(--space-32); }
}
@media (max-width:600px) {
 .masthead { min-height:64px; }.brand { font-size:16px; gap:var(--space-xs); }.brand-mark { width:28px; height:28px; font-size:18px; }.header-note { display:none; }
 .screen { min-height:0; }.home-screen { grid-template-columns:minmax(0,1fr); padding:var(--space-32) 0 var(--space-lg); gap:var(--space-lg); }
 .home-copy h1 { font-size:42px; line-height:1.25; }.home-copy .lead { font-size:16px; margin-top:var(--space-md); }.start-btn { margin-top:var(--space-lg); width:100%; }.home-meta { text-align:center; font-size:12px; }
 .home-facts { gap:0; justify-content:space-between; margin-top:var(--space-lg); padding-right:var(--space-32); }.home-facts dd { font-size:24px; }
 .home-visual { min-height:232px; }.character-lineup { min-height:192px; padding-top:var(--space-xs); }.character-lineup img { height:152px; }.character-lineup img:nth-child(2) { height:192px; }.home-visual figcaption { padding:var(--space-sm) var(--space-md); }
 .dimension-intro { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); padding-top:var(--space-lg); }.dimension-intro p { font-size:12px; }.dimension-intro h2 { font-size:16px; }
 .site-footer { padding:var(--space-20) 0; flex-direction:column; align-items:flex-start; gap:var(--space-xs); font-size:12px; min-height:0; }
 .test-screen { padding:var(--space-md) 0 var(--space-lg); }.test-toolbar { font-size:13px; }.text-btn { font-size:13px; }.progress-track { margin-top:var(--space-2xs); }
 .question-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); padding:var(--space-lg) 0 var(--space-md); }.question-number { font-size:36px; }.question-copy h1 { font-size:23px; line-height:1.65; margin-top:var(--space-sm); }.answer-guide { margin-top:var(--space-sm); font-size:12px; }.answer-guide br { display:none; }
 .answers { gap:var(--space-sm); padding:0; }.option-btn { min-height:68px; padding:var(--space-sm) var(--space-48) var(--space-sm) var(--space-md); }.option-hint { font-size:12px; }.option-circle { right:16px; }.test-note { font-size:12px; margin-top:0; }
 .result-screen { padding-top:var(--space-sm); }.result-toolbar { font-size:12px; padding-bottom:var(--space-xs); }.result-poster { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); padding:var(--space-lg) 0; }
 #result-avatar { min-height:208px; }#result-image { height:240px; }.portrait-caption { padding:var(--space-sm); }.result-summary h1 { font-size:30px; }.result-summary blockquote { font-size:18px; margin:var(--space-20) 0 var(--space-lg); }.result-tags { margin-top:var(--space-sm); font-size:12px; }.score-list { gap:var(--space-md); }
 .result-bottom { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); padding-top:var(--space-lg); }.result-actions { border-top:1px solid var(--color-rule); padding-top:var(--space-lg); }.result-actions p br { display:none; }.share-content { padding:var(--space-lg); }
}
@media(max-width:600px) { .result-summary { display:contents; } .result-summary h1 { grid-row:1; } .result-tags { grid-row:2; } .result-portrait { grid-row:3; } .result-summary blockquote { grid-row:4; } .score-list { grid-row:5; } .result-poster { gap:var(--space-md); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }