/* VINOLET English — アプリ試作のスタイル（v3 リファインド）
 *
 * 方針: 情報設計・画面構造は日本語版の実画面どおりに維持し、
 *       視覚レイヤー（書体・色・余白・陰影）だけを英語圏向けに引き上げる。
 *       日本語版から採取した実値は docs/07_フロントエンド試作.md に保存してある。
 */

:root{
  /* ---- 面 ---- */
  --bg:#F6F8FA;
  --bg-sunk:#EDF1F5;
  --surface:#FFFFFF;
  --surface-2:#F9FBFC;

  /* ---- ネイビー（日本語版の #002944 を軸に深度を出す） ---- */
  --navy:#0B2237;
  --navy-2:#0F2B44;
  --navy-soft:#2C4E6B;
  --navy-tint:#E8EEF4;

  /* ---- 文字 ---- */
  --ink:#12212E;
  --ink-2:#48596A;
  --ink-3:#7A8895;

  --line:#E2E8EE;
  --line-2:#CFD8E1;

  /* ---- アクセント（ごく少量） ---- */
  --brass:#B08D57;
  --brass-soft:#F4EDE1;

  /* ---- 判定（英語圏の慣習: 緑=正解 / 赤=不正解） ---- */
  --correct:#1E8E4E;
  --correct-deep:#14663A;
  --correct-tint:#E8F5ED;
  --incorrect:#C62828;
  --incorrect-deep:#8E1F1F;
  --incorrect-tint:#FBEAEA;

  --notyet:#B4C0CB;
  --retry:#D9A21B;
  --favorite:#E06C8B;
  --like:#2E8FA8;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --sh-1:0 1px 2px rgba(11,34,55,.05), 0 1px 3px rgba(11,34,55,.04);
  --sh-2:0 2px 4px rgba(11,34,55,.05), 0 6px 16px rgba(11,34,55,.07);
  --sh-3:0 8px 24px rgba(11,34,55,.10), 0 24px 56px rgba(11,34,55,.10);

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font:'DM Sans','Noto Sans','Helvetica Neue','Hiragino Kaku Gothic ProN',sans-serif;
}

/* 日本語版と同じ配色に戻すとき用（正解=赤 / 不正解=青）。 */
:root[data-palette="ja"]{
  --correct:#D55548; --correct-deep:#A83B30; --correct-tint:#FBEDEB;
  --incorrect:#036EB8; --incorrect-deep:#02528A; --incorrect-tint:#E7F1F9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;}
button{font-family:inherit; cursor:pointer;}
a{color:var(--navy-soft);}
:focus-visible{outline:2px solid var(--navy-soft); outline-offset:2px; border-radius:4px;}
::selection{background:var(--navy-tint);}

.page{max-width:600px; margin:0 auto; padding:0 20px 96px;}
.page.wide{max-width:640px;}

/* ---------- app bar ---------- */
.appbar{background:var(--navy); position:sticky; top:0; z-index:30; height:58px;
  display:flex; align-items:center; padding:0 18px;
  box-shadow:0 2px 12px rgba(11,34,55,.14);}
.appbar .burger{background:none; border:0; padding:8px; line-height:0; border-radius:6px;}
.appbar .burger:hover{background:rgba(255,255,255,.08);}
.appbar .burger span{display:block; width:20px; height:1.5px; background:#fff; margin:5px 0;
  border-radius:1px;}
.appbar .logo{position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--display); color:#fff; font-size:26px; font-weight:600;
  letter-spacing:.24em; text-indent:.24em; text-decoration:none; line-height:1;}
.appbar .bell{margin-left:auto; background:none; border:0; color:rgba(255,255,255,.9);
  font-size:16px; line-height:1; position:relative; padding:8px; border-radius:6px;}
.appbar .bell:hover{background:rgba(255,255,255,.08);}
.appbar .bell::after{content:""; position:absolute; top:5px; right:5px; width:6px; height:6px;
  border-radius:50%; background:var(--incorrect); box-shadow:0 0 0 2px var(--navy);}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(11,34,55,.5); z-index:40; display:none;}
