:root{--bg-base:#0f0917;--bg-layer:#1c1029;--bg-card:#221430b8;--text-primary:#fdf4ff;--text-muted:#d9bddf;--accent:#ff6fd8;--accent-strong:#b56cff;--accent-soft:#ff6fd833;--border-soft:#ffbbf43d;--shadow-soft:0 20px 48px #06030c73}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-height:100%}body{color:var(--text-primary);background:radial-gradient(circle at 20% 20%, #e592ff4d, transparent 32%), radial-gradient(circle at 80% 10%, #ff6fd840, transparent 36%), linear-gradient(160deg, var(--bg-base), var(--bg-layer));margin:0;font-family:Bradley Hand ITC,Bradley Hand,Segoe Script,Comic Sans MS,cursive}.app-shell{flex-direction:column;gap:1.2rem;width:min(100%,1040px);margin:0 auto;padding:1rem 1rem 3rem;display:flex;overflow-x:hidden}.landing-screen,.quiz-screen,.result-screen{min-height:calc(100svh - 2rem)}.landing-screen{border:1px solid var(--border-soft);text-align:center;box-shadow:var(--shadow-soft);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:24px;place-items:center;display:grid;position:relative;overflow:hidden}.landing-overlay{background:linear-gradient(#05030c40,#05030ccc),linear-gradient(120deg,#b56cff33,#ff6fd833);position:absolute;inset:0}.landing-content{z-index:1;max-width:34rem;padding:1.5rem;position:relative}h1,h2,h3{letter-spacing:.5px;margin:0 0 .8rem;font-family:Bradley Hand ITC,Bradley Hand,Segoe Script,Comic Sans MS,cursive;font-weight:500;line-height:1.2}h1{font-size:clamp(2rem,5vw,3.5rem)}h2{font-size:clamp(1.3rem,3vw,2rem)}p{color:var(--text-muted);margin:0;line-height:1.6}.section-shell{border:1px solid var(--border-soft);background:var(--bg-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft);border-radius:22px;padding:clamp(1rem,3vw,2rem)}.section-title{margin-bottom:1.1rem}.section-center{text-align:center}.button-row{flex-wrap:wrap;gap:.8rem;margin-top:1rem;display:flex}.primary-button,.secondary-button,.option-button,.letter-card{color:var(--text-primary);cursor:pointer;font:inherit;border:1px solid #0000;border-radius:12px;padding:.72rem 1rem;transition:all .25s}.primary-button{background:linear-gradient(120deg, var(--accent), var(--accent-strong))}.secondary-button{border-color:var(--border-soft);background:#ffffff0a}.primary-button:hover,.secondary-button:hover,.option-button:hover,.letter-card:hover{transform:translateY(-2px)}.primary-button:disabled{opacity:.5;cursor:not-allowed}.question-text{font-size:1.08rem}.response-text{min-height:1.5rem;margin-top:1rem}.body-text{margin-bottom:1rem}.image-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;display:grid}.placeholder-image,.timeline-image,.video-placeholder,.sticker-box{border:1px dashed var(--border-soft);color:var(--text-muted);text-align:center;background:#ffffff05;border-radius:16px;place-items:center;min-height:140px;padding:1rem;display:grid}.content-image{object-fit:cover;border-radius:12px;width:100%;height:100%;min-height:160px}.journey-video{background:#000;border-radius:12px;width:100%;max-height:320px}.video-shell{border:1px dashed var(--border-soft);background:#ffffff05;border-radius:16px;padding:.5rem;overflow:hidden}.final-surprise-video{background:#000;border-radius:12px;width:100%;max-height:520px;display:block}.timeline-list{gap:.9rem;display:grid}.timeline-card{border:1px solid var(--border-soft);background:#ffffff06;border-radius:16px;gap:.8rem;padding:.9rem;display:grid}.quiz-screen,.result-screen{place-items:center;display:grid}.quiz-card,.result-card{border:1px solid var(--border-soft);background:var(--bg-card);width:min(100%,680px);box-shadow:var(--shadow-soft);border-radius:20px;padding:1.3rem}.quiz-progress{color:#ffcdf2;margin-bottom:.7rem;font-size:.9rem}.quiz-options{gap:.7rem;margin:1rem 0;display:grid}.option-button{text-align:left;border-color:var(--border-soft);background:#ffffff06}.option-button.selected{border-color:var(--accent);background:var(--accent-soft)}.quiz-feedback{margin-bottom:1rem}.result-screen{border:1px solid var(--border-soft);border-radius:24px;position:relative;overflow:hidden}.particle-layer{pointer-events:none;position:absolute;inset:0}.particle{background:radial-gradient(circle,#ffd0f5,#ffd0f533);border-radius:50%;width:10px;height:10px;position:absolute;bottom:12%}.result-card{text-align:center;z-index:1}.score-line{margin-bottom:.8rem}.final-love{color:#ffe2f6;margin:1rem 0}.minimal-list{gap:.7rem;margin:0;padding:0;list-style:none;display:grid}.minimal-list li{border-bottom:1px solid #ffffff14;padding-bottom:.5rem}.letters-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;display:grid}.letter-card{border-color:var(--border-soft);background:#ffffff08}.modal-backdrop{z-index:99;background:#05040ab3;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.letter-modal{border:1px solid var(--border-soft);background:#23152f;border-radius:18px;width:min(100%,500px);max-height:min(82vh,640px);padding:1rem;overflow-y:auto}.future-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;display:grid}.future-item{border:1px solid var(--border-soft);background:#ffffff05;border-radius:14px;padding:.9rem}.surprise-panel{gap:.8rem;margin-top:1rem;display:grid}.end-screen{justify-content:center;margin-top:1rem;display:flex}.audio-player{z-index:50;border:1px solid var(--border-soft);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#0f0917db;border-radius:999px;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.5rem .8rem;display:flex;position:sticky;top:.8rem}.audio-player input[type=range]{width:120px}.audio-label{color:var(--text-muted);font-size:.8rem}.volume-control{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.76rem;display:inline-flex}@media (width<=900px){.app-shell{padding:.9rem .9rem 2.4rem}.section-shell{padding:1rem}.landing-content{max-width:28rem;padding:1rem}.quiz-card,.result-card{padding:1rem}.future-grid,.letters-grid{grid-template-columns:1fr 1fr}}@media (width<=640px){.app-shell{gap:.9rem;padding:.7rem .7rem 2rem}.landing-screen,.quiz-screen,.result-screen{min-height:calc(100svh - 1rem)}h1{font-size:clamp(1.6rem,8vw,2.3rem)}h2{font-size:clamp(1.15rem,5.4vw,1.6rem)}.section-shell{border-radius:16px;padding:.85rem}.image-grid,.letters-grid,.future-grid{grid-template-columns:1fr;gap:.65rem}.timeline-card{padding:.75rem}.content-image{min-height:140px}.final-surprise-video,.journey-video{max-height:260px}.button-row{gap:.6rem}.primary-button,.secondary-button,.option-button,.letter-card{border-radius:10px;width:100%;padding:.68rem .85rem}.option-button{text-align:center}.quiz-progress{margin-bottom:.4rem}.audio-player{border-radius:14px;justify-content:center;gap:.5rem;padding:.6rem .7rem;position:static}.audio-player>*{width:100%}.volume-control{justify-content:space-between}.audio-player input[type=range]{width:min(100%,220px)}}