@font-face { font-family: "MPR"; src: url("assets/fonts/mpr-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "MPR"; src: url("assets/fonts/mpr-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
:root {
--ink: #3A2621;
--text: #3D3836;
--muted: #5E504A;
--accent: #E0663B;
--glow: rgba(224, 102, 59, 0.32);
--selbg: #FBE9DF;
--paper: #FBF5E8;
--card: #FFFDF8;
--tan: #C9A77B;
--cream: #FFF1D6;
--cw: min(25px, calc((100vw - 84px) / 12)); 
--ec: min(64px, calc((100vw - 92px) / 4)); 
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background-color: var(--paper);
background-image: linear-gradient(rgba(58, 38, 33, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 38, 33, 0.06) 1px, transparent 1px);
background-size: 24px 24px;
color: var(--text);
font-family: "MPR", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
font-weight: 700;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
ruby rt { font-size: 0.5em; font-weight: 700; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app { max-width: 1120px; margin: 0 auto; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); min-height: 100vh; }
.loading { text-align: center; padding: 40px 0; font-size: 22px; font-weight: 900; color: var(--ink); }
.noscript { text-align: center; padding: 16px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 0 6px; border-bottom: 3px solid var(--ink); margin: 0 -16px; padding-left: 16px; padding-right: 16px; background: rgba(255, 253, 248, 0.92); flex-wrap: wrap; }
.brand { min-width: 0; flex: 1 1 140px; }
.series { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.35; }
.series .sep { margin: 0 2px; }
.top h1 { margin: 0; font-size: 20px; font-weight: 900; color: var(--ink); line-height: 1.25; }
.top-right { display: flex; gap: 6px; flex: none; margin-left: auto; }
.pill { min-height: 44px; min-width: 44px; padding: 6px 12px; border-radius: 999px; border: 3px solid var(--ink); background: var(--card); font-weight: 900; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.pill.icon { padding: 6px; }
.pill svg { width: 22px; height: 22px; }
.pill .cross { display: none; }
.pill.off .cross { display: inline; }
.pill.off .wave { display: none; }
.pill .short { display: none; }
@media (max-width: 420px) {
.pill { font-size: 14px; padding: 6px 9px; }
.pill .long { display: none; }
.pill .short { display: inline; }
}
.storage-note { margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: var(--cream); border: 2px dashed var(--ink); font-size: 13px; }
.nav { margin: 10px 0 4px; }
.tabs { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 8px; }
.tab { position: relative; height: 44px; min-width: 44px; border-radius: 14px; border: 3px solid var(--ink); background: var(--card); font-weight: 900; font-size: 19px; cursor: pointer; }
.tab.cur { background: #F6E3D6; }
.tab .dot { position: absolute; right: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--tan); border: 2px solid var(--ink); }
.subnav { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sub { flex: 1 1 auto; min-height: 44px; padding: 6px 10px; border-radius: 14px; border: 3px solid var(--ink); background: var(--card); font-weight: 900; font-size: 15px; cursor: pointer; }
.sub.cur { background: #F6E3D6; }
@media (max-width: 360px) { .tabs { gap: 4px; } .sub { font-size: 14px; padding: 6px 6px; } }
@media (min-width: 700px) {
.nav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.tabs { grid-template-columns: repeat(6, 64px); }
.subnav { margin-top: 0; }
.sub { flex: 0 1 auto; padding: 6px 16px; }
}
.btn { position: relative; min-height: 48px; padding: 8px 14px; border-radius: 14px; border: 3px solid var(--ink); background: var(--card); font-weight: 900; font-size: 17px; cursor: pointer; line-height: 1.3; box-shadow: 0 3px 0 rgba(58, 38, 33, 0.16); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58, 38, 33, 0.16); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.main { background: var(--ink); color: #FFFDF8; }
.btn.small { min-height: 44px; font-size: 15px; padding: 6px 12px; }
.btn.mark, .btn.picked { box-shadow: 0 0 0 4px var(--glow); }
.btn.picked { background: var(--selbg); }
.btn.picked:disabled { opacity: 1; border-width: 4px; }
.view { display: block; }
.screen { margin-top: 6px; }
.qhead { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.grade { font-size: 12px; color: var(--muted); }
.ttag { display: inline-block; font-size: 13px; color: var(--muted); border: 2px solid rgba(58, 38, 33, 0.35); border-radius: 10px; padding: 1px 8px; background: var(--card); }
.q { margin: 6px 0 4px; font-size: clamp(22px, 6.4vw, 32px); font-weight: 900; color: var(--ink); line-height: 1.45; }
.q2 { margin: 4px 0; font-size: clamp(20px, 5.6vw, 28px); font-weight: 900; color: var(--ink); line-height: 1.45; }
.guide { margin: 2px 0 8px; font-size: 15px; color: var(--muted); }
.small-note { margin: 4px 0; font-size: 13px; color: var(--muted); }
.lvtag { display: inline-block; margin: 0; font-size: 13px; border: 2px solid var(--ink); border-radius: 10px; padding: 0 8px; background: var(--card); }
.src { margin: 4px 0 8px; padding: 6px 10px; font-size: 13px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; }
.work { position: relative; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.figcol, .ctlcol { min-width: 0; }
.ctlcol > * + * { margin-top: 10px; }
@media (min-width: 900px) {
.work.has-fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.work.has-fig .figcol { position: sticky; top: 10px; }
.work.has-fig .hintcard { right: auto; width: calc(50% - 14px); }
:root { --cw: 30px; --ec: 64px; }
}
.hintcard { position: absolute; z-index: 6; left: 0; right: 0; top: 0; background: rgba(255, 253, 248, 0.97); border: 3px solid var(--ink); border-radius: 16px; padding: 10px 12px 12px; box-shadow: 0 8px 24px rgba(58, 38, 33, 0.18); }
.work:not(.has-fig) .hintcard { position: relative; }
.hintp { margin: 0 0 8px; font-size: 16px; line-height: 1.65; }
.hintp b { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 8px; background: var(--cream); border: 2px solid var(--ink); font-size: 13px; }
.hintcard.demo { border-style: dashed; }
.demo-cap { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.figbox { position: relative; }
.figure { position: relative; }
.figure.single { padding-left: var(--gut); }
.figure.single .field { display: block; width: 100%; height: auto; overflow: visible; }
.figure.legend { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.legend-big { width: 56%; max-width: 220px; text-align: center; }
.legend-big svg { width: 100%; height: auto; display: block; }
.legend-cap { margin: 8px 0 0; font-size: 17px; font-weight: 900; color: var(--ink); line-height: 1.4; }
.legend-cap small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.figure.multi { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--mgap); }
.figure.multi .slot { display: block; min-width: 0; }
.figure.multi svg { display: block; width: 100%; height: auto; overflow: visible; }
.flab { display: block; text-align: center; font-size: 12px; font-weight: 900; color: var(--text); line-height: 1.3; }
html[lang="en"] .flab { font-size: 10px; }
.scale { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--gut) - 6px); font-size: 11px; line-height: 1.2; color: var(--muted); }
.sc { position: absolute; right: 0; text-align: right; white-space: nowrap; }
.sc.s100 { top: 0; }
.sc.s10 { bottom: 10%; }
.sc.s1 { bottom: 0; }
html[lang="en"] .scale { font-size: 10px; }
.bf { fill: var(--tan); }
.g1 { fill: none; stroke: rgba(120, 88, 56, 0.42); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
.g10 { fill: none; stroke: rgba(58, 38, 33, 0.55); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.bo { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bo.pulse { animation: pulse 1s ease-in-out 1; }
@keyframes pulse { 0% { stroke-width: 2px; } 40% { stroke-width: 7px; } 100% { stroke-width: 2px; } }
.frame { fill: none; stroke: rgba(58, 38, 33, 0.35); stroke-width: 1.2px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.tick { stroke: var(--muted); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.fmark { fill: none; stroke: var(--accent); stroke-width: 3px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.fig-info { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; font-weight: 900; color: var(--ink); }
.fig-info.read { font-weight: 700; color: var(--text); }
.fig-many { margin: 4px 0 0; font-size: 14px; }
.legend-key { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.legend-key svg { width: 16px; height: 16px; }
.tagmark { display: inline-block; margin: 6px 0 0; padding: 2px 10px; border: 2px dashed var(--accent); border-radius: 10px; background: var(--card); font-size: 14px; }
.live { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 3px solid var(--ink); font-size: 16px; font-weight: 900; color: var(--ink); }
.twrap { position: relative; }
.ptable { display: flex; gap: 14px; }
.grp { position: relative; display: flex; flex-direction: column; padding: 0; border: 4px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; font: inherit; color: inherit; cursor: pointer; text-align: center; min-height: 44px; }
div.grp { cursor: default; }
.grp.on { box-shadow: 0 0 0 4px var(--glow); }
.grp.lit { box-shadow: 0 0 0 5px var(--glow); background: #FFF7F1; }
.grp.mark { outline: 3px dashed var(--accent); outline-offset: 3px; }
.heads, .cells { display: grid; grid-template-columns: repeat(4, var(--cw)); }
.heads span { font-size: 11px; line-height: 1.4; color: var(--muted); border-bottom: 2px solid var(--ink); padding: 1px 0; font-weight: 900; overflow: hidden; }
html[lang="en"] .heads span { font-size: min(9px, calc(var(--cw) * 0.42)); letter-spacing: -0.3px; }
.cells .cell { position: relative; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: calc(var(--cw) * 0.86); color: var(--ink); border-right: 1px solid rgba(58, 38, 33, 0.25); }
.cells .cell:last-child { border-right: 0; }
.cell.sel { box-shadow: inset 0 0 0 2px var(--ink); background: var(--selbg); }
.cell.mark { background: #FFE9DC; box-shadow: inset 0 0 0 2px var(--accent); }
.cell.hl { background: #FFF1D6; }
.cell.cov { color: transparent; border-right-color: transparent; }
.cell.cov::after { content: ""; position: absolute; inset: 3px 0; background: var(--cream); border-top: 2px dashed var(--accent); border-bottom: 2px dashed var(--accent); }
.cell.cov-l::after { left: 2px; border-left: 2px dashed var(--accent); border-radius: 4px 0 0 4px; }
.cell.cov-r::after { right: 2px; border-right: 2px dashed var(--accent); border-radius: 0 4px 4px 0; }
.cell.cov.slide::after { animation: slidein 0.45s ease-out 1; }
@keyframes slidein { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.cell.zeroed { animation: bump 0.35s ease-out 1; }
.cell.landed { animation: bump 0.5s ease-out 1; color: var(--ink); }
@keyframes bump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.lab { display: block; min-height: 19px; font-size: 13px; line-height: 1.3; text-align: right; padding: 1px 5px; border-top: 2px solid var(--ink); font-weight: 900; color: var(--ink); }
html[lang="en"] .lab { font-size: 9px; line-height: 1.25; padding: 2px 3px; white-space: normal; }
.lab b { font-size: 12px; }
.ptable.small { gap: 8px; }
.ptable.small .grp { border-width: 3px; }
.ptable.small .cells .cell { height: 34px; font-size: 18px; }
.hoplayer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hoplayer .arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 5; transition: opacity 0.4s; }
.hoplayer .arc.fade { opacity: 0; }
.hoplayer .hop1 { fill: var(--accent); font-weight: 900; font-size: 24px; text-anchor: middle; font-family: "MPR", sans-serif; }
.note-gap { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pickmsg { margin: 8px 0; padding: 10px 12px; border: 3px dashed rgba(58, 38, 33, 0.4); border-radius: 14px; font-size: 14px; color: var(--muted); background: rgba(255, 253, 248, 0.7); }
.pointer { position: absolute; z-index: 4; width: 32px; height: 40px; left: 62%; top: 62%; pointer-events: none; animation: poke 1.1s ease-in-out infinite; }
.pointer svg { width: 100%; height: 100%; }
.pointer.once { top: 70px; animation: poke 0.9s ease-in-out 3 forwards, fadeout 0.4s 2.7s forwards; }
@keyframes poke { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fadeout { to { opacity: 0; visibility: hidden; } }
.tools { display: grid; gap: 8px; }
.tlabel { margin: 0; font-size: 13px; color: var(--muted); }
.addrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.addrow .btn { padding: 6px 2px; font-size: 16px; white-space: nowrap; }
@media (max-width: 370px) { .addrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.toolrow { display: flex; gap: 8px; flex-wrap: wrap; }
.toolrow .btn { flex: 1 1 auto; }
.ansrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 18px; font-weight: 900; color: var(--ink); }
.box, .note { display: inline-flex; align-items: center; min-width: 96px; min-height: 52px; padding: 4px 10px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: inherit; font-size: 26px; font-weight: 900; color: var(--ink); cursor: pointer; letter-spacing: 1px; }
.box.sel, .note.sel { border-width: 4px; box-shadow: 0 0 0 4px var(--glow); }
.box.mark, .note.mark { outline: 3px dashed var(--accent); outline-offset: 3px; }
.noterow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nlabel { font-size: 15px; color: var(--muted); }
.note { flex: 1 1 200px; min-width: 0; border-width: 0 0 3px; border-radius: 0; background: transparent; padding: 4px 4px; overflow-wrap: anywhere; flex-wrap: wrap; }
.note.sel { border-width: 0 0 4px; box-shadow: 0 6px 0 -2px var(--glow); background: rgba(255, 255, 255, 0.6); }
.note.static { cursor: default; }
.ch.comma { margin: 0 1px; }
.caret { display: inline-block; width: 3px; height: 1.1em; margin: 0 1px; background: var(--accent); vertical-align: middle; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ph { display: inline-block; min-width: 1em; }
.tbtn { flex: none; }
.nbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.dock { margin-top: 12px; }
.editor { border: 3px dashed rgba(58, 38, 33, 0.45); border-radius: 16px; background: rgba(255, 253, 248, 0.85); padding: 8px 10px 6px; }
.ehead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 900; color: var(--ink); flex-wrap: wrap; }
.enote { font-size: 12px; color: var(--muted); font-weight: 700; }
.ecols, .ecells { display: flex; gap: 10px; justify-content: center; }
.ecols span { width: var(--ec); text-align: center; font-size: 15px; font-weight: 900; color: var(--muted); margin-top: 2px; }
.ecell { width: var(--ec); height: var(--ec); border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: inherit; font-weight: 900; font-size: 34px; color: var(--ink); cursor: pointer; padding: 0; }
.ecell.sel { border-width: 5px; background: var(--selbg); box-shadow: 0 0 0 5px var(--glow); }
.ecell.cov { background: var(--cream); color: rgba(58, 38, 33, 0.35); border-style: dashed; }
.elab { text-align: right; font-size: 14px; font-weight: 900; color: var(--ink); min-height: 20px; padding-right: 4px; }
.keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.key { height: 48px; min-width: 44px; border-radius: 14px; border: 3px solid var(--ink); background: var(--card); font-weight: 900; font-size: 24px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(58, 38, 33, 0.16); }
.key:active { transform: translateY(2px); box-shadow: none; }
.key svg { width: 22px; height: 22px; }
.key.word { font-size: 17px; }
.actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); gap: 8px; margin-top: 14px; }
.actions .btn { min-height: 52px; padding: 6px 6px; font-size: clamp(14px, 4.1vw, 17px); word-break: keep-all; overflow-wrap: anywhere; }
.actions.solved { grid-template-columns: 1fr; }
.actions.solved:has(.btn + .btn) { grid-template-columns: 1fr 1.4fr; }
.actions.solved .btn { width: 100%; }
.fb { padding: 10px 12px; border-radius: 14px; background: var(--card); border: 3px dashed rgba(58, 38, 33, 0.55); font-size: 16px; line-height: 1.6; }
.fb p { margin: 0; }
.fb p + p { margin-top: 4px; }
.fb.good { border: 3px solid var(--ink); background: var(--cream); }
.fb.small { font-size: 15px; padding: 8px 10px; margin: 8px 0 0; }
.fb-t { font-size: 13px; color: var(--muted); }
.reread { margin: 4px 0 6px; }
.rr-t { font-size: 13px; color: var(--muted); }
.rr-n { font-size: 22px; font-weight: 900; color: var(--ink); overflow-wrap: anywhere; letter-spacing: 1px; }
.rr-n .bar { color: var(--ink); margin: 0 2px; }
.rr-n .arrow { font-size: 18px; }
.words { font-size: 14px; color: var(--muted); }
.splitter, .cmp { --s: min(39px, calc((100vw - 40px) / var(--len))); margin: 8px 0; }
.srow, .cmpr { position: relative; display: grid; grid-template-columns: repeat(var(--len), var(--s)); width: calc(var(--len) * var(--s)); }
.srow { height: 56px; }
.sd { text-align: center; font-size: min(30px, calc(var(--s) * 0.8)); font-weight: 900; color: var(--ink); line-height: 56px; }
.sgap { position: absolute; top: 0; height: 56px; width: var(--s); left: calc(var(--k) * var(--s) - var(--s) / 2); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.sgap .sline { position: absolute; left: calc(50% - 2px); top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: transparent; }
.sgap:hover .sline, .sgap:focus-visible .sline { background: rgba(58, 38, 33, 0.18); }
.sgap.on .sline { background: var(--ink); }
.sgap.bad .sline { background: var(--ink); opacity: 0.25; }
.splitter.mark .srow { outline: 3px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }
.crow { position: relative; height: 14px; width: calc(var(--len) * var(--s)); }
.cdot { position: absolute; top: 2px; left: calc(var(--k) * var(--s) - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.cdot-l { margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cdot-ex { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tagrow { display: grid; grid-template-columns: repeat(var(--len), var(--s)); width: calc(var(--len) * var(--s)); margin-top: 4px; }
.stag { text-align: center; }
.tagrow.flex { display: flex; flex-wrap: wrap; gap: 6px; width: auto; }
.tagrow.flex .stag:empty { display: none; }
.stag b { display: inline-block; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); font-size: 14px; white-space: nowrap; }
.commacard { padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--card); }
.commacard > p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.cmpr { height: 44px; }
.cmpr .sd { line-height: 44px; }
.cmark { position: absolute; left: calc(var(--k) * var(--s)); }
.cmark.comma { top: 14px; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: var(--muted); }
.cmark.bar4 { top: 4px; bottom: 4px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.cmp-l { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.hissan { --s: min(39px, calc((100vw - 56px) / var(--n))); position: relative; display: grid; grid-template-columns: 22px repeat(var(--n), var(--s)); grid-template-rows: 40px 40px 6px 44px; width: calc(22px + var(--n) * var(--s)); margin: 8px 0; }
.hc { text-align: center; font-size: min(26px, calc(var(--s) * 0.78)); font-weight: 900; line-height: 40px; color: var(--ink); }
.hc.sum { line-height: 44px; }
.hline { align-self: center; height: 3px; background: var(--ink); }
.hcol { grid-row: 1 / -1; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; min-height: 56px; }
.hcol.next { box-shadow: inset 0 0 0 3px var(--glow); }
.hcol.done { background: rgba(201, 167, 123, 0.16); }
.cmp2 p { margin: 2px 0; display: flex; gap: 10px; align-items: baseline; }
.cmp2 span { font-size: 13px; color: var(--muted); min-width: 6.5em; }
.cmp2 b { font-size: 22px; color: var(--ink); letter-spacing: 1px; }
.check { padding: 10px 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.check-t { margin: 0 0 6px; font-weight: 900; color: var(--ink); }
.check-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.panel { margin-top: 10px; padding-top: 8px; border-top: 2px dashed rgba(58, 38, 33, 0.3); overflow-x: auto; overflow-y: hidden; }
.t5ask { display: grid; gap: 6px; justify-items: start; }
.asktag { display: inline-block; padding: 2px 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--card); font-size: 20px; font-weight: 900; color: var(--ink); }
.slots, .tray { padding: 8px; border-radius: 14px; border: 3px dashed rgba(58, 38, 33, 0.4); background: rgba(255, 253, 248, 0.7); display: grid; gap: 8px; }
.slots { border-style: solid; border-color: var(--ink); background: var(--card); }
.slabel { margin: 0; font-size: 13px; color: var(--muted); }
.empty { margin: 0; font-size: 14px; color: var(--muted); }
.card { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: inherit; font-size: 17px; font-weight: 900; color: var(--ink); cursor: pointer; line-height: 1.5; box-shadow: 0 3px 0 rgba(58, 38, 33, 0.14); }
.card.lit { box-shadow: 0 0 0 4px var(--glow); }
.card .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #FFFDF8; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.model { padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--card); }
.model p { margin: 0; line-height: 1.7; }
.model-t { font-size: 13px; color: var(--muted); }
.freewrite { margin-top: 18px; padding-top: 12px; border-top: 2px dashed rgba(58, 38, 33, 0.3); display: grid; gap: 8px; }
.freewrite label { font-size: 15px; }
.freewrite textarea { width: 100%; font: inherit; font-size: 16px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--text); resize: vertical; }
.freewrite .btn { justify-self: start; }
.rubric { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rubric li { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.rk { flex: none; min-width: 5.5em; font-size: 12px; }
.rubric li.got .rk { display: inline-block; padding: 0 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); text-align: center; }
.scrap { position: relative; padding: 16px 14px 12px; background: #fff repeating-linear-gradient(transparent 0 27px, rgba(80, 120, 160, 0.18) 27px 28px); border: 2px solid rgba(58, 38, 33, 0.3); border-radius: 4px; box-shadow: 2px 3px 0 rgba(58, 38, 33, 0.1); clip-path: polygon(0 0, 100% 0, 100% 88%, 96% 92%, 92% 88%, 88% 93%, 84% 89%, 80% 94%, 76% 89%, 72% 93%, 68% 88%, 64% 93%, 60% 89%, 56% 94%, 52% 89%, 48% 93%, 44% 88%, 40% 93%, 36% 89%, 32% 94%, 28% 89%, 24% 93%, 20% 88%, 16% 93%, 12% 89%, 8% 94%, 4% 89%, 0 93%); }
.scrap p { margin: 0 0 10px; font-size: 20px; font-weight: 900; color: var(--ink); }
.scraptag { display: inline-block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.step { margin-top: 14px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 16px; background: rgba(255, 253, 248, 0.92); overflow: hidden; }
.step h3 { margin: 0 0 4px; font-size: 17px; font-weight: 900; color: var(--ink); }
.ask { margin: 8px 0 4px; font-weight: 900; color: var(--ink); }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choices.col { flex-direction: column; margin-top: 8px; }
.choices.col .btn { text-align: left; }
.levels { display: grid; gap: 10px; }
.btn.lv { display: grid; text-align: left; padding: 12px 16px; }
.btn.lv b { font-size: 20px; }
.btn.lv small { font-size: 13px; color: var(--muted); font-weight: 700; }
.rboxes { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 8px 0; }
.rb { display: inline-flex; align-items: center; gap: 4px; }
.rbox { min-width: 84px; font-size: 24px; }
.rlab { font-size: 18px; font-weight: 900; color: var(--ink); }
html[lang="en"] .rlab { font-size: 13px; }
.exrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.chip { min-height: 44px; font-size: 14px; padding: 4px 10px; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(58, 38, 33, 0.32); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.overlay[hidden] { display: none; }
.ov-card { width: min(100%, 760px); max-height: calc(100vh - 24px); overflow: auto; background: var(--card); border: 3px solid var(--ink); border-radius: 20px; padding: 14px 16px 16px; display: grid; gap: 10px; }
@media (min-width: 700px) { .overlay { align-items: center; } }
.ov-card h2 { margin: 0; font-size: 21px; color: var(--ink); }
.ov-close { justify-self: end; }
.map-wrap { overflow-x: auto; }
table.map { border-collapse: collapse; font-size: 12px; table-layout: fixed; width: 620px; }
.map thead th:first-child { width: 44px; }
.map th, .map td { border: 2px solid rgba(58, 38, 33, 0.35); padding: 4px 6px; vertical-align: top; }
.map td.none { color: var(--muted); }
.map td.here { background: var(--cream); border: 3px solid var(--ink); }
.map td span { display: block; }
.map td .url { color: var(--muted); }
.map-sub { margin: 0; font-size: 14px; color: var(--muted); }
.fields { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; border: 2px solid rgba(58, 38, 33, 0.4); font-size: 13px; background: #fff; }
.tag.now { border: 3px solid var(--ink); background: var(--cream); }
.skills { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.skills li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.stamps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.stamp { display: grid; gap: 4px; justify-items: center; align-content: start; padding: 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; text-align: center; }
.stamp svg.mini { width: 88px; height: auto; max-height: 96px; }
.stamp b { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.stamp small { font-size: 11px; color: var(--muted); }
.ovnote { font-size: 12px; color: var(--muted); margin: 0; }
.aha { text-align: center; padding: 8px 4px; }
.aha-title { margin: 0; display: inline-block; padding: 2px 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); font-size: 15px; font-weight: 900; color: var(--ink); }
.aha-text { margin: 12px 0 4px; font-size: clamp(20px, 5.6vw, 26px); font-weight: 900; color: var(--ink); line-height: 1.6; }
.next-row { display: flex; gap: 8px; flex-wrap: wrap; }
.next-row .btn { flex: 1 1 140px; }
.foot { margin-top: 28px; padding-top: 10px; border-top: 2px dashed rgba(58, 38, 33, 0.25); font-size: 12px; color: var(--muted); }
.foot p { margin: 2px 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.pointer { animation: none !important; }
}