:root{--bg:#f4f5f3;--fg:#17201d;--mut:#5d6965;--fill:#e7eae6;--fill2:#d9dfda;--acc:#0b6e62;--on:#fff;--ease:cubic-bezier(.2,.7,.2,1)}
@media (prefers-color-scheme:dark){:root{--bg:#111716;--fg:#edf1ef;--mut:#9eaaa6;--fill:#1d2523;--fill2:#2a3431;--acc:#4cc3b1;--on:#06211d}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:720px;background:var(--bg);color:var(--fg);font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;padding:20px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
a{color:inherit;text-decoration:none}
p a,li a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
h1{font-size:30px;line-height:1.15;margin:0;letter-spacing:-.02em}
h2{font-size:18px;margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.brand{color:var(--acc);display:block}
.brand svg{height:44px;width:auto;display:block}
main{display:flex;flex-direction:column;gap:20px}
.sub{color:var(--mut);margin:4px 0 0}
.group{display:flex;flex-direction:column;gap:10px}
.group h2{font-size:15px;font-weight:600;color:var(--mut)}
.langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:600px){.langs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lang{background:var(--fill);border-radius:14px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"f n" "b b";gap:10px 8px;align-items:center;transition:background .15s var(--ease)}
.lang .flags{grid-area:f}
.lang b{grid-area:b;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.lang>span:last-child{grid-area:n;color:var(--mut);font-size:14px;font-variant-numeric:tabular-nums}
.flags{display:inline-flex;gap:4px;flex:none}
.flags img{width:24px;height:18px;border-radius:3px;object-fit:cover;display:block}
.lh{display:flex;align-items:center;gap:10px}
.lh .flags img{width:32px;height:24px;border-radius:4px}
.lh.small{gap:8px}
.lh.small .flags img{width:20px;height:15px;border-radius:2px}
.lang:hover,.row a:hover,.hit:hover{background:var(--fill2)}
.find,.add input{width:100%;border:0;border-radius:12px;background:var(--fill);padding:12px 16px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.f{appearance:none;border:0;border-radius:99px;background:var(--fill);padding:8px 16px;font-weight:500;cursor:pointer;transition:background .15s var(--ease)}
.f[aria-pressed=true]{background:var(--acc);color:var(--on)}
.list{display:flex;flex-direction:column;gap:6px}
.list h2{margin:14px 0 4px}
.list h2:first-child{margin-top:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.row>a{background:var(--fill);border-radius:12px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:8px 12px 8px 8px;min-height:56px}
.row img{width:96px;height:36px;object-fit:cover;border-radius:6px;background:var(--fill2);display:block}
.name{font-weight:600;display:block;overflow-wrap:anywhere}
.tags{display:block;color:var(--mut);font-size:14px}
.rep{appearance:none;border:0;background:var(--fill);border-radius:12px;width:44px;cursor:pointer;display:grid;place-items:center;color:var(--mut)}
.rep:hover{background:var(--fill2)}
.rep svg{width:18px;height:18px;fill:currentColor}
.panel{grid-column:1/-1;background:var(--fill);border-radius:12px;padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.panel .f{background:var(--fill2)}
.panel .f[aria-pressed=true]{background:var(--acc);color:var(--on)}
.panel .save{background:var(--fg);color:var(--bg);margin-left:auto}
.panel p{margin:0;width:100%;color:var(--mut);font-size:14px}
.more{align-self:center}
.add{display:flex;flex-direction:column;gap:8px}
.hit{appearance:none;border:0;border-radius:12px;background:var(--fill);padding:10px 16px;text-align:left;cursor:pointer}
.hero{width:100%;aspect-ratio:460/215;object-fit:cover;border-radius:14px;background:var(--fill);display:block}
.tbl{display:flex;flex-direction:column;gap:6px}
.tbl>div{background:var(--fill);border-radius:12px;padding:10px 12px 10px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.tbl .row{all:unset}
.btn{align-self:flex-start;background:var(--acc);color:var(--on);border-radius:99px;padding:10px 18px;font-weight:600}
.prose{display:flex;flex-direction:column;gap:12px}
.prose h2{margin-top:12px}
.prose p,.prose ul{margin:0}
.prose ul{padding-left:20px}
footer{margin-top:48px;color:var(--mut);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 16px}
footer span{width:100%}
#ts{width:100%}
footer a{text-decoration:none}
.rep.done,.rep.done:hover{background:var(--acc);color:var(--on)}
.pre .row:nth-child(n+17){display:none}
.ch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ch h2{color:var(--fg);font-size:18px}
.ad{background:var(--fill);color:var(--mut);border-radius:6px;padding:2px 8px;font-size:13px;font-weight:600}
.courses{display:flex;flex-direction:column;gap:6px}
.course{background:var(--fill);border-radius:12px;padding:12px 16px}
.course:hover{background:var(--fill2)}
[hidden]{display:none!important}