@font-face{font-family:PF;font-style:normal;font-weight:400;font-display:swap;src:url(assets/pingfang-hk-regular.woff) format('woff');}
@font-face{font-family:PF;font-style:normal;font-weight:600;font-display:swap;src:url(assets/pingfang-hk-semibold.woff) format('woff');}

:root{color-scheme:light dark;--bg:#f8f9fb;--panel:#fff;--ink:#222b36;--muted:#576575;--line:#c2ccd7;--soft:#edf3fa;--blue:#1e5ea1;--good:#20623e;--bad:#a62e2e;--hover:#e6edf5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 PF,system-ui,sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 16px;min-height:44px}button:hover{background:var(--hover)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.primary,button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover,button[aria-pressed=true]:hover{background:#194f88}.app{max-width:1000px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}.eyebrow{font-size:14px;letter-spacing:2px;color:var(--blue);font-weight:600}h1{margin:4px 0 0;font-size:32px;line-height:1.2}h2{font-size:24px;margin:0 0 12px}h3{font-size:19px;margin:16px 0 8px}p{margin:8px 0}.muted{color:var(--muted)}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.modes{display:flex;gap:6px}.filter{margin-left:auto;display:flex;gap:8px;align-items:center}select{border:1px solid var(--line);border-radius:8px;min-height:44px;background:var(--panel);padding:8px 12px}.status{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:8px}.track{height:4px;background:var(--line);border-radius:3px;margin-bottom:16px}.bar{height:100%;background:var(--blue);border-radius:3px}.workspace{display:grid;grid-template-columns:300px 1fr;gap:24px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}.visual{background:var(--soft);border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:330px;padding:20px}.tilewrap{display:flex;gap:16px;justify-content:center;align-items:center;margin:20px 0}.tilewrap img{height:176px;width:auto}.prompt{font-size:14px;color:var(--muted);text-align:center}.answer{min-height:225px;display:flex;flex-direction:column;justify-content:center}.answer-name{font-size:36px;font-weight:600;line-height:1.25;margin-bottom:12px}.facts{display:flex;gap:8px;flex-wrap:wrap}.fact{background:var(--soft);padding:8px 12px;border-radius:6px}.hint{border-left:3px solid var(--blue);padding-left:12px;margin:16px 0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.actions button{flex:1}.study-title{font-size:24px;font-weight:600}.question{padding:0;margin:0 0 12px;border:0}.question legend{font-size:15px;font-weight:600;margin-bottom:6px}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.choices button{padding:8px 6px}.choices.two{grid-template-columns:repeat(2,1fr)}.choices.ranks{grid-template-columns:repeat(6,1fr)}.result{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.good{color:var(--good)}.bad{color:var(--bad)}.result .answer-name{font-size:26px;margin-top:8px}.result .hint{margin:10px 0}.done{grid-column:1/-1;text-align:center;padding:32px 12px}.score{font-size:54px;font-weight:600;color:var(--blue);line-height:1.2;margin:20px 0}.done .actions{max-width:480px;margin:24px auto 0}.guide{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 16px}.guide summary{cursor:pointer;min-height:32px;font-weight:600}.guide-content{padding-top:8px}.reference{display:grid;grid-template-columns:1fr 1fr;gap:20px}.source{font-size:14px;color:var(--muted);margin:12px 0 0}.assist{font-size:14px;color:var(--muted)}[hidden]{display:none!important} @media(prefers-color-scheme:dark){:root{--bg:#161c24;--panel:#202935;--ink:#f5f7fa;--muted:#bbc7d4;--line:#576879;--soft:#2a384a;--blue:#87bbf3;--good:#8bdbab;--bad:#ffabab;--hover:#314056}.primary,button[aria-pressed=true]{background:#215f9f;border-color:#87bbf3}.bar{background:#87bbf3}.primary:hover,button[aria-pressed=true]:hover{background:#2a72bb}}@media(max-width:640px){.app{padding:16px}header{align-items:start}h1{font-size:28px}header .muted{display:none}.filter{margin-left:0}.toolbar{gap:8px}.workspace{grid-template-columns:1fr;padding:16px;gap:16px}.visual{min-height:200px;padding:12px}.tilewrap{margin:12px 0}.tilewrap img{height:124px}.answer{min-height:140px}.reference{grid-template-columns:1fr;gap:0}.choices{grid-template-columns:repeat(2,1fr)}.choices.ranks{grid-template-columns:repeat(6,1fr)}.answer-name{font-size:30px}.done{padding:20px 0}.filter select{max-width:155px}.actions{margin-top:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Shared phone, tablet and desktop layout. No external dependencies. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:280px}
button,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{min-width:44px}
.app{padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left))}
.workspace{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}
.workspace>*,header>*,.toolbar>*{min-width:0}
.tilewrap{max-width:100%;width:100%;gap:12px}
.tilewrap img{max-width:calc((100% - 12px)/2);object-fit:contain;display:block}
.tilewrap img:only-child{max-width:100%}
.choices{grid-template-columns:repeat(4,minmax(0,1fr))}
.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices.ranks{grid-template-columns:repeat(6,minmax(0,1fr))}
.choices button{overflow-wrap:anywhere}
.guide summary{min-height:44px;display:list-item;padding:10px 0}
.result:focus{outline:none}
.result:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.keyboard-help{margin:12px 0 0}
@media(hover:none),(pointer:coarse){.keyboard-help{display:none}button:hover{background:var(--panel)}.primary:hover,button[aria-pressed=true]:hover{background:var(--blue);color:#fff}}
@media(max-width:799px){
.app{padding:16px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
header{align-items:flex-start;margin-bottom:16px}header>.muted{display:none}
h1{font-size:28px}.eyebrow{font-size:14px;letter-spacing:1px}
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.modes{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filter{margin:0;min-width:0}.filter select{flex:1;min-width:0;max-width:none;width:100%}
.toolbar>button{padding:10px 12px}
.workspace{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}
.visual{min-height:0;padding:16px}.tilewrap{margin:12px 0}.tilewrap img{height:132px}
.answer{min-height:0;padding:4px 0}.answer-name{font-size:30px}.study-title{font-size:22px}
.actions{margin-top:16px}.actions button{min-height:48px;padding:10px 12px}
.choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choices.ranks{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.choices button{min-height:48px}
.question{margin-bottom:16px}.question legend{font-size:16px}
.reference{grid-template-columns:1fr;gap:0}.guide{padding:4px 16px}
.status{gap:8px;flex-wrap:wrap}.done{padding:16px 0}.done .actions{flex-wrap:wrap}
.result{scroll-margin-top:16px}
}
@media(max-width:359px){
.app{padding-left:12px;padding-right:12px}h1{font-size:26px}
.workspace{padding:12px}.visual{padding:12px}.tilewrap img{height:112px}
.choices.ranks{grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:6px 8px}.toolbar{gap:8px}.toolbar>button{padding:10px 8px}
}
@media(max-width:799px) and (orientation:landscape) and (max-height:500px){
.visual{padding:12px}.tilewrap img{height:96px}.tilewrap{margin:8px 0}
}
@media(prefers-color-scheme:dark) and (hover:none){.primary:hover,button[aria-pressed=true]:hover{background:#215f9f}}


#position{scroll-margin-top:16px}body{padding-bottom:env(safe-area-inset-bottom)}.web-note{font-size:14px;color:var(--muted);margin:16px 0 0;text-align:center}button,select{font-size:16px}@media(max-width:799px){.keyboard-help{display:none}}