@import"https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Space+Mono:wght@400;700&family=Gowun+Dodum&family=VT323&display=swap";:root{--ink: #111;--paper: #FFF9EC;--muted: #6b6b6b;--p1: #FF2E93;--p2: #FFD400;--p3: #00C2FF;--p4: #9AFF2E;--p5: #B56CFF;--bg: #e9e4d6;--card-shadow: 3px 3px 0 var(--ink);--font-display: "Gaegu", cursive;--font-mono: "Space Mono", monospace;--font-body: "Gowun Dodum", sans-serif;--font-pixel: "VT323", monospace;--max-w: 480px;--safe-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);min-height:100vh;-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;align-items:center;min-height:100vh}.shell{width:100%;max-width:var(--max-w);min-height:100dvh;background:var(--paper);display:flex;flex-direction:column;position:relative;overflow-x:hidden}.screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(64px + var(--safe-bottom))}.screen.no-nav{padding-bottom:0}.t-display{font-family:var(--font-display)}.t-mono{font-family:var(--font-mono)}.t-pixel{font-family:var(--font-pixel)}.t-muted{color:var(--muted);font-size:11px;font-family:var(--font-mono)}.card{border:2px solid var(--ink);border-radius:16px;background:#fff;box-shadow:var(--card-shadow)}.card.c-p1{background:var(--p1);color:#fff}.card.c-p2{background:var(--p2);color:var(--ink)}.card.c-p3{background:var(--p3);color:var(--ink)}.card.c-p4{background:var(--p4);color:var(--ink)}.card.c-p5{background:var(--p5);color:#fff}.card-flat{border:2px solid var(--ink);border-radius:12px;background:#fff}.btn{display:block;width:100%;border:2px solid var(--ink);border-radius:99px;padding:14px 20px;font-family:var(--font-display);font-size:20px;font-weight:700;text-align:center;cursor:pointer;transition:transform .08s,box-shadow .08s;box-shadow:3px 3px 0 var(--ink);line-height:1;background:var(--p1);color:#fff}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.btn.btn-p2{background:var(--p2);color:var(--ink)}.btn.btn-p3{background:var(--p3);color:var(--ink)}.btn.btn-p4{background:var(--p4);color:var(--ink)}.btn.btn-p5{background:var(--p5);color:#fff}.btn.btn-ghost{background:transparent;color:var(--ink)}.btn.btn-dark{background:var(--ink);color:#fff}.btn.btn-sm{padding:8px 16px;font-size:16px}.input-field{width:100%;border:2px solid var(--ink);border-radius:12px;padding:12px 14px;font-family:var(--font-display);font-size:18px;background:#fff;color:var(--ink);outline:none}.input-field:focus{border-color:var(--p1);box-shadow:0 0 0 3px #ff2e9326}.input-field::placeholder{color:#bbb}.pill{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border:1.5px solid var(--ink);border-radius:99px;font-family:var(--font-display);font-size:15px;background:#fff;cursor:pointer;white-space:nowrap}.pill.on{background:var(--ink);color:#fff}.pill.on-p1{background:var(--p1);color:#fff;border-color:var(--p1)}.pill.on-p5{background:var(--p5);color:#fff;border-color:var(--p5)}.chip{display:inline-block;padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:10px;border:1.5px solid var(--ink);background:var(--p2)}.sticker{display:inline-block;font-family:var(--font-display);font-weight:700;background:var(--p2);color:var(--ink);padding:4px 10px;border-radius:99px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:14px}.sticker.red{background:var(--p1);color:#fff}.sticker.purple{background:var(--p5);color:#fff}.progress-bar{height:6px;border-radius:99px;background:#eee;overflow:hidden;border:1.5px solid var(--ink)}.progress-fill{height:100%;background:var(--p1);border-radius:99px;transition:width .3s}.score-bar{height:10px;background:#eee;border-radius:99px;overflow:hidden;border:1.5px solid var(--ink)}.score-fill{height:100%;border-radius:99px;transition:width .6s ease-out}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-track{width:44px;height:24px;border-radius:99px;border:2px solid var(--ink);background:#ddd;position:relative;transition:background .2s;flex-shrink:0}.toggle-track.on{background:var(--p2)}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:#fff;border:1.5px solid var(--ink);transition:left .2s}.toggle-track.on .toggle-thumb{left:22px}.toggle-label{font-family:var(--font-display);font-size:15px}.ph-img{background:repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 8px,transparent 8px 16px),var(--paper);border:1.5px dashed var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--muted);text-align:center}.blur-card{position:relative;overflow:hidden;border-radius:12px}.blur-content{filter:blur(4px);-webkit-user-select:none;user-select:none;pointer-events:none}.blur-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#fff9ec66}.grad-hero{background:linear-gradient(160deg,var(--p5) 0%,var(--p1) 60%,var(--p2) 100%)}.grad-couple{background:linear-gradient(160deg,var(--p1),var(--p5))}.grad-success{background:linear-gradient(160deg,var(--p4),var(--p2))}.story-card{width:100%;aspect-ratio:9 / 16;border-radius:16px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);overflow:hidden;position:relative}.drum-col{flex:1;text-align:center;position:relative;padding:4px 0}.drum-selected{font-family:var(--font-mono);font-size:28px;font-weight:700;line-height:1}.drum-ghost{font-family:var(--font-mono);font-size:14px;color:#bbb;line-height:1.4}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.anim-bounce{animation:bounce 1.2s infinite}.anim-pulse{animation:pulse 1.5s infinite}.anim-fadein{animation:fadeIn .4s ease-out both}.px-4{padding-left:16px;padding-right:16px}.py-3{padding-top:12px;padding-bottom:12px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.gap-2{gap:8px}.gap-3{gap:12px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.w-full{width:100%}@media (min-width: 480px){body{background:var(--bg)}.shell{margin:0 auto;box-shadow:0 0 60px #00000026}}