/* Tilora's HUD on the web. Built by tools/build-site.py from site-src/hud; edit there. */

/* Tilora's HUD on the web. Shared by every component; nobody but its owner edits this file.
   One CSS pixel is one SwiftUI point. Components are built at their real size and scaled as a whole by whoever places them. */
.tl {
  --tl-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --tl-rounded:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --tl-mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* Theme.swift, value for value. Fills are translucent white over the notch's black. */
  --tl-card:rgba(255,255,255,.07); --tl-fill:rgba(255,255,255,.08); --tl-fill-raised:rgba(255,255,255,.16);
  --tl-secondary:rgba(255,255,255,.6); --tl-tertiary:rgba(255,255,255,.36);
  --tl-accent:#0A84FF; --tl-green:#30D158; --tl-red:#FF453A; --tl-orange:#FF9F0A; --tl-yellow:#FFD60A; --tl-indigo:#5E5CE6; --tl-purple:#BF5AF2;
  --tl-card-radius:22px; --tl-card-padding:16px; --tl-tile-radius:14px; --tl-gap:12px;
  /* Motion. Things settle; they don't stop dead and they don't bounce about. */
  --tl-settle:cubic-bezier(.16,1,.3,1); --tl-spring:cubic-bezier(.2,.9,.24,1.06); --tl-snappy:cubic-bezier(.3,.7,.2,1);
  font-family:var(--tl-font); color:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-user-select:none; user-select:none; cursor:default; line-height:1.2; letter-spacing:0;
  box-sizing:border-box;
}
.tl *, .tl *::before, .tl *::after { box-sizing:border-box; margin:0; padding:0; }
/* Whatever the page around it says about paragraphs, headings and lists stops at the component's edge. */
.tl :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure) { margin:0; padding:0; max-width:none; font:inherit; letter-spacing:inherit; color:inherit; text-wrap:wrap; }
.tl :where(img) { max-width:none; }
.tl svg { display:block; overflow:visible; }
.tl button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* A card of Home: the notch's black with seven parts in a hundred of white over it. */
.tl-card { position:relative; overflow:hidden; border-radius:var(--tl-card-radius); background:#000 linear-gradient(var(--tl-card),var(--tl-card)); }
/* Standing on the bottom edge of something: no corners where it meets the edge. */
.tl-card.tl-flush { border-radius:var(--tl-card-radius) var(--tl-card-radius) 0 0; }

/* Liquid Glass as the app shows it on black (see ref/real-glass/sheet.png, taken from the running app):
   barely lighter than what is under it, with a hairline of light round its edge. Tinted glass is its colour, with a brighter edge. */
.tl-glass { position:relative; background:rgba(255,255,255,.055); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.25); }
.tl-glass.tl-raised { background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.14); }
.tl-glass.tl-tint { background:var(--tl-tint,var(--tl-accent)); -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tl-tint,var(--tl-accent)) 55%, #fff), inset 0 1px 0 rgba(255,255,255,.35); }

/* A press, as HUDButtonStyle has it: sinks and dims, then comes back. */
.tl-press { transition:transform .18s var(--tl-snappy), opacity .18s var(--tl-snappy); }
.tl-press:active { transform:scale(.86); opacity:.6; }
.tl-press.tl-large:active { transform:scale(.96); }

/* The house transition, the app's dissolve: it leaves soft, small and faint, and arrives the same way in reverse. */
.tl-dissolve { transition:opacity .42s var(--tl-settle), filter .42s var(--tl-settle), transform .42s var(--tl-settle); }
.tl-dissolve.tl-out { opacity:0; filter:blur(6px); transform:scale(.86); pointer-events:none; }

/* Keyboard focus: a ring that is only there for keys. */
.tl :focus { outline:none; }
.tl :focus-visible { outline:2px solid rgba(255,255,255,.9); outline-offset:2px; border-radius:inherit; }

@media (prefers-reduced-motion:reduce) {
  .tl-dissolve, .tl-press { transition:none !important; }
}


/* The HUD without its cards: NotchView's shape, HUDView's header, pages and grabber.
   The root is the app's open notch cut to 962 points: the shape is 968 wide (HUD.width 940 plus a top radius of 14
   either side), so its ears reach three points past the root on each side, where they are a hair's height. */
.tl-shell { position:relative; width:962px; height:452px;
  /* NotchShape(topRadius: 14, bottomRadius: 36) in 968 × 452. */
  --tl-shell-shape:path("M0 0Q14 0 14 14L14 416Q14 452 50 452L918 452Q954 452 954 416L954 14Q954 0 968 0Z"); }

.tl-shell-notch, .tl-shell-shadow, .tl-shell-edge { position:absolute; left:-3px; top:0; width:968px; height:452px; }
.tl-shell-notch { background:#000; clip-path:var(--tl-shell-shape); }
/* .shadow(color: .black.opacity(0.5), radius: 28, y: 14). A layer of its own, so nothing that moves redraws it. */
.tl-shell-shadow { pointer-events:none; filter:drop-shadow(0 14px 56px rgba(0,0,0,.5)); }
.tl-shell-shadow::before { content:""; position:absolute; inset:0; background:#000; clip-path:var(--tl-shell-shape); }
/* shape.stroke(LinearGradient([.clear, .white.opacity(0.09)], top to bottom), lineWidth: 1), over everything. */
.tl-shell-edge { pointer-events:none; stroke-width:1px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.09)); mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.09)); }

/* HUDView's own frame, 940 × 452, in the middle of the shape. */
.tl-shell-view { position:absolute; left:14px; top:0; width:940px; height:452px; }

/* Header: top inset 8, height 30, HUD.padding 14 plus 4 either side. */
.tl-shell-header { position:absolute; left:18px; right:18px; top:8px; height:30px; }
.tl-shell-tabs { position:absolute; left:0; top:0; height:30px; padding:2px; display:flex; border-radius:15px; background:var(--tl-fill); contain:layout; }
.tl-shell .tl-shell-tab { position:relative; height:26px; padding:0 16px; border-radius:13px; white-space:nowrap;
  font:500 13px/26px var(--tl-font); color:var(--tl-secondary); }
