/* DeletePal on the taste kit. The :root block is as start.mjs printed it for the
   client's own colours (the app's green on white). Everything after it is page
   CSS the recipes ask for: inside visuals and on the small inner pages. */

@font-face {
  font-family: "Reddit Sans";
  src: url("/assets/fonts/reddit-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --p-bg: #ffffff; --p-surface: #f1f5fb; --p-ink: #10203a; --p-muted: #4c5a6e;
  --p-accent: #0a66d8; --p-accent-ink: #ffffff; --p-action: #0a66d8; --p-action-ink: #ffffff;
  --p-inv-bg: #10203a; --p-inv-surface: #1e2d46; --p-inv-ink: #ffffff; --p-inv-muted: #9ba3b0;
  --p-inv-accent: #ffffff; --p-inv-accent-ink: #10203a; --p-inv-action: #ffffff; --p-inv-action-ink: #10203a;
  --font-display: "Reddit Sans", system-ui, sans-serif;
  --font-text: "Reddit Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.04em;
}

.nav__icon { display: inline-block; width: 28px; height: 28px; margin-right: 9px; vertical-align: -8px; }

.footer__name { font-size: 30px; }

.footer__name .nav__icon { width: 36px; height: 36px; vertical-align: -9px; }

/* Hero window: the app's own rows */

.st-row-icon { flex: none; width: 26px; height: 26px; object-fit: contain; }

/* The app window (recipe: app-frame) */

.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane--list::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }

@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: none; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}

@media (max-width: 639px) {
  .app.ui { grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list .st-apps { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; }

  .app > .app__pane--list .st-apps li { min-width: 0; }
  .app > .app__pane--list .st-app { justify-content: center; width: 100%; min-height: 44px; padding: 0; gap: 0; }
  .app > .app__pane--list .st-app > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app > .app__pane + .app__pane { border-top: 1px solid var(--u-line); }
}

/* Inner pages. The one-screen rule is for the home page. */

main > section.st-doc { height: auto; min-height: 76svh; padding-top: calc(var(--nav) + var(--s-8)); padding-bottom: var(--s-9); }

.st-doc .wrap { width: min(100% - 2 * var(--gut), 760px); }

.st-doc h1 { font: var(--display-weight) clamp(36px, 4.6vw, 56px)/1.08 var(--font-display); letter-spacing: var(--display-tracking); }

.st-doc h2 { margin-top: var(--s-7); font: 500 24px/1.25 var(--font-display); letter-spacing: -0.01em; }

.st-doc p, .st-doc li { color: var(--ink); max-width: 62ch; }

.st-doc p { margin-top: var(--s-3); }

.st-doc ul, .st-doc ol { margin: var(--s-3) 0 0; padding-left: 22px; }

.st-doc li { padding-block: 3px; }

.st-doc .btn-row { margin-top: var(--s-5); }

.st-doc .muted { color: var(--muted); }

.st-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--p-surface); }

.st-key code { font: 500 clamp(15px, 2.4vw, 19px)/1.4 var(--font-mono); overflow-wrap: anywhere; user-select: all; }

.st-form { margin-top: var(--s-4); }

.st-form label { display: block; font-size: 13px; font-weight: 500; }

.st-form .btn-row { align-items: stretch; margin-top: var(--s-2); }

.st-form input { flex: 1 1 240px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 400 16px var(--font-text); }

footer.closing.st-short { height: auto; min-height: 0; padding-top: var(--s-8); }

.st-lead { margin-top: var(--s-4); }

.card--plan .st-price { font: var(--display-weight) clamp(36px, 3.4vw, 48px)/1 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); }



.st-faq { margin-top: var(--s-7); }

/* From the dealt hero (collage): its lit frame, note card and three-card section */
/* the lit ground of the art: the page's soft blue with one soft light and a fine grain */
.hero__art { background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, color-mix(in oklab, var(--ground-bg) 80%, var(--ground-accent)), transparent 70%),
    var(--ground-bg); }
.hero__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 320px; z-index: 2; }
.hero__proof { font-size: var(--t-small); color: var(--muted); }
/* the window's rows without their time column; its content keeps --ly-cut-room clear at the right, so the frame cuts empty margin, not the chips */
/* the second section: three cards, each with an inset panel on the hero's lit blue ground */
.open-cards .panel { --p-h: 248px; background:
    radial-gradient(80% 70% at 20% 0%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    var(--ground-bg); }
.open-cards .d-card { box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 14px 32px -18px rgb(0 0 0 / .35); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); } }
/* three cards across from 1024 (their fragments are made to fit a 220px panel, so the kit's 1024-1279
   two-up rule for span-4 panels is not needed: these cards carry no span class); text beside the panel
   from 640 to 1023; stacked with a 148px panel on a phone: the section stays one screen (1.3 at most) */
.open-cards > .card { grid-column: 1 / -1; }
@media (min-width: 1024px) { .open-cards > .card { grid-column: auto / span 4; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .open-cards > .card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: min-content; column-gap: var(--s-6); align-content: start; }
  .open-cards > .card > :not(.panel) { grid-column: 1; }
  .open-cards > .card > .panel { grid-column: 2; grid-row: 1 / span 4; --p-h: 244px; margin: calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad)) 0; border-radius: calc(var(--c-r) - var(--c-gap)); }
}
@media (max-width: 639px) { .open-cards .panel { --p-h: 148px; } .stage > .at-rise { --ay-sm: 20px; } .open-cards > .card > .panel { margin-top: var(--s-5); } }

/* The hero window in the app's own dark look, on the lit frame */

#speed .frame--split { aspect-ratio: auto; height: clamp(440px, 37.4vw, 540px); }