.scrim.open{display:block;}
.drawer{position:fixed; top:0; left:0; bottom:0; width:288px; background:var(--surface);
  z-index:50; transform:translateX(-100%); transition:transform .24s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; box-shadow:var(--sh-3);}
.drawer.open{transform:none;}
.drawer .dh{background:var(--navy); padding:22px; font-size:12.5px; color:rgba(255,255,255,.6);}
.drawer .dh b{display:block; font-family:var(--display); font-size:25px; letter-spacing:.2em;
  font-weight:600; color:#fff; margin-bottom:6px;}
.drawer a,.drawer button.dl{display:block; width:100%; text-align:left; padding:15px 22px;
  border:0; border-bottom:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:15px; text-decoration:none; font-family:inherit;}
.drawer a:hover,.drawer button.dl:hover{background:var(--surface-2); color:var(--navy);}

/* ---------- search band ---------- */
.searchband{padding:22px 20px 24px; text-align:center; background:var(--navy);
  background-image:radial-gradient(120% 90% at 50% -20%, #1B3A55 0%, #0B2237 62%);}
.searchband .box{position:relative; max-width:472px; margin:0 auto;}
.searchband input{width:100%; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:12px 18px 12px 44px; color:#fff; font-size:15px; font-family:inherit;
  transition:background .15s,border-color .15s;}
.searchband input::placeholder{color:rgba(255,255,255,.55);}
.searchband input:hover{background:rgba(255,255,255,.14);}
.searchband input:focus{outline:none; background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.4);}
.searchband .ic{position:absolute; left:17px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.6); font-size:14px; line-height:1;}
.searchband p{margin:12px 0 0; color:rgba(255,255,255,.48); font-size:11.5px; line-height:1.7;}

/* ---------- section prompt ---------- */
.prompt{color:var(--ink-3); text-align:center; padding:0; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  max-width:none; margin:34px auto 18px; background:none;}

/* ---------- workbook card ---------- */
.wb{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  margin:26px 0 20px; position:relative; box-shadow:var(--sh-2);}
.wb .badge{position:absolute; top:-13px; left:0; right:0; margin:0 auto; width:max-content;
  max-width:calc(100% - 32px); background:var(--brass-soft); border:1px solid #E2D5BF;
  border-radius:999px; padding:5px 16px; font-size:11px; line-height:1.5; text-align:center;
  color:#7A6237; z-index:2; letter-spacing:.02em; font-weight:500;}
.wb .wbh{display:flex; align-items:center; padding:34px 22px 22px; gap:12px;}
.wb .wbt{flex:1; text-align:center;}
.wb .wbt b{display:block; font-family:var(--display); font-size:30px; font-weight:600;
  line-height:1.18; color:var(--navy);}
.wb .wbt small{display:block; font-size:13px; margin-top:8px; color:var(--ink-2);}
.wb .wbt small.note{font-size:10.5px; color:var(--ink-3); margin-top:7px;
  letter-spacing:.08em; text-transform:uppercase;}
.wb .toggle{flex:none; width:32px; height:32px; border:1px solid var(--line-2); background:none;
  color:var(--ink-2); font-size:17px; line-height:1; border-radius:50%;}
.wb .toggle:hover{background:var(--surface-2); color:var(--navy);}
.wb .wbbody{display:none; padding:0 18px 22px;}
.wb.open .wbbody{display:block;}

/* ROAD for GOAL リング */
.ring-legend{display:flex; justify-content:center; gap:22px; font-size:12px;
  color:var(--ink-2); padding:2px 0 16px;}
.ring-legend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px;}
.ring-wrap{display:flex; justify-content:center; padding:2px 0 28px;}
.ring{width:216px; height:216px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--sh-1);}
.ring .hole{width:170px; height:170px; border-radius:50%; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--navy); box-shadow:inset 0 0 0 1px var(--line);}
.ring .hole span{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;}
.ring .hole b{font-family:var(--font); font-size:50px; font-weight:700; line-height:1.06;
  margin-top:6px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.ring .hole b i{font-size:19px; font-style:normal; font-weight:500; color:var(--ink-3);
  margin-left:2px;}

/* 白パネル */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 18px 24px; margin-bottom:16px; box-shadow:var(--sh-1);}
.panel h2{display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:11px; font-weight:500; color:var(--ink-3); margin:0 0 20px;
  letter-spacing:.16em; text-transform:uppercase;}
