:root{--numali-pink: #ffd6e8;--numali-lilac: #e7d6ff;--numali-blue: #c9e7ff;--numali-mint: #d2f5e3;--numali-peach: #ffe5d4;--numali-cream: #fff7ef;--surface: rgba(255, 255, 255, .72);--surface-strong: rgba(255, 255, 255, .9);--text: #5b5168;--text-soft: #8a8094;--accent: #b794f6;--accent-strong: #9f7aea;--radius-sm: 14px;--radius-md: 22px;--radius-lg: 32px;--radius-pill: 999px;--shadow-soft: 0 10px 30px rgba(150, 130, 180, .18);--shadow-float: 0 18px 48px rgba(150, 130, 180, .26);--ease-soft: cubic-bezier(.22, 1, .36, 1);--bg-gradient: linear-gradient(160deg, var(--numali-lilac), var(--numali-blue));color-scheme:light;font-family:Nunito,Quicksand,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{color:var(--text);background:var(--bg-gradient);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}button{font-family:inherit;cursor:pointer;border:none;color:var(--text)}.soft-card{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);border:1px solid rgba(255,255,255,.6)}.soft-button{background:var(--surface-strong);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);transition:transform .25s var(--ease-soft),box-shadow .25s var(--ease-soft),background .25s var(--ease-soft);display:inline-flex;align-items:center;justify-content:center}.soft-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}.soft-button:active{transform:translateY(0) scale(.96)}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.scene-bg{position:absolute;top:0;right:0;bottom:0;left:0;transition:background .8s var(--ease-soft);z-index:0}.scene-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;touch-action:none}.scene-canvas canvas{display:block;width:100%;height:100%}.darkening-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;background:#0a0812;pointer-events:none}.lullaby-start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:24px;padding-right:min(424px,calc(92vw + 24px));pointer-events:auto;cursor:pointer;animation:lullaby-start-in .5s var(--ease-soft)}.panel.panel--welcome{z-index:13;box-shadow:var(--shadow-float)}@media(max-width:720px){.lullaby-start-overlay{padding-right:24px;padding-bottom:min(52vh,420px);align-items:flex-start;padding-top:clamp(72px,14vh,120px)}.app.is-paused-welcome .panel.panel--welcome{top:auto;left:0;right:0;bottom:0;width:100%;max-height:min(48vh,400px);border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(105%)}.app.is-paused-welcome .panel.panel--welcome.is-open{transform:translateY(0)}}.lullaby-start-btn{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:min(280px,80vw);padding:clamp(28px,5vw,40px) clamp(36px,6vw,52px);border-radius:var(--radius-lg);color:var(--text);box-shadow:var(--shadow-float);cursor:pointer;transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}.lullaby-start-btn:not(:disabled):hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 56px #9682b452}.lullaby-start-btn:not(:disabled):active{transform:scale(.98)}.lullaby-start-btn.is-loading{pointer-events:none}.lullaby-start-icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--numali-pink),var(--numali-lilac));box-shadow:var(--shadow-soft);color:var(--accent-strong)}.lullaby-start-label{font-size:clamp(22px,4vw,28px);font-weight:800;letter-spacing:.3px}@keyframes lullaby-start-in{0%{opacity:0}to{opacity:1}}.top-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,2.5vw,26px);transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft)}.top-bar.is-hidden{opacity:0;transform:translateY(-12px);pointer-events:none}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:clamp(20px,3vw,28px);letter-spacing:.5px;color:var(--text);text-shadow:0 2px 10px rgba(255,255,255,.5)}.brand-dot{width:18px;height:18px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--numali-pink),var(--numali-blue));box-shadow:var(--shadow-soft)}.top-actions{display:flex;gap:12px}.icon-btn{width:52px;height:52px;color:var(--text)}.player-stack{position:absolute;left:50%;bottom:clamp(16px,3vw,32px);transform:translate(-50%);z-index:5;width:min(720px,calc(100vw - 20px));display:flex;flex-direction:column;align-items:center;gap:10px}.player-dock{width:100%;transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft)}.player-dock.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}.player-wrap{position:relative;width:100%}.player-track-picker{position:absolute;bottom:calc(100% + 10px);left:0;right:0;z-index:2;overflow:hidden;padding:0;animation:player-picker-in .38s var(--ease-soft)}.player-track-picker:before,.player-track-picker:after{content:"";position:absolute;left:0;right:0;height:18px;z-index:1;pointer-events:none}.player-track-picker:before{top:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(to bottom,#ffffffeb,#fff0)}.player-track-picker:after{bottom:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:linear-gradient(to top,#ffffffeb,#fff0)}.player-track-picker-scroll{display:flex;flex-direction:column;gap:4px;max-height:min(44vh,340px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 14px;scroll-padding-block:10px;scroll-behavior:smooth;scroll-snap-type:y proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(183,148,246,.42) transparent}.player-track-picker-scroll::-webkit-scrollbar{width:5px}.player-track-picker-scroll::-webkit-scrollbar-track{background:transparent}.player-track-picker-scroll::-webkit-scrollbar-thumb{background:#b794f661;border-radius:var(--radius-pill)}.player-track-picker-scroll::-webkit-scrollbar-thumb:hover{background:#9f7aea85}@keyframes player-picker-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.player-track-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:var(--radius-md);background:transparent;text-align:left;scroll-snap-align:start;transition:background .22s var(--ease-soft),transform .22s var(--ease-soft)}.player-track-option:hover{background:#ffffff85}.player-track-option.is-active{background:linear-gradient(135deg,#ffd6e8d1,#e7d6ffd1);box-shadow:var(--shadow-soft)}.player-track-option-main{min-width:0;display:flex;flex-direction:column;gap:2px}.player-track-option-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.3}.player-track-option-composer{font-size:12px;font-weight:600;color:var(--text-soft);line-height:1.3}.player-track-option-time{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--text-soft);opacity:.85}.player{display:flex;align-items:center;gap:clamp(10px,2vw,18px);padding:clamp(10px,1.6vw,16px) clamp(14px,2.4vw,22px)}.player-controls{display:flex;align-items:center;gap:8px}.player-btn{width:48px;height:48px;color:var(--text)}.player-btn--main{width:60px;height:60px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-strong))}.player-btn--main.is-loading{opacity:1;cursor:wait}.player-btn--main.is-loading:disabled{opacity:1}.player-btn:disabled{opacity:.5;cursor:default}.soft-spinner{animation:soft-spin 1.5s var(--ease-soft) infinite}@keyframes soft-spin{0%{transform:rotate(0);opacity:.72}50%{opacity:1}to{transform:rotate(360deg);opacity:.72}}.player-track-trigger{flex:1;min-width:0;height:auto;min-height:48px;padding:8px 12px;gap:8px;color:var(--text);border-radius:var(--radius-md);justify-content:flex-start}.player-track-trigger--compact{display:none;flex:0;width:48px;min-width:48px;min-height:48px;padding:0;justify-content:center;border-radius:var(--radius-pill)}.player-track-trigger--wide{display:inline-flex}.player-track-trigger-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}.player-track-trigger svg:last-child{flex-shrink:0;color:var(--text-soft);transition:transform .3s var(--ease-soft)}.player-track-trigger.is-open svg:last-child{transform:rotate(180deg)}.player-title{font-weight:700;font-size:15px;color:var(--text);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.player-sub{font-size:12.5px;color:var(--text-soft);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-volume{display:flex;align-items:center;gap:8px;color:var(--text-soft)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;width:100%;border-radius:var(--radius-pill);background:#a08cbe38;outline:none;cursor:pointer}.player-volume input[type=range]{width:86px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-soft);border:2px solid var(--accent)}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-soft);border:2px solid var(--accent)}.panel{position:absolute;top:0;right:0;bottom:0;z-index:9;width:min(400px,92vw);max-height:100dvh;border-radius:var(--radius-lg) 0 0 var(--radius-lg);display:flex;flex-direction:column;min-height:0;transform:translate(105%);transition:transform .5s var(--ease-soft)}.panel.is-open{transform:translate(0)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:clamp(18px,3vw,26px) clamp(18px,3vw,26px) 8px}.panel-head-start{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.panel-head-spacer{width:44px;flex-shrink:0}.panel-back{width:44px;height:44px;flex-shrink:0;color:var(--text)}.panel-title{margin:0;font-size:22px;font-weight:800;color:var(--text)}.panel-close{width:44px;height:44px;color:var(--text)}.panel-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px clamp(18px,3vw,26px) clamp(20px,4vw,30px);display:flex;flex-direction:column;gap:12px}.panel-section{display:flex;flex-direction:column;gap:12px}.collapsible{flex-shrink:0;gap:0;border-radius:var(--radius-md);background:#ffffff47;border:1px solid rgba(255,255,255,.45)}.collapsible-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;background:transparent;text-align:left;transition:background .2s var(--ease-soft)}.collapsible-trigger:hover{background:#ffffff38}.collapsible-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-soft)}.collapsible-chevron{flex-shrink:0;color:var(--text-soft);transition:transform .35s var(--ease-soft)}.collapsible.is-open .collapsible-chevron{transform:rotate(180deg)}.collapsible-body{display:none}.collapsible.is-open .collapsible-body{display:block}.collapsible-inner{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}.section-title{margin:0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-soft)}.section-value{color:var(--accent-strong);font-size:16px}.section-hint{margin:0;font-size:12.5px;color:var(--text-soft);line-height:1.45}.slider-field{display:flex;flex-direction:column;gap:8px}.slider-label{font-size:13px;font-weight:600;color:var(--text)}.slider-range-hint{font-size:11.5px;color:var(--text-soft)}.darken-reset-btn{align-self:flex-start;padding:10px 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;color:var(--text);background:var(--surface-strong)}.preset-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preset-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;padding:14px 8px 12px;border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.65);text-align:center;transition:transform .25s var(--ease-soft),box-shadow .25s var(--ease-soft),border-color .25s var(--ease-soft)}.preset-card--short-nap{background:linear-gradient(165deg,#ffe8f2 0%,var(--numali-peach) 100%)}.preset-card--noon{background:linear-gradient(165deg,#fff6d8 0%,var(--numali-blue) 100%)}.preset-card--night{background:linear-gradient(165deg,#e4dcff,#c5d4f0)}.preset-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}.preset-card.is-active{border-color:#fff;box-shadow:var(--shadow-float);transform:translateY(-2px) scale(1.02)}.preset-card-icon{font-size:34px;line-height:1;filter:drop-shadow(0 3px 6px rgba(150,130,180,.22))}.preset-card-label{font-size:13px;font-weight:800;color:var(--text);line-height:1.2}.preset-card-time{font-size:12px;font-weight:700;color:var(--text-soft);letter-spacing:.2px}.preset-card.is-active .preset-card-time{color:var(--accent-strong)}.customize-btn{flex-shrink:0;margin-top:4px;padding:16px;border-radius:var(--radius-md);font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-strong))}.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.scene-card{position:relative;flex-direction:column;gap:6px;padding:14px 6px;border-radius:var(--radius-md);background:var(--surface-strong);overflow:visible}.scene-card.is-active{background:linear-gradient(135deg,var(--numali-pink),var(--numali-blue));box-shadow:var(--shadow-float)}.scene-emoji{font-size:26px;line-height:1}.scene-name{font-size:13px;font-weight:700;color:var(--text)}.picker{display:flex;flex-direction:column;gap:12px}.picker-presets{display:flex;flex-wrap:wrap;gap:10px}.preset-swatch{width:46px;height:46px;border-radius:var(--radius-md);border:3px solid transparent}.preset-swatch.is-active{border-color:#fff;box-shadow:var(--shadow-float)}.picker-label{font-size:12.5px;color:var(--text-soft);font-weight:600}.picker-colors{display:flex;gap:10px;flex-wrap:wrap}.color-chip{position:relative;width:44px;height:44px;border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);border:2px solid rgba(255,255,255,.8);cursor:pointer;overflow:hidden}.color-chip--wide{flex:1;min-width:80px}.color-chip input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none}.uploader{display:flex;flex-direction:column;gap:10px}.uploader-thumbs{display:flex;flex-wrap:wrap;gap:10px}.uploader-thumb{position:relative;width:60px;height:60px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft);border:2px solid rgba(255,255,255,.85)}.uploader-thumb img{width:100%;height:100%;object-fit:cover}.uploader-remove{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:#5b5168c7;color:#fff;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}.uploader-add{width:60px;height:60px;border-radius:var(--radius-md);font-size:30px;font-weight:300;color:var(--accent-strong);background:var(--surface-strong)}.uploader-hint{margin:0;font-size:12px;color:var(--text-soft);line-height:1.4}.reset-btn{flex-shrink:0;margin-top:4px;padding:14px;border-radius:var(--radius-md);font-weight:700;color:var(--text);background:var(--surface-strong)}@media(max-width:480px){.preset-card{min-height:104px;padding:12px 6px 10px}.preset-card-icon{font-size:28px}.preset-card-label{font-size:11.5px}.preset-card-time{font-size:11px}.scene-grid{grid-template-columns:repeat(3,1fr)}.player-track-trigger--wide{display:none}.player-track-trigger--compact{display:inline-flex}}