@charset "UTF-8";
:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;background:#080b10;color:#e8e8e4;--ink:#f0eee8;--muted:#ced3d5;--line:#e7e9e61a;--accent:#ddd8c5;--glass:#080c1008;--edge:24px;--dock-bottom:max(24px,env(safe-area-inset-bottom));--panel-bottom:calc(var(--dock-bottom) + 78px)}
*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;cursor:pointer;background:none;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:50%;padding:0;flex-shrink:0;touch-action:manipulation;transition:background .18s,color .18s,opacity .18s}button:hover{background:#e9eee610}button:active{background:#e9eee61a}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button[aria-expanded=true]{background:#e9eee614;color:#fff}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}svg:not([viewBox]){overflow:visible}[hidden]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.section-label{margin:0 0 14px;font-size:.75rem;line-height:1.3;letter-spacing:.09em;color:var(--muted)}
#body{display:block;width:100vw;height:100dvh;touch-action:none;outline:none;cursor:grab;user-select:none;-webkit-user-select:none}#body:active{cursor:grabbing}#body:focus-visible{box-shadow:inset 0 0 0 1px #d7d1bd70}
.masthead{position:fixed;z-index:3;left:max(var(--edge),env(safe-area-inset-left));top:max(var(--edge),env(safe-area-inset-top));transition:opacity .15s}.brand{height:48px;padding:0 14px 0 7px;gap:10px;border:1px solid #e7e9e615;border-radius:28px;background:#0b101514;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 2px #000,0 0 7px #000c}.brand-mark{width:29px;height:29px;stroke-width:1.35}.brand>span{font-size:.875rem;font-weight:300;letter-spacing:.045em;color:#d9dcd9}
.hud{position:fixed;z-index:3;bottom:var(--dock-bottom);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;max-width:calc(100vw - 24px);transition:opacity .15s}.dock{display:flex;align-items:center;justify-content:center;gap:3px;padding:5px 7px;border:1px solid #e7e9e625;border-radius:32px;background:#11161b24;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:none}.dock>button,#transport>button{width:44px}.dock .connect{width:44px;padding:0;border-radius:22px;color:#bdc4c2}.dock-divider{width:1px;height:18px;background:#e7e9e61d;margin:0 5px}#transport{display:flex;align-items:center;gap:1px}#meter{height:22px;width:21px;display:flex;align-items:center;justify-content:space-between;gap:2px;color:var(--accent)}#meter span{width:2px;border-radius:2px;background:currentColor;height:calc(3px + var(--bar-level,0)*18px);transition:height .09s}#meter span:nth-child(1),#meter span:nth-child(5){--bar:8px}#meter span:nth-child(2),#meter span:nth-child(4){--bar:15px}#playback-details{width:min(400px,calc(100vw - 36px));padding:12px 17px 7px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:#10161b0d;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 2px #000,0 0 7px #000c}#file-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8125rem;color:#d5d8d5;margin-bottom:3px}#seek-row{display:flex;align-items:center;gap:12px}#music-time{font-size:.75rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}#audio-hint{margin:0 0 12px;padding:7px 12px;border:1px solid var(--line);border-radius:16px;background:#11161b0d;font-size:.8125rem;color:#d7dddd;text-shadow:0 1px 2px #000,0 0 7px #000c}.quiet .masthead,.quiet .hud,.quiet .panel[open]{opacity:0;pointer-events:none;transition:opacity .7s}.quiet #body{cursor:none!important}
.panel{position:fixed;z-index:5;inset:auto max(var(--edge),env(safe-area-inset-right)) var(--panel-bottom) auto;width:320px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--panel-bottom) - 24px);padding:19px 21px 12px;margin:0;overflow:auto;overscroll-behavior:contain;color:var(--ink);background:var(--glass);border:1px solid transparent;border-radius:18px;box-shadow:none;text-shadow:0 1px 2px #000,0 0 7px #000c;transition:opacity .15s;backdrop-filter:none;-webkit-backdrop-filter:none;scrollbar-width:thin;scrollbar-color:#7d827940 transparent}.panel[open]{animation:panel-enter .18s ease-out}.panel::backdrop{background:transparent;backdrop-filter:none}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-3px -7px 13px 0}.panel-head h1,.panel-head h2{margin:0;font-size:1rem;font-weight:500;letter-spacing:-.015em}.panel-head h1>span{display:block;margin-top:5px;color:var(--muted);font-size:.75rem;letter-spacing:.01em;font-weight:400}.panel-head>div{display:flex}.panel-head>button,.panel-head>div>button{width:40px;min-width:40px;height:40px;color:var(--muted)}.panel-head svg{width:18px;height:18px}.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:10px;padding-top:5px;min-height:50px}.text-button{width:auto;border-radius:8px;justify-content:flex-start;padding:0 7px;font-size:.875rem;white-space:nowrap}.text-button svg{width:17px;height:17px}.privacy-note{font-size:.75rem;color:var(--muted);line-height:1.5}.panel-foot #copy-link{margin-right:-7px;color:var(--muted)}
.setting{display:block;position:relative;margin:0;padding:10px 0;font-size:.875rem;line-height:1.5}.setting>span{display:flex;justify-content:space-between;align-items:center}.range-setting{padding-top:4px;padding-bottom:16px}.range-setting>span:first-child{margin-bottom:4px}.range-ends{font-size:.75rem;color:var(--muted);margin-top:-2px}.setting input[type=range]{margin:0}input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:30px;background:transparent;cursor:pointer;--fill:69%}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--fill),#58606865 var(--fill))}input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--fill),#58606865 var(--fill))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;border:3px solid #d8d6c8;border-radius:50%;background:#11171c;margin-top:-6px;box-shadow:0 0 0 4px #d7d1bd09}input[type=range]::-moz-range-thumb{height:9px;width:9px;border:3px solid #d8d6c8;border-radius:50%;background:#11171c}.motion-setting{display:flex;align-items:center;justify-content:space-between;border:0;padding:0 0 17px;min-width:0}.motion-setting legend{float:left;padding:0;margin:0;line-height:38px}.segmented{display:flex;background:transparent;border:1px solid #e7e9e618;border-radius:9px;padding:3px;gap:2px}.segmented label{position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0;width:100%;height:100%;margin:0;inset:0;cursor:pointer}.segmented span{display:flex;height:30px;align-items:center;justify-content:center;border-radius:6px;padding:0 13px;color:var(--muted);font-size:.8125rem}.segmented input:checked+span{background:#d8ded118;color:#f0efe7;box-shadow:inset 0 -1px #e5e4d170}.segmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.world-settings{padding:16px 0 0;border-top:1px solid var(--line)}.world-settings>.section-label{margin-bottom:4px}.switch-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:61px;cursor:pointer}.switch-setting>span:first-child{display:flex;align-items:flex-start;flex-direction:column}.switch-setting small{font-size:.75rem;line-height:1.5;color:var(--muted);font-weight:400;margin-top:3px;max-width:195px}.switch-setting input{position:absolute;right:0;top:calc(50% - 18px);width:38px;height:36px;margin:0;opacity:0;cursor:pointer}.switch-track{position:relative;flex-shrink:0;width:32px;height:18px;border:1px solid #a4aca352;background:#161d22;border-radius:12px;transition:background .2s}.switch-track:after{content:'';position:absolute;left:3px;top:3px;width:10px;height:10px;border-radius:50%;background:#a7aca7;transition:transform .2s,background .2s}.switch-setting input:checked+.switch-track,.travel-toggle[aria-pressed=true] .switch-track{background:#ccc7b2c9;border-color:#ccc7b2c9}.switch-setting input:checked+.switch-track:after,.travel-toggle[aria-pressed=true] .switch-track:after{transform:translateX(14px);background:#11171c}.switch-setting input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:4px}.travel-setting{display:flex;align-items:center;justify-content:space-between;padding-top:4px;padding-bottom:4px;gap:12px}.travel-actions{display:flex;align-items:center;gap:6px;margin-right:-8px}.travel-toggle{gap:9px;min-width:74px;justify-content:flex-end;border-radius:8px;font-size:.75rem;color:var(--muted)}#next-world{width:38px;min-width:38px;height:40px;color:#d5d8d0}#next-world svg{width:17px;height:17px}
.navigation-panel{inset:max(86px,calc(env(safe-area-inset-top) + 72px)) auto auto max(var(--edge),env(safe-area-inset-left));max-height:calc(100dvh - 186px);width:310px;padding-bottom:16px}.navigation-panel>.panel-head{margin-bottom:10px}.destinations{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);gap:8px;margin-top:10px;padding-top:10px}.destinations a{display:flex;align-items:center;gap:8px;min-height:50px;border-radius:8px;font-size:.875rem;padding:0 5px}.destinations a:hover{background:#e9eee608}.destinations a>svg{width:13px;height:13px;margin-left:auto;color:var(--muted)}.destination-mark{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:26px;flex-shrink:0}.atlas-mark{gap:2px}.atlas-mark i{display:block;width:5px;height:14px;border:1px solid #c2c3ab;border-radius:5px;transform:rotate(-20deg)}.atlas-mark i:nth-child(2){height:20px;transform:rotate(20deg)}.poseidon-mark i{display:block;width:20px;height:19px;border:1px solid #b5a7bf;border-radius:50% 50% 20% 20%;transform:rotate(-24deg)}.poseidon-mark:after{content:'';position:absolute;width:24px;height:1px;background:#b5a7bf;transform:rotate(-24deg)}
.source-choice{display:flex;width:100%;height:auto;min-height:69px;justify-content:flex-start;gap:14px;text-align:left;border-radius:10px;padding:9px 8px;margin:0 -1px}.source-choice>svg:first-child{width:23px;height:23px;color:#c2c6be}.source-choice>span{font-size:.875rem;line-height:1.4}.source-choice small{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}.source-choice>.choice-arrow{width:14px;height:14px;margin-left:auto;color:#8a9297}.source-choice:disabled{opacity:.4}#source-help{font-size:.75rem;line-height:1.6;color:var(--muted);margin:14px 0 12px;padding:0 1px}#source-help.problem{color:#e4ba93}#source-current{display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:1px solid var(--line);border-radius:10px;padding:7px 8px 7px 12px;margin:0 0 12px}#source-current>div{min-width:0}#song-title{display:block;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#signal-status{display:block;margin-top:4px;color:var(--muted);font-size:.75rem}.song{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:51px;padding:12px 10px;border-radius:8px;text-align:left;overflow-wrap:anywhere;font-size:.875rem;line-height:1.5}.song[aria-current=true]{background:#d7d1bd14;color:var(--accent)}.song[aria-current=true]:before{content:'';width:3px;min-height:19px;flex-shrink:0;align-self:stretch;margin-right:10px;background:var(--accent);border-radius:3px}
#notice{position:fixed;z-index:7;bottom:calc(var(--dock-bottom) + 84px);left:50%;transform:translateX(-50%);margin:0;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:#171d23ed;color:#e4e5df;max-width:min(420px,calc(100vw - 32px));font-size:.8125rem;line-height:1.5;text-align:center;pointer-events:none;backdrop-filter:blur(12px)}body.file-over:after{content:'Drop your music';position:fixed;z-index:8;inset:18px;border:1px dashed #d7d1bd88;border-radius:20px;background:#111a24df;display:grid;place-items:center;font-size:1rem;pointer-events:none}
[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,4px);pointer-events:none;white-space:nowrap;padding:7px 10px;border-radius:7px;border:1px solid var(--line);background:#191f25f5;color:#e9e9e2;font-size:.75rem;font-weight:400;line-height:1.4;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s}.brand[data-tip]:after{top:calc(100% + 10px);bottom:auto;left:0;transform:translate(0,-4px)}@media(hover:hover){[data-tip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%,0)}.brand[data-tip]:hover:after{transform:translate(0,0)}}[data-tip]:focus-visible:after{opacity:1;visibility:visible;transform:translate(-50%,0)}.brand[data-tip]:focus-visible:after{transform:translate(0,0)}[data-tip][aria-expanded=true]:after{opacity:0;visibility:hidden}
@keyframes panel-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){:root{--edge:16px;--dock-bottom:max(16px,env(safe-area-inset-bottom));--panel-bottom:calc(var(--dock-bottom) + 72px)}.panel{left:12px;right:12px;width:auto;max-width:none;max-height:min(66dvh,calc(100dvh - var(--panel-bottom) - 18px));padding:15px 20px 10px;border-radius:16px}.navigation-panel{top:82px;bottom:auto;left:16px;right:auto;width:min(310px,calc(100vw - 32px));max-height:calc(100dvh - 176px);padding:17px 20px 15px}.navigation-panel .panel-head{margin-bottom:17px}.brand{height:44px;padding-left:6px;padding-right:12px;gap:8px}.brand-mark{width:27px;height:27px}.dock{gap:1px;padding:4px 5px}.dock>button,#transport>button{width:42px;min-width:42px}.dock-divider{margin:0 3px}.switch-setting{min-height:57px}.world-settings{padding-top:13px}.range-setting{padding-bottom:13px}.motion-setting{padding-bottom:14px}.switch-setting small{max-width:none}.setting{font-size:.875rem}.panel-head{margin-bottom:10px}.source-choice{min-height:64px}#notice{bottom:calc(var(--dock-bottom) + 77px)}body[data-audio=files] .panel:not(.navigation-panel){bottom:calc(var(--panel-bottom) + 80px);max-height:calc(100dvh - var(--panel-bottom) - 106px)}}
@media(max-width:370px){.dock>button,#transport>button{width:38px;min-width:38px}.dock{gap:0}.dock-divider{margin:0 2px}.panel{padding-left:17px;padding-right:17px}.switch-setting small{max-width:196px}.destinations{gap:4px}.segmented span{padding:0 11px}}
@media(max-height:500px) and (min-width:601px){:root{--edge:12px;--dock-bottom:12px;--panel-bottom:12px}.panel{max-height:calc(100dvh - 24px)}.navigation-panel{top:70px;max-height:calc(100dvh - 82px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

@media(max-width:600px){#settings-dialog{padding-top:12px;padding-bottom:8px}#settings-dialog .panel-head{margin-bottom:3px}#settings-dialog .range-setting{padding-top:0;padding-bottom:7px}#settings-dialog .motion-setting{padding-bottom:8px}#settings-dialog .world-settings{padding-top:9px}#settings-dialog .world-settings>.section-label{margin-bottom:1px}#settings-dialog .switch-setting{min-height:54px;padding-top:7px;padding-bottom:7px}#settings-dialog .switch-setting small{max-width:none}#settings-dialog .travel-setting{padding-top:0;padding-bottom:0}#settings-dialog .panel-foot{margin-top:5px;min-height:46px;padding-top:1px}}

/* Contrast belongs to the controls, leaving the moving world clear between them. */
.panel svg,.masthead svg,.dock svg,#meter,.switch-track{filter:drop-shadow(0 1px 1px #000c) drop-shadow(0 0 4px #0008)}
.panel input[type=range],#seek{filter:drop-shadow(0 1px 2px #000b)}

/* Shallow relief keeps the lettering readable across both lit and dark forms. */
.panel,.masthead,#playback-details,#audio-hint{
  --letter-relief:0 -.35px 0 #ffffff40,0 .65px 0 #1b2730,0 1.4px 1px #000c,0 0 4px #000b;
  text-shadow:var(--letter-relief);
  font-weight:300;
  -webkit-text-stroke:.2px #03080bd9;
  paint-order:stroke fill;
}
.panel button,.brand,.panel a{font-weight:300;text-shadow:var(--letter-relief)}
.panel-head h1,.panel-head h2{font-weight:400;letter-spacing:.005em}
.panel small,.panel .section-label,.range-ends,.privacy-note{font-size:.8125rem;letter-spacing:.01em}
.panel,.dock,.brand,#playback-details{
  border-color:#e0e9e254;
  box-shadow:inset 0 1px 0 #f6ffef12,inset 0 -1px 0 #01070d99,0 1px 2px #000b,0 0 10px #8aa9aa0a;
}
.panel svg,.masthead svg,.dock svg{
  filter:drop-shadow(0 -.5px 0 #f4ffed55) drop-shadow(0 1px 0 #111c24) drop-shadow(0 2px 1px #000e);
}

/* Only the row being used gains a backing; the rest of the world stays clear. */
.panel .setting{border-radius:6px;transition:background .18s,box-shadow .18s}
.panel .setting:focus-within{background:#070e149c;box-shadow:0 0 0 8px #070e149c}
.panel .source-choice:focus-visible,.panel .song:focus-visible,.destinations a:focus-visible,.panel-foot .text-button:focus-visible{background:#070e14b3}
@media(hover:hover){
  .panel .setting:hover{background:#070e149c;box-shadow:0 0 0 8px #070e149c}
  .panel .source-choice:hover,.panel .song:hover,.destinations a:hover,.panel-foot .text-button:hover{background:#070e14b3}
}

.panel small,.panel-head h1>span{font-weight:300}