/*
 * The story and "Try it here", under the simulator (story.js): a sticky stage with the step's words
 * beside the right edge of the Mac, which plays each step and can be used, then three tiles to play
 * with. Every part inside is the popover's own component in its tokens (.lv-kit, demo.css); this
 * file only lays them out and adds what the story and the tiles need.
 */

/* ------------------------------------------------------------ The section */

.story { display: block; padding: 120px 0 0; text-align: left; }
.story h3 { margin: 0; }

/* ------------------------------------------------------------ The story
 * The stage (the words and the panel) holds still, centred under the navbar (story.js sets --st-top),
 * while the run below it scrolls past; how far the run has gone picks the step (story.js), each step
 * getting only the scroll its change needs. The stage is as tall as the panel, so the page goes on
 * right under it once the run is done. The words sit in one cell, centred on
 * the panel. Going down, the old title and line slide up and fade out quickly, then the new ones
 * rise in from below, title first; going up, the reverse. One text is readable at a time. */

.st-story { position: relative; width: var(--content); margin: 0 auto; }
.st-stage {
	position: sticky;
	top: var(--st-top, calc(64px + env(safe-area-inset-top)));
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
	column-gap: 48px;
	align-items: center;
}
/* 50 + 40 + 40 + 15: the steps' shares in story.js (SEG). */
.st-run { height: 145svh; }
.st-copy { --st-ease: cubic-bezier(.2, .85, .25, 1); display: grid; align-items: center; }
.st-step { grid-area: 1 / 1; }
.st-step h3 { font-size: clamp(28px, 3.1vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
.st-step p { max-width: 460px; margin-top: 16px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); text-wrap: pretty; }
.js .st-step { visibility: hidden; transition: visibility 0s .34s; }
.js .st-step.is-on { visibility: visible; transition: none; }
.js .st-step > * { opacity: 0; transform: translateY(28px); transition: opacity .18s cubic-bezier(0, 0, .2, 1), transform .34s var(--st-ease); }
.js .st-step.is-past > * { transform: translateY(-28px); }
.js .st-step > p { transition-delay: .03s; }
.js .st-step.is-on > * { opacity: 1; transform: none; transition: opacity .28s var(--st-ease) .2s, transform .4s var(--st-ease) .16s; }
.js .st-step.is-on > p { transition-delay: .26s, .22s; }
/* Without scripts: the words in a column, and no stage to hold. */
html:not(.js) .st-stage { position: static; height: auto; display: block; }
html:not(.js) .st-step { padding: 24px 0; }
html:not(.js) .st-pin, html:not(.js) .st-run { display: none; }

.st-pin {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* The panel: the right part of the Mac's screen (the menu bar's end, Levo's popover under it, and
   to its left the wallpaper and a Finder window's edge), laid out as wide as its column allows
   (story.js sets --w, --h and --s) and scaled as a whole to fit, its right edge on the page's. */
.st-frame {
	position: relative;
	flex: none;
	width: calc(var(--w, 420px) * var(--s, 1));
	height: calc(var(--h, 600px) * var(--s, 1));
	border-radius: var(--win-r);
	overflow: hidden;
	box-shadow: var(--lift);
	background: var(--bt-tile);
}
.st-scr {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--w, 420px);
	height: var(--h, 600px);
	transform: scale(var(--s, 1));
	transform-origin: 0 0;
	overflow: hidden;
}
.st-scr .lv-menubar { z-index: 8; height: 28px; padding: 0 8px; justify-content: flex-end; font-size: 13px; }
.st-scr .lv-mb-btn { font-size: 13px !important; padding: 0 8px; }
.st-scr .lv-mb-item { padding: 0 6px; }
.st-scr .lv-mb-levo { padding: 0 8px; color: inherit; font: inherit; cursor: pointer; }
.st-scr .lv-mb-levo.is-open { background: rgb(var(--fg) / 0.12); }
html.dark .st-scr .lv-mb-levo.is-open { background: rgba(255, 255, 255, 0.2); }

/* The window behind the popover (story.js): A, a Finder window on ~/Library/Developer; B (?bg=storage),
   System Settings' Storage. As macOS Tahoe draws them: a glass sidebar inset in the window, a toolbar
   of glass capsules, the system font. The popover covers its right side, except while the alert
   shows with the popover shut. */
.st-win {
	position: absolute;
	z-index: 1;
	top: 60px;
	left: 20px;
	width: 730px;
	height: 430px;
	display: none;
	box-sizing: border-box;
	padding: 8px;
	gap: 0;
	border-radius: 22px;
	background: rgba(252, 252, 253, 0.94);
	box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 30px 70px -18px rgba(0, 0, 0, 0.32), 0 8px 20px -10px rgba(0, 0, 0, 0.16);
	color: rgb(var(--fg) / 0.88);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.2;
	overflow: hidden;
	text-align: left;
}
html.dark .st-win { background: rgba(32, 32, 35, 0.95); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.7), 0 30px 70px -18px rgba(0, 0, 0, 0.7); }
.st-scr.has-win .st-win { display: flex; }
.st-side { flex: none; width: 168px; box-sizing: border-box; padding: 10px 8px; border-radius: 15px; background: rgba(236, 236, 240, 0.72); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); overflow: hidden; }
html.dark .st-side { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); }
.st-lights { display: flex; gap: 8px; padding: 2px 4px 14px; }
.st-lights i { width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--fg) / 0.16); }
.st-side-h { padding: 10px 8px 4px; font-size: 11px; font-weight: 600; color: rgb(var(--fg) / 0.45); }
.st-side-i { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; border-radius: 7px; white-space: nowrap; }
.st-side-i .lv-sym { flex: none; width: 15px; color: #0A84FF; }
.st-fd-main, .st-st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-fd-tb { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 12px; }
.st-fd-tb b { font-size: 15px; font-weight: 700; }
.st-cap { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px; border-radius: 15px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); color: rgb(var(--fg) / 0.75); }
html.dark .st-cap { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.st-cap .lv-sym, .st-cap i { display: grid; place-items: center; width: 26px; height: 24px; border-radius: 12px; font-style: normal; }
.st-views i.is-on { background: rgb(var(--fg) / 0.1); }
.st-fd-cols, .st-fd-row { display: grid; grid-template-columns: 188px 148px 72px 1fr; align-items: center; padding: 0 10px; white-space: nowrap; }
.st-fd-cols { flex: none; height: 26px; font-size: 11px; font-weight: 500; color: rgb(var(--fg) / 0.5); border-bottom: 0.5px solid rgb(var(--fg) / 0.1); }
.st-fd-cols span + span, .st-fd-row > span + span { padding-left: 8px; }
.st-fd-cols span:nth-child(3), .st-fd-row > span:nth-child(3) { text-align: right; padding-right: 6px; }
.st-fd-rows { flex: 1; min-height: 0; overflow: hidden; padding: 2px 0; }
.st-fd-row { height: 26px; margin: 0 2px; border-radius: 6px; }
.st-fd-row:nth-child(even) { background: rgb(var(--fg) / 0.03); }
.st-fd-row.is-sel { background: rgb(var(--fg) / 0.1); }
.st-fd-row > span + span { color: rgb(var(--fg) / 0.55); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.st-fd-name { display: flex; align-items: center; gap: 5px; min-width: 0; padding-left: calc(var(--lvl, 0) * 18px); }
.st-fd-name > span { overflow: hidden; text-overflow: ellipsis; }
.st-disc { flex: none; display: grid; place-items: center; width: 12px; color: rgb(var(--fg) / 0.5); font-style: normal; }
.st-disc.is-open .lv-sym { transform: rotate(90deg); }
.st-fold { flex: none; display: block; }
.st-fd-path { flex: none; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-top: 0.5px solid rgb(var(--fg) / 0.1); font-size: 11px; color: rgb(var(--fg) / 0.6); white-space: nowrap; overflow: hidden; }
.st-fd-path .lv-sym { flex: none; color: rgb(var(--fg) / 0.45); }
.st-fd-path .st-fold { width: 13px; height: 11px; }

/* C: macOS's alert, as Tahoe draws one: centred, the icon over the bold title, the line, then two
   capsule buttons, the default one blue. Half beside the popover, half behind it. */
.st-win.st-al { top: 150px; left: 186px; width: 272px; height: auto; flex-direction: column; align-items: center; padding: 22px 16px 16px; border-radius: 26px; text-align: center; }
.st-al-ic { display: block; margin-bottom: 10px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)); }
.st-al b { font-size: 13px; font-weight: 700; }
.st-al > span { margin-top: 6px; font-size: 11px; line-height: 1.35; color: rgb(var(--fg) / 0.8); }
.st-al-btns { display: flex; gap: 8px; align-self: stretch; margin-top: 16px; }
.st-al-btns span { flex: 1; display: grid; place-items: center; height: 28px; border-radius: 14px; background: rgb(var(--fg) / 0.08); font-size: 13px; font-weight: 500; }
.st-al-btns .is-def { background: #0A84FF; color: #fff; }

/* System Settings, General, Storage: the page's. Low in the screen, so its disk bar and key sit
   under the popover at every step (the popover reaches 564 at most); the window runs off the
   screen's bottom edge. */
.st-win.st-st { top: 520px; height: 474px; width: 700px; }
.st-st-side { width: 190px; }
.st-st-search { display: flex; align-items: center; gap: 6px; height: 26px; margin: 0 4px 8px; padding: 0 8px; border-radius: 8px; background: rgb(var(--fg) / 0.06); color: rgb(var(--fg) / 0.45); font-size: 12px; }
.st-st-me { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; }
.st-st-me .lv-sym { flex: none; color: rgb(var(--fg) / 0.35); }
.st-st-me b { display: block; font-size: 12px; font-weight: 600; }
.st-st-me small { display: block; font-size: 11px; color: rgb(var(--fg) / 0.5); }
.st-st-i { height: 26px; }
.st-st-i.is-sel { background: #0A84FF; color: #fff; }
.st-st-ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; }
.st-st-ic .lv-sym { color: #fff !important; width: 12px; }
.st-st-main { padding: 0 6px 0 12px; }
.st-st-card { flex: none; margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: rgb(var(--fg) / 0.035); box-shadow: inset 0 0 0 0.5px rgb(var(--fg) / 0.08); }
.st-st-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.st-st-top b { font-size: 13px; font-weight: 600; }
.st-st-top span { margin-left: auto; font-size: 12px; color: rgb(var(--fg) / 0.55); white-space: nowrap; }
.st-st-bar { display: flex; gap: 1.5px; height: 20px; border-radius: 6px; overflow: hidden; background: rgb(var(--fg) / 0.06); }
.st-st-bar i { display: block; min-width: 2px; }
.st-st-bar .st-st-free { background: transparent; }
.st-st-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-size: 11px; color: rgb(var(--fg) / 0.7); }
.st-st-key span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.st-st-key i { width: 8px; height: 8px; border-radius: 50%; }
.st-st-list { padding: 4px 14px; }
.st-st-row { display: flex; align-items: center; gap: 9px; height: 32px; border-top: 0.5px solid rgb(var(--fg) / 0.08); white-space: nowrap; }
.st-st-row:first-child { border-top: 0; }
.st-st-row > span:nth-child(3) { margin-left: auto; color: rgb(var(--fg) / 0.55); font-variant-numeric: tabular-nums; }
.st-st-row > .lv-sym { flex: none; color: rgb(var(--fg) / 0.35); }

/* The popover and the notification share the same edges: 12 px in from the screen's right, 360 wide. */
.st-popat {
	position: absolute;
	z-index: 5;
	top: 36px;
	right: 12px;
	width: 360px;
	transform-origin: 70% 0;
	transition: opacity .2s, transform .28s var(--ease-out), visibility 0s;
}
.st-popat.is-shut { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transition: opacity .18s, transform .22s var(--ease-out), visibility 0s .22s; }
.st-pop { width: 360px; box-shadow: inset 0 0 0 1px var(--pop-rim), 0 28px 70px -18px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.22); }
.st-scr .lv-note { z-index: 9; top: 36px; right: 12px; width: 360px; border-radius: 20px; cursor: pointer; font: inherit; color: inherit; }