@media (max-width: 1023px) { #speed .frame--split { aspect-ratio: 5 / 4; height: auto; } }

.open-cards { margin-top: var(--s-7); }

.open-cards .panel { --p-h: 330px; }

@media (max-width: 639px) { .open-cards .panel { --p-h: 272px; } }

.st-doc ul { list-style: disc; }

.st-doc ol { list-style: decimal; }

/* Tablets: every app stays in view, two across, with room for its size */

@media (min-width: 640px) and (max-width: 1023px) {
  .app > .app__pane--list .st-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* When the columns stack, the list keeps some air under the words */

@media (max-width: 1023px) {
  #speed .frame--split { margin-top: var(--s-5); }
}

/* Tablets: the two prices sit side by side under the heading */

@media (min-width: 640px) and (max-width: 1023px) {
  #pricing .grid > .span-4:first-child { grid-column: 1 / -1; }
  #pricing .card--plan { grid-column: span 6; }
}

/* Phones and short laptop screens: a section grows past its screen instead of
   running into the next one. Short-laptop heights keep the desktop count (--h);
   phones keep theirs (--hm). */

@media (max-width: 639px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--hm, var(--h, 1)) * 100vh); min-height: calc(var(--hm, var(--h, 1)) * 100lvh);
    display: flex; flex-direction: column;
  }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}

@media (min-width: 1280px) and (max-height: 859px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh);
    display: flex; flex-direction: column;
  }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}

/* The smallest phones: the top bar's button gives up a little padding to fit */

@media (max-width: 379px) {
  .nav__actions .btn { padding-inline: 10px; }
}

/* On a phone the lost-key form stacks, so its email box keeps a normal height */

@media (max-width: 639px) {
  .st-form input { flex: none; }
}

/* Pill buttons reach the demos too, the top menu stays quiet until hovered,
   and the app windows get real Mac dots */

.nav__link { color: var(--muted); transition: color 0.15s ease; }

.nav__link:hover, .nav__link:focus-visible, .nav__item:hover > .nav__link { color: var(--ink); }

