/* HOMESTAT — the Core Eclipse 4 room controller's screen, rebuilt in code (16 Oct 2026). See core-rc.js.
   The device, measured on Core's straight-on pictures: one black glass over the whole 86 mm square front, its corners
   softly rounded (about 1.8 mm); the 72 mm screen in it, 1 mm above the middle (border about 6 mm at the sides, 5 mm
   at the top, 7 mm at the bottom); the metal body shows only as a hairline (about 0.9 mm) around the glass; two
   sensor windows in the left border. The screen is drawn at 720 x 720 design pixels; spacing, type and colours
   measured off Core's own pictures (screens-dev/ref-core/rc). Every rule inside the screen starts with .rc-ui. */

/* ---- on the page: about 540 px on a laptop, never taller than the window, the content width on a phone ---- */
.hsx-core-rc{max-width:540px;max-width:min(540px,calc(100vh - 100px));max-width:min(540px,calc(100dvh - 100px));margin:8px auto 44px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;
  --fin-hi:#4A4A4A;--fin:#2B2B2B;--fin-lo:#161616}
/* Core's ten finishes: the hairline of metal round the glass (a light, a middle and a dark tone) */
.hsx-core-rc[data-finish="core-alb"]{--fin-hi:#4A4A4A;--fin:#2B2B2B;--fin-lo:#161616}
.hsx-core-rc[data-finish="core-alg"]{--fin-hi:#EDEDED;--fin:#D2D2D2;--fin-lo:#A3A3A3}
.hsx-core-rc[data-finish="core-sst"]{--fin-hi:#DCDCDC;--fin:#B4B4B4;--fin-lo:#858585}
.hsx-core-rc[data-finish="core-bra"]{--fin-hi:#CDB879;--fin:#A88F4B;--fin-lo:#7A6630}
.hsx-core-rc[data-finish="core-glw"]{--fin-hi:#FFFFFF;--fin:#F0EFEE;--fin-lo:#C9C8C6}
.hsx-core-rc[data-finish="core-sbe"]{--fin-hi:#E0DED6;--fin:#C4C1B7;--fin-lo:#98958B}
.hsx-core-rc[data-finish="core-vrd"]{--fin-hi:#95A69D;--fin:#72847B;--fin-lo:#4F5E56}
.hsx-core-rc[data-finish="core-ccg"]{--fin-hi:#6A4A36;--fin:#462E1F;--fin-lo:#2A1A10}
.hsx-core-rc[data-finish="core-ttg"]{--fin-hi:#625F5A;--fin:#3F3D39;--fin-lo:#252421}
.hsx-core-rc[data-finish="core-obl"]{--fin-hi:#353535;--fin:#1A1A1A;--fin-lo:#0B0B0B}

.rc-device{position:relative;width:100%;aspect-ratio:1/1;border-radius:.35%;
  background:linear-gradient(135deg,var(--fin-hi) 0%,var(--fin) 42%,var(--fin) 60%,var(--fin-lo) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 32px 60px -26px rgba(0,0,0,.95),0 14px 28px -18px rgba(0,0,0,.75)}
/* the glass: black, its edge catches a little light */
.rc-glass{position:absolute;left:.94%;top:.94%;right:.94%;bottom:.94%;border-radius:2.1%;
  background:linear-gradient(160deg,#1D1D1E 0%,#151516 45%,#111112 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 1px rgba(255,255,255,.07)}
/* two sensor windows in the border, left of the screen */
.rc-sen{position:absolute;left:2.56%;top:77.85%;width:1.62%;height:2.45%;border-radius:999px;background:#202021;box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.05)}
.rc-sen2{top:83.6%;height:3.95%}
/* the screen: 83.9 % of the front, its top 6.9 % and its bottom 9.2 % from the edge */
.rc-screen{position:absolute;left:8.065%;top:6.9%;width:83.87%;height:83.87%;overflow:hidden;background:#000}
.rc-sheen{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 61%,rgba(255,255,255,.035) 61.2%,rgba(255,255,255,.012) 78%,rgba(255,255,255,0) 78.2%)}

/* ---- the screen ---- */
.rc-ui{width:720px;height:720px;background:#979CA0;color:#FFFFFF;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Segoe UI",Arial,sans-serif;font-size:24px;line-height:1.2;font-weight:400;
  letter-spacing:0;text-align:left;font-feature-settings:normal;-webkit-text-size-adjust:none;text-size-adjust:none;
  --cy:#1CF0F6;--row:rgba(44,48,51,.8);--sub:rgba(255,255,255,.72);--rb:#F4F4F4;--rbg:#4E5255;--led:#FFFFFF}
.rc-ui p,.rc-ui h3{margin:0;padding:0;max-width:none;font:inherit;color:inherit}
.rc-ui b,.rc-ui strong{font-weight:inherit}
.rc-ui svg{max-width:none}
.rc-ui button{-webkit-user-select:none;user-select:none;touch-action:manipulation;color:inherit}
.rc-ui button:focus-visible,.rc-ui [tabindex]:focus-visible{outline:4px solid #FF8A1F;outline-offset:3px}
.rc-ui .rc-mt:focus,.rc-ui .rc-lt:focus,.rc-ui .rc-ct:focus{outline:none}
.rc-ui .rc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rc-ui .rc-i{display:block;flex:none;width:48px;height:48px;fill:currentColor;overflow:visible}
/* the room behind the pages, under a soft grey veil, as on Core's screen */
.rc-ui .rc-room{position:absolute;left:0;top:0;display:block;width:720px;height:720px;max-width:none}
.rc-ui .rc-veil{position:absolute;left:0;top:0;width:720px;height:720px;background:rgba(36,48,61,.45);pointer-events:none}
.rc-ui .rc-app{position:absolute;left:0;top:0;width:720px;height:720px;text-shadow:0 1px 3px rgba(0,0,0,.16)}

/* ---- the pages side by side: only the page in view can take the focus; while they move, the ones beside show ---- */
.rc-ui .rc-strip{position:absolute;left:0;top:0;width:720px;height:640px;z-index:1;transition:transform .36s cubic-bezier(.25,.8,.3,1)}
.rc-ui .rc-strip.rc-drag,.rc-ui .rc-strip.rc-jump{transition:none}
.rc-ui .rc-pg{position:absolute;top:0;width:720px;height:640px;visibility:hidden}
.rc-ui .rc-pg.on,.rc-ui .rc-moving .rc-pg{visibility:visible}
.rc-ui .rc-app.rc-nav-on .rc-pg{visibility:hidden}
.rc-ui .rc-pg.rc-in,.rc-ui .rc-navpg{animation:rc-in .28s ease}
@keyframes rc-in{from{opacity:0}to{opacity:1}}

/* ---- the bottom bar: home, the page dots, the navigation button ---- */
.rc-ui .rc-bb{position:absolute;left:0;top:640px;width:720px;height:80px;z-index:3}
.rc-ui .rc-home{position:absolute;left:8px;top:4px;width:72px;height:72px;display:grid;place-items:center;border-radius:14px;color:#FFFFFF;transition:color .2s}
.rc-ui .rc-home.on{color:var(--cy)}
.rc-ui .rc-dots{position:absolute;left:50%;top:10px;height:61px;display:flex;transform:translateX(-50%)}
.rc-ui .rc-dot{display:grid;place-items:center;width:33px;height:61px;border-radius:10px}
.rc-ui .rc-dot i{display:block;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.74);transition:background .2s}
.rc-ui .rc-dot[aria-current="page"] i{background:var(--cy)}
.rc-ui .rc-navb{position:absolute;right:8px;top:4px;width:72px;height:72px;display:grid;place-items:center;border-radius:50%}
.rc-ui .rc-nf{fill:rgba(238,240,242,.86);transition:fill .2s}
.rc-ui .rc-nd{fill:#8E9397;transition:fill .2s}
.rc-ui .rc-navb.on .rc-nf{fill:var(--cy)}
.rc-ui .rc-navb.on .rc-nd{fill:#FFFFFF}

/* ---- titles: a list page's title at the left over a short cyan line; a control page's in the middle ---- */
.rc-ui .rc-lt{position:absolute;left:20px;top:22px;max-width:560px;font-size:30px;line-height:36px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ui .rc-cy{position:absolute;left:18px;top:77px;width:72px;height:5px;border-radius:3px;background:var(--cy)}
.rc-ui .rc-ct{position:absolute;left:150px;right:150px;top:24px;font-size:27px;line-height:34px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ui .rc-back{position:absolute;left:12px;top:9px;width:64px;height:64px;display:grid;place-items:center;border-radius:50%}
.rc-ui .rc-back::before{content:"";position:absolute;left:8px;top:8px;width:48px;height:48px;border-radius:50%;background:rgba(36,39,42,.84)}
.rc-ui .rc-back .rc-i{position:relative;width:30px;height:30px}
.rc-ui .rc-pwr{position:absolute;right:6px;top:2px;width:80px;height:80px;display:grid;place-items:center;border-radius:50%;color:rgba(255,255,255,.9)}
.rc-ui .rc-pwr .rc-i{width:44px;height:44px}

/* the switch: an outlined pill, a white knob */
.rc-ui .rc-sw{position:relative;flex:none;width:96px;height:52px;border-radius:26px;border:3px solid rgba(255,255,255,.92);background:rgba(255,255,255,.07);transition:border-color .2s}
.rc-ui .rc-sw i{position:absolute;left:5px;top:5px;width:36px;height:36px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s,background .2s}
.rc-ui .rc-sw[aria-checked="true"] i{transform:translateX(44px)}
.rc-ui .rc-sw[aria-checked="false"]{border-color:rgba(255,255,255,.5)}
.rc-ui .rc-sw[aria-checked="false"] i{background:rgba(255,255,255,.62)}
.rc-ui .rc-tsw{position:absolute;right:24px;top:15px}
/* the white round buttons */
.rc-ui .rc-rb{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;background:var(--rb);color:var(--rbg);box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .1s}
.rc-ui .rc-rb .rc-i{width:44px;height:44px}
.rc-ui .rc-rb:active{transform:scale(.94)}

/* ---- the main page ---- */
.rc-ui .rc-mt{position:absolute;left:20px;top:150px;font-size:35px;line-height:40px;font-weight:500;white-space:nowrap}
.rc-ui .rc-cym{top:207.5px}
.rc-ui .rc-clock{position:absolute;left:19px;top:238px;font-size:92px;line-height:100px;font-weight:500;letter-spacing:-4px;white-space:nowrap}
.rc-ui .rc-reads{position:absolute;left:0;top:369px;width:720px;height:76px}
.rc-ui .rc-rd{position:absolute;top:0}
.rc-ui .rc-rh{left:21px}
.rc-ui .rc-rt{left:182px}
.rc-ui .rc-ra{left:401px}
.rc-ui .rc-rv{display:flex;align-items:center;height:40px;white-space:nowrap}
.rc-ui .rc-rv b{font-size:34px;line-height:40px}
.rc-ui .rc-rv small{align-self:flex-start;margin:4px 0 0 7px;font-size:22px;line-height:26px;color:var(--sub)}
.rc-ui .rc-rh .rc-i{width:41px;height:41px;margin:0 0 0 -5px}
.rc-ui .rc-rt .rc-i{width:44px;height:44px;margin:-4px 1px 0 -3px}
.rc-ui .rc-ra .rc-i{width:46px;height:46px;margin:-3px 4px 0 -4px}
.rc-ui .rc-rl{display:block;margin-top:4px;font-size:26px;line-height:30px;color:var(--sub);text-transform:uppercase;white-space:nowrap}
.rc-ui .rc-big{position:absolute;top:500px;width:330px;height:120px;display:flex;align-items:center;padding:0 16px 0 20px;border-radius:29px;background:rgba(48,52,55,.8);font-size:30px;line-height:36px;white-space:nowrap;transition:background .15s}
.rc-ui .rc-big:active{background:rgba(30,33,35,.86)}
.rc-ui .rc-enter{left:20px}
.rc-ui .rc-leave{left:370px}
.rc-ui .rc-big .rc-i{width:54px;height:54px;margin:0 6px 0 -2px}

/* ---- the list pages: dark rounded rows; the list scrolls when it is longer than the page ---- */
.rc-ui .rc-scroll{position:absolute;left:0;top:92px;width:720px;height:548px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rc-ui .rc-scroll::-webkit-scrollbar{display:none}
.rc-ui .rc-rows{padding:8px 20px 20px}
.rc-ui .rc-row{position:relative;height:150px;margin-bottom:20px;border-radius:26px;background:var(--row)}
.rc-ui .rc-rmain{position:absolute;left:0;top:0;bottom:0;right:240px;border-radius:26px 0 0 26px;text-align:left}
.rc-ui .rc-ric{position:absolute;left:40px;top:25px;width:100px;height:100px;transition:opacity .2s}
.rc-ui .rc-ric .rc-i{width:100px;height:100px}
.rc-ui .rc-rtx{position:absolute;left:148px;top:0;bottom:0;right:0;display:flex;flex-direction:column;justify-content:center;padding-top:18px}
.rc-ui .rc-rst{display:block;height:24px;font-size:19px;line-height:24px;color:var(--sub);text-transform:uppercase;white-space:nowrap}
.rc-ui .rc-rnm{display:block;margin-top:18px;font-size:27px;line-height:34px;white-space:nowrap}
.rc-ui .rc-rct{position:absolute;right:28px;top:0;bottom:0;display:flex;align-items:center;gap:26px}
.rc-ui .rc-r-light .rc-rtx{right:270px}
.rc-ui .rc-r-led .rc-rtx{right:0}
.rc-ui .rc-row[data-on="false"] .rc-ric{opacity:.6}
.rc-ui .rc-ray{display:none}
.rc-ui .rc-row[data-on="true"] .rc-ray{display:inline}
.rc-ui .rc-row[data-on="true"] .rc-ric .rc-i{filter:drop-shadow(0 0 9px rgba(255,255,255,.7))}
.rc-ui .rc-leds rect{fill:#7D8387;transition:fill .25s}
.rc-ui .rc-row[data-on="true"] .rc-leds rect,.rc-ui .rc-tile .rc-leds rect{fill:var(--led)}
.rc-ui .rc-cdot{display:block;flex:none;width:54px;height:54px;border-radius:50%;background:var(--led);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);cursor:pointer;transition:background .25s,opacity .25s}
.rc-ui .rc-cdot.off{opacity:.42}
.rc-ui .rc-r-scn[data-on="true"] .rc-rst{color:var(--cy)}
.rc-ui .rc-r-scn .rc-ric .rc-i{width:88px;height:88px;margin:6px}
.rc-ui .rc-r-scn .rc-ric .rc-i{filter:none}
.rc-ui .rc-play .rc-i{width:42px;height:42px;margin-left:3px}
.rc-ui .rc-cwin{fill:none;stroke:currentColor;stroke-width:2;opacity:.5}

/* ---- the control pages: a ring (the set point, the LED strip's brightness), its value, - and +, a pill of buttons ---- */
.rc-ui .rc-ring{position:absolute;left:91px;top:89px;width:538px;height:538px;border-radius:50%;pointer-events:none}
.rc-ui .rc-ring svg{display:block;width:538px;height:538px;overflow:visible}
.rc-ui .rc-ring:focus-visible{outline:none}
.rc-ui .rc-arc{fill:none;stroke:#3EA6E7;stroke-width:8;stroke-linecap:round;transition:stroke .3s}
.rc-ui .rc-hit{fill:none;stroke:transparent;stroke-width:80;pointer-events:stroke;cursor:pointer}
.rc-ui .rc-kn{pointer-events:none}
.rc-ui .rc-knc{fill:#FFFFFF;stroke:rgba(0,0,0,.12);stroke-width:1}
.rc-ui .rc-knf{fill:none;stroke:#FF8A1F;stroke-width:4;opacity:0}
.rc-ui .rc-ring:focus-visible .rc-knf{opacity:1}
.rc-ui .rc-val{position:absolute;left:0;right:0;top:294px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .2s}
.rc-ui .rc-val b{font-size:58px;line-height:64px;font-weight:300}
.rc-ui .rc-val small{position:absolute;margin:8px 0 0 12px;font-size:23px;line-height:28px;color:var(--sub)}
.rc-ui .rc-sub{position:absolute;left:0;right:0;top:390px;display:flex;justify-content:center;gap:46px;font-size:20px;line-height:28px;color:var(--sub);white-space:nowrap}
.rc-ui .rc-sub span{display:flex;align-items:center}
.rc-ui .rc-sub .rc-i{width:28px;height:28px;margin-right:6px}
.rc-ui .rc-sub small{align-self:flex-start;margin-left:2px;font-size:14px;line-height:18px}
.rc-ui .rc-rbl{position:absolute;top:450px;width:74px;height:74px}
.rc-ui .rc-rbl .rc-i{width:54px;height:54px}
.rc-ui .rc-rbm{left:256px}
.rc-ui .rc-rbp{left:388px}
.rc-ui .rc-pill{position:absolute;top:568px;height:73px;display:flex;border-radius:37px;background:rgba(48,52,55,.82)}
.rc-ui .rc-pill4{left:108px;width:500px}
.rc-ui .rc-pill2{left:235px;width:250px}
.rc-ui .rc-pb{flex:1 1 0;display:grid;place-items:center;height:73px;border-radius:37px;color:rgba(255,255,255,.9);transition:background .2s}
.rc-ui .rc-pb .rc-i{width:44px;height:44px}
.rc-ui .rc-pb[aria-pressed="true"],.rc-ui .rc-pb[aria-current="page"]{background:#161819;color:#FFFFFF}
/* the air conditioning: the ring takes the mode's colour, and fades when it is off */
.rc-ui .rc-pg-ac[data-mode="heat"] .rc-arc{stroke:#E8473F}
.rc-ui .rc-pg-ac[data-mode="fan"] .rc-arc{stroke:#9EB4C3}
.rc-ui .rc-pg-ac[data-mode="dry"] .rc-arc{stroke:#35C4CB}
.rc-ui .rc-pg-ac[data-on="false"] .rc-arc,.rc-ui .rc-pg-bright[data-on="false"] .rc-arc{stroke:rgba(255,255,255,.42)}
.rc-ui .rc-pg-ac[data-on="false"] .rc-val,.rc-ui .rc-pg-bright[data-on="false"] .rc-val{opacity:.5}
/* the LED strip: a magenta ring for its brightness, a colour wheel for its colour */
.rc-ui .rc-pg-bright .rc-arc{stroke:#E23C9C}
.rc-ui .rc-wheel{position:absolute;left:160px;top:137px;width:400px;height:400px;border-radius:50%;cursor:crosshair;touch-action:none;transition:opacity .2s;
  background:radial-gradient(circle closest-side,rgba(255,255,255,1) 0%,rgba(255,255,255,0.924) 10%,rgba(255,255,255,0.846) 20%,rgba(255,255,255,0.765) 30%,rgba(255,255,255,0.682) 40%,rgba(255,255,255,0.595) 50%,rgba(255,255,255,0.503) 60%,rgba(255,255,255,0.405) 70%,rgba(255,255,255,0.299) 80%,rgba(255,255,255,0.178) 90%,rgba(255,255,255,0) 100%),conic-gradient(from 90deg,#FF0000,#FF00FF,#0000FF,#00FFFF,#00FF00,#FFFF00,#FF0000);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.4)}
.rc-ui .rc-pg-colour[data-on="false"] .rc-wheel{opacity:.62}
.rc-ui .rc-wheel:focus-visible{outline-offset:8px}
.rc-ui .rc-wcur{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3.5px solid #FFFFFF;background:var(--led);box-shadow:0 0 0 1px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.3);pointer-events:none}

/* ---- Indoor air ---- */
.rc-ui .rc-aq{position:absolute;left:0;right:0;top:100px;display:flex;flex-direction:column;align-items:center}
.rc-ui .rc-aq .rc-i{width:100px;height:100px}
.rc-ui .rc-aq b{margin-top:12px;font-size:40px;line-height:46px;font-weight:500}
.rc-ui .rc-aq span{margin-top:12px;font-size:23px;line-height:28px;color:var(--sub);text-transform:uppercase}
.rc-ui .rc-aqg{position:absolute;left:20px;top:350px;width:680px;display:grid;grid-template-columns:350px 330px;row-gap:26px}
.rc-ui .rc-aqc{position:relative;height:80px;padding:4px 0 0 62px}
.rc-ui .rc-aqc .rc-i{position:absolute;left:0;top:16px;width:46px;height:46px}
.rc-ui .rc-aqv{display:block;font-size:30px;line-height:38px;white-space:nowrap}
.rc-ui .rc-aql{display:block;font-size:20px;line-height:26px;color:var(--sub);text-transform:uppercase;white-space:nowrap}
.rc-ui .rc-bt{fill:#5D6367;font-size:13px;font-weight:700;font-family:inherit;letter-spacing:0}
.rc-ui .rc-bs{font-size:9px}

/* ---- Audio: the song, the keys, the volume, and a pill for the player or the list of songs ---- */
.rc-ui .rc-trk{position:absolute;left:60px;right:60px;top:122px;text-align:center;font-size:28px;line-height:36px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ui .rc-art{position:absolute;left:30px;right:30px;top:181px;display:flex;justify-content:center;align-items:center;gap:22px;font-size:20px;line-height:28px;color:rgba(255,255,255,.82);white-space:nowrap}
.rc-ui .rc-art i{display:block;width:2px;height:30px;background:var(--cy)}
.rc-ui .rc-ak{position:absolute;display:grid;place-items:center;background:rgba(36,39,42,.82);color:#FFFFFF;transition:color .2s,transform .1s}
.rc-ui .rc-ak:active{transform:scale(.95)}
.rc-ui .rc-aks{top:308px;width:64px;height:64px;border-radius:15px;color:rgba(255,255,255,.72)}
.rc-ui .rc-aks .rc-i{width:38px;height:38px}
.rc-ui .rc-aks[aria-pressed="true"]{color:var(--cy)}
.rc-ui .rc-akm{top:297px;width:88px;height:88px;border-radius:19px}
.rc-ui .rc-akm .rc-i{width:46px;height:46px}
.rc-ui .rc-akl{top:267px;left:285px;width:146px;height:146px;border-radius:50%}
.rc-ui .rc-akl .rc-i{width:74px;height:74px}
.rc-ui .rc-ak[data-k="a-rep"]{left:33px}
.rc-ui .rc-ak[data-k="a-prev"]{left:140px}
.rc-ui .rc-ak[data-k="a-next"]{left:489px}
.rc-ui .rc-ak[data-k="a-shuf"]{left:620px}
.rc-ui .rc-ipa,.rc-ui [data-playing="true"] .rc-ipl{display:none}
.rc-ui [data-playing="true"] .rc-ipa{display:block}
.rc-ui .rc-ipl{margin-left:7px}
.rc-ui .rc-songs{display:none;position:absolute;left:20px;right:20px;top:94px}
.rc-ui [data-view="list"] .rc-songs{display:block}
.rc-ui [data-view="list"] .rc-player{display:none}
.rc-ui .rc-song{position:relative;display:block;width:100%;height:100px;margin-bottom:12px;padding:0 96px 0 32px;border-radius:24px;background:var(--row);text-align:left}
.rc-ui .rc-song b{display:block;font-size:27px;line-height:34px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ui .rc-song span{display:block;font-size:19px;line-height:26px;color:var(--sub);white-space:nowrap}
.rc-ui .rc-song .rc-snp{position:absolute;right:30px;top:29px;width:42px;height:42px;opacity:.55}
.rc-ui .rc-song[aria-pressed="true"] b,.rc-ui .rc-song[aria-pressed="true"] .rc-snp{color:var(--cy);opacity:1}
.rc-ui .rc-vol{position:absolute;left:0;top:466px;width:720px;height:48px}
.rc-ui .rc-vol > .rc-i{position:absolute;left:76px;top:1px;width:46px;height:46px}
.rc-ui .rc-vsl{position:absolute;left:155px;top:0;width:403px;height:48px;cursor:pointer;touch-action:none}
.rc-ui .rc-vsl::before{content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;border-radius:24px;background:rgba(36,39,42,.82)}
.rc-ui .rc-vsl:focus-visible{outline:none}
.rc-ui .rc-vsl:focus-visible::before{outline:4px solid #FF8A1F;outline-offset:3px}
.rc-ui .rc-vf{position:absolute;left:-24px;top:0;bottom:0;width:calc(48px + var(--v,0) * 1%);border-radius:24px;background:#43B4E8}
.rc-ui .rc-vk{position:absolute;left:calc(var(--v,0) * 1%);top:.5px;width:47px;height:47px;margin-left:-23.5px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* ---- the navigation page: a large tile for each page ---- */
.rc-ui .rc-navpg{position:absolute;left:0;top:0;width:720px;height:640px;z-index:2}
.rc-ui .rc-tiles{display:grid;grid-template-columns:repeat(3,178px);column-gap:47px;row-gap:29px;padding:8px 46px 24px}
.rc-ui .rc-tile{display:block;width:178px;text-align:center;border-radius:28px}
.rc-ui .rc-tb{display:grid;place-items:center;width:178px;height:176px;border-radius:28px;background:var(--row);transition:background .15s}
.rc-ui .rc-tile:active .rc-tb{background:rgba(26,28,30,.86)}
.rc-ui .rc-tb .rc-i{width:86px;height:86px}
.rc-ui .rc-tl{display:flex;justify-content:center;margin-top:18px;font-size:26px;line-height:32px;white-space:nowrap}
.rc-ui .rc-tl span{display:block}

/* ---- the toast: a short sentence after each change, at the top where it covers no control ---- */
.rc-ui .rc-toastw{position:absolute;left:0;right:0;top:16px;z-index:5;text-align:center;pointer-events:none}
.rc-ui .rc-toast{display:inline-block;max-width:480px;padding:12px 22px;border-radius:24px;background:rgba(26,28,30,.93);color:#FFFFFF;font-size:20px;line-height:26px;text-align:center;opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.rc-ui .rc-toast.on{opacity:1;transform:none}

/* the parts that only show: a press on them reaches what is under them */
.rc-ui .rc-rv,.rc-ui .rc-rl,.rc-ui .rc-val,.rc-ui .rc-sub,.rc-ui .rc-aq,.rc-ui .rc-aqg,.rc-ui .rc-clock,.rc-ui .rc-mt,.rc-ui .rc-cy{pointer-events:none}