*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,system-ui,sans-serif;background:linear-gradient(160deg,#5b3df5,#20c3d0);min-height:100vh;color:#1d1b3a;user-select:none;-webkit-user-select:none}
header{display:flex;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 18px 8px;color:#fff;font-weight:700;font-size:18px}
main{padding:8px 14px 100px;max-width:560px;margin:auto}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 12px #0002}
nav button{flex:1;border:0;background:none;font-size:24px;padding:8px}nav small{display:block;font-size:11px}
.card{background:#fff;border-radius:22px;padding:18px;margin:10px 0;box-shadow:0 6px 18px #0002}
h1{color:#fff;margin:6px 0 4px;font-size:26px}h2{margin:0 0 8px;font-size:21px}
.big{display:block;width:100%;border:0;border-radius:18px;padding:16px;font-size:19px;font-weight:700;margin:8px 0;background:#f1efff;color:#1d1b3a;transition:transform .1s}
.big:active{transform:scale(.97)}.primary{background:#ff8a00;color:#fff}.ok{background:#2ecc71!important;color:#fff}.bad{background:#ff5a5f!important;color:#fff}
.bar{height:12px;background:#ffffff55;border-radius:9px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:#ffd400;transition:width .4s}
.page{font-size:12px;color:#888;margin-top:10px}.muted{color:#666}
.reveal{background:#fff7d6;border-radius:14px;padding:12px;margin-top:8px;font-size:17px;animation:pop .3s}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.swipe{position:relative;height:230px}.scard{position:absolute;inset:0;background:linear-gradient(135deg,#fff,#eef);border:3px solid #5b3df5;border-radius:20px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-size:20px;font-weight:600;touch-action:none}
.row{display:flex;gap:10px}.row .big{flex:1}
.ord{list-style:none;padding:0;margin:0}.ord li{background:#f1efff;border-radius:14px;padding:14px;margin:6px 0;font-size:18px;font-weight:600;touch-action:none}.ord li.drag{background:#ffd400;box-shadow:0 6px 16px #0003;position:relative;z-index:2}
svg .reg{stroke:#fff;stroke-width:2;cursor:pointer}
.mic{font-size:44px;width:96px;height:96px;border-radius:50%;border:0;background:#ff5a5f;color:#fff;display:block;margin:10px auto}.mic.on{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.story{font-size:20px;line-height:1.45}
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}#fx span{position:absolute;top:-40px;font-size:30px;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
video{width:100%;border-radius:18px;background:#000}
.day{display:flex;justify-content:space-between;align-items:center}
.kp{font-size:18px;margin:6px 0}
.timer{font-size:30px;font-weight:800;text-align:center}