.panel h2::before,.panel h2::after{content:""; flex:1; max-width:52px; height:1px;
  background:var(--line-2);}

.selectbtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--navy); border:1px solid var(--navy); border-radius:var(--r-sm); padding:15px;
  font-size:15px; font-weight:500; color:#fff; text-decoration:none;
  box-shadow:var(--sh-1); transition:background .15s;}
.selectbtn:hover{background:var(--navy-2);}
.selectbtn:disabled{opacity:.32;}

/* 統計タイル 2×3 */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 10px 15px; text-align:center; transition:border-color .15s, box-shadow .15s;}
.tile.on{border-color:var(--line-2);}
a.tile:hover{border-color:var(--navy-soft); box-shadow:var(--sh-1);}
.tile .k{font-size:10.5px; color:var(--ink-3); letter-spacing:.09em; text-transform:uppercase;
  font-weight:500;}
.tile .n{font-family:var(--font); font-size:27px; font-weight:700; color:var(--navy);
  line-height:1.2; margin-top:5px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.tile.off{opacity:.42;}
.tile.off .n{color:var(--ink-3);}
a.tile{text-decoration:none; display:block;}

.pill-btn{display:block; margin:22px auto 0; background:var(--surface);
  border:1px solid var(--line-2); border-radius:999px; padding:11px 30px; font-size:14px;
  color:var(--ink-3); font-weight:500;}
.pill-btn.ready{color:#fff; background:var(--brass); border-color:var(--brass);}
.pill-note{text-align:center; font-size:12px; margin:10px 0 0; color:var(--ink-3);}
.pill-note b{color:var(--brass); font-weight:700;}

.textlink{display:block; text-align:center; margin:16px auto 0; font-size:13.5px;
  color:var(--navy-soft); text-decoration:none; border-bottom:1px solid transparent;
  width:max-content;}
.textlink:hover{border-bottom-color:var(--navy-soft);}

/* ---------- category list ---------- */
.catbar{color:var(--ink-3); text-align:center; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:0 0 14px; max-width:none; margin:0; background:none;
  font-weight:500;}
.catlist{border-top:1px solid var(--line);}
.catrow{display:flex; align-items:center; gap:10px; width:100%; min-height:56px;
  padding:12px 4px 12px 6px; background:var(--surface); border:0;
  border-bottom:1px solid var(--line); color:var(--ink); font-size:15px; text-align:left;
  text-decoration:none; transition:background .12s, padding-left .12s;}
.catrow:last-child{border-bottom:none;}
.catrow:nth-child(even){background:var(--surface);}
.catrow:hover{background:var(--surface-2); padding-left:12px;}
.catrow .nm{flex:1;}
.catrow .n{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;
  background:var(--bg-sunk); border-radius:999px; padding:2px 9px;}
.catrow .chev{color:var(--ink-3); font-size:17px; line-height:1;}
.catgroup{padding:12px 6px; font-size:11px; color:var(--ink-3); letter-spacing:.12em;
  text-transform:uppercase; background:none;}

/* ---------- breadcrumb ---------- */
.crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px;
  margin:20px 0 4px; overflow:visible;}
.crumbs a,.crumbs span{display:inline-flex; align-items:center; color:var(--ink-3);
  text-decoration:none; background:none; clip-path:none; padding:0;}
.crumbs a{max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.crumbs .cur{white-space:normal;}
.crumbs a::after{content:"›"; margin-left:8px; color:var(--line-2);}
.crumbs a:hover{color:var(--navy);}
.crumbs .cur{color:var(--ink); font-weight:500; background:none;}

/* ---------- learning ---------- */
.lhead{background:none; text-align:center; padding:20px 0 4px;
  font-family:var(--display); font-size:36px; font-weight:600; color:var(--navy);
  line-height:1.16;}
.who{text-align:center; padding:18px 0 6px;}
.who b{font-size:16px; font-weight:500; color:var(--ink);}
.who small{display:block; font-size:13px;}
.who .last{font-size:10.5px; font-weight:500; letter-spacing:.1em; margin-top:8px;
  color:var(--ink-3); text-transform:uppercase;}
.twocard{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 30px;}
.twocard .c{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 14px; text-align:center; box-shadow:var(--sh-1);}
.twocard .c .k{font-size:10.5px; font-weight:500; color:var(--ink-3); letter-spacing:.1em;
  text-transform:uppercase;}
.twocard .c .v{font-family:var(--font); font-size:30px; font-weight:700; color:var(--navy);
  line-height:1.35; font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:4px;}
.twocard .c .v em{font-size:13px; font-style:normal; color:var(--ink-3); font-weight:500;
  font-family:var(--font);}

.donut-wrap{display:flex; justify-content:center;}
.donut{width:248px; height:248px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--sh-1);}
.donut .hole{width:150px; height:150px; border-radius:50%; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--line);}
.donut .hole span{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;}
.donut .hole b{font-family:var(--font); font-size:40px; font-weight:700; color:var(--navy);
  line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.donut .hole b i{font-size:16px; font-style:normal; color:var(--ink-3); font-weight:500;
  margin-left:2px;}
.dlegend{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; font-size:12px;
  margin:20px 0 22px; color:var(--ink-2);}
.dlegend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px;}

