:root{--bg1:#e9efff;--bg2:#e8fff0;--card:#1f1f1f;--text:#fff;--muted:#9aa0a6;--accent:#5a7bff;--accent2:#31cf7b}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:radial-gradient(1200px 800px at 25% 50%,var(--bg1),transparent 60%),radial-gradient(1200px 800px at 75% 50%,var(--bg2),transparent 60%);color:#111}
.page{display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}
.title{font-weight:700}
.hint{color:#6b7280;font-size:14px}
.stage{flex:1;display:flex;align-items:center;justify-content:center;gap:28px;padding:24px}
.nav{width:44px;height:44px;border-radius:999px;border:none;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.1);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-left{color:var(--accent)}
.nav-right{color:var(--accent2)}
.nav:active{transform:scale(.98)}
.card{position:relative;width:min(560px,88vw);height:min(680px,72vh);border-radius:28px;background:var(--card);color:var(--text);box-shadow:0 24px 60px rgba(0,0,0,.25);perspective:1200px;cursor:pointer}
.card-face{position:absolute;inset:0;padding:32px 36px;border-radius:28px;display:flex;align-items:center;justify-content:center;text-align:left;line-height:1.6;font-size:28px;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .5s ease}
.card-back{transform:rotateY(180deg)}
.card.flipped .card-front{transform:rotateY(180deg)}
.card.flipped .card-back{transform:rotateY(360deg)}
.card-foot{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:var(--muted);font-size:14px}
.bottombar{display:flex;gap:16px;align-items:center;justify-content:center;padding:16px 24px}
.action{padding:10px 14px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#111;cursor:pointer}
.action.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border:none}
.progress{min-width:120px;text-align:center;color:#374151}
.range{width:min(520px,72vw);height:6px}
.range{appearance:none;background:#e5e7eb;border-radius:999px;outline:none}
.range::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:999px;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.range:disabled{opacity:.6}
@media (max-width:640px){.card-face{font-size:22px;padding:24px}.nav{width:40px;height:40px;font-size:20px}}