@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap";:root{--bg:#070a0e;--bg-elev:#0e141c;--surface:#151c26;--surface-2:#1c2532;--text:#eef3f8;--muted:#8b98a8;--primary:#3d9b8f;--primary-glow:#3d9b8f59;--border:#273142;--coding:#7a93a8;--design:#4fad9d;--behavioral:#c49a52;--card-front:#1a2330;--card-back:#0c1118;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--font-ui:"IBM Plex Sans", system-ui, sans-serif;--font-display:"Sora", "IBM Plex Sans", sans-serif;--font-card:"Source Serif 4", "Iowan Old Style", Georgia, serif;--tap:52px;--page-x:max(18px, var(--safe-left));--radius:18px}*,:before,:after{box-sizing:border-box}html{background:var(--bg);height:100%}html,body,#root{height:100%;margin:0}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}button,a{font:inherit;color:inherit;touch-action:manipulation}button{appearance:none}a{text-decoration:none}.app-shell{flex-direction:column;width:100%;max-width:430px;min-height:100svh;margin:0 auto;display:flex;position:relative}.ambient{pointer-events:none;z-index:-1;background:radial-gradient(ellipse 90% 55% at 50% -10%, #3d9b8f29, transparent 55%), radial-gradient(ellipse 60% 40% at 100% 80%, #7a93a814, transparent 50%), radial-gradient(ellipse 50% 35% at 0% 70%, #c49a520f, transparent 45%), var(--bg);position:fixed;inset:0}.noise{pointer-events:none;z-index:-1;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.page,.practice-screen{z-index:1;isolation:isolate;position:relative}.page{min-height:100svh;padding-top:calc(24px + var(--safe-top));flex-direction:column;flex:1;display:flex}.home-page{padding-bottom:0}.home-scroll{-webkit-overflow-scrolling:touch;padding:0 var(--page-x) 12px;padding-right:max(18px, var(--safe-right));flex-direction:column;flex:1;gap:22px;display:flex;overflow-y:auto}.home-header h1{font-family:var(--font-display);letter-spacing:-.045em;margin:6px 0 10px;font-size:clamp(2.1rem,9vw,2.55rem);font-weight:700;line-height:1.05}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:0;font-size:.72rem;font-weight:600}.subtitle{color:var(--muted);max-width:28ch;margin:0;font-size:1rem;line-height:1.45}.session-meta{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;margin:0;font-size:.88rem}.mode-list{flex-direction:column;gap:10px;display:flex}.mode-row{border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(165deg, #ffffff08, transparent 40%), var(--surface);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:72px;padding:14px 16px 14px 18px;transition:border-color .16s,background .16s,transform .12s,box-shadow .16s;display:flex;position:relative;overflow:hidden}.mode-row:active{transform:scale(.985)}.mode-accent{background:var(--border);border-radius:3px;width:3px;transition:background .16s;position:absolute;top:14px;bottom:14px;left:0}.mode-random .mode-accent{background:var(--primary)}.mode-coding .mode-accent{background:var(--coding)}.mode-design .mode-accent{background:var(--design)}.mode-behavioral .mode-accent{background:var(--behavioral)}.mode-row.selected{border-color:color-mix(in srgb, var(--primary) 55%, var(--border));box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent), 0 12px 40px #00000047;background:linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%), var(--surface)}.mode-row-main{flex-direction:column;gap:3px;min-width:0;padding-left:6px;display:flex}.mode-name{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.12rem;font-weight:600}.mode-hint{color:var(--muted);font-size:.82rem}.mode-count-badge{background:var(--surface-2);min-width:44px;height:44px;color:var(--text);font-variant-numeric:tabular-nums;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;padding:0 10px;font-size:1rem;font-weight:700;display:inline-flex}.mode-row.selected .mode-count-badge{background:color-mix(in srgb, var(--primary) 22%, var(--surface-2));color:#d9fff8}.home-cta{padding:14px var(--page-x) calc(14px + var(--safe-bottom));padding-right:max(18px, var(--safe-right));background:linear-gradient(to top, var(--bg) 55%, transparent);z-index:5;position:sticky;bottom:0}.btn{min-height:var(--tap);background:var(--surface);cursor:pointer;font-family:var(--font-display);letter-spacing:-.01em;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:16px;justify-content:center;align-items:center;padding:14px 18px;font-size:1.05rem;font-weight:600;transition:transform 80ms,opacity .12s,box-shadow .16s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg, #4aafa2 0%, var(--primary) 100%);color:#041210;box-shadow:0 8px 28px var(--primary-glow)}.btn-ghost{border-color:var(--border);color:var(--text);background:#ffffff08}.btn-block{width:100%}.practice-screen{height:100svh;max-height:100dvh;padding:calc(10px + var(--safe-top)) max(16px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(16px, var(--safe-left));overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;max-width:430px;margin:0 auto;display:flex;overflow:hidden}.practice-top{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;display:flex}.back-link{min-width:44px;min-height:44px;color:var(--muted);align-items:center;font-weight:600;display:inline-flex}.practice-meta{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:500}.progress-track{background:var(--border);border-radius:999px;flex-shrink:0;height:3px;margin:12px 0 14px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--primary), #6ec4b8);height:100%;transition:width .2s}.card-stage{perspective:1400px;flex:1;align-items:stretch;min-height:0;display:flex}.card-motion{cursor:grab;touch-action:none;flex:1;width:100%;min-height:0}.card-motion:active{cursor:grabbing}.flip-scene{perspective:1400px;width:100%;height:100%}.flip-card{width:100%;height:100%;transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.8,.2,1);position:relative}.flip-scene.is-flipped .flip-card{transform:rotateY(180deg)}.face{backface-visibility:hidden;border:1px solid #0000;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:22px 20px 48px;display:flex;position:absolute;inset:0;overflow:hidden}.face-front{background:linear-gradient(160deg, #3d9b8f1a 0%, transparent 42%), linear-gradient(165deg, #222c3a 0%, var(--card-front) 48%, #141b26 100%);color:var(--text);border-color:#334155;box-shadow:0 24px 60px #00000080,inset 0 1px #ffffff0f}.face-front:before{content:"";background:color-mix(in srgb, var(--primary) 55%, #334155);border-radius:0 3px 3px 0;width:3px;position:absolute;top:18px;bottom:18px;left:0}.face-back{background:linear-gradient(160deg, #3d9b8f38 0%, transparent 50%), linear-gradient(165deg, #15202c 0%, var(--card-back) 55%, #080c11 100%);color:var(--text);border-color:color-mix(in srgb, var(--primary) 40%, var(--border));box-shadow:0 24px 60px #0000008c, 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 1px 0 #6ec4b814;transform:rotateY(180deg)}.face-back:before{content:"Answer";font-family:var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--primary) 85%, var(--muted));font-size:.65rem;font-weight:700;position:absolute;top:18px;right:18px}.chip{font-family:var(--font-ui);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;flex-shrink:0;padding:6px 12px;font-size:.68rem;font-weight:700;display:inline-flex}.chip-coding{color:var(--coding);background:color-mix(in srgb, var(--coding) 18%, transparent)}.chip-design{color:var(--design);background:color-mix(in srgb, var(--design) 18%, transparent)}.chip-behavioral{color:var(--behavioral);background:color-mix(in srgb, var(--behavioral) 18%, transparent)}.flash-front{font-family:var(--font-card);letter-spacing:-.015em;overflow-wrap:anywhere;text-align:center;max-width:18em;font-size:clamp(1.45rem,6.2vw,1.85rem);font-weight:600;line-height:1.28}.flash-back-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;text-align:center;width:100%;max-height:100%;overflow-y:auto}.flash-back{white-space:pre-wrap;overflow-wrap:anywhere;color:#dce6ef;font-size:clamp(1.05rem,4.2vw,1.18rem);line-height:1.5}.flash-trap{color:var(--muted);margin-top:16px;font-size:.92rem;font-style:italic}.tap-hint{font-family:var(--font-ui);color:var(--muted);pointer-events:none;text-align:center;font-size:.8rem;position:absolute;bottom:18px;left:16px;right:16px}.practice-actions{flex-direction:column;flex-shrink:0;gap:8px;margin-top:14px;display:flex}.practice-actions .btn{min-height:56px;font-size:1.08rem}.gesture-hint{text-align:center;color:var(--muted);margin:0;font-size:.78rem}.practice-done{text-align:center;flex-direction:column;flex:1;justify-content:center;gap:10px;padding:0 8px;display:flex}.practice-done h1{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:2rem}.practice-done .subtitle{max-width:none;margin:0 auto}.practice-done-actions{flex-direction:column;gap:10px;margin-top:18px;display:flex}.fade-up{animation:.52s cubic-bezier(.2,.8,.2,1) both fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width>=768px){.app-shell{border-left:1px solid var(--border);border-right:1px solid var(--border)}}@media (height<=700px){.home-header h1{font-size:1.85rem}.mode-row{min-height:62px}.face{padding:18px 16px 42px}}@media (prefers-reduced-motion:reduce){.fade-up{animation:none}.flip-card{transition:none}}