.d-win__dots i:nth-child(1), .d-win--dark .d-win__dots i:nth-child(1), .ui-dots i:nth-child(1) { background: #ff5f57; }

.d-win__dots i:nth-child(2), .d-win--dark .d-win__dots i:nth-child(2), .ui-dots i:nth-child(2) { background: #febc2e; }

.d-win__dots i:nth-child(3), .d-win--dark .d-win__dots i:nth-child(3), .ui-dots i:nth-child(3) { background: #28c840; }

/* Secondary buttons stay white with an outline, so "Buy for $10" never looks switched off */

html[data-buttons="pill"] .btn--secondary { background: var(--bg); border-color: var(--line-strong); }

html[data-buttons="pill"] .btn--secondary:hover { background: color-mix(in oklab, var(--action) 8%, var(--bg)); border-color: var(--action); }

/* Pal's can, as on the app's Trash button */

.st-pal { flex: none; display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.st-pal__lid { transform-box: view-box; transform-origin: 3px 4.9px; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.6, 1); }

.st-move:not(:disabled):hover .st-pal__lid { transform: rotate(-14deg); }

@media (prefers-reduced-motion: reduce) {
  .st-pal__lid { transition: none; }
  .st-move:not(:disabled):hover .st-pal__lid { transform: none; }
}

/* Stands in for Download and Buy while COMING_SOON is on in brand.env. Tinted and
   flat, so it doesn't look like a button that's stopped working. */
.st-soon { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 var(--s-5); border-radius: 999px; background: color-mix(in oklab, var(--action) 12%, var(--bg)); color: var(--action); font-size: 15px; font-weight: 600; white-space: nowrap; }
.card--plan .st-soon { width: 100%; }
@media (max-width: 1023px) {
  .nav.is-open .nav__actions .st-soon { width: 100%; height: 48px; font-size: var(--t-body); }
}
@media (max-width: 379px) {
  .nav__actions .st-soon { padding-inline: 10px; }
}

/* The app in the samples. Colors, corners, sizes and words come from the app's own
   code (Palette and Corner in Components.swift, and the views that use them), checked
   against real pictures of the app. Sizes are the app's points, one to one; only the
   small cards in #space and #safety run a little smaller. Change the app first, then
   these, and keep site/assets/icons/mac/ the icons the app itself draws. */

:root {
  --app-brand: #1a73e8;          /* Palette.brand: tabs, checkboxes, chips */
  --app-glass: #0a74f0;          /* the system's glass buttons, tinted, as macOS draws them */
  --app-focus: #0070f5;          /* the sidebar's pick while the sidebar has the keyboard */
  --app-trash: #d92e26;          /* Palette.trash */
  --app-memory: #9c6ef2;         /* Palette.memory */
  --app-text: #1d1d1f;
  --app-soft: #808080;           /* .secondary */
  --app-faint: #b8b8b8;          /* .tertiary */
  --app-line: rgb(0 0 0 / .08);  /* Palette.line and Palette.track */
  --app-fill: rgb(0 0 0 / .045); /* Palette.fill */
  --app-quiet: rgb(0 0 0 / .06); /* gray pills and the menu bar's tiles */
  --app-box: rgb(0 0 0 / .1);    /* an unticked checkbox */
  --app-side: #ededed;
  --app-bg: #ffffff;
  --app-frost: rgb(255 255 255 / .74);
  --app-font: -apple-system, BlinkMacSystemFont, var(--font-text);
  --app-round: ui-rounded, -apple-system, BlinkMacSystemFont, var(--font-text);
  --app-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.8 8.3 2.8 2.8 5.6-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.d-win--dark { --app-text: #f5f5f7; --app-soft: #a7a7a7; --app-faint: #5f5f5f; --app-line: rgb(255 255 255 / .09); --app-fill: rgb(255 255 255 / .05); --app-quiet: rgb(255 255 255 / .14); --app-box: rgb(255 255 255 / .16); --app-side: #27282a; --app-bg: #242424; --app-focus: #007aff; --app-frost: rgb(50 50 52 / .74); background: var(--app-bg); }

.st-sprite { position: absolute; }

.st-sym { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.st-solid { fill: currentColor; stroke: none; }

.st-tick { stroke: #ffffff; stroke-width: 1.8; }

/* The top of the window: no title, the three lights, and the round sidebar button
   at the sidebar's right edge (beside the lights when the sidebar is closed) */

.st-lights { position: absolute; z-index: 2; top: 18px; left: 18px; display: flex; }

.st-lights .d-win__dots { gap: 9.5px; }

.st-lights .d-win__dots i { width: 14px; height: 14px; }

.st-toggle { position: absolute; z-index: 2; top: 7px; left: 176px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 2px 6px -2px rgb(0 0 0 / .2); color: var(--app-text); }

.d-win--dark .st-toggle { background: #3d3d3f; box-shadow: 0 0 0 .5px rgb(255 255 255 / .1); }

.st-toggle .st-sym { width: 18px; height: 18px; stroke-width: 1.4; }

/* Sidebar: four rows, and the two meters at the bottom */

.st-side { position: relative; display: flex; flex-direction: column; height: 100%; padding: 52px 10px 14px; background: var(--app-side); color: var(--app-text); }

.st-nav { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 9px; border-radius: 10px; font-size: 13px; white-space: nowrap; }

.st-nav .st-sym { width: 20px; height: 20px; color: var(--app-focus); stroke-width: 1.4; }

.st-nav.is-on { background: var(--app-focus); color: #ffffff; font-weight: 600; }

.st-nav.is-on .st-sym { color: #ffffff; }

.st-meters { display: grid; gap: 9px; margin-top: auto; padding: 12px 6px 0; }

.st-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; font-size: 10px; color: var(--app-soft); }

.st-meter b { font-weight: 400; color: var(--app-text); font-variant-numeric: tabular-nums; }

.st-meter .st-bar { grid-column: 1 / -1; }

.st-bar { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: var(--app-line); }

.st-bar > i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--app-brand); }

.st-meter--memory .st-bar > i { background: var(--app-memory); }

/* What the pages share: titles, fields, buttons, checkboxes and chips */

.st-title { margin: 0; max-width: none; font: 700 26px/1.15 var(--app-round); color: var(--app-text); }

.st-sub { margin: 3px 0 0; max-width: none; font-size: 12px; line-height: 1.3; color: var(--app-soft); }

.st-tools { display: flex; gap: 8px; margin-top: 10px; }

.st-field { display: flex; flex: 1 1 0; align-items: center; justify-content: space-between; min-width: 0; height: 28px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 99px; background: var(--app-fill); color: var(--app-soft); font: 400 13px/1 var(--app-font); }

.st-field--menu { flex: 0 0 124px; color: var(--app-text); }

.st-field .st-sym { width: 12px; height: 12px; color: var(--app-soft); stroke-width: 1.8; }

.st-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: auto; padding: 24px; color: var(--app-soft); font-size: 13px; text-align: center; }

.st-pick .st-sym { width: 46px; height: 46px; color: var(--app-text); stroke-width: 1.1; opacity: .16; }

.st-pick div { max-width: 36em; }

/* Glass buttons are the system's, tinted (Check Again, Put Back, Undo, Quit). Solid and
   tile are the menu bar's own (PanelStrongButtonStyle, PanelButtonStyle), quiet is
   QuietPillStyle and trash is TrashButton. */

.st-pill { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 24px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--app-glass); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .3), 0 1px 2px rgb(0 0 0 / .12); color: #ffffff; font: 400 13px/1 var(--app-font); white-space: nowrap; }

button.st-pill { cursor: pointer; }

.st-pill--solid { height: 36px; padding: 0 14px; background: var(--app-brand); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); font-weight: 600; }

.st-pill--tile { height: 36px; padding: 0 14px; background: var(--app-quiet); box-shadow: none; color: var(--app-text); font-weight: 600; }

.st-pill--quiet { height: 30px; padding: 0 14px; background: var(--app-quiet); box-shadow: none; color: var(--app-text); font-weight: 500; }

.st-pill--trash { height: 30px; padding: 0 16px; background: var(--app-trash); box-shadow: none; font-weight: 600; font-variant-numeric: tabular-nums; }

.st-pill .st-pal { width: 19px; height: 19px; }

.st-check { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--app-box); }

.st-check.is-on { background: var(--app-brand) var(--app-check) center / 11px no-repeat; }

.st-chip { flex: none; padding: 2px 7px; border-radius: 99px; background: rgb(26 115 232 / .13); color: var(--app-brand); font-size: 10px; font-style: normal; font-weight: 600; line-height: 1.3; }

.st-chip--watch { margin-left: 6px; background: rgb(252 179 51 / .13); color: #fcb333; }

/* The glass bar every cleaning page ends with */

.st-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 28px; background: var(--app-frost); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 0 0 .5px var(--app-line), 0 8px 24px -10px rgb(0 0 0 / .25); color: var(--app-text); }

.st-foot__words { flex: 1; min-width: 0; }

.st-foot__words b, .st-foot__words small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-foot__words b { font-size: 12px; font-weight: 500; }

.st-foot__words small { font-size: 10px; color: var(--app-soft); }

.st-foot--bar { flex: none; margin: 0 24px 14px; }

/* The hero: the Apps page with nothing picked, and the menu bar panel open on one app */

.st-mac { position: relative; container-type: inline-size; border-radius: 26px; color: var(--app-text); font: 400 13px/1.3 var(--app-font); }

.st-mac__body { display: flex; min-height: 492px; }

.st-mac .st-side { flex: 0 0 220px; height: auto; border-right: 1px solid var(--app-line); }

.st-pane { flex: 0 0 320px; min-width: 0; padding-top: 34px; border-right: 1px solid var(--app-line); }

.st-pane .st-title, .st-pane .st-sub, .st-pane .st-tools { margin-inline: 20px; }

.st-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 10px; padding: 0 10px; }

.st-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px; border-radius: 14px; }

.st-row .st-row-icon { width: 34px; height: 34px; }

.st-row__text { flex: 1; min-width: 0; }

.st-row__text b, .st-row__text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-row__text b { font-weight: 400; }

.st-row__text small { margin-top: 1px; font-size: 10px; color: var(--app-soft); }

.st-row__size { flex: none; font-size: 12px; color: var(--app-soft); font-variant-numeric: tabular-nums; }

@container (max-width: 700px) {
  .st-mac .st-pick { display: none; }
}

@media (max-width: 1279px) {
  .st-mac .st-side { display: none; }
  .st-mac .st-toggle { left: 88px; }
  .st-mac .st-pane { padding-top: 54px; }
}

@media (max-width: 639px) {
  .st-mac__body { min-height: 0; }
  .st-pane { flex: 1 1 auto; padding: 46px var(--ly-cut-room) 6px 0; border-right: 0; }
  .st-mac .st-row:nth-child(n + 5) { display: none; }
}

/* The menu bar panel (MenuBarView): its header, the card for one app, and the tools,
   running off the bottom of the frame */

.hero__art > .ly-piece--note.st-menu { width: 344px; bottom: -72px; }

.st-menu { display: grid; gap: 10px; padding: 12px; border-radius: 34px; background: rgb(246 247 249 / .78); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 .5px rgb(0 0 0 / .1), 0 24px 50px -24px rgb(16 32 58 / .45); color: var(--app-text); font: 400 12.5px/1.3 var(--app-font); }

.st-menu__head { display: flex; align-items: center; gap: 11px; padding: 2px 2px 0; }

.st-menu__head img { flex: none; width: 44px; height: 44px; }

.st-menu__head > div { flex: 1; min-width: 0; }

.st-menu__head b { display: block; font-size: 15px; font-weight: 600; }

.st-menu__head small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--app-soft); }

