:root{--o:#e8590c;--o2:#fd7e14;--ol:#fff4e6;--ink:#212529;--mut:#5c636a;--g:#2b8a3e;--gl:#ebfbee;--b:#1c7ed6;--bl:#e7f5ff;--r:#c92a2a;--rl:#fff5f5;--y:#f59f00;--yl:#fff9db;--p:#7048e8;--pl:#f3f0ff;--rad:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Rubik","Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fffaf3;line-height:1.6;font-size:17px;overflow-x:hidden}
img{max-width:100%}
a{color:#a33b00}
.wrap{max-width:1040px;margin:0 auto;padding:0 14px}
.skip{position:absolute;right:-999px}.skip:focus{right:8px;top:8px;background:#fff;padding:8px;z-index:9}
header.top{background:linear-gradient(135deg,#ff922b,#e8590c);color:#fff;padding:12px 0 10px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.hrow{display:flex;align-items:center;gap:6px}
.htxt h1{margin:0;font-size:1.5rem;line-height:1.2}
.htxt p{margin:2px 0 0;font-size:.92rem;opacity:.95}
a.home{color:#fff;text-decoration:none}
.tbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tk{flex:1 1 auto;min-height:44px;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.15);color:#fff;border-radius:999px;font:inherit;font-size:.95rem;font-weight:600;padding:6px 10px;cursor:pointer}
.tk.on{background:#fff;color:#c2410c;border-color:#fff}
.tk.easy.on{background:#fff3bf;color:#5c3c00}
main{padding:18px 14px 30px;min-height:60vh;outline:none}
h2{font-size:1.45rem;margin:4px 0 10px;line-height:1.3}
h3{font-size:1.15rem;margin:16px 0 8px}
.lead{font-size:1.06rem;color:#333}
.kick{display:inline-block;background:var(--ol);color:#a33b00;border-radius:999px;padding:2px 12px;font-size:.85rem;font-weight:700;margin-bottom:6px}
.kick.our{background:var(--pl);color:#5f3dc4}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;min-height:118px;padding:14px 10px;border-radius:var(--rad);background:#fff;border:2px solid #ffe8cc;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.02rem;box-shadow:0 2px 6px rgba(232,89,12,.08);cursor:pointer;font-family:inherit}
.tile .em{font-size:2.1rem;line-height:1}
.tile small{font-weight:400;color:var(--mut);font-size:.85rem}
.tile:hover,.tile:focus-visible{border-color:var(--o2)}
.tile.our{border-color:#e5dbff}
.sec{background:#fff;border-radius:var(--rad);padding:16px;margin:14px 0;border:1px solid #f1e3d3}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:10px 18px;border-radius:14px;border:0;background:var(--o);color:#fff;font:inherit;font-weight:700;font-size:1.02rem;text-decoration:none;cursor:pointer;margin:4px 0 4px 6px}
.btn.alt{background:#fff;color:#a33b00;border:2px solid #ffc078}
.btn.g{background:var(--g)}.btn.b{background:var(--b)}.btn.p{background:var(--p)}
.btn:disabled{opacity:.45;cursor:default}
.btn.sm{min-height:42px;padding:6px 12px;font-size:.95rem}
:focus-visible{outline:3px solid #1971c2;outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.note{background:var(--yl);border-right:5px solid var(--y);padding:10px 12px;border-radius:10px;margin:10px 0}
.ok{background:var(--gl);border-right:5px solid var(--g);padding:10px 12px;border-radius:10px;margin:10px 0}
.bad{background:var(--rl);border-right:5px solid var(--r);padding:10px 12px;border-radius:10px;margin:10px 0}
.crumb{margin:0 0 10px}.crumb a{font-weight:700;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{min-height:44px;border-radius:999px;border:2px solid #ffd8a8;background:#fff;padding:6px 14px;font:inherit;font-size:.98rem;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--o);border-color:var(--o);color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.tag{font-size:.78rem;background:#f1f3f5;border-radius:999px;padding:1px 8px;color:#495057}
/* library */
.fcard{display:flex;gap:10px;align-items:stretch;background:#fff;border:2px solid #ffe8cc;border-radius:var(--rad);padding:8px;text-decoration:none;color:var(--ink);min-height:110px}
.fcard img{width:84px;height:110px;object-fit:contain;background:#f8f9fa;border-radius:8px;flex:0 0 84px;border:1px solid #eee}
.fcard b{display:block;font-size:1rem;line-height:1.35}
.fcard .cr{font-size:.8rem;color:#7a4b00;margin-top:3px}
.fcard .ds{font-size:.85rem;color:var(--mut)}
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.credit{background:#fff4e6;border:1px dashed #ffa94d;border-radius:12px;padding:8px 12px;font-size:.95rem;margin:8px 0}
/* viewer */
.viewer{background:#fff;border-radius:var(--rad);padding:8px;border:1px solid #eee;text-align:center}
.viewer img{display:block;margin:0 auto;width:100%;height:auto;border-radius:6px;background:#f8f9fa;min-height:200px}
.vnav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}
.vnav .cnt{font-weight:700}
.allpages img{display:block;width:100%;height:auto;margin:0 0 12px;border:1px solid #eee;border-radius:6px;background:#f8f9fa}
/* matrix */
.mx{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.q{min-height:120px;border-radius:14px;padding:8px;border:3px solid;font:inherit;text-align:right;cursor:pointer;background:#fff;display:flex;flex-direction:column;gap:4px}
.q h4{margin:0;font-size:.98rem}
.q small{color:var(--mut);font-size:.8rem}
.q1{border-color:#fa5252;background:#fff5f5}.q2{border-color:#40c057;background:#ebfbee}.q3{border-color:#fab005;background:#fff9db}.q4{border-color:#adb5bd;background:#f8f9fa}
.q .it{font-size:.85rem;background:#fff;border-radius:8px;padding:2px 6px;border:1px solid #ddd}
.q .it.w{border-color:#fa5252;background:#ffe3e3}
.cardnow{background:#fff;border:3px solid var(--o2);border-radius:16px;padding:14px;font-size:1.2rem;font-weight:700;text-align:center;margin:10px 0}
.axis{font-size:.85rem;color:var(--mut);text-align:center}
/* planner */
.days{display:flex;gap:4px;flex-wrap:wrap}
.days .chip{min-width:44px;padding:6px 10px}
.slot{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #eee;border-radius:12px;padding:8px;margin:6px 0;min-height:56px;cursor:pointer;width:100%;font:inherit;text-align:right}
.slot .when{flex:0 0 92px;font-weight:700;font-size:.9rem;color:#495057}
.slot .what{flex:1}
.slot.sel{border-color:var(--b);background:var(--bl)}
.bars .bar{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.92rem}
.bars .bar i{display:block;height:16px;border-radius:8px;background:var(--o2);min-width:4px}
.bars .bar span{flex:0 0 120px}
/* pomodoro */
.pomo{text-align:center}
.ring{width:min(78vw,300px);height:auto;display:block;margin:10px auto}
.time{font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
.tomatoes{font-size:1.8rem;min-height:2.2rem}
/* quiz */
.opt{display:block;width:100%;text-align:right;min-height:54px;margin:8px 0;padding:10px 14px;border-radius:14px;border:2px solid #dee2e6;background:#fff;font:inherit;font-size:1.02rem;cursor:pointer;color:var(--ink)}
.opt:hover{border-color:var(--o2)}
.prog{height:10px;background:#f1f3f5;border-radius:6px;overflow:hidden;margin:8px 0}
.prog i{display:block;height:100%;background:var(--o2)}
/* flip cards */
.flip{perspective:1000px;width:100%;max-width:420px;margin:12px auto;height:240px;cursor:pointer;border:0;background:none;padding:0;font:inherit;display:block}
.flip .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .fc,.flip .bc{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:18px;font-size:1.25rem;font-weight:700;text-align:center}
.flip .fc{background:linear-gradient(135deg,#ff922b,#e8590c);color:#fff;font-size:2.2rem}
.flip .bc{background:#fff;border:3px solid #ffc078;transform:rotateY(180deg);color:var(--ink)}
/* jar */
.jarwrap{display:flex;justify-content:center}
.jar{width:min(70vw,260px);height:auto}
/* minute */
.big{font-size:3.4rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
textarea,input[type=text]{width:100%;font:inherit;font-size:1rem;padding:10px;border-radius:12px;border:2px solid #dee2e6;background:#fff}
textarea{min-height:76px}
label.l{display:block;font-weight:700;margin:10px 0 4px}
.goal{background:linear-gradient(135deg,#fff4e6,#fff);border:3px solid var(--o2);border-radius:18px;padding:16px;margin:12px 0}
.goal p{margin:6px 0}
table.t{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
table.t td,table.t th{border:1px solid #e9ecef;padding:8px;vertical-align:top;text-align:right}
table.t th{background:#fff4e6}
.tw{overflow-x:auto}
footer{background:#3b2a1a;color:#fff;padding:18px 0 22px;margin-top:20px;font-size:.92rem}
footer a{color:#ffd8a8}
.frow{display:flex;align-items:center;gap:6px}
.cred{font-weight:800;font-size:1.05rem;margin:0 0 4px}
.fnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.hide{display:none!important}
.easy-only{display:none}
body.easy .easy-only{display:block}
body.easy .hard-only{display:none}
body.easy{font-size:19px}
body.easy .opt,body.easy .btn{min-height:58px}
@media (min-width:768px){.htxt h1{font-size:1.9rem}.tk{flex:0 0 auto;padding:6px 16px}.mx{gap:12px}.q{min-height:150px}}
@media (prefers-reduced-motion:reduce){.flip .in{transition:none}}