:root{color-scheme:light;--bg: #eef1ff;--surface: #ffffff;--ink: #0e1230;--ink-2: #4a547e;--brand: #4b5cff;--brand-2: #7a4bff;--muted: #8a92b5;--shadow-lg: 0 30px 60px -20px rgba(40, 45, 130, .35), 0 18px 36px -18px rgba(40, 45, 130, .22);--shadow-md: 0 16px 32px -18px rgba(40, 45, 130, .25)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(1000px 600px at 15% -10%,#dde4ff 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#e7d7ff 0%,transparent 55%),var(--bg);overflow:hidden;overscroll-behavior:none}.stage{height:100vh;height:100dvh;width:100%;max-width:720px;margin:0 auto;padding:max(env(safe-area-inset-top),1rem) 1.25rem max(env(safe-area-inset-bottom),1rem);display:grid;grid-template-rows:auto 1fr auto;gap:1rem}.topbar{display:flex;align-items:center;gap:.75rem}.counter{font-variant-numeric:tabular-nums;font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:.01em;min-width:4ch}.counter-sep{color:var(--muted);margin:0 .15rem;font-weight:500}.bar{flex:1;height:4px;background:#14195014;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:999px;transition:width .26s cubic-bezier(.2,.8,.2,1)}.reshuffle{border:none;background:#4b5cff14;color:var(--brand);width:34px;height:34px;border-radius:999px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background .18s ease,transform .18s ease;display:inline-grid;place-items:center}.deck-switch{border:none;background:#4b5cff14;color:var(--brand);height:34px;padding:0 .7rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,transform .18s ease;display:inline-grid;place-items:center}.deck-switch:hover{background:#4b5cff29;transform:translateY(-1px)}.deck-switch:active{transform:translateY(0) scale(.96)}.reshuffle:hover{background:#4b5cff29;transform:rotate(45deg)}.reshuffle:active{transform:rotate(180deg) scale(.94)}.deck{position:relative;display:grid;place-items:center;perspective:1800px;min-height:0}.card{position:absolute;inset:0;margin:auto;width:100%;max-width:560px;height:min(100%,640px);border-radius:28px;cursor:grab;touch-action:pan-y;will-change:transform;-webkit-user-select:none;user-select:none;transform-style:preserve-3d;transition:filter .22s ease}.card:active{cursor:grabbing}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.22,.88,.3,1.06)}.card.is-flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:28px;padding:2rem 1.75rem;font-family:Helvetica Neue,sans-serif;background:var(--surface);box-shadow:var(--shadow-lg);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:1rem;overflow:auto;border-top:2.5px solid #333;border-left:2.5px solid #333;border-right:4px solid #333;border-bottom:4px solid #333}.card-face--front{background:linear-gradient(135deg,#4b5cff0a,#7a4bff0d),var(--surface)}.card-face--back{transform:rotateY(180deg);background:#b3cde0;color:var(--ink)}.card--peek{pointer-events:none;transform:translateY(18px) scale(.94);opacity:.6;filter:blur(.3px);z-index:0}.card--peek .card-face{box-shadow:var(--shadow-md)}.card:not(.card--peek){z-index:1}.card-tag{align-self:flex-start;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brand);background:#4b5cff1a;padding:.3rem .6rem;border-radius:999px}.card-tag--back{color:#fff;background:#ffffff38}.card-q{margin:0;font-size:clamp(1.1rem,3.4vw,1.45rem);line-height:1.5;font-weight:600;color:var(--ink);letter-spacing:-.005em}.card-options{margin:.25rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}.card-options li{padding:.75rem .9rem;border-radius:14px;background:#4b5cff0d;border:1px solid rgba(75,92,255,.08);font-size:.95rem;line-height:1.45;color:var(--ink-2)}.card-a{margin:0;font-size:clamp(1rem,2.6vw,1.15rem);line-height:1.55;font-weight:500;color:#fff;letter-spacing:-.005em;display:flex;flex-direction:column;gap:.6rem}.card-a>p{margin:0}.card-a strong{color:#fff;font-weight:700;background:#ffffff1a;padding:0 .2rem;border-radius:4px}.card-a em{font-style:italic;color:#ffffffeb}.card-a code{background:#00000038;color:#fff;padding:.1rem .35rem;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}.card-a ul,.card-a ol{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.35rem}.card-a li{line-height:1.5}.card-q strong{color:var(--brand)}.card-q em{font-style:italic}.card-q code{background:#4b5cff1f;color:var(--brand);padding:.08rem .32rem;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.hint{margin:0;text-align:center;font-size:.8rem;color:var(--muted);letter-spacing:.02em;font-weight:500}.error{align-self:center;justify-self:center;color:#b43030;font-weight:600;text-align:center}.restart{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 1.5rem);left:50%;transform:translate(-50%);border:none;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:.85rem 1.4rem;border-radius:999px;font-weight:700;box-shadow:0 18px 36px -12px #4b5cff80;cursor:pointer;transition:transform .16s ease;z-index:20}.restart:hover{transform:translate(-50%) translateY(-2px)}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-width:480px){.card-face{padding:1.5rem 1.25rem}}
