:root {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #172943;
  background: #eef2f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #172943;
  --muted: #748198;
  --line: #e5eaf1;
  --navy: #142643;
  --blue: #416ce2;
  --mint: #48c6ae;
  --coral: #ff8a71;
  --amber: #efa941;
  --violet: #9178e8;
  --paper: #fff;
  --shadow: 0 18px 50px rgba(22, 44, 79, .075);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #eef2f8; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(65, 108, 226, .42); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }
.app-shell { min-height: 100vh; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.topbar { height: 76px; padding: 0 max(36px, calc((100vw - 1280px) / 2)); display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--navy); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 7px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; transform: rotate(-6deg); }
.brand-mark i { width: 4px; border-radius: 3px; background: #6fe1c4; }
.brand-mark i:nth-child(1) { height: 10px; opacity: .68; }.brand-mark i:nth-child(2) { height: 17px; }.brand-mark i:nth-child(3) { height: 13px; opacity: .82; }
.brand-copy { display: grid; gap: 2px; }.brand-copy strong { font-size: 16px; letter-spacing: .04em; }.brand-copy small { color: #a9b7cb; font: 9px "DM Mono", monospace; letter-spacing: .14em; }
.topbar-right { display: flex; align-items: center; gap: 20px; }.local-badge { display: inline-flex; align-items: center; gap: 8px; color: #b6c4d8; font-size: 11px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #63d9b7; box-shadow: 0 0 0 4px rgba(99,217,183,.12); }
.points-chip { display: flex; align-items: baseline; gap: 5px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.07); }.points-star { color: #ffca68; font-size: 13px; }.points-chip b { font-size: 14px; }.points-chip small { color: #b6c4d8; font: 10px "DM Mono", monospace; }
.main-layout { width: min(1168px, calc(100% - 56px)); margin: 34px auto 0; min-height: 65vh; }.loading { padding: 80px 20px; text-align: center; color: var(--muted); }
.site-foot { display: flex; justify-content: center; gap: 14px; padding: 32px 16px 8px; color: #8793a5; font-size: 10px; }.site-foot span + span { padding-left: 14px; border-left: 1px solid #cbd3df; }

/* Home */
.welcome-panel { position: relative; min-height: 320px; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: 42px 54px 60px; border-radius: 22px; color: white; background: #142643; box-shadow: var(--shadow); }
.welcome-panel::before { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse at 78% 48%, rgba(80,132,223,.28), transparent 41%), radial-gradient(ellipse at 95% 8%, rgba(74,202,172,.12), transparent 32%); pointer-events: none; }
.welcome-copy { position: relative; z-index: 1; max-width: 510px; }.eyebrow,.section-kicker,.rail-label,.scenario-label,.prompt-kicker { display: inline-flex; align-items: center; gap: 9px; color: #90a4c2; font: 10px "DM Mono", monospace; letter-spacing: .14em; }.eyebrow-line { width: 22px; height: 1px; background: #60d5b5; }
h1,h2,h3,p { margin-top: 0; }.welcome-copy h1 { margin: 20px 0 12px; color: #f4f7ff; font-size: clamp(32px, 4vw, 46px); line-height: 1.26; letter-spacing: -.045em; }.welcome-copy h1 em,.summary-page h1 em { color: #74dfc2; font-style: normal; }.welcome-copy p { max-width: 470px; margin-bottom: 23px; color: #b4c2d6; font-size: 13px; line-height: 1.9; }
.welcome-actions { display: flex; align-items: center; gap: 16px; }.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 19px; border: 0; border-radius: 13px; font-weight: 800; font-size: 12px; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }.button:hover:not(:disabled) { transform: translateY(-2px); }.button-primary { color: #152847; background: #7ae0c3; box-shadow: 0 8px 18px rgba(56,193,157,.15); }.button-primary:hover:not(:disabled) { background: #8cebd0; box-shadow: 0 11px 22px rgba(56,193,157,.24); }.button-primary:disabled { color: #aeb9c7; background: #e6eaf0; box-shadow: none; }.button-primary svg { width: 16px; }.resume-link { display: inline-flex; align-items: center; gap: 6px; border: 0; color: #d6e1f0; background: transparent; font-size: 11px; cursor: pointer; }.resume-link svg { width: 14px; }
.welcome-art { position: relative; z-index: 1; width: 270px; height: 230px; justify-self: center; }.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(165,192,229,.2); border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg); }.orbit-one { width: 245px; height: 126px; }.orbit-two { width: 225px; height: 188px; transform: translate(-50%,-50%) rotate(54deg); border-color: rgba(103,219,188,.22); }.art-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(157,203,229,.4); border-radius: 28px; background: linear-gradient(145deg,#263e62,#1b3153); box-shadow: 0 12px 42px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.12); transform: translate(-50%,-50%) rotate(-8deg); }.art-core b,.art-core small { transform: rotate(8deg); }.art-core b { margin-top: 3px; font: 9px "DM Mono",monospace; letter-spacing: .1em; }.art-core small { margin-top: 4px; color: #8da4c3; font: 6px "DM Mono",monospace; letter-spacing: .16em; }.core-spark { color: #7be2c5; font-size: 22px; line-height: 1; }.art-node { position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #d4deed; background: rgba(27,48,78,.88); font: 7px "DM Mono",monospace; letter-spacing: .1em; box-shadow: 0 7px 16px rgba(0,0,0,.12); }.art-node span { color: #77ddc0; }.node-top { top: 7px; left: 103px; }.node-left { top: 79px; left: 0; }.node-right { top: 79px; right: 0; }.node-bottom { bottom: 8px; left: 103px; }
.welcome-foot { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: 15px 54px; border-top: 1px solid rgba(255,255,255,.1); color: #96a9c4; font-size: 10px; }.welcome-foot span { display: inline-flex; align-items: center; gap: 7px; }.welcome-foot svg { width: 13px; height: 13px; color: #7ce1c4; }.welcome-foot span:last-child { font-family: "DM Mono",monospace; }
.dashboard-row { display: grid; grid-template-columns: 1.22fr repeat(3,1fr); align-items: center; gap: 14px; margin: 26px 0 42px; }.dashboard-title { padding-left: 4px; }.section-kicker { color: #8291a7; font-size: 9px; }.dashboard-title h2,.section-heading h2 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.03em; }.stat-tile { min-height: 69px; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid #e5eaf1; border-radius: 15px; background: rgba(255,255,255,.74); }.stat-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; }.stat-icon svg { width: 16px; height: 16px; }.stat-blue { color: #4f74de; background: #edf2ff; }.stat-green { color: #35a98e; background: #e9f8f3; }.stat-coral { color: #e97d63; background: #fff0eb; }.stat-tile > div { display: grid; gap: 2px; }.stat-tile strong { font-size: 17px; line-height: 1; }.stat-tile strong small { color: #909bae; font-size: 11px; font-weight: 600; }.stat-tile div > span { color: #8490a3; font-size: 10px; }.stat-action { width: 100%; text-align: left; cursor: pointer; }.stat-action > svg { width: 14px; color: #9ba7b8; margin-left: auto; }.stat-action:hover { border-color: #ffc0ad; background: #fff; }
.domains-section { margin-bottom: 22px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 4px 15px; }.section-heading h2 { font-size: 20px; }.section-note { color: #8a96a8; font-size: 10px; }.domain-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.domain-card { min-width: 0; display: flex; flex-direction: column; padding: 16px; border: 1px solid #e3e9f1; border-radius: 16px; text-align: left; background: white; cursor: pointer; box-shadow: 0 5px 16px rgba(27,51,83,.025); transition: transform .18s,border .18s,box-shadow .18s; }.domain-card:hover { transform: translateY(-3px); border-color: #bccbea; box-shadow: 0 12px 26px rgba(27,51,83,.08); }.domain-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }.domain-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font: 9px "DM Mono",monospace; }.domain-percent { font: 600 12px "DM Mono",monospace; }.domain-percent small { margin-left: 2px; font-size: 8px; }.domain-card strong { margin-bottom: 5px; font-size: 12px; }.domain-subtitle { min-height: 17px; color: #8a96a8; font-size: 9px; }.domain-meter,.summary-track { height: 5px; overflow: hidden; border-radius: 9px; background: #edf1f5; }.domain-meter { margin: 15px 0 9px; }.domain-meter i,.summary-track i { display: block; height: 100%; border-radius: inherit; transition: width .3s ease; }.domain-foot { display: flex; justify-content: space-between; color: #8390a3; font-size: 9px; }.domain-mint .domain-symbol,.domain-mint .domain-percent { color: #299d83; background: #e6f7f2; }.domain-mint .domain-meter i { background: #5bc8aa; }.domain-blue .domain-symbol,.domain-blue .domain-percent { color: #4a70d1; background: #edf2ff; }.domain-blue .domain-meter i { background: #6387ec; }.domain-violet .domain-symbol,.domain-violet .domain-percent { color: #8069d1; background: #f1edff; }.domain-violet .domain-meter i { background: #947de3; }.domain-amber .domain-symbol,.domain-amber .domain-percent { color: #c28b2e; background: #fff5e4; }.domain-amber .domain-meter i { background: #e6ae4b; }
.bottom-note { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid #e3e9f1; border-radius: 13px; background: rgba(255,255,255,.55); }.note-icon { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #b5c2d3; border-radius: 50%; color: #7d8da3; font: 10px Georgia,serif; }.bottom-note p { flex: 1; margin: 0; color: #7b899d; font-size: 9px; line-height: 1.65; }.bottom-note p strong { color: #485a75; }.bottom-note a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #4f6ec0; text-decoration: none; font-size: 9px; font-weight: 700; }.bottom-note a svg { width: 12px; height: 12px; }

/* Study modes and question bank */
.mode-section,.bank-section { margin: 0 0 32px; }.mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.mode-card { display: grid; grid-template-columns: 42px 1fr; gap: 9px 13px; align-items: start; padding: 17px; border: 1px solid #e1e8f1; border-radius: 15px; background: white; }.mode-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #328e79; background: #e5f7f1; font-size: 19px; }.mode-exam .mode-icon { color: #5b70c9; background: #edf1ff; }.mode-card b { font-size: 12px; }.mode-card p { margin: 5px 0 0; color: #8794a6; font-size: 9px; line-height: 1.7; }.mode-card .button { grid-column: 2; justify-self: start; min-height: 37px; font-size: 9px; }.mode-card .button svg { width: 14px; }
.last-exam-link { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border: 1px solid #dfe7f2; border-radius: 10px; color: #526a98; text-align: left; background: #f8faff; font-size: 9px; cursor: pointer; }.last-exam-link svg { width: 14px; }
.task-coverage-section { margin: 0 0 32px; }.task-coverage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.task-coverage-row { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e3e9f1; border-radius: 10px; text-align: left; background: white; cursor: pointer; }.task-coverage-row:hover:not(:disabled) { border-color: #bbc9e4; background: #fafbff; }.task-coverage-row:disabled { opacity: .62; cursor: default; }.task-coverage-id { width: 28px; flex: 0 0 auto; color: #7384a0; font: 9px "DM Mono",monospace; }.task-coverage-copy { min-width: 0; display: grid; gap: 3px; flex: 1; }.task-coverage-copy b { overflow: hidden; color: #44566f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.task-coverage-copy small { color: #929eae; font-size: 7px; }.task-coverage-count { color: #8391a3; font: 8px "DM Mono",monospace; }.task-coverage-row > svg { width: 12px; color: #a1adbc; }.coverage-note { margin: 9px 2px 0; color: #8a97a9; font-size: 8px; line-height: 1.65; }
.bank-search { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding: 5px 7px 5px 11px; border: 1px solid #e3e9f1; border-radius: 11px; background: white; }.bank-search > span { color: #8492a7; font-size: 20px; }.bank-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #263954; background: transparent; font: inherit; font-size: 10px; }.bank-search select { max-width: 160px; padding: 8px; border: 0; border-left: 1px solid #e8edf3; color: #65758d; background: white; font: inherit; font-size: 9px; }.bank-list { display: grid; gap: 6px; }.bank-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #e5eaf1; border-radius: 11px; text-align: left; background: white; cursor: pointer; }.bank-row:hover { border-color: #bbc9e4; background: #fbfcff; }.bank-row[hidden] { display: none; }.bank-row-domain { width: 39px; flex: 0 0 auto; padding: 8px 4px; border-radius: 9px; text-align: center; font: 8px "DM Mono",monospace; }.bank-row-domain.domain-mint { color: #299d83; background: #e6f7f2; }.bank-row-domain.domain-blue { color: #4a70d1; background: #edf2ff; }.bank-row-domain.domain-violet { color: #8069d1; background: #f1edff; }.bank-row-domain.domain-amber { color: #c28b2e; background: #fff5e4; }.bank-row-copy { display: grid; gap: 4px; flex: 1; }.bank-row-copy b { font-size: 10px; }.bank-row-copy small { color: #8996a8; font-size: 8px; }.bank-row-status { color: #8290a3; font-size: 8px; white-space: nowrap; }.bank-row > svg { width: 14px; color: #99a5b4; }.bank-empty { padding: 14px; color: #8390a3; text-align: center; font-size: 10px; }

/* Mock exam */
.setup-page { width: min(820px,100%); margin: 0 auto; padding: 24px clamp(16px,4vw,38px) 32px; border: 1px solid #e2e8f0; border-radius: 20px; background: white; box-shadow: var(--shadow); }.setup-page > .section-kicker { display: block; margin-top: 19px; color: #8291a6; }.setup-page h1 { margin: 10px 0 7px; font-size: clamp(27px,5vw,38px); line-height: 1.25; }.setup-page h1 em { color: #5d72c8; }.exam-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 23px; }.exam-setting-card { padding: 19px; border: 1px solid #dfe7f1; border-radius: 15px; background: #fbfcfe; }.exam-setting-card h2 { margin: 12px 0 5px; font-size: 17px; }.exam-setting-card p { min-height: 50px; color: #79889d; font-size: 10px; line-height: 1.75; }.setting-label { color: #8493aa; font: 8px "DM Mono",monospace; letter-spacing: .1em; }.exam-setting-card .button { min-height: 40px; font-size: 10px; }.exam-setting-card .button:disabled { color: #8d99a9; border-color: #e3e8ee; background: #f0f2f5; }.exam-setting-card.is-locked { opacity: .72; }.exam-notice { display: grid; gap: 5px; margin-top: 13px; padding: 12px 14px; border-radius: 10px; color: #697a91; background: #f2f5fa; font-size: 9px; line-height: 1.7; }.exam-notice b { color: #465a75; }.exam-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 15px; }.exam-clock { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #dfe6f1; border-radius: 10px; color: #344b6c; background: white; font: 600 16px "DM Mono",monospace; }.exam-clock svg { width: 16px; }.exam-clock.urgent { color: #bd533f; border-color: #f0c9c0; background: #fff6f3; }.exam-finish { min-height: 36px; font-size: 9px; }.exam-progress { display: flex; justify-content: space-between; padding: 10px 13px; border: 1px solid #e1e7ef; border-radius: 10px; color: #8190a5; background: white; font-size: 9px; }.exam-progress b { color: #344761; }.exam-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; align-items: start; gap: 12px; margin-top: 12px; }.exam-question { padding: 22px; }.exam-question .mark-button { display: inline-flex; width: auto; align-items: center; gap: 5px; padding: 0 8px; font-size: 8px; }.exam-question .mark-button svg { width: 13px; }.exam-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; padding-top: 13px; border-top: 1px solid #e8edf3; }.exam-controls > span { color: #8b98a9; text-align: center; font-size: 8px; }.exam-controls .button { min-height: 38px; font-size: 9px; }.exam-controls .button:disabled { opacity: .48; }.exam-nav-card { position: sticky; top: 12px; padding: 14px; border: 1px solid #e1e7ef; border-radius: 13px; background: white; }.exam-nav-heading { display: flex; justify-content: space-between; margin-bottom: 11px; }.exam-nav-heading b { font-size: 10px; }.exam-nav-heading span { color: #8795a7; font-size: 8px; }.exam-nav-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }.exam-nav-item { position: relative; min-height: 30px; border: 1px solid #e1e7ef; border-radius: 7px; color: #74839a; background: white; font: 9px "DM Mono",monospace; cursor: pointer; }.exam-nav-item.answered { color: #25785f; border-color: #a5d9c7; background: #edf9f4; }.exam-nav-item.flagged::after { position: absolute; top: 2px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #e9a33c; content: ""; }.exam-nav-item.current { box-shadow: 0 0 0 2px #6381db; }.exam-legend { display: grid; gap: 6px; margin-top: 12px; color: #8996a8; font-size: 8px; }.exam-legend span { display: flex; align-items: center; gap: 6px; }.exam-legend i { width: 8px; height: 8px; border: 1px solid #d8e0e9; border-radius: 3px; }.exam-legend i.answered { border-color: #a5d9c7; background: #edf9f4; }.exam-legend i.flagged { background: #e9a33c; }.exam-legend i.current { border-color: #6381db; }
.exam-review-list { display: grid; gap: 6px; }.exam-review-row { border: 1px solid #e4eaf1; border-radius: 10px; background: #fff; }.exam-review-row summary { display: flex; align-items: center; gap: 9px; padding: 10px 11px; cursor: pointer; list-style: none; }.exam-review-row summary::-webkit-details-marker { display: none; }.exam-review-row summary > span { color: #8795a8; font: 8px "DM Mono",monospace; }.exam-review-row summary > b { flex: 1; font-size: 9px; }.exam-review-row summary > em { font-size: 8px; font-style: normal; white-space: nowrap; }.review-correct { color: #2e9276; }.review-missed { color: #b67c2e; }.exam-review-body { padding: 0 12px 12px; border-top: 1px solid #edf0f4; color: #65758a; font-size: 9px; line-height: 1.75; }.exam-review-body p { margin: 9px 0 0; }.exam-review-body b { color: #435670; }.exam-review-body small { display: inline-block; margin-top: 9px; color: #8b99aa; }.exam-review-body a { color: #426eb6; text-decoration: none; }

/* Quiz */
.quiz-topline { display: flex; align-items: center; justify-content: space-between; margin: 3px 0 14px; }.back-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; color: #76869d; background: transparent; font-size: 11px; cursor: pointer; }.back-button:hover { color: #416ce2; }.back-button svg { width: 15px; }.quiz-progress-copy { display: flex; align-items: center; gap: 14px; }.quiz-progress-copy span { color: #8291a7; font: 9px "DM Mono",monospace; letter-spacing: .1em; }.quiz-progress-copy b { font: 600 13px "DM Mono",monospace; }.quiz-progress-copy b small { color: #9da8b7; font-size: 10px; font-weight: 400; }.session-progress { height: 4px; overflow: hidden; border-radius: 8px; background: #dce3ee; }.session-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#56c9ac,#5479e5); transition: width .3s ease; }
.quiz-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); align-items: start; gap: 17px; margin-top: 20px; }.quiz-rail { display: grid; gap: 12px; }.rail-card { position: relative; overflow: hidden; padding: 16px; border: 1px solid #e2e8f0; border-radius: 15px; background: white; }.rail-label { display: block; margin-bottom: 12px; color: #94a0b1; font-size: 8px; }.rail-card > strong { display: block; font-size: 21px; }.rail-card > strong small { color: #8592a5; font-size: 10px; font-weight: 500; }.rail-score { display: block; margin-top: 5px; color: #8b99aa; font-size: 9px; }.rail-tip { min-height: 142px; color: #e9eff8; background: #203858; border-color: #203858; }.rail-tip .rail-label { color: #9eb1cb; }.rail-tip p { max-width: 150px; margin: 0; font-size: 10px; line-height: 1.8; }.tip-mark { position: absolute; right: 12px; bottom: -15px; color: rgba(121,222,195,.5); font-size: 62px; }.rail-mini { display: flex; align-items: center; gap: 9px; padding: 3px 4px; color: #8795a8; font-size: 9px; line-height: 1.7; }.rail-mini b { color: #52637c; font-size: 10px; }.rail-mini-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #6881bb; background: #e7edf8; }.rail-mini-icon svg { width: 15px; }
.question-card { min-width: 0; padding: 24px 28px 22px; border: 1px solid #e3e9f1; border-radius: 18px; background: white; box-shadow: 0 8px 25px rgba(26,48,78,.04); }.question-meta { display: flex; align-items: center; gap: 8px; }.question-number { color: #8997a9; font: 9px "DM Mono",monospace; letter-spacing: .13em; }.domain-pill,.task-pill,.format-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; font-size: 9px; font-weight: 700; }.domain-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.domain-pill.domain-mint { color: #308e7a; background: #e8f7f2; }.domain-pill.domain-blue { color: #4e6fbe; background: #edf2ff; }.domain-pill.domain-violet { color: #7965bd; background: #f1edff; }.domain-pill.domain-amber { color: #a87926; background: #fff5e2; }.task-pill { color: #7d8ba0; background: #f1f3f6; font: 9px "DM Mono",monospace; }.mark-button { width: 31px; height: 31px; display: grid; place-items: center; margin-left: auto; border: 1px solid #e5eaf1; border-radius: 9px; color: #8997a9; background: white; cursor: pointer; }.mark-button svg { width: 15px; }.mark-button:hover,.mark-button.marked { color: #d28f31; border-color: #f3d49f; background: #fff9ed; }.mark-button.marked svg { fill: #f4c873; }
.question-card > h1 { margin: 15px 0 16px; font-size: 23px; line-height: 1.4; letter-spacing: -.035em; }.scenario-box { padding: 16px 18px; border: 1px solid #e8edf4; border-radius: 12px; background: #f7f9fc; }.scenario-label { margin-bottom: 7px; color: #8999b0; font-size: 8px; }.scenario-box p { margin: 0; color: #40536e; font-size: 12px; line-height: 1.9; }.prompt-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 20px 0 11px; }.prompt-kicker { color: #9aa5b3; font-size: 8px; }.prompt-row h2 { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }.format-badge { flex: 0 0 auto; color: #4266bb; background: #edf2ff; }.choices { display: grid; gap: 8px; }.choice { width: 100%; min-height: 55px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #e3e9f0; border-radius: 11px; text-align: left; background: #fff; cursor: pointer; transition: border .15s,background .15s,transform .15s; }.choice:hover:not(:disabled) { transform: translateY(-1px); border-color: #aebfe9; background: #fafbff; }.choice.is-selected { border-color: #6381db; background: #f3f6ff; box-shadow: 0 0 0 2px rgba(88,119,218,.08); }.choice-mark { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d9e0ea; border-radius: 8px; color: #73839a; background: #f9fafc; font: 10px "DM Mono",monospace; }.choice-mark.radio { border-radius: 50%; }.choice.is-selected .choice-mark { color: white; border-color: #5875d1; background: #5875d1; }.choice-copy { flex: 1; color: #43546d; font-size: 11px; line-height: 1.7; }.choice.is-correct { border-color: #56bc9f; background: #f0fbf7; }.choice.is-correct .choice-mark { color: white; border-color: #3eb18f; background: #3eb18f; }.choice.is-wrong { border-color: #f08f7a; background: #fff6f2; }.choice.is-wrong .choice-mark { color: white; border-color: #ee8b73; background: #ee8b73; }.choice.is-missed { border-color: #efc16c; background: #fffaf0; }.choice.is-missed .choice-mark { color: #a87926; border-color: #e5b656; background: #fff3d9; }.choice:disabled { cursor: default; }.choice-state { color: #8b97a8; font-size: 9px; }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }.action-hint { color: #929eae; font-size: 9px; }.submit-button,.next-button { min-height: 43px; }.answer-panel { margin-top: 14px; padding: 16px; border: 1px solid #cee9de; border-radius: 13px; background: #f7fcfa; }.answer-review { border-color: #f2e0bd; background: #fffcf6; }.answer-head { display: flex; align-items: center; gap: 10px; }.answer-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #218a6e; background: #dff5ec; }.answer-review .answer-symbol { color: #b17a22; background: #fff0ce; }.answer-symbol svg { width: 16px; }.answer-head > div { display: grid; gap: 3px; }.answer-head strong { font-size: 12px; }.answer-head span:not(.answer-symbol) { color: #8391a2; font-size: 9px; }.answer-explanation { margin: 13px 0; color: #43566c; font-size: 11px; line-height: 1.85; }.distractor-note { display: flex; gap: 8px; margin-top: 7px; color: #75849a; font-size: 10px; line-height: 1.7; }.distractor-note b { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; color: #8291a5; background: #eaf0f3; font: 8px "DM Mono",monospace; }.source-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #e3ede8; }.source-list > span { width: 100%; color: #8b9aab; font-size: 8px; }.source-list a { display: inline-flex; align-items: center; gap: 4px; color: #3b6eab; text-decoration: none; font-size: 9px; font-weight: 700; }.source-list a:hover { text-decoration: underline; }.source-list a svg { width: 11px; height: 11px; }.source-list small { color: #9ca8b6; font: 8px "DM Mono",monospace; }

/* Results */
.summary-page { position: relative; width: min(700px,100%); overflow: hidden; margin: 10px auto 0; padding: 34px clamp(18px,5vw,48px); border: 1px solid #e2e8f0; border-radius: 21px; background: white; box-shadow: var(--shadow); }.summary-page > .section-kicker { color: #71917f; }.summary-page h1 { position: relative; z-index: 1; margin: 13px 0 8px; font-size: clamp(29px,5vw,38px); line-height: 1.32; letter-spacing: -.04em; }.summary-page h1 em { color: #358d75; }.summary-lede { max-width: 500px; margin-bottom: 22px; color: #78879a; font-size: 11px; line-height: 1.8; }.summary-confetti { position: absolute; top: 16px; right: 20px; width: 150px; height: 120px; color: #a8c6e5; }.summary-confetti span { position: absolute; font-size: 20px; }.summary-confetti span:nth-child(1) { top: 10px; right: 28px; color: #60c9a9; font-size: 33px; }.summary-confetti span:nth-child(2) { top: 66px; right: 10px; color: #f2bd62; }.summary-confetti span:nth-child(3) { top: 35px; right: 93px; color: #9f8de6; font-size: 29px; }.summary-confetti span:nth-child(4) { top: 89px; right: 70px; color: #ee9a83; font-size: 15px; }.summary-score { display: flex; align-items: center; gap: 22px; padding: 17px; border: 1px solid #e7ecf2; border-radius: 15px; background: #f9fbfd; }.score-ring { width: 92px; height: 92px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#57c4a4 var(--score),#e5ebf1 0); }.score-ring > div { width: 74px; height: 74px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #fff; }.score-ring strong { font-size: 21px; line-height: 1.05; }.score-ring strong small { color: #8996a8; font-size: 11px; font-weight: 500; }.score-ring span { margin-top: 3px; color: #8492a4; font-size: 9px; }.summary-points { display: grid; gap: 5px; }.summary-points > span,.summary-points > small { color: #8492a4; font-size: 9px; }.summary-points strong { color: #ba842f; font-size: 21px; }.summary-points strong small { font-size: 10px; }.summary-breakdown,.summary-missed { margin-top: 22px; }.summary-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.summary-heading h2 { margin: 0; font-size: 13px; }.summary-heading > span { color: #96a1b0; font-size: 9px; }.summary-domain { display: grid; grid-template-columns: 115px 1fr 34px; align-items: center; gap: 10px; margin: 10px 0; color: #63728a; font-size: 9px; }.summary-domain b { text-align: right; font: 10px "DM Mono",monospace; }.summary-track i { background: linear-gradient(90deg,#59c9a9,#6384e1); }.missed-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #e6ebf1; border-radius: 10px; text-align: left; background: white; cursor: pointer; }.missed-row + .missed-row { margin-top: 7px; }.missed-row:hover { border-color: #b7c7e5; background: #fafbff; }.missed-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #d88c48; background: #fff3e4; }.missed-row > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }.missed-row b { font-size: 10px; }.missed-row small { color: #8997a9; font-size: 8px; }.missed-row > svg { width: 14px; color: #9aa6b6; }.summary-actions { display: flex; gap: 10px; margin-top: 23px; }.button-quiet { color: #62728a; border: 1px solid #e2e8f0; background: white; }.button-quiet:hover { background: #f7f9fc; }.all-correct-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px; border-radius: 10px; color: #368b73; background: #eff9f5; font-size: 10px; }.all-correct-note svg { width: 15px; }.empty-inline { color: #8d99aa; font-size: 10px; }
.toast { position: fixed; z-index: 10; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); max-width: min(400px,calc(100vw - 36px)); padding: 13px 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #fff; background: #203858; box-shadow: 0 12px 35px rgba(15,31,54,.2); font-size: 11px; line-height: 1.6; }

@media (min-width: 1200px) { .main-layout { margin-top: 38px; } }
@media (max-width: 900px) {
  .main-layout { width: min(100% - 36px,760px); margin-top: 24px; }.welcome-panel { grid-template-columns: 1fr .75fr; padding: 32px 34px 58px; }.welcome-art { transform: scale(.85); }.dashboard-row { grid-template-columns: repeat(3,1fr); }.dashboard-title { grid-column: 1/-1; }.domain-grid { grid-template-columns: repeat(2,1fr); }.quiz-layout { grid-template-columns: 1fr; }.quiz-rail { grid-template-columns: 1fr 1.2fr auto; align-items: stretch; }.rail-card { padding: 12px 14px; }.rail-label { margin-bottom: 6px; }.rail-tip { min-height: auto; }.rail-tip p { max-width: none; padding-right: 30px; }.tip-mark { bottom: -22px; }.rail-mini { padding: 0 6px; }.exam-layout { grid-template-columns: 1fr; }.exam-nav-card { position: static; order: -1; }.exam-nav-grid { grid-template-columns: repeat(10,1fr); }
}
@media (max-width: 620px) {
  body { background: #f2f5f9; }.topbar { height: 62px; padding: 0 16px; }.brand { gap: 9px; }.brand-mark { width: 30px; height: 30px; border-radius: 9px; }.brand-copy strong { font-size: 14px; }.brand-copy small { font-size: 7px; }.topbar-right { gap: 10px; }.local-badge { gap: 6px; font-size: 9px; }.points-chip { gap: 4px; padding: 6px 9px; border-radius: 10px; }.points-chip b { font-size: 12px; }.main-layout { width: calc(100% - 24px); margin-top: 14px; }.site-foot { flex-direction: column; align-items: center; gap: 5px; padding: 22px 12px 8px; font-size: 8px; }.site-foot span + span { padding: 0; border: 0; }
  .welcome-panel { min-height: 0; grid-template-columns: 1fr; padding: 24px 20px 56px; border-radius: 17px; }.welcome-copy { max-width: none; }.eyebrow { font-size: 8px; }.welcome-copy h1 { margin: 15px 0 8px; font-size: clamp(29px,8vw,38px); }.welcome-copy p { margin-bottom: 17px; font-size: 11px; line-height: 1.8; }.welcome-actions { gap: 11px; flex-wrap: wrap; }.button { min-height: 45px; padding: 0 15px; border-radius: 12px; font-size: 11px; }.resume-link { font-size: 10px; }.welcome-art { position: absolute; right: -47px; bottom: 22px; width: 182px; height: 158px; opacity: .62; transform: scale(.72); transform-origin: center; }.welcome-art .node-left,.welcome-art .node-right { display: none; }.welcome-foot { padding: 12px 17px; }.welcome-foot span { font-size: 8px; }.welcome-foot span:last-child { display: none; }
  .dashboard-row { grid-template-columns: repeat(3,1fr); gap: 7px; margin: 18px 0 29px; }.dashboard-title { margin-bottom: 0; }.dashboard-title h2 { font-size: 16px; }.section-kicker { font-size: 8px; }.stat-tile { min-height: 75px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 9px; border-radius: 12px; }.stat-icon { width: 24px; height: 24px; border-radius: 7px; }.stat-icon svg { width: 13px; height: 13px; }.stat-tile strong { font-size: 14px; }.stat-tile strong small { font-size: 9px; }.stat-tile div > span { font-size: 8px; }.stat-action { position: relative; }.stat-action > svg { position: absolute; right: 7px; top: 7px; width: 11px; }
  .section-heading { align-items: end; margin: 0 2px 11px; }.section-heading h2 { font-size: 16px; }.section-note { max-width: 95px; text-align: right; font-size: 8px; }.domain-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.domain-card { padding: 12px; border-radius: 13px; }.domain-card-top { margin-bottom: 9px; }.domain-symbol { width: 26px; height: 26px; border-radius: 8px; font-size: 8px; }.domain-percent { font-size: 10px; }.domain-card strong { font-size: 10px; }.domain-subtitle { font-size: 8px; }.domain-meter { margin: 10px 0 7px; }.domain-foot { font-size: 8px; }.bottom-note { align-items: flex-start; gap: 8px; padding: 11px; }.bottom-note p { font-size: 8px; }.bottom-note a { margin-top: 2px; font-size: 8px; }.note-icon { width: 17px; height: 17px; font-size: 9px; }
  .quiz-topline { margin: 0 1px 10px; }.back-button { font-size: 9px; }.quiz-progress-copy { gap: 8px; }.quiz-progress-copy span { font-size: 8px; }.quiz-layout { gap: 9px; margin-top: 10px; }.quiz-rail { grid-template-columns: minmax(90px,.8fr) minmax(0,1.5fr); gap: 7px; }.rail-card { padding: 10px; border-radius: 11px; }.rail-label { font-size: 7px; }.rail-card > strong { font-size: 16px; }.rail-card > strong small { font-size: 8px; }.rail-score { font-size: 7px; }.rail-tip { display: none; }.rail-mini { gap: 6px; font-size: 7px; }.rail-mini b { font-size: 8px; }.rail-mini-icon { width: 24px; height: 24px; border-radius: 7px; }.rail-mini-icon svg { width: 12px; }
  .question-card { padding: 16px 13px 14px; border-radius: 15px; }.question-meta { gap: 5px; }.question-number { font-size: 8px; }.domain-pill,.task-pill { padding: 4px 6px; font-size: 8px; }.mark-button { width: 28px; height: 28px; }.question-card > h1 { margin: 12px 0; font-size: 18px; }.scenario-box { padding: 12px; border-radius: 10px; }.scenario-label { font-size: 7px; }.scenario-box p { font-size: 10px; line-height: 1.85; }.prompt-row { align-items: start; margin: 15px 0 9px; }.prompt-kicker { font-size: 7px; }.prompt-row h2 { font-size: 12px; }.format-badge { padding: 5px 6px; font-size: 8px; }.choices { gap: 7px; }.choice { min-height: 51px; gap: 9px; padding: 8px; border-radius: 10px; }.choice-mark { width: 23px; height: 23px; border-radius: 7px; font-size: 9px; }.choice-copy { font-size: 10px; line-height: 1.65; }.choice-state { font-size: 8px; }.question-actions { align-items: flex-end; margin-top: 12px; }.action-hint { max-width: 130px; font-size: 8px; line-height: 1.55; }.submit-button,.next-button { min-height: 42px; padding: 0 12px; font-size: 10px; }.answer-panel { padding: 12px; }.answer-head strong { font-size: 10px; }.answer-head span:not(.answer-symbol) { font-size: 8px; }.answer-explanation { font-size: 10px; }.distractor-note { font-size: 9px; }.source-list a { font-size: 8px; }
  .summary-page { margin-top: 0; padding: 25px 16px; border-radius: 16px; }.summary-page h1 { font-size: 29px; }.summary-lede { font-size: 10px; }.summary-score { gap: 14px; padding: 13px; }.score-ring { width: 79px; height: 79px; }.score-ring > div { width: 64px; height: 64px; }.score-ring strong { font-size: 18px; }.summary-domain { grid-template-columns: 100px 1fr 28px; gap: 7px; font-size: 8px; }.summary-actions { flex-direction: column; }.summary-actions .button { width: 100%; }.summary-confetti { transform: scale(.8); transform-origin: top right; }.summary-heading h2 { font-size: 12px; }.missed-row b { font-size: 9px; }
  .mode-section,.bank-section,.task-coverage-section { margin-bottom: 24px; }.mode-grid { grid-template-columns: 1fr; gap: 8px; }.task-coverage-grid { grid-template-columns: 1fr; gap: 5px; }.task-coverage-row { padding: 8px; }.mode-card { grid-template-columns: 34px 1fr; gap: 7px 10px; padding: 12px; }.mode-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }.mode-card b { font-size: 10px; }.mode-card p { font-size: 8px; }.mode-card .button { min-height: 34px; }.bank-search { gap: 5px; padding-left: 8px; }.bank-search input { font-size: 9px; }.bank-search select { max-width: 110px; padding: 7px 4px; font-size: 8px; }.bank-row { gap: 7px; padding: 9px; }.bank-row-domain { width: 31px; }.bank-row-copy b { font-size: 9px; }.bank-row-copy small,.bank-row-status { font-size: 7px; }.setup-page { padding: 17px 13px 21px; border-radius: 15px; }.setup-page h1 { font-size: 28px; }.exam-settings-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }.exam-setting-card { padding: 14px; }.exam-setting-card h2 { font-size: 15px; }.exam-setting-card p { min-height: 0; font-size: 9px; }.exam-topbar { flex-wrap: wrap; gap: 5px; }.exam-topbar .back-button { order: 1; }.exam-clock { order: 2; margin-left: auto; padding: 6px 9px; font-size: 13px; }.exam-finish { order: 3; min-height: 32px; }.exam-progress { padding: 8px 9px; font-size: 8px; }.exam-layout { gap: 8px; margin-top: 8px; }.exam-nav-card { padding: 10px; }.exam-nav-grid { grid-template-columns: repeat(8,1fr); gap: 4px; }.exam-nav-item { min-height: 27px; font-size: 8px; }.exam-question { padding: 14px 11px; }.exam-question .question-meta { flex-wrap: wrap; }.exam-question > h1 { font-size: 18px; }.exam-controls { gap: 5px; }.exam-controls > span { max-width: 100px; font-size: 7px; }.exam-controls .button { min-height: 36px; padding: 0 9px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }