:root{--bg:#e9edf3;--card:#fff;--ink:#16203a;--mute:#5d6882;--line:#c9d1e0;--accent:#2b4a8c;--good:#2f6f4f;--again:#a8402f;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101626;--card:#1a2238;--ink:#e8ecf6;--mute:#9aa6c3;--line:#2c3757;--accent:#8fa9e8;--good:#6fc095;--again:#e88a77}}
:root[data-theme="dark"]{--bg:#101626;--card:#1a2238;--ink:#e8ecf6;--mute:#9aa6c3;--line:#2c3757;--accent:#8fa9e8;--good:#6fc095;--again:#e88a77}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 "Zen Kaku Gothic New",system-ui,sans-serif}
main{max-width:600px;margin:0 auto;padding:20px 16px 40px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
h1{font:700 22px "Shippori Mincho",serif;margin:0}
button,select,input{font:inherit;color:var(--ink)}
.btn{padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn.danger{color:var(--again);border-color:var(--again)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.meta{display:flex;justify-content:space-between;color:var(--mute);font-size:14px;margin-bottom:6px}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:16px}
.bar i{display:block;height:100%;background:var(--good);width:0;transition:width .3s}
.card{width:100%;min-height:290px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.front{font:700 clamp(36px,11vw,60px)/1.2 "Shippori Mincho",serif;overflow-wrap:anywhere}
.hint{color:var(--mute);font-size:14px;margin-top:14px}
.ans{font-size:30px;color:var(--accent);margin-top:14px;overflow-wrap:anywhere}
.row{display:flex;gap:10px;margin-top:14px}
.row button{flex:1;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.row .again{border-color:var(--again);color:var(--again)}
.row .good{border-color:var(--good);color:var(--good)}
.row button:disabled{opacity:.4;cursor:default}
.hidden{display:none}
.bar2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bar2 select{flex:1;min-width:140px;padding:9px;border-radius:9px;border:1px solid var(--line);background:var(--card)}
.cols,.er{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}
.cols{color:var(--mute);font-size:14px;margin-bottom:6px}
.er{margin-bottom:4px}
.ec{margin-bottom:12px}
.kp{font:500 15px "Shippori Mincho",serif;color:var(--mute);padding-left:4px;min-height:1.5em}
.seg{display:flex;gap:6px;margin-bottom:12px}
.seg button{flex:1;padding:9px 6px;border:1px solid var(--line);background:transparent;border-radius:9px;cursor:pointer;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.small{font-size:20px;color:var(--mute);margin-bottom:4px}
.ans .small{margin:0 0 2px}
.jpans .main{font:700 44px/1.2 "Shippori Mincho",serif}
.er input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.er .btn{padding:8px 11px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

:root{--med:#8a6a14;--hard:#b2561f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--med:#e0b94d;--hard:#ee9a5e}}
:root[data-theme="dark"]{--med:#e0b94d;--hard:#ee9a5e}
header{flex-wrap:wrap}
textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:14px/1.4 ui-monospace,Menlo,Consolas,monospace}
.io{margin-top:26px;border-top:1px solid var(--line);padding-top:14px}
.io h2{font-size:16px;margin:0 0 10px}
.row button{padding:13px 4px;font-size:14px}
.row .dk{border-color:var(--again);color:var(--again)}
.row .hd{border-color:var(--hard);color:var(--hard)}
.row .md{border-color:var(--med);color:var(--med)}
.row .ez{border-color:var(--good);color:var(--good)}
.new{color:var(--mute)}.easy{color:var(--good)}.medium{color:var(--med)}.hard{color:var(--hard)}.dk{color:var(--again)}
.dist{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line);margin:8px 0}
.dist span{display:block;background:currentColor}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;margin-bottom:16px}
.legend>span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:50%;background:currentColor;display:inline-block}
.st{display:grid;grid-template-columns:1fr auto;gap:2px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.st b{font:700 20px "Shippori Mincho",serif}
.st .bd{justify-self:end;align-self:center;font-size:13px;padding:2px 10px;border:1px solid currentColor;border-radius:999px;white-space:nowrap}
.st .mu{color:var(--mute);font-size:14px}
.st .mu:last-child{text-align:right}