html[data-rc~="skel"][data-skel-nav="band"] { --mk-ground: color-mix(in oklab, var(--ch-accent, #ffc44e) 12%, #07080e); }
@media (max-width: 480px) {
html[data-rc~="skel"][data-skel-nav="band"] {
--mk-acc-lt: color-mix(in oklab, var(--ch-accent, #ffc44e) 62%, #fff);
}
html[data-rc~="skel"][data-skel-nav="band"] .player-cards {
grid-template-areas:
"pet pet pet"
"show show show"
"band band band"
"play track clock"
"net net net"
"foot foot foot";
grid-template-rows: auto auto minmax(var(--skel-band-min, 122px), 1fr) auto auto auto;
padding-top: 0 !important;
background: #000 !important;
}
html[data-rc~="skel"][data-skel-nav="band"] .skel-keys { display: none !important; }
html[data-rc~="skel"][data-skel-nav="band"] .np-show { margin-top: 14px !important; }
html[data-rc~="skel"][data-skel-nav="band"] .skel-play-well,
html[data-rc~="skel"][data-skel-nav="band"] .np-line,
html[data-rc~="skel"][data-skel-nav="band"] .skel-clock { margin-top: 30px !important; }
html[data-rc~="skel"][data-skel-nav="band"] #net-state { margin-top: 8px; }
html[data-rc~="skel"][data-skel-nav="band"] .rc-next,
html[data-rc~="skel"][data-skel-nav="band"] .skel-tools { margin-top: 10px !important; }
html[data-rc~="skel"][data-skel-nav="band"].pet-on .bes-box {
justify-self: stretch; width: auto !important; height: var(--skel-lcd-vh, var(--skel-lcd-h, 220px)) !important;
margin: 0 calc(-1 * var(--skel-in)) !important; padding: 0 !important;
position: relative; display: block !important; overflow: hidden;
background: rgb(76, 84, 56);
box-shadow: none !important;
}
html[data-rc~="skel"][data-skel-nav="band"].pet-on .bes-box .wa3pet-lcd {
position: absolute !important; left: var(--skel-lcd-x, 0px); bottom: 0; top: auto; margin: 0 !important;
width: var(--skel-lcd-w, 100%) !important; height: var(--skel-lcd-h, 100%) !important;
border-radius: 0 !important;
box-shadow: inset 0 3px 10px rgba(20, 40, 10, .35) !important;
}
html[data-rc~="skel"][data-skel-nav="band"].pet-on .bes-box:has(.wa3pet-lcd:focus-visible) { outline: 2px solid var(--flame, #ffc44e); outline-offset: -2px; }
html[data-skel-screen="tall"].pet-on .bes-box .wa3pet-showbg,
html[data-skel-screen="tall"].pet-on .bes-box .wa3pet-showbgv,
html[data-skel-screen="tall"].pet-on .bes-box .wa3pet-showbg-dim { top: auto !important; bottom: 0 !important; height: var(--skel-scene-h, 100%) !important; object-fit: fill !important; }
html[data-rc~="skel"].pet-on .bes-box .wa3pet-showbg.standby { filter: url(#wa3pet-bone) brightness(.5) saturate(.8) !important; }
html[data-rc~="skel"][data-skel-nav="band"].pet-on .bes-box .np-cover {
inset: auto; left: calc(-1 * var(--skel-lcd-x, 0px)); bottom: 0;
width: calc(var(--skel-lcd-w, 100%) + 2 * var(--skel-lcd-x, 0px)); height: var(--skel-lcd-vh, 100%);
}
.mk-band {
--mk-s: 64px;
--mk-gap: 14px;
--mk-bob: min(12px, calc(var(--mk-s) * .16));
grid-area: band; position: relative; overflow: hidden;
align-self: stretch; height: auto; min-height: var(--skel-band-min, 122px);
margin: 6px calc(-1 * var(--skel-in)) 0;
background-color: transparent; background-image: none !important;
background-image:
radial-gradient(circle at 7% 24%, rgba(255, 236, 214, .62) 0 .7px, transparent 1.3px),
radial-gradient(circle at 18% 71%, rgba(255, 236, 214, .38) 0 .6px, transparent 1.2px),
radial-gradient(circle at 29% 12%, rgba(255, 236, 214, .5) 0 .6px, transparent 1.2px),
radial-gradient(circle at 41% 90%, rgba(255, 236, 214, .3) 0 .6px, transparent 1.2px),
radial-gradient(circle at 52% 8%, rgba(255, 236, 214, .45) 0 .6px, transparent 1.2px),
radial-gradient(circle at 63% 79%, rgba(255, 236, 214, .36) 0 .6px, transparent 1.2px),
radial-gradient(circle at 77% 18%, rgba(255, 236, 214, .58) 0 .8px, transparent 1.4px),
radial-gradient(circle at 88% 66%, rgba(255, 236, 214, .34) 0 .6px, transparent 1.2px),
radial-gradient(circle at 96% 33%, rgba(255, 236, 214, .44) 0 .6px, transparent 1.2px);
}
.mk-arc { position: absolute; left: 0; top: 0; pointer-events: none; }
.mk-room {
position: absolute; left: 0; top: 0; width: var(--mk-w, 84px); padding: 0; border: 0; background: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center;
gap: calc(var(--mk-gap) + var(--alt, 0px) + 12px);
color: rgba(255, 222, 188, .64); transition: color .12s ease;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mk-room::before { content: ""; position: absolute; inset: -2px 0 -4px; }
.mk-room:focus-visible { outline: none; }
.mk-room:focus-visible::before { outline: 2px solid var(--flame, #ffc44e); outline-offset: -2px; border-radius: 8px; }
.mk-room.on { color: var(--mk-acc-lt, var(--bone, #ffdebc)); z-index: 1; }
.mk-pl {
position: relative; display: block; flex: none; width: var(--mk-s); height: var(--mk-s);
transform-origin: 50% calc(100% + var(--mk-gap) + var(--alt, 0px) + 4px); scale: .66;
transition: scale .24s var(--spring, cubic-bezier(.18, .9, .3, 1.15)), translate .13s ease-out;
}
.mk-room.on .mk-pl { scale: 1; }
.mk-pl-float {
position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
will-change: transform; animation: mk-float var(--fd, 4.4s) linear var(--fp, 0s) infinite;
transition: translate .26s cubic-bezier(.23, 1, .32, 1);
}
.mk-room.on .mk-pl-float { translate: 0 -4px; }
.mk-pl-img {
display: block; flex: none; width: calc(100% * var(--k, 1)); max-width: none; height: auto;
transform-origin: 50% 70%; animation: mk-sway calc(var(--fd, 4.4s) * 1.62) ease-in-out calc(var(--fp, 0s) * 1.7) infinite;
filter: saturate(.7) brightness(var(--dim, .7)) contrast(.92);
transition: filter .13s ease-out; pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.mk-room.on .mk-pl-img { filter: var(--lit, saturate(1) brightness(1) contrast(1)); }
.mk-pl[data-room="shoghol"] .mk-pl-img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 12%); mask-image: linear-gradient(to top, transparent 0, #000 12%); }
.mk-pl-shadow {
position: absolute; top: calc(100% + var(--mk-gap) + var(--alt, 0px)); height: 8px; border-radius: 50%;
width: calc(70% * var(--k, 1)); left: calc(50% - 35% * var(--k, 1)); rotate: var(--mk-tilt, 0deg);
background: radial-gradient(closest-side, rgba(255, 222, 188, .3), rgba(255, 222, 188, 0));
animation: mk-shadow var(--fd, 4.4s) linear var(--fp, 0s) infinite;
}
.mk-room.on .mk-pl-shadow {
height: 12px; top: calc(100% + var(--mk-gap) + var(--alt, 0px) - 2px); width: calc(96% * var(--k, 1)); left: calc(50% - 48% * var(--k, 1));
background: radial-gradient(closest-side, color-mix(in oklab, var(--acc) 45%, transparent), color-mix(in oklab, var(--acc) 14%, transparent) 60%, transparent);
}
html:has(#mute.muted) .mk-room.on .mk-pl-shadow {
background: radial-gradient(closest-side, color-mix(in oklab, var(--acc) 20%, transparent), color-mix(in oklab, var(--acc) 6%, transparent) 60%, transparent);
}
.mk-pl-shadow::after {
content: ""; position: absolute; inset: -4px -12%; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in oklab, var(--acc) 62%, transparent), color-mix(in oklab, var(--acc) 18%, transparent) 55%, transparent);
opacity: 0; transition: opacity .1s ease-out;
}
.mk-room.on .mk-pl-shadow::after { opacity: 1; transition: opacity .26s ease-out .14s; }
html:has(#mute.muted) .mk-room.on .mk-pl-shadow::after { opacity: .4; }
@keyframes mk-float {
0% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
60% { transform: translate3d(0, calc(-1 * var(--mk-bob, 10px)), 0); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes mk-shadow {
0% { transform: scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
60% { transform: scaleX(.62); opacity: .42; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
100% { transform: scaleX(1); opacity: 1; }
}
@keyframes mk-sway {
0%, 100% { transform: rotate(calc(var(--tilt, 0deg) - 2.5deg)); }
50% { transform: rotate(calc(var(--tilt, 0deg) + 2.5deg)); }
}
body.is-rest .mk-pl-float, body.is-rest .mk-pl-shadow, body.is-rest .mk-pl-img,
.tab-hidden .mk-pl-float, .tab-hidden .mk-pl-shadow, .tab-hidden .mk-pl-img,
html.mk-room-open .mk-band .mk-pl-float, html.mk-room-open .mk-band .mk-pl-shadow, html.mk-room-open .mk-band .mk-pl-img { animation-play-state: paused; }
.mk-room:active .mk-pl { translate: 0 1px; transition: scale .24s var(--spring, cubic-bezier(.18, .9, .3, 1.15)), translate .06s ease-out; }
.mk-room:active .mk-pl-img { filter: saturate(.7) brightness(calc(var(--dim, .7) * .82)) contrast(.92); transition-duration: .06s; }
.mk-room.on:active .mk-pl-img { filter: saturate(1) brightness(.85) contrast(1); }
.mk-lbl { position: relative; display: inline-flex; align-items: center; gap: 4px; font: 400 12px/1 var(--chb-font, var(--pixel)); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mk-chev { position: absolute; left: 100%; top: 50%; margin: -3.5px 0 0 4px; }
html[data-skel-band="orbit"] .mk-pl,
html[data-skel-band="orbit"] .mk-room.on .mk-pl { scale: var(--sc, 1); }
html[data-skel-band="orbit"] .mk-band.mk-turning .mk-room { transition: transform .32s cubic-bezier(.23, 1, .32, 1), color .12s ease; }
html[data-skel-band="orbit"] .mk-band.mk-turning .mk-pl { transition: scale .32s cubic-bezier(.23, 1, .32, 1), translate .13s ease-out; }
html[data-skel-band="orbit"] .mk-band { touch-action: pan-y; }
html[data-skel-band="orbit"] .mk-room:not(.on) .mk-pl-img { filter: saturate(.7) brightness(calc(var(--dim, .7) * (.5 + .5 * var(--depth, 1)))) contrast(.92); }
html[data-skel-band="strip"] .mk-pl,
html[data-skel-band="strip"] .mk-room.on .mk-pl { scale: var(--sc, 1); }
html[data-skel-band="strip"] .mk-band.mk-turning .mk-pl { transition: scale .26s cubic-bezier(.23, 1, .32, 1), translate .13s ease-out; }
html[data-skel-band="strip"] .mk-room.on .mk-pl-float { translate: 0 calc(-1 * var(--mk-lift, 4px)); }
html[data-skel-band="strip"] .mk-room:not(.on) .mk-lbl { color: rgba(255, 222, 188, .56); }
@media (prefers-reduced-motion: reduce) { html[data-skel-band="strip"] .mk-band.mk-turning .mk-pl { transition: none; } }
html[data-skel-band="sky"] .mk-pl, html[data-skel-band="sky"] .mk-room.on .mk-pl,
html[data-skel-band="grid"] .mk-pl, html[data-skel-band="grid"] .mk-room.on .mk-pl,
html[data-skel-band="hero"] .mk-pl, html[data-skel-band="hero"] .mk-room.on .mk-pl { scale: var(--sc, 1); }
html[data-skel-band="sky"] .mk-band.mk-turning .mk-pl,
html[data-skel-band="grid"] .mk-band.mk-turning .mk-pl { transition: scale .26s cubic-bezier(.23, 1, .32, 1), translate .13s ease-out; }
html[data-skel-band="hero"] .mk-band.mk-turning .mk-room { transition: transform .32s cubic-bezier(.23, 1, .32, 1), color .12s ease; }
html[data-skel-band="hero"] .mk-band.mk-turning .mk-pl { transition: scale .32s cubic-bezier(.23, 1, .32, 1), translate .13s ease-out; }
html[data-skel-band="sky"] .mk-room, html[data-skel-band="grid"] .mk-room, html[data-skel-band="hero"] .mk-room { pointer-events: none; }
html[data-skel-band="sky"] .mk-room .mk-pl-float, html[data-skel-band="sky"] .mk-room .mk-lbl,
html[data-skel-band="grid"] .mk-room .mk-pl-float, html[data-skel-band="grid"] .mk-room .mk-lbl,
html[data-skel-band="hero"] .mk-room .mk-pl-float, html[data-skel-band="hero"] .mk-room .mk-lbl { pointer-events: auto; }
html[data-skel-band="sky"] .mk-room:not(.on) .mk-lbl,
html[data-skel-band="grid"] .mk-room:not(.on) .mk-lbl,
html[data-skel-band="hero"] .mk-room:not(.on) .mk-lbl { color: rgba(255, 222, 188, .56); }
html[data-skel-band="hero"] .mk-room.on .mk-lbl { font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
html[data-skel-band="sky"] .mk-band.mk-turning .mk-pl, html[data-skel-band="grid"] .mk-band.mk-turning .mk-pl,
html[data-skel-band="hero"] .mk-band.mk-turning .mk-room, html[data-skel-band="hero"] .mk-band.mk-turning .mk-pl { transition: none; }
}
html[data-skel-band="hero"] .mk-band.mk-turning .mk-room { transition: transform .32s cubic-bezier(.4, 0, .2, 1), color .12s ease; }
html[data-skel-band="hero"] .mk-band.mk-turning .mk-pl { transition: scale .32s cubic-bezier(.4, 0, .2, 1), translate .13s ease-out; }
html[data-skel-band="sky"] .mk-lbl, html[data-skel-band="grid"] .mk-lbl, html[data-skel-band="hero"] .mk-lbl,
html[data-skel-band="hero"] .mk-room.on .mk-lbl { font-size: 13px; }
html[data-skel-band="sky"] .mk-pl-float::before, html[data-skel-band="grid"] .mk-pl-float::before, html[data-skel-band="hero"] .mk-pl-float::before {
content: ""; position: absolute; inset: -18% -16% -30%; pointer-events: auto;
}
html[data-skel-band="sky"] .mk-room:focus-visible::before, html[data-skel-band="grid"] .mk-room:focus-visible::before, html[data-skel-band="hero"] .mk-room:focus-visible::before { outline: none; }
html[data-skel-band="sky"] .mk-room:focus-visible .mk-pl-float, html[data-skel-band="grid"] .mk-room:focus-visible .mk-pl-float, html[data-skel-band="hero"] .mk-room:focus-visible .mk-pl-float {
outline: 2px solid var(--flame, #ffc44e); outline-offset: 6px; border-radius: 12px;
}
html[data-skel-band="sky"] .mk-room:focus-visible .mk-name, html[data-skel-band="grid"] .mk-room:focus-visible .mk-name, html[data-skel-band="hero"] .mk-room:focus-visible .mk-name {
text-decoration: underline; text-decoration-color: var(--flame, #ffc44e); text-underline-offset: 4px; text-decoration-thickness: 2px;
}
html[data-skel-band="hero"] .mk-room .mk-lbl { transition: color .2s ease-out; }
html.mk-dial-on .np-show, html.mk-dial-on .rc-next { display: none !important; }
html.mk-dial-on .mk-band { touch-action: none; }
html[data-skel-band="tuner"] .mk-pl, html[data-skel-band="trail"] .mk-pl, html[data-skel-band="lift"] .mk-pl, html[data-skel-band="tuner"] .mk-room.on .mk-pl, html[data-skel-band="trail"] .mk-room.on .mk-pl, html[data-skel-band="lift"] .mk-room.on .mk-pl { scale: var(--sc, 1); }
html[data-skel-band="tuner"] .mk-room, html[data-skel-band="trail"] .mk-room, html[data-skel-band="lift"] .mk-room, html[data-skel-band="tuner"] .mk-pl, html[data-skel-band="trail"] .mk-pl, html[data-skel-band="lift"] .mk-pl { transition: none !important; }
html[data-skel-band="tuner"] .mk-room, html[data-skel-band="trail"] .mk-room, html[data-skel-band="lift"] .mk-room { pointer-events: none; }
html[data-skel-band="tuner"] .mk-room .mk-pl-float, html[data-skel-band="trail"] .mk-room .mk-pl-float, html[data-skel-band="lift"] .mk-room .mk-pl-float, html[data-skel-band="tuner"] .mk-room .mk-lbl, html[data-skel-band="trail"] .mk-room .mk-lbl, html[data-skel-band="lift"] .mk-room .mk-lbl { pointer-events: auto; }
html[data-skel-band="tuner"] .mk-room .mk-pl-float, html[data-skel-band="trail"] .mk-room .mk-pl-float, html[data-skel-band="lift"] .mk-room .mk-pl-float { pointer-events: none; }
html[data-skel-band="tuner"] .mk-pl-float::before, html[data-skel-band="trail"] .mk-pl-float::before, html[data-skel-band="lift"] .mk-pl-float::before { content: ""; position: absolute; top: -4%; bottom: -14%; left: calc(50% - 50% * var(--k, 1) - 6%); right: calc(50% - 50% * var(--k, 1) - 6%); pointer-events: auto; }
html[data-skel-band="tuner"] .mk-room:not(.on) .mk-pl-float, html[data-skel-band="trail"] .mk-room:not(.on) .mk-pl-float, html[data-skel-band="lift"] .mk-room:not(.on) .mk-pl-float { animation: none; }
html[data-skel-band="tuner"] .mk-room .mk-pl-float, html[data-skel-band="trail"] .mk-room .mk-pl-float, html[data-skel-band="lift"] .mk-room .mk-pl-float { rotate: var(--yaw, 0deg); }
html[data-skel-band="tuner"] .mk-room:not(.on) .mk-pl-img, html[data-skel-band="trail"] .mk-room:not(.on) .mk-pl-img, html[data-skel-band="lift"] .mk-room:not(.on) .mk-pl-img { filter: saturate(.7) brightness(calc(var(--dim, .7) * (.5 + .5 * var(--depth, 1)))) contrast(.92); }
html[data-skel-band="tuner"] .mk-room .mk-lbl, html[data-skel-band="trail"] .mk-room .mk-lbl, html[data-skel-band="lift"] .mk-room .mk-lbl { opacity: 0; transition: opacity .15s ease-out; }
html[data-skel-band="tuner"] .mk-room.mk-side .mk-lbl, html[data-skel-band="trail"] .mk-room.mk-side .mk-lbl, html[data-skel-band="lift"] .mk-room.mk-side .mk-lbl { opacity: 1; }
.mk-now { display: none; }
.mk-band.mk-moving .mk-room .mk-lbl, .mk-band.mk-moving .mk-room .mk-now { opacity: 0 !important; transition: opacity .08s ease-out; }
html[data-skel-band="tuner"] .mk-room.mk-side .mk-now, html[data-skel-band="trail"] .mk-room.mk-side .mk-now, html[data-skel-band="lift"] .mk-room.mk-side .mk-now { display: block; position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 400 11.5px/1.2 var(--pixel); color: rgba(255, 222, 188, .5); text-align: center; pointer-events: none; }
html.mk-dial-on .mk-room .mk-lbl, html.mk-dial-on .mk-room .mk-now { translate: var(--lx, 0px) var(--ly, 0px); }
html.mk-dial-on .mk-room.mk-quiet .mk-now { display: none !important; }
html.mk-dial-on .mk-room.mk-hush .mk-lbl { opacity: 0 !important; }
.mk-showline { position: absolute; left: var(--skel-in, 16px); right: var(--skel-in, 16px); z-index: 20; pointer-events: none;
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "room keys" "show keys" "host keys"; column-gap: 12px; align-items: center; }
.mk-sl-room { grid-area: room; justify-self: start; pointer-events: auto; background: none; border: 0; margin: 0 0 2px; padding: 6px 0 4px; cursor: pointer;
font: 400 13px/1 var(--chb-font, var(--pixel)); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--acc, #ffc44e) 62%, #fff); -webkit-tap-highlight-color: transparent; }
.mk-sl-room::after { content: " \203A"; }
.mk-sl-room:active { translate: 0 1px; filter: brightness(.85); }
.mk-sl-show { grid-area: show; min-width: 0; font: 400 30px/1.12 var(--pixel); text-transform: uppercase; color: var(--flame, #ffc44e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease-out; }
.mk-sl-show[data-ar] { font-family: "Cairo", var(--ar, sans-serif); font-weight: 500; }
.mk-sl-host { grid-area: host; min-width: 0; margin-top: 4px; font: 400 16px/1.2 var(--pixel); color: rgba(255, 222, 188, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sl-keys { grid-area: keys; display: flex; gap: 10px; pointer-events: auto; transition: opacity .2s ease-out .08s; }
.mk-showline.moving .mk-sl-keys { opacity: .12; transition: opacity .1s ease-out; }
.mk-showline.moving .mk-sl-show { color: color-mix(in oklab, var(--flame, #ffc44e) 55%, #000); }
html.mk-dial-on .mk-sl-keys #share-np, html.mk-dial-on .mk-sl-keys #like-np {
position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important;
width: 44px !important; height: 44px !important; min-width: 44px; margin: 0 !important; display: grid !important; place-items: center; border-radius: 50%; }
html.mk-dial-on .mk-sl-keys #share-np svg, html.mk-dial-on .mk-sl-keys #like-np svg { width: 20px !important; height: 20px !important; }
.mk-needle { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 19; pointer-events: none; opacity: 0; transition: opacity .3s ease-out .3s; }
.mk-needle.on { opacity: 1; transition: opacity .08s ease-out; }
.mk-needle::before { content: ""; position: absolute; left: -6px; top: -2px; border: 6px solid transparent; border-bottom: 8px solid var(--flame, #ffc44e); border-top: 0; }
.mk-needle::after { content: ""; position: absolute; left: -90px; top: 9px; width: 180px; height: 7px; opacity: .55;
background: repeating-linear-gradient(90deg, rgba(255, 222, 188, .5) 0 1px, transparent 1px 12px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.mk-needle.flash::before { animation: mk-needle-flash .2s ease-out 1; }
@keyframes mk-needle-flash { 0% { filter: brightness(2.2) drop-shadow(0 0 6px var(--flame, #ffc44e)); } 100% { filter: none; } }
html[data-skel-band="lift"] .mk-needle { display: none; }
.mk-lens { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; z-index: 30; pointer-events: none; opacity: 0;
box-shadow: inset 0 0 0 1.5px rgba(255, 222, 188, .38), 0 0 0 1px rgba(0, 0, 0, .55); background: rgba(255, 222, 188, .035); transition: opacity .12s ease-out; }
.mk-lens.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mk-needle, .mk-lens, .mk-sl-keys { transition: none; } .mk-needle.flash::before { animation: none; } }
.tv-layer { grid-area: pet; align-self: stretch; justify-self: stretch; margin: 0 calc(-1 * var(--skel-in)); position: relative; z-index: 3; pointer-events: none; overflow: hidden; }
.tv-box { position: absolute; left: 10px; top: 33%; max-width: 66%; display: flex; flex-direction: column; align-items: flex-start; transform: translateX(calc(-118% - 12px)); }
.tv-box.in { transform: none; transition: transform .42s cubic-bezier(.2, .8, .2, 1); }
.tv-box.out { transform: translateX(calc(-118% - 12px)); transition: transform .36s cubic-bezier(.5, 0, .75, 0); }
.tv-tab { display: inline-block; max-width: 230px; overflow: hidden; white-space: nowrap; margin: 0 0 -1px 7px; padding: 3px 9px 2px; background: var(--racc-t, var(--acc, #ffc44e)); color: #0a0a0c; font: 600 12px/1.25 var(--pixel); letter-spacing: .04em; transform: skewX(-9deg); }
.tv-panel { display: flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 7px 14px 8px 13px; background: rgba(8, 8, 12, .9); box-shadow: inset 3px 0 0 var(--acc, #ffc44e); transform: skewX(-9deg); }
.tv-panel > span { display: block; transform: skewX(9deg); max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; }
.tv-panel > span[data-ar] { direction: rtl; }
.tv-a { font: 400 12.5px/1.3 var(--pixel); color: rgba(255, 222, 188, .78); }
.tv-t { font: 400 17px/1.2 var(--pixel); text-transform: uppercase; color: #fff; }
.tv-tab[data-ar], .tv-a[data-ar], .tv-t[data-ar] { font-family: "Cairo", var(--ar, sans-serif); text-transform: none; letter-spacing: 0; }
.tv-t[data-ar] { font-weight: 600; }
.tv-box.next .tv-tab { background: #fff; }
.tv-box.next .tv-a { color: color-mix(in oklab, var(--racc-t, var(--acc, #ffc44e)) 70%, #fff); }
@media (prefers-reduced-motion: reduce) { .tv-box, .tv-box.in, .tv-box.out { transform: none; transition: opacity .2s ease-out; } .tv-box { opacity: 0; } .tv-box.in { opacity: 1; } }
.tv-ticker { display: none; }
html.mk-dial-on .tv-ticker { display: flex; grid-area: show; align-self: start; margin: 0 calc(-1 * var(--skel-in)); height: 26px; overflow: visible;
background: #050506; box-shadow: inset 0 1px 0 rgba(255, 222, 188, .09), inset 0 -1px 0 rgba(255, 222, 188, .09); }
.tv-ticker-win { position: relative; flex: 1 1 auto; overflow: hidden; }
.tv-ticker-track { position: absolute; left: 0; top: 0; height: 100%; width: max-content; display: flex; align-items: center; white-space: nowrap; animation: tv-crawl 60s linear infinite; will-change: transform; }
@keyframes tv-crawl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tv-msg { padding: 0 14px; font: 500 13.5px/1 "Cairo", var(--ar, sans-serif); color: rgba(255, 222, 188, .88); }
.tv-sep { font-size: 7px; color: var(--ch-accent, #ffc44e); opacity: .85; }
.tv-ticker-tab { flex: none; display: grid; place-items: center; padding: 0 11px 1px; background: var(--racc-t, var(--ch-accent, #ffc44e)); color: #0a0a0c; font: 700 12.5px/1 "Cairo", var(--ar, sans-serif); }
.tv-ticker-tab { position: relative; z-index: 5; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.tv-ticker-tab::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.tv-ticker-tab:active { filter: brightness(1.22); }
.tv-ticker-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tab-hidden .tv-ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tv-ticker-track { animation: none; transform: none; } }
.mk-static {
grid-area: pet; align-self: stretch; justify-self: stretch; margin: 0 calc(-1 * var(--skel-in)); position: relative; z-index: 4;
pointer-events: none; opacity: 0; overflow: hidden;
}
.mk-static::before {
content: ""; position: absolute; left: -25%; top: -25%; width: 150%; height: 150%;
background-image: var(--mk-noise, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='15'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='24' height='15' filter='url(%23n)'/%3E%3C/svg%3E"));
background-size: calc(var(--skel-lcd-w, 400px) / 4) calc(var(--skel-lcd-h, 250px) / 4); image-rendering: pixelated;
}
.mk-static.hold { opacity: .22; }
.mk-static.go { animation: mk-static .2s linear 1; }
.mk-static.go::before { animation: mk-static-jump .2s steps(1) 1; }
@keyframes mk-static { 0% { opacity: .82; } 55% { opacity: .62; } 100% { opacity: 0; } }
@keyframes mk-static-jump {
0% { transform: translate3d(0, 0, 0); }
34% { transform: translate3d(-11%, 7%, 0); }
67% { transform: translate3d(8%, -9%, 0); }
}
@media (prefers-reduced-motion: reduce) { .mk-static.go, .mk-static.go::before { animation: none; } }
html[data-skel-band="orbit"] .mk-room .mk-lbl { transition: opacity .2s ease; }
html[data-skel-band="orbit"] .mk-room[data-rel="1"] .mk-lbl, html[data-skel-band="orbit"] .mk-room[data-rel="4"] .mk-lbl { color: rgba(255, 222, 188, .56); }
html[data-skel-band="orbit"] .mk-room { pointer-events: none; }
html[data-skel-band="orbit"] .mk-room .mk-pl-float, html[data-skel-band="orbit"] .mk-room .mk-lbl { pointer-events: auto; }
html[data-skel-band="orbit"] .mk-band.mk-short .mk-room[data-rel="2"], html[data-skel-band="orbit"] .mk-band.mk-short .mk-room[data-rel="3"] { visibility: hidden; }
html[data-skel-band="orbit"] .mk-room[data-rel="2"] .mk-lbl, html[data-skel-band="orbit"] .mk-room[data-rel="3"] .mk-lbl { opacity: 0; }
html[data-skel-band="orbit"] .mk-room.on .mk-lbl { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { html[data-skel-band="orbit"] .mk-band.mk-turning .mk-room, html[data-skel-band="orbit"] .mk-band.mk-turning .mk-pl { transition: none; } }
.mk-chev { display: none; width: 7px; height: 7px; flex: none; opacity: .8; }
.mk-room.on .mk-chev { display: block; }
@media (max-width: 370px) { .mk-lbl { font-size: 11px; letter-spacing: .04em; } }
html[data-rc~="skel"][data-skel-nav="band"] .mk-dial { display: none !important; }
html[data-rc~="skel"][data-skel-nav="band"] .topbar-dial { position: relative; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; border-radius: 6px; }
html[data-rc~="skel"][data-skel-nav="band"] .topbar-dial::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
html[data-rc~="skel"][data-skel-nav="band"] .topbar-dial:focus-visible { outline: 2px solid var(--flame, #ffc44e); outline-offset: 4px; }
html[data-rc~="skel"][data-skel-nav="band"] .topbar-dial:active .mk-dial { filter: brightness(1.3); transition: filter 0s; }
.mk-dial { display: block; overflow: visible; transition: filter .13s ease-out; }
.mk-dial-star { transition: fill .12s ease; }
.mk-dial-halo { fill: var(--mk-acc-lt); opacity: .2; }
.mk-dial-ring { fill: none; stroke: var(--mk-acc-lt); stroke-width: calc(1.3px * var(--skel-hdr, 1)); stroke-linecap: round; }
.mk-roomview {
--mk-rv-acc: color-mix(in oklab, var(--acc, #ffc44e) 62%, #fff);
position: fixed; inset: 0; z-index: 10006; display: none; flex-direction: column; background: #000; color: var(--bone, #ffdebc);
padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); overscroll-behavior: contain;
touch-action: pinch-zoom;
transition: transform .2s cubic-bezier(.32, .72, 0, 1), display .22s allow-discrete;
}
.mk-roomview { background: transparent !important; }
.mk-roomview::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; pointer-events: none; opacity: 0; transition: opacity .22s cubic-bezier(.4, 0, .2, 1); }
.mk-roomview > .mk-rv-top, .mk-roomview > .mk-rv-sky, .mk-roomview > .mk-rv-play { opacity: 0; transition: opacity .12s ease-out; }
.mk-roomview.open { display: flex; transition: display .18s allow-discrete, transform .22s cubic-bezier(.23, 1, .32, 1); }
.mk-roomview.open::before { opacity: 1; transition: opacity .18s cubic-bezier(.2, .8, .3, 1); }
.mk-roomview.open > .mk-rv-top, .mk-roomview.open > .mk-rv-sky, .mk-roomview.open > .mk-rv-play { opacity: 1; transition: opacity .2s ease-out .08s; }
@starting-style { .mk-roomview.open::before, .mk-roomview.open > .mk-rv-top, .mk-roomview.open > .mk-rv-sky, .mk-roomview.open > .mk-rv-play { opacity: 0; } }
.mk-roomview.dragging { transition: none; }
.mk-rv-top { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 16px; border-bottom: 1px solid rgba(255, 196, 78, .25); }
.mk-rv-name { margin: 0; font: 400 14px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--mk-rv-acc); }
.mk-rv-x { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--bone, #ffdebc); cursor: pointer;
transition: translate .13s ease-out, filter .13s ease-out; }
.mk-rv-x svg { width: 16px; height: 16px; }
.mk-rv-x:active { translate: 0 1px; filter: brightness(.8); transition-duration: .06s; }
.mk-rv-hero { flex: none; display: flex; justify-content: center; padding: 24px 16px 34px; --mk-gap: 18px; --mk-bob: 12px; }
.mk-rv-planet .mk-pl { width: 176px; height: 176px; scale: 1; transition: none; }
.mk-rv-planet .mk-pl-img { filter: var(--lit, none); }
.mk-rv-planet .mk-pl-shadow {
height: 12px; width: calc(96% * var(--k, 1)); left: calc(50% - 48% * var(--k, 1));
background: radial-gradient(closest-side, color-mix(in oklab, var(--acc) 45%, transparent), color-mix(in oklab, var(--acc) 14%, transparent) 60%, transparent);
}
.mk-rv-sky { position: relative; flex: 1 1 auto; min-height: 0; margin: 10px 16px 0; }
.mk-rv-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.mk-rv-list { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; }
.mk-star { flex: 1 1 0; min-height: 40px; display: flex; align-items: center; position: relative; }
.mk-star-dot { position: absolute; left: var(--sx, 28px); top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f2ead9; }
.mk-star.past .mk-star-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; opacity: .45; }
.mk-star.now .mk-star-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--mk-rv-acc);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--mk-rv-acc) 22%, transparent); }
.mk-star-tx { margin-left: 64px; margin-right: 16px; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "h t"; column-gap: 12px; row-gap: 4px; align-items: center; }
.mk-star-t { grid-area: t; justify-self: end; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: rgba(255, 222, 188, .72); }
.mk-star-n { grid-area: n; font: 400 18px/1.05 var(--pixel); letter-spacing: .02em; text-transform: uppercase; color: var(--bone, #ffdebc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-star-h { grid-area: h; font: 400 13px/1 var(--pixel); color: rgba(255, 222, 188, .68); }
.mk-star.past .mk-star-t, .mk-star.past .mk-star-n, .mk-star.past .mk-star-h { color: rgba(255, 222, 188, .55); }
.mk-star.now .mk-star-t { color: var(--mk-rv-acc); }
.mk-star.now .mk-star-n { color: var(--flame, #ffc44e); font-size: 21px; }
.mk-rv-play { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px 16px; border-top: 1px solid rgba(255, 196, 78, .25); }
.mk-rv-disc { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
background: color-mix(in oklab, var(--acc, #ffc44e) 86%, #fff); color: #000; transition: translate .13s ease-out, filter .13s ease-out; }
.mk-rv-disc svg { width: 28px; height: 28px; }
.mk-rv-disc .i-play { display: none; }
.mk-roomview.is-paused .mk-rv-disc .i-play { display: inline; }
.mk-roomview.is-paused .mk-rv-disc .i-pause { display: none; }
.mk-rv-disc:active { translate: 0 1px; filter: brightness(.86); transition-duration: .06s; }
html[data-rc~="skel"][data-skel-play="cap"] .mk-rv-disc {
width: 58px; height: 52px; border-radius: 6px; border-bottom: 3px solid var(--cap-wall); color: var(--cap-ink);
background-color: var(--cap-face);
background-image: linear-gradient(to bottom,
transparent 0, transparent calc(100% - 5px),
rgba(0,0,0,var(--cap-lip-line)) calc(100% - 5px), rgba(0,0,0,var(--cap-lip-line)) calc(100% - 4px),
rgba(255,255,255,var(--cap-lip-shelf)) calc(100% - 4px), rgba(255,255,255,var(--cap-lip-shelf)) calc(100% - 1px),
rgba(255,255,255,var(--cap-lip-cut)) calc(100% - 1px), rgba(255,255,255,var(--cap-lip-cut)) 100%),
var(--blast);
background-blend-mode: normal, var(--cap-blend);
box-shadow: inset 0 1px 0 rgba(255,255,255,var(--cap-rim)), inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(0,0,0,.28),
inset 0 -1px 0 rgba(0,0,0,.30), 0 1px 0 rgba(0,0,0,.78);
transition: transform .13s ease-out, border-bottom-width .06s, background-color .07s, color .12s;
}
html[data-rc~="skel"][data-skel-play="cap"] .mk-roomview:not(.is-paused) .mk-rv-disc,
html[data-rc~="skel"][data-skel-play="cap"] .mk-rv-disc:active {
translate: none; filter: none; transform: translateY(2px); border-bottom-width: 1px; color: var(--cap-ink-down); background-color: var(--cap-down);
background-image: linear-gradient(to bottom,
transparent 0, transparent calc(100% - 7px),
rgba(0,0,0,var(--cap-lip-line-d)) calc(100% - 7px), rgba(0,0,0,var(--cap-lip-line-d)) calc(100% - 6px),
rgba(255,255,255,var(--cap-lip-shelf-d)) calc(100% - 6px), rgba(255,255,255,var(--cap-lip-shelf-d)) calc(100% - 1px),
rgba(255,255,255,var(--cap-lip-cut-d)) calc(100% - 1px), rgba(255,255,255,var(--cap-lip-cut-d)) 100%),
var(--blast);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 3px 5px rgba(0,0,0,.55), inset 1px 0 0 rgba(0,0,0,.10),
inset -1px 0 0 rgba(0,0,0,.16), 0 1px 0 rgba(0,0,0,.34);
}
html[data-rc~="skel"][data-skel-play="cap"] .mk-roomview:not(.is-paused) .mk-rv-disc:active { filter: brightness(.88); transition-duration: .06s; }
html[data-rc~="skel"][data-skel-play="ring"] .mk-rv-disc {
background: #050505; color: var(--mk-rv-acc);
box-shadow: 0 0 0 3px #241f1a, 0 0 0 4px rgba(255, 196, 78, .13), inset 0 0 0 1px rgba(214, 232, 170, .14),
inset 0 0 18px color-mix(in oklab, var(--acc, #ffc44e) 26%, transparent);
}
html[data-rc~="skel"][data-skel-play="ring"] .mk-roomview.is-paused .mk-rv-disc {
color: var(--bone, #ffdebc); box-shadow: 0 0 0 3px #241f1a, 0 0 0 4px rgba(255, 196, 78, .13), inset 0 0 0 1px rgba(214, 232, 170, .14);
}
.mk-rv-np { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-rv-t { font: 400 16px/1.1 var(--pixel); text-transform: uppercase; color: rgba(255, 255, 255, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rv-a { font: 400 11.5px/1.1 var(--mono); color: rgba(255, 222, 188, .68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 600px) {
html[data-rc~="skel"][data-skel-nav="band"] { --skel-band-min: 104px; }
html[data-rc~="skel"][data-skel-nav="band"] .mk-band { margin-top: 12px; --mk-gap: 10px; }
.mk-rv-hero { padding: 8px 16px 22px; --mk-gap: 12px; --mk-bob: 8px; }
.mk-rv-planet .mk-pl { width: 84px; height: 84px; }
html[data-rc~="skel"][data-skel-nav="band"] .np-show-name { font-size: 26px !important; }
html[data-rc~="skel"][data-skel-nav="band"] .np-show { margin-top: 8px !important; }
html[data-rc~="skel"][data-skel-nav="band"] .skel-play-well,
html[data-rc~="skel"][data-skel-nav="band"] .np-line,
html[data-rc~="skel"][data-skel-nav="band"] .skel-clock { margin-top: 12px !important; }
html[data-rc~="skel"][data-skel-nav="band"] .rc-next,
html[data-rc~="skel"][data-skel-nav="band"] .skel-tools { margin-top: 6px !important; }
}
@media (prefers-reduced-motion: reduce) {
.mk-pl, .mk-pl-float { transition: none; }
.mk-pl-float { animation: none; transform: translate3d(0, calc(-1 * var(--mk-bob, 10px)), 0); }
.mk-pl-shadow { animation: none; transform: scaleX(.62); opacity: .42; }
.mk-pl-img { animation: none; transform: rotate(var(--tilt, 0deg)); }
.mk-room:active .mk-pl, .mk-rv-x:active, .mk-rv-disc:active { translate: none; }
.mk-roomview, .mk-roomview.open { transition: display .18s allow-discrete; }
}
}