:root{
  --paper:#FBF8EF; --sheet:#FFFFFF; --ink:#22252B; --sub:#646A74; --grid:rgba(48,98,170,.10); --rule:#C9D6EA;
  --blue:#1E4FA3; --red:#D3263A; --green:#1F8A4C; --hl:#FFF06A; --gutter:#F2EEE2;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}
body{min-height:100vh;margin:0;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;background:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px}
button{font:inherit;color:inherit}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.app{max-width:720px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:grid;gap:16px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.label{border:2px solid var(--ink);background:var(--sheet);padding:6px 14px 8px;box-shadow:3px 3px 0 var(--ink)}
.label .sub{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--blue)}
.label h1{margin:0;font-size:22px;letter-spacing:.06em;line-height:1.4}
.score{display:flex;gap:6px;margin:0}
.score div{background:var(--sheet);border:1px solid var(--rule);padding:4px 10px;text-align:center;min-width:64px}
.score dt{font-size:11px;color:var(--sub)}
.score dd{margin:0;font-family:var(--mono);font-weight:700;font-size:18px;color:var(--blue)}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--ink)}
.tab{border:2px solid transparent;border-bottom:0;background:none;padding:8px 16px;min-height:44px;cursor:pointer;font-weight:700;color:var(--sub);margin-bottom:-2px}
.tab[aria-pressed=true]{background:var(--sheet);border-color:var(--ink);color:var(--ink);border-bottom:2px solid var(--sheet)}
.sheet{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule),0 10px 24px -18px rgba(30,50,90,.5);padding:16px 0 12px}
.qhead{display:flex;justify-content:space-between;align-items:center;padding:0 16px}
.lang{font-family:var(--mono);font-size:12px;font-weight:700;padding:2px 8px;border:1.5px solid currentColor}
.lang.js{color:#9A6A00}.lang.py{color:var(--blue)}
.qno{font-family:var(--mono);font-size:12px;color:var(--sub)}
.qtitle{margin:6px 16px 0;font-size:20px;line-height:1.5}
.qtitle::before{content:"やりたいこと：";display:block;font-size:12px;color:var(--sub);font-weight:400}
.ask{margin:4px 16px 12px;color:var(--red);font-size:14px;font-weight:700}
.code{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto;background:var(--sheet)}
.ln{display:flex;align-items:stretch;width:100%;min-width:max-content;border:0;background:none;padding:0;text-align:left;cursor:pointer;font-family:var(--mono);font-size:14px;line-height:1.5;position:relative}
.ln .no{flex:0 0 3em;background:var(--gutter);color:#9C988A;text-align:right;padding:7px 10px 7px 0;border-right:1px solid var(--rule);user-select:none}
.ln .tx{padding:7px 16px 7px 12px;white-space:pre;flex:1}
.ln:hover .tx{background:#F4F7FD}
.ln:focus-visible{outline-offset:-3px}
.ln.pick .tx{outline:2.5px solid var(--red);outline-offset:-4px;border-radius:40% 30% 45% 35%/60% 50% 55% 45%}
.ln.bug .tx{background:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 88%,transparent 88%)}
.ln.bug .no{color:var(--red);font-weight:700}
.ln.bug .no::before{content:"▶ "}
.ask.good{color:var(--green)}
.ln.right.pick .tx{outline-color:var(--green)}
.code.done .ln{cursor:default}
.code.done .ln:hover .tx{background:none}
.code.done .ln.bug .tx{background:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 88%,transparent 88%)}
.result{background:var(--sheet);border:1px solid var(--rule);border-left:6px solid var(--red);padding:14px 16px}
.result.ok{border-left-color:var(--green)}
.verdict{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--red)}
.result.ok .verdict{color:var(--green)}
.result h3{margin:14px 0 2px;font-size:13px;color:var(--blue);letter-spacing:.06em}
.result h3::before{content:"// ";font-family:var(--mono)}
.result p{margin:0}
.fix{margin:4px 0 0;background:#F1F8F3;border:1px dashed var(--green);padding:8px 12px;font-family:var(--mono);font-size:14px;overflow-x:auto;white-space:pre}
.incident{background:#FFF6F3;border-left:3px solid var(--red);padding:8px 12px}
.next{margin-top:16px;display:flex;justify-content:flex-end}
.btn{border:2px solid var(--ink);background:var(--ink);color:#fff;min-height:48px;padding:0 20px;font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--blue)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--blue)}
.h2{margin:0;font-size:20px}
.note{margin:4px 0 12px;font-size:14px;color:var(--sub)}
.qlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.qlist button{width:100%;text-align:left;border:1px solid var(--rule);background:var(--sheet);padding:8px 10px;min-height:56px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center}
.qlist button:hover{border-color:var(--blue)}
.qlist .mk{grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;border:1.5px dashed #B9B5A8;color:#B9B5A8}
.qlist .mk.ok{border:2px solid var(--green);color:var(--green)}
.qlist .mk.ng{border:2px solid var(--red);color:var(--red)}
.qlist .t{font-size:14px;font-weight:700;line-height:1.4}
.qlist .m{font-family:var(--mono);font-size:11px;color:var(--sub)}
.qlist .today .t::after{content:"今日";font-family:var(--sans);font-size:10px;background:var(--hl);padding:0 4px;margin-left:6px;vertical-align:2px}
.reset{margin-top:16px;border:0;background:none;color:var(--sub);text-decoration:underline;cursor:pointer;min-height:44px;font-size:13px}
.foot{font-size:12px;color:var(--sub);border-top:1px dashed var(--rule);padding-top:10px}
.foot p{margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.app>*,main,main>section,.sheet{min-width:0}
@media (max-width:420px){.ln{font-size:13px}}