.playbtn{display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  background:var(--navy); border:1px solid var(--navy); border-radius:var(--r); padding:19px;
  color:#fff; font-size:16px; font-weight:500; text-decoration:none;
  box-shadow:var(--sh-2); transition:background .15s, transform .1s;}
.playbtn:hover{background:var(--navy-2);}
.playbtn:active{transform:translateY(1px);}
.playbtn:disabled{opacity:.4;}

/* ---------- practice ---------- */
.qhead{display:flex; align-items:center; gap:9px; padding:8px 0 4px;}
.qdiff{font-size:10.5px; font-weight:700; color:var(--brass); letter-spacing:.14em;}
.glasses{display:flex; gap:3px;}
.glass{width:12px; height:14px; opacity:.22;}
.glass.on{opacity:1;}
.social{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px;
  color:var(--ink-2);}
.social .chip{display:inline-flex; align-items:center; gap:6px;
  font-variant-numeric:tabular-nums;}
.social .ic{width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:10px; color:#fff;}
.social .ic.like{background:var(--like);}
.social .ic.fav{background:var(--favorite);}

.qnav{display:flex; align-items:center; justify-content:space-between; padding:10px 0 2px;}
.navbtn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); color:var(--navy-soft); font-size:15px; line-height:1;
  transition:border-color .15s, background .15s;}
