:root{
  --navy:#102b3b;
  --navy-2:#183d4d;
  --ink:#172d38;
  --muted:#647780;
  --faint:#89979d;
  --paper:#f4f2ec;
  --white:#fffefa;
  --line:#dce2de;
  --coral:#e8755f;
  --coral-light:#fbe6e0;
  --blue:#477a98;
  --blue-light:#e3eef4;
  --green:#45806d;
  --green-light:#e3efe8;
  --gold:#a47734;
  --gold-light:#f4ecd9;
  --shadow:0 14px 42px rgba(16,43,59,.07);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);
  background:var(--paper);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-size:15px;line-height:1.65}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #efa993;outline-offset:2px}
a{color:inherit}
.site-shell{max-width:1260px;margin:0 auto;padding:0 32px}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(16,43,59,.12)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--coral);color:white;border-radius:12px 12px 12px 4px;font:800 18px system-ui,sans-serif}
.brand b{display:block;font-size:11px;letter-spacing:.15em;line-height:1.25}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.topbar-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.storage-status{color:#a94838;font-size:10px}
.local-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-light)}
main{min-height:72vh;padding:34px 0 64px}
.site-footer{border-top:1px solid rgba(16,43,59,.12);padding:22px 0 28px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}
.site-footer span:first-child,.eyebrow,.mono,.question-code,.subject-count,.tag,.metric-label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}
.eyebrow{font-size:10px;text-transform:uppercase;color:var(--coral);font-weight:500;margin:0 0 14px}
.hero{position:relative;overflow:hidden;background:var(--navy);color:white;border-radius:24px;padding:46px 52px;min-height:290px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:30px;box-shadow:var(--shadow)}
.hero:after{content:"";position:absolute;width:350px;height:350px;border:1px solid rgba(255,255,255,.1);border-radius:50%;right:12%;top:-180px;box-shadow:0 0 0 36px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.025)}
.hero-copy,.hero-aside{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.06em;line-height:1.12;margin:0 0 14px;font-weight:800}
.hero-copy>p:last-of-type{max-width:510px;color:rgba(255,255,255,.72);font-size:14px;margin:0 0 24px}
.hero .eyebrow{color:#f3a28d}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-aside{justify-self:end;width:min(100%,290px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px}
.hero-aside .metric-label{color:rgba(255,255,255,.58);font-size:10px}
.hero-aside strong{display:block;font-size:34px;line-height:1.2;margin:6px 0 4px;letter-spacing:-.04em}
.hero-aside p{font-size:12px;color:rgba(255,255,255,.66);margin:0}
.button{border:0;border-radius:10px;padding:11px 16px;font-size:13px;font-weight:700;transition:transform .15s,background .15s,box-shadow .15s}
.button:hover{transform:translateY(-1px)}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.button-primary{background:var(--coral);color:white;box-shadow:0 6px 18px rgba(232,117,95,.25)}
.button-primary:hover{background:#d96550}
.button-light{background:#fffefa;color:var(--navy)}
.button-ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.hero .button-ghost{color:white;border-color:rgba(255,255,255,.3)}
.button-soft{background:var(--blue-light);color:#315e78}
.button-danger{background:#fae8e3;color:#a94838}
.button-small{padding:7px 10px;font-size:11px;border-radius:8px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:38px 0 16px}
.section-head h2{font-size:21px;letter-spacing:-.04em;margin:0}
.section-head p{font-size:12px;color:var(--muted);margin:4px 0 0}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.subject-card{position:relative;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:17px;padding:22px;min-height:190px;box-shadow:0 4px 15px rgba(16,43,59,.025);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;align-items:flex-start;width:100%;color:inherit}
.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#bac9c5}
.subject-card:before{content:"";position:absolute;top:0;left:22px;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--card-accent)}
.subject-card.coral{--card-accent:var(--coral)}
.subject-card.blue{--card-accent:var(--blue)}
.subject-card.green{--card-accent:var(--green)}
.subject-count{font-size:10px;color:var(--muted);margin-bottom:15px}
.subject-card h3{font-size:21px;letter-spacing:-.05em;margin:0 0 2px}
.subject-card .english{font:10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);letter-spacing:.08em}
.subject-card p{font-size:12px;color:var(--muted);margin:14px 0 0}
.subject-card .latest{margin-top:auto;padding-top:15px;font-size:11px;color:var(--muted)}
.subject-card .latest b{color:var(--ink);font-size:14px;margin-left:5px}
.layout-two{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 4px 15px rgba(16,43,59,.025)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head h3{font-size:15px;margin:0;letter-spacing:-.025em}
.panel-head p{font-size:11px;color:var(--muted);margin:4px 0 0}
.empty{padding:25px 14px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:12px}
.attempt-list,.review-list{display:grid;gap:10px}
.attempt-card,.review-card{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px}
.attempt-top{display:flex;justify-content:space-between;gap:12px;align-items:start}
.attempt-title{font-weight:700;font-size:12px;margin:0}
.attempt-meta{font-size:10px;color:var(--muted);margin:3px 0 0}
.attempt-score{font-size:19px;font-weight:800;letter-spacing:-.05em;white-space:nowrap}
.attempt-score small{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:0}
.course-chips{display:flex;flex-wrap:wrap;gap:6px}
.course-chip{border-radius:7px;background:#f0f3ef;padding:4px 7px;font-size:10px;color:#53656a}
.attempt-actions{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid #edf0ed;padding-top:10px}
.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.attempt-status{font-size:10px;color:var(--muted)}
.review-card{grid-template-columns:1fr auto;align-items:center}
.review-card strong{font-size:12px;display:block}
.review-card small{font-size:10px;color:var(--muted)}
.notice{border-radius:12px;padding:13px 15px;font-size:11px;line-height:1.7;display:flex;gap:10px;align-items:flex-start}
.notice strong{display:block;font-size:11px;margin-bottom:2px}
.notice-info{background:#eaf0ec;color:#415b5a}
.notice-warn{background:var(--gold-light);color:#735c34}
.notice-icon{font-size:15px;line-height:1.4}
.source-note{font-size:10px;color:var(--muted);margin:12px 0 0;line-height:1.7}
.session-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.back-button{border:0;background:none;color:var(--muted);font-weight:700;padding:8px 0;font-size:12px}
.back-button:hover{color:var(--ink)}
.session-mode{text-align:right;font-size:11px;color:var(--muted)}
.session-mode strong{color:var(--ink);display:block;font-size:13px}
.progress-card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:14px 17px;margin-bottom:16px}
.progress-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-bottom:8px}
.progress-top strong{font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}
.progress-track{height:6px;border-radius:9px;background:#e7ebe7;overflow:hidden}
.progress-fill{height:100%;border-radius:9px;background:var(--coral);transition:width .25s}
.question-panel{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,34px);box-shadow:var(--shadow)}
.question-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.question-code{font-size:10px;color:var(--coral);background:var(--coral-light);padding:5px 8px;border-radius:6px}
.tag{font-size:9px;border:1px solid var(--line);color:var(--muted);padding:4px 7px;border-radius:99px}
.question-panel h1{font-size:clamp(22px,4vw,31px);letter-spacing:-.05em;line-height:1.35;margin:0 0 12px}
.prompt-box{font-size:15px;line-height:1.8;color:#30444d;background:#f6f6f1;border-left:3px solid var(--coral);padding:15px 17px;border-radius:0 10px 10px 0;margin:0 0 22px}
.prior-review{margin:-9px 0 19px;background:#eef3ef;border:1px solid #dce6df;border-radius:10px;padding:10px 13px;color:#52655d;font-size:11px}
.prior-review summary{cursor:pointer;font-weight:700}
.prior-review ul{margin:8px 0;padding-left:20px;line-height:1.7}
.prior-review li b{font:10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin-left:5px}
.prior-review small{font-size:9px;color:var(--muted)}
.label-row{display:flex;justify-content:space-between;gap:10px;align-items:end;margin:15px 0 7px}
.label-row label,.label-row strong{font-size:12px;font-weight:700}
.label-row small{font-size:10px;color:var(--muted)}
.answer-field{width:100%;min-height:190px;resize:vertical;border:1px solid #d5ded9;border-radius:11px;background:white;padding:14px;color:var(--ink);font-size:13px;line-height:1.8}
.answer-field::placeholder{color:#9aa8a7}
.graph-wrap{margin-top:18px;border:1px solid var(--line);border-radius:13px;padding:13px;background:#fcfcf8}
.graph-help{margin:0 0 10px;font-size:10px;color:var(--muted)}
.graph-canvas{display:block;width:100%;height:250px;border:1px solid #dbe1dc;border-radius:8px;background:white;touch-action:none;cursor:crosshair}
.graph-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:8px}
.graph-actions small{font-size:10px;color:var(--muted)}
.question-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:20px}
.question-actions .right{display:flex;gap:8px}
.rubric-section{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
.rubric-section h2{font-size:18px;letter-spacing:-.04em;margin:0}
.rubric-lead{font-size:11px;color:var(--muted);margin:5px 0 14px}
.sample-answer{background:var(--blue-light);border:1px solid #d2e2e9;border-radius:12px;padding:15px;margin:0 0 15px}
.sample-answer strong{display:block;font-size:11px;margin-bottom:5px;color:#315e78}
.sample-answer p{margin:0;color:#345564;font-size:12px;line-height:1.75}
.sample-answer .answer-caution{margin-top:8px;font-size:10px;color:#74603b;background:#f7f0df;padding:8px 10px;border-radius:8px}
.criteria-list{display:grid;gap:9px}
.criterion{display:grid;grid-template-columns:1fr 112px;gap:14px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:white}
.criterion.verify{background:#fbf7ec;border-color:#ecdfbc}
.criterion-main{min-width:0}
.criterion-title{font-size:12px;font-weight:700;line-height:1.55;display:block}
.criterion-meta{font-size:9px;color:var(--muted);margin-top:4px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.evidence-pill{background:#eff1ed;border-radius:99px;padding:2px 6px;color:#5b6a65}
.evidence-pill.verify{background:#f2e5c8;color:#755d2e}
.score-control{text-align:right}
.score-control label{font-size:9px;display:block;color:var(--muted);margin-bottom:4px}
.score-control input{width:68px;border:1px solid #cfd9d3;border-radius:7px;padding:7px;text-align:center;font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:#fff}
.score-control em{font-style:normal;font:10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);margin-left:4px}
.verify-copy{font-size:10px;font-weight:700;color:#80652f;text-align:right;line-height:1.45}
.rubric-total{display:flex;justify-content:space-between;align-items:center;border-radius:10px;background:#f0f3ef;padding:11px 13px;margin-top:12px;font-size:11px}
.rubric-total strong{font:700 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.question-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.question-nav .nav-right{display:flex;gap:8px}
.screen-title{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:22px}
.screen-title h1{font-size:clamp(25px,4vw,38px);letter-spacing:-.06em;line-height:1.2;margin:0}
.screen-title p{font-size:12px;color:var(--muted);margin:8px 0 0}
.result-hero{background:var(--navy);color:white;border-radius:20px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:17px}
.result-hero .eyebrow{color:#f3a28d;margin-bottom:6px}
.result-hero h1{font-size:25px;margin:0;letter-spacing:-.05em}
.result-score-big{font-size:42px;line-height:1;font-weight:800;letter-spacing:-.07em;text-align:right;white-space:nowrap}
.result-score-big small{display:block;font-size:10px;letter-spacing:0;color:rgba(255,255,255,.65);font-weight:500;margin-top:8px}
.result-subnote{font-size:11px;color:var(--muted);margin:0 0 14px}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:17px}
.score-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:17px}
.score-card h3{font-size:11px;margin:0 0 5px}
.score-card .score-number{font-size:25px;font-weight:800;letter-spacing:-.06em}
.score-card .score-number small{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0}
.score-card p{font-size:10px;color:var(--muted);margin:4px 0 0}
.score-card .score-range{font-size:10px;color:#596c68;margin:7px 0 0}
.threshold{display:inline-flex;align-items:center;gap:5px;font-size:9px;margin-top:10px;padding:4px 7px;border-radius:99px;background:#edf0ec;color:#596a64}
.threshold.reached{background:var(--green-light);color:#376653}
.coverage-bar{height:5px;background:#e8ece7;border-radius:8px;margin-top:9px;overflow:hidden}
.coverage-bar span{display:block;height:100%;background:var(--blue);border-radius:8px}
.result-lower{display:grid;grid-template-columns:1fr .86fr;gap:16px;align-items:start}
.question-result-list{display:grid;gap:7px}
.question-result{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #edf0ed;padding:8px 0;font-size:11px}
.question-result:last-child{border:0}
.question-result strong{font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.confidence-note{font-size:10px;color:#715e38;background:#f7f0df;padding:11px;border-radius:10px;line-height:1.65;margin-top:12px}
.record-badge{background:#f0f2ee;color:#60716a;font-size:9px;padding:4px 7px;border-radius:99px;white-space:nowrap}
.result-footer-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.red{color:#a94838}
.hidden{display:none!important}
@media(max-width:900px){.site-shell{padding:0 22px}.hero{padding:38px 34px}.hero-aside{width:250px}.layout-two{grid-template-columns:1fr}.result-lower{grid-template-columns:1fr}}
@media(max-width:650px){body{font-size:14px}.site-shell{padding:0 15px}.topbar{height:68px}.topbar-meta{font-size:10px}.brand-mark{width:34px;height:34px}.hero{grid-template-columns:1fr;padding:29px 22px;gap:20px;border-radius:18px}.hero h1{font-size:37px}.hero-aside{justify-self:stretch;width:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}.hero-aside strong{font-size:26px}.hero-aside p{max-width:125px}.subject-grid{grid-template-columns:1fr;gap:10px}.subject-card{min-height:150px;padding:18px}.subject-card h3{font-size:19px}.section-head{margin-top:30px}.panel{padding:15px}.screen-title{align-items:start;flex-direction:column}.session-header{align-items:flex-start}.question-panel{padding:19px 15px}.prompt-box{font-size:14px;padding:12px}.answer-field{min-height:165px}.graph-canvas{height:220px}.criterion{grid-template-columns:1fr 96px;gap:9px;padding:10px}.criterion-title{font-size:11px}.score-control input{width:60px}.question-actions,.question-nav{align-items:stretch}.question-actions .right,.question-nav .nav-right{flex:1;justify-content:flex-end}.question-actions .button,.question-nav .button{font-size:11px;padding:9px 10px}.result-hero{padding:21px 18px}.result-hero h1{font-size:20px}.result-score-big{font-size:34px}.score-grid{grid-template-columns:1fr;gap:8px}.score-card{padding:13px}.score-card .score-number{font-size:22px}.site-footer{flex-direction:column;gap:5px}.attempt-actions{align-items:flex-start;flex-direction:column}.result-footer-actions{flex-wrap:wrap}.hero-actions .button{flex:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
