:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f3f3f0;background:#090c10;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #b9cbbe;outline-offset:4px}::selection{background:#bdcdbb;color:#101710}#root{min-height:100vh}.app-shell{min-height:100vh;position:relative;background:#080b10;color:#f4f5f1;isolation:isolate;display:flex;flex-direction:column;overflow:hidden}.app-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;opacity:.18;pointer-events:none;background-image:radial-gradient(#53647d .5px,transparent .5px);background-size:24px 24px;-webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 70%,transparent);mask-image:linear-gradient(to bottom,transparent,black 15%,black 70%,transparent)}.ambient-glow{position:absolute;z-index:-1;pointer-events:none;top:8%;left:50%;transform:translate(-50%);width:min(1100px,130vw);height:850px;background:radial-gradient(ellipse at 50% 48%,rgba(63,72,110,.12),rgba(21,25,41,.07) 38%,transparent 74%)}.site-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:26px clamp(22px,5.3vw,84px)}.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:#f0f0eb;font-weight:650;font-size:22px;letter-spacing:-.9px}.brand-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;color:#c5d3c9;border:1px solid #374347;background:#1b2328}.center-stage{flex:1;display:flex;justify-content:center;align-items:center;width:100%;padding:18px 28px 66px}.sound-experience{width:min(1170px,100%);display:grid;grid-template-columns:minmax(320px,.43fr) minmax(0,.57fr);border:1px solid #343947;border-radius:34px;min-height:722px;overflow:hidden;background:#151920;box-shadow:0 35px 100px #0008,0 6px 26px #0005}.sound-sidebar{background:linear-gradient(155deg,#30395b,#28324f 55%,#232b42);display:flex;align-items:center;justify-content:center;padding:28px clamp(18px,3vw,48px);position:relative;min-width:0}.sound-sidebar:before{content:"";pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 0% 0%,#6e7db322,transparent 62%)}.sound-navigation{position:relative;z-index:1;width:100%;max-width:306px;height:500px;outline-offset:8px;display:flex;justify-content:center;align-items:center}.sound-list{list-style:none;position:relative;width:100%;height:100%;margin:0;padding:0;overflow:hidden;--sound-step: 67px;-webkit-mask-image:linear-gradient(to bottom,transparent,black 14%,black 86%,transparent);mask-image:linear-gradient(to bottom,transparent,black 14%,black 86%,transparent)}.sound-list-item{position:absolute;left:0;width:100%;top:50%;transform:translateY(calc(-50% + var(--sound-offset) * var(--sound-step)));transition:transform .39s cubic-bezier(.2,.8,.2,1),opacity .35s ease}.sound-pill{width:100%;min-height:53px;border:1px solid #b8c4e021;background:#a8bbfa08;color:#c4cee0;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;font-size:13px;font-weight:500;padding:13px 19px;line-height:1.1;text-align:center;transition:color .25s,background .25s,border-color .25s,box-shadow .25s,transform .25s;cursor:pointer}.sound-pill:hover{border-color:#d9dffd66;background:#b5c3ee1c}.sound-pill>span{display:block}.sound-pill.is-focused{background:#f1f1fa;color:#35417c;border-color:#f7f8ff;font-weight:660;box-shadow:0 10px 26px #0d17232e}.sound-pill.is-unavailable-focused{background:#e6e9f6;color:#566387}.sound-pill:focus-visible{outline:2px solid white;outline-offset:4px}.sound-spotlight{padding:28px 30px 32px;display:flex;flex-direction:column;align-items:center;min-width:0;background:radial-gradient(ellipse at 50% 27%,#272b3c,#171b26 46%,#13171f)}.card-stage{--carousel-step: clamp(154px, 17.5vw, 218px);--carousel-far-step: clamp(269px, 31vw, 382px);width:100%;position:relative;height:402px;isolation:isolate;margin:0 auto 7px;overflow:hidden}.carousel-card{position:absolute;width:min(69%,333px);height:390px;top:50%;left:50%;overflow:hidden;border:6px solid #25293a;border-radius:31px;background:var(--scene-shade, #484984);box-shadow:0 22px 54px #0009,0 0 0 1px #777e9c55;pointer-events:none;opacity:0;transition:transform .48s cubic-bezier(.22,.76,.23,1),opacity .4s ease,filter .48s ease;will-change:transform}.carousel-card--center{z-index:5;opacity:1;filter:none;transform:translate(-50%,-50%) scale(1) rotate(0)}.carousel-card--left{z-index:3;opacity:.49;filter:grayscale(.35) brightness(.78);transform:translate(calc(-50% - var(--carousel-step)),-50%) scale(.77) rotate(-5deg)}.carousel-card--right{z-index:3;opacity:.49;filter:grayscale(.35) brightness(.78);transform:translate(calc(-50% + var(--carousel-step)),-50%) scale(.77) rotate(5deg)}.carousel-card--off-left{z-index:1;opacity:0;transform:translate(calc(-50% - var(--carousel-far-step)),-50%) scale(.61) rotate(-9deg)}.carousel-card--off-right{z-index:1;opacity:0;transform:translate(calc(-50% + var(--carousel-far-step)),-50%) scale(.61) rotate(9deg)}.sound-scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(ellipse at 68% 18%,color-mix(in srgb,var(--scene-glow),transparent 52%),transparent 35%),linear-gradient(156deg,var(--scene-sky) 2%,var(--scene-shade) 85%)}.scene-glow{position:absolute;width:50%;aspect-ratio:1;border-radius:50%;top:20%;left:30%;filter:blur(23px);background:color-mix(in srgb,var(--scene-glow),transparent 65%)}.scene-horizon{position:absolute;left:-15%;bottom:22%;width:135%;height:30%;border-radius:50% 50% 0 0;transform:rotate(-13deg);background:color-mix(in srgb,var(--scene-glow),transparent 77%)}.scene-ridge{position:absolute;left:-12%;bottom:-13%;width:145%;height:39%;border-radius:48% 52% 0 0;transform:rotate(7deg);background:color-mix(in srgb,var(--scene-shade),#090e1c 30%)}.player-art{position:absolute;top:0;right:0;bottom:0;left:0;isolation:isolate;background:#464587 url(/moon-sky-reference.png) center center / cover no-repeat;overflow:hidden}.cloud-strip{position:absolute;z-index:1;top:9%;left:0;width:310%;display:flex;align-items:flex-start;pointer-events:none;animation:clouds-travel-left 55s linear infinite;will-change:transform}.cloud-strip img{display:block;width:50%;height:auto;flex:0 0 50%;-webkit-user-select:none;user-select:none}.character-art{position:absolute;z-index:2;height:75%;width:auto;max-width:64%;top:10%;left:50%;object-fit:contain;transform-origin:50% 35%;filter:drop-shadow(0 8px 5px #24184933);animation:ditto-gentle-float 6.6s ease-in-out infinite}@keyframes clouds-travel-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes ditto-gentle-float{0%,to{transform:translate(-50%,2px) rotate(-.7deg)}50%{transform:translate(-50%,-4px) rotate(.7deg)}}.carousel-card:after{content:"";position:absolute;z-index:3;pointer-events:none;top:45%;right:0;bottom:0;left:0;background:linear-gradient(transparent 0%,#17172c27 32%,#131324cc)}.feature-card-bottom{position:absolute;z-index:4;bottom:23px;left:24px;right:24px}.feature-notice{margin:10px 0 0;color:#dfdfea;font-size:12px;font-weight:500;text-shadow:0 2px 12px #0c1022}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.feature-card-bottom h2{margin:0;font-size:32px;font-weight:600;letter-spacing:-.06em;line-height:1;color:#fff;text-shadow:0 2px 16px #1613227a}.player-console{width:min(100%,390px);border:1px solid #303842;background:#171d24;padding:15px 22px 18px;border-radius:18px;margin-top:2px;box-shadow:0 15px 25px #090d1480}.track-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.track-title{color:#f1f1ed;font-size:18px;font-weight:600;letter-spacing:-.5px}.track-badge{border:1px solid #3b4649;background:#1b2529;color:#9aa9a4;border-radius:5px;font-size:9px;font-weight:650;letter-spacing:1.3px;padding:6px 8px}.controls-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin:15px 0 12px}.transport-controls{grid-column:2;display:flex;align-items:center;justify-content:center;gap:14px}.skip-button{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:0;background:transparent;color:#657174;border-radius:11px}.skip-button:disabled{opacity:.52;cursor:not-allowed}.repeat-button{grid-column:3;position:relative;justify-self:end;display:grid;place-items:center;width:41px;height:41px;border:1px solid transparent;border-radius:11px;background:transparent;color:#677579;transition:background .2s ease,color .2s ease,border-color .2s ease}.repeat-button:hover{color:#d7e8da;background:#23312e}.repeat-button.is-active{color:#c5e0c8;background:#24382f;border-color:#4b6f59}.repeat-one-badge{position:absolute;right:2px;bottom:4px;width:11px;height:11px;display:grid;place-items:center;border-radius:2px;background:#24382f;color:#d9f0d9;font-size:9px;font-weight:750;line-height:1}.repeat-button:focus-visible,.play-button:focus-visible{outline:2px solid #c5e0c8;outline-offset:3px}.play-button{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#18231f;background:#ccdacd;border:1px solid #dae8d9;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;box-shadow:0 7px 32px #a0b9a61c}.play-button:hover{background:#e2ede0;transform:scale(1.055);box-shadow:0 8px 44px #b2ccb044}.play-button:active{transform:scale(.97)}.play-icon{margin-left:3px}.loading-spinner{height:22px;width:22px;border:3px solid #455c50;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.volume-row{display:flex;align-items:center;gap:13px;padding:0 0 4px}.icon-button{flex-shrink:0;display:grid;place-items:center;border:none;padding:3px;background:transparent;color:#a3b2b1;border-radius:5px}.icon-button:hover{color:#f3f6f0}.volume-slider{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:4px;border:none;border-radius:8px;outline:none;background:linear-gradient(to right,#b8cdbb 0%,#b8cdbb var(--volume-fill),#354043 var(--volume-fill),#354043 100%);cursor:pointer}.volume-slider::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#e9eee8;border:2px solid #d3ded3;box-shadow:0 0 0 3px #172222}.volume-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e9eee8;border:2px solid #d3ded3}.volume-value{width:34px;flex-shrink:0;text-align:right;color:#9daaa6;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}.player-message{display:flex;gap:8px;color:#dec2a4;line-height:1.5;font-size:11px;margin:11px 0 3px}.player-message svg{flex-shrink:0;margin-top:1px}.playback-options{width:min(100%,390px);text-align:left;margin:11px 0 0;background:#171d24;border:1px solid #344045;border-radius:12px;padding:14px 18px}.toggle-row{display:flex;align-items:center;justify-content:space-between;position:relative;gap:10px;cursor:pointer}.toggle-row strong,.toggle-row small{display:block}.toggle-row strong{font-size:11px;font-weight:600;color:#dee6dc}.toggle-row small{font-size:10px;color:#8fa09d;margin-top:4px;line-height:1.45}.switch-input{width:37px;height:22px;position:absolute;right:0;opacity:0;z-index:2;cursor:pointer}.switch-track{flex:0 0 37px;width:37px;height:22px;background:#38464a;border-radius:20px;transition:background .18s;position:relative}.switch-track:after{content:"";position:absolute;left:4px;top:4px;width:14px;height:14px;background:#d7dfd8;border-radius:50%;transition:transform .18s}.switch-input:checked+.switch-track{background:#4f8067}.switch-input:checked+.switch-track:after{transform:translate(15px)}.switch-input:focus-visible+.switch-track{outline:2px solid #b9cbbe;outline-offset:4px}@media (max-width: 1000px){.sound-experience{grid-template-columns:minmax(265px,.4fr) minmax(0,.6fr)}.sound-sidebar{padding:24px 20px}.sound-navigation{max-width:280px}.sound-spotlight{padding-inline:17px}.card-stage{--carousel-step: clamp(142px, 18vw, 192px);--carousel-far-step: clamp(248px, 31vw, 338px)}.carousel-card{width:min(69%,320px)}}@media (max-width: 760px){.center-stage{padding:12px 18px 42px}.sound-experience{grid-template-columns:minmax(0,1fr);border-radius:24px;max-width:570px}.sound-sidebar{padding:16px 28px 4px}.sound-navigation{height:282px;max-width:360px}.sound-list{--sound-step: 56px}.sound-pill{min-height:46px;padding:10px 17px}.sound-spotlight{padding:23px 18px 27px}.card-stage{height:398px}.card-stage{--carousel-step: clamp(140px, 30vw, 202px);--carousel-far-step: clamp(245px, 52vw, 350px)}.carousel-card{width:min(70%,315px);height:380px}}@media (max-width: 470px){.site-header{padding:22px 20px 13px}.center-stage{padding:8px 10px 28px}.sound-experience{border-radius:20px}.sound-sidebar{padding:12px 22px 0}.sound-navigation{height:274px;max-width:295px}.sound-spotlight{padding:20px 12px 22px}.card-stage{height:357px}.card-stage{--carousel-step: clamp(106px, 31vw, 142px);--carousel-far-step: clamp(184px, 55vw, 245px)}.carousel-card{width:min(72%,278px);height:341px;border-radius:25px}.feature-card-bottom h2{font-size:29px}.player-console{padding:15px 17px}.transport-controls{gap:6px}.skip-button{width:36px;height:36px;flex-basis:36px}.play-button{width:56px;height:56px}.repeat-button{width:36px;height:36px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