.navbtn:hover:not(:disabled){border-color:var(--navy-soft); background:var(--surface-2);}
.navbtn:disabled{opacity:.3;}
.qcount{font-family:var(--font); font-size:18px; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

.qtagrow{display:flex; justify-content:center; margin:14px 0 20px;}
.qtag{background:var(--navy-tint); border:0; border-radius:999px;
  padding:5px 15px; font-size:11.5px; color:var(--navy); max-width:80%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500;}

.qno{font-size:10.5px; font-weight:500; margin:0 0 12px; color:var(--ink-3);
  letter-spacing:.11em; text-transform:uppercase; display:flex; gap:16px;
  font-variant-numeric:tabular-nums;}
.qtext{font-size:22px; font-weight:400; line-height:1.5; margin:0 0 30px; color:var(--ink);}

.choice{display:flex; align-items:center; gap:14px; width:100%; background:var(--surface);
  border:1px solid var(--line-2); border-radius:999px; padding:13px 18px; min-height:56px;
  margin-bottom:10px; font-size:15.5px; font-weight:400; color:var(--ink);
  box-shadow:var(--sh-1); transition:border-color .14s, box-shadow .14s, transform .1s;
  text-align:left;}
.choice:hover:not(:disabled){border-color:var(--navy-soft); box-shadow:var(--sh-2);}
.choice:active:not(:disabled){transform:translateY(1px);}
.choice .b{flex:none; width:28px; height:28px; border-radius:50%; background:var(--bg-sunk);
  color:var(--ink-2); font-size:12px; font-weight:700; display:flex; align-items:center;
  justify-content:center; text-transform:uppercase;}
.choice .t{flex:1; text-align:left; padding-right:0;}
.choice .res{flex:none; width:22px; height:22px; margin-left:0; display:none;}
.choice.ok .res,.choice.ng .res{display:block;}
.choice.ok .res{color:var(--correct);}
.choice.ng .res{color:var(--incorrect);}
.choice[aria-pressed="true"]{border-color:var(--navy); background:var(--navy-tint);}
.choice[aria-pressed="true"] .b{background:var(--navy); color:#fff;}
.choice:disabled{opacity:1; color:var(--ink); -webkit-text-fill-color:var(--ink);
  box-shadow:none;}
.choice.ok{border-color:var(--correct); border-width:1.5px; background:var(--correct-tint);}
.choice.ok .b{background:var(--correct); color:#fff;}
.choice.ng{border-color:var(--incorrect); border-width:1.5px; background:var(--incorrect-tint);}
.choice.ng .b{background:var(--incorrect); color:#fff;}

.pausebtn{display:flex; align-items:center; justify-content:center; gap:9px; margin:36px auto 0;
  background:none; border:1px solid var(--line-2); border-radius:999px; padding:9px 22px;
  font-size:13px; color:var(--ink-2);}
.pausebtn:hover{border-color:var(--navy-soft); color:var(--navy);}
.refbox{border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm);
  padding:16px 18px; margin-top:30px; font-size:12px; color:var(--ink-3); line-height:1.8;}
.refbtn{display:block; margin:14px auto 0; background:var(--surface);
  border:1px solid var(--line-2); border-radius:999px; padding:8px 22px; font-size:13px;
  color:var(--ink-2);}
.reportbtn{display:block; margin:18px auto 0; background:none; border:0;
  padding:6px; font-size:12.5px; color:var(--ink-3); text-decoration:underline;
  text-underline-offset:3px;}
.reportbtn:hover{color:var(--navy);}

.marks{display:flex; justify-content:center; gap:10px; margin-top:22px;}
.mk{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:999px; padding:8px 16px; color:var(--ink-2);
  transition:border-color .14s, color .14s;}
.mk:hover{border-color:var(--ink-3);}
.mk[aria-pressed="true"].like{border-color:var(--like); color:var(--like); background:#EAF5F8;}
.mk[aria-pressed="true"].fav{border-color:var(--favorite); color:#C4526F; background:#FCEEF2;}
.mk[aria-pressed="true"].again{border-color:var(--retry); color:#8F6A0C; background:#FBF3E0;}

/* ---------- answer modal ---------- */
.mscrim{position:fixed; inset:0; background:rgba(11,34,55,.44); z-index:60; display:none;
  overflow-y:auto; padding:28px 14px;}
.mscrim.open{display:block;}
.modal{background:var(--surface); border-radius:var(--r-lg); max-width:452px; margin:0 auto;
  padding:26px 24px 30px; box-shadow:var(--sh-3); overflow:hidden;}
.modal .verdict{display:flex; align-items:center; justify-content:center; gap:16px;
  margin:-26px -24px 26px; padding:26px 22px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  font-family:var(--display); font-size:36px; font-weight:600; color:#fff;}
.modal .verdict.ok{background:var(--correct);}
.modal .verdict.ng{background:var(--incorrect);}
.modal .vic{flex:none; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;}
.modal .vic svg{width:26px; height:26px;}
.modal .mdiff{display:flex; align-items:center; gap:9px; margin-bottom:16px;}
.modal h3{text-align:center; font-size:10.5px; font-weight:500; margin:0 0 12px;
  color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase;}
.modal .qt{font-size:17px; font-weight:400; line-height:1.6; margin:0 0 26px; color:var(--ink);}
.modal .lbl{font-size:10.5px; font-weight:700; margin:0 0 8px; letter-spacing:.14em;
  text-transform:uppercase;}
.modal .lbl.ok{color:var(--correct-deep);}
.modal .lbl.ng{color:var(--incorrect-deep);}
.modal .ansrow{display:flex; align-items:center; gap:13px; padding:13px 16px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  border-left:3px solid var(--line-2); font-size:15px;}
.modal .ansrow.ok{border-left-color:var(--correct); background:var(--correct-tint);
  border-color:#CBE5D6;}
.modal .ansrow.ng{border-left-color:var(--incorrect); background:var(--incorrect-tint);
  border-color:#EFD2D2;}
.modal .ansrow .b{flex:none; width:26px; height:26px; border-radius:50%; background:var(--ink-3);
  color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center;
  justify-content:center; text-transform:uppercase;}
.modal .ansrow.ok .b{background:var(--correct);}
.modal .ansrow.ng .b{background:var(--incorrect);}
.modal .contbtn{display:block; width:100%; height:52px; margin:10px 0 30px;
  background:var(--navy); border:0; border-radius:var(--r-sm); color:#fff; font-size:15px;
  font-weight:500; box-shadow:var(--sh-2); transition:background .15s;}
.modal .contbtn:hover{background:var(--navy-2);}
.modal .exp{font-size:15px; font-weight:400; line-height:1.75; color:var(--ink-2);}
.modal .exp p{margin:0 0 14px;}
.modal .exp p:last-child{margin-bottom:0;}
.modal .note{font-size:12px; font-weight:400; background:#FBF3E0; border:1px solid #EDD9A8;
  border-radius:var(--r-sm); padding:11px 14px; margin-top:18px; color:#7A5C10; line-height:1.7;}

/* ---------- misc ---------- */
.done{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:48px 22px 34px; text-align:center; box-shadow:var(--sh-2);}
.done .big{font-family:var(--font); font-size:64px; font-weight:700; color:var(--navy);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em;}
.done .sub{font-size:14px; margin-top:10px; color:var(--ink-2);}
.done .acts{display:flex; gap:12px; margin-top:34px;}
.done .acts>*{flex:1;}
.btn{display:inline-flex; align-items:center; justify-content:center; background:var(--navy);
  border:1px solid var(--navy); border-radius:var(--r-sm); padding:14px 20px; color:#fff;
  font-size:15px; font-weight:500; text-decoration:none;
  box-shadow:var(--sh-1); transition:background .15s;}
.btn:hover{background:var(--navy-2);}
.btn.ghost{background:var(--surface); color:var(--navy); border-color:var(--line-2);
  box-shadow:none;}
.btn.ghost:hover{background:var(--surface-2);}
.btn.block{width:100%;}

.field{margin-bottom:18px;}
.field label{display:block; font-size:10.5px; font-weight:500; margin-bottom:7px;
  color:var(--ink-3); letter-spacing:.11em; text-transform:uppercase;}
.field input{width:100%; font:inherit; font-size:15px; padding:13px 15px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface);
  transition:border-color .15s, box-shadow .15s;}
.field input:focus{outline:none; border-color:var(--navy-soft);
  box-shadow:0 0 0 3px var(--navy-tint);}
.hint{font-size:12px; color:var(--ink-3); margin:14px 0 0; line-height:1.75;}

.palrow{display:flex; justify-content:center; margin-top:26px;}
.palrow button{background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:8px 20px; font-size:12.5px; color:var(--ink-2);}
.palrow button:hover{border-color:var(--incorrect); color:var(--incorrect);}

.footnote{margin-top:36px; font-size:11.5px; color:var(--ink-3); line-height:1.9;
  text-align:center;}
footer.copy{text-align:center; font-size:10.5px; color:var(--ink-3); padding:30px 0 10px;
  letter-spacing:.1em; text-transform:uppercase;}

@media (max-width:430px){
  .page{padding:0 16px 80px;}
  .wb .wbt b{font-size:25px;}
  .lhead{font-size:29px;}
  .ring{width:196px;height:196px}
  .ring .hole{width:152px;height:152px}
  .ring .hole b{font-size:44px}
  .donut{width:216px;height:216px}
  .donut .hole{width:132px;height:132px}
  .qtext{font-size:19px;}
  .modal .verdict{font-size:30px;}
  .done .big{font-size:54px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}