:root{--ink:#16202a;--accent:#0e8fd6;--paper:#fff;--soft:#eef6fb;--line:#9db4c4;--given:#16202a;--mine:#0e6fb0;--bad:#c0392b}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--soft)}
header{text-align:center;padding:18px 12px 6px}h1{margin:0;font-size:1.6rem}.tag,.date{margin:4px 0;color:#456}
main{max-width:520px;margin:0 auto;padding:8px 12px 40px}.note{text-align:center;color:#456}
.tabs{display:flex;gap:6px;justify-content:center;margin:8px 0}.tabs button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:6px 14px;font-size:1rem}
.tabs .level{border:1px solid var(--accent);color:var(--accent);border-radius:16px;padding:6px 16px;font-size:1rem;font-weight:600}
.tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));width:100%;aspect-ratio:1;border:3px solid var(--ink);background:#fff;touch-action:manipulation}
.c{min-width:0;min-height:0;overflow:hidden;position:relative;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:clamp(18px,6vw,32px);cursor:pointer;user-select:none}
.c:nth-child(3n){border-right:2px solid var(--ink)}.c:nth-child(9n){border-right:0}
.c.r2,.c.r5{border-bottom:2px solid var(--ink)}
.c.given{font-weight:700;color:var(--given)}.c.mine{color:var(--mine)}.c.sel{background:#cfe8f7}.c.peer{background:#eaf4fb}.c.same{background:#bfe0f5}.c.bad{color:var(--bad)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;font-size:clamp(8px,2.2vw,12px);color:#456;line-height:1}
.notes i{font-style:normal;display:flex;align-items:center;justify-content:center}
.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:10px}.pad button,.tools button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 0;font-size:1.2rem}
.tools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.tools button{flex:1;font-size:1rem;padding:10px 6px}.tools button.on{background:var(--accent);color:#fff}
.msg{min-height:1.6em;margin-top:10px;text-align:center;font-weight:600}
.banner{background:#fff3cd;color:#5c4400;padding:10px 14px;text-align:center;font-size:.95rem;border-bottom:1px solid #e6d28a}
.logo{max-height:64px;max-width:80%}.about{line-height:1.5}footer{text-align:center;padding:14px;font-size:.9rem}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none}
h2,h3{margin-bottom:.3em}

.hist{list-style:none;padding:0;margin:0}.hist li{margin:8px 0}.hist button{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 14px;font-size:1rem}.hist .st{float:right;font-size:.9rem;color:#666}.hist .st.done{color:#1a7f37}.back{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;font-size:1rem}
.todaylink{display:inline-block;margin:6px 0 10px;color:var(--accent);font-weight:600;text-decoration:none}
.timer{text-align:center;font-weight:600;font-size:1.1rem;margin:2px 0 8px;color:#345}
.grid.paused{display:flex;align-items:center;justify-content:center;background:#dbe9f3}.pausemsg{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:20px}.pausemsg b{font-size:1.6rem}.pausemsg button{border:0;font-size:1.1rem;cursor:pointer}
.tools button:disabled{opacity:.45}
.c.guide{background:#fdf1d0}.c.sel.guide{background:#cfe8f7}
.pad button:disabled,.pad button.full{background:#e6ecf0;color:#a9b6bf;border-color:#d3dce2;text-decoration:line-through;cursor:default}
.autof{margin-top:12px;padding:12px;border:1px solid var(--accent);border-radius:10px;background:#fff;text-align:center;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.autof .cta{border:0;font-size:1rem;cursor:pointer}
.c.hintreg{background:#e1f6e4}.c.hintcell{background:#a6e5b0;outline:2px solid #2e9d46;outline-offset:-2px}.c.sel.hintcell{background:#a6e5b0}
footer .ver{color:#789;font-size:.8rem}#updbar button{margin-left:8px;border:0;background:var(--accent);color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer}.avg{text-align:center;color:#456;margin:0 0 6px;font-size:.95rem}

.rel{margin:0 0 14px}.rel h3{margin:0 0 4px;font-size:1.05rem}.rel ul{margin:0;padding-left:20px;line-height:1.5}