*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#09090b;--surface:#131316;--elevated:#1a1a1f;--text:#fafafa;--muted:#a1a1aa;--dim:#71717a;--accent:#3b82f6;--accent-soft:#3b82f626;--easy:#4ade80;--medium:#facc15;--hard:#f87171;--nav:52px;--font:"Inter", system-ui, -apple-system, sans-serif;--font-code:"Fira Code", ui-monospace, monospace;font-family:var(--font);-webkit-font-smoothing:antialiased}html,body,#root{background:var(--bg);height:100%;color:var(--text);overflow:hidden}.app{flex-direction:column;max-width:480px;height:100%;min-height:0;margin:0 auto;display:flex}.feed{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;min-height:0;padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px) + 8px);flex:1;overflow:hidden auto}.feed-header{z-index:10;background:var(--bg);border-bottom:1px solid var(--elevated);padding:12px 16px 0;position:sticky;top:0}.feed-header-row{justify-content:space-between;align-items:center;gap:12px;padding-bottom:10px;display:flex}.feed-header-left{flex-direction:column;gap:2px;min-width:0;display:flex}.playlist-name{color:var(--text);font-size:13px;font-weight:600}.playlist-count{color:var(--dim);font-size:12px}.feed-actions{flex-shrink:0;gap:4px;display:flex}.icon-btn{width:36px;height:36px;color:var(--dim);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.icon-btn:hover{background:var(--elevated);color:var(--text)}.icon-btn.active{background:var(--accent-soft);color:var(--accent)}.progress-track{background:var(--elevated);border-radius:1px;height:2px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:1px;height:100%;transition:width .25s}.card{flex-direction:column;gap:20px;padding:20px 16px 32px;display:flex}.card-enter{animation:.34s cubic-bezier(.22,1,.36,1) both cardSlideIn}.card-enter-next{--slide-from:56px}.card-enter-prev{--slide-from:-56px}@keyframes cardSlideIn{0%{transform:translateY(var(--slide-from,56px));opacity:0}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.card-enter{animation:none}}.card h1{letter-spacing:-.02em;font-size:1.625rem;font-weight:700;line-height:1.25}.meta-line{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.meta-sep{color:var(--dim)}.meta-text{color:var(--muted)}.diff{font-weight:600}.diff.easy{color:var(--easy)}.diff.medium{color:var(--medium)}.diff.hard{color:var(--hard)}.blurb{color:var(--text);font-size:1rem;line-height:1.6}.section{flex-direction:column;gap:10px;display:flex}.section-label{text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-size:11px;font-weight:600}.example-list{background:var(--surface);border:1px solid var(--elevated);border-radius:10px;flex-direction:column;gap:0;display:flex;overflow:hidden}.example-row{border-bottom:1px solid var(--elevated);align-items:flex-start;gap:10px;padding:12px 14px;display:flex}.example-row:last-child{border-bottom:none}.example-num{width:18px;color:var(--dim);flex-shrink:0;padding-top:2px;font-size:11px;font-weight:600}.example-code{font-family:var(--font-code);color:var(--muted);word-break:break-word;font-size:.8rem;line-height:1.5}.example-arrow{color:var(--accent)}.example-out{color:var(--text)}.pitfall p{color:var(--muted);font-size:.95rem;line-height:1.55}.sheet-backdrop{z-index:100;background:#0000008c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);width:100%;max-width:480px;max-height:75vh;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;overflow-y:auto}.sheet-handle{background:var(--dim);opacity:.5;border-radius:2px;width:36px;height:4px;margin:4px auto 16px}.sheet h2{margin-bottom:14px;font-size:1rem;font-weight:600}.sheet ul{flex-direction:column;gap:6px;list-style:none;display:flex}.sheet li a{background:var(--elevated);color:var(--text);border-radius:10px;align-items:center;gap:12px;padding:12px;text-decoration:none;transition:background .15s;display:flex}.sheet li a:active{background:var(--bg)}.rank{width:22px;height:22px;color:var(--accent);background:var(--accent-soft);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex}.res-body{flex-direction:column;gap:2px;min-width:0;display:flex}.res-title{font-size:.9rem;font-weight:500}.res-meta{color:var(--dim);font-size:12px}.panel{min-height:0;padding:20px 16px calc(var(--nav) + env(safe-area-inset-bottom,0px) + 16px);-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.panel h2{letter-spacing:-.02em;margin-bottom:16px;font-size:1.25rem;font-weight:700}.empty{color:var(--muted);font-size:.95rem;line-height:1.5}.list{flex-direction:column;gap:6px;list-style:none;display:flex}.list li{background:var(--surface);border:1px solid var(--elevated);border-radius:10px;overflow:hidden}.list li button{text-align:left;width:100%;color:var(--text);font-size:.95rem;font-family:var(--font);cursor:pointer;background:0 0;border:none;padding:14px 16px}.review-actions{gap:6px;padding:0 10px 10px;display:flex}.review-actions button{font-size:13px;font-family:var(--font);cursor:pointer;background:var(--elevated);color:var(--muted);border:none;border-radius:8px;flex:1;padding:8px;font-weight:500}.review-actions button:first-child{background:var(--accent-soft);color:var(--accent)}.playlist-grid{flex-direction:column;gap:8px;display:flex}.playlist-card{text-align:left;border:1px solid var(--elevated);background:var(--surface);width:100%;color:var(--text);font-family:var(--font);cursor:pointer;border-radius:10px;flex-direction:column;gap:4px;padding:16px;transition:border-color .15s;display:flex}.playlist-card.selected{border-color:var(--accent)}.playlist-card strong{font-size:1rem;font-weight:600}.playlist-card span{color:var(--muted);font-size:.875rem}.playlist-card .count{color:var(--dim);font-size:12px}.bottom-nav{width:100%;max-width:480px;height:var(--nav);background:var(--surface);border-top:1px solid var(--elevated);z-index:50;padding-bottom:env(safe-area-inset-bottom,0);display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav button{color:var(--dim);font-size:10px;font-weight:500;font-family:var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;display:flex;position:relative}.bottom-nav button.active{color:var(--accent)}.badge{background:var(--accent);color:#fff;border-radius:8px;justify-content:center;align-items:center;min-width:15px;height:15px;padding:0 4px;font-size:9px;font-weight:600;display:flex;position:absolute;top:4px;right:calc(50% - 20px)}.loading{color:var(--muted);justify-content:center;align-items:center;display:flex}