/* Click Wheel: the white click-wheel player, drawn in CSS. Every size inside the screen is in cqw (screen widths). */
:root {
  --H: min(86vh, 920px);
  --W: calc(var(--H) / 1.675);
  --font: "Source Sans 3", "Myriad Pro", "Helvetica Neue", Arial, sans-serif;
  --hi1: #6cb2f7; --hi2: #2c76dc; --hi3: #1a5fc6;
  --ink: #101215;
}
@supports (height: 1svh) { :root { --H: min(86svh, 920px); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse 70% 60% at 50% 38%, #42464e 0%, #24272c 48%, #121316 100%) fixed, #16181b;
  color: #fff; font-family: var(--font); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; }

/* ---------- the stage: a keynote product shot, the player standing on a black gloss floor */
#stage { position: fixed; inset: 0; display: grid; place-items: start center; padding-top: calc((100vh - var(--H)) * .32); }
@supports (height: 1svh) { #stage { padding-top: calc((100svh - var(--H)) * .32); } }
#rig { perspective: 1800px; -webkit-box-reflect: below 3px linear-gradient(to bottom, transparent 76%, rgba(255, 255, 255, .17)); }
#player { position: relative; width: var(--W); height: var(--H); transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.5, 0, .2, 1); }
#player.flipped { transform: rotateY(180deg); }
.front, .back { position: absolute; inset: 0; border-radius: calc(var(--W) * .095); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* the steel back wraps round the sides, so a thin chrome rim shows round the white front */
.front {
  padding: calc(var(--W) * .011);
  background: linear-gradient(100deg, #6c7077 0%, #e8ebee 16%, #8d9299 30%, #fbfcfd 46%, #7f848b 60%, #d3d7db 76%, #565a60 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.face {
  position: relative; width: 100%; height: 100%; border-radius: calc(var(--W) * .086);
  background: linear-gradient(168deg, #ffffff 0%, #fafbfb 38%, #eff0f2 78%, #e6e8ea 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 3px 7px rgba(255, 255, 255, .9), inset 0 -4px 10px rgba(0, 0, 0, .07), inset 0 0 0 2px rgba(0, 0, 0, .04);
}
.gloss {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .17) 38%, rgba(255, 255, 255, .05) 47%, rgba(255, 255, 255, 0) 52%);
}
.bezel {
  position: absolute; left: 7.4%; right: 7.4%; top: 6.4%;
  padding: calc(var(--W) * .016); border-radius: calc(var(--W) * .022);
  background: linear-gradient(180deg, #24272b, #0b0c0e 30%, #08090a);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .8);
}
#lcd {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; container-type: size;
  background: #fff; color: var(--ink); border-radius: 2px;
  font-family: var(--font); font-weight: 600; line-height: 1.1; touch-action: none;
}
#lcd.dim { filter: brightness(.55) saturate(.8); transition: filter 1.2s; }

/* ---------- the click wheel */
.wheel-wrap { position: absolute; left: 0; right: 0; top: calc(71.2% - var(--W) * .305); display: grid; place-items: center; }
#wheel {
  position: relative; width: calc(var(--W) * .61); aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f6f7f8 55%, #eaecee 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16), inset 0 -1px 2px rgba(255, 255, 255, .9), 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .05);
}
#wheel.spin { cursor: grabbing; }
.wb {
  position: absolute; border: 0; background: none; padding: 0; color: #a3a8ae; cursor: inherit; display: grid; place-items: center;
  font-family: var(--font); font-weight: 600; letter-spacing: .04em; font-size: calc(var(--W) * .046); line-height: 1;
}
.wb svg { width: calc(var(--W) * .085); fill: currentColor; }
.w-menu { top: 7%; left: 50%; transform: translateX(-50%); }
.w-play { bottom: 8%; left: 50%; transform: translateX(-50%); }
.w-prev { left: 6%; top: 50%; transform: translateY(-50%); }
.w-next { right: 6%; top: 50%; transform: translateY(-50%); }
.wb.press, .wb:active { color: #6d7278; }
.wb:focus-visible, #center:focus-visible, #flip:focus-visible { outline: 2px solid var(--hi2); outline-offset: 3px; }
#center {
  position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f0f1f3 70%, #e7e9eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .07), inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .04);
}
#center.press { background: linear-gradient(180deg, #eceef0, #f6f7f8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08); }
#wheel.press-menu { background: radial-gradient(circle at 50% 4%, #e3e5e8 0 18%, transparent 30%), radial-gradient(circle at 50% 30%, #ffffff 0%, #f6f7f8 55%, #eaecee 100%); }
#wheel.press-play { background: radial-gradient(circle at 50% 96%, #e3e5e8 0 18%, transparent 30%), radial-gradient(circle at 50% 30%, #ffffff 0%, #f6f7f8 55%, #eaecee 100%); }
#wheel.press-prev { background: radial-gradient(circle at 4% 50%, #e3e5e8 0 18%, transparent 30%), radial-gradient(circle at 50% 30%, #ffffff 0%, #f6f7f8 55%, #eaecee 100%); }
#wheel.press-next { background: radial-gradient(circle at 96% 50%, #e3e5e8 0 18%, transparent 30%), radial-gradient(circle at 50% 30%, #ffffff 0%, #f6f7f8 55%, #eaecee 100%); }

/* ---------- the back: mirror steel, engraved */
.back { transform: rotateY(180deg); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); cursor: pointer; }
/* a mirror in a dark studio: softbox stripes, a horizon, darker toward the curved edges */
.back { background: #3a3d42; }
.steel {
  position: absolute; inset: -6% -45%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .02) 49%, rgba(0, 0, 0, .3) 50.5%, rgba(0, 0, 0, .12) 72%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(90deg, #2a2d32 0%, #5d6269 7%, #d8dce0 12%, #ffffff 14%, #bfc4c9 17%, #555a61 25%, #33363b 33%, #6f747b 41%, #e6e9ec 46.5%, #ffffff 48.5%, #aeb3b9 52.5%, #585d64 60%, #2c2f34 67%, #4b4f55 75%, #c3c8cd 83%, #f6f8f9 85.5%, #858a91 89%, #34373c 100%);
  transform: translateX(calc((var(--mx, .5) - .5) * -16%));
  transition: transform .3s ease-out;
}
.back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 calc(var(--W) * .05) rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.engrave {
  position: absolute; left: 0; right: 0; top: 40%; margin: 0; text-align: center; z-index: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, var(--font); font-weight: 400; font-size: calc(var(--W) * .068); letter-spacing: .005em;
  color: rgba(146, 151, 158, .96); text-shadow: 0 -1px 0 rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .3);
}

#flip {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); cursor: pointer; display: grid; place-items: center; padding: 0;
}
#flip svg { width: 20px; height: 20px; }
#flip:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- the screen */
.bar {
  position: absolute; left: 0; right: 0; top: 0; height: 7.8cqw; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #eef0f2 45%, #d6dadf 100%); border-bottom: .3cqw solid #8e959d;
  font-size: 4.5cqw; font-weight: 700; color: #111;
}
.bar .ttl { max-width: 68%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar .st { position: absolute; left: 2.6cqw; top: 50%; width: 3.2cqw; height: 3.2cqw; transform: translateY(-50%); }
.bar .st.play { background: linear-gradient(180deg, #74b6fa, #1d63c8); clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.bar .st.pause { background: linear-gradient(90deg, #4f8fe0 0 34%, transparent 34% 66%, #4f8fe0 66%); }
.batt { position: absolute; right: 2.6cqw; top: 50%; width: 7.2cqw; height: 3.6cqw; transform: translateY(-50%); border: .35cqw solid #4c5259; border-radius: .6cqw; padding: .35cqw; }
.batt::after { content: ""; position: absolute; right: -1.15cqw; top: 25%; width: .8cqw; height: 50%; background: #4c5259; border-radius: 0 .3cqw .3cqw 0; }
.batt i { display: block; height: 100%; width: 100%; border-radius: .2cqw; background: linear-gradient(180deg, #b9f08f, #4fbd2d 55%, #2f9a1e); }
.batt.charging i { animation: charge 1.6s steps(5) infinite; }
@keyframes charge { from { width: 15%; } to { width: 100%; } }

.views { position: absolute; left: 0; right: 0; top: 7.8cqw; bottom: 0; overflow: hidden; }
.view { position: absolute; inset: 0; background: #fff; overflow: hidden; will-change: transform; }
.view.slide { transition: transform .24s cubic-bezier(.3, .1, .3, 1); }

/* lists */
.rows { position: absolute; left: 0; top: 0; right: 0; transition: transform .09s linear; }
.view.scrolls .rows { right: 3.4cqw; }
.view.main .rows { right: 50%; }
.row { position: relative; height: 8.6cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw; font-size: 5cqw; white-space: nowrap; cursor: pointer; }
.row .lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row.on { color: #fff; background: linear-gradient(180deg, var(--hi1) 0%, var(--hi2) 52%, var(--hi3) 100%); text-shadow: 0 -.2cqw 0 rgba(0, 0, 0, .22); }
.chev { width: 1.9cqw; height: 1.9cqw; border-right: .65cqw solid currentColor; border-top: .65cqw solid currentColor; transform: rotate(45deg); margin-right: .8cqw; flex: none; opacity: .85; }
.row svg.ico { width: 3.6cqw; height: 3.6cqw; flex: none; fill: currentColor; opacity: .45; }
.row.on svg.ico { opacity: .9; }
.arty .row { height: 15cqw; gap: 2.6cqw; padding-left: 1.4cqw; }
.arty .row .thumb { width: 12.6cqw; height: 12.6cqw; flex: none; object-fit: cover; background: #ddd; box-shadow: 0 0 0 .2cqw rgba(0, 0, 0, .12); }
.arty .row .lab b { display: block; font-size: 4.8cqw; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.arty .row .lab small { display: block; font-size: 3.9cqw; font-weight: 600; color: #6c737b; margin-top: .4cqw; overflow: hidden; text-overflow: ellipsis; }
.arty .row.on .lab small { color: #dbe9ff; }
.sbar { position: absolute; right: 0; top: 0; bottom: 0; width: 3.4cqw; border-left: .25cqw solid #8e959d; background: linear-gradient(90deg, #f2f3f5, #fff); display: none; }
.scrolls .sbar { display: block; }
.sbar i { position: absolute; left: .5cqw; right: .5cqw; border-radius: 1cqw; background: linear-gradient(90deg, #5c9ef0, #2367cf); transition: top .09s linear; }

/* main menu: the art pane on the right half pans slowly across the work */
.pane { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; overflow: hidden; background: #222; border-left: .25cqw solid #8e959d; cursor: pointer; }
.pane img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity .9s ease; will-change: transform, opacity; }
.pane img.in { opacity: 1; }
.pane .clockface { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #2b2f35, #0e0f11); color: #fff; font-size: 9cqw; font-weight: 600; letter-spacing: -.02em; }
.pane .clockface small { display: block; font-size: 3.6cqw; color: #aeb6bf; text-align: center; margin-top: 1cqw; letter-spacing: 0; }

/* Now Playing */
.np { display: flex; flex-direction: column; padding: 2.2cqw 4cqw 3.4cqw; }
.np .count { font-size: 3.7cqw; color: #333; }
.np .main { display: flex; gap: 4cqw; align-items: flex-start; margin-top: 2.6cqw; flex: 1; min-height: 0; }
.np .art { width: 38cqw; height: 38cqw; flex: none; object-fit: cover; box-shadow: 0 0 0 .2cqw rgba(0, 0, 0, .15); -webkit-box-reflect: below .6cqw linear-gradient(transparent 62%, rgba(255, 255, 255, .45)); }
.np .meta { min-width: 0; padding-top: 4cqw; }
.np .meta b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 5cqw; font-weight: 700; line-height: 1.12; }
.np .meta span { display: block; font-size: 4.2cqw; color: #3b4148; margin-top: 1.4cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np .prog { position: relative; height: 3cqw; border: .3cqw solid #7e858d; border-radius: 1.5cqw; background: linear-gradient(180deg, #fdfdfd, #dfe3e7); overflow: hidden; }
.np .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, var(--hi1), var(--hi2) 55%, var(--hi3)); }
.np.scrub .prog i { background: linear-gradient(180deg, #f2f4f6, #c9ced4); }
.np .prog b { position: absolute; top: -.3cqw; width: 3cqw; height: 3cqw; margin-left: -1.5cqw; background: linear-gradient(180deg, var(--hi1), var(--hi3)); transform: rotate(45deg) scale(.8); display: none; }
.np.scrub .prog b { display: block; }
.np .times { display: flex; justify-content: space-between; font-size: 3.6cqw; margin-top: 1cqw; color: #222; }
.np .vol { display: none; align-items: center; gap: 2cqw; height: 7.6cqw; }
.np.volume .vol { display: flex; }
.np.volume .progwrap { display: none; }
.np .vol .prog { flex: 1; }
.np .vol svg { width: 4.4cqw; height: 4.4cqw; fill: #444; flex: none; }

/* photo grid */
.grid { position: absolute; inset: 0; overflow: hidden; }
.grid .cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; padding: 1.6cqw; transition: transform .12s linear; }
.grid .cell { aspect-ratio: 1; background: #e4e6e8; cursor: pointer; overflow: hidden; outline: .9cqw solid transparent; outline-offset: -.1cqw; }
.grid .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid .cell.on { outline-color: #2c76dc; }

/* notes, contacts, clock */
.note { padding: 3.6cqw 4.4cqw 6cqw; font-size: 4.6cqw; font-weight: 600; line-height: 1.32; transition: transform .1s linear; }
.note h2 { font-size: 5.6cqw; margin: 0 0 1cqw; font-weight: 700; }
.note h3 { font-size: 4.6cqw; margin: 3.6cqw 0 .4cqw; font-weight: 700; }
.note p { margin: 0 0 2.4cqw; font-weight: 400; }
.note .muted { color: #59606a; font-weight: 600; }
.note a { color: #1a5fc6; }
.clock { display: grid; place-content: center; text-align: center; height: 100%; background: linear-gradient(180deg, #fff, #eef0f3); }
.clock .city { font-size: 5cqw; font-weight: 700; }
.clock .time { font-size: 17cqw; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin-top: 1cqw; }
.clock .day { font-size: 4.2cqw; color: #4b525a; }

/* the sync screen (the loading screen): Do not disconnect. */
.boot { position: absolute; inset: 0; z-index: 9; background: #fff; transition: opacity .35s ease; }
.boot.gone { opacity: 0; pointer-events: none; }
.boot .sync { position: absolute; left: 0; right: 0; top: 7.8cqw; bottom: 0; display: grid; place-content: center; justify-items: center; gap: 2.4cqw; }
.boot svg { width: 30cqw; height: 30cqw; }
.boot svg.ok { display: none; }
.boot.done svg.ok { display: block; }
.boot.done svg.no { display: none; }
.boot .msg { margin: 0; font-size: 5.4cqw; font-weight: 700; }
.boot .pbar { width: 52cqw; height: 2.6cqw; border: .3cqw solid #7e858d; border-radius: 1.3cqw; overflow: hidden; background: #eceff2; }
.boot .pbar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, var(--hi1), var(--hi3)); transition: width .2s; }
.boot.done .pbar { visibility: hidden; }

/* ---------- the full window: films, photos and the booklet grow out of the little screen */
#big { position: fixed; z-index: 50; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; background: #000; color: #fff; }
@supports (height: 1svh) { #big { height: 100svh; } }
#big[hidden] { display: none; }
.pill {
  position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); min-width: 64px; height: 36px; padding: 0 14px;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(30, 32, 36, .72); color: #e9ecef; cursor: pointer;
  font: 700 14px/34px var(--font); letter-spacing: .06em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pill.r { left: auto; right: max(12px, env(safe-area-inset-right)); min-width: 44px; padding: 0; display: grid; place-items: center; }
.pill svg { width: 22px; height: 12px; fill: currentColor; }
.pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#big .pill { transition: opacity .3s; }
#big.small .pill { opacity: 0; pointer-events: none; }
.film-stage { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; }
.film-box { position: relative; background: #000; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; }
.film-box.tall { width: min(100cqw, 100cqh * 9 / 16); aspect-ratio: 9 / 16; }
.film-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-stage.side { inset: auto; left: 50%; top: 50%; width: var(--bh); height: var(--bw); transform: translate(-50%, -50%) rotate(90deg); }
.film-stage.turning { transition: transform .6s cubic-bezier(.4, 0, .2, 1); }

.photo-stage { position: absolute; inset: 0; touch-action: pan-y; }
.photo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s ease; }
.photo-stage img.in { opacity: 1; }
.photo-stage.fit img { padding: 8px; }

/* the Digital Booklet: the case study, in the player's own screen grown to the window */
#big.booklet { background: #fff; color: var(--ink); }
.bk-bar { position: absolute; left: 0; right: 0; top: 0; height: 52px; z-index: 4; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffffff 0%, #eef0f2 45%, #d6dadf 100%); border-bottom: 1px solid #8e959d; font: 700 18px var(--font); color: #111; }
.bk-bar .ttl { max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bk-bar .batt { right: 16px; width: 28px; height: 14px; border-width: 1.5px; border-radius: 3px; padding: 1.5px; }
.bk-bar .batt::after { right: -5px; width: 3px; border-radius: 0 2px 2px 0; }
.bk-bar .pill { top: 8px; height: 34px; line-height: 32px; background: linear-gradient(180deg, #fdfdfd, #dfe3e7); color: #2a2f35; border-color: #99a0a8; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bk-scroll { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.bk-in { max-width: 980px; margin: 0 auto; padding: 28px 24px 72px; }
.bk-head { display: flex; gap: 22px; align-items: center; margin-bottom: 26px; }
.bk-head img { width: 132px; height: 132px; flex: none; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 8px 22px rgba(0, 0, 0, .18); }
.bk-head h1 { margin: 0; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.04; font-weight: 700; }
.bk-head p { margin: 6px 0 0; font-size: 19px; font-weight: 600; color: #5d646d; }
.bk-kit { --ab-fg: #1a1d21; --ab-muted: #5d646d; --ab-accent: #2c76dc; --ab-chrome: 96px; font-size: 17px; line-height: 1.45; font-weight: 400; }
.bk-kit .ab-heading { font-size: 20px; font-weight: 700; margin-top: 8px; padding-bottom: 6px; border-bottom: 1px solid #d5d9de; }
.bk-kit .ab-lede { font-size: 19px; }
.bk-kit figcaption { font-weight: 600; }

/* ---------- a phone becomes the player: the screen on top, the wheel underneath */
@media (max-width: 600px) and (orientation: portrait) {
  body { background: #e9ebed; }
  #stage { padding: 0; place-items: stretch; }
  #rig { -webkit-box-reflect: none; perspective: 1400px; width: 100vw; height: 100%; }
  #player { width: 100vw; height: 100%; --W: 100vw; }
  .front, .back { border-radius: 0; }
  .front { padding: 0; box-shadow: none; }
  .face { border-radius: 0; display: flex; flex-direction: column; align-items: center; }
  .gloss { display: none; }
  .bezel { position: relative; left: auto; right: auto; top: auto; flex: none; margin-top: max(12px, env(safe-area-inset-top)); width: calc(100vw - 24px); padding: 7px; border-radius: 10px; }
  #lcd { aspect-ratio: auto; height: min(calc(100vh - min(78vw, 42vh) - 96px), calc((100vw - 38px) * 1.02)); }
  .wheel-wrap { position: relative; top: auto; flex: 1; width: 100%; padding-bottom: env(safe-area-inset-bottom); }
  #wheel { width: min(78vw, 42vh); }
  .wb { font-size: calc(min(78vw, 42vh) * .072); }
  .wb svg { width: calc(min(78vw, 42vh) * .135); }
  .engrave { font-size: 7.6vw; top: 39%; }
  #flip { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: 40px; height: 40px; border-color: rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .03); color: #8b9198; }
  #flip:hover { background: rgba(0, 0, 0, .06); color: #555; }
  .bk-bar { height: 48px; font-size: 16px; }
  .bk-bar .pill { top: 7px; }
  .bk-scroll { top: 48px; }
  .bk-in { padding: 18px 16px 64px; }
  .bk-head { gap: 14px; margin-bottom: 18px; }
  .bk-head img { width: 88px; height: 88px; }
  .bk-head p { font-size: 16px; }
  .bk-kit { font-size: 16px; --ab-chrome: 80px; }
}
@supports (height: 1svh) {
  @media (max-width: 600px) and (orientation: portrait) {
    #lcd { height: min(calc(100svh - min(78vw, 42svh) - 96px), calc((100vw - 38px) * 1.02)); }
    #wheel { width: min(78vw, 42svh); }
    .wb { font-size: calc(min(78vw, 42svh) * .072); }
    .wb svg { width: calc(min(78vw, 42svh) * .135); }
  }
}
/* a phone on its side: the screen on the left, the wheel on the right */
@media (orientation: landscape) and (max-height: 500px) {
  body { background: #e9ebed; }
  #stage { padding: 0; place-items: stretch; }
  #rig { -webkit-box-reflect: none; width: 100vw; height: 100%; }
  #player { width: 100vw; height: 100%; --W: 60vh; }
  .front, .back { border-radius: 0; }
  .front { padding: 0; box-shadow: none; }
  .face { border-radius: 0; display: flex; align-items: center; justify-content: space-evenly; padding: 10px max(12px, env(safe-area-inset-left)); }
  .gloss { display: none; }
  .bezel { position: relative; left: auto; right: auto; top: auto; width: min(58vw, calc((100vh - 34px) * 4 / 3 + 14px)); padding: 7px; border-radius: 10px; }
  .wheel-wrap { position: relative; top: auto; width: auto; }
  #wheel { width: min(32vw, 68vh); }
  .wb { font-size: calc(min(32vw, 68vh) * .072); }
  .wb svg { width: calc(min(32vw, 68vh) * .135); }
  #flip { border-color: rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .03); color: #8b9198; }
}
@media (prefers-reduced-motion: reduce) {
  #player { transition-duration: .01s; }
  .view.slide, .rows, .pane img { transition: none; }
}