@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Nunito:wght@400;600;700&display=swap";:root{--font-display: "Cormorant Garamond", serif;--font-body: "Nunito", sans-serif;--panel-width: 88px;--panel-bg: rgba(42, 38, 52, .85);--panel-border: rgba(255, 255, 255, .08);--color-cream: #f8f0e8;--color-soft-white: rgba(255, 255, 255, .9);--color-muted: rgba(255, 255, 255, .5);--ease-gentle: cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;overflow:hidden;background:#1a1420;font-family:var(--font-body);touch-action:none;user-select:none;-webkit-user-select:none}@media screen and (orientation:portrait){#root:after{content:"Please rotate your device to landscape";position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#1a1420;color:var(--color-cream);font-family:var(--font-display);font-size:1.5rem;z-index:9999;text-align:center;padding:2rem}}.title-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:linear-gradient(135deg,#e8d8f0,#d0e0f0 40%,#e8e0d8);animation:titleFadeIn 1.5s var(--ease-gentle)}@keyframes titleFadeIn{0%{opacity:0}to{opacity:1}}.title-screen__title{font-family:var(--font-display);font-size:4.5rem;font-weight:300;font-style:italic;color:#4a3860;letter-spacing:.08em;margin-bottom:.5rem;text-shadow:0 2px 20px rgba(120,80,160,.15);animation:titleFloat 6s ease-in-out infinite}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.title-screen__subtitle{font-family:var(--font-display);font-size:1.1rem;font-weight:300;color:#4a386080;letter-spacing:.2em;text-transform:lowercase;margin-bottom:3rem}.title-screen__play-btn{background:#4a38601f;border:1.5px solid rgba(74,56,96,.2);color:#4a3860;font-family:var(--font-display);font-size:1.3rem;font-weight:400;letter-spacing:.15em;padding:1rem 3rem;border-radius:50px;cursor:pointer;transition:all .5s var(--ease-gentle)}.title-screen__play-btn:hover,.title-screen__play-btn:active{background:#4a38602e;transform:scale(1.03)}.title-petal{position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 0;opacity:.2;pointer-events:none;animation:petalDrift linear infinite}@keyframes petalDrift{0%{transform:translateY(110vh) translate(0) rotate(0);opacity:0}10%{opacity:.2}90%{opacity:.2}to{transform:translateY(-10vh) translate(80px) rotate(360deg);opacity:0}}.scene-picker{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:linear-gradient(160deg,#e0d8e8,#d8e8e0,#e8e0d8);animation:titleFadeIn .8s var(--ease-gentle)}.scene-picker__heading{font-family:var(--font-display);font-size:1.6rem;font-weight:300;color:#4a3860;margin-bottom:2.5rem;letter-spacing:.1em}.scene-picker__cards{display:flex;gap:1.5rem;padding:0 2rem}.scene-card{width:240px;border-radius:20px;overflow:hidden;cursor:pointer;transition:all .4s var(--ease-gentle);border:2px solid rgba(255,255,255,.3);background:#fff6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.scene-card:hover,.scene-card:active{transform:translateY(-6px) scale(1.02);border-color:#7850a04d;box-shadow:0 12px 40px #0000001a}.scene-card__art{width:100%;height:160px;display:block}.scene-card__info{padding:1rem 1.2rem;text-align:center}.scene-card__name{font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:#3a2850;margin-bottom:.25rem}.scene-card__mood{font-family:var(--font-display);font-size:.85rem;font-weight:300;font-style:italic;color:#4a386080;letter-spacing:.08em}.scene-picker__back-btn{margin-top:2rem;background:none;border:none;color:#4a386066;font-family:var(--font-display);font-size:.95rem;cursor:pointer;letter-spacing:.1em;transition:color .3s}.scene-picker__back-btn:hover{color:#4a3860b3}.side-panel{position:fixed;left:0;top:0;bottom:0;width:var(--panel-width);background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--panel-border);display:flex;flex-direction:column;align-items:center;padding:12px 8px;gap:6px;z-index:50;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.side-panel::-webkit-scrollbar{display:none}.panel-divider{width:48px;height:1px;background:var(--panel-border);margin:4px 0;flex-shrink:0}.panel-label{font-family:var(--font-body);font-size:.55rem;font-weight:600;color:var(--color-muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px;margin-bottom:2px}.color-swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%;padding:0 6px}.color-swatch{width:30px;height:30px;border-radius:50% 50% 50% 15%;border:2px solid transparent;cursor:pointer;transition:all .25s var(--ease-gentle);justify-self:center}.color-swatch:hover{transform:scale(1.15)}.color-swatch--active{border-color:#fffc;transform:scale(1.15);box-shadow:0 0 8px #ffffff4d}.color-swatch--picker{background-image:conic-gradient(#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6,#ff6b6b);background-blend-mode:overlay}.petal-types{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 4px}.petal-type-btn{width:100%;height:36px;border-radius:10px;border:1.5px solid rgba(255,255,255,.1);background:#ffffff0d;cursor:pointer;transition:all .25s var(--ease-gentle);display:flex;align-items:center;justify-content:center;color:var(--color-muted);font-size:.6rem;font-family:var(--font-body)}.petal-type-btn:hover{background:#ffffff1a}.petal-type-btn--active{border-color:#ffffff80;background:#ffffff1f;color:var(--color-soft-white)}.size-selector{display:flex;gap:6px;width:100%;padding:0 4px;justify-content:center}.size-btn{border:1.5px solid rgba(255,255,255,.1);background:#ffffff0d;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease-gentle);padding:4px}.size-btn:hover{background:#ffffff1a}.size-btn--active{border-color:#ffffff80;background:#ffffff1f}.size-dot{border-radius:50%;background:var(--color-muted)}.size-btn--active .size-dot{background:var(--color-soft-white)}.panel-action-btn{width:48px;height:48px;border-radius:14px;border:1.5px solid rgba(255,255,255,.08);background:#ffffff0a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease-gentle);color:var(--color-muted);flex-shrink:0}.panel-action-btn:hover{background:#ffffff14;color:var(--color-soft-white)}.panel-action-btn svg{width:22px;height:22px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;background:#14101cb3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:overlayIn .3s var(--ease-gentle)}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.overlay__card{background:#2a2634f2;border-radius:24px;padding:2rem 2.5rem;text-align:center;border:1px solid rgba(255,255,255,.08);max-width:340px;width:90%}.overlay__title{font-family:var(--font-display);font-size:1.4rem;font-weight:400;color:var(--color-cream);margin-bottom:.8rem}.overlay__text{font-family:var(--font-body);font-size:.85rem;color:var(--color-muted);margin-bottom:1.5rem;line-height:1.5}.overlay__buttons{display:flex;gap:1rem;justify-content:center}.overlay__btn{padding:.7rem 1.8rem;border-radius:30px;border:1.5px solid rgba(255,255,255,.15);background:#ffffff0f;color:var(--color-cream);font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s var(--ease-gentle);letter-spacing:.05em}.overlay__btn:hover{background:#ffffff1f}.overlay__btn--danger{border-color:#ff78784d;color:#ffb0b0}.overlay__btn--danger:hover{background:#ff787826}.overlay__btn--primary{background:#ffffff1f;border-color:#ffffff40}.pause-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:150;background:#14101c80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pause-overlay__label{font-family:var(--font-display);font-size:2.5rem;font-weight:300;font-style:italic;color:#f8f0e899;letter-spacing:.15em}.save-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:#2a2634e6;color:var(--color-cream);font-family:var(--font-body);font-size:.85rem;padding:.7rem 1.5rem;border-radius:20px;border:1px solid rgba(255,255,255,.1);z-index:300;animation:toastIn .3s var(--ease-gentle),toastOut .3s var(--ease-gentle) 1.7s forwards}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0}}