.st-more { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--app-quiet); }

.st-more .st-sym { width: 14px; height: 14px; }

.st-panel { padding: 12px; border-radius: 22px; background: var(--app-quiet); }

.st-panel__head { display: flex; align-items: flex-start; gap: 10px; }

.st-panel__head .st-row-icon { width: 34px; height: 34px; }

.st-panel__head > div { flex: 1; min-width: 0; }

.st-panel__head b { display: block; font-size: 14px; font-weight: 600; }

.st-panel__head small { display: block; margin-top: 2px; color: var(--app-soft); font-size: 12.5px; }

.st-x { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--app-quiet); color: var(--app-soft); }

.st-x .st-sym { width: 11px; height: 11px; stroke-width: 2.4; }

.st-sizes { display: grid; gap: 6px; margin-top: 10px; }

.st-sizes div { display: flex; justify-content: space-between; color: var(--app-soft); }

.st-sizes b { color: var(--app-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.st-panel__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

.st-panel__note { margin-top: 10px; color: var(--app-soft); font-size: 11.5px; text-align: center; }

.st-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.st-tool { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border-radius: 25px; background: var(--app-quiet); }

.st-tool > i { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #ffffff; }

.st-tool > i .st-sym { width: 15px; height: 15px; stroke-width: 2; }

.st-tool > div { min-width: 0; }

.st-tool b, .st-tool small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-tool b { font-size: 12.5px; font-weight: 600; }

.st-tool small { font-size: 11.5px; color: var(--app-soft); }

.st-tool--blue { background: var(--app-brand); }

.st-tool--violet { background: var(--app-memory); }

.st-tool--teal { background: #0d99b8; }

.st-tool--orange { background: #de8517; }

/* Below 1024 the panel would cover the window's list, so the window shows alone */

@media (max-width: 1023px) {
  .hero__art > .ly-piece--note.st-menu { display: none; }
}

/* The Apps page, working: sidebar, list and one open app (AppsView) */

.app.ui { position: relative; overflow: hidden; border-radius: 26px; color: var(--app-text); font: 400 13px/1.3 var(--app-font); }

.app__pane--side { display: none; border-right: 1px solid var(--app-line); }

.app > .app__pane--list::after { height: 48px; }

.st-list-head { padding: 34px 20px 0; }

.st-sort { position: relative; flex: 0 0 124px; }

.st-sort .st-sym { position: absolute; top: 8px; right: 10px; width: 12px; height: 12px; color: var(--app-soft); stroke-width: 1.8; pointer-events: none; }

.st-sort select { width: 100%; height: 28px; padding: 0 26px 0 12px; border: 1px solid var(--app-line); border-radius: 99px; background: var(--app-fill); color: var(--app-text); font: 400 13px/1 var(--app-font); appearance: none; cursor: pointer; }

input.st-field { color: var(--app-text); }

input.st-field::placeholder { color: var(--app-soft); opacity: 1; }

.st-apps { display: grid; align-content: start; gap: 2px; margin: 10px 0 0; padding: 0 10px 10px; list-style: none; }

.st-apps li[hidden] { display: none; }

.st-app { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 14px; background: none; color: var(--app-text); font: 400 13px/1.3 var(--app-font); text-align: left; cursor: pointer; transition: background-color 0.15s ease; }

.st-app:hover { background: var(--app-fill); }

.st-app[aria-pressed="true"] { background: rgb(26 115 232 / .18); }

.st-app .st-row-icon { width: 34px; height: 34px; }

.st-app__text { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-app__text small { display: block; margin-top: 1px; overflow: hidden; color: var(--app-soft); font-size: 10px; text-overflow: ellipsis; }

.st-app__size { flex: none; color: var(--app-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

.st-none { margin: 50px 20px; color: var(--app-soft); text-align: center; }

.st-open { display: flex; flex-direction: column; height: 100%; color: var(--app-text); font: 400 13px/1.3 var(--app-font); }

.st-open__scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 34px 24px 24px; scrollbar-width: thin; }

.st-open__head { display: flex; align-items: center; gap: 14px; }

.st-open__head .st-row-icon { width: 60px; height: 60px; }

.st-open__name { flex: 1; min-width: 0; }

.st-open__title { margin: 0; max-width: none; overflow: hidden; color: var(--app-text); font: 700 22px/1.2 var(--app-round); text-overflow: ellipsis; white-space: nowrap; }

.st-open__name small { display: block; margin-top: 4px; color: var(--app-soft); font-size: 10px; }

.st-open__total { flex: none; text-align: right; }

.st-open__total p { margin: 0; max-width: none; color: var(--app-text); font: 600 32px/1.1 var(--app-round); font-variant-numeric: tabular-nums; }

.st-open__total small { display: block; margin-top: 2px; color: var(--app-soft); font-size: 10px; }

.st-group { margin-top: 16px; padding: 8px; border: 1px solid var(--app-line); border-radius: 28px; background: var(--app-fill); }

.st-group > p { margin: 0; max-width: none; padding: 5px 8px; color: var(--app-soft); font-size: 10px; font-weight: 600; }

.st-file { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 14px; cursor: pointer; }

.st-file:hover { background: var(--app-fill); }

.st-file input { flex: none; width: 14px; height: 14px; margin: 0; border-radius: 4px; background: var(--app-box); appearance: none; cursor: pointer; }

.st-file input:checked { background: var(--app-brand) var(--app-check) center / 11px no-repeat; }

.st-file input:focus-visible { outline: 2px solid var(--app-brand); outline-offset: 2px; }

.st-file span { flex: 1; min-width: 0; }

.st-file em, .st-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-file em { font-style: normal; }

.st-file small { margin-top: 1px; color: var(--app-faint); font-size: 10px; }

.st-file b { flex: none; color: var(--app-soft); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }

.st-move { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--app-trash); color: #ffffff; font: 600 13px/1 var(--app-font); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }

.st-move .st-pal { width: 19px; height: 19px; }

.st-move:active { filter: brightness(.9); }

.st-move:disabled { opacity: 0.4; cursor: default; }

.st-toast { position: absolute; z-index: 3; bottom: 78px; left: 50%; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 24px; background: var(--app-frost); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 0 0 .5px var(--app-line), 0 10px 30px -10px rgb(0 0 0 / .3); color: var(--app-text); font-size: 12px; white-space: nowrap; transform: translateX(-50%); }

.st-toast[hidden] { display: none; }

.st-toast > .st-sym { width: 16px; height: 16px; color: var(--app-brand); }

.st-toast > span { overflow: hidden; text-overflow: ellipsis; }

/* The question before anything moves. macOS draws this one itself; the size is real,
   the inside follows the app's words. */

.st-sheet { width: min(260px, calc(100vw - 32px)); margin: auto; padding: 20px 16px 16px; border: 0; border-radius: 24px; background: #f6f6f6; box-shadow: 0 0 0 .5px rgb(0 0 0 / .15), 0 30px 70px -20px rgb(0 0 0 / .45); color: var(--app-text); font: 400 12px/1.35 var(--app-font); text-align: center; }

.st-sheet::backdrop { background: rgb(16 32 58 / .28); }

.st-sheet__title { margin: 0; max-width: none; color: var(--app-text); font-size: 13px; font-weight: 700; }

.st-sheet__note { margin: 6px 0 0; max-width: none; color: var(--app-text); }

.st-sheet__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

.st-sheet .st-pill { width: 100%; height: 28px; font-weight: 500; }

@media (min-width: 1280px) {
  .app.ui { grid-template-columns: 220px 320px minmax(0, 1fr); }
  .app__pane--side { display: block; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .app.ui { grid-template-columns: 320px minmax(0, 1fr); }
  .app .st-toggle { left: 88px; }
}

@media (min-width: 1024px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: flex; flex-direction: column; }
  .st-apps { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
}

/* When the panes stack, the open app shows whole instead of scrolling in a box */

@media (max-width: 1023px) {
  #apps .app.ui.fill { flex: none; }
  .app.ui { grid-template-rows: auto auto; }
  .app .st-toggle { left: 88px; }
  .st-open { height: auto; }
  .st-open__scroll { flex: none; overflow: visible; }
}

@media (max-width: 639px) {
  .st-list-head { display: none; }
  .app .st-lights, .app .st-toggle { display: none; }
  .st-apps { margin: 0; padding: 8px 6px; }
  .st-open__scroll { padding: 18px 14px 12px; }
  .st-open__head { gap: 10px; }
  .st-open__head .st-row-icon { width: 44px; height: 44px; }
  .st-open__title { font-size: 18px; }
  .st-open__total p { font-size: 22px; }
  .st-open__name small, .st-open__total small, .st-group > p, .st-file small, .st-foot__words small { font-size: 11px; }
  .st-foot--bar { flex-wrap: wrap; margin: 0 14px 14px; padding: 10px 12px; border-radius: 24px; }
  .st-foot__words { flex-basis: 100%; }
  .st-foot--bar .st-pill, .st-foot--bar .st-move { flex: 1 1 auto; height: 44px; }
  .st-toast { bottom: 134px; }
}

/* The small cards: the top of one real screen each, cut off by the panel's bottom edge */

.open-cards .stage > .at-rise { --ax: 14px; --ay: 16px; --fit-max: none; bottom: 0; }

.st-mini { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 12px 0; overflow: hidden; border-radius: 22px 22px 0 0; background: var(--app-bg); box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 14px 32px -18px rgb(0 0 0 / .35); color: var(--app-text); font: 400 12.5px/1.3 var(--app-font); text-align: left; }

.st-mini__title { flex: none; padding: 0 4px; font: 700 20px/1.15 var(--app-round); }

.st-mini__sub { flex: none; margin: -3px 0 4px; padding: 0 4px; color: var(--app-soft); font-size: 10.5px; }

.st-card { display: flex; flex: none; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 22px; background: var(--app-fill); }

.st-line { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border-radius: 12px; }

.st-line__text { flex: 1; min-width: 0; }

.st-line__text b, .st-line__text small { display: block; }

.st-line .st-line__text b, .st-line .st-line__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-line__text b { font-weight: 400; }

.st-card .st-line__text b { font-weight: 600; }

.st-card--removed .st-line__text b { font-weight: 400; }

.st-line__text small { margin-top: 1px; color: var(--app-soft); font-size: 10.5px; }

.st-line__size { flex: none; color: var(--app-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.st-card .st-line__size { color: var(--app-text); }

.st-link { flex: none; color: var(--app-brand); font-size: 10.5px; }

.st-sym--blue { width: 17px; height: 17px; color: var(--app-brand); }

.st-file-icon { flex: none; width: 26px; height: 26px; }

.st-set { display: grid; flex: none; gap: 2px; padding: 5px; border: 1px solid var(--app-line); border-radius: 22px; background: var(--app-fill); }

.st-mini .st-pill { height: 22px; padding: 0 10px; font-size: 12px; }

.st-mini:has(> .st-foot--float:not([hidden]))::after { content: ""; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, var(--app-bg) 70%); pointer-events: none; }

.st-foot--float { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 24px; }

.st-mini .st-foot--float .st-pill--trash { height: 28px; padding: 0 12px; gap: 5px; font-size: 12px; }

.st-foot--float .st-pal { width: 16px; height: 16px; }

/* The note that appears when an app is dragged to the Trash (LeftoverPrompt), at its real size */

.open-cards .stage > .at-rise:has(> .st-offer) { bottom: auto; top: 50%; transform: translateY(-50%); }

.stage > .fit > .ui.st-offer { max-width: 320px; }

.st-offer { display: flex; align-items: flex-start; gap: 12px; width: 100%; max-width: 320px; margin-inline: auto; padding: 18px; border-radius: 28px; background: rgb(255 255 255 / .74); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 .5px rgb(0 0 0 / .1), 0 14px 32px -18px rgb(0 0 0 / .35); color: var(--app-text); font: 400 12px/1.3 var(--app-font); text-align: left; }

.st-offer > img { flex: none; width: 44px; height: 44px; }

.st-offer__title { font-weight: 600; }

.st-offer__note { margin-top: 4px; color: var(--app-soft); font-size: 10px; }

.st-offer__btns { display: flex; gap: 8px; margin-top: 8px; }

.st-offer .st-pill { height: 30px; padding: 0 13px; font-size: 12.5px; }

/* How your Mac is doing (MacStatsView): its line, and the tops of two charts */

.st-health { display: flex; flex: none; align-items: flex-start; gap: 10px; padding: 0 4px; }

.st-dot { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--app-brand); box-shadow: 0 0 5px rgb(26 115 232 / .6); }

.st-health .st-line__text b { font-weight: 600; }

.st-stats { display: flex; flex: none; gap: 10px; color: var(--app-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.st-stats span { display: inline-flex; align-items: center; gap: 4px; }

.st-stats .st-sym { width: 15px; height: 15px; }

.st-stats-grid { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; }

.st-stat { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--app-line); border-radius: 22px; background: var(--app-fill); }

.st-stat__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }

.st-stat__top b { color: var(--app-soft); font-size: 11.5px; font-weight: 600; }

.st-stat__top small, .st-big small { color: var(--app-soft); font-size: 9.5px; white-space: nowrap; }

.st-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }

.st-big b { font: 600 26px/1.1 var(--app-round); font-variant-numeric: tabular-nums; white-space: nowrap; }

.st-spark { display: block; width: 100%; height: 64px; margin-top: 2px; }

.st-spark__line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.st-spark--cpu { color: var(--app-brand); }

.st-spark--cpu .st-spark__area { fill: url(#st-g-cpu); }

.st-spark--memory { color: var(--app-memory); }

.st-spark--memory .st-spark__area { fill: url(#st-g-memory); }

.st-cores { display: flex; gap: 3px; height: 20px; }

.st-cores > i { position: relative; flex: 1; overflow: hidden; border-radius: 6px; background: var(--app-line); }

.st-cores > i > i { position: absolute; inset: auto 0 0; background: var(--app-brand); }

.st-stack { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 99px; background: var(--app-line); }

.st-stack > i { border-radius: 99px; background: var(--app-memory); }

.st-stack > i.st-stack--system, .st-legend i.st-stack--system { background: #e8708c; }

.st-stack > i.st-stack--squeezed { background: #f5c452; }

.st-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--app-soft); font-size: 9.5px; }

.st-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.st-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-memory); }

.st-legend b { color: var(--app-text); font-weight: 400; }

/* Tablets: the small cards start higher in their shorter panels */

@media (min-width: 640px) and (max-width: 1023px) {
  .open-cards .stage > .at-rise { --ay: 12px; }
}

/* Small cards at their narrowest: the words go before the sizes do */

@media (min-width: 1024px) and (max-width: 1279px) {
  .open-cards .stage > .at-rise { --ax: 10px; }
  .st-link, .st-stats span:last-child, .st-file-icon, .st-foot--float .st-foot__words small, .st-stat__top small { display: none; }
  .st-big b { font-size: 21px; }
}

/* Shorter panels: the cleaning pages keep their rows clear of the bar */

@media (max-width: 1023px) {
  .st-mini:has(> .st-foot--float:not([hidden])) .st-mini__sub { display: none; }
  .st-stats span:last-child { display: none; }
}

@container (max-width: 300px) {
  .st-file-icon, .st-sym--blue { display: none; }
  .st-foot--float .st-foot__words small { display: none; }
}

/* Running Now, with one app picked (ActivityView). A piece of the window, without its sidebar */

.st-win { position: relative; overflow: hidden; border-radius: 26px; color: var(--app-text); font: 400 13px/1.3 var(--app-font); }

/* The page tabs sit in the window's toolbar, level with its close/minimize/zoom buttons */
.st-win > div { padding: 11px 0 0; }

.st-tabs { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--app-line); border-radius: 99px; background: var(--app-fill); font-size: 12px; font-weight: 500; }

.st-tabs span { padding: 5px 14px; border-radius: 99px; white-space: nowrap; }

.st-tabs .is-on { background: var(--app-brand); color: #ffffff; }

.st-tabs--page { margin-left: 24px; }

.st-win__head { display: flex; align-items: center; gap: 14px; padding: 23px 24px 12px; }

.st-win__title { flex: 1 1 auto; min-width: 0; }

.st-win__title .st-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-field--search { flex: 0 1 200px; min-width: 64px; }

.st-cols { display: flex; align-items: center; margin: 0 12px; padding: 7px 12px; border: 1px solid var(--app-line); border-radius: 99px; background: rgb(255 255 255 / .8); color: var(--app-soft); font-size: 10px; font-weight: 500; }

.st-cols > span:first-child { flex: 1; }

.st-cols__cpu { width: 132px; text-align: right; }

.st-cols b { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; width: 86px; color: var(--app-text); font-weight: 600; }

.st-sym--down { width: 9px; height: 9px; stroke-width: 2.6; }

.st-procs { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }

.st-proc { display: flex; align-items: center; margin: 0 12px; padding: 5px 12px; border-radius: 14px; }

.st-proc.is-on { background: rgb(26 115 232 / .18); }

.st-chev { width: 14px; height: 14px; margin-right: 8px; padding: 2px; color: var(--app-soft); stroke-width: 2.4; }

.st-proc .st-row-icon { width: 24px; height: 24px; margin-right: 8px; }

.st-proc__name { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }

.st-proc__name b { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.st-proc__name small { flex: none; color: var(--app-faint); font-size: 10px; font-variant-numeric: tabular-nums; }

.st-proc__cpu { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px; width: 132px; }

.st-proc__cpu .st-bar { width: 58px; }

.st-proc__cpu span { width: 50px; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.st-proc__mem { flex: none; width: 86px; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.st-win .st-foot--bar { margin: 8px 24px 14px; }

.st-win .st-foot--bar b { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.st-win .st-foot--bar .st-row-icon { width: 22px; height: 22px; }

@container ui-win (max-width: 580px) {
  .st-field--search { display: none; }
}

@container ui-win (max-width: 480px) {
  .st-proc__cpu .st-bar, .st-pill--finder { display: none; }
  .st-proc__cpu, .st-cols__cpu { width: 56px; }
  .st-proc__mem, .st-cols b { width: 70px; }
  .st-tabs :is(span, button) { padding-inline: 10px; }
}

@container ui-win (max-width: 380px) {
  .st-win__head .st-tabs, .st-chev { display: none; }
  .st-win .st-foot--bar b, .st-win .st-foot--bar .st-row-icon { display: none; }
  .st-win .st-foot--bar { justify-content: flex-end; }
  .st-win .st-foot--bar .st-pill { flex: 1; }
  .st-tabs--page :is(span, button) { padding-inline: 8px; }
}

#speed .stage > .at-corner { top: 50%; bottom: auto; transform: translateY(-50%); }

@media (max-width: 1023px) {
  #speed .frame--split { aspect-ratio: auto; height: 560px; }
}

@media (max-width: 639px) {
  #speed .frame--split { height: 470px; }
  #speed .stage > .at-corner { left: 12px; right: 12px; --ax: 12px; }
}

/* The samples, working (demo.js). The script takes each picture over and these rules
   style what it adds, so without the script the pictures stay as they are. Words and
   steps follow the app; things a web page can't do on a Mac (open Finder or System
   Settings) say so in a toast instead. */

:root {
  --app-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-demo] :is(button, input):focus-visible { outline: 2px solid var(--app-brand); outline-offset: 2px; }

button.st-pill:disabled { opacity: .4; cursor: default; }

button.st-pill:not(:disabled):active { filter: brightness(.92); }

.st-foot[hidden] { display: none; }

.st-gear { display: grid; flex: none; place-items: center; border-radius: 24%; background: var(--app-line); color: var(--app-faint); }

.st-gear .st-sym { width: 54%; height: 54%; }

.st-box { flex: none; width: 14px; height: 14px; margin: 0; border-radius: 4px; background: var(--app-box); appearance: none; cursor: pointer; }

.st-box:checked { background: var(--app-brand) var(--app-check) center / 11px no-repeat; }

.st-box:indeterminate { background: var(--app-brand) var(--app-dash) center / 11px no-repeat; }

/* The small cleaning pages: rows scroll above the glass bar */

.st-mini__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-height: 0; margin: 0 -12px; padding: 0 12px 64px; overflow-y: auto; scrollbar-width: none; }

.st-mini__body::-webkit-scrollbar { display: none; }

.st-card--group { flex-direction: column; align-items: stretch; gap: 4px; }

.st-card__head { display: flex; align-items: center; gap: 8px; min-width: 0; }

button.st-link { padding: 0; border: 0; background: none; font: inherit; font-size: 10.5px; cursor: pointer; }

.st-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 0 2px 22px; cursor: pointer; }

.st-item .st-line__text b, .st-item .st-line__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-card .st-item .st-line__text b { font-size: 12px; font-weight: 400; }

.st-card .st-item .st-line__size { color: var(--app-soft); font-size: 10.5px; }

label.st-line { cursor: pointer; }

label.st-line:hover { background: var(--app-fill); }

.st-palmsg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px 0; text-align: center; }

.st-palmsg img { width: 52px; height: 52px; margin-bottom: 4px; }

.st-palmsg b { font-size: 13px; font-weight: 600; }

.st-palmsg p { margin: 0; max-width: 250px; color: var(--app-soft); font-size: 11.5px; line-height: 1.35; }

.st-mini > .st-toast { bottom: 12px; padding: 8px 14px; font-size: 11.5px; }

.st-offer { transition: opacity .25s ease, translate .25s ease; }

.st-offer.is-away { opacity: 0; translate: 0 10px; }

/* Home in one window: Overview, Running Now and Opens at Login */

/* One height for every tab, so switching doesn't jump: 440 points, less on a short frame */

#speed .stage > .at-corner:has(> .st-win.is-live) { height: min(440px, calc(100% - 40px)); }

.st-win.is-live { height: 100%; }

.st-win.is-live > div { display: flex; flex-direction: column; height: 100%; }

.st-win.is-live .st-tabs--page { align-self: flex-start; }

.st-win__page { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }

.st-win__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 24px 18px; scrollbar-width: none; }

.st-win__scroll::-webkit-scrollbar { display: none; }

:where(.st-tabs) button { padding: 5px 14px; border: 0; border-radius: 99px; background: none; color: var(--app-text); font: inherit; white-space: nowrap; cursor: pointer; }

.st-tabs button[aria-pressed="true"] { background: var(--app-brand); color: #ffffff; }

.st-tabs button:not([aria-pressed="true"]):hover { background: var(--app-fill); }

.st-win > .st-toast { bottom: 74px; }

.st-cols button { display: inline-flex; flex: none; align-items: center; justify-content: flex-end; gap: 3px; padding: 0; border: 0; background: none; color: var(--app-soft); font: inherit; cursor: pointer; }

.st-cols button.is-on { color: var(--app-text); font-weight: 600; }

.st-cols button.st-cols__name { flex: 1; justify-content: flex-start; }

.st-cols .st-cols__mem { width: 86px; }

.st-cols .st-cols__disk { width: 92px; }

.st-cols .st-cols__user { flex: none; width: 72px; text-align: right; }

.st-win.is-live .st-procs { flex: 1 1 auto; align-content: start; min-height: 0; overflow-y: auto; padding: 2px 0 6px; scrollbar-width: none; }

.st-win.is-live .st-procs::-webkit-scrollbar { display: none; }

.st-procs:focus { outline: none; }

.st-win.is-live .st-proc { padding: 0 12px; cursor: pointer; }

.st-win.is-live .st-proc:not(.is-on):hover { background: var(--app-fill); }

.st-chev-btn { display: grid; flex: none; place-items: center; width: 14px; height: 20px; margin-right: 8px; padding: 0; border: 0; background: none; color: var(--app-soft); cursor: pointer; }

.st-chev-btn .st-sym { width: 10px; height: 10px; stroke-width: 2.6; transition: rotate .15s ease; }

.st-chev-btn.is-open .st-sym { rotate: 90deg; }

.st-chev-btn:disabled { visibility: hidden; }

.st-proc__pick { display: flex; flex: 1; align-items: center; min-width: 0; padding: 5px 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }

.st-proc .st-gear { margin-right: 8px; }

.st-proc--part .st-proc__pick { padding-left: 30px; }

.st-proc--part .st-proc__name b { color: var(--app-soft); font-size: 12.5px; }

.st-bar > i.is-hot { background: var(--app-trash); }

.st-proc__disk, .st-proc__user { display: none; flex: none; text-align: right; font-variant-numeric: tabular-nums; }

.st-win.is-everything .st-proc__disk { display: block; width: 92px; color: var(--app-soft); font-size: 12px; }

.st-win.is-everything .st-proc__user { display: block; width: 72px; color: var(--app-faint); font-size: 10px; }

.st-win.is-everything .st-proc__cpu .st-bar { display: none; }

.st-win.is-everything :is(.st-proc__cpu, .st-cols__cpu) { width: 64px; }

.st-none--procs { margin: 40px 20px; }

.st-win.is-live .st-foot--bar { margin: 6px 24px 14px; }

.st-win .st-foot--bar .st-foot__words { flex: 1; min-width: 0; }

.st-ov, .st-ov-mem, .st-login-card { border: 1px solid var(--app-line); border-radius: 28px; background: var(--app-fill); }

.st-ov { padding: 18px; }

.st-ov__top { display: flex; align-items: center; gap: 14px; }

.st-ov__top > img { flex: none; width: 64px; height: 64px; }

.st-ov__top > div { flex: 1; min-width: 0; }

.st-ov__head { margin: 0; max-width: none; color: var(--app-text); font: 700 22px/1.15 var(--app-round); }

.st-ov__sub { margin: 3px 0 0; max-width: none; color: var(--app-soft); font-size: 12px; }

.st-pill--strong { height: 30px; padding: 0 14px; font-weight: 500; }

.st-bar--storage { height: 8px; margin-top: 14px; }

.st-ov__free { margin: 6px 0 0; max-width: none; color: var(--app-soft); font-size: 10px; }

.st-ov-mem { margin-top: 12px; padding: 16px 18px; }

.st-ov-mem > p { margin: 0 0 4px; max-width: none; color: var(--app-soft); font-size: 11.5px; font-weight: 600; }

.st-ov-row { display: flex; align-items: center; gap: 11px; margin-top: 9px; }

.st-ov-row > span:not(.st-gear) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-ov-row .st-bar { flex: none; width: 110px; }

.st-bar--memory > i { background: var(--app-memory); }

.st-ov-row b { flex: none; width: 64px; font-size: 12px; font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }

.st-login__head { display: flex; align-items: flex-start; gap: 12px; }

.st-login__head > div { flex: 1; min-width: 0; }

.st-login-card { margin-top: 12px; padding: 6px; }

.st-login-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }

.st-login-row .st-line__text b, .st-login-row .st-line__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-login-row .st-line__text b { font-size: 13px; }

.st-login-row .st-line__text small { font-size: 10px; }

.st-login__label { margin: 16px 0 0; max-width: none; color: var(--app-text); font-size: 12px; font-weight: 600; }

.st-login__note { margin: 4px 0 0; max-width: none; color: var(--app-soft); font-size: 10px; }

/* The switch is the system's small one, tinted with the app's blue */

.st-switch { position: relative; flex: none; width: 32px; height: 18px; padding: 0; border: 0; border-radius: 99px; background: rgb(0 0 0 / .12); cursor: pointer; transition: background-color .15s ease; }

.st-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 14px; border-radius: 99px; background: #ffffff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .25); transition: translate .15s ease; }

.st-switch[aria-checked="true"] { background: var(--app-brand); }

.st-switch[aria-checked="true"]::after { translate: 8px 0; }

@container ui-win (max-width: 560px) {
  .st-win.is-everything :is(.st-proc__disk, .st-proc__user), .st-cols :is(.st-cols__disk, .st-cols__user) { display: none; }
  .st-ov-row .st-bar { width: 70px; }
}

@container ui-win (max-width: 480px) {
  .st-ov__top { flex-wrap: wrap; }
  .st-ov__top > img { width: 44px; height: 44px; }
  .st-ov__top > div { flex-basis: calc(100% - 58px); }
  .st-ov__top > button { flex: 1 1 100%; height: 36px; }
  .st-ov__head { font-size: 18px; }
  .st-ov-row .st-bar { display: none; }
  .st-login__head { flex-direction: column; }
  .st-win__scroll { padding-inline: 14px; }
}

@container ui-win (max-width: 380px) {
  .st-win .st-foot--bar .st-foot__words, .st-win .st-foot--bar .st-gear { display: none; }
  .st-chev-btn { display: none; }
  .st-proc--part .st-proc__pick { padding-left: 8px; }
  .st-win.is-live .st-tabs--page { margin-left: 14px; }
}

@media (max-width: 639px) {
  #speed .stage > .at-corner:has(> .st-win.is-live) { height: min(420px, calc(100% - 40px)); }
}

@media (prefers-reduced-motion: reduce) {
  .st-offer, .st-switch, .st-switch::after, .st-chev-btn .st-sym { transition: none; }
}