/* Idle Dance: the interface. Owned by Idle Dance · Interface (Game/WORKSTREAMS.md). Only style A (neon) ships;
   the other palettes are for the ?dev comparison. Text on the pink accent is dark (--on-accent): white on pink is
   only 3:1, dark is 6.4:1. */
:root {
  --accent: #ff4fb3; --accent2: #38e8ff; --on-accent: #120c24;
  --page: #0c0a1f; --panel: #141029; --card: #1b1638; --ink: #f0edff; --muted: #a39dcf; --line: rgba(255,255,255,.09);
  --danger: #ff7a8a;
  /* Card thumbnails: brighter than the chrome so the dark dancer reads (look brief, 2026-09-26). */
  --thumb: radial-gradient(120% 95% at 50% 100%, #7a2aa8 0%, #3b2478 45%, #1e1748 100%);
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
body[data-style="cozy"] {
  --page: #f6f0ff; --panel: #ffffff; --card: #f3ecff; --ink: #2d2442; --muted: #6c6187; --line: rgba(45,36,66,.12);
  --thumb: linear-gradient(#cfe9ff, #ffe8f2 75%, #efe2ff);
}
body[data-style="stage"] {
  --page: #0d0612; --panel: #150b1d; --card: #1f1029; --ink: #fff6e6; --muted: #c9ae90; --line: rgba(255,207,74,.14);
  --thumb: radial-gradient(120% 90% at 50% 100%, #4a1a3a 0%, #1a0b24 60%, #0d0612 100%);
}
body[data-style="pop"] {
  --page: #1a0826; --panel: #230b33; --card: #2f1044; --ink: #ffffff; --muted: #f3b9dc; --line: rgba(255,255,255,.14);
  --thumb: linear-gradient(135deg, #ff2e9a, #ff7a1a 60%, #ffd400);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
:where(button, a, select, input, [tabindex]):focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }

/* ---- Header ---------------------------------------------------------------------------------- */
.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: calc(8px + var(--safe-t)) calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l));
  background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 2;
}
.brand { display: flex; align-items: baseline; gap: 8px; font-size: 19px; letter-spacing: .01em; }
.brand b { font-weight: 800; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.progress { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.lvl { font-weight: 800; color: var(--accent); white-space: nowrap; }
.meter { position: relative; flex: 0 0 120px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s linear; }
.next { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.styles { display: flex; gap: 4px; background: var(--line); padding: 3px; border-radius: 999px; }
.styles button { border: 0; background: transparent; padding: 6px 11px; border-radius: 999px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.styles button b { color: var(--ink); }
.styles button[aria-checked="true"], .styles button[aria-checked="true"] b { background: var(--accent); color: var(--on-accent); }
.icon, .pill { border: 1px solid var(--line); background: var(--card); border-radius: 999px; min-height: 40px; }
.icon { width: 40px; padding: 0; font-size: 17px; display: inline-grid; place-items: center; }
.icon[aria-pressed="true"], .icon.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.pill { font-weight: 650; font-size: 14px; padding: 6px 14px; white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* ---- Stage ----------------------------------------------------------------------------------- */
.stage-wrap { position: relative; min-height: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.now {
  --rar: #c9c4ea; position: absolute; left: calc(14px + var(--safe-l)); bottom: 14px; display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 28px); background: rgba(8,6,20,.62); color: #fff; backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rar) 60%, transparent); font-size: 13px; white-space: nowrap;
}
.now b { overflow: hidden; text-overflow: ellipsis; }
.now span { color: color-mix(in srgb, var(--rar) 75%, #fff); font-weight: 700; font-size: 12px; } /* lightened: Epic #a64dff alone is only ~4.7:1 */
.rar { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rar); box-shadow: 0 0 8px var(--rar); flex: none; }

/* Toasts: top right on wide screens, a full-width band over the top of the stage on phones. */
.toasts {
  position: absolute; top: 12px; right: calc(12px + var(--safe-r)); z-index: 3; display: flex; flex-direction: column; gap: 8px;
  width: min(340px, calc(100% - 24px)); pointer-events: none;
}
.toast {
  --rar: #fff; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  background: rgba(14,10,32,.93); color: #fff; border: 1px solid var(--rar); border-radius: 14px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--rar) 45%, transparent); animation: toast-in .35s ease-out;
  transition: opacity .4s, transform .4s;
}
.toast .tx { display: grid; gap: 1px; min-width: 0; }
.toast small { color: color-mix(in srgb, var(--rar) 75%, #fff); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.toast b { font-size: 15px; }
.toast .more { color: #d9d4ff; font-size: 12px; }
.toast button { flex: none; border: 0; background: var(--rar); color: var(--on-accent); font-weight: 750; border-radius: 999px; padding: 8px 14px; min-height: 36px; white-space: nowrap; }
.toast.big { padding: 14px; box-shadow: 0 0 34px color-mix(in srgb, var(--rar) 65%, transparent); }
.toast.big b { font-size: 18px; }
.toast.tip { --rar: var(--accent2); align-items: flex-end; }
.toast.tip .tx span:not(.more) { color: #e7e3ff; font-size: 13px; }
.toast.out { opacity: 0; transform: translateX(20px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* ---- Dock: tabs, panels, cards ----------------------------------------------------------------- */
.dock { background: var(--panel); border-top: 1px solid var(--line); max-height: 42vh; max-height: 42dvh; overflow: auto; overscroll-behavior: contain; position: relative; z-index: 1; }
.tabs {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; padding: 6px calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));
  background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  position: relative; flex: none; border: 0; background: transparent; padding: 10px 12px; min-height: 44px; white-space: nowrap;
  color: var(--muted); font-weight: 650; border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .n { font-weight: 500; font-size: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); vertical-align: 2px; }
.panel { padding: 12px calc(14px + var(--safe-r)) 16px calc(14px + var(--safe-l)); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.slots { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.slots::-webkit-scrollbar { display: none; }
.slots button { position: relative; flex: none; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 14px; min-height: 36px; font-size: 13px; color: var(--muted); }
.slots button[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: transparent; }
.slots button.has-new::after { content: ""; position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.card {
  --rar: #c9c4ea; position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; text-align: left; container-type: inline-size;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .15s, border-color .15s;
}
/* Narrow cards show the rarity alone: "Common · 4 counts" only fits from about 150px. */
@container (max-width: 150px) { .card .meta .x { display: none; } }
.card:not(.locked):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rar) 70%, transparent); }
.card canvas { display: block; width: 100%; aspect-ratio: 120 / 150; background: var(--thumb); }
.card .meta { padding: 7px 9px 9px; display: grid; gap: 2px; min-width: 0; }
.card .meta b { font-size: 13px; line-height: 1.2; }
.card .meta small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; }
.card .meta small span { overflow: hidden; text-overflow: ellipsis; }
.card .meta .rar { width: 7px; height: 7px; }
.card .eta { font-size: 11px; font-weight: 700; color: var(--accent2); }
.card.locked { cursor: default; }
.card.locked canvas { filter: brightness(.55) saturate(.45); }
/* Buttons center their content; as a column the thumbnail stays on top. The flags only hold positioned badges. */
.flags { display: contents; }
.flags > * { display: none; position: absolute; top: 8px; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; }
.flags .badge { left: 8px; background: var(--accent); color: var(--on-accent); padding: 3px 7px; }
.flags .new { right: 8px; background: var(--accent2); color: var(--on-accent); padding: 3px 7px; }
.flags .lock { right: 8px; width: 26px; height: 26px; border-radius: 999px; background: rgba(0,0,0,.6); color: #ffe7a0; place-items: center; }
.card.playing .flags .badge, .card.worn .flags .badge, .card.fresh .flags .new { display: block; }
.card.locked .flags .lock { display: grid; }
.card.playing, .card.worn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Routines: wider cards with the moves they need. */
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card.routine { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; }
.card.routine canvas { aspect-ratio: auto; height: 100%; min-height: 150px; }
.card.routine.locked canvas { filter: brightness(.4) saturate(.3); }
.card.routine .meta { padding: 10px 12px; align-content: start; }
.card.routine .meta b { font-size: 15px; padding-right: 30px; }
.about { display: block; margin: 4px 0 6px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--line); }
.chips .have { background: color-mix(in srgb, var(--rar) 22%, transparent); border-color: color-mix(in srgb, var(--rar) 55%, transparent); color: var(--ink); }
.chips .miss { color: var(--muted); }

/* Dev view (?dev) */
.prose { max-width: 760px; }
.prose h3 { margin: 18px 0 6px; font-size: 15px; }
.prose ul { margin: 0; padding-left: 18px; color: var(--muted); }
.prose li { margin: 5px 0; }
.prose b { color: var(--ink); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.row.end { justify-content: flex-end; margin-top: 18px; }
.row > button:not(.pill) { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; min-height: 36px; font-weight: 700; }
.row button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.danger { color: var(--danger) !important; }
.pill.danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.pill.danger-fill { background: var(--danger); color: var(--on-accent); border-color: transparent; }

/* Footer: the public pages */
.foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px calc(16px + var(--safe-r)) calc(14px + var(--safe-b)) calc(16px + var(--safe-l)); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.links a { color: var(--muted); text-decoration: none; }
.links a:hover { color: var(--ink); text-decoration: underline; }

/* ---- Mini-strip: docked (the compact view) and floating (the Picture-in-Picture window) ------------ */
.strip { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--page); color: #fff; }
.strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.strip-info {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; gap: 5px; justify-items: end;
  background: rgba(8,6,20,.55); padding: 8px 12px; border-radius: 12px; font-size: 13px; max-width: 58%;
}
.strip-info b, .strip-info small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-info .meter { flex: none; width: 150px; }
.strip-info small { color: #d9d4ff; }
.strip-exit { border: 1px solid rgba(255,255,255,.25); background: rgba(8,6,20,.7); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; min-height: 28px; }
body.compact .app { display: none; }
body.compact #strip-host { position: fixed; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--page); }
body.compact .strip { height: clamp(96px, 100vh, 160px); }
.compact-hint { display: none; margin: 0; padding: 16px; place-self: center; max-width: 440px; text-align: center; color: var(--muted); overflow: hidden; }
body.compact .compact-hint { display: block; }
body.pip { margin: 0; height: 100vh; overflow: hidden; background: #000; }
body.pip .strip { height: 100vh; }

/* ---- Dialogs (native <dialog>) ---------------------------------------------------------------- */
dialog.sheet {
  padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink);
  width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
dialog.sheet::backdrop { background: rgba(4,3,12,.62); }
dialog.sheet[open] { animation: sheet-in .2s ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }
.sheet .in { padding: 22px; }
.sheet h2 { margin: 0 0 6px; font-size: 21px; }
.sheet p { margin: 8px 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-head h2 { margin: 0; }
.sheet .links { margin: 18px 0 0; font-size: 13px; }
.groups { max-height: min(46vh, 360px); overflow: auto; margin: 10px 0 16px; }
.groups h3 { margin: 12px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.groups h3:first-child { margin-top: 0; }
.groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.groups li { --rar: #fff; display: flex; align-items: center; gap: 8px; }
.groups li small { margin-left: auto; color: var(--muted); font-size: 12px; }
.ask { display: block; font-weight: 600; margin: 10px 0 8px; }
.pick { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.pick select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 48px; }
.go { margin-top: 14px; width: 100%; min-height: 48px; background: var(--accent); color: var(--on-accent); border: 0; font-size: 16px; font-weight: 750; }
.go:disabled { opacity: .45; cursor: not-allowed; }
.sheet .hint { margin-top: 10px; }

/* Settings rows */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting small { color: var(--muted); font-size: 13px; }
.setting input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--accent); min-height: 32px; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.switch .knob { width: 30px; height: 30px; border-radius: 50%; background: var(--muted); transition: background .15s; }
.switch[aria-checked="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.switch[aria-checked="true"] .knob { background: var(--on-accent); }

/* Wardrobe: the body shape */
.body-pick { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.body-pick .seg { display: inline-grid; grid-template-columns: repeat(2, minmax(76px, auto)); margin: 0; }
.body-pick .seg button { min-height: 36px; padding: 6px 14px; }

/* Music sheet: our beat, the player's own songs, or their taps */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 14px 0 12px; background: var(--line); border-radius: 999px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 8px 6px; min-height: 40px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.music-view { min-height: 60px; }
.music .row { margin: 10px 0 0; }
.now-song { display: grid; gap: 3px; background: var(--card); border-radius: 14px; padding: 12px; }
.now-song b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-song small { color: var(--muted); font-size: 12px; min-height: 16px; }
.now-song .track { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 5px 0 2px; }
.now-song .track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.now-song .row { margin: 6px 0 0; }
.pill.play { background: var(--accent); color: var(--on-accent); border-color: transparent; min-width: 84px; }
.songs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; max-height: 196px; overflow: auto; }
.songs li { display: flex; align-items: center; gap: 4px; }
.song { flex: 1; min-width: 0; display: grid; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 7px 9px; }
.song:hover, .song[aria-current="true"] { background: var(--card); }
.song span:not(.sr) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song small { color: var(--muted); font-size: 11px; }
.songs .icon { width: 36px; min-height: 36px; font-size: 13px; flex: none; }
.tap-pad {
  width: 100%; min-height: 112px; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); font-size: 18px; font-weight: 800; touch-action: manipulation; user-select: none;
}
.tap-pad:active { background: color-mix(in srgb, var(--accent) 30%, var(--card)); }
.hint.small { font-size: 12px; margin-top: 12px; }
.drop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(12,10,31,.78); border: 3px dashed var(--accent); font-size: 22px; font-weight: 800; color: #fff; pointer-events: none; }

/* ---- Layouts ---------------------------------------------------------------------------------- */
/* Wide screens, and phones held sideways: the dock moves to a side column. */
@media (min-width: 1100px), (orientation: landscape) and (max-height: 500px) {
  .app { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr); }
  .bar { grid-column: 1 / -1; }
  .dock { max-height: none; border-top: 0; border-left: 1px solid var(--line); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .app { grid-template-columns: minmax(0, 1fr) min(46vw, 420px); }
  .bar { padding-top: calc(4px + var(--safe-t)); padding-bottom: 4px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
/* Phones: header in two rows (name and buttons, then progress), three cards per row, sheets from the bottom. */
@media (max-width: 560px) {
  .bar { gap: 6px 10px; }
  .brand { font-size: 17px; }
  .progress { order: 3; flex-basis: 100%; }
  .meter { flex-basis: 64px; }
  .icon { width: 44px; min-height: 44px; }
  .styles button { padding: 6px 8px; }
  .styles button span { display: none; }
  .dock { max-height: 46vh; max-height: 46dvh; }
  .tabs button { padding: 10px 10px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .grid.wide { grid-template-columns: minmax(0, 1fr); }
  .card .meta { padding: 6px 7px 8px; }
  .slots button { min-height: 40px; }
  .toasts { left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); top: 8px; width: auto; }
  .toast { padding: 8px 10px; }
  .toast.big { padding: 10px 12px; }
  .toast.big b { font-size: 16px; }
  /* The first-run tip is tall, so on phones it docks at the bottom, over the cards, and the dancer stays in view
     (unlock toasts are short enough to fit above the dancer's head). */
  .toast.tip { position: fixed; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); z-index: 5; }
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .sheet .in { padding: 20px calc(18px + var(--safe-r)) calc(20px + var(--safe-b)) calc(18px + var(--safe-l)); }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}