:root{font-synthesis:none;text-rendering:optimizelegibility;--color-bg:#0f1117;--color-surface:#181b23;--color-surface-hover:#222631;--color-border:#e7e9ee;--color-text:#e3e4e5;--color-text-muted:#9298a6;--color-cyan:#00d9ff;--color-violet:#8b5cf6;--color-pink:#f43f8c;--color-orange:#ff9f1c;--color-green:#22c55e;--color-success:#22c55e;--color-danger:#ef4444;--radius-small:5px;--radius-medium:10px;--radius-large:15px;--border-width:1px;--shadow-card:0 12px 40px #00000059;--animation-duration:.2s;--animation-easing:ease-out;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-height:100%}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}h1,h2,h3,p{margin-top:0}.app-shell{background:var(--color-bg);min-height:100%}.app-main{max-width:1080px;margin:0 auto;padding:1rem}.subtopic-list{flex-flow:wrap;gap:.25rem;margin-top:.75rem;display:flex}.subtopic-button{font:inherit;color:var(--color-text);border:var(--border-width) solid var(--color-cyan);border-radius:var(--radius-small);cursor:pointer;transition:background var(--animation-duration) var(--animation-easing), border-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);background:0 0;padding:.5rem 1rem;font-weight:600}.subtopic-button.is-active,.subtopic-button:hover{border-color:var(--color-pink);background:var(--color-pink);color:var(--color-bg)}.card-controls{justify-content:center;align-items:center;gap:.75rem;width:min(98vw,100%);display:flex}.control-button{width:min(100%,80px);color:var(--color-text);border:var(--border-width) solid var(--color-violet);border-radius:var(--radius-small);cursor:pointer;transition:border-color var(--animation-duration) var(--animation-easing);background:0 0;justify-content:center;align-items:center;padding:.45rem .5rem;display:flex}.control-button:hover{border-color:var(--color-pink)}@media (width<=640px){.app-main{flex-direction:column;height:100dvh;display:flex}.navigation-trigger,.subtopic-list{flex-shrink:0}.card-stage{flex:1;min-height:0}}.flashcard-shell{perspective:1000px;width:min(96vw,100%);min-width:280px;height:min(70vh,800px);min-height:360px;position:relative}.flashcard-button{appearance:none;cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0}.flashcard{cursor:pointer;touch-action:pan-y;transform-origin:50%;width:100%;height:100%;transform-style:preserve-3d;transition:all var(--animation-duration) var(--animation-easing);will-change:transform;display:inline-block;position:relative;transform:translateZ(0)rotateY(0)}.flashcard:after{content:"";z-index:-1;opacity:0;transition:all var(--animation-duration) var(--animation-easing);border-radius:18px;position:absolute;inset:0;box-shadow:0 14px 50px -4px #0f172a2e}.flashcard:hover:after{opacity:1}.flashcard.is-flipped{transform:rotateY(180deg)}.flashcard.is-flipped:after{display:none}.flashcard-face{backface-visibility:hidden;transform-origin:50%;background:var(--color-bg);color:var(--color-text);border:var(--border-width) solid var(--color-text);border-radius:var(--radius-small);display:flex;position:absolute;inset:0;overflow:hidden}.flashcard-front{z-index:2}.flashcard-back{transform:rotateY(180deg)translateZ(.1px)}.card-surface{flex-direction:column;width:100%;min-height:0;display:flex}.card-header{border-bottom:var(--border-width) solid var(--color-border);background:var(--color-border);text-transform:uppercase;letter-spacing:.08em;color:#475569;flex-shrink:0;justify-content:space-between;align-items:center;padding:.6rem .8rem;font-size:.78rem;display:flex}.card-badge{font-weight:700}.card-label{font-size:1.2rem;font-weight:600}.card-content{flex-direction:column;flex:1;min-height:0;padding:11px 10px 10px;display:flex;overflow-y:auto}.card-content img{object-fit:contain;align-self:center;max-width:min(600px,100%);height:auto}.card-content h1,h2,h3{text-transform:uppercase;font-weight:400}.card-content p{text-align:start;margin:0}.card-content ul{margin:.35rem 0}.card-content li{text-align:start;width:fit-content}.content-block{width:100%}.content-block--text,.content-block--section p,.content-block--link p{color:#1f2937;margin:0;line-height:1.6}.content-block--text{text-align:center;font-size:1.15rem;font-weight:600}.content-block--image{flex-direction:column;align-items:center;gap:8px;margin:0;display:flex}.content-image{object-fit:contain;background:#f8fafc;border-radius:12px;width:100%;max-height:180px}.content-block--image figcaption{color:#475569;font-size:.8rem}.content-block--section{border-left:3px solid #7c3aed;padding-left:12px}.content-block--section h3{color:#4c1d95;margin:0 0 6px;font-size:.95rem}.content-block--list ul,.content-block--list ol{color:#1f2937;margin:0;padding-left:1.2rem;line-height:1.6}.content-block--link{flex-direction:column;gap:6px;display:flex}@media (width<=640px){.flashcard-shell{width:min(96vw,100%);min-width:240px;height:75vh;min-height:300px}.card-header{padding:.6rem .7rem}.card-content{padding:1rem .75rem .75rem}}.card-stage{flex-direction:column;align-items:center;gap:1rem;padding:1rem 0 0;display:flex}.card-meta{color:#cbd5e1;justify-content:end;width:min(98vw,100%);font-size:.9rem;display:flex;position:relative;right:0}.card-controls{flex-wrap:wrap;justify-content:center;gap:.75rem;width:min(98vw,100%);display:flex}.empty-state{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-small);color:#475569;text-align:center;place-items:center;width:min(100%,540px);min-height:260px;padding:2rem;display:grid}.navigation-trigger{border:var(--border-width) solid var(--color-violet);border-radius:var(--radius-small);width:fit-content;color:var(--color-text);font:inherit;cursor:pointer;transition:transform var(--animation-duration) var(--animation-easing), border-color var(--animation-duration) var(--animation-easing);background:0 0;align-items:center;gap:.75rem;padding:.75rem 1rem;font-weight:600;display:flex}.navigation-trigger:hover{border-color:var(--color-pink)}.navigation-burger{flex-direction:column;justify-content:center;gap:4px;width:20px;height:20px;display:flex;position:relative}.navigation-burger span{background:currentColor;border-radius:2px;width:20px;height:2px;transition:transform .18s,opacity .18s;display:block}.navigation-trigger:hover .navigation-burger span:first-child{transform:translate(2px)}.navigation-trigger:hover .navigation-burger span:nth-child(3){transform:translate(-2px)}.navigation-current{white-space:nowrap;align-items:center;gap:8px;display:flex}.navigation-separator{opacity:.5}.navigation-modal{z-index:1000;background:var(--color-bg);flex-direction:column;min-height:100dvh;display:flex;position:fixed;inset:0}.navigation-modal__header{justify-content:space-between;align-items:center;display:flex}.navigation-close{width:3rem;height:3rem;color:var(--color-text);cursor:pointer;background:0 0;border:0;border-radius:50%;padding:0;transition:transform .16s;position:absolute;top:1rem;right:1rem}.navigation-close:hover{transform:rotate(90deg)}.navigation-close span{background:currentColor;border-radius:2px;width:22px;height:2px;position:absolute;top:50%;left:50%}.navigation-close span:first-child{transform:translate(-50%,-50%)rotate(45deg)}.navigation-close span:last-child{transform:translate(-50%,-50%)rotate(-45deg)}.navigation-modal__content{width:min(900px,100% - 40px);margin:0 auto;padding:40px 0 60px;overflow-y:auto}.navigation-section{margin-bottom:44px}.navigation-section h3{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 18px;font-size:.9rem;font-weight:700}.navigation-subjects,.navigation-topics{flex-wrap:wrap;gap:12px;display:flex}.navigation-option{border:var(--border-width) solid var(--color-violet);border-radius:var(--radius-small);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;transition:background var(--animation-duration) var(--animation-easing), border-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);padding:.75rem 1.5rem;font-weight:600}.navigation-option:hover,.navigation-option.is-active{border-color:var(--color-pink);background:var(--color-pink);color:var(--color-bg)}@media (width<=640px){.navigation-trigger{padding:.5rem 1rem}.navigation-current{gap:6px;font-size:.9rem}.navigation-close{width:3rem;height:3rem;top:.5rem;right:.5rem}.navigation-modal__content{width:calc(100% - 32px);padding-top:28px}.navigation-option{flex:auto;padding:12px 15px}}