.tl-shell .tl-shell-tab[aria-pressed="true"] { font-weight:600; color:#fff; }
.tl-shell .tl-shell-thumb { position:absolute; left:0; top:2px; width:69.25px; height:26px; border-radius:13px; transform:translateX(2px); pointer-events:none; }
.tl-shell-probe { position:absolute; left:0; top:0; visibility:hidden; pointer-events:none; white-space:nowrap; font:500 13px/26px var(--tl-font); }

/* HeaderNotice: the two glyphs, 30 across, 8 apart. */
.tl-shell-notice { position:absolute; right:0; top:0; height:30px; display:flex; gap:8px; }
.tl-shell-seat { display:block; width:30px; height:30px; }
.tl-shell .tl-shell-glyph { position:relative; display:block; width:30px; height:30px; border-radius:50%; color:#fff; }
/* The glass is a layer inside the button: base.css takes a button's own background away. */
.tl-shell .tl-shell-glass { position:absolute; inset:0; border-radius:50%; }
.tl-shell .tl-shell-tint { opacity:0; }
/* HUD.secondary is white at 0.6: on the glyph as a whole, so its parts don't show where they overlap. */
.tl-shell .tl-shell-glyph svg { position:relative; opacity:.6; }

/* The pages, cut at the HUD's edge either side and ten points past the cards above and below. */
.tl-shell-pages { position:absolute; left:0; top:40px; width:940px; height:408px; overflow:hidden; overflow:clip; }
.tl-shell-track { position:absolute; left:14px; top:10px; width:912px; height:388px; }
.tl-shell-page { position:absolute; top:0; width:912px; height:388px; }
.tl-shell-home { left:0; }
.tl-shell-files { left:940px; visibility:hidden; }
.tl-shell-slot { position:absolute; }
.tl-shell-slot[data-card="music"] { left:0; top:0; width:370px; height:208px; }
.tl-shell-slot[data-card="calendar"] { left:382px; top:0; width:296px; height:208px; }
.tl-shell-slot[data-card="batteries"] { left:690px; top:0; width:222px; height:208px; }
.tl-shell-slot[data-card="clipboard"] { left:0; top:220px; width:444px; height:168px; }
.tl-shell-slot[data-card="controls"] { left:456px; top:220px; width:296px; height:168px; }
.tl-shell-slot[data-card="weather"] { left:764px; top:220px; width:148px; height:168px; }
.tl-shell-mirror { position:absolute; left:14px; top:50px; width:912px; height:388px; visibility:hidden; }
.tl-shell-slot > img, .tl-shell-files > img, .tl-shell-mirror > img { display:block; width:100%; height:100%; pointer-events:none; -webkit-user-drag:none; }

/* The grabber: Capsule 36 × 4, white at 0.22, five points off the bottom. */
.tl-shell-grabber { position:absolute; left:452px; bottom:5px; width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); pointer-events:none; }


/* The mirror: the panel that comes down over Home (MirrorView.swift). 912 × 388, HUD.contentHeight tall and the HUD's width less its padding. */
.tl-mirror { width:912px; height:388px; background:none; }

/* What MirrorView clips to: RoundedRectangle(cornerRadius: HUD.cardRadius, style: .continuous).
   The path is that shape for 912 × 388 at 22, so the corners are the app's and not a quarter circle.
   It is on this inner pane, not the root, so that a blur put on the root by whoever places it stays soft at the edge. */
.tl-mirror-pane { position:absolute; inset:0; overflow:hidden; background:#958576;
  -webkit-clip-path:path("M33.63 0H878.37C888.05 0 892.9 0 898.11 1.65C903.8 3.72 908.28 8.2 910.35 13.89C912 19.1 912 23.95 912 33.63V354.37C912 364.05 912 368.9 910.35 374.11C908.28 379.8 903.8 384.28 898.11 386.35C892.9 388 888.05 388 878.37 388H33.63C23.95 388 19.1 388 13.89 386.35C8.2 384.28 3.72 379.8 1.65 374.11C0 368.9 0 364.05 0 354.37V33.63C0 23.95 0 19.1 1.65 13.89C3.72 8.2 8.2 3.72 13.89 1.65C19.1 0 23.95 0 33.63 0Z");
  clip-path:path("M33.63 0H878.37C888.05 0 892.9 0 898.11 1.65C903.8 3.72 908.28 8.2 910.35 13.89C912 19.1 912 23.95 912 33.63V354.37C912 364.05 912 368.9 910.35 374.11C908.28 379.8 903.8 384.28 898.11 386.35C892.9 388 888.05 388 878.37 388H33.63C23.95 388 19.1 388 13.89 386.35C8.2 384.28 3.72 379.8 1.65 374.11C0 368.9 0 364.05 0 354.37V33.63C0 23.95 0 19.1 1.65 13.89C3.72 8.2 8.2 3.72 13.89 1.65C19.1 0 23.95 0 33.63 0Z"); }

/* The camera's picture fills the panel (videoGravity = .resizeAspectFill). */
.tl-mirror-photo { position:absolute; left:0; top:0; width:912px; height:388px; object-fit:cover; display:block; }


/* The Files page of the HUD: 912 × 388, three cards on the notch's black. Numbers are FilesView.swift's.
   HUD.span(9) = 681 for the shelf, HUD.span(3) = 219 for the column beside it, HUD.gap = 12 between. */
.tl-files { position:relative; width:912px; height:388px; }
.tl-files .tl-files-defs { position:absolute; width:0; height:0; overflow:hidden; }

.tl-files .tl-files-shelf { position:absolute; left:0; top:0; width:681px; height:388px; padding:16px; }
.tl-files .tl-files-airdrop { position:absolute; left:693px; top:0; width:219px; height:208px; padding:16px;
  display:flex; flex-direction:column; align-items:flex-start; white-space:nowrap; color:#fff;
  /* LinearGradient(0x0B4FB3 → 0x0A2A66, top to bottom): the app's own. */
  background:linear-gradient(#0B4FB3, #0A2A66); }
.tl-files .tl-files-actions { position:absolute; left:693px; top:220px; width:219px; height:168px; padding:10px;
  display:flex; flex-direction:column; gap:6px; }

/* Glass under a button's label: base.css takes a button's own background away, so it is a layer inside. */
.tl-files .tl-files-glass { position:absolute; inset:0; border-radius:inherit; }
.tl-files .tl-files-label { position:relative; display:block; }

/* ── The shelf's header: a row 24 high, 8 between its parts. ── */
.tl-files .tl-files-head { height:24px; display:flex; align-items:center; gap:8px; white-space:nowrap; }

/* Shelf / Downloads / Desktop: segments 22 high, 12 either side of the word, in a capsule of HUD.fill with 2 of padding. */
.tl-files .tl-files-seg { position:relative; flex:none; display:flex; padding:2px; border-radius:13px; background:var(--tl-fill); }
.tl-files .tl-files-opt { position:relative; height:22px; padding:0 12px; border-radius:11px; font:500 12px/22px var(--tl-font); color:#fff; }
/* SwiftUI sets these words half a point lower in their row than a browser centres them. */
.tl-files .tl-files-opt > span { display:block; opacity:.6; transform:translateY(.5px); transition:opacity .25s var(--tl-snappy); }
.tl-files .tl-files-opt[aria-checked="true"] { font-weight:600; }
.tl-files .tl-files-opt[aria-checked="true"] > span { opacity:1; }
/* One glass thumb behind the chosen segment; it slides with .snappy(duration: 0.25). */
.tl-files .tl-files-thumb { position:absolute; left:0; top:2px; width:54.2px; height:22px; border-radius:11px;
  transform:translateX(2px); transition:transform .25s var(--tl-snappy), width .25s var(--tl-snappy); }

/* "8 items · 44.3 MB" */
.tl-files .tl-files-summary { position:relative; flex:none; height:14px; font:400 11px/14px var(--tl-font); color:var(--tl-secondary); }
.tl-files .tl-files-line { display:block; }
.tl-files .tl-files-summary > [data-gone], .tl-files .tl-files-ready > [data-gone] { position:absolute; left:0; top:0; }

/* Clear, Remove or Add to Shelf: 11 semibold in a glass capsule 24 high, at the row's far end. */
.tl-files .tl-files-do { position:relative; flex:none; margin-left:auto; height:24px; }
.tl-files .tl-files-layer { display:block; }
.tl-files .tl-files-do > [data-gone] { position:absolute; right:0; top:0; }
.tl-files .tl-files-pill { position:relative; display:block; height:24px; padding:0 12px; border-radius:12px; font:600 11px/24px var(--tl-font); color:#fff; }

/* ── The grid: five columns and two rows, 8 apart, in 649 × 318. A tile is 123.4 × 155. ── */
.tl-files .tl-files-grid { position:relative; height:318px; margin-top:14px; }
.tl-files .tl-files-slot { position:absolute; left:0; top:0; z-index:1; width:123.4px; height:155px;
  transform:translate(calc(var(--c) * 131.4px), calc(var(--r) * 163px)); transition:transform .3s var(--tl-settle); }
.tl-files .tl-files-slot.tl-files-wide { width:var(--w); height:var(--h); pointer-events:none; }
.tl-files .tl-files-slot[data-gone] { z-index:0; }
.tl-files .tl-files-item { width:100%; height:100%; }

/* A file, Finder's icon view: the icon above its name, on HUD.fill. */
.tl-files .tl-files-tile { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center;
  width:100%; height:100%; padding:10px 4px 12px; border-radius:var(--tl-tile-radius); white-space:nowrap; text-align:center; }
.tl-files .tl-files-tile::before, .tl-files .tl-files-more::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:var(--tl-tile-radius); background:var(--tl-fill); }
/* The icon, 58 across with 9 round it; chosen, a well of HUD.fillRaised behind it. */
.tl-files .tl-files-well { flex:none; width:76px; height:76px; padding:9px; border-radius:12px; }
.tl-files .tl-files-tile[aria-pressed="true"] .tl-files-well { background:var(--tl-fill-raised); }
/* The name; chosen, the accent behind it. */
.tl-files .tl-files-name { flex:none; margin-top:auto; max-width:100%; padding:1.5px 6px; border-radius:5px; font:500 11.5px/14px var(--tl-font); color:#fff; }
/* A browser puts a line on a whole pixel; the app's sits on the half. */
.tl-files .tl-files-name > span { display:block; overflow:hidden; text-overflow:ellipsis; transform:translateY(-.5px); }
.tl-files .tl-files-tile[aria-pressed="true"] .tl-files-name { background:var(--tl-accent); }
.tl-files .tl-files-detail { flex:none; max-width:100%; padding-top:2px; overflow:hidden; text-overflow:ellipsis; font:400 10px/13px var(--tl-font); color:var(--tl-secondary); }

/* "+3 more", in the last place, and "No files to show", over the whole grid. */
.tl-files .tl-files-more { position:relative; isolation:isolate; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; font:600 12px/15px var(--tl-font); color:var(--tl-secondary); }
.tl-files .tl-files-none { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; font:500 12px/15px var(--tl-font); color:var(--tl-secondary); }

/* The drop zone: what is left of the grid, edged with dashes (1.5 wide, 5 on and 4 off, white at 0.2). */
.tl-files .tl-files-zone { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.tl-files .tl-files-dash { position:absolute; left:0; top:0; }
.tl-files .tl-files-drop { display:flex; flex-direction:column; align-items:center; height:65px; max-width:100%; }
/* .lineLimit(1): in a single column the second line is cut short, as in the app. */
.tl-files .tl-files-drop > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.tl-files .tl-files-tray { flex:none; color:#fff; opacity:.6; }
.tl-files .tl-files-drop-title { margin-top:8px; transform:translateY(.75px); font:600 12px/15px var(--tl-font); color:#fff; }
.tl-files .tl-files-drop-detail { margin-top:2px; transform:translateY(.6px); font:400 10.5px/13px var(--tl-font); color:var(--tl-secondary); }

/* ── AirDrop ── */
.tl-files .tl-files-air-title { font:600 15px/18px var(--tl-font); }
/* .opacity(0.7), on the line as a whole so that a line dissolving inside it still can. */
.tl-files .tl-files-ready { position:relative; flex:none; height:14px; margin-top:2px; font:400 11px/14px var(--tl-font); opacity:.7; }
.tl-files .tl-files-send { position:relative; flex:none; margin-top:auto; height:30px; padding:0 16px; border-radius:15px; font:600 12px/30px var(--tl-font); color:#fff; }
.tl-files .tl-files-send .tl-files-label { transform:translateY(.5px); }
/* The rings bleed off the top right corner: centred 52 in from the right and 56 down, over everything, and never in the way. */
.tl-files .tl-files-rings { position:absolute; left:0; top:0; pointer-events:none; }
.tl-files .tl-files-pulse { opacity:0; transform-origin:167px 56px; vector-effect:non-scaling-stroke; }

/* ── The three actions: rows on HUD.fill, a 30 glass circle and 12 semibold. ── */
.tl-files .tl-files-act { position:relative; isolation:isolate; flex:1 1 0; min-height:0; display:flex; align-items:center; gap:9px; padding:0 8px;
  border-radius:12px; white-space:nowrap; text-align:left; font:600 12px/15px var(--tl-font); color:#fff; }
.tl-files .tl-files-act::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:12px; background:var(--tl-fill); }
.tl-files .tl-files-orb { flex:none; width:30px; height:30px; border-radius:50%; color:#fff; }
/* The rows are 45⅓ high, and the app rounds each one's words to its own pixel. */
.tl-files .tl-files-act[data-do="share"] .tl-files-label { transform:translateY(.25px); }
.tl-files .tl-files-act[data-do="compress"] .tl-files-label { transform:translateY(-.5px); }

/* Nothing to act on: 0.4, and no press. */
.tl-files .tl-files-act:disabled, .tl-files .tl-files-send:disabled { opacity:.4; cursor:default; }
.tl-files .tl-press:disabled:active { transform:none; opacity:.4; }

/* The app's corners are continuous ones (RoundedRectangle(style: .continuous)): the same curve, as a path, where the box's size is fixed. */
@supports (clip-path:path("M0 0H1V1Z")) {
  .tl-files .tl-files-shelf { border-radius:0; clip-path:path("M33.63 0L647.37 0C657.05 0 661.9 0 667.11 1.65C672.8 3.72 677.28 8.2 679.35 13.89C681 19.1 681 23.95 681 33.63L681 354.37C681 364.05 681 368.9 679.35 374.11C677.28 379.8 672.8 384.28 667.11 386.35C661.9 388 657.05 388 647.37 388L33.63 388C23.95 388 19.1 388 13.89 386.35C8.2 384.28 3.72 379.8 1.65 374.11C0 368.9 0 364.05 0 354.37L0 33.63C0 23.95 0 19.1 1.65 13.89C3.72 8.2 8.2 3.72 13.89 1.65C19.1 0 23.95 0 33.63 0Z"); }
  .tl-files .tl-files-airdrop { border-radius:0; clip-path:path("M33.63 0L185.37 0C195.05 0 199.9 0 205.11 1.65C210.8 3.72 215.28 8.2 217.35 13.89C219 19.1 219 23.95 219 33.63L219 174.37C219 184.05 219 188.9 217.35 194.11C215.28 199.8 210.8 204.28 205.11 206.35C199.9 208 195.05 208 185.37 208L33.63 208C23.95 208 19.1 208 13.89 206.35C8.2 204.28 3.72 199.8 1.65 194.11C0 188.9 0 184.05 0 174.37L0 33.63C0 23.95 0 19.1 1.65 13.89C3.72 8.2 8.2 3.72 13.89 1.65C19.1 0 23.95 0 33.63 0Z"); }
  .tl-files .tl-files-actions { border-radius:0; clip-path:path("M33.63 0L185.37 0C195.05 0 199.9 0 205.11 1.65C210.8 3.72 215.28 8.2 217.35 13.89C219 19.1 219 23.95 219 33.63L219 134.37C219 144.05 219 148.9 217.35 154.11C215.28 159.8 210.8 164.28 205.11 166.35C199.9 168 195.05 168 185.37 168L33.63 168C23.95 168 19.1 168 13.89 166.35C8.2 164.28 3.72 159.8 1.65 154.11C0 148.9 0 144.05 0 134.37L0 33.63C0 23.95 0 19.1 1.65 13.89C3.72 8.2 8.2 3.72 13.89 1.65C19.1 0 23.95 0 33.63 0Z"); }
  .tl-files .tl-files-tile::before, .tl-files .tl-files-more::before { border-radius:0; clip-path:path("M21.4 0L102 0C108.16 0 111.24 0 114.56 1.05C118.18 2.37 121.03 5.22 122.35 8.84C123.4 12.16 123.4 15.24 123.4 21.4L123.4 133.6C123.4 139.76 123.4 142.84 122.35 146.16C121.03 149.78 118.18 152.63 114.56 153.95C111.24 155 108.16 155 102 155L21.4 155C15.24 155 12.16 155 8.84 153.95C5.22 152.63 2.37 149.78 1.05 146.16C0 142.84 0 139.76 0 133.6L0 21.4C0 15.24 0 12.16 1.05 8.84C2.37 5.22 5.22 2.37 8.84 1.05C12.16 0 15.24 0 21.4 0Z"); }
  .tl-files .tl-files-well { border-radius:0; clip-path:path("M18.34 0L57.66 0C62.94 0 65.58 0 68.42 .9C71.53 2.03 73.97 4.47 75.1 7.58C76 10.42 76 13.06 76 18.34L76 57.66C76 62.94 76 65.58 75.1 68.42C73.97 71.53 71.53 73.97 68.42 75.1C65.58 76 62.94 76 57.66 76L18.34 76C13.06 76 10.42 76 7.58 75.1C4.47 73.97 2.03 71.53 .9 68.42C0 65.58 0 62.94 0 57.66L0 18.34C0 13.06 0 10.42 .9 7.58C2.03 4.47 4.47 2.03 7.58 .9C10.42 0 13.06 0 18.34 0Z"); }
  .tl-files .tl-files-act::before { border-radius:0; clip-path:path("M18.34 0L180.66 0C185.94 0 188.58 0 191.42 .9C194.53 2.03 196.97 4.47 198.1 7.58C199 10.42 199 13.06 199 18.34L199 26.99C199 32.27 199 34.91 198.1 37.76C196.97 40.86 194.53 43.3 191.42 44.43C188.58 45.33 185.94 45.33 180.66 45.33L18.34 45.33C13.06 45.33 10.42 45.33 7.58 44.43C4.47 43.3 2.03 40.86 .9 37.76C0 34.91 0 32.27 0 26.99L0 18.34C0 13.06 0 10.42 .9 7.58C2.03 4.47 4.47 2.03 7.58 .9C10.42 0 13.06 0 18.34 0Z"); }
}

/* For someone who asked for less motion, and for the first placing of things: no travelling. */
.tl-files.tl-files-still .tl-files-thumb,
.tl-files.tl-files-still .tl-files-opt > span,
.tl-files.tl-files-still .tl-files-slot,
.tl-files.tl-files-still .tl-dissolve,
.tl-files.tl-files-still .tl-press { transition:none; }
@media (prefers-reduced-motion:reduce) {
  .tl-files .tl-files-thumb, .tl-files .tl-files-opt > span, .tl-files .tl-files-slot { transition:none; }
}


/* The Music card, 370 x 208. One CSS pixel is one SwiftUI point; the numbers are MusicCard.swift's.
   Card padding 16. Rows: track 16...80, scrubber 106...134, controls 160...192. */

/* The wash ArtworkPalette takes from this cover (hue 2.84 in Oklab, full strength): three stops,
   lightest first, from the top leading corner to the bottom trailing one. 119.343deg is that diagonal. */
.tl-music.tl-card { width:370px; height:208px; background:linear-gradient(119.343deg,#144A35 0%,#0C2A1E 50%,#091711 100%); }

/* Artwork: 64 square, corners 9, shadow black 45% radius 10 y 5. Paused, it sits back to 0.88. */
.tl-music-art { position:absolute; left:16px; top:16px; width:64px; height:64px; transform-origin:50% 50%;
  transition:transform .45s var(--tl-spring); }
.tl-music-cover { width:64px; height:64px; border-radius:9px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,.45); }
/* The app that is playing: a 22 frame hung 6 past the corner; what shows of an icon in it is 18 across. */
.tl-music-app { position:absolute; left:50px; top:50px; width:18px; height:18px; border-radius:4.1px;
  background:linear-gradient(#FD5578,#FC0A30); box-shadow:0 1px 4px rgba(0,0,0,.4); }

/* Title 15 semibold, artist and album 13 at 60%, one line each, 1 apart, 2 down from the artwork's top. */
.tl-music-text { position:absolute; left:92px; top:18px; width:210px; white-space:nowrap; }
.tl-music-title { height:19px; font:600 15px/19px var(--tl-font); color:#fff; overflow:hidden; text-overflow:ellipsis; }
.tl-music-sub { height:17px; margin-top:1px; font:400 13px/17px var(--tl-font); color:var(--tl-secondary); overflow:hidden; text-overflow:ellipsis; }

/* Where the sound goes: a 28 circle of glass. */
.tl-music .tl-music-out { position:absolute; left:326px; top:16px; width:28px; height:28px; border-radius:50%; color:#fff; }
.tl-music-out-glass { display:block; width:28px; height:28px; border-radius:50%; }

/* Scrubber: a 14-high place to press, a 6-high capsule in its middle that grows to 10 under a drag. */
.tl-music-scrub { position:absolute; left:16px; top:106px; width:338px; height:14px; border-radius:7px; touch-action:pan-y; }
.tl-music-bar { position:absolute; left:0; top:2px; width:338px; height:10px; background:rgba(255,255,255,.2);
  clip-path:inset(2px 0 round 3px); transition:clip-path .2s var(--tl-snappy); }
.tl-music-fill { width:338px; height:10px; background:rgba(255,255,255,.9); transform-origin:0 50%; transform:scaleX(.38333); will-change:transform; }
.tl-music-scrub.tl-music--scrubbing .tl-music-bar { clip-path:inset(0 0 round 5px); }
.tl-music-times { position:absolute; left:16px; top:121px; width:338px; height:13px; display:flex; justify-content:space-between;
  font:500 10px/13px var(--tl-font); font-variant-numeric:tabular-nums; color:var(--tl-secondary); }

/* Controls: a 32-high row. Transport buttons are 44 x 32, the two beside play at most 40 from it;
   shuffle and repeat are 30 x 24 at the row's ends. */
.tl-music-controls { position:absolute; left:16px; top:160px; width:338px; height:32px; }
.tl-music .tl-music-transport { position:absolute; top:0; width:44px; height:32px; border-radius:8px; color:#fff; }
.tl-music-prev { left:63px; }
.tl-music-toggle { left:147px; }
.tl-music-next { left:231px; }
.tl-music-transport svg, .tl-music-mode svg { position:absolute; left:0; top:0; }
.tl-music .tl-music-mode { position:absolute; top:4px; width:30px; height:24px; border-radius:7px; color:var(--tl-secondary); }
.tl-music-shuffle { left:0; }
.tl-music-repeat { left:308px; }
/* Lit with a filled backing when on. */
.tl-music-mode::before { content:""; position:absolute; inset:0; border-radius:7px; background:var(--tl-fill-raised); opacity:0; transition:opacity .18s var(--tl-snappy); }
.tl-music .tl-music-mode[aria-pressed="true"] { color:#fff; }
.tl-music-mode[aria-pressed="true"]::before { opacity:1; }

.tl-music--paused .tl-music-art { transform:scale(.88); }

/* The app's own spring for the artwork (duration 0.45, bounce 0.3), sampled, where the browser can follow a curve. */
@supports (transition-timing-function:linear(0,1)) {
  .tl-music-art { transition:transform .9s linear(0,.0718,.2332,.4233,.6045,.7571,.8737,.9551,1.0063,1.0339,1.0449,1.0451,1.0393,1.0309,1.0222,1.0145,1.0083,1.0038,1.0007,.999,.9981,.9979,.998,.9984,.9988,.9992,.9995,.9997,.9999,1,1); }
}

/* For someone who asked for less motion, and for states shown at once: nothing travels. */
.tl-music--still, .tl-music--still *, .tl-music--still *::before { transition:none !important; }
@media (prefers-reduced-motion:reduce) {
  .tl-music-art, .tl-music-bar, .tl-music-mode::before { transition:none !important; }
}


/* The Calendar card. CalendarCard.swift, number for number; one px is one point.
   Boxes sit on whole pixels and anything the app puts on a fraction is drawn or moved there (svg, transform),
   because a browser rounds a box's place to its own pixel and not every browser's pixel is the same size. */
.tl-calendar { width:296px; height:208px; padding:var(--tl-card-padding); display:flex; align-items:flex-start; gap:14px; }
/* The app draws its small text with the system's smoothing, which is heavier than a browser's "antialiased" by a sixth of its ink
   (measured: see notes.md); the big numeral it draws without. base.css asks for antialiased throughout; these put the weight back here. */
.tl-calendar { -webkit-font-smoothing:auto; }
.tl-calendar .tl-calendar-day { -webkit-font-smoothing:antialiased; }

/* The date: weekday, day, month, and under a spacer how many events today has.
   As wide as its widest line, which the app rounds up to 71.25; the quarter is in the rows' drawing. */
.tl-calendar .tl-calendar-date { flex:none; width:71px; height:100%; display:flex; flex-direction:column; align-items:flex-start; white-space:nowrap; }
.tl-calendar .tl-calendar-weekday { font:600 11px/14px var(--tl-font); color:var(--tl-red); text-transform:uppercase; }
.tl-calendar .tl-calendar-day { font:400 38px/45px var(--tl-font); color:#fff; margin-top:-4px; }
.tl-calendar .tl-calendar-month { font:400 11px/14px var(--tl-font); color:var(--tl-tertiary); margin-top:-3px; }
.tl-calendar .tl-calendar-count { font:500 11px/14px var(--tl-font); color:var(--tl-secondary); margin-top:auto; }
.tl-calendar .tl-calendar-today { font:400 11px/14px var(--tl-font); color:var(--tl-tertiary); }

/* The agenda: rows of 46 with 8 between, as many as fit down the card. */
.tl-calendar .tl-calendar-agenda { position:relative; flex:1 1 0; min-width:0; height:100%; list-style:none; display:flex; flex-direction:column; gap:8px; }
.tl-calendar .tl-calendar-event { position:relative; flex:none; height:46px; }
/* An event that is over leaves the list; the ones after it move up. */
.tl-calendar .tl-calendar-event.tl-calendar-over { position:absolute; left:0; top:0; width:100%; }

/* A row's ground is its colour at 14% in a rounded rectangle of 10; under way, it fills at 26% as far as the event has gone. */
.tl-calendar .tl-calendar-ground { position:absolute; left:0; top:0; fill:var(--tl-event); -webkit-clip-path:inset(0 0 0 .25px round 10px); clip-path:inset(0 0 0 .25px round 10px); }
.tl-calendar .tl-calendar-tone { fill-opacity:.14; }
.tl-calendar .tl-calendar-fill { fill-opacity:.26; opacity:0; transform-origin:.25px 0; transform:scaleX(var(--tl-progress,0)); transition:opacity .4s var(--tl-settle), transform .6s var(--tl-settle); }
.tl-calendar .tl-calendar-now .tl-calendar-fill { opacity:1; }

/* Title over time, 1 apart, centred in the row: 8.5 down. The app draws text where its layout has it (the date is 71.17 wide,
   so 119.67 across the card) and only shapes on whole pixels; the room for a title runs from there to 20 short of the button. */
.tl-calendar .tl-calendar-text { position:absolute; left:19px; top:9px; right:19.67px; height:29px; transform:translate(-.33px,-.5px); }
.tl-calendar .tl-calendar-call .tl-calendar-text { right:53.67px; }
.tl-calendar .tl-calendar-title { font:600 12px/15px var(--tl-font); color:#fff; }
.tl-calendar .tl-calendar-shown { display:block; height:15px; white-space:pre; overflow:hidden; text-overflow:ellipsis; }
.tl-calendar.tl-calendar-fitted .tl-calendar-shown { overflow:visible; text-overflow:clip; }
/* Said, not shown: the whole title when the row has no room for it, and that an event is happening now. */
.tl-calendar .tl-calendar-name { position:absolute; width:1px; height:1px; overflow:hidden; -webkit-clip-path:inset(50%); clip-path:inset(50%); white-space:nowrap; }
.tl-calendar .tl-calendar-sub { position:absolute; left:0; top:16px; font:400 10.5px/13px var(--tl-font); color:var(--tl-secondary); white-space:pre; }
.tl-calendar .tl-calendar-live { padding-left:10.5px; font-weight:500; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; }
.tl-calendar .tl-calendar-dot { position:absolute; left:0; top:3px; color:var(--tl-event); }

/* Join: a glass circle of 26, green while the call is happening. */
.tl-calendar .tl-calendar-join { position:absolute; right:8px; top:10px; width:26px; height:26px; border-radius:50%; }
.tl-calendar .tl-calendar-join:disabled { pointer-events:none; }
.tl-calendar .tl-calendar-join.tl-calendar-down { transform:scale(.86); opacity:.6; }
.tl-calendar .tl-calendar-lens { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#fff; --tl-tint:var(--tl-green);
  transition:opacity .42s var(--tl-settle), filter .42s var(--tl-settle), transform .42s var(--tl-settle), background-color .4s var(--tl-settle), box-shadow .4s var(--tl-settle); }

/* Nothing left today. */
.tl-calendar .tl-calendar-none { position:absolute; inset:0; display:grid; place-items:center; font:500 12px/15px var(--tl-font); color:var(--tl-secondary); }

/* The light of an event under way breathes, as the system's pulse does. */
.tl-calendar.tl-calendar-alive .tl-calendar-now .tl-calendar-dot { animation:tl-calendar-pulse 1s ease-in-out infinite alternate; }
@keyframes tl-calendar-pulse { from { opacity:1; } to { opacity:.4; } }

/* A change of text: only the part that changed goes and comes. The minutes roll down as they count down. */
.tl-calendar .tl-calendar-swap { position:relative; display:inline-block; }
.tl-calendar .tl-calendar-come, .tl-calendar .tl-calendar-rest { display:inline-block; }
.tl-calendar .tl-calendar-go { position:absolute; left:0; top:0; }
.tl-calendar .tl-calendar-roll { transition-duration:.6s; }
.tl-calendar .tl-calendar-roll.tl-out { filter:blur(3px); }
.tl-calendar .tl-calendar-come.tl-calendar-roll.tl-out { transform:translateY(-45%) scale(.86); }
.tl-calendar .tl-calendar-go.tl-calendar-roll.tl-out { transform:translateY(45%) scale(.86); }

/* Asked for less motion: nothing moves by itself and every change is at once. */
.tl-calendar.tl-calendar-still *, .tl-calendar.tl-calendar-still { transition:none !important; animation:none !important; }
@media (prefers-reduced-motion:reduce) {
  .tl-calendar .tl-calendar-dot { animation:none !important; }
  .tl-calendar .tl-calendar-fill, .tl-calendar .tl-calendar-lens, .tl-calendar .tl-calendar-roll { transition:none !important; }
}


/* The Batteries card (BatteriesCard.swift). One CSS pixel is one SwiftUI point. */
.tl-batteries { width:222px; height:208px; padding:var(--tl-card-padding); display:flex; flex-direction:column; align-items:flex-start; white-space:nowrap; }

/* HStack(spacing: 0) of rings with a Spacer of at most 22 between them; .padding(.top, 4) on each. */
.tl-batteries-rings { display:flex; gap:22px; padding-top:4px; }
/* VStack(spacing: 7): the ring, then its percentage. */
.tl-batteries-device { width:46px; display:flex; flex-direction:column; align-items:center; gap:7px; }

/* Everything drawn in a ring is one picture, 46 points square, so that nothing in it is rounded to a whole pixel. */
.tl-batteries-ring { width:46px; height:46px; }
/* Circle().stroke(lineWidth: 5): the stroke sits astride the 46-point circle. The level starts at twelve o'clock, round-capped. */
.tl-batteries-track, .tl-batteries-level { fill:none; stroke-width:5; }
.tl-batteries-track { stroke:rgba(255,255,255,.12); }
.tl-batteries-level { stroke:var(--tl-green); stroke-linecap:round; }
.tl-batteries-glyph { fill:#fff; }
/* bolt.fill at 8 bold, padded by 2 on a #141414 disc, 6 above the ring's top. */
.tl-batteries-badge circle { fill:#141414; }
.tl-batteries-badge path, .tl-batteries-bolt { fill:var(--tl-green); }

/* Text is hung from its baseline (an empty strut of the right height), so that no browser's idea of the font's ascent moves it. */
.tl-batteries-percent { display:block; height:17px; font:600 13px/0 var(--tl-rounded); color:#fff; }
.tl-batteries-percent::before { content:""; display:inline-block; height:13px; }

/* The Mac's power state, at the foot of the card. */
.tl-batteries-footer { margin-top:auto; }
.tl-batteries-status { display:flex; align-items:flex-start; height:15px; }
.tl-batteries-bolt { flex:none; margin-right:3.44px; }
.tl-batteries-title { font:600 12px/0 var(--tl-font); color:#fff; }
.tl-batteries-title::before { content:""; display:inline-block; height:12px; }
.tl-batteries-detail { height:14px; margin-top:1px; font:400 11px/0 var(--tl-font); color:var(--tl-secondary); }
.tl-batteries-detail::before { content:""; display:inline-block; height:11px; }


/* The Clipboard card of Home: 444 × 168. Numbers are ClipboardCard.swift's. */
.tl-clipboard { width:444px; height:168px; padding:16px; display:flex; flex-direction:column; }

/* Header: a row 24 high, 10 between its parts. */
.tl-clipboard .tl-clipboard-head { flex:none; height:24px; display:flex; align-items:center; gap:10px; white-space:nowrap; }
/* SwiftUI sets this line half a point higher in the row than a browser centres it. */
.tl-clipboard .tl-clipboard-name { transform:translateY(-.5px); font:600 15px/18px var(--tl-font); color:#fff; }

/* The filter: three segments 20 high in a capsule of HUD.fill, 2 of padding, one glass thumb behind the chosen one. */
.tl-clipboard .tl-clipboard-seg { position:relative; flex:none; display:flex; padding:2px; border-radius:12px; background:var(--tl-fill); }
.tl-clipboard .tl-clipboard-opt { position:relative; height:20px; padding:0 10px; border-radius:10px; font:500 11px/20px var(--tl-font); color:#fff; }
.tl-clipboard .tl-clipboard-opt > span { display:block; opacity:.6; transition:opacity .25s var(--tl-snappy); }
.tl-clipboard .tl-clipboard-opt[aria-checked="true"] { font-weight:600; }
.tl-clipboard .tl-clipboard-opt[aria-checked="true"] > span { opacity:1; }
.tl-clipboard .tl-clipboard-thumb { position:absolute; left:0; top:2px; width:34.22px; height:20px; border-radius:10px;
  transform:translateX(2px); transition:transform .25s var(--tl-snappy), width .25s var(--tl-snappy); }

/* "From another device", pushed to the right by the spacer. */
.tl-clipboard .tl-clipboard-remote { margin-left:auto; height:20px; display:flex; align-items:center; gap:4px; font:400 11px/20px var(--tl-font); color:var(--tl-secondary); }
.tl-clipboard .tl-clipboard-phone { flex:none; }

.tl-clipboard .tl-clipboard-more { flex:none; width:24px; height:24px; border-radius:50%; color:var(--tl-secondary); }

/* Four places 97 wide, 8 apart, whatever is in them. */
.tl-clipboard .tl-clipboard-tiles { position:relative; flex:1; margin-top:12px; }
.tl-clipboard .tl-clipboard-slot { position:absolute; left:0; top:0; width:97px; height:100%; z-index:1;
  transform:translateX(calc(var(--i) * 105px)); transition:transform .3s var(--tl-settle); }
.tl-clipboard .tl-clipboard-slot[aria-hidden="true"] { z-index:0; }
.tl-clipboard .tl-clipboard-item { width:100%; height:100%; }
.tl-clipboard .tl-clipboard-tile { position:relative; isolation:isolate; width:100%; height:100%; padding:10px; display:flex; flex-direction:column; align-items:flex-start;
  border-radius:var(--tl-tile-radius); text-align:left; white-space:nowrap; }
.tl-clipboard .tl-clipboard-tile:focus-visible { border-radius:var(--tl-tile-radius); }
.tl-clipboard .tl-clipboard-tile::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--tl-fill); }

.tl-clipboard .tl-clipboard-title { margin-top:auto; max-width:100%; overflow:hidden; text-overflow:ellipsis; font:600 11.5px/14px var(--tl-font); color:#fff; }
.tl-clipboard .tl-clipboard-detail { max-width:100%; overflow:hidden; text-overflow:ellipsis; font:400 10px/13px var(--tl-font); color:var(--tl-secondary); }

/* What was copied. */
.tl-clipboard .tl-clipboard-snippet { align-self:stretch; padding:6px; border-radius:7px; background:rgba(0,0,0,.35); overflow:hidden; }
.tl-clipboard .tl-clipboard-snippet > span { display:block; overflow:hidden; text-overflow:ellipsis; }
.tl-clipboard .tl-clipboard-code { font:500 9.5px/12px var(--tl-mono); color:var(--tl-green); white-space:pre; }
.tl-clipboard .tl-clipboard-prose { font:400 10px/13px var(--tl-font); color:rgba(255,255,255,.85); }
.tl-clipboard .tl-clipboard-swatch { width:34px; height:34px; border-radius:8px; background:var(--tl-accent); }
.tl-clipboard .tl-clipboard-file { flex:none; }

/* The app's corners are continuous ones (RoundedRectangle(style: .continuous)): the same curve, as a path, where the box's size is fixed. */
@supports (clip-path:path("M0 0H1V1Z")) {
  .tl-clipboard .tl-clipboard-tile::before { border-radius:0; clip-path:path("M21.4 0L75.6 0C81.76 0 84.84 0 88.16 1.05C91.78 2.37 94.63 5.22 95.95 8.84C97 12.16 97 15.24 97 21.4L97 78.6C97 84.76 97 87.84 95.95 91.16C94.63 94.78 91.78 97.63 88.16 98.95C84.84 100 81.76 100 75.6 100L21.4 100C15.24 100 12.16 100 8.84 98.95C5.22 97.63 2.37 94.78 1.05 91.16C0 87.84 0 84.76 0 78.6L0 21.4C0 15.24 0 12.16 1.05 8.84C2.37 5.22 5.22 2.37 8.84 1.05C12.16 0 15.24 0 21.4 0Z"); }
  .tl-clipboard .tl-clipboard-code { border-radius:0; clip-path:path("M10.7 0L66.3 0C69.38 0 70.92 0 72.58 0.52C74.39 1.18 75.82 2.61 76.48 4.42C77 6.08 77 7.62 77 10.7L77 25.3C77 28.38 77 29.92 76.48 31.58C75.82 33.39 74.39 34.82 72.58 35.48C70.92 36 69.38 36 66.3 36L10.7 36C7.62 36 6.08 36 4.42 35.48C2.61 34.82 1.18 33.39 0.52 31.58C0 29.92 0 28.38 0 25.3L0 10.7C0 7.62 0 6.08 0.52 4.42C1.18 2.61 2.61 1.18 4.42 0.52C6.08 0 7.62 0 10.7 0Z"); }
  .tl-clipboard .tl-clipboard-prose { border-radius:0; clip-path:path("M10.7 0L66.3 0C69.38 0 70.92 0 72.58 0.52C74.39 1.18 75.82 2.61 76.48 4.42C77 6.08 77 7.62 77 10.7L77 27.3C77 30.38 77 31.92 76.48 33.58C75.82 35.39 74.39 36.82 72.58 37.48C70.92 38 69.38 38 66.3 38L10.7 38C7.62 38 6.08 38 4.42 37.48C2.61 36.82 1.18 35.39 0.52 33.58C0 31.92 0 30.38 0 27.3L0 10.7C0 7.62 0 6.08 0.52 4.42C1.18 2.61 2.61 1.18 4.42 0.52C6.08 0 7.62 0 10.7 0Z"); }
  .tl-clipboard .tl-clipboard-swatch { border-radius:0; clip-path:path("M12.23 0L21.77 0C25.29 0 27.05 0 28.95 0.6C31.02 1.35 32.65 2.98 33.4 5.05C34 6.95 34 8.71 34 12.23L34 21.77C34 25.29 34 27.05 33.4 28.95C32.65 31.02 31.02 32.65 28.95 33.4C27.05 34 25.29 34 21.77 34L12.23 34C8.71 34 6.95 34 5.05 33.4C2.98 32.65 1.35 31.02 0.6 28.95C0 27.05 0 25.29 0 21.77L0 12.23C0 8.71 0 6.95 0.6 5.05C1.35 2.98 2.98 1.35 5.05 0.6C6.95 0 8.71 0 12.23 0Z"); }
}

/* For someone who asked for less motion, and for the first placing of things: no travelling. */
.tl-clipboard.tl-clipboard-still .tl-clipboard-thumb,
.tl-clipboard.tl-clipboard-still .tl-clipboard-opt > span,
.tl-clipboard.tl-clipboard-still .tl-clipboard-slot,
.tl-clipboard.tl-clipboard-still .tl-clipboard-item,
.tl-clipboard.tl-clipboard-still .tl-press { transition:none; }
@media (prefers-reduced-motion:reduce) {
  .tl-clipboard .tl-clipboard-thumb, .tl-clipboard .tl-clipboard-opt > span, .tl-clipboard .tl-clipboard-slot { transition:none; }
}


/* Quick controls: four tiles in a 2 × 2 grid. QuickControlsCard.swift, value for value.
   Card 296 × 168, padding cardPadding − 6 = 10, grid spacing 8, so each tile is 134 × 70. */
.tl-controls { width:296px; height:168px; padding:10px; display:grid; grid-template-columns:134px 134px; grid-template-rows:70px 70px; gap:8px; }

/* A tile: HStack(spacing 9) with 10 at either side. */
.tl-controls .tl-controls-tile { position:relative; display:flex; align-items:center; gap:9px; min-width:0; padding:0 10px;
  overflow:hidden; border-radius:12px; text-align:left; cursor:pointer; touch-action:manipulation; }
/* What it stands on: HUD.fill in RoundedRectangle(cornerRadius: cardRadius − 10, style: .continuous).
   The outline is that shape at 134 × 70, its corners easing into the sides as the app's do. */
.tl-controls-plate { position:absolute; left:0; top:0; width:134px; height:70px; background:var(--tl-fill); pointer-events:none;
  clip-path:path("M18.34 0H115.66C120.94 0 123.58 0 126.42 0.9C129.53 2.03 131.97 4.47 133.1 7.58C134 10.42 134 13.06 134 18.34V51.66C134 56.94 134 59.58 133.1 62.42C131.97 65.53 129.53 67.97 126.42 69.1C123.58 70 120.94 70 115.66 70H18.34C13.06 70 10.42 70 7.58 69.1C4.47 67.97 2.03 65.53 0.9 62.42C0 59.58 0 56.94 0 51.66V18.34C0 13.06 0 10.42 0.9 7.58C2.03 4.47 4.47 2.03 7.58 0.9C10.42 0 13.06 0 18.34 0Z"); }
/* A sideways drag on Sound is the level; up and down is still the page's. */
.tl-controls .tl-controls-tile[data-control="sound"] { touch-action:pan-y; }
/* Sliding the level is not a press: the tile comes back up while the fingers move. */
.tl-controls .tl-controls-tile.tl-controls-dragging:active { transform:none; opacity:1; }

/* The level: white at twelve in a hundred, from the left, as far as the level is up.
   Only this moves, on the app's interactiveSpring(response: 0.14). */
.tl-controls-level { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.12);
  transform-origin:0 50%; transform:scaleX(.6); transition:transform .14s var(--tl-spring); pointer-events:none; }

/* The glyph circle: 36 across, clear glass, and its tint over that when the control is on. */
.tl-controls-orb { flex:none; width:36px; height:36px; border-radius:50%; }
.tl-controls .tl-controls-tint { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; opacity:0;
  transition:opacity .25s var(--tl-snappy); }
.tl-controls .tl-controls-tint.tl-controls-lit { opacity:1; }
.tl-controls-tile[data-control="timer"] { --tl-tint:var(--tl-orange); }
.tl-controls-tile[data-control="sound"], .tl-controls-tile[data-control="wifi"] { --tl-tint:var(--tl-accent); }
.tl-controls-tile[data-control="mic"] { --tl-tint:var(--tl-green); }

/* Glyphs are drawn in the circle's own 36 × 36, measured from its middle, and lie one over the other to change places. */
.tl-controls-glyph { position:absolute; left:0; top:0; width:36px; height:36px; color:#fff; }
.tl-controls-glyph svg { position:absolute; left:0; top:0; }
/* A wave the level hasn't earned is still there, faintly. */
.tl-controls-wave.tl-controls-faint { opacity:.3; }
/* A slash clears a band through its glyph, wider than itself by 0.85 either side. */
.tl-controls-glyph[data-glyph="speaker-off"] .tl-controls-cut { clip-path:path(evenodd, "M0 0H36V36H0ZM13.52 11.68L24.44 22.6A1.39 1.39 0 0 1 22.48 24.57L11.56 13.65A1.39 1.39 0 0 1 13.52 11.68Z"); }
.tl-controls-glyph[data-glyph="mic-off"] .tl-controls-cut { clip-path:path(evenodd, "M0 0H36V36H0ZM13.77 11.22L24.69 22.14A1.39 1.39 0 0 1 22.73 24.1L11.81 13.18A1.39 1.39 0 0 1 13.77 11.22Z"); }
.tl-controls-glyph[data-glyph="wifi-off"] .tl-controls-cut { clip-path:path(evenodd, "M0 0H36V36H0ZM13.52 11.26L24.44 22.18A1.39 1.39 0 0 1 22.48 24.14L11.56 13.22A1.39 1.39 0 0 1 13.52 11.26Z"); }

/* VStack(alignment: .leading, spacing: 1): the name at 12 semibold, what it is doing at 10.5 in HUD.secondary. */
.tl-controls-text { position:relative; transform:translateY(-.5px); flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tl-controls-title { font:600 12px/15px var(--tl-font); color:#fff; white-space:nowrap; }
.tl-controls-value { position:relative; height:13px; font:400 10.5px/13px var(--tl-font); font-variant-numeric:tabular-nums; color:var(--tl-secondary); }
.tl-controls-value > span { position:absolute; left:0; top:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* For someone who asked for less motion: everything is where it is going, at once. */
.tl-controls.tl-controls-still *, .tl-controls.tl-controls-still *::before, .tl-controls.tl-controls-still *::after { transition:none !important; animation:none !important; }


/* The Weather card (WeatherCard.swift). One CSS pixel is one SwiftUI point. */
/* .hudCard(sky): blue by day, top to bottom, in place of the card's usual fill. The colours are the app's as it draws them. */
.tl-weather { width:148px; height:168px; background:linear-gradient(180deg,#2e5aac,#5b92d3); white-space:nowrap; }
/* Text is hung from its baseline (an empty strut of the right height), so that no browser's idea of the font's ascent moves it. */
.tl-weather-city, .tl-weather-now, .tl-weather-summary, .tl-weather-range { position:absolute; left:16px; line-height:0; color:#fff; }
.tl-weather-city::before, .tl-weather-now::before, .tl-weather-summary::before, .tl-weather-range::before { content:""; display:inline-block; }
/* Text(city).font(.sf(13, .semibold)) with location.fill at 8, three points on. */
.tl-weather-city { top:16px; font:600 13px/0 var(--tl-font); display:flex; align-items:baseline; }
.tl-weather-city::before { height:12.5px; }
.tl-weather-here { margin-left:4.5px; align-self:flex-start; margin-top:5.2px; }
/* The temperature: .sf(40, .light), pulled up three points. */
.tl-weather-now { top:27px; font:300 40px/0 var(--tl-font); letter-spacing:-.25px; font-variant-numeric:tabular-nums; }
.tl-weather-now::before { height:41.2px; }
/* The condition, in the symbol's own colours, three points above its name. */
.tl-weather-sky { position:absolute; left:16.6px; top:104.6px; }
.tl-weather-summary { top:124px; font:600 11px/0 var(--tl-font); }
.tl-weather-summary::before { height:11px; }
.tl-weather-range { top:138px; font:600 11px/0 var(--tl-font); opacity:.75; }
.tl-weather-range::before { height:11px; }