/* TARGETLET — GRAMMARLET の妹
 * 骨組み（格子・太枠・演習面・Live）は GRAMMARLET と同じ。着せ替えだけ違う（末尾の節）。
 *   GRAMMARLET = 昭和の洋風ポスター：クリーム紙・朱赤・紺・金・【斜めの帯】
 *   TARGETLET  = 2026-09-26〜 青と赤の差し色の面・四隅の鉤・細い斜線（明）／紺の夜に水色と桃色の光（暗）
 * 🚨 外部通信ゼロ: webfont を読まない。端末にある書体を積む。
 * 🚨 タイムを競うので、演出は重ねるだけ・場所を取らない・待たせない。
 */

:root{
  --paper:#F6F7F9;        /* 本文ページの白（少し冷たい） */
  --paper-2:#FFFFFF;
  --paper-3:#E3E7EE;
  --ink:#15213D;          /* 墨の代わりに紺墨 */
  --ink-soft:#56607A;
  --rule:#CDD4E0;
  --rule-strong:#98A3B8;

  --red:#D3121B;          /* 表紙の赤帯 = 誤り・訂正・強調 */
  --navy:#1650B4;         /* 表紙の瑠璃 = 正解 */
  --gold:#F0B400;         /* 帯の黄色 = 1位・進行中 */
  --green:#2E7D5B;

  --cover:#1650B4;        /* 題字の面 */
  --cover-deep:#0E3A86;
  --band:#D3121B;
  --spine:#EFE9DB;        /* 背表紙のクリーム */
  --spine-ink:#6E6552;
  --sticker:#8D939D;      /* 丸シール */
  --outline:#8C93A3;      /* 白抜き数字の灰色の縁 */

  --shu:var(--red);
  --ai:var(--navy);
  --kin:var(--gold);

  --disp:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro",
         "Helvetica Rounded","Nunito","Segoe UI Black","Arial Black",sans-serif;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  --en:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
  --type:"American Typewriter","Courier New",Courier,monospace;

  --proj:1;
  --fs-stem:calc(32px * var(--proj));
  --fs-blank:calc(40px * var(--proj));
  --fs-ja:calc(20px * var(--proj));
  --fs-ui:calc(14px * var(--proj));
  --shadow:0 2px 0 var(--paper-3), 0 16px 30px -22px rgba(14,58,134,.55);
}
/* 暗い方は特装版「DARK」の夜空に寄せる */
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --paper:#0B1428; --paper-2:#111D38; --paper-3:#1C2A4B; --rule:#263558; --rule-strong:#4A5C86;
    --ink:#EAF0FB; --ink-soft:#A9B5D0;
    --red:#FF5A5F; --navy:#7FB0FF; --gold:#FFD447; --green:#6CC39A;
    --cover:#12306E; --cover-deep:#0A1F4C; --band:#C21420; --spine:#2A2A33; --spine-ink:#B8B0A0;
    --sticker:#5E6573; --outline:#5F6C8C;
    --shadow:0 2px 0 var(--paper-3), 0 16px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0B1428; --paper-2:#111D38; --paper-3:#1C2A4B; --rule:#263558; --rule-strong:#4A5C86;
  --ink:#EAF0FB; --ink-soft:#A9B5D0;
  --red:#FF5A5F; --navy:#7FB0FF; --gold:#FFD447; --green:#6CC39A;
  --cover:#12306E; --cover-deep:#0A1F4C; --band:#C21420; --spine:#2A2A33; --spine-ink:#B8B0A0;
  --sticker:#5E6573; --outline:#5F6C8C;
  --shadow:0 2px 0 var(--paper-3), 0 16px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-size:var(--fs-ui); line-height:1.7;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.016) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.013) 3px 4px);
}
.sheet{max-width:1040px; margin:0 auto; padding:0 18px 96px}

/* ── 題字 ─────────────────────────────── */
header.masthead{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:20px 0 14px; position:relative;
}
.wordmark{
  font-family:var(--disp); font-size:calc(30px * var(--proj)); font-weight:800;
  letter-spacing:.06em; margin:0; text-transform:uppercase; line-height:1;
  color:var(--ink);
}
.wordmark .let{
  color:var(--paper); background:var(--red); padding:2px 9px 3px; margin-left:3px;
  display:inline-block; transform:skewX(-9deg);
}
.sub{font-size:calc(12px * var(--proj)); color:var(--ink-soft); letter-spacing:.16em}
.masthead .spacer{flex:1}
.rule-double{
  height:9px; margin-bottom:26px;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/100% 4px no-repeat,
    repeating-linear-gradient(-45deg, var(--red) 0 9px, transparent 9px 18px) 0 6px/100% 3px no-repeat;
}

/* ── 操作UI（小さく・先生の顔にしない） ───── */
.chrome{display:flex; gap:5px; align-items:center}
.chip{
  font-family:var(--jp); font-size:calc(11.5px * var(--proj)); font-weight:600;
  letter-spacing:.06em; color:var(--ink-soft);
  background:transparent; border:2px solid var(--rule-strong);
  border-radius:0; padding:4px 10px; cursor:pointer;
  transition:all .12s;
}
.chip:hover{color:var(--ink); border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ── ホーム ───────────────────────────── */
.setcard{
  border:3px solid var(--ink); background:var(--paper-2);
  padding:20px 22px; margin-bottom:26px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.setcard::before{
  content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px;
  background:repeating-linear-gradient(-45deg, var(--red) 0 8px, transparent 8px 16px);
  opacity:.5; transform:rotate(10deg);
}
.setcard h2{font-family:var(--jp); font-size:calc(23px * var(--proj)); margin:0 0 6px; font-weight:800; letter-spacing:.02em}
.setmeta{font-family:var(--mono); font-size:calc(12.5px * var(--proj)); color:var(--ink-soft)}
.warn{
  margin-top:12px; background:var(--red); color:var(--paper);
  display:inline-block; padding:5px 12px; font-size:calc(12.5px * var(--proj)); font-weight:700;
  transform:skewX(-9deg);
}
.warn>*{display:inline-block; transform:skewX(9deg)}

.modes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  background:var(--ink); border:3px solid var(--ink);
}
@media (max-width:860px){ .modes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .modes{grid-template-columns:1fr} }
.mode{
  background:var(--paper); border:0; text-align:left; cursor:pointer;
  padding:18px 16px 16px; color:var(--ink); font-family:var(--jp);
  display:flex; flex-direction:column; gap:3px; min-height:132px;
  transition:background .14s, color .14s; position:relative; overflow:hidden;
}
.mode:hover{background:var(--navy); color:var(--paper)}
.mode:hover .ds,.mode:hover .en{color:var(--paper); opacity:.85}
.mode:hover .no{color:var(--gold)}
.mode .no{
  font-family:var(--disp); font-size:calc(13px * var(--proj)); font-weight:800;
  letter-spacing:.14em; color:var(--red);
}
.mode .nm{font-size:calc(22px * var(--proj)); font-weight:800; letter-spacing:.02em; line-height:1.25}
.mode .en{
  font-family:var(--disp); font-size:calc(12px * var(--proj)); font-weight:700;
  letter-spacing:.18em; color:var(--ink-soft); text-transform:uppercase;
}
.mode .ds{font-size:calc(12.5px * var(--proj)); color:var(--ink-soft); line-height:1.5; margin-top:auto}
.mode .soon-tag{font-size:calc(11px * var(--proj)); color:var(--gold); font-weight:700; letter-spacing:.12em}

/* ── 演習面 ───────────────────────────── */
.stage{padding:2px 0 0}
.progress{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-family:var(--disp); font-size:calc(15px * var(--proj)); font-weight:800;
  letter-spacing:.1em; color:var(--ink); text-transform:uppercase;
}
.bar{flex:1; height:6px; background:var(--paper-3); position:relative; border:1px solid var(--rule-strong)}
.bar i{position:absolute; inset:0 auto 0 0; background:var(--red); transition:width .25s}

.theme-tag{
  display:inline-block; font-size:calc(12px * var(--proj)); font-weight:700; letter-spacing:.08em;
  color:var(--paper); background:var(--navy); padding:4px 12px; margin-bottom:18px;
  transform:skewX(-9deg);
}
.theme-tag>*{display:inline-block; transform:skewX(9deg)}
.ja{font-size:var(--fs-ja); line-height:1.7; margin:0 0 26px; font-weight:600; letter-spacing:.01em}

.line{
  font-family:var(--en); font-size:var(--fs-stem); line-height:2.3;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.32em;
  margin-bottom:52px;
}
.word{white-space:pre}
.blank{position:relative; display:inline-block}
.blank input{
  /* 🚨 幅は文字数ちょうど。余白を足すと下線が1本余計に生える（検査 B11） */
  font-family:var(--mono); font-size:var(--fs-blank); line-height:1.45; letter-spacing:0;
  font-weight:700;
  color:var(--ink); background:transparent;
  border:0; margin:0; outline:none; padding:0 0 4px;
  width:calc(var(--len,5) * 1ch);
  text-align:left; caret-color:var(--red);
  background-image:repeating-linear-gradient(90deg,
    var(--rule-strong) 0 calc(1ch - .14em), transparent calc(1ch - .14em) 1ch);
  background-size:100% 4px; background-position:0 100%; background-repeat:repeat-x;
  transition:background-image .12s;
}
.blank input:focus{
  background-image:repeating-linear-gradient(90deg,
    var(--red) 0 calc(1ch - .14em), transparent calc(1ch - .14em) 1ch);
}
.blank input::placeholder{color:transparent}
.blank .idx{
  position:absolute; top:-1em; left:0;
  font-family:var(--disp); font-size:calc(11px * var(--proj)); font-weight:800;
  color:var(--ink-soft); opacity:.7;
}

/* ── 赤入れ ───────────────────────────── */
.blank.ok input{color:var(--navy);
  background-image:repeating-linear-gradient(90deg,
    var(--navy) 0 calc(1ch - .14em), transparent calc(1ch - .14em) 1ch)}
.blank.ng input{color:var(--red); text-decoration:line-through;
  text-decoration-color:var(--red); text-decoration-thickness:3px;
  background-image:repeating-linear-gradient(90deg,
    var(--red) 0 calc(1ch - .14em), transparent calc(1ch - .14em) 1ch)}
.blank .fix{
  position:absolute; left:0; top:calc(100% + 4px); white-space:nowrap;
  font-family:var(--mono); font-weight:700; font-size:.62em; color:var(--red);
}
.blank .maru{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  width:1.5em; height:1.5em; border:3px solid var(--navy); border-radius:50%;
  pointer-events:none; opacity:0; animation:maru .26s ease-out forwards;
}
@keyframes maru{from{opacity:0;transform:translate(-50%,-52%) scale(.5) rotate(-18deg)}
                to{opacity:.9;transform:translate(-50%,-52%) scale(1) rotate(0)}}

.tokens{display:flex; flex-wrap:wrap; gap:7px; margin:-30px 0 28px}
.tok{
  font-family:var(--en); font-size:calc(16px * var(--proj)); font-weight:600;
  border:2px solid var(--ink); background:var(--paper-2);
  padding:2px 11px; color:var(--ink); user-select:none;
}
.tok.used{opacity:.3; text-decoration:line-through}

.verdict{font-size:calc(17px * var(--proj)); font-weight:800; min-height:2.1em; letter-spacing:.04em}
.verdict.ok{color:var(--navy)}
.verdict.ng{color:var(--red)}
.verdict .full{font-family:var(--en); display:block; margin-top:2px;
  font-size:calc(17px * var(--proj)); font-weight:600}

.actions{display:flex; gap:10px; align-items:center; margin-top:6px; flex-wrap:wrap}
.btn{
  font-family:var(--jp); font-size:calc(15px * var(--proj)); font-weight:800; letter-spacing:.1em;
  padding:11px 26px; cursor:pointer; border:0;
  background:var(--red); color:var(--paper); border-radius:0;
  box-shadow:4px 4px 0 var(--ink); transition:transform .08s, box-shadow .08s;
}
.btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5; cursor:default}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper); transform:none; box-shadow:inset 0 0 0 2px var(--ink)}
.hint{font-family:var(--mono); font-size:calc(11.5px * var(--proj)); color:var(--ink-soft)}

