:root{--font-serif: "Source Serif 4", Georgia, "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;--bg: #f2ede4;--bg-tint: radial-gradient( 1200px 600px at 12% -10%, rgba(192, 86, 58, .06), transparent 60% ), radial-gradient( 900px 500px at 110% 0%, rgba(192, 86, 58, .05), transparent 55% );--surface: #fbf8f1;--surface-2: #f4eee3;--brd: #e7ddcb;--brd-2: #dccfb8;--ink: #2a2622;--ink-2: #6f6657;--ink-3: #9a9183;--primary: #c0563a;--primary-hover: #cb6a4f;--primary-soft: rgba(192, 86, 58, .1);--good: #2f8f6b;--good-soft: rgba(47, 143, 107, .12);--warn: #b87514;--err: #c0392b;--shadow: 0 18px 48px rgba(120, 72, 40, .1);--shadow-sm: 0 2px 12px rgba(120, 72, 40, .08);--radius: 18px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font-serif);-webkit-font-smoothing:antialiased;line-height:1.6;color:var(--ink);background-color:var(--bg);background-image:var(--bg-tint);background-attachment:fixed}h1,h2,h3,h4{font-family:var(--font-serif);letter-spacing:-.01em;font-weight:600}.page{width:min(1080px,calc(100% - 2.5rem));margin:0 auto;padding:2.5rem 0 4rem}.hero{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--brd)}.hero-top{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end}.eyebrow{margin:0 0 .55rem;font-family:var(--font-sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}h1{margin:0;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1.08;font-weight:600;color:var(--ink)}.lead{margin:.7rem 0 0;max-width:28rem;color:var(--ink-2);font-size:1.05rem;font-weight:400}.ring{text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}.ring strong{display:block;font-size:2.6rem;line-height:1;font-weight:600;letter-spacing:-.02em}.ring span{color:var(--ink-3);font-size:1rem}.ring em{display:block;margin-top:.35rem;font-style:normal;font-family:var(--font-sans);font-size:.8rem;font-weight:500;color:var(--primary);letter-spacing:.04em}.bar{margin-top:1.35rem;height:3px;background:var(--brd);border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:var(--primary);border-radius:inherit;transition:width .4s ease}.topic-strip{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}.chip{font-family:var(--font-sans);font-size:.72rem;font-weight:500;padding:.28rem .6rem;border-radius:999px;border:1px solid var(--brd);color:var(--ink-2);background:var(--surface)}.chip.done{color:var(--good);border-color:#2f8f6b47;background:var(--good-soft)}.filters{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:.85rem;align-items:end;margin-bottom:1.5rem}.filters label{display:grid;gap:.35rem}.filters span{font-family:var(--font-sans);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}.filters input,.filters select{width:100%;border-radius:12px;border:1px solid var(--brd);background:var(--surface);color:var(--ink);padding:.7rem .85rem;font-family:var(--font-sans);font-size:.92rem;box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}.filters input:focus,.filters select:focus{outline:none;border-color:var(--brd-2);box-shadow:0 0 0 3px var(--primary-soft)}.shown{margin:0;font-family:var(--font-sans);color:var(--ink-3);font-size:.82rem;padding-bottom:.75rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;perspective:1400px}.card{position:relative;min-height:220px;border-radius:var(--radius);transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.card.is-flipped{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;border:1px solid var(--brd);background:var(--surface);padding:1.15rem 1.2rem;box-shadow:var(--shadow-sm)}.card-front{width:100%;text-align:left;color:inherit;cursor:pointer;font:inherit;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.card:not(.is-flipped) .card-front:hover{border-color:var(--brd-2);box-shadow:var(--shadow)}.card.is-todo .card-front{background:var(--surface-2)}.card.is-todo h2{color:var(--ink-2)}.card-back{transform:rotateY(180deg);display:flex;flex-direction:column;gap:.6rem;overflow:auto}.card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem}.pid{font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.8rem;font-weight:500}.diff{font-family:var(--font-sans);font-size:.68rem;font-weight:600;letter-spacing:.04em;padding:.22rem .5rem;border-radius:999px;border:1px solid var(--brd);color:var(--ink-2);background:transparent}.diff-Easy{color:var(--good);border-color:#2f8f6b4d;background:var(--good-soft)}.diff-Medium{color:var(--warn);border-color:#b875144d;background:#b875141a}.diff-Hard{color:var(--err);border-color:#c0392b47;background:#c0392b14}.card h2{margin:0;font-size:1.28rem;line-height:1.3;font-weight:600}.card-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}.card-tags span{font-family:var(--font-sans);font-size:.7rem;font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--brd);padding:.2rem .5rem;border-radius:999px}.back-close{align-self:flex-start;border:1px solid var(--brd);background:var(--surface-2);color:var(--ink-2);border-radius:999px;padding:.28rem .7rem;font-family:var(--font-sans);font-size:.72rem;font-weight:500;cursor:pointer;transition:border-color .15s ease,color .15s ease}.back-close:hover{border-color:var(--brd-2);color:var(--ink)}.card-back h3{margin:0;font-size:1.05rem;font-weight:600}.steps{margin:0;padding-left:1.15rem;color:var(--ink);font-size:.92rem;line-height:1.5}.steps li+li{margin-top:.4rem}.mnemonic{margin:.15rem 0 0;padding:.85rem .95rem;border-radius:14px;background:var(--primary-soft);border:1px solid rgba(192,86,58,.22);font-size:1rem;line-height:1.45;color:var(--ink)}.mnemonic span{display:block;font-family:var(--font-sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:.3rem;font-weight:700}.empty{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}.leet-link{margin-top:auto;font-family:var(--font-sans);color:var(--primary);font-size:.82rem;font-weight:600;text-decoration:none}.leet-link:hover{color:var(--primary-hover);text-decoration:underline;text-underline-offset:3px}.footer,.hint,.error{font-family:var(--font-sans);color:var(--ink-3);font-size:.82rem}.error{color:var(--err)}.footer{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--brd)}@media(max-width:720px){.page{width:min(1080px,calc(100% - 1.5rem));padding-top:1.5rem}.filters{grid-template-columns:1fr}.shown{padding-bottom:0}.hero-top{flex-direction:column;align-items:flex-start}.ring{text-align:left}h1{font-size:2.2rem}}