/* The list grows open once the alert has been opened. */
.st-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.st-list > div { overflow: hidden; min-height: 0; }
.st-scr.is-list .st-list { grid-template-rows: 1fr; }
.st-list .lv-sh { margin: 0; padding: 12px 16px 6px; }
.st-ssum { padding: 12px 16px; min-height: 66px; box-sizing: border-box; }
.st-list .lv-dd { border: 0; background: transparent; cursor: pointer; }
.st-list .lv-dd.is-open { background: rgb(var(--fg) / 0.08); }
@media (hover: hover) and (pointer: fine) { .st-list .lv-dd:hover { background: rgb(var(--fg) / 0.08); } }
.st-list .lv-ask { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .st-list .lv-ask:hover { background: rgb(var(--fg) / 0.08); } }
.st-rows { padding: 0 0 8px; }

/* A row as the app's: tick, icon, title over its count line, size, chevron. Click to tick or untick.
   While the agent checks it, a spinner takes the tick's place. */
.st-row.lv-row { width: calc(100% - 16px); margin: 0 8px; height: 44px; max-height: 44px; border: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color .2s, max-height .45s var(--ease-out), height .45s var(--ease-out), opacity .3s, padding .45s var(--ease-out), margin .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .st-row.lv-row:hover { background: rgb(var(--fg) / 0.05); } }
.st-row .lv-gtext { min-width: 0; }
.st-row .lv-title { white-space: nowrap; }
.st-cbspin { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.st-cbspin .lv-spin { width: 8px; height: 8px; border-width: 1.5px; }

/* The row's hover, as macOS draws a tooltip: small, plain, a line each (why it waits, the agent's
   call, where), under the pointer. */
.st-help {
	position: absolute;
	z-index: 7;
	left: 0;
	top: 0;
	max-width: 250px;
	padding: 5px 8px;
	border-radius: 7px;
	background: #F4F4F5;
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 6px 16px -4px rgba(0, 0, 0, 0.22);
	color: rgba(0, 0, 0, 0.85);
	font-size: 11px;
	line-height: 1.35;
	display: flex;
	flex-direction: column;
	gap: 1px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
}
html.dark .st-help { background: #2E2E31; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 6px 16px -4px rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.88); }
.st-help.is-in { opacity: 1; }
.st-help span:last-child:not(:first-child) { color: rgb(var(--fg) / 0.55); }
/* The pointer, hovering for the agent; it glides from row to row. */
.st-ptr { position: absolute; z-index: 8; left: 0; top: 0; pointer-events: none; opacity: 0; transition: transform .45s var(--ease-out), opacity .2s; }
.st-ptr path { fill: #000; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.st-ptr.is-in { opacity: 1; }
.st-row.is-sel { background: rgb(var(--sel) / 0.07); }
.st-row.is-going { height: 0; max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }
.st-row.is-off .lv-size { color: rgb(var(--fg) / 0.45); }
.st-agent { display: inline-flex; align-items: center; gap: 6px; color: rgb(var(--fg) / 0.7); font-weight: 500; }
.st-agent .lv-tile { width: 16px; height: 16px; border-radius: 4px; }
.st-agent .lv-tile .lv-sym { width: 9.6px; max-height: 9.6px; }
.st-pop .lv-primary, .st-pop .lv-kbtn { cursor: pointer; }
.st-pop .lv-primary:disabled { opacity: .45; cursor: default; }
@media (hover: hover) and (pointer: fine) { .st-pop .lv-primary:not(:disabled):hover, .st-pop .lv-kbtn:hover { background: rgb(var(--fg) / 0.08); } }
.st-pop .lv-mitem { cursor: pointer; }

/* The disk bar's parts, in the app's colours (Your Data, System Data, Apps, Ready, Free). */
.st-kit .lv-tick { transition: background-color .3s ease; }
.st-kit .lv-tick.is-data { background-color: #FF3B30; }
.st-kit .lv-tick.is-sys { background-color: #F2B800; }
.st-kit .lv-tick.is-apps { background-color: #FF9500; }
html.dark .st-kit .lv-tick.is-data { background-color: #FF453A; }
html.dark .st-kit .lv-tick.is-sys { background-color: #FFD60A; }
html.dark .st-kit .lv-tick.is-apps { background-color: #FF9F0A; }
.st-kit .lv-tick.is-ready { background-color: var(--lv-ready); }
.st-kit .lv-tick.is-free { background-color: rgb(var(--fg) / 0.14); }
.st-kit .lv-can:empty { display: none; }

/* The confirm sheet over the popover; a row unticks with a click. */
.st-pop .lv-scrim { z-index: 9; }
.st-pop .lv-sheet.lv-bsheet { z-index: 10; }
.st-pop .lv-confirm .lv-clist { max-height: none; }
.st-pop .lv-crow { width: 100%; border: 0; background: transparent; border-radius: 8px; text-align: left; cursor: pointer; transition: background-color .2s, opacity .25s; }
.st-pop .lv-crow.is-press { background: rgb(var(--fg) / 0.08); }
@media (hover: hover) and (pointer: fine) { .st-pop .lv-crow:hover { background: rgb(var(--fg) / 0.08); } }
.st-pop .lv-primary.is-press { background: rgb(var(--fg) / 0.1); }

/* Focus rings for everything that can be used, in the story and the tiles. */
.st-kit button:focus { outline: none; }
.st-kit button:focus-visible, .st-kit input:focus-visible, .st-kit [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

/* ------------------------------------------------------------ The tiles */

.st-try { margin-top: 112px; }
.st-tiles {
	width: var(--content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
.st-tile[data-tile="st-levels"] { --bt-wash: radial-gradient(90% 70% at 100% 0%, var(--bt-y), transparent 70%), radial-gradient(70% 60% at 0% 100%, var(--bt-s), transparent 70%); }
.st-tile[data-tile="st-cmdk"] { --bt-wash: radial-gradient(90% 70% at 0% 0%, var(--bt-r), transparent 70%), radial-gradient(70% 60% at 100% 100%, var(--bt-a), transparent 70%); }
.st-tile[data-tile="st-gauges"] { --bt-wash: radial-gradient(90% 70% at 0% 0%, var(--bt-s), transparent 70%), radial-gradient(70% 60% at 100% 100%, var(--bt-t), transparent 70%); }
.st-tile[data-tile="st-auto"] { --bt-wash: radial-gradient(90% 70% at 100% 0%, var(--bt-p), transparent 70%), radial-gradient(70% 60% at 0% 100%, var(--bt-g), transparent 70%); }
/* Every tile the same: each demo is laid out at the app's own size (360 wide, a band on top where
   Auto mode's notification comes in, so it never lies on the app, then a panel --demo-h tall) and
   scaled as a whole to its tile (story.js sets --k). So every panel has one height and one top,
   and the titles and lines under them start on one line. */
.st-tiles { --demo-h: 562px; --band: 96px; }
.st-tstage { position: relative; flex: none; display: flex; justify-content: center; padding: 0 16px 22px; }
.st-tstage:empty { min-height: calc((var(--band) + var(--demo-h)) * var(--k, 0.66) + 22px); }
.st-keys { margin-left: 4px; font-family: -apple-system, system-ui, sans-serif; font-weight: 500; color: var(--muted); }

.st-tile .lv-kit { position: relative; zoom: var(--k, 1); flex: none; width: 360px; height: calc(var(--band) + var(--demo-h)); padding-top: var(--band); box-sizing: border-box; display: flex; flex-direction: column; }
.st-tile .lv-pop { width: 100%; border-radius: var(--win-r); box-shadow: inset 0 0 0 1px var(--pop-rim), var(--bt-frame-shadow); }
.st-tile .lv-kit > .lv-pop { flex: 1; min-height: 0; }
.st-tile .lv-kit button { cursor: pointer; }
.st-tile .lv-kit button:disabled { cursor: default; }

/* Cleanup levels: the picker, the sentence, the list. */
.st-lv-top { padding: 14px 12px 4px; }
.st-lv-top .lv-seg { display: flex; width: 100%; height: 28px; padding: 2px; gap: 0; border-radius: 9px; background: rgb(var(--fg) / 0.06); }
.st-lv-top .lv-seg button { flex: 1; height: 24px; padding: 0 4px; border-radius: 7px; transition: background-color .2s, color .2s, box-shadow .2s; }
.st-levels .lv-sum { padding: 12px 16px 12px; min-height: 66px; box-sizing: border-box; }
.st-levels .lv-scroll { padding: 6px 0 8px; }
.st-levels .lv-row { margin: 0 8px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .st-levels .lv-row:hover { background: rgb(var(--fg) / 0.05); } }
.st-levels .lv-size { transition: color .2s; }
.st-levels .lv-row.is-off .lv-size { color: rgb(var(--fg) / 0.45); }
.st-levels .st-mode { font-size: 12px; color: rgb(var(--fg) / 0.6); }

/* ⌘K: the popover, dimmed under its actions sheet. */
.st-cmdk { min-height: 0; }
.st-cmdk .lv-scroll { flex: 1; }
.st-cmdk .lv-scrim { cursor: pointer; }
.st-cmdk .lv-panel.lv-bsheet { transition: transform .4s var(--ease-out); }
.st-cmdk .lv-panel.lv-bsheet:not(.is-in) { transform: translateY(calc(100% + 24px)); }
.st-cmdk .lv-psearch input { cursor: text; }
/* As in the app, the search field has no ring: the caret and the open panel say where the keys go.
   Its bottom corners and the sheet's follow the popover's, so nothing pokes out of them. The tile's
   buttons keep their ring (above). */
.st-cmdk .lv-psearch input:focus, .st-cmdk .lv-psearch input:focus-visible { outline: none; }
.st-cmdk .lv-panel.lv-bsheet, .st-cmdk .lv-psearch { border-bottom-left-radius: var(--win-r); border-bottom-right-radius: var(--win-r); }
.st-cmdk .lv-psearch input, .st-cmdk .lv-psearch input:focus-visible { border-radius: 0 0 var(--win-r) var(--win-r); }
.st-cmdk .lv-pitem { width: 100%; text-align: left; }
/* Uninstall: each app with its own icon, in the list and in "Uninstall <app>?". */
.st-appic { flex: none; display: block; width: var(--px, 18px); height: var(--px, 18px); }
.st-appic img { width: 100%; height: 100%; }
.st-cmdk .lv-pitem:disabled .st-appic { opacity: .5; }
.st-usheet .lv-clist { padding: 4px 8px; }
.st-usheet .lv-crow { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .st-usheet .lv-crow:hover { background: rgb(var(--fg) / 0.05); } }
.st-cmdk .lv-act-left { min-height: 20px; }
.st-cmdk .lv-actions.is-long [data-clean] { display: none; }

/* Auto mode: the popover as the app shows it with Auto mode on, with its list, and the controls
   from its Settings pane in a strip under it. It plays by itself (story.js): the rows Auto mode
   cleans tick, then go. The notification slides into the band above the popover, never onto it. */
.st-auto-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.st-auto { flex: 1; min-height: 0; }
.st-auto .lv-sum { padding: 12px 16px 12px; min-height: 62px; box-sizing: border-box; }
.st-auto .lv-topclean { transition: opacity .25s; }
.st-auto .lv-topclean.is-off { opacity: 0; }
.st-auto .lv-actions .lv-primary { cursor: default; }
.st-arows { flex: 1; min-height: 0; overflow: hidden; padding: 0 8px 6px; }
.st-arows .lv-sh { margin: 0; padding: 8px 8px 2px; }
.st-arow.lv-row { min-height: 34px; max-height: 44px; cursor: default; transition: max-height .45s var(--ease-out), min-height .45s var(--ease-out), padding .45s var(--ease-out), opacity .3s, transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .st-arow.lv-row:hover { background: transparent; } }
.st-arow.is-going { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(14px); }

/* Memory, CPU and GPU: the gauges, the line saying what a tap quit, then Processes with the agent's
   call on each (Quit now, Ask first, Leave); what quits goes from the list. */
.st-freed { display: flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 12px 8px; font-size: 12px; }
.st-gauges .lv-sh { margin: 0; padding: 10px 12px 4px 16px; gap: 8px; }
.st-gauges .lv-sh-r { margin-left: auto; }
.st-gauges .lv-sh-r:empty { display: none; }
.st-gauges .lv-seg { flex: none; }
.st-gauges .lv-g-label { cursor: pointer; }
.st-procs { flex: 1; min-height: 0; overflow: hidden; padding: 0 0 6px; }
.st-prow.lv-row { margin: 0 8px; height: 36px; overflow: hidden; cursor: default; transition: height .45s var(--ease-out), padding .45s var(--ease-out), opacity .3s, transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .st-prow.lv-row:hover { background: transparent; } }
.st-prow.is-going { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(14px); }
.st-prow.is-leave > :not(.st-call) { opacity: .55; }
.st-call { flex: none; height: 20px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; animation: lv-in .3s var(--ease-out); }
.st-call.is-q { background: rgba(52, 199, 89, 0.16); color: #1E8E3E; }
.st-call.is-a { background: rgba(255, 149, 0, 0.16); color: #B25E00; }
.st-call.is-l { background: rgb(var(--fg) / 0.07); color: rgb(var(--fg) / 0.6); }
html.dark .st-call.is-q { color: #4CD964; }
html.dark .st-call.is-a { color: #FFB340; }
.st-gauges .lv-confirm .lv-clist { padding: 0 8px; }
.st-qrow .lv-picon, .st-qrow .lv-tile { margin-right: 2px; }

/* The Settings pane's controls, in its grouped card; as a strip: on or off and the limit in one row,
   then what it cleans as toggles. */
.st-set { border-radius: 12px; background: var(--pop-bg); box-shadow: inset 0 0 0 1px var(--pop-rim), var(--bt-frame-shadow); overflow: hidden; }
.st-set-h { padding: 8px 14px 0; font-size: 12px; font-weight: 600; color: rgb(var(--fg) / 0.55); }
.st-set-row { display: flex; align-items: center; gap: 8px; min-height: 33px; margin: 0 14px; border-top: 1px solid rgb(var(--fg) / 0.07); font-size: 13px; }
.st-set-h + .st-set-row, .st-set > .st-set-row:first-child { border-top: 0; }
.st-set-row > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-set-row > b:first-child { flex: 1; font-weight: 600; }
.st-set.is-off .st-set-row:not(:first-child) { opacity: .5; }
.st-strip { padding: 2px 0 12px; }
.st-strip .st-set-row { flex-wrap: wrap; gap: 4px 6px; margin: 0 10px; padding: 7px 0; }
.st-strip .st-set-row > b { flex: none; font-weight: 600; }
.st-strip .st-set-row > span[id] { flex: none; font-size: 12px; color: rgb(var(--fg) / 0.7); }
.st-strip .st-unit button { min-width: 26px; padding: 0 5px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.st-chip { height: 24px; padding: 0 10px; border: 0; border-radius: 12px; background: rgb(var(--fg) / 0.07); color: rgb(var(--fg) / 0.75) !important; font-size: 12px !important; font-weight: 500 !important; transition: background-color .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .st-chip:hover { background: rgb(var(--fg) / 0.12); } }
.st-chip[aria-checked="true"] { background: var(--accent); color: #fff !important; }
.st-strip.is-off .st-set-row > :not(.st-sw):not(b), .st-strip.is-off .st-chips { opacity: .5; }
.st-sw { position: relative; flex: none; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: rgb(var(--fg) / 0.14); transition: background-color .2s; }
.st-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.3); transition: transform .2s var(--ease-out); }
.st-sw[aria-checked="true"] { background: var(--accent); }
.st-sw[aria-checked="true"]::after { transform: translateX(14px); }
.st-step-f { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 1px 0 8px; border-radius: 7px; background: rgb(var(--fg) / 0.05); box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.1); }
.st-step-f b { min-width: 18px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-step-f > span { display: flex; flex-direction: column; }
.st-step-f button { width: 16px; height: 11px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: rgb(var(--fg) / 0.6) !important; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .st-step-f button:hover { background: rgb(var(--fg) / 0.1); } }
.st-unit { display: inline-flex; height: 24px; padding: 2px; border-radius: 7px; background: rgb(var(--fg) / 0.06); }
.st-unit button { min-width: 30px; height: 20px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; font-size: 12px !important; font-weight: 500 !important; color: rgb(var(--fg) / 0.6) !important; }
.st-unit button[aria-checked="true"] { background: var(--panel); color: rgb(var(--fg)) !important; box-shadow: 0 0 0 0.5px rgb(var(--fg) / 0.1), 0 1px 2px rgba(0, 0, 0, 0.12); }
.st-auto-wrap .lv-note { top: 12px; right: 0; left: 0; width: auto; border-radius: 20px; cursor: pointer; font: inherit; color: inherit; transform: translateY(-12px) scale(.97); }
.st-auto-wrap .lv-note.is-in { transform: none; }
/* Over the popover's own text the banner needs more body than over a wallpaper. */
.st-auto-wrap .lv-note { background: #F7F7F9; }
@media (hover: hover) and (pointer: fine) { .st-auto-wrap .lv-note:hover { background: #F7F7F9; } }
html.dark .st-auto-wrap .lv-note { background: #2C2C30; }
@media (hover: hover) and (pointer: fine) { html.dark .st-auto-wrap .lv-note:hover { background: #2C2C30; } }

/* ------------------------------------------------------------ Narrower screens */

/* Two by two below wide screens. */
@media (max-width: 1099px) {
	.st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}

/* Phones: the panel above, the words under it, both held while the run scrolls. */
@media (max-width: 760px) {
	.story { padding: 64px 0 0; }
	.st-stage {
		top: var(--st-top, calc(56px + env(safe-area-inset-top)));
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		align-items: start;
		row-gap: 18px;
		padding-top: 10px;
	}
	.st-pin { order: -1; }
	.st-copy { align-items: start; }
	.st-run { height: 128svh; }
	.st-step h3 { font-size: 24px; }
	.st-step p { margin-top: 8px; font-size: 16px; line-height: 1.45; }
	.st-try { margin-top: 64px; }
	/* Stacked: only Auto mode keeps the band for its notification. */
	.st-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.st-tile:not([data-tile="st-auto"]) { --band: 18px; }
	.st-tstage { padding: 0 10px 16px; }
}

/* Less motion: every state is shown as it ends. */
@media (prefers-reduced-motion: reduce) {
	.js .st-step, .js .st-step.is-on, .js .st-step > *, .js .st-step.is-on > * { transform: none; transition: none; }
	.st-popat, .st-list, .st-row.lv-row, .st-kit .lv-tick, .st-cmdk .lv-panel.lv-bsheet, .st-sw, .st-sw::after, .st-auto-wrap .lv-note, .st-scr .lv-note, .st-arow.lv-row, .st-help, .st-ptr, .st-chip, .st-prow.lv-row { transition: none !important; }
	.st-call { animation: none; }
	.st-cmdk .lv-panel.lv-bsheet:not(.is-in) { opacity: 0; }
}

/* ⌘K opens and closes at once, as the app's: no slide for its panel, no fade for its scrim. */
.st-cmdk [data-scrim] { transition: none; }

/* Cleanup levels: the level word opens the level menu, as in the real popover. It scales and fades in from
   the word (its top-leading corner), 180 ms; the word is a chip that presses. */
.st-lvword { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.st-lvmenu { right: auto; z-index: 12; width: 150px; animation: none; transform-origin: 14px 0; opacity: 0; transform: scale(.96); transition: opacity .15s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1); }
.st-lvmenu.is-in { opacity: 1; transform: none; }
.st-lvmenu .lv-mitem { cursor: pointer; }
.st-lvmenu .lv-mitem:focus-visible { outline: 2px solid #00B2FF; outline-offset: -2px; }

/* Auto mode: no notification over the tile; its popover sits where the other three have theirs. */
.st-auto-wrap .lv-note { display: none; }

/* The tiles' controls press like buttons: 0.97, back in 160 ms. Rows don't scale; they keep their fill. */
.st-kit .lv-primary, .st-kit .lv-kbtn, .st-kit .lv-seg button, .st-kit .lv-dd, .st-kit .lv-ask, .st-kit .lv-cb, .st-kit .lv-g-label, .st-kit button.lv-chip, .st-levels .lv-cb, .st-lvword, .st-gauges .lv-g-label, .st-gauges .lv-seg button { transition-property: transform, background-color, color, box-shadow; transition-duration: .16s; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
.st-kit .lv-primary:active:not(:disabled), .st-kit .lv-kbtn:active, .st-kit .lv-seg button:active, .st-kit .lv-dd:active, .st-kit .lv-ask:active, .st-kit .lv-cb:active, .st-kit .lv-g-label:active, .st-kit button.lv-chip:active, .st-levels .lv-cb:active, .st-lvword:active, .st-gauges .lv-g-label:active, .st-gauges .lv-seg button:active { transform: scale(.97); }
.st-tile .lv-kit button:focus-visible { outline: 2px solid #00B2FF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.st-lvmenu { transform: none !important; transition: opacity .15s; }
	.st-kit button:active, .st-levels button:active, .st-gauges button:active { transform: none !important; }
}
@media (max-width: 760px) {
	.st-tile[data-tile="st-auto"] { --band: 18px; }
}

/* Phones: the tiles as a deck (story.js switcher): a row that scrolls and snaps natively, one tile at a
   time, the current one the width less 24 px (so Levo's 392 px pictures shrink as little as they can) and the next
   peeking in from the trailing edge; small round
   chevrons on the deck's edges, hidden at either end. */
.deck-b { display: none; }
@media (max-width: 760px) {
	.deck-w.is-deck { position: relative; margin: 0 calc(50% - 50vw); }
	.st-tiles.is-deck {
		width: auto; max-width: none; margin: 0;
		display: flex; gap: 10px; align-items: stretch;
		/* Room for the tiles' shadows, which the scrolling row would otherwise clip; taken back below. */
		padding: 12px var(--side, 16px) 40px; margin-bottom: -28px;
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--side, 16px);
		overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.st-tiles.is-deck::-webkit-scrollbar { display: none; }
	.st-tiles.is-deck > .bt-tile { flex: 0 0 calc(100% - 24px); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; animation: none !important; opacity: 1 !important; }
	.deck-w.is-deck .deck-b {
		position: absolute; top: 50%; z-index: 3; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 50%;
		display: grid; place-items: center; color: var(--text); cursor: pointer;
		background: color-mix(in srgb, var(--bg) 62%, transparent);
		-webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
		box-shadow: 0 0 0 0.5px rgb(var(--ink) / 0.12), 0 4px 12px -4px rgba(0, 0, 0, 0.18);
		transition: opacity .2s cubic-bezier(.23, 1, .32, 1), transform .16s cubic-bezier(.23, 1, .32, 1);
		-webkit-user-select: none; user-select: none;
	}
	.deck-prev { left: 6px; }
	.deck-next { right: 6px; }
	.deck-w.is-deck .deck-b:active { transform: scale(.97); }
	.deck-w.is-deck .deck-b:focus-visible { outline: 2px solid #00B2FF; outline-offset: 2px; }
	.deck-w.at-first .deck-prev, .deck-w.at-last .deck-next { opacity: 0; pointer-events: none; }
}