/* ── フラッシュカード ─────────────────── */
.card{
  border:3px solid var(--ink); background:var(--paper-2); box-shadow:var(--shadow);
  min-height:clamp(230px,36vh,360px); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:36px 28px; cursor:pointer; position:relative; margin-bottom:20px;
}
.card .face{font-size:calc(28px * var(--proj)); line-height:1.6; font-weight:700}
.card .face.en{font-family:var(--en); font-weight:600}
.card .flip{position:absolute; right:12px; bottom:9px; font-family:var(--mono);
  font-size:calc(10.5px * var(--proj)); color:var(--ink-soft)}

/* ── マッチ ───────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:7px}
.tile{
  border:2px solid var(--ink); background:var(--paper-2); padding:13px 12px;
  cursor:pointer; min-height:86px; display:flex; align-items:center;
  font-size:calc(14px * var(--proj)); line-height:1.5; transition:all .12s; text-align:left;
  color:var(--ink); font-family:var(--jp); font-weight:600;
}
.tile.en{font-family:var(--en); font-size:calc(15.5px * var(--proj)); font-weight:500}
.tile:hover{background:var(--navy); color:var(--paper)}
.tile.sel{background:var(--gold); color:var(--ink); border-color:var(--ink)}
.tile.gone{opacity:0; pointer-events:none; transition:opacity .28s}
.tile.miss{background:var(--red); color:var(--paper); animation:shake .26s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── 結果・順位 ───────────────────────── */
.score{font-family:var(--disp); font-size:calc(80px * var(--proj)); font-weight:800;
  line-height:1; letter-spacing:-.02em; color:var(--red)}
.score small{font-size:calc(24px * var(--proj)); color:var(--ink-soft); font-weight:700}
.review{border-top:3px solid var(--ink); margin-top:22px}
.review .row{border-bottom:1px solid var(--rule); padding:11px 0; display:grid;
  grid-template-columns:2.4em 1fr; gap:12px; align-items:center;
  transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.review .mk{font-family:var(--disp); font-size:calc(22px * var(--proj)); font-weight:800; color:var(--ink-soft)}
.review .mk.ok{color:var(--navy)} .review .mk.ng{color:var(--red)}
.review .q{font-size:calc(13px * var(--proj)); color:var(--ink-soft)}
.review .a{font-family:var(--en); font-size:calc(17px * var(--proj)); font-weight:600}
.review .yours{font-family:var(--en); font-size:calc(14px * var(--proj)); color:var(--red);
  text-decoration:line-through; text-decoration-thickness:2px}
.review .row.up{background:linear-gradient(90deg, rgba(200,150,42,.28), transparent 60%)}
.review .row.lead{background:linear-gradient(90deg, rgba(200,150,42,.20), transparent 70%)}
.review .row.lead .mk{color:var(--gold)}
.review .row.lead .a{font-weight:800}

footer.colophon{
  margin-top:52px; padding-top:12px; border-top:3px solid var(--ink);
  font-family:var(--mono); font-size:calc(10.5px * var(--proj)); color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.hidden{display:none !important}

/* ── Live ─────────────────────────────── */
.roomcode{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(64px, 16vw, calc(170px * var(--proj)));
  letter-spacing:.1em; line-height:1; margin:6px 0 20px;
  color:var(--paper); background:var(--ink); display:inline-block;
  padding:10px 26px 14px; transform:skewX(-7deg);
  box-shadow:10px 10px 0 var(--red);
}
.players{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 20px}
.pchip{
  font-size:calc(13.5px * var(--proj)); font-weight:700; padding:4px 12px;
  border:2px solid var(--ink); background:var(--paper-2); color:var(--ink);
}
[data-team="あか"]  {background:var(--red) !important; color:var(--paper) !important; border-color:var(--red) !important}
[data-team="あお"]  {background:var(--navy) !important; color:var(--paper) !important; border-color:var(--navy) !important}
[data-team="きいろ"]{background:var(--gold) !important; color:var(--ink) !important; border-color:var(--gold) !important}
[data-team="みどり"]{background:var(--green) !important; color:var(--paper) !important; border-color:var(--green) !important}
.review .a[data-team]{display:inline-block; padding:2px 12px; font-family:var(--jp); font-weight:800}

.joinform{display:flex; gap:20px; flex-wrap:wrap; margin:12px 0 10px}
.jfw{display:flex; flex-direction:column; gap:4px}
.jfl{font-family:var(--disp); font-size:calc(12px * var(--proj)); font-weight:800;
  letter-spacing:.16em; color:var(--red); text-transform:uppercase}
.jf{
  font-family:var(--disp); font-size:calc(34px * var(--proj)); font-weight:800; letter-spacing:.08em;
  background:transparent; color:var(--ink); border:0; border-bottom:4px solid var(--ink);
  padding:2px 2px; outline:none; width:7.5em;
}
.jf.nick{font-family:var(--jp); letter-spacing:.02em; width:8em; font-size:calc(28px * var(--proj))}
.jf:focus{border-bottom-color:var(--red)}
.jf::placeholder{color:var(--rule-strong)}

.blank.ghost{
  display:inline-block; position:relative;
  width:calc(var(--len,5) * 1ch); height:1.45em; vertical-align:baseline;
  font-family:var(--mono); font-size:var(--fs-blank); font-weight:700; letter-spacing:0;
  background-image:repeating-linear-gradient(90deg,
    var(--rule-strong) 0 calc(1ch - .14em), transparent calc(1ch - .14em) 1ch);
  background-size:100% 4px; background-position:0 100%; background-repeat:repeat-x;
}
.blank.ghost .ghosttext{color:var(--ink)}

.liveside{margin-top:24px}
.liveside .row{padding:8px 0}

.lobbycfg{margin:2px 0 18px; display:flex; flex-direction:column; gap:8px}
.cfgrow{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.cfgl{font-family:var(--disp); font-size:calc(12px * var(--proj)); font-weight:800;
  letter-spacing:.14em; color:var(--ink-soft); width:5em; text-transform:uppercase}
.cfgrow .chip{font-size:calc(14px * var(--proj)); padding:7px 16px; font-weight:700}

/* ── 手応えの層 ───────────────────────────
   🚨 重ねるだけ・場所を取らない・待たない・操作を奪わない（検査 B12） */
#fx{position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden}

.stamp{
  position:absolute; left:50%; top:36%; transform:translate(-50%,-50%);
  padding:.06em .28em .12em;
  font-family:var(--disp); font-weight:800; letter-spacing:.02em;
  font-size:clamp(70px,13vw,150px); line-height:1;
  color:var(--paper); background:var(--navy);
  box-shadow:12px 12px 0 var(--ink);
  opacity:0; animation:stampIn .2s cubic-bezier(.2,1.7,.4,1) forwards,
                        stampOut .26s ease-in .42s forwards;
}
.stamp.miss{background:var(--red)}
@keyframes stampIn{
  from{opacity:0; transform:translate(-50%,-50%) scale(1.8) skewX(-14deg)}
  to  {opacity:1; transform:translate(-50%,-50%) scale(1) skewX(-9deg)}
}
@keyframes stampOut{to{opacity:0; transform:translate(-50%,-50%) scale(1.06) skewX(-9deg)}}

.gain{
  position:absolute; font-family:var(--disp); font-weight:800;
  font-size:clamp(34px,5vw,58px); color:var(--navy);
  opacity:0; animation:gainUp .62s ease-out forwards;
  text-shadow:3px 3px 0 var(--paper);
}
.gain.bonus{color:var(--gold)}
@keyframes gainUp{
  0%  {opacity:0; transform:translate(-50%,0) scale(.7)}
  16% {opacity:1; transform:translate(-50%,-16px) scale(1.16)}
  100%{opacity:0; transform:translate(-50%,-84px) scale(1)}
}

.streak{
  display:inline-flex; align-items:baseline; gap:.3em;
  font-family:var(--disp); font-size:calc(12px * var(--proj)); font-weight:800;
  letter-spacing:.12em; color:var(--paper); background:var(--red);
  padding:3px 10px; transform:skewX(-9deg);
}
.streak>*{display:inline-block; transform:skewX(9deg)}
.streak b{font-size:calc(21px * var(--proj)); font-weight:800; line-height:1}
.streak.hot b{animation:hot .26s ease-out}
@keyframes hot{from{transform:skewX(9deg) scale(1.6)} to{transform:skewX(9deg) scale(1)}}

@media (max-width:640px){
  :root{--fs-stem:calc(23px * var(--proj)); --fs-blank:calc(27px * var(--proj)); --fs-ja:calc(17px * var(--proj))}
  .sheet{padding:0 16px 76px}
  .line{line-height:2.6}
  .wordmark{font-size:calc(23px * var(--proj))}
}

/* A fixed four-lane scoreboard above the answer. No reordering or flashing. */
.team-progress{margin:0 0 18px;padding:8px 0;border-block:1px solid var(--rule);contain:layout}
.team-track{display:grid;grid-template-columns:minmax(95px,1fr) minmax(40px,2fr) 56px 66px;gap:8px;align-items:center;min-height:25px;font-size:13px;color:var(--ink)}
.team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-track.is-mine .team-name{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.team-score{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.team-lead{font-size:11px;font-weight:700;text-align:right}
.team-rail{height:7px;background:var(--paper-3);overflow:hidden}
.team-fill{display:block;height:100%;background:var(--ink);width:0}
[data-color="あか"] .team-fill{background:var(--red)}
[data-color="あお"] .team-fill{background:var(--navy)}
[data-color="きいろ"] .team-fill{background:var(--gold)}
[data-color="みどり"] .team-fill{background:var(--green)}
@media(max-width:430px){.team-track{grid-template-columns:minmax(90px,1.3fr) minmax(24px,1fr) 44px 58px;gap:5px;font-size:12px}.team-lead{font-size:10px}}

/* Festival status stays outside the editable sentence. */
.festival-status { padding:.65rem .85rem; margin:.5rem 0 1rem; border-left:3px solid currentColor; font-size:.9rem; min-height:2.8em; }
.festival-status.attacked { color:#C62828; background:rgba(198,40,40,.055); }
.festival-status.attacked { animation:bug-arrive .28s ease-out; }
@keyframes bug-arrive { from { transform:translateX(12px); opacity:.45; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .festival-status.attacked { animation:none; } }
/* A compact race above the editable question, retained across question changes. */
.race-tracks { margin:0 0 18px; padding:10px 0 12px; border-bottom:2px solid var(--ink); }
.race-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; font-size:12px; }
.race-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.race-lanes { display:grid; gap:5px 24px; max-height:210px; overflow:auto; padding:3px 5px 8px; }
.host-tracks .race-lanes { grid-template-columns:1fr; max-height:none; overflow:visible; gap:12px; }
.host-tracks .racer { grid-template-columns:minmax(100px,180px) minmax(0,1fr) 64px; min-height:56px; font-size:18px; line-height:1.4; }
.host-tracks .racer-rail { height:14px; }
.host-tracks .racer-flag { font-size:32px; }
.racer { display:grid; grid-template-columns:minmax(64px,110px) minmax(0,1fr) 40px; align-items:center; gap:9px; min-height:26px; font-size:11px; }
.racer[hidden] { display:none; }
.racer-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.racer.is-mine .racer-label { font-weight:800; color:var(--navy); }
.racer-rail { position:relative; height:7px; margin:0 13px; background:var(--paper-3); border-right:2px solid var(--ink); }
.racer-fill { display:block; width:100%; height:100%; background:var(--navy); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.racer-marker { position:absolute; top:50%; transform:translate(-50%,-50%); transition:left .28s cubic-bezier(.2,.8,.2,1); }
.racer-flag { display:block; font-size:23px; line-height:1; filter:drop-shadow(0 1px 1px #0003); }
.racer-count { text-align:right; font-variant-numeric:tabular-nums; }
.racer.is-leading .racer-fill { background:var(--gold); }
.racer.near-goal .racer-flag { filter:drop-shadow(0 0 5px var(--gold)); }
.racer.near-goal .racer-count { color:var(--red); font-weight:800; }
.racer-reset .racer-marker { transition:left .58s cubic-bezier(.6,0,.85,.3); }
.racer-reset .racer-fill { background:var(--red); transition:transform .58s cubic-bezier(.6,0,.85,.3); }
.racer-reset .racer-flag { animation:flag-drop .6s ease-in-out; }
.racer-reset .racer-count { color:var(--red); }
.no-race-motion .racer-marker,.no-race-motion .racer-fill { transition:none; }
@keyframes flag-drop { 0% { transform:translateY(0) rotate(0); } 35% { transform:translateY(8px) rotate(-22deg); } 75% { transform:translateY(5px) rotate(12deg); } 100% { transform:translateY(0) rotate(0); } }
@media(max-width:700px) { .host-tracks .race-lanes { grid-template-columns:1fr; } .racer { grid-template-columns:80px minmax(0,1fr) 38px; gap:5px; } .race-heading { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .racer-marker,.racer-fill,.racer-reset .racer-marker,.racer-reset .racer-fill { transition:none; } .racer-reset .racer-flag { animation:none; } }
.racer-advance:not(.racer-reset) .racer-flag { animation:flag-surge .26s ease-out; }
@keyframes flag-surge { 45% { transform:translateY(-3px) scale(var(--punch,1.15)); } }
@media(prefers-reduced-motion:reduce) { .racer-advance:not(.racer-reset) .racer-flag { animation:none; } }
/* Student: one shared horizontal race line. No scroll area, no per-player rails. */
.student-track .race-lanes { display:block; position:relative; height:58px; padding:0; margin:0; max-height:none; overflow:visible; }
.student-track .race-lanes::before { content:''; position:absolute; left:44px; right:44px; top:27px; height:5px; background:var(--paper-3); border-left:2px solid var(--ink); border-right:2px solid var(--ink); }
.student-track .racer { display:block; position:absolute; inset:0; min-height:0; pointer-events:none; }
.student-track .racer[hidden] { display:none; }
.student-track .racer-rail { position:absolute; left:44px; right:44px; top:29px; margin:0; height:0; background:none; border:0; }
.student-track .racer-fill,.student-track .racer-label,.student-track .racer-count { display:none; }
.student-track .racer-marker { transform:translate(calc(-50% + var(--tie-offset,0px)),-50%); }
.student-track .racer-flag { font-size:25px; }
.student-track .racer.is-mine { z-index:2; }
.student-track .racer.is-mine .racer-flag { outline:2px solid var(--navy); outline-offset:3px; border-radius:3px; }
.race-neighbors { display:flex; gap:8px; justify-content:space-between; font-size:11px; }
.race-neighbors[hidden] { display:none; }
.neighbor { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.neighbor.is-mine { font-weight:800; color:var(--navy); }

/* A hint is outside the editable value: even Home/select-all cannot move it. */
.blank.fixed-initial { display:inline-flex; align-items:baseline; }
.blank input { width:calc(var(--editable-len,var(--len,5)) * 1ch); }
.initial-letter { display:inline-block; flex:none; width:1ch; font-family:var(--mono); font-size:var(--fs-blank); font-weight:700; line-height:1.45; padding-bottom:4px; user-select:none; cursor:text; color:var(--ink); background:linear-gradient(var(--rule-strong),var(--rule-strong)) left bottom / calc(1ch - .14em) 4px no-repeat; }
.blank:focus-within .initial-letter { background-image:linear-gradient(var(--red),var(--red)); }
.blank.ok .initial-letter { color:var(--navy); }

.wordmark a{color:inherit;text-decoration:none}
.wordmark a:focus-visible{outline:3px solid var(--red);outline-offset:6px}

.answer-review{box-sizing:border-box;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;margin:auto;padding:28px 32px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.answer-review::backdrop{background:rgba(0,0,0,.42)}
.answer-review h2{margin:0 0 18px;color:var(--red);font-size:28px}
.review-prompt{font-size:18px;line-height:1.65;margin:0 0 20px}
.review-sentence{font-family:var(--en);font-size:clamp(24px,3.8vw,38px);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 22px}
.review-answer{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:.16em}
.review-countdown{border-top:1px solid var(--ink-soft);padding-top:16px;margin:0;font-family:var(--mono);font-size:18px;font-weight:700;text-align:right}
@media(max-width:480px){.answer-review{padding:20px}.answer-review h2{font-size:24px}.review-prompt{font-size:16px}.review-countdown{font-size:16px}}

/* ── 2026-09-26 音量つまみ（小さく・先生の顔にしない） ── */
.volbox{display:inline-flex; align-items:center; gap:4px}
.vol{width:84px; height:18px; margin:0; accent-color:var(--ink); cursor:pointer}
.volnum{min-width:2.2em; font:600 calc(10.5px * var(--proj))/1 var(--mono); color:var(--ink-soft); text-align:right}
#btnSound.needs-tap{animation:tap-me 1s ease-in-out infinite; border-color:var(--red); background:var(--red); color:var(--paper)}
@keyframes tap-me{50%{transform:scale(1.18)}}
@media(max-width:560px){.vol{width:60px}.volnum{display:none}}
@media(prefers-reduced-motion:reduce){#btnSound.needs-tap{animation:none}}

/* ── ロビーで外す ✖（永久BANではない） ── */
.pchip{display:inline-flex; align-items:center; gap:6px}
.pchip .kick{border:0; background:transparent; color:inherit; opacity:.55; cursor:pointer;
  font:700 calc(12px * var(--proj))/1 var(--jp); padding:2px 2px 2px 4px}
.pchip .kick:hover,.pchip .kick:focus-visible{opacity:1; color:var(--red)}
.pchip.leaving{opacity:.35; text-decoration:line-through}

/* ── 先生の投影：順位どおりに縦へ並べ替える ── */
.host-tracks .racer{position:relative; transition:transform .45s cubic-bezier(.2,.8,.2,1); will-change:transform}
.host-tracks .racer.lane-up{z-index:2}
.host-tracks .racer.lane-up .racer-label{color:var(--gold); font-weight:800}
.host-tracks .racer.lane-down{transition-duration:.7s; transition-timing-function:cubic-bezier(.55,0,.8,.4); z-index:1}
.host-tracks .racer.lane-down .racer-label{color:var(--red)}
@media(prefers-reduced-motion:reduce){.host-tracks .racer{transition:none}}

/* ── 表彰台（投影で後ろの席から読める大きさ） ── */
.podium-screen{position:relative}
.podium-wrap{position:relative; overflow:hidden; text-align:center; padding:12px 8px 0}
.podium-title{font:800 clamp(22px,3.2vw,40px)/1.1 var(--jp); color:var(--gold); letter-spacing:.08em}
.podium-champ{font:800 clamp(40px,7vw,96px)/1.1 var(--jp); color:var(--ink); margin:4px 0 18px;
  overflow-wrap:anywhere; animation:champ-pop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes champ-pop{from{transform:scale(.4); opacity:0}}
.podium{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:clamp(6px,1.4vw,18px);
  max-width:980px; margin:0 auto}
.step{display:flex; flex-direction:column; align-items:center; min-width:0; animation:step-in .6s cubic-bezier(.2,.8,.2,1) both}
.step.second{animation-delay:.25s}.step.third{animation-delay:.45s}
@keyframes step-in{from{transform:translateY(40px); opacity:0}}
.step-flag{font-size:clamp(40px,6vw,80px); line-height:1.1}
.step-name{font:800 clamp(20px,3.4vw,46px)/1.2 var(--jp); max-width:100%; overflow-wrap:anywhere; padding:0 4px}
.step.first .step-name{font-size:clamp(24px,4.2vw,58px)}
.step-score{font:700 clamp(14px,1.8vw,24px)/1.3 var(--mono); color:var(--ink-soft); margin-bottom:6px}
.step-block{width:100%; display:flex; justify-content:center; align-items:flex-start; padding-top:10px;
  border:3px solid var(--ink); border-bottom:0; box-shadow:inset 0 -10px 0 rgba(0,0,0,.08)}
.step-rank{font:900 clamp(34px,5vw,72px)/1 var(--disp); color:var(--paper)}
.step.first .step-block{height:clamp(120px,22vh,230px); background:var(--gold)}
.step.second .step-block{height:clamp(84px,15vh,160px); background:#9AA3AE}
.step.third .step-block{height:clamp(60px,10vh,110px); background:#B07A48}
.step.empty .step-block{opacity:.25}
.step.is-mine .step-name{color:var(--navy); text-decoration:underline 4px var(--navy); text-underline-offset:6px}
.podium-me{font:800 clamp(18px,2.6vw,30px)/1.3 var(--jp); margin:14px 0 0; color:var(--navy)}
.podium-actions{justify-content:center; margin:22px 0 8px}
.btn.big{font-size:clamp(18px,2.2vw,28px); padding:14px 40px}
.podium-rest{max-width:720px; margin:10px auto 0}
.podium-rest-h{font:700 13px/1.4 var(--jp); color:var(--ink-soft); border-bottom:2px solid var(--ink); padding:6px 0}
.rest-row{display:grid; grid-template-columns:3em 2em minmax(0,1fr) 4.5em; align-items:center; gap:8px;
  padding:5px 4px; border-bottom:1px solid var(--rule); font-size:15px}
.rest-row.is-mine{font-weight:800; color:var(--navy)}
.rest-rank{font:700 14px/1 var(--mono); color:var(--ink-soft)}
.rest-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rest-score{text-align:right; font:600 13px/1 var(--mono)}
.confetti{position:absolute; inset:0; pointer-events:none}
.confetti i{position:absolute; top:-14px; left:var(--x); width:9px; height:14px; background:var(--c);
  transform:rotate(var(--r)); opacity:0; animation:confetti-fall var(--t) linear var(--d) 2 both}
@keyframes confetti-fall{0%{opacity:1; transform:translateY(0) rotate(var(--r))}
  100%{opacity:.9; transform:translateY(560px) rotate(calc(var(--r) + 540deg))}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.podium-champ,.step{animation:none}}


/* ── 団体戦（2026-09-27）。団体戦の画面にだけ出る要素（team-・.pgroup・.group-pick）。個人戦・お祭りの既存クラスは変えない ── */
.pchip .pgroup{font-weight:800; font-size:.82em; padding:0 6px; border-radius:6px; background:var(--paper-3); color:var(--navy)}
.pchip .pgroup.unset{color:var(--red)}
.group-pick .chip{min-width:58px}
.team-rule{max-width:62em}
.team-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:10px 0 18px}
.team-card{border:2px solid var(--ink); border-radius:12px; padding:12px 14px; background:var(--paper-2); min-width:0}
.team-card.is-mine{border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 25%,transparent)}
.team-icon{font-size:calc(40px * var(--proj)); line-height:1}
.team-name{font:800 calc(20px * var(--proj))/1.3 var(--jp); margin:4px 0 6px; overflow-wrap:anywhere}
.team-members{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 10px; font-size:calc(14px * var(--proj))}
.team-members li{overflow-wrap:anywhere}
.team-members li.is-me{font-weight:800; color:var(--navy)}
.team-members.big{justify-content:center; font-size:20px; margin:10px 0 16px}
.team-hero-icon{font-size:84px; text-align:center; line-height:1.1; margin-top:8px}
.team-hero-name{font:800 34px/1.2 var(--jp); text-align:center; overflow-wrap:anywhere}
.team-tracks{display:grid; gap:10px; margin:6px 0 18px}
.team-lane{display:grid; grid-template-columns:minmax(120px,260px) minmax(0,1fr) 72px auto; align-items:center; gap:12px; font-size:calc(18px * var(--proj)); min-height:48px}
.team-lane-label{font-weight:800; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.team-rail{height:16px; background:var(--paper-3); border-right:3px solid var(--ink); border-radius:8px 0 0 8px; overflow:hidden}
.team-rail i{display:block; height:100%; width:0; background:var(--navy); transition:width .28s cubic-bezier(.2,.8,.2,1)}
.team-lane:first-child .team-rail i{background:var(--gold)}
.team-lane-count{font-variant-numeric:tabular-nums; font-weight:800; text-align:right}
.team-lane-conn{font-size:12px; color:var(--ink-soft); white-space:nowrap}
.team-lane.offline .team-lane-conn{color:var(--red); font-weight:700}
.team-lane.team-reset .team-rail{animation:team-reset .7s ease-out}
@keyframes team-reset{0%{background:var(--red)} 100%{background:var(--paper-3)}}
.team-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; font-weight:800}
.team-head-name{font-size:calc(18px * var(--proj))}
.team-dots{display:inline-flex; gap:4px; flex-wrap:wrap}
.team-dots i{width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); display:inline-block}
.team-dots i.on{background:var(--navy); border-color:var(--navy)}
.team-streak{font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.team-tiles-h{font-weight:700; margin:6px 0 8px; font-size:14px; color:var(--ink-soft)}
.team-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.team-tile{min-height:56px; border:2px solid var(--ink); border-radius:12px; background:var(--paper); color:var(--ink); padding:10px 12px;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer; font:inherit; min-width:0; text-align:left}
.team-tile:hover{border-color:var(--navy)}
.team-tile[aria-pressed="true"]{border-color:var(--navy); background:color-mix(in srgb,var(--navy) 12%,var(--paper)); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 25%,transparent)}
.team-tile-shape{font:700 20px/1.2 ui-monospace,Menlo,monospace; letter-spacing:.16em; white-space:nowrap; max-width:100%; overflow:hidden}
.team-tile-shape b{color:var(--navy)}
.team-tile-len{font-size:12px; color:var(--ink-soft)}
.team-answer{margin-top:14px}
.team-review .review-wrong{margin:6px 0; color:var(--ink-soft)}
.team-review .review-wrong b{color:var(--red)}
.team-results .team-win-icon{font-size:clamp(56px,9vw,110px); line-height:1.1}
.team-win-members{font-size:clamp(16px,2vw,22px); color:var(--ink-soft); margin-bottom:10px; overflow-wrap:anywhere}
.team-missed{max-width:720px; margin:22px auto 0}
.team-missed h3{font:800 16px/1.4 var(--jp); border-bottom:2px solid var(--ink); padding:6px 0; margin:0}
.team-missed-row{display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.team-missed-a{font-weight:800; color:var(--navy)}
.team-missed-n{color:var(--red); font-variant-numeric:tabular-nums}
@media(max-width:700px){ .team-lane{grid-template-columns:96px minmax(0,1fr) 44px; font-size:13px; gap:6px} .team-lane-conn{grid-column:1/-1; margin-top:-6px} }
@media(prefers-reduced-motion:reduce){ .team-lane.team-reset .team-rail{animation:none} .team-rail i{transition:none} }

/* ═══════════════════════════════════════════════════════════════
   TARGETLET の着せ替え（ここから下が GRAMMARLET との違い）
   2026-09-26 指定のデザイン（見本 docs/design/Targetlet_light.png・Targetlet_dark.png）
     明 = 白い面に青と赤の差し色・四隅の鉤・細い斜線・点の格子・薄い「1900」
     暗 = 紺の夜に水色と桃色の光・方眼
   🚨 見た目だけ変える。app.js・index.html の骨組みには触らない。
      モードの絵・飾りの英字・「1900」も CSS の中だけで描く（アイコンは mask の線画。形は lucide ISC を基にした）。
   🚨 飾りは全部 pointer-events:none。390px で横スクロールを出さない（右へはみ出す飾りは広い画面だけ）。
   🚨 外部通信ゼロのまま（書体は端末にある物・絵は data: URI）。
   ═══════════════════════════════════════════════════════════════ */
html{overflow-x:clip}
:root{
  --disp:"Avenir Next","Helvetica Neue","Segoe UI","Hiragino Sans",Arial,sans-serif;
  --en:"Avenir Next","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --paper:#F3F6FA;
  --paper-2:#FFFFFF;
  --paper-3:#E2E9F3;
  --ink:#0F1E3C;
  --ink-soft:#5A6782;
  --rule:#D6E0ED;
  --rule-strong:#9FB0C8;
  --red:#E3142D;
  --navy:#1B6FE8;
  --gold:#F2B705;
  --green:#1F9D6B;
  --acc:#1B6FE8;
  --acc-2:#4AA3FF;
  --hot:#E3142D;
  --on-acc:#FFFFFF;
  --panel:rgba(255,255,255,.86);
  --panel-line:#D3DFEF;
  --panel-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 22px 40px -30px rgba(18,70,150,.5);
  --card-shadow:0 14px 28px -24px rgba(18,70,150,.55);
  --card-shadow-hover:0 20px 34px -22px rgba(27,111,232,.55), 0 0 0 3px rgba(27,111,232,.08);
  --card-border-image:none;
  --card-radius:4px;
  --glow:rgba(27,111,232,.45);
  --glow-soft:rgba(27,111,232,.12);
  --hot-glow:rgba(227,20,45,.3);
  --en-label:#6B7B98;
  --ds:#465470;
  --icon:#12244A;
  --sub:#1D3E78;
  --foot:#1D4C9A;
  --chip-line:rgba(27,111,232,.55);
  --chip-bg:rgba(255,255,255,.7);
  --badge-bg:rgba(255,255,255,.78);
  --badge-shadow:0 0 0 6px rgba(27,111,232,.06), 0 12px 26px -10px rgba(27,111,232,.45);
  --tag-bg:#1B6FE8;
  --tag-fg:#FFFFFF;
  --tag-line:#1B6FE8;
  --bar-glow:none;
  --score-glow:none;
  --code-bg:linear-gradient(135deg,#2380F5,#0F4DC2);
  --code-fg:#FFFFFF;
  --code-line:transparent;
  --code-shadow:0 10px 0 #E3142D, 0 28px 40px -20px rgba(27,111,232,.6);
  --code-ts:none;
  --tile-hover:#F1F7FF;
  --ghost-hover:rgba(27,111,232,.08);
  --let-bg:linear-gradient(180deg,#F0283F,#C90E23);
  --let-fg:#FFFFFF;
  --let-shadow:0 8px 16px -8px rgba(227,20,45,.6), inset 0 1px 0 rgba(255,255,255,.25);
  --let-ts:none;
  --rule-filter:none;
  --wm-fill:transparent;
  --wm-line:rgba(28,70,140,.10);
  --tag-tr:"STUDY\A SMARTER\A GO FURTHER";
  --tag-br:"WORDS\A CONNECT\A PEOPLE";
  --shadow:0 22px 40px -30px rgba(18,70,150,.5);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190' fill='none'%3E%3Cpath d='M0 92 92 0h16L0 108z' fill='%231B6FE8' fill-opacity='.9'/%3E%3Cpath d='M0 150 150 0' stroke='%231B6FE8' stroke-opacity='.25' stroke-width='1.2'/%3E%3Cpath d='M40 190 230 0' stroke='%239FB3D1' stroke-opacity='.45'/%3E%3C/svg%3E") left calc(min(0px, 50vw - 580px)) top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='14'%3E%3Cpath d='M0 0h24v3H0z' fill='%23E3142D'/%3E%3Cpath d='M72 0h34l-12 12H60z' fill='%231B6FE8' fill-opacity='.85'/%3E%3C/svg%3E") 55% 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='380' fill='none'%3E%3Cpath d='M190 370 300 270' stroke='%23E3142D' stroke-opacity='.8' stroke-width='1.4'/%3E%3Cpath d='M40 380 300 120' stroke='%239FB3D1' stroke-opacity='.45'/%3E%3Cpath d='M120 380 300 200' stroke='%239FB3D1' stroke-opacity='.45'/%3E%3C/svg%3E") right calc(min(0px, 50vw - 580px)) top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92' fill='%239FB3D1' fill-opacity='.6'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='4' cy='16' r='1.5'/%3E%3Ccircle cx='4' cy='28' r='1.5'/%3E%3Ccircle cx='4' cy='40' r='1.5'/%3E%3Ccircle cx='4' cy='52' r='1.5'/%3E%3Ccircle cx='4' cy='64' r='1.5'/%3E%3Ccircle cx='4' cy='76' r='1.5'/%3E%3Ccircle cx='4' cy='88' r='1.5'/%3E%3Ccircle cx='16' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='28' r='1.5'/%3E%3Ccircle cx='16' cy='40' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.5'/%3E%3Ccircle cx='16' cy='64' r='1.5'/%3E%3Ccircle cx='16' cy='76' r='1.5'/%3E%3Ccircle cx='16' cy='88' r='1.5'/%3E%3Ccircle cx='28' cy='4' r='1.5'/%3E%3Ccircle cx='28' cy='16' r='1.5'/%3E%3Ccircle cx='28' cy='28' r='1.5'/%3E%3Ccircle cx='28' cy='40' r='1.5'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3Ccircle cx='28' cy='64' r='1.5'/%3E%3Ccircle cx='28' cy='76' r='1.5'/%3E%3Ccircle cx='28' cy='88' r='1.5'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='16' r='1.5'/%3E%3Ccircle cx='40' cy='28' r='1.5'/%3E%3Ccircle cx='40' cy='40' r='1.5'/%3E%3Ccircle cx='40' cy='52' r='1.5'/%3E%3Ccircle cx='40' cy='64' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3Ccircle cx='40' cy='88' r='1.5'/%3E%3C/svg%3E") right calc(22px + min(0px, 50vw - 580px)) top 150px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='80' fill='%239FB3D1' fill-opacity='.6'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='4' cy='16' r='1.5'/%3E%3Ccircle cx='4' cy='28' r='1.5'/%3E%3Ccircle cx='4' cy='40' r='1.5'/%3E%3Ccircle cx='4' cy='52' r='1.5'/%3E%3Ccircle cx='4' cy='64' r='1.5'/%3E%3Ccircle cx='4' cy='76' r='1.5'/%3E%3Ccircle cx='16' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='28' r='1.5'/%3E%3Ccircle cx='16' cy='40' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.5'/%3E%3Ccircle cx='16' cy='64' r='1.5'/%3E%3Ccircle cx='16' cy='76' r='1.5'/%3E%3Ccircle cx='28' cy='4' r='1.5'/%3E%3Ccircle cx='28' cy='16' r='1.5'/%3E%3Ccircle cx='28' cy='28' r='1.5'/%3E%3Ccircle cx='28' cy='40' r='1.5'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3Ccircle cx='28' cy='64' r='1.5'/%3E%3Ccircle cx='28' cy='76' r='1.5'/%3E%3C/svg%3E") left calc(14px + min(0px, 50vw - 580px)) top 42% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='120' fill='none'%3E%3Cpath d='M0 62 62 0h16L0 78z' fill='%231B6FE8' fill-opacity='.85'/%3E%3Cpath d='M0 120 120 0' stroke='%239FB3D1' stroke-opacity='.45'/%3E%3C/svg%3E") left calc(min(0px, 50vw - 580px)) bottom 26% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' fill='none'%3E%3Cpath d='M110 220 320 10' stroke='%239FB3D1' stroke-opacity='.45'/%3E%3Cpath d='M288 212 314 188' stroke='%231B6FE8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right calc(min(0px, 50vw - 580px)) bottom 0 no-repeat,
    linear-gradient(118deg, transparent 0 56%, rgba(255,255,255,.65) 56% 61%, transparent 61%),
    linear-gradient(118deg, transparent 0 31%, rgba(255,255,255,.55) 31% 33%, transparent 33%),
    linear-gradient(62deg, transparent 0 76%, rgba(190,208,232,.45) 76% 76.12%, transparent 76.12%),
    linear-gradient(180deg,#F6F8FC 0%,#EDF2F8 100%);
}
:root[data-theme="dark"]{
  --paper:#060F1D;
  --paper-2:#0A182C;
  --paper-3:#15284A;
  --ink:#EEF5FF;
  --ink-soft:#A3B6D1;
  --rule:#1C3150;
  --rule-strong:#4D6B96;
  --red:#FF3F74;
  --navy:#3DD6FF;
  --gold:#FFD447;
  --green:#4FD69C;
  --acc:#3DD6FF;
  --acc-2:#8AE9FF;
  --hot:#FF3F74;
  --on-acc:#031423;
  --panel:rgba(9,24,46,.82);
  --panel-line:rgba(61,214,255,.55);
  --panel-shadow:0 0 0 1px rgba(61,214,255,.10), 0 0 26px -6px rgba(61,214,255,.40), inset 0 0 40px rgba(61,214,255,.05);
  --card-shadow:0 0 18px -6px rgba(61,214,255,.30), inset 0 0 26px rgba(61,214,255,.04);
  --card-shadow-hover:0 0 26px -4px rgba(61,214,255,.55), 0 0 18px -6px rgba(255,63,116,.45), inset 0 0 26px rgba(61,214,255,.06);
  --card-border-image:linear-gradient(35deg,#FF3F74 0%,#C04DFF 38%,#3DD6FF 72%) 1;
  --card-radius:0;
  --glow:rgba(61,214,255,.55);
  --glow-soft:rgba(61,214,255,.16);
  --hot-glow:rgba(255,63,116,.5);
  --en-label:#5FD9FF;
  --ds:#D9E4F4;
  --icon:#5FDCFF;
  --sub:#62D8FF;
  --foot:#62D8FF;
  --chip-line:rgba(61,214,255,.8);
  --chip-bg:rgba(61,214,255,.04);
  --badge-bg:rgba(61,214,255,.05);
  --badge-shadow:0 0 18px rgba(61,214,255,.5), inset 0 0 16px rgba(61,214,255,.25);
  --tag-bg:rgba(61,214,255,.10);
  --tag-fg:#3DD6FF;
  --tag-line:rgba(61,214,255,.8);
  --bar-glow:0 0 10px rgba(61,214,255,.8);
  --score-glow:0 0 22px rgba(61,214,255,.55);
  --code-bg:rgba(61,214,255,.07);
  --code-fg:#3DD6FF;
  --code-line:#3DD6FF;
  --code-shadow:0 10px 0 #FF3F74, 0 0 34px rgba(61,214,255,.35), inset 0 0 30px rgba(61,214,255,.12);
  --code-ts:0 0 18px rgba(61,214,255,.75);
  --tile-hover:rgba(61,214,255,.08);
  --ghost-hover:rgba(61,214,255,.10);
  --let-bg:rgba(255,63,116,.12);
  --let-fg:#FFEAF0;
  --let-shadow:0 0 0 2px #FF3F74, 0 0 16px rgba(255,63,116,.55), inset 0 0 12px rgba(255,63,116,.35);
  --let-ts:0 0 10px rgba(255,63,116,.85);
  --rule-filter:drop-shadow(0 0 5px rgba(61,214,255,.8));
  --wm-fill:rgba(30,70,130,.10);
  --wm-line:rgba(61,214,255,.10);
  --tag-tr:"LEARN\A FASTER\A GO FURTHER";
  --tag-br:"SMALL\A STEPS\A BIG\A CHANGE";
  --shadow:0 0 26px -6px rgba(61,214,255,.40);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190' fill='none'%3E%3Cpath d='M0 100 100 0' stroke='%233DD6FF' stroke-width='7.0' stroke-opacity='.18'/%3E%3Cpath d='M0 100 100 0' stroke='%233DD6FF' stroke-width='2'/%3E%3Cpath d='M0 116 116 0' stroke='%233DD6FF' stroke-opacity='.45' stroke-width='1'/%3E%3Cpath d='M0 150 150 0' stroke='%23FF3F74' stroke-opacity='.75' stroke-width='1.2'/%3E%3Cpath d='M40 190 230 0' stroke='%232A5C95' stroke-opacity='.5'/%3E%3C/svg%3E") left calc(min(0px, 50vw - 580px)) top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='14'%3E%3Cpath d='M0 0h24v3H0z' fill='%23FF3F74'/%3E%3Cpath d='M72 0h34l-12 12H60z' fill='%233DD6FF' fill-opacity='.85'/%3E%3C/svg%3E") 55% 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='380' fill='none'%3E%3Cpath d='M190 370 300 270' stroke='%23FF3F74' stroke-width='4.8999999999999995' stroke-opacity='.18'/%3E%3Cpath d='M190 370 300 270' stroke='%23FF3F74' stroke-opacity='.8' stroke-width='1.4'/%3E%3Cpath d='M40 380 300 120' stroke='%232A5C95' stroke-opacity='.5'/%3E%3Cpath d='M120 380 300 200' stroke='%232A5C95' stroke-opacity='.5'/%3E%3C/svg%3E") right calc(min(0px, 50vw - 580px)) top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92' fill='%233DD6FF' fill-opacity='.22'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='4' cy='16' r='1.5'/%3E%3Ccircle cx='4' cy='28' r='1.5'/%3E%3Ccircle cx='4' cy='40' r='1.5'/%3E%3Ccircle cx='4' cy='52' r='1.5'/%3E%3Ccircle cx='4' cy='64' r='1.5'/%3E%3Ccircle cx='4' cy='76' r='1.5'/%3E%3Ccircle cx='4' cy='88' r='1.5'/%3E%3Ccircle cx='16' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='28' r='1.5'/%3E%3Ccircle cx='16' cy='40' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.5'/%3E%3Ccircle cx='16' cy='64' r='1.5'/%3E%3Ccircle cx='16' cy='76' r='1.5'/%3E%3Ccircle cx='16' cy='88' r='1.5'/%3E%3Ccircle cx='28' cy='4' r='1.5'/%3E%3Ccircle cx='28' cy='16' r='1.5'/%3E%3Ccircle cx='28' cy='28' r='1.5'/%3E%3Ccircle cx='28' cy='40' r='1.5'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3Ccircle cx='28' cy='64' r='1.5'/%3E%3Ccircle cx='28' cy='76' r='1.5'/%3E%3Ccircle cx='28' cy='88' r='1.5'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='16' r='1.5'/%3E%3Ccircle cx='40' cy='28' r='1.5'/%3E%3Ccircle cx='40' cy='40' r='1.5'/%3E%3Ccircle cx='40' cy='52' r='1.5'/%3E%3Ccircle cx='40' cy='64' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3Ccircle cx='40' cy='88' r='1.5'/%3E%3C/svg%3E") right calc(22px + min(0px, 50vw - 580px)) top 150px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='80' fill='%233DD6FF' fill-opacity='.22'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='4' cy='16' r='1.5'/%3E%3Ccircle cx='4' cy='28' r='1.5'/%3E%3Ccircle cx='4' cy='40' r='1.5'/%3E%3Ccircle cx='4' cy='52' r='1.5'/%3E%3Ccircle cx='4' cy='64' r='1.5'/%3E%3Ccircle cx='4' cy='76' r='1.5'/%3E%3Ccircle cx='16' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='28' r='1.5'/%3E%3Ccircle cx='16' cy='40' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.5'/%3E%3Ccircle cx='16' cy='64' r='1.5'/%3E%3Ccircle cx='16' cy='76' r='1.5'/%3E%3Ccircle cx='28' cy='4' r='1.5'/%3E%3Ccircle cx='28' cy='16' r='1.5'/%3E%3Ccircle cx='28' cy='28' r='1.5'/%3E%3Ccircle cx='28' cy='40' r='1.5'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3Ccircle cx='28' cy='64' r='1.5'/%3E%3Ccircle cx='28' cy='76' r='1.5'/%3E%3C/svg%3E") left calc(14px + min(0px, 50vw - 580px)) top 42% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='120' fill='none'%3E%3Cpath d='M0 70 70 0' stroke='%233DD6FF' stroke-width='7.0' stroke-opacity='.18'/%3E%3Cpath d='M0 70 70 0' stroke='%233DD6FF' stroke-width='2'/%3E%3Cpath d='M0 120 120 0' stroke='%232A5C95' stroke-opacity='.5'/%3E%3C/svg%3E") left calc(min(0px, 50vw - 580px)) bottom 26% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' fill='none'%3E%3Cpath d='M110 220 320 10' stroke='%232A5C95' stroke-opacity='.5'/%3E%3Cpath d='M288 212 314 188' stroke='%233DD6FF' stroke-width='10.5' stroke-opacity='.18'/%3E%3Cpath d='M288 212 314 188' stroke='%233DD6FF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right calc(min(0px, 50vw - 580px)) bottom 0 no-repeat,
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(35,120,220,.28), transparent 70%),
    linear-gradient(rgba(70,160,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(70,160,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(180deg,#07121F 0%,#040B16 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --paper:#060F1D;
  --paper-2:#0A182C;
  --paper-3:#15284A;
  --ink:#EEF5FF;
  --ink-soft:#A3B6D1;
  --rule:#1C3150;
  --rule-strong:#4D6B96;
  --red:#FF3F74;
  --navy:#3DD6FF;
  --gold:#FFD447;
  --green:#4FD69C;
  --acc:#3DD6FF;
  --acc-2:#8AE9FF;
  --hot:#FF3F74;
  --on-acc:#031423;
  --panel:rgba(9,24,46,.82);
  --panel-line:rgba(61,214,255,.55);
  --panel-shadow:0 0 0 1px rgba(61,214,255,.10), 0 0 26px -6px rgba(61,214,255,.40), inset 0 0 40px rgba(61,214,255,.05);
  --card-shadow:0 0 18px -6px rgba(61,214,255,.30), inset 0 0 26px rgba(61,214,255,.04);
  --card-shadow-hover:0 0 26px -4px rgba(61,214,255,.55), 0 0 18px -6px rgba(255,63,116,.45), inset 0 0 26px rgba(61,214,255,.06);
  --card-border-image:linear-gradient(35deg,#FF3F74 0%,#C04DFF 38%,#3DD6FF 72%) 1;
  --card-radius:0;
  --glow:rgba(61,214,255,.55);
  --glow-soft:rgba(61,214,255,.16);
  --hot-glow:rgba(255,63,116,.5);
  --en-label:#5FD9FF;
  --ds:#D9E4F4;
  --icon:#5FDCFF;
  --sub:#62D8FF;
  --foot:#62D8FF;
  --chip-line:rgba(61,214,255,.8);
  --chip-bg:rgba(61,214,255,.04);
  --badge-bg:rgba(61,214,255,.05);
  --badge-shadow:0 0 18px rgba(61,214,255,.5), inset 0 0 16px rgba(61,214,255,.25);
  --tag-bg:rgba(61,214,255,.10);
  --tag-fg:#3DD6FF;
  --tag-line:rgba(61,214,255,.8);
  --bar-glow:0 0 10px rgba(61,214,255,.8);
  --score-glow:0 0 22px rgba(61,214,255,.55);
  --code-bg:rgba(61,214,255,.07);
  --code-fg:#3DD6FF;
  --code-line:#3DD6FF;
  --code-shadow:0 10px 0 #FF3F74, 0 0 34px rgba(61,214,255,.35), inset 0 0 30px rgba(61,214,255,.12);
  --code-ts:0 0 18px rgba(61,214,255,.75);
  --tile-hover:rgba(61,214,255,.08);
  --ghost-hover:rgba(61,214,255,.10);
  --let-bg:rgba(255,63,116,.12);
  --let-fg:#FFEAF0;
  --let-shadow:0 0 0 2px #FF3F74, 0 0 16px rgba(255,63,116,.55), inset 0 0 12px rgba(255,63,116,.35);
  --let-ts:0 0 10px rgba(255,63,116,.85);
  --rule-filter:drop-shadow(0 0 5px rgba(61,214,255,.8));
  --wm-fill:rgba(30,70,130,.10);
  --wm-line:rgba(61,214,255,.10);
  --tag-tr:"LEARN\A FASTER\A GO FURTHER";
  --tag-br:"SMALL\A STEPS\A BIG\A CHANGE";
  --shadow:0 0 26px -6px rgba(61,214,255,.40);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190' fill='none'%3E%3Cpath d='M0 100 100 0' stroke='%233DD6FF' stroke-width='7.0' stroke-opacity='.18'/%3E%3Cpath d='M0 100 100 0' stroke='%233DD6FF' stroke-width='2'/%3E%3Cpath d='M0 116 116 0' stroke='%233DD6FF' stroke-opacity='.45' stroke-width='1'/%3E%3Cpath d='M0 150 150 0' stroke='%23FF3F74' stroke-opacity='.75' stroke-width='1.2'/%3E%3Cpath d='M40 190 230 0' stroke='%232A5C95' stroke-opacity='.5'/%3E%3C/svg%3E") left calc(min(0px, 50vw - 580px)) top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='14'%3E%3Cpath d='M0 0h24v3H0z' fill='%23FF3F74'/%3E%3Cpath d='M72 0h34l-12 12H60z' fill='%233DD6FF' fill-opacity='.85'/%3E%3C/svg%3E") 55% 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='380' fill='none'%3E%3Cpath d='M190 370 300 270' stroke='%23FF3F74' stroke-width='4.8999999999999995' stroke-opacity='.18'/%3E%3Cpath d='M190 370 300 270' stroke='%23FF3F74' stroke-opacity='.8' stroke-width='1.4'/%3E%3Cpath d='M40 380 300 120' stroke='%232A5C95' stroke-opacity='.5'/%3E%3Cpath d='M120 380 300 200' stroke='%232A5C95' stroke-opacity='.5'/%3E%3C/svg%3E") right calc(min(0px, 50vw - 580px)) top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92' fill='%233DD6FF' fill-opacity='.22'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='4' cy='16' r='1.5'/%3E%3Ccircle cx='4' cy='28' r='1.5'/%3E%3Ccircle cx='4' cy='40' r='1.5'/%3E%3Ccircle cx='4' cy='52' r='1.5'/%3E%3Ccircle cx='4' cy='64' r='1.5'/%3E%3Ccircle cx='4' cy='76' r='1.5'/%3E%3Ccircle cx='4' cy='88' r='1.5'/%3E%3Ccircle cx='16' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='28' r='1.5'/%3E%3Ccircle cx='16' cy='40' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.5'/%3E%3Ccircle cx='16' cy='64' r='1.5'/%3E%3Ccircle cx='16' cy='76' r='1.5'/%3E%3Ccircle cx='16' cy='88' r='1.5'/%3E%3Ccircle cx='28' cy='4' r='1.5'/%3E%3Ccircle cx='28' cy='16' r='1.5'/%3E%3Ccircle cx='28' cy='28' r='1.5'/%3E%3Ccircle cx='28' cy='40' r='1.5'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3Ccircle cx='28' cy='64' r='1.5'/%3E%3Ccircle cx='28' cy='76' r='1.5'/%3E%3Ccircle cx='28' cy='88' r='1.5'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='16' r='1.5'/%3E%3Ccircle cx='40' cy='28' r='1.5'/%3E%3Ccircle cx='40' cy='40' r='1.5'/%3E%3Ccircle cx='40' cy='52' r='1.5'/%3E%3Ccircle cx='40' cy='64' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3Ccircle cx='40' cy='88' r='1.5'/%3E%3C/svg%3E") right calc(22px + min(0px, 50vw - 580px)) top 150px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='80' fill='%233DD6FF' fill-opacity='.22'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='4' cy='16' r='1.5'/%3E%3Ccircle cx='4' cy='28' r='1.5'/%3E%3Ccircle cx='4' cy='40' r='1.5'/%3E%3Ccircle cx='4' cy='52' r='1.5'/%3E%3Ccircle cx='4' cy='64' r='1.5'/%3E%3Ccircle cx='4' cy='76' r='1.5'/%3E%3Ccircle cx='16' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='28' r='1.5'/%3E%3Ccircle cx='16' cy='40' r='1.5'/%3E%3Ccircle cx='16' cy='52' r='1.5'/%3E%3Ccircle cx='16' cy='64' r='1.5'/%3E%3Ccircle cx='16' cy='76' r='1.5'/%3E%3Ccircle cx='28' cy='4' r='1.5'/%3E%3Ccircle cx='28' cy='16' r='1.5'/%3E%3Ccircle cx='28' cy='28' r='1.5'/%3E%3Ccircle cx='28' cy='40' r='1.5'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3Ccircle cx='28' cy='64' r='1.5'/%3E%3Ccircle cx='28' cy='76' r='1.5'/%3E%3C/svg%3E") left calc(14px + min(0px, 50vw - 580px)) top 42% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='120' fill='none'%3E%3Cpath d='M0 70 70 0' stroke='%233DD6FF' stroke-width='7.0' stroke-opacity='.18'/%3E%3Cpath d='M0 70 70 0' stroke='%233DD6FF' stroke-width='2'/%3E%3Cpath d='M0 120 120 0' stroke='%232A5C95' stroke-opacity='.5'/%3E%3C/svg%3E") left calc(min(0px, 50vw - 580px)) bottom 26% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' fill='none'%3E%3Cpath d='M110 220 320 10' stroke='%232A5C95' stroke-opacity='.5'/%3E%3Cpath d='M288 212 314 188' stroke='%233DD6FF' stroke-width='10.5' stroke-opacity='.18'/%3E%3Cpath d='M288 212 314 188' stroke='%233DD6FF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right calc(min(0px, 50vw - 580px)) bottom 0 no-repeat,
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(35,120,220,.28), transparent 70%),
    linear-gradient(rgba(70,160,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(70,160,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(180deg,#07121F 0%,#040B16 100%);
  }
}

/* ── 地（固定の飾り層。操作は奪わない） ── */
body{background:var(--paper); background-image:none}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--deco)}
.sheet{position:relative}
.sheet::after{
  content:"1900"; content:"1900" / ""; position:absolute; z-index:-1; left:-84px; bottom:-14px; pointer-events:none;
  font:800 200px/.8 var(--disp); letter-spacing:-.02em; color:var(--wm-fill); -webkit-text-stroke:1.5px var(--wm-line);
}
@media (max-width:640px){ .sheet::after{font-size:120px; left:-12px; bottom:-6px} }

/* ── 題字 ── */
header.masthead{padding:30px 0 24px; color:var(--ink); isolation:isolate}
header.masthead::before{content:none}
.wordmark{
  font-family:var(--disp); font-weight:800; font-size:calc(36px * var(--proj)); letter-spacing:.02em;
  color:var(--ink); text-transform:uppercase; text-shadow:none;
}
.wordmark .let{
  color:var(--let-fg); background:var(--let-bg); transform:none; border-radius:5px;
  padding:3px 11px 4px; margin-left:8px; box-shadow:var(--let-shadow); text-shadow:var(--let-ts);
}
.wordmark a:focus-visible{outline-color:var(--acc)}
.sub{color:var(--sub); letter-spacing:.06em; font-weight:600}

/* 右上の小さな英字（広い画面だけ） */
@media (min-width:1280px){
  header.masthead::after,footer.colophon::after{
    position:absolute; right:calc(50% - 50vw + 26px); pointer-events:none; white-space:pre;
    font:700 9px/1.65 var(--disp); letter-spacing:.24em; color:var(--ink-soft); opacity:.85;
    padding-bottom:8px; background:linear-gradient(var(--hot),var(--hot)) left bottom/18px 2px no-repeat;
  }
  header.masthead::after{content:var(--tag-tr); content:var(--tag-tr) / ""; top:24px}
  footer.colophon::after{content:var(--tag-br); content:var(--tag-br) / ""; position:fixed; right:26px; bottom:34px; background:none}
}

/* ── 操作UI（小さく・先生の顔にしない） ── */
.chip{border-radius:999px}
.masthead .chip{
  color:var(--acc); border:1.5px solid var(--chip-line); background:var(--chip-bg);
  padding:4px 12px; font-weight:700; font-size:calc(12px * var(--proj)); letter-spacing:.05em;
}
.masthead .chip:hover{color:var(--acc); border-color:var(--acc); box-shadow:0 0 0 3px var(--glow-soft)}
.masthead .chip[aria-pressed="true"]{background:var(--acc); color:var(--on-acc); border-color:var(--acc); box-shadow:0 4px 12px -4px var(--glow)}
/* 音の丸ボタン: 絵文字（🔈🔉🔊🔇）は DOM に残したまま見せず、線画で出す（鳴る＝スピーカー／消音＝×）。
   音量の段階はつまみと数字が示す。押した時の動きは app.js のまま */
.masthead #btnSound{
  --ico-vol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z' fill='black'/%3E%3Cpath d='M16 9a5 5 0 0 1 0 6' stroke-width='2'/%3E%3Cpath d='M19.364 18.364a9 9 0 0 0 0-12.728' stroke-width='2'/%3E%3C/svg%3E"); --ico-mute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z' fill='black'/%3E%3Cpath d='M22 9l-6 6M16 9l6 6' stroke-width='2'/%3E%3C/svg%3E");
  position:relative; width:34px; height:34px; padding:0; overflow:hidden;
  font-size:0; color:transparent; text-shadow:none;
}
.masthead #btnSound::before{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; pointer-events:none;
  background:var(--acc); -webkit-mask:var(--ico-mute) center/contain no-repeat; mask:var(--ico-mute) center/contain no-repeat;
}
.masthead #btnSound[aria-pressed="true"]::before{background:var(--on-acc); -webkit-mask-image:var(--ico-vol); mask-image:var(--ico-vol)}
.masthead #btnSound.needs-tap{
  background:var(--red); border-color:var(--red);
  animation:tap-me 1s ease-in-out infinite;
}
.masthead #btnSound.needs-tap::before{background:#fff}
@media(prefers-reduced-motion:reduce){.masthead #btnSound.needs-tap{animation:none}}
.volbox{gap:6px}
.masthead .vol{accent-color:var(--acc)}
.masthead .volnum{color:var(--ink-soft); font:600 calc(11px * var(--proj))/1 var(--disp)}

/* ── 題字の下の線: 青い線が本文の右端で赤く跳ね上がる（跳ね上がりは余白に置き、見出しのボタンに重ねない） ── */
.rule-double{
  position:relative; height:3px; margin:0 calc(50% - 50vw) 28px; filter:var(--rule-filter);
  background:
    linear-gradient(90deg, var(--acc) 0, var(--acc-2) calc(50% + 502px), transparent 0) 0 0/100% 3px no-repeat,
    linear-gradient(90deg, transparent calc(50% + 506px), var(--rule) 0) 0 2px/100% 1px no-repeat;
}
.rule-double::after{
  content:""; position:absolute; left:calc(50% + 502px); bottom:0; width:96px; height:2px; pointer-events:none;
  background:var(--hot); transform-origin:0 100%; transform:rotate(-42deg);
}
@media (max-width:1160px){
  .rule-double{background:linear-gradient(90deg, var(--acc), var(--acc-2))}
  .rule-double::after{display:none}
}

/* ── 面（setcard・カード・結果）: 四隅の鉤 ── */
.setcard,.card{
  border:1px solid var(--panel-line); border-radius:6px; box-shadow:var(--panel-shadow);
  background:
    linear-gradient(var(--acc),var(--acc)) left 0 top 18px/3px 44px no-repeat,
    linear-gradient(var(--hot),var(--hot)) left bottom/3px 30px no-repeat,
    linear-gradient(var(--hot),var(--hot)) left bottom/30px 3px no-repeat,
    linear-gradient(var(--hot),var(--hot)) right center/3px 56px no-repeat,
    var(--panel);
}
.setcard{padding:24px 250px 24px 34px; margin-bottom:22px}
.setcard h2{font-size:calc(25px * var(--proj)); color:var(--ink); letter-spacing:.01em; margin:0 0 4px}
.setmeta{font-family:var(--jp); font-size:calc(13px * var(--proj)); color:var(--ink-soft); letter-spacing:.04em}
.setcard .cfgrow{gap:10px; margin-top:12px}
/* 丸い「書いて覚える」 */
.setcard::before{
  content:"書いて\A 覚える\A ›"; white-space:pre; position:absolute; right:118px; top:50%; left:auto;
  width:100px; height:100px; margin-top:-50px; border-radius:50%; transform:rotate(-10deg); opacity:1;
  display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none;
  font:800 16px/1.25 var(--jp); color:var(--ink); letter-spacing:.04em;
  background:var(--badge-bg); border:2px solid var(--acc); box-shadow:var(--badge-shadow);
}
/* 右上の小さな英字 */
.setcard::after{
  content:"VOCABULARY\A BUILDS\A YOUR\A TOMORROW"; content:"VOCABULARY\A BUILDS\A YOUR\A TOMORROW" / "";
  position:absolute; right:20px; top:20px; white-space:pre; pointer-events:none;
  font:700 8.5px/1.7 var(--disp); letter-spacing:.2em; color:var(--ink-soft);
  padding-bottom:8px; background:linear-gradient(var(--acc),var(--acc)) left bottom/16px 2px no-repeat;
}
@media (max-width:900px){
  .setcard{padding-right:150px}
  .setcard::before{right:24px}
  .setcard::after{display:none}
}
@media (max-width:560px){
  .setcard{padding:84px 20px 20px 24px}
  .setcard::before{width:66px; height:66px; margin-top:0; top:12px; right:14px; font-size:11.5px}
}

/* Section selection belongs to the study set and to each Live lobby. */
.section-picker{margin-top:14px; max-width:640px; min-width:0; display:grid; gap:7px}
.section-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.section-toolbar .cfgl{width:auto; flex:1 1 170px; font-weight:800; color:var(--ink); letter-spacing:.03em; text-transform:none}
.section-toolbar .chip{padding:5px 11px; font-size:12px}
.section-group{display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:8px}
.section-group-label{font:800 12px var(--disp); letter-spacing:.09em; color:var(--ink-soft)}
.section-choices{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; min-width:0}
.section-choices .chip{padding:6px 0; min-width:0; width:100%; font:800 13px var(--disp); line-height:1.35}
.section-choices .chip[aria-pressed="true"]{background:var(--acc,var(--navy)); color:var(--on-acc,#fff); border-color:var(--acc,var(--navy))}
.section-choices .chip:focus-visible,.section-toolbar .chip:focus-visible{outline:3px solid var(--red); outline-offset:2px}
@media(max-width:480px){.section-group{grid-template-columns:44px minmax(0,1fr);gap:5px}.section-choices{gap:4px}}
.warn{transform:none; border-radius:999px; color:#fff}
.warn>*{transform:none}

/* ── 6つのモード: 1枚ずつ離したカード ── */
.modes{gap:14px; background:none; border:0; border-radius:0; overflow:visible}
.mode,.mode:hover{
  background:
    linear-gradient(var(--hot),var(--hot)) left top/26px 3px no-repeat,
    linear-gradient(var(--hot),var(--hot)) left top/3px 26px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right bottom/26px 3px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right bottom/3px 26px no-repeat,
    linear-gradient(225deg, var(--acc) 0 7px, transparent 7px) right top/16px 16px no-repeat,
    var(--panel);
}
.mode{
  position:relative; min-height:140px; padding:20px 22px 18px; gap:2px; color:var(--ink);
  border:1px solid var(--panel-line); border-image:var(--card-border-image); border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); transition:transform .14s, box-shadow .14s, border-color .14s;
}
.mode:hover{color:var(--ink); transform:translateY(-2px); border-color:var(--acc); box-shadow:var(--card-shadow-hover)}
.mode:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
.mode:disabled{opacity:.45; cursor:default; transform:none}
.mode .no,.mode:hover .no{font:800 calc(17px * var(--proj))/1.2 var(--disp); color:var(--hot); letter-spacing:.06em}
.mode .nm{font-size:calc(22px * var(--proj)); font-weight:800; color:var(--ink); line-height:1.3; margin-top:2px; font-feature-settings:"palt"; letter-spacing:.01em}
.mode .en,.mode:hover .en{font:700 calc(11px * var(--proj))/1.4 var(--disp); letter-spacing:.14em; color:var(--en-label); opacity:1}
.mode .ds,.mode:hover .ds{font-size:calc(12.5px * var(--proj)); color:var(--ds); opacity:1; padding-top:10px}
/* ホームの6枚だけ右に線画（Live の「先生／生徒」には付けない） */
#app > .modes > .mode .nm,#app > .modes > .mode .en{margin-right:62px}
#app > .modes > .mode::after{
  content:""; position:absolute; right:20px; top:34px; width:48px; height:48px; pointer-events:none;
  background:var(--icon); -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
}
#app > .modes > .mode:nth-child(1){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E")}
#app > .modes > .mode:nth-child(2){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21v-4.2C4.6 15.3 3.5 13 3.5 10.5 3.5 6 7.2 2.5 11.8 2.5c4.3 0 7.4 3 7.7 6.9l1.7 3.1c.2.4 0 .8-.4.8h-1.3v2.4c0 1.1-.9 2-2 2h-2V21'/%3E%3Cg transform='translate(6.4 4.3) scale(.43)' stroke-width='3.1'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z'/%3E%3Cpath d='M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4'/%3E%3C/g%3E%3C/svg%3E")}
#app > .modes > .mode:nth-child(3){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E")}
#app > .modes > .mode:nth-child(4){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='2.5' width='15' height='19' rx='2'/%3E%3Cpath d='M8 7.5h1M11.5 7.5h4.5M8 12h1M11.5 12h4.5M8 16.5h1M11.5 16.5h4.5'/%3E%3C/svg%3E")}
#app > .modes > .mode:nth-child(5){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
#app > .modes > .mode:nth-child(6){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
@media (max-width:520px){
  #app > .modes > .mode{min-height:118px}
  #app > .modes > .mode .nm,#app > .modes > .mode .en{margin-right:50px}
  #app > .modes > .mode::after{width:38px; height:38px; right:16px; top:30px}
}

.stage > .modes{margin-bottom:20px}

/* ── 演習面 ── */
.theme-tag{
  transform:none; border-radius:3px; padding:5px 14px 5px 16px;
  background:var(--tag-bg); color:var(--tag-fg); border:1px solid var(--tag-line);
  box-shadow:inset 3px 0 0 var(--hot); font-weight:700; letter-spacing:.08em;
}
.theme-tag>*{transform:none}
.progress{font-family:var(--disp)}
.bar{height:6px; border:0; border-radius:999px; background:var(--paper-3); overflow:hidden}
.bar i{background:linear-gradient(90deg, var(--acc), var(--acc-2)); box-shadow:var(--bar-glow)}

.btn{
  border-radius:999px; font-family:var(--jp); letter-spacing:.08em;
  background:linear-gradient(180deg, var(--acc-2), var(--acc)); color:var(--on-acc);
  box-shadow:0 8px 18px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 22px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:translateY(1px); box-shadow:0 4px 10px -6px var(--glow)}
.btn.ghost{background:transparent; color:var(--acc); box-shadow:inset 0 0 0 1.5px var(--acc)}
.btn.ghost:hover{background:var(--ghost-hover); color:var(--acc); box-shadow:inset 0 0 0 1.5px var(--acc); transform:none}

.cfgrow .chip{
  font-size:calc(14.5px * var(--proj)); padding:7px 22px; font-weight:700; letter-spacing:.04em;
  color:var(--acc); border:1.5px solid var(--chip-line); background:var(--chip-bg);
}
.cfgrow .chip:hover{color:var(--acc); border-color:var(--acc); box-shadow:0 0 0 3px var(--glow-soft)}
.cfgrow .chip[aria-pressed="true"]{
  background:linear-gradient(180deg, var(--acc-2), var(--acc)); color:var(--on-acc); border-color:transparent;
  box-shadow:0 6px 16px -6px var(--glow);
}

.card .face.en{font-family:var(--disp); font-weight:800; letter-spacing:.01em; font-size:calc(40px * var(--proj))}
.tile{border:1px solid var(--panel-line); border-radius:6px; background:var(--panel); box-shadow:var(--card-shadow)}
.tile.en{font-family:var(--disp); font-weight:800; font-size:calc(18px * var(--proj)); letter-spacing:.01em}
.tile:hover{background:var(--tile-hover); color:var(--ink); border-color:var(--acc); box-shadow:0 0 0 3px var(--glow-soft)}
.tile.sel{background:var(--gold); color:#15213D; border-color:var(--gold)}
.tile.miss{background:var(--red); color:#fff; border-color:var(--red)}

/* ── 結果・Live ── */
.score{color:var(--acc); font-weight:800; text-shadow:var(--score-glow)}
.review{border-top:2px solid var(--acc)}
.roomcode{
  transform:none; border-radius:10px; font-family:var(--disp);
  background:var(--code-bg); color:var(--code-fg); border:2px solid var(--code-line);
  box-shadow:var(--code-shadow); text-shadow:var(--code-ts);
}
.pchip{border-radius:999px; border:1px solid var(--panel-line); background:var(--panel)}
.jf{border-bottom-color:var(--acc)}
.jf:focus{border-bottom-color:var(--hot)}
.jfl{color:var(--acc)}

.stamp{
  border-radius:18px; background:var(--acc); color:var(--on-acc);
  box-shadow:0 0 0 4px var(--glow-soft), 0 14px 40px -10px var(--glow);
  animation:tlStampIn .2s cubic-bezier(.2,1.7,.4,1) forwards, stampOut .26s ease-in .42s forwards;
}
.stamp.miss{background:var(--red); color:#fff; box-shadow:0 0 0 4px var(--hot-glow), 0 14px 40px -10px var(--hot-glow)}
@keyframes tlStampIn{
  from{opacity:0; transform:translate(-50%,-50%) scale(1.8) rotate(-6deg)}
  to  {opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
}
@keyframes stampOut{to{opacity:0; transform:translate(-50%,-50%) scale(1.06) rotate(-3deg)}}
.streak{transform:none; border-radius:999px; background:var(--red); color:#fff}
.streak>*{transform:none}
@keyframes hot{from{transform:scale(1.6)} to{transform:scale(1)}}

.answer-review{border:1px solid var(--panel-line); border-radius:8px; background:var(--paper-2); box-shadow:var(--panel-shadow), 0 24px 60px -20px rgba(0,0,0,.45)}
.step-block{border-radius:10px 10px 0 0}

/* ── 奥付: 青と赤の二本線 ── */
footer.colophon{
  position:relative; margin-top:44px; border-top:0; padding-top:22px;
  font-family:var(--jp); font-size:calc(11px * var(--proj)); color:var(--foot); letter-spacing:.04em;
  background:
    linear-gradient(90deg, var(--acc), var(--acc-2)) 0 0/100% 3px no-repeat,
    linear-gradient(var(--hot),var(--hot)) 0 7px/100% 3px no-repeat;
}
.festival-status.attacked{color:var(--red); background:color-mix(in srgb, var(--red) 7%, transparent)}

@media (max-width:640px){
  .wordmark{font-size:calc(27px * var(--proj))}
  header.masthead{padding:20px 0 16px}
  .rule-double{margin-bottom:22px}
}

/* 2026-09-26 討論 B-03: 幅の極端な呼び名で ✖ が画面の外へ押し出された。名前だけを縮める */
.pchip .pname{display:inline-block; max-width:12em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom}
.insights-panel{
  margin:28px 0 8px; padding:22px 24px; border:3px solid var(--ink);
  background:var(--paper); color:var(--ink);
}
.insights-panel h3{
  margin:0 0 16px; font-size:calc(25px * var(--proj)); line-height:1.25;
}
.insights-row{
  display:grid; grid-template-columns:2.2em 1fr; gap:14px; align-items:start;
  padding:14px 0; border-top:2px solid var(--rule-strong);
}
.insights-rank{font-family:var(--disp); font-size:calc(32px * var(--proj)); font-weight:800; color:var(--red)}
.insights-prompt{font-size:calc(22px * var(--proj)); font-weight:700; line-height:1.35}
.insights-answer{font-size:calc(26px * var(--proj)); font-weight:800; line-height:1.25; margin-top:4px}
.insights-detail{font-size:calc(14px * var(--proj)); color:var(--ink-soft); margin-top:7px}
.insights-panel .hint{margin:12px 0 0}
/* kokoiko-family:begin */
/* 生成物。直すのは KOKOIKO-HOME/family-nav/sync_family_nav.py */
.kk-family{position:relative;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:6px max(12px,env(safe-area-inset-left));border:0;background:#061c29;color:#dbe8e4;font:600 12px/1.3 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:.06em;text-align:left}
.kk-family a{display:inline-flex;align-items:center;min-height:32px;margin:0;padding:3px 12px;border:1px solid rgba(219,232,228,.28);border-radius:999px;background:transparent;color:#dbe8e4;text-decoration:none;white-space:nowrap}
.kk-family a:hover{border-color:#dbe8e4;color:#fff}
.kk-family a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kk-family a[aria-current="page"]{border-color:#dbe8e4;background:#dbe8e4;color:#061c29}
.kk-family .kk-home{margin-right:4px;border-color:transparent;font-family:Georgia,"Times New Roman",serif;letter-spacing:.16em}
@media (max-width:560px){.kk-family{gap:3px;padding:5px 6px;font-size:10.5px;letter-spacing:0}.kk-family a{min-height:30px;padding:2px 7px}.kk-family .kk-home{margin-right:0;letter-spacing:.06em}}
@media (max-width:360px){.kk-family{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
@media print{.kk-family{display:none}}
/* kokoiko-family:end */

/* ── ロビーの生存確認（2026-10-07）: 切れている子は囲いを赤く、先生には「外してね」 ── */
.pchip.off{border-color:var(--red) !important; color:var(--red) !important; box-shadow:0 0 0 2px var(--red);
  background:color-mix(in srgb, var(--red) 10%, var(--paper)) !important}
.pchip.off .pname::before{content:"⚠ "}
.pchip.off .kick{opacity:1; color:var(--red)}
.team-members li.off{color:var(--red); font-weight:800}
.team-members li.off::before{content:"⚠ "}
.off-note{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-8px 0 20px; padding:10px 14px;
  border:2px solid var(--red); color:var(--red); font-weight:800; font-size:calc(14px * var(--proj));
  background:color-mix(in srgb, var(--red) 8%, var(--paper))}
.off-note .off-msg{flex:1 1 16em}
.off-note .btn{margin:0; padding:7px 14px; font-size:calc(13px * var(--proj)); background:var(--red); border-color:var(--red); color:#fff}
.off-note .btn:disabled{opacity:.5}
.team-cards + .off-note{margin-top:14px}
/* 章選び: 全章／全解除 と「まだ選んでいない」の知らせ */
.section-tools{display:inline-flex; gap:6px; flex-wrap:wrap}
.section-empty{margin:0; color:var(--red); font-weight:800; font-size:calc(13px * var(--proj))}
.section-toolbar .chip:disabled{opacity:.45; cursor:default}