:root{
  color-scheme:dark;--ink:#f7f3e9;--muted:#a2b9ae;--subtle:#7c9891;--gold:#dfca9d;
  --bg:#081a1c;--panel:#102c2d;--panel2:#193b39;--stroke:rgba(205,230,218,.13);--emerald:#285a4d;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;scroll-behavior:smooth}body{min-height:100dvh;background:#071b1c}
button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.43}
a{color:inherit;text-decoration:none}.hidden,[hidden]{display:none!important}
.ambient-backdrop{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 25% 0%,#31564c 0%,transparent 45%),radial-gradient(circle at 75% 80%,#182f36 0%,transparent 52%),#07191b}
.page-shell{width:min(100%,460px);min-height:100dvh;margin:auto;position:relative;background:linear-gradient(170deg,#0d2828,#081d1e 42%,#09191c);box-shadow:0 0 80px #0006;padding:0 22px;overflow:clip}
.site-header{height:84px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid #b7a57873;border-radius:50%;font-size:23px;color:var(--gold)}
.brand-text{font-size:24px;line-height:1;letter-spacing:-1.5px;font-weight:600}.brand-dot{color:var(--gold)}.brand-text small{display:block;margin-top:5px;font-size:7px;letter-spacing:2.2px;font-weight:600;color:#8cae9f}
.header-actions{display:flex;align-items:center;gap:9px}.icon-button{position:relative;border:1px solid var(--stroke);background:#16332fba;border-radius:50%;display:grid;place-items:center;min-width:36px;height:36px;font-size:22px;color:#e4e9d6}.library-count{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:2px;font-size:9px;background:var(--gold);color:#15332b;border-radius:50%}
.connect-badge{display:inline-flex;align-items:center;font-size:10px;color:var(--muted);letter-spacing:.1px;max-width:17px;overflow:hidden}.connect-badge>span:last-child{display:none}.signal-dot{height:9px;width:9px;border-radius:50%;background:#b69f59;display:inline-block;box-shadow:0 0 0 3px #b69f5924}.signal-dot.online{background:#83c3a3;box-shadow:0 0 0 3px #83c3a324}.signal-dot.offline{background:#e1ab80}
.setup-page{padding:35px 0 42px}.setup-head{padding:3px 2px 23px}.head-top,.section-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.mini-label,.section-line,.step-count,.player-overline,.player-top-title>span{font-size:9px;font-weight:750;letter-spacing:2.05px;color:#c8d0b0}.step-count,.section-line>span:last-child{color:#769e8d}.step-progress{height:3px;border-radius:10px;margin:19px 0 31px;background:#24403a;overflow:hidden}.step-progress i{display:block;height:100%;width:33.3333%;background:linear-gradient(90deg,#8eba9a,#e3d3a5);border-radius:10px;transition:width .3s ease}
.setup-head h1{margin:0;font-weight:450;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,9vw,42px);line-height:1.1;letter-spacing:-1.1px;max-width:410px}.setup-head p{color:#a8bcb1;font-size:13px;line-height:1.6;margin:13px 0 0;max-width:330px}.wizard-panel{animation:enter .25s both}.section-line{margin:8px 2px 15px;letter-spacing:1.4px;font-size:9px}
.reciter-grid{display:grid;gap:12px}.selection-card{width:100%;background:#122f2e;border:1px solid #41635b69;border-radius:20px;padding:12px;color:#eaf0e6;display:flex;align-items:center;gap:14px;text-align:left;transition:border-color .2s,transform .2s,background .2s;min-height:96px}.selection-card:hover:not(:disabled){background:#1b3c39;transform:translateY(-1px)}.selection-card.selected{border-color:#e1ce9d;background:#20443c;box-shadow:inset 0 0 0 1px #e1ce9d24}.selection-card:focus-visible,.primary-button:focus-visible,.mini-selector:focus-visible{outline:2px solid #e2c78e;outline-offset:3px}
.cover-art,.mini-cover{position:relative;display:grid;place-items:center;flex-shrink:0;overflow:hidden;isolation:isolate;color:#f4e5bd;background:#24524b}.cover-art{width:87px;height:84px;border-radius:14px}.cover-art::before,.mini-cover::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.8;background:radial-gradient(circle at 70% 22%,#fcdd9855 0%,transparent 26%),linear-gradient(155deg,#436e5b,#173b3a 50%,#0b262d)}
.cover-art span{font-size:31px;text-shadow:0 2px 15px #101d1e77;font-weight:350}.cover-art.cover-reciter span{border:1px solid #bcd0b78a;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-family:Georgia,serif}.cover-art.cover-reciter::before,.mini-cover.cover-reciter::before{background:radial-gradient(circle at 66% 14%,#bdbd847a,transparent 33%),linear-gradient(140deg,#537c60,#17413c,#091e25)}
.cover-art.cover-surah::before,.mini-cover.cover-surah::before{background:radial-gradient(circle at 75% 15%,#d5b78045,transparent 35%),repeating-linear-gradient(55deg,transparent 0 10px,#a4c29b13 10px 11px),linear-gradient(145deg,#335d51,#09262a)}
.cover-art.cover-rain::before,.mini-cover.cover-rain::before{background:repeating-linear-gradient(110deg,transparent 0 10px,#d3e4df2b 11px,#d3e4df10 12px,transparent 13px 24px),radial-gradient(circle at 70% 12%,#accfc7b1,transparent 45%),linear-gradient(145deg,#3b6976,#0e393d)}
.cover-art.cover-forest::before,.mini-cover.cover-forest::before{background:radial-gradient(circle at 75% 16%,#ebc78999,transparent 39%),linear-gradient(136deg,transparent 46%,#214736 47%,#164033 65%,transparent 66%),linear-gradient(30deg,#487c5e,#0b302a)}
.cover-art.cover-water::before,.mini-cover.cover-water::before{background:repeating-linear-gradient(175deg,#a3d7bb22 0 2px,transparent 2px 12px),linear-gradient(140deg,#5a9a89,#1a6566 50%,#153b48)}
.cover-art.cover-night::before,.mini-cover.cover-night::before{background:radial-gradient(circle at 67% 25%,#edd3a1 0 8%,transparent 9%),radial-gradient(circle at 26% 56%,#edd3a179 1px,transparent 3px),linear-gradient(150deg,#31455e,#172738,#10262f)}
.cover-art.cover-fire::before,.mini-cover.cover-fire::before{background:radial-gradient(circle at 50% 78%,#e8a05c9c,transparent 52%),linear-gradient(150deg,#493e42,#261e2d)}
.cover-art.cover-off::before{background:linear-gradient(135deg,#203b3b,#0f282a)}
.choice-text{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;flex:1}.choice-text strong{font-size:16px;line-height:1.1;font-weight:650;letter-spacing:-.3px;overflow-wrap:anywhere}.choice-text small{font-size:10px;line-height:1.5;color:#9bb9a9}.choice-meta{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1.25px;color:#e6d3a3}.check-mark{display:grid;place-items:center;width:23px;height:23px;flex-shrink:0;border:1px solid #65867b;border-radius:50%;font-size:12px;color:#8aa69b}.selected>.check-mark{background:#dec99b;border-color:#dec99b;color:#153f35}.locked .check-mark{border-color:#314b47;font-size:13px}
.step-assist{font-size:11px;line-height:1.65;color:#8ea99c;margin:18px 2px 22px}.primary-button{width:100%;border:none;border-radius:16px;padding:18px 21px;background:#e6d3a8;color:#14312d;display:flex;align-items:center;justify-content:space-between;min-height:60px;font-weight:750;font-size:14px;box-shadow:0 10px 35px #0002}.primary-button:not(:disabled):hover{background:#f2e1b9}.primary-button span:last-child{font-size:22px;font-weight:400}
.ambience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.ambience-grid .selection-card{min-height:216px;padding:10px;display:flex;flex-direction:column;align-items:stretch;gap:10px}.ambience-grid .cover-art{height:116px;width:100%;border-radius:13px}.ambience-grid .choice-text{gap:5px;width:100%;flex:0}.ambience-grid .choice-text strong{font-size:13px}.ambience-grid .choice-text small{font-size:10px;min-height:22px}.ambience-grid .check-mark{position:absolute;right:18px;top:18px;background:#153833bc;z-index:1}.ambience-grid .selection-card{position:relative}.ambience-grid .selection-card.selected>.check-mark{background:#e6d3a8}.ambience-grid .choice-meta{letter-spacing:1px;font-size:8px}
.customize-panel,.download-options{margin:18px 0;border:1px solid var(--stroke);padding:14px;border-radius:14px;background:#112b2be6}.customize-panel summary,.download-options summary,.mixer-panel summary,.advanced-picker summary{cursor:pointer;list-style:none;font-size:12px;font-weight:650;display:flex;justify-content:space-between;align-items:center}.customize-panel summary::after,.download-options summary::after{content:'⌄';font-size:18px;color:var(--gold)}.custom-row{margin-top:14px}.custom-row label,.advanced-picker label{display:block;font-size:10px;color:#a6beb2;margin-bottom:8px}.custom-row select,.advanced-picker select{width:100%;border:1px solid #426056;background:#173936;color:#eff0e5;border-radius:10px;padding:12px}.field-hint{color:#9ab1a5;font-size:11px;line-height:1.6;margin:11px 0}.surah-download-button{border:1px solid #607e71;background:#183c34;color:#dce9dc;border-radius:12px;padding:13px 15px;font-size:12px;font-weight:650;width:100%;margin-top:13px}
.surah-search{height:52px;display:flex;align-items:center;gap:10px;border:1px solid #395b53;background:#12302e;border-radius:14px;padding:0 16px;margin-bottom:25px}.surah-search>span{font-size:25px;color:#c6dbc4}.surah-search input{border:0;background:transparent;outline:0;width:100%;color:#f7f6ea;font-size:13px}.surah-search input::placeholder{color:#819e92}.surah-grid{max-height:min(51dvh,510px);min-height:230px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#456d59 transparent;display:flex;flex-direction:column;gap:9px;padding:1px 3px 1px 0}.surah-grid .selection-card{min-height:79px;padding:9px}.surah-grid .cover-art{width:58px;height:59px;border-radius:13px}.surah-grid .cover-art span{font-size:19px;font-family:Georgia,serif}.surah-grid .choice-text{gap:5px}.surah-grid .choice-text strong{font-size:15px}.surah-grid .choice-text small{font-size:10px}.surah-grid .choice-meta{font-size:9px}.wizard-back{margin-top:20px;border:0;background:transparent;color:#bad0bb;font-size:12px;padding:12px 0}.download-status{font-size:11px;color:#bdcdbb;line-height:1.45;margin:12px 0 7px;min-height:18px}.download-status.error{color:#eab1a1}.progress-rail{height:4px;background:#29463f;overflow:hidden;border-radius:5px;margin:13px 0 17px}.progress-fill{height:100%;background:#e7d7a7;width:0%;transition:width .2s}.security-note{text-align:center;color:#85a499;font-size:9px;line-height:1.5;margin:15px 0 0}
/* An immersive music player, with the same local ayah queue underneath. */
.player-page{margin:0 -22px;min-height:calc(100dvh - 84px)}.player-immersive{position:relative;isolation:isolate;min-height:max(810px,calc(100dvh - 84px));overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(circle at 40% 28%,#326d5a,#0f4140 45%,#071d24 85%)}.player-immersive video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.92}.player-wallpaper{position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 75% 13%,#dfcc9573 0%,transparent 26%),radial-gradient(circle at 50% 43%,#80b59b55,transparent 35%),linear-gradient(125deg,#255848,#102e35)}.player-immersive:has(video[src]) .player-wallpaper{opacity:.2}.player-vignette{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#061719ab 0%,transparent 22%,#0b1c1e46 48%,#061518d9 70%,#061318 100%)}
.player-top{display:grid;grid-template-columns:54px 1fr 69px;gap:8px;align-items:center;padding:21px 23px 0}.player-back{height:43px;width:43px;background:#0f2a2baa;border:1px solid #ffffff22;color:#fff;border-radius:50%;font-size:33px;line-height:1}.player-top-title{text-align:center;display:flex;flex-direction:column;gap:6px}.player-top-title>span{color:#f5e9c7;font-size:10px}.player-top-title small{color:#c6d3cc;letter-spacing:1px;font-size:7px;font-weight:600;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}.corner-ambience{justify-self:end;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0}.corner-ambience small{font-size:8px;font-weight:800;letter-spacing:.65px}.mini-cover{width:46px;height:46px;border-radius:12px;font-size:21px;border:1px solid #ffffff40}.top-ayah-pill{position:absolute;top:100px;left:22px;border:1px solid #ffffff2b;padding:10px 13px;border-radius:99px;background:#091e21a6;backdrop-filter:blur(8px);font-size:9px;letter-spacing:.85px;color:#c3d4c8;z-index:2}.top-ayah-pill strong{color:#f4f0dd;font-weight:750;margin-left:4px}.ayah-glow{width:6px;height:6px;display:inline-block;border-radius:50%;background:#95c6ab;margin-right:8px;box-shadow:0 0 9px #a1c8b8}
.player-main-art{width:min(67vw,292px);height:min(67vw,292px);min-height:230px;min-width:230px;margin:54px auto 4px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 20px 40px #07181b70)}.art-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 37% 32%,#c0d7b94d,#517b6d4a 43%,#1b3a3bb3 80%);box-shadow:0 0 0 1px #ffffff22,0 0 0 22px #ffffff04,inset 0 0 28px #c4d2aa35}.art-ring{position:absolute;inset:13%;border-radius:50%;border:1px solid #e9efd055}.ring-two{inset:26%;border:1px solid #e4dbad8c}.art-center{font-size:81px;color:#ebd9af;text-shadow:0 0 40px #e0ceaf80;font-family:Georgia,serif}.player-info{text-align:center;padding:0 15px}.player-overline{color:#e7d2a6;font-weight:750;font-size:9px;letter-spacing:2.15px;margin:5px 0 9px}.player-info h2{font-family:Georgia,serif;font-size:40px;font-weight:400;letter-spacing:-1.5px;line-height:1.12;margin:0;overflow-wrap:anywhere}.player-reciter{color:#bed0c5;font-size:12px;margin:12px 0 2px}
.player-control-dock{margin-top:auto;padding:19px 25px max(18px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,#08191af0 15%,#071719f7 100%)}.track-timing{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-variant-numeric:tabular-nums;color:#c6d5ca;margin:1px 0 10px}.seek-bar{width:100%;height:5px;accent-color:#e1d1a6;cursor:pointer}.transport{display:flex;justify-content:center;align-items:center;gap:49px;margin:24px 0 4px}.transport button{border:0;color:#f5f2e4;background:none}.transport-small{width:43px;height:43px;font-size:22px}.transport-main{width:73px;height:73px;border-radius:50%;background:#ead9b1!important;color:#16342d!important;box-shadow:0 4px 24px #e7cc9c45;font-size:28px}.track-direction{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.25px;color:#8ba59a;margin:6px 0 25px}.mixer-panel{border-top:1px solid #aec4b132;padding:13px 0}.mixer-panel summary{font-size:12px;color:#d5e0d6}.mixer-panel summary span:last-child{font-weight:450;color:#8ca99b;font-size:10px}.volume-box{margin:16px 0}.volume-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.1px;color:#c0d6c9;font-weight:750;margin-bottom:10px}.volume-box input{width:100%;accent-color:#e0cda0}.player-hint{min-height:20px;font-size:10px;line-height:1.4;color:#99baa7;margin:7px 0 12px;text-align:center}.player-bottom-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:9px;border-top:1px solid #ffffff24;padding-top:16px}.mini-selector{display:flex;align-items:center;gap:9px;text-align:left;min-width:0;background:#1734339c;border:1px solid #ffffff29;border-radius:15px;padding:9px;min-height:65px}.mini-selector .mini-cover{width:42px;height:42px}.selector-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.selector-copy small{font-size:8px;letter-spacing:1.2px;color:#c3d4c8;font-weight:750}.selector-copy strong{font-size:11px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:105px}.selector-arrow{font-size:14px;margin-left:auto}.right-selector{justify-content:end;text-align:right}
.picker-overlay{position:fixed;z-index:50;inset:0;background:#071315ba;display:flex;justify-content:center;align-items:flex-end;padding:12px 12px 0;backdrop-filter:blur(7px)}.picker-sheet{width:min(460px,100%);max-height:86dvh;overflow:auto;background:linear-gradient(180deg,#1b3d3a,#102c2e);border:1px solid #8eb39b62;border-radius:25px 25px 0 0;padding:9px 20px max(22px,env(safe-area-inset-bottom));box-shadow:0 -24px 70px #0007}.sheet-handle{height:4px;width:43px;border-radius:5px;background:#91a99a;margin:0 auto 21px;opacity:.7}.sheet-head{display:flex;justify-content:space-between;align-items:start;gap:8px;margin-bottom:17px}.sheet-head h2{font-size:27px;font-family:Georgia,serif;font-weight:400;margin:7px 0 0}.sheet-close{width:36px;height:36px;border-radius:50%;border:1px solid #ffffff32;background:#214941;color:#eaf5e9}.picker-options{display:flex;flex-direction:column;gap:9px;max-height:53dvh;overflow:auto}.picker-options .selection-card{min-height:71px;padding:8px}.picker-options .cover-art{height:54px;width:57px}.picker-options .cover-art span{font-size:22px}.picker-options .choice-text strong{font-size:13px}.picker-options .choice-text small{font-size:10px}.advanced-picker{border-top:1px solid #ffffff28;margin-top:17px;padding-top:15px}.advanced-picker summary{margin-bottom:14px}.advanced-picker label{margin-top:11px}
.downloads-page{padding:30px 0 55px;min-height:70vh}.downloads-heading h2{font-family:Georgia,serif;font-size:34px;font-weight:400;margin:8px 0}.downloads-heading p:not(.mini-label){font-size:12px;color:#aac3b1}.back-button{background:transparent;border:0;font-size:12px;color:#e3d2ac;padding:10px 0}.storage-info{font-size:12px;padding:18px;border-radius:13px;border:1px solid var(--stroke);margin:20px 0}.download-items{display:grid;gap:10px}.download-item{background:#123431;border:1px solid var(--stroke);padding:15px;border-radius:13px;display:flex;align-items:start;gap:12px;justify-content:space-between}.download-item strong{font-size:13px}.download-item p{font-size:11px;color:#9cbab0;line-height:1.55}.secondary-button,.remove-button{border:1px solid #799989;background:#1c413c;border-radius:10px;color:#f2e8d4;font-size:11px;padding:10px}.library-warning{font-size:11px;line-height:1.6;color:#9bb3a8;margin-top:20px}
@keyframes enter{from{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:700px){.page-shell{border-left:1px solid #ffffff12;border-right:1px solid #ffffff12}.player-page{min-height:830px}}
@media(max-width:360px){.page-shell{padding:0 15px}.player-page{margin:0 -15px}.player-control-dock{padding-left:18px;padding-right:18px}.selection-card{gap:9px}.cover-art{width:74px}.setup-head h1{font-size:34px}.transport{gap:35px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* 0.1.7 — 9:16 portrait player. On desktop the app is a centred 9:16 phone;
   on a real phone the player fills the actual viewport including taller screens.
   Existing selection, manifests and offline data are not modified. */
.page-shell.is-playing{height:100dvh;min-height:0;overflow:hidden;padding:0}
.page-shell.is-playing .site-header{display:none}
.page-shell.is-playing main,
.page-shell.is-playing .player-page{height:100%;min-height:0;margin:0}
.page-shell.is-playing .player-immersive{height:100%;min-height:0;max-height:100%}
.player-immersive video{object-fit:cover;object-position:50% 50%;pointer-events:none}
.page-shell.is-playing .player-top{padding:clamp(11px,2.4dvh,21px) 20px 0;grid-template-columns:48px 1fr 56px}
.page-shell.is-playing .player-back{width:42px;height:42px}
.page-shell.is-playing .corner-ambience .mini-cover{height:41px;width:41px}
.page-shell.is-playing .top-ayah-pill{top:clamp(73px,11dvh,99px);left:17px;padding:8px 11px;font-size:8px}
.page-shell.is-playing .player-main-art{width:min(56vw,26dvh,225px);height:auto;aspect-ratio:1;min-width:0;min-height:0;flex:0 1 auto;margin:clamp(47px,8.5dvh,71px) auto 4px}
.page-shell.is-playing .art-center{font-size:clamp(40px,9dvh,68px)}
.page-shell.is-playing .player-info{padding:0 16px;flex:0 0 auto}
.page-shell.is-playing .player-overline{margin:0 0 6px;font-size:8px}
.page-shell.is-playing .player-info h2{font-size:clamp(27px,7.5vw,38px);line-height:1.1}
.page-shell.is-playing .player-reciter{font-size:11px;margin:7px 0 0}
.page-shell.is-playing .player-control-dock{flex:0 0 auto;padding:12px 19px max(9px,env(safe-area-inset-bottom));margin-top:auto}
.page-shell.is-playing .track-timing{margin-bottom:6px;font-size:10px}
.page-shell.is-playing .transport{gap:clamp(28px,11vw,58px);margin:10px 0 0}
.page-shell.is-playing .transport-main{width:62px;height:62px;font-size:25px}
.page-shell.is-playing .transport-small{width:45px;height:45px;min-width:45px;min-height:45px}
.page-shell.is-playing .track-direction{margin:2px 0 9px;font-size:7px;letter-spacing:.9px}
.page-shell.is-playing .mixer-panel{padding:10px 0;border-color:#aec4b136}
.page-shell.is-playing .mixer-panel summary{font-size:11px}
.page-shell.is-playing .mixer-panel .volume-box{margin:9px 0}
.page-shell.is-playing .player-hint{margin:4px 0 7px;min-height:0;font-size:9px;line-height:1.25;max-height:26px;overflow:hidden}
.page-shell.is-playing .player-bottom-shortcuts{padding-top:9px;gap:8px}
.page-shell.is-playing .mini-selector{min-height:53px;padding:6px;gap:7px;border-radius:13px}
.page-shell.is-playing .mini-selector .mini-cover{height:39px;width:39px}
.page-shell.is-playing .selector-copy strong{max-width:100px;font-size:10px}
.page-shell.is-playing .selector-copy small{font-size:7px}
.page-shell.is-playing .player-immersive:has(video[src]) .player-main-art{opacity:.66}
@media(min-width:700px){
  body{display:grid;place-items:center;min-height:100dvh}
  .page-shell{width:min(460px,56.25dvh);height:min(100dvh,817.778px);min-height:0;aspect-ratio:9/16;overflow-y:auto;overscroll-behavior:contain;border:1px solid #ffffff1c;border-radius:22px;box-shadow:0 24px 100px #0009}
  .page-shell.is-playing{height:min(100dvh,817.778px);overflow:hidden}
  .player-page{min-height:0}
}
@media(max-height:710px){
  .page-shell.is-playing .player-main-art{width:min(52vw,23dvh,176px);margin-top:44px}
  .page-shell.is-playing .player-control-dock{padding-top:8px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .page-shell.is-playing .player-overline{display:none}
  .page-shell.is-playing .track-direction{display:none}
  .page-shell.is-playing .transport{margin:5px 0 5px}
  .page-shell.is-playing .mixer-panel{padding:7px 0}
  .page-shell.is-playing .player-hint{margin:3px 0 5px}
  .page-shell.is-playing .player-bottom-shortcuts{padding-top:7px}
}
@media(max-height:580px){
  .page-shell.is-playing .player-main-art{width:min(39vw,19dvh,125px);margin-top:43px}
  .page-shell.is-playing .player-reciter{margin-top:3px}
  .page-shell.is-playing .player-hint{display:none}
  .page-shell.is-playing .mixer-panel{padding:5px 0}
}
@media(max-width:360px){
  .page-shell.is-playing .player-control-dock{padding-left:12px;padding-right:12px}
  .page-shell.is-playing .player-top{padding-left:12px;padding-right:12px}
  .page-shell.is-playing .mini-selector .mini-cover{width:35px;height:35px}
  .page-shell.is-playing .mini-selector{gap:5px}
}