:root{--ink:#1f2a37;--mut:#5b6573;--bg:#fbf7f1;--card:#fff;--a:#6d3fc7;--a2:#0f8b8d;--a3:#e2577a;--a4:#f2a541;--line:#e8e0d4;--ok:#1e8a4c;--no:#c0392b}
*{box-sizing:border-box}html{font-size:18px}body{margin:0;font-family:"Heebo","Assistant","Rubik",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.skip{position:absolute;right:-999px}.skip:focus{right:8px;top:8px;background:#fff;padding:8px;z-index:9}
a{color:var(--a)}:focus-visible{outline:3px solid var(--a4);outline-offset:2px}
.top{position:sticky;top:0;z-index:5;background:linear-gradient(90deg,#6d3fc7,#0f8b8d);color:#fff;padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;box-shadow:0 2px 10px #0002}
.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none}.brand img{border-radius:50%;background:#fff}.brand small{display:block;opacity:.9;font-size:.75rem}
.lv{display:flex;flex-wrap:wrap;gap:6px}.lv button{border:2px solid #fff8;background:#fff2;color:#fff;border-radius:999px;padding:8px 12px;min-height:44px;font:inherit;font-size:.85rem;cursor:pointer}.lv button[aria-pressed=true]{background:#fff;color:var(--a);font-weight:700}
main{max-width:1000px;margin:0 auto;padding:14px 12px 30px}
.hero{background:radial-gradient(circle at 15% 20%,#ffe3ec,transparent 40%),radial-gradient(circle at 85% 30%,#d9f3f2,transparent 40%),#fff;border:2px solid var(--line);border-radius:22px;padding:20px;text-align:center}
.hero h1{margin:.2em 0;font-size:1.7rem}.date{display:inline-block;background:var(--a3);color:#fff;border-radius:14px;padding:4px 14px;font-weight:800;font-size:1.3rem}
.rainbow{height:8px;border-radius:8px;background:linear-gradient(90deg,#e2577a,#f2a541,#f6d743,#3bb273,#0f8b8d,#6d3fc7);margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}
.tile{display:flex;flex-direction:column;gap:4px;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;text-decoration:none;color:var(--ink);min-height:96px;transition:transform .15s}.tile:hover{transform:translateY(-2px);border-color:var(--a)}
.tile b{font-size:1.08rem}.tile span{color:var(--mut);font-size:.88rem}.tile.t{background:#f3edff;border-color:#cdb8f5}
.card{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px;margin:12px 0}
h1{font-size:1.45rem;margin:.3em 0}h2{font-size:1.2rem;margin:.4em 0;color:var(--a)}h3{font-size:1.05rem;margin:.5em 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--a);color:#fff;border:0;border-radius:14px;padding:12px 18px;min-height:50px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;margin:4px}.btn.s{background:var(--a2)}.btn.g{background:#fff;color:var(--a);border:2px solid var(--a)}.btn.p{background:var(--a3)}
.opts{display:grid;gap:8px;margin:10px 0}.opt{text-align:right;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px;min-height:52px;font:inherit;cursor:pointer;color:var(--ink)}.opt:hover{border-color:var(--a)}.opt.ok{background:#e5f6ec;border-color:var(--ok)}.opt.no{background:#fdecea;border-color:var(--no)}
.why{background:#fff8e6;border-right:5px solid var(--a4);border-radius:10px;padding:10px;margin-top:8px}
.sit{background:#eef8f8;border-radius:14px;padding:12px;font-size:1.05rem}.bad{background:#fdecea;border-radius:14px;padding:12px;font-size:1.05rem}
.prog{display:flex;gap:6px;align-items:center;color:var(--mut);font-size:.85rem}.bar{flex:1;height:10px;background:#eee;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a2),var(--a))}
.flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.flip{perspective:900px;min-height:190px;cursor:pointer;border:0;background:none;padding:0;font:inherit;text-align:right}
.flip .in{position:relative;width:100%;height:100%;min-height:190px;transition:transform .5s;transform-style:preserve-3d}.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:14px;display:flex;flex-direction:column;justify-content:center;border:2px solid var(--line)}
.flip .f{background:linear-gradient(135deg,#fff,#f3edff);align-items:center;text-align:center}.flip .f .e{font-size:2.4rem}.flip .f b{font-size:1.25rem}
.flip .b{background:#fff;transform:rotateY(180deg);font-size:.92rem}.flip .b em{color:var(--mut);display:block;margin-top:6px}
.lashon{background:#f0f7ff;border:2px dashed #8fb6e8;border-radius:14px;padding:12px;margin:12px 0}
.match{display:grid;grid-template-columns:1fr 1fr;gap:8px}.match button{min-height:56px;border:2px solid var(--line);border-radius:12px;background:#fff;font:inherit;padding:8px;cursor:pointer;color:var(--ink);font-size:.9rem}.match button.sel{border-color:var(--a);background:#f3edff}.match button.done{background:#e5f6ec;border-color:var(--ok);opacity:.6}
.baskets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.basket{border:3px dashed var(--line);border-radius:16px;min-height:140px;padding:10px;background:#fff;font:inherit;cursor:pointer;color:var(--ink);text-align:center}.basket h3{margin:0 0 6px}.basket .chip{display:block;margin:4px 0;font-size:.85rem}
.chip{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 14px;margin:4px;font:inherit;cursor:pointer;color:var(--ink);min-height:44px}.chip.sel{border-color:var(--a);background:#f3edff}.chip.ok{border-color:var(--ok);background:#e5f6ec}.chip.no{border-color:var(--no);background:#fdecea}
.vote{display:flex;flex-wrap:wrap;gap:8px}.vote button{flex:1 1 180px}.tally{font-size:.85rem;color:var(--mut)}
textarea,input[type=text]{width:100%;font:inherit;border:2px solid var(--line);border-radius:12px;padding:10px;background:#fff;color:var(--ink)}textarea{min-height:120px}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}.note{padding:12px;border-radius:6px 16px 6px 16px;box-shadow:0 3px 8px #0001;transform:rotate(-1deg);position:relative;min-height:90px}.note:nth-child(2n){transform:rotate(1.2deg)}.note small{display:block;color:#0008;margin-top:6px}.note button{position:absolute;top:4px;left:4px;border:0;background:#0001;border-radius:50%;width:32px;height:32px;cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{border:1px solid var(--line);padding:8px;text-align:right;vertical-align:top}th{background:#f3edff}.tw{overflow-x:auto}
.frame{border-right:6px solid var(--a2);background:#f4fbfb;border-radius:12px;padding:12px;margin:10px 0}
.src{border-right:6px solid var(--a4);background:#fffaf0;border-radius:12px;padding:12px;margin:8px 0;font-size:1.1rem}.src small{display:block;color:var(--mut);font-size:.82rem}
.score{font-size:1.3rem;font-weight:800;text-align:center;margin:10px}
.tag{display:inline-block;background:#f3edff;color:var(--a);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}
.nk{position:fixed;bottom:14px;left:14px;z-index:6;box-shadow:0 4px 12px #0003}
.faces{display:flex;gap:6px;flex-wrap:wrap}.faces button{font-size:1.8rem;min-width:56px;min-height:56px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}.faces button.sel{border-color:var(--a);background:#f3edff}
.check label{display:flex;gap:8px;align-items:center;padding:8px;border:2px solid var(--line);border-radius:12px;margin:6px 0;background:#fff;cursor:pointer;min-height:48px}.check input{width:22px;height:22px}
.foot{text-align:center;padding:18px;color:var(--mut);display:flex;gap:8px;justify-content:center;align-items:center}.foot img{border-radius:50%}
.back{margin-bottom:6px}
@media(max-width:600px){html{font-size:17px}.lv button{padding:6px 10px;font-size:.8rem}.baskets,.match{grid-template-columns:1fr 1fr}.hero h1{font-size:1.4rem}}
@media print{@page{size:A4;margin:15mm}.top,.foot,.nk,.btn,.lv,nav{display:none!important}body{background:#fff}.card{break-inside:avoid;border:1px solid #999}}

.flip.pv,.flip.pv .in{min-height:260px}.flip.pv .f b{font-size:1rem}.flip.pv .f .e{font-size:1.6rem}
@media(max-width:600px){.top{position:static}.flip.pv,.flip.pv .in{min-height:280px}}