/* Arrowslit landing page: Lighthouse Hill in absurd ink. Paper notes taped over a felt-pen drawing
   (scene.js), with the real bar running along the top. */

@font-face {
  font-family: "Shantell Sans";
  src: url(fonts/shantell-sans-display.woff2) format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Shantell Sans Hand";
  src: url(fonts/shantell-sans-hand.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url(fonts/atkinson-hyperlegible-next.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
/* Fallbacks scaled to take the same room as the web fonts, so the swap doesn't move the page */
@font-face { font-family: "Shantell Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 117%; ascent-override: 87.2%; descent-override: 27.3%; line-gap-override: 0%; }
@font-face { font-family: "Hand Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 112%; ascent-override: 91%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 98.6%; ascent-override: 99.8%; descent-override: 32%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 98.6%; ascent-override: 99.8%; descent-override: 32%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* the page: white paper notes at every hour, a felt pen, yellow tape */
  --paper: #ffffff;
  --text: #141414;
  --text-2: #3b3b3b;
  --pen: #111111;
  --tape: #ffe04ab8;
  --hi: #ffe04a;
  --red: #d03a28;
  --link: #2e58d8;
  --ring: #2e58d8;
  --sky: #86cbf2;
  --sea: #2e58d8;
  --screen: #86cbf2;
  --strip: var(--sky);
  /* the ring around the widget a script makes */
  --amber: #f5821f;
  /* the app's windows: Add here, the right-click menu, the Store */
  --win-bg: #f4f2ef;
  --win-fg: #1d1d1f;
  --win-ring: #00000026;
  --win-edge: #ffffff99;
  --sys-blue: #0068da;
  --blue-fill: #0068da;
  --shadow-1: #1b2a5240;
  --shadow-2: #1b2a5233;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --bar-h: 40px;
  --display: "Shantell Sans", "Shantell Fallback", "Chalkboard SE", sans-serif;
  --hand: "Shantell Sans Hand", "Hand Fallback", "Chalkboard SE", sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Fallback", "Helvetica Neue", sans-serif;
  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* felt-pen pieces: the washing line, a rule, and the highlighter */
  --string: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 104%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 9 L10 9.9 L20 9.3 L30 9.6 L40 10.8 L50 10.5 L60 10.2 L70 11.4 L80 11.5 L90 10.9 L100 11.7 L110 12.3 L120 11.5 L130 11.8 L140 12.8 L150 12.1 L160 11.9 L170 12.9 L180 12.7 L190 11.9 L200 12.7 L210 13 L220 12 L230 12.3 L240 13 L250 12.1 L260 11.7 L270 12.6 L280 12.1 L290 11.2 L300 11.9 L310 11.9 L320 10.7 L330 10.9 L340 11.4 L350 10.2 L360 9.9 L370 10.5 L380 9.7 L390 8.8 L400 9.3%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%272%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  --rule: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%2710%27%3E%3Cpath d=%27M0 5 L2.5 5.7 L5 5.9 L7.5 5.9 L10 6 L12.5 6 L15 5.9 L17.5 5.9 L20 5.8 L22.5 5.7 L25 5.6 L27.5 5.6 L30 5.6 L32.5 5.6 L35 5.7 L37.5 5.8 L40 6 L42.5 6.1 L45 6.3 L47.5 6.4 L50 6.5 L52.5 6.6 L55 6.6 L57.5 6.6 L60 6.5 L62.5 6.3 L65 6.1 L67.5 5.9 L70 5.6 L72.5 5.3 L75 5 L77.5 4.7 L80 4.5 L82.5 4.3 L85 4.1 L87.5 4.1 L90 4 L92.5 4 L95 4.1 L97.5 4.1 L100 4.2 L102.5 4.3 L105 4.4 L107.5 4.4 L110 4.4 L112.5 4.4 L115 4.3 L117.5 4.2 L120 4 L122.5 3.9 L125 3.7 L127.5 3.6 L130 3.5 L132.5 3.4 L135 3.4 L137.5 3.4 L140 3.5 L142.5 3.7 L145 3.9 L147.5 4.1 L150 4.4 L152.5 4.7 L155 5 L157.5 5.3 L160 5.5%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%272.4%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  --rule-night: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%2710%27%3E%3Cpath d=%27M0 5 L2.5 5.7 L5 5.9 L7.5 5.9 L10 6 L12.5 6 L15 5.9 L17.5 5.9 L20 5.8 L22.5 5.7 L25 5.6 L27.5 5.6 L30 5.6 L32.5 5.6 L35 5.7 L37.5 5.8 L40 6 L42.5 6.1 L45 6.3 L47.5 6.4 L50 6.5 L52.5 6.6 L55 6.6 L57.5 6.6 L60 6.5 L62.5 6.3 L65 6.1 L67.5 5.9 L70 5.6 L72.5 5.3 L75 5 L77.5 4.7 L80 4.5 L82.5 4.3 L85 4.1 L87.5 4.1 L90 4 L92.5 4 L95 4.1 L97.5 4.1 L100 4.2 L102.5 4.3 L105 4.4 L107.5 4.4 L110 4.4 L112.5 4.4 L115 4.3 L117.5 4.2 L120 4 L122.5 3.9 L125 3.7 L127.5 3.6 L130 3.5 L132.5 3.4 L135 3.4 L137.5 3.4 L140 3.5 L142.5 3.7 L145 3.9 L147.5 4.1 L150 4.4 L152.5 4.7 L155 5 L157.5 5.3 L160 5.5%27 fill=%27none%27 stroke=%27%23f2eeff%27 stroke-width=%272.4%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  --highlight: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 20%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M2 4.5 9 2.6 50 2 92 1.6 98 3.4 96.4 7 99 10.6 97.6 15.2 99.2 18.4 60 18.6 8 19 1 17.4 3 13.2 .8 9.4Z%27 fill=%27%23ffe04a%27/%3E%3C/svg%3E");
}
:root[data-mode="dark"] {
  --sky: #232662;
  --sea: #14184a;
  --screen: #2f3374;
  --win-bg: #1e1d1c;
  --win-fg: #f5f5f7;
  --win-ring: #000;
  --win-edge: #ffffff17;
  --sys-blue: #0a84ff;
  --shadow-1: #000;
  --shadow-2: #000c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--sky); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  scroll-padding-top: calc(var(--bar-h) + 24px);
}
body { font: 400 18px/1.55 var(--body); overflow-x: hidden; touch-action: pan-y pinch-zoom; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--hi); color: #111; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; top: 8px; left: 10px; z-index: 100; padding: 10px 14px; border-radius: 10px;
  background: var(--paper); color: var(--text); box-shadow: 0 0 0 2.4px var(--pen);
  font: 600 16px/1 var(--hand); text-decoration: none; translate: 0 calc(-100% - 20px);
}
.skip:focus-visible { translate: none; }

/* The drawing lives behind the page. Until it paints, or without it, the page sits on its sky. */
.scene {
  position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh;
  background: linear-gradient(var(--sky) 0 61%, var(--sea) 61%);
}
/* The opening (see land() in main.js): a title card over the whole drawing, with the bar big in the middle of it.
   The bar then stretches up into its place at the top, the card drifts away and the page comes in. The title is
   the page's largest text, so it is also its first large paint. */
.opening { display: none; }
.intro .opening {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3vh, 32px); padding: 0 28vw 16vh 2vw; pointer-events: none; text-align: center;
  --tile-h: 38px; --bar-font: 400 16px/1 var(--mac); --w-radius: 16px; --halo: var(--sky);
}
.op-mark {
  font: 800 clamp(76px, 10vw, 136px)/.92 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: -.012em;
  color: #fff; rotate: -1.5deg; -webkit-text-stroke: .045em var(--pen); paint-order: stroke fill; text-shadow: 0 .045em 0 #1111111f;
}
.op-mark { position: relative; isolation: isolate; }
.op-bar {
  display: flex; align-items: center; gap: 8px; width: min(780px, 100%); padding: 7px 8px; border-radius: 22px;
  background: color-mix(in srgb, #ffffff 36%, transparent); box-shadow: inset 0 0 0 1px #ffffffb3, 0 20px 44px -20px #0b1d4a73;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.op-bar .w { gap: 8px; padding: 0 13px; }
/* its widgets glow in the lighthouse's weak light at night (main.js sets --glow; none of these is in the card's
   transitions, so the light's flicker stays sharp) */
.opening .op-bar:not(.op-fly) .w {
  background-image: linear-gradient(0deg, rgb(255 224 74 / calc(var(--glow, 0) * .55)), rgb(255 224 74 / 0) 82%);
  outline: 1.5px solid rgb(255 212 59 / calc(var(--glow, 0) * .8)); outline-offset: 0;
  filter: drop-shadow(0 5px 10px rgb(255 212 59 / calc(var(--glow, 0) * .9)));
}
.op-bar svg { width: 18px; height: 18px; }
.op-app { gap: 15px !important; }
.op-app b { font-weight: 700; }
.op-gap { flex: 1; }
/* the card's sun and moon, one over the other: they cross over halfway through the sunrise */
.op-sun { position: relative; }
.op-sun svg { transition: opacity .45s .55s; }
.op-sun .on { position: absolute; left: 13px; opacity: 0; }
[data-mode="dark"] .op-sun .on { opacity: 1; }
[data-mode="dark"] .op-sun .off { opacity: 0; }
.op-line { font: 600 clamp(18px, 1.7vw, 23px)/1.3 var(--hand); color: var(--pen); text-shadow: 0 0 14px var(--halo), 0 0 4px var(--halo); }
/* the day comes: the card's bar and line change with the sky; their words turn from light to dark quickly, halfway,
   where either reads (fading slowly, they would go grey on grey) */
.opening .op-bar, .opening .w, .op-line {
  transition: background-color 1.6s ease-in-out, box-shadow 1.6s ease-in-out, text-shadow 1.6s ease-in-out, color .14s .73s;
}
/* asleep: z's rising beside the lighthouse's hat (the page puts them by its lamp), from the night until it wakes */
.op-z { display: none; position: fixed; z-index: 60; left: -99px; top: -99px; font: 400 var(--zs, 16px)/1 var(--hand); color: #f2eeff; pointer-events: none; transition: opacity .3s, color 1.6s ease-in-out; }
.asleep .op-z { display: block; }
[data-mode="light"] .op-z { color: var(--pen); }
.op-z i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: op-z 1.5s linear infinite; }
.op-z i:nth-child(2) { animation-delay: .5s; }
.op-z i:nth-child(3) { animation-delay: 1s; }
.op-z.gone { opacity: 0; }
@keyframes op-z {
  0% { opacity: 0; transform: translate(0, 0) scale(.8) rotate(-9deg); }
  15%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--zs) * 1.8), calc(var(--zs) * -3)) scale(1.5) rotate(-9deg); }
}
[data-mode="dark"] .op-line { color: #f2eeff; }
[data-mode="dark"] .op-bar { background: color-mix(in srgb, #0d1030 42%, transparent); box-shadow: inset 0 0 0 1px #ffffff2e, 0 20px 44px -20px #000000a6; }
/* the card's bar on its way up: a copy of it, out of the card, that stretches and shrinks into the real bar */
.op-fly { position: fixed; margin: 0; transform-origin: 0 0; }
/* behind the card the page waits, and doesn't scroll: the bar and the notes come in once the bar has reached the top */
.intro { scrollbar-gutter: stable; }
.intro body { overflow: hidden; }
.intro .dock { opacity: 0; pointer-events: none; }
.intro .hero > * { opacity: 0; translate: 0 14px; pointer-events: none; }
.intro.op-bar-in .dock { opacity: 1; transition: opacity .3s; }
.intro.op-page-in .hero > * { opacity: 1; translate: none; transition: opacity .45s, translate .5s var(--ease); }
.intro-skip .dock, .intro-skip .hero > * { transition: none !important; }
@media (max-width: 699.98px), (max-aspect-ratio: 10/11) {
  /* on phones the card sits low, over the sea under the lighthouse, its title on two lines */
  .intro .opening { justify-content: flex-end; padding: 0 4vw 10vh; --tile-h: 36px; --halo: #14184acc; }
  .op-mark { font-size: clamp(64px, 21vw, 112px); line-height: .86; }
  .op-mark .op-w1, .op-mark .op-w2 { display: block; }
  .op-line { color: #fff; }
  .op-app span, .op-snd, .opening .clock .day { display: none; }
  .op-bar { width: auto; min-width: min(330px, 92vw); }
}
.scene canvas { display: block; }
main { position: relative; z-index: 1; overflow-x: clip; }
/* past the last note, room to scroll into the drawing (see the dive in main.js) */
.dive { height: 1800vh; }

/* ---------- The bar, drawn as the app draws it ---------- */

/* Theme tokens, from each theme's config.json in Resources/themes */
[data-theme] { --rest-h: 40px; --strip-bg: transparent; --strip-edge: none; --strip-radius: 0px; --strip-m: 0px; --w-bg: #242629ee; --w-border: #ffffff1f; --w-shadow: #00000040; --w-glow: none; --w-radius: 14px; --tile-h: 28px; --fg: #f5f5f7; --muted: #a1a1a6; --accent: #0a84ff; --accent-text: #ffffff; --ws-off: #f5f5f7; --ws-ind: #0a84ff; --ws-on: #ffffff; --ws-r: 10px; --pop-bg: #242629ee; --pop-border: #ffffff1f; --pop-radius: 14px; --raised: #36383c; --track: #f5f5f726; --bar-font: 400 13px/1 var(--mac); --pop-font: 400 13px/16px var(--mac); }
[data-theme] { --tray-tint: color-mix(in srgb, var(--fg) 7%, transparent); --tray-line: color-mix(in srgb, var(--fg) 12%, transparent); --tray-backing: transparent; }
[data-theme="built-in"] { --tray-backing: #2b2b2b; }
[data-mode="light"] [data-theme="built-in"] { --tray-backing: #f7f7f7; }
[data-mode="light"] [data-theme] { --w-bg: #f8f8faed; --w-border: #ffffffb3; --w-shadow: #00000014; --fg: #1d1d1f; --muted: #6e6e73; --accent: #007aff; --ws-off: #1d1d1f; --ws-ind: #007aff; --pop-bg: #f8f8faed; --pop-border: #ffffffb3; --raised: #ffffff; --track: #1d1d1f26; }
[data-theme="catppuccin"] { --strip-bg: #11111bee; --w-bg: #313244; --w-border: transparent; --w-shadow: transparent; --w-radius: 14px; --fg: #cdd6f4; --muted: #a6adc8; --accent: #cba6f7; --accent-text: #1e1e2e; --ws-off: #a6adc8; --ws-ind: #cba6f7; --ws-on: #1e1e2e; --ws-r: 14px; --pop-bg: #1e1e2eee; --pop-border: #cdd6f41f; --pop-radius: 14px; --raised: #45475a; --track: #585b70; --bar-font: 500 13px/1 var(--mac); --pop-font: 500 13px/16px var(--mac); }
[data-mode="light"] [data-theme="catppuccin"] { --strip-bg: #dce0e8ee; --w-bg: #eff1f5; --w-border: transparent; --w-shadow: transparent; --fg: #4c4f69; --muted: #6c6f85; --accent: #8839ef; --accent-text: #eff1f5; --ws-off: #6c6f85; --ws-ind: #8839ef; --ws-on: #eff1f5; --pop-bg: #eff1f5ee; --pop-border: #4c4f691f; --raised: #ccd0da; --track: #bcc0cc; }
[data-theme="gruvbox"] { --strip-bg: linear-gradient(180deg, #282828ee 0%, #282828ee 77.5%, #cc241d 77.5%, #cc241d 85%, #d65d0e 85%, #d65d0e 92.5%, #d79921 92.5%, #d79921 100%); --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 3px; --fg: #ebdbb2; --muted: #a89984; --accent: #fe8019; --accent-text: #282828; --ws-off: #a89984; --ws-ind: #fe8019; --ws-on: #282828; --ws-r: 3px; --pop-bg: #282828ee; --pop-border: #ebdbb21f; --pop-radius: 3px; --raised: #3c3836; --track: #504945; --bar-font: 400 13px/1 "American Typewriter", var(--mac); --pop-font: 400 13px/13px "American Typewriter", var(--mac); }
[data-mode="light"] [data-theme="gruvbox"] { --strip-bg: linear-gradient(180deg, #fbf1c7ee 0%, #fbf1c7ee 77.5%, #cc241d 77.5%, #cc241d 85%, #d65d0e 85%, #d65d0e 92.5%, #d79921 92.5%, #d79921 100%); --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #3c3836; --muted: #7c6f64; --accent: #af3a03; --accent-text: #fbf1c7; --ws-off: #7c6f64; --ws-ind: #af3a03; --ws-on: #fbf1c7; --pop-bg: #fbf1c7ee; --pop-border: #3c38361f; --raised: #ebdbb2; --track: #d5c4a1; }
[data-theme="leman"] { --strip-bg: #0f1d21ee; --strip-edge: inset 0 0 0 1px #dcebe81f; --strip-radius: 14px; --strip-m: 6px; --tile-h: 22px; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 10px; --fg: #dcebe8; --muted: #8fb0ad; --accent: #5cc5b8; --accent-text: #0f1d21; --ws-off: #8fb0ad; --ws-ind: #5cc5b829; --ws-on: #5cc5b8; --ws-r: 7px; --pop-bg: #0f1d21ee; --pop-border: #dcebe81f; --pop-radius: 10px; --raised: #1d3238; --track: #dcebe826; --bar-font: 400 13px/1 var(--mac); }
[data-mode="light"] [data-theme="leman"] { --strip-bg: #edf3f2ee; --strip-edge: inset 0 0 0 1px #12343b1f; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #12343b; --muted: #4d6b70; --accent: #0e7c7b; --accent-text: #ffffff; --ws-off: #4d6b70; --ws-ind: #0e7c7b1f; --ws-on: #0e7c7b; --pop-bg: #edf3f2ee; --pop-border: #12343b1f; --track: #12343b26; }
[data-theme="nord"] { --rest-h: 30px; --bar-h: 30px; --strip-bg: #2e3440ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 5px; --fg: #eceff4; --muted: #a3acbd; --accent: #88c0d0; --accent-text: #2e3440; --ws-off: #a3acbd; --ws-ind: #88c0d0; --ws-on: #eceff4; --ws-r: 1.5px; --pop-bg: #2e3440ee; --pop-border: #eceff41f; --pop-radius: 8px; --raised: #3b4252; --track: #4c566a; --bar-font: 500 12px/1 "Avenir Next", var(--mac); --pop-font: 500 12px/16px "Avenir Next", var(--mac); }
[data-mode="light"] [data-theme="nord"] { --strip-bg: #eceff4ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #2e3440; --muted: #4c566a; --accent: #5e81ac; --accent-text: #eceff4; --ws-off: #4c566a; --ws-ind: #5e81ac; --ws-on: #2e3440; --pop-bg: #eceff4ee; --pop-border: #2e34401f; --raised: #d8dee9; --track: #d8dee9; }
[data-theme="notch"] { --strip-bg: #000000; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-radius: 6px; --muted: #8e8e93; --accent: #64d2ff; --accent-text: #000000; --ws-off: #8e8e93; --ws-ind: transparent; --ws-on: #f5f5f7; --ws-r: 0px; --pop-bg: #000000; --pop-border: #ffffff1a; --pop-radius: 6px; --raised: #1c1c1e; --track: #ffffff26; --bar-font: 500 13px/1 var(--mac); --pop-font: 500 13px/16px var(--mac); }
[data-mode="light"] [data-theme="notch"] { --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --fg: #f5f5f7; --muted: #8e8e93; --accent: #64d2ff; --ws-off: #8e8e93; --ws-ind: transparent; --pop-bg: #000000; --pop-border: #ffffff1a; --raised: #1c1c1e; --track: #ffffff26; }
[data-theme="phosphor"] { --tile-h: 27px; --strip-bg: #110d06ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-glow: drop-shadow(0 0 4px #ffb00080); --w-radius: 0px; --fg: #ffb000; --muted: #b8800c; --accent: #ffcc5c; --accent-text: #110d06; --ws-off: #b8800c; --ws-ind: #ffb000; --ws-on: #110d06; --ws-r: 0px; --pop-bg: #110d06ee; --pop-border: #ffb00059; --pop-radius: 0px; --raised: #2b2009; --track: #ffb00033; --bar-font: 400 12px/1 "Monaco", var(--mono); --pop-font: 400 12px/15px "Monaco", var(--mono); }
[data-mode="light"] [data-theme="phosphor"] { --strip-bg: #f6f1e6ee; --w-bg: transparent; --w-border: transparent; --w-shadow: transparent; --w-glow: none; --fg: #5c3a00; --muted: #87683b; --accent: #a86400; --accent-text: #f6f1e6; --ws-off: #87683b; --ws-ind: #5c3a00; --ws-on: #f6f1e6; --pop-bg: #f6f1e6ee; --pop-border: #5c3a0040; --raised: #ebe2cf; --track: #5c3a0026; }

/* The dock holds the bar and its popups at the top of the window, for the whole page.
   Once the page scrolls, a strip of sky slides in behind it so text never runs under its widgets. */
.dock { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h); }
[data-mode="dark"] .dock { color-scheme: dark; --ring: #ffe04a; }
.dock::before {
  content: ""; position: absolute; inset: 0 0 -7px; z-index: -1; pointer-events: none;
  background: var(--rule) left bottom / 160px 10px repeat-x, linear-gradient(var(--strip) 0 0) top / 100% calc(100% - 5px) no-repeat;
  opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .3s var(--ease);
}
/* The strip is the colour of the sky behind it (set by main.js); its pen line turns light when the sky is dark */
[data-mode="dark"] .dock::before, .dock[data-sky="dark"]::before { background-image: var(--rule-night), linear-gradient(var(--strip) 0 0); }
.dock[data-sky="light"]::before { background-image: var(--rule), linear-gradient(var(--strip) 0 0); }
.dock.scrolled::before { opacity: 1; translate: none; }

.bar {
  position: absolute; top: 0; left: 0; right: 0; height: calc(var(--bar-h) - 2 * var(--strip-m));
  margin: var(--strip-m) var(--strip-m) 0; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto;
  background: var(--strip-bg); box-shadow: var(--strip-edge); border-radius: var(--strip-radius);
  transition: background .25s, border-radius .25s, margin .25s var(--ease), height .25s var(--ease);
}
.bar .g { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Becoming the header: the widgets fade out, swap in one step and fade back in (see dockState in main.js) */
.bar .g { transition: opacity .13s ease; }
.bar.swap .g { opacity: 0; }
.w {
  flex: none; height: var(--tile-h); display: flex; align-items: center; gap: 7px; padding: 0 10px; white-space: nowrap;
  background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius);
  filter: var(--w-glow); color: var(--fg); font: var(--bar-font); text-decoration: none; cursor: default; user-select: none;
  transition: background .15s, border-radius .25s, box-shadow .2s;
}
.w[data-pop], .w.app, .w.more, .w.moon { cursor: pointer; }
.w[data-pop]:hover, .w.more:hover, .w.moon:hover { background: var(--raised); }
.w.over, .w[hidden] { display: none !important; }
.w svg { width: 15px; height: 15px; flex: none; }
.w.apple { padding: 0 9px; font-size: 15px; }
.w.ws { position: relative; padding: 0 10px; gap: 6px; }
.wsi { height: 100%; display: flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: var(--ws-r); color: var(--ws-off); position: relative; cursor: pointer; transition: background .15s, color .25s; }
.wsi.on { color: var(--ws-on); }
.ws-fill .wsi.on { background: var(--ws-ind); }
.ws-under .wsi.on::after { content: ""; position: absolute; left: 50%; translate: -50% 0; bottom: 2px; width: 12px; height: 3px; border-radius: var(--ws-r); background: var(--ws-ind); }
/* On the live bar one highlight slides between workspaces */
.ind { position: absolute; left: 0; top: 0; width: var(--w); height: 100%; translate: var(--x) 0; border-radius: var(--ws-r); background: var(--ws-ind); transition: translate .3s var(--ease), width .3s var(--ease); }
.ws-under .ind { top: auto; bottom: 2px; height: 3px; width: 12px; translate: calc(var(--x) + var(--w) / 2 - 6px) 0; }
.ws-text .ind { display: none; }
#bar .wsi.on { background: none; }
#bar .wsi.on::after { content: none; }
/* Workspace app icons, drawn at 14 points with their padding as on the real bar */
.ai { width: 14px; height: 14px; flex: none; pointer-events: none; }
.menus { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .3s var(--ease); }
.menus > span { overflow: hidden; display: flex; gap: 14px; }
.menus > span > :first-child { margin-left: 6px; }
.menus a { text-decoration: none; }
.app.expand .menus { grid-template-columns: 1fr; }
.w.more { padding: 0 9px; letter-spacing: .08em; }
/* Sound: hovering it opens a volume slider before the icon, as on the right of the real bar */
.snd .slide { display: grid; grid-template-columns: 0fr; margin-right: -7px; transition: grid-template-columns .3s var(--ease), margin .3s var(--ease); }
.snd .slide > span { overflow: hidden; display: flex; align-items: center; gap: 7px; }
.snd.expand .slide { grid-template-columns: 1fr; margin-right: 0; }
.snd input {
  appearance: none; width: 72px; height: 4px; margin: 0 2px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(var(--accent) 0 0) 0 / var(--v, 64%) 100% no-repeat, var(--track);
}
.snd input::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px #0000004d, 0 1px 2px #00000059; }
.snd input::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px #0000004d, 0 1px 2px #00000059; }
.snd .pct { min-width: 4ch; text-align: right; }
/* The night switch: a script widget with an icon and an action, as the app can draw one */
.w.moon { padding: 0 9px; }
.w.moon svg { width: 16px; height: 16px; }
.moon .on, .moon[aria-pressed="true"] .off { display: none; }
.moon[aria-pressed="true"] .on { display: block; }

/* Now playing: artwork, the track and an equalizer, as on the real bar */
.art { width: 16px; height: 16px; flex: none; border-radius: 3px; background: linear-gradient(150deg, #241a5c 0%, #6b2a8c 42%, #e0566a 72%, #f6a04d 100%); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; scale: 1 .22; transition: scale .35s ease-out; }
@keyframes eq { 0% { scale: 1 .25; } 25% { scale: 1 .85; } 50% { scale: 1 .45; } 75% { scale: 1 1; } 100% { scale: 1 .3; } }
@media (prefers-reduced-motion: no-preference) {
  .eq i { animation: eq 1.56s ease-in-out infinite alternate; }
  .eq i:nth-child(2) { animation-duration: 2.1s; animation-delay: -1.1s; }
  .eq i:nth-child(3) { animation-duration: 1.32s; animation-delay: -.4s; }
  .eq i:nth-child(4) { animation-duration: 1.84s; animation-delay: -1.5s; }
  .paused .eq i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eq i { scale: 1 .55; } .eq i:nth-child(2) { scale: 1 1; } .eq i:nth-child(3) { scale: 1 .4; } .eq i:nth-child(4) { scale: 1 .75; }
  .paused .eq i { scale: 1 .22; }
}

/* Header state: the frontmost app becomes Arrowslit, its menus are the site's
   links, and a download widget joins the right end, as the update widget does. */
.w.site { display: none; }
.header .w.finder, .header .w.ws { display: none; }
.header .w.site { display: flex; }
.site .menus a { color: var(--fg); }
.site .menus a:hover { color: var(--accent); }
.header .site .menus { grid-template-columns: 1fr; }
/* The header's Download is the page's own button at bar size: the highlighter yellow, the display hand
   and a felt-pen outline printed a little off it (drawn by main.js, as on the page's other buttons) */
.w.dl {
  --ox: -2px; --oy: -2px;
  position: relative; isolation: isolate; padding: 0; display: grid; grid-template-columns: 0fr; margin-left: -6px; opacity: 0; visibility: hidden;
  border-radius: 999px; background: var(--hi); box-shadow: none; filter: none; color: #111;
  font: 800 13.5px/1 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: .01em;
  transition: rotate .2s var(--ease), background-color .2s;
}
.w.dl > span { overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 0; }
.w.dl svg:not(.pen) { width: 16px; height: 16px; }
.w.dl:hover { background: #ffb547; rotate: -2deg; }
.header .w.dl { grid-template-columns: 1fr; margin-left: 2px; opacity: 1; visibility: visible; }
.header .w.dl > span { padding: 0 12px 0 8px; }
.measure * { transition: none !important; }

/* The lamp-lit tour: the widget under the pointer glows as if the lamp lit it from below,
   and a paper tag hangs under it on a doodled string (placed by main.js) */
#bar .w.lamp { background-image: linear-gradient(0deg, #ffe04a80, #ffe04a00 82%); box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 1.5px #ffd43bb3, 0 6px 14px -2px #ffd43bf0; }
#bar .w.dl.lamp { background-image: none; box-shadow: 0 6px 14px -2px #ffd43bf0; }
/* the landing's sweep: each widget glows as the light passes over it */
#bar .w.swept { background-image: linear-gradient(0deg, #ffe04a80, #ffe04a00 82%); box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 1.5px #ffd43bb3, 0 6px 14px -2px #ffd43bf0; }
.lamp-tag { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; transform-origin: 0 0; }
.lamp-tag[hidden] { display: none; }
.lt-s { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.lt-s path { fill: none; stroke-linecap: round; }
.lt-s .h { stroke: #fff; stroke-width: 4.4; }
.lt-s .k { stroke: var(--pen); stroke-width: 1.9; }
.lt-p {
  --ox: -3px; --oy: -2px;
  position: absolute; left: 0; top: 0; isolation: isolate; display: block; padding: 12px 12px 7px; white-space: nowrap;
  background: var(--paper); color: var(--text); border-radius: 7px 10px 6px 11px / 10px 6px 11px 7px;
  font: 600 15px/1.15 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60;
  rotate: var(--r, -1deg); transform-origin: var(--hole, 50%) 7px;
}
/* the punched hole the string goes through, the sky showing in it */
.lt-p::after { content: ""; position: absolute; left: var(--hole, 50%); top: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--strip); box-shadow: 0 0 0 1.6px var(--pen); }

/* The center position shows only when a widget sits there */
.dock:not(.editing) #gc:not(:has(> .w:not([hidden]))) { display: none; }

/* Edit Bar in Place, drawn as the app draws it: a tray per position, a − badge on each
   widget, + where a widget can be added, and position names while dragging */
.dock.editing { --bar-h: 50px; }
.editing .bar { padding: 0 6px; gap: 8px; }
.editing .bar .g { position: relative; flex: 0 1 auto; min-width: 48px; border-radius: 9px; background: linear-gradient(var(--tray-tint) 0 0) var(--tray-backing); box-shadow: inset 0 0 0 .5px var(--tray-line); transition: background-color .15s, box-shadow .15s; }
.editing .bar .g > .w { display: none; }
.editing .bar .g.target { background-color: color-mix(in srgb, var(--sys-blue) 16%, var(--tray-backing)); box-shadow: inset 0 0 0 2px var(--sys-blue); }
.lane { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 7px; overflow-x: auto; scrollbar-width: none; }
.lane::-webkit-scrollbar { display: none; }
.lane.fl { mask-image: linear-gradient(90deg, transparent, #000 18px); }
.lane.fr { mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.lane.fl.fr { mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.tile { position: relative; flex: none; display: flex; isolation: isolate; border-radius: 5px; user-select: none; }
.lane .tile { cursor: grab; touch-action: none; }
.tile::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 5px; background: var(--fg); opacity: 0; transition: opacity .1s; }
.lane .tile:hover::before { opacity: .08; }
.tile:focus-visible { outline-offset: 2px; }
.tile[hidden] { display: none; }
.tile.lifted { opacity: 0; }
.lane .tile .w { cursor: grab; }
.minus { position: absolute; left: -5px; top: -5px; z-index: 2; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #6e6e73; transition: opacity .15s; }
.minus::before { content: ""; width: 7px; height: 1.8px; border-radius: 1px; background: #fff; }
.add { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; color: var(--fg); border: 1.5px dashed color-mix(in srgb, var(--fg) 55%, transparent); transition: opacity .15s; }
.add svg { width: 12px; height: 12px; }
.add.on { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
.chip { position: absolute; left: 5px; top: -5px; z-index: 3; padding: 1px 4px; border-radius: 99px; font: 700 9px/1.25 var(--mac); color: var(--fg); background: linear-gradient(var(--tray-tint) 0 0) var(--pop-bg); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--fg) 15%, transparent); opacity: 0; transition: opacity .15s; pointer-events: none; }
.g.target .chip { background: var(--blue-fill); color: #fff; }
.dragging .chip { opacity: 1; }
.dragging .minus { opacity: 0; pointer-events: none; }
.dragging .g.target .add { opacity: 0; }
.spacer { width: 16px; padding: 0; background: none; box-shadow: none; }
.tile .spacer { width: auto; padding: 0 5px; color: var(--muted); font: 400 11px/1 var(--mac); }
.tile .spacer::before { content: "Spacer"; }
.ghost { position: fixed; z-index: 200; pointer-events: none; color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto; opacity: .9; scale: 1.04; filter: drop-shadow(0 10px 18px #00000059); }
#bar .ws.copy .wsi.on { background: var(--ws-ind); }
.gauge { display: grid; gap: 2px; width: 20px; }
.gauge i { height: 5px; border-radius: 3px; background: linear-gradient(currentColor 0 0) 0 / var(--p) 100% no-repeat, var(--track); }
.gauge i + i { height: 3px; }

/* Below the bar while editing: a hint, Undo and Done */
.edit-ctl {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5; translate: -50% 0;
  display: none; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; white-space: nowrap;
  color: var(--win-fg); font: 400 13px/1 var(--mac);
  background: color-mix(in srgb, var(--win-bg) 84%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 14px 34px -14px var(--shadow-2);
}
.editing .edit-ctl { display: flex; }
.adding .edit-ctl { display: none; }
.edit-ctl button { height: 22px; padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--win-fg) 7%, transparent); }
[data-mode="dark"] .edit-ctl button { background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
.edit-ctl button:hover { background: color-mix(in srgb, var(--win-fg) 18%, transparent); }
.edit-ctl .done, [data-mode="dark"] .edit-ctl .done { background: var(--blue-fill); color: #fff; }
.edit-ctl button:disabled { opacity: .45; cursor: default; background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
.edit-ctl .hint { font-size: 11.5px; color: color-mix(in srgb, var(--win-fg) 62%, transparent); }

/* Add here: built-in widgets and the Store's packages, then a package's review */
.addpop {
  position: absolute; z-index: 7; width: 340px; padding: 14px; border-radius: 12px;
  color: var(--win-fg); font: 400 12px/1.3 var(--mac); background: var(--win-bg);
  box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 30px 70px -24px var(--shadow-1);
}
.addpop.review { width: 400px; }
.addpop::before { content: ""; position: absolute; top: -6px; left: var(--ax, 24px); width: 12px; height: 12px; rotate: 45deg; background: var(--win-bg); border-radius: 2px 0 0; box-shadow: -1px -1px 0 -.5px var(--win-edge); }
.addpop .t { margin-bottom: 10px; font: 700 10px/1 var(--mac); color: color-mix(in srgb, var(--win-fg) 68%, transparent); letter-spacing: .02em; }
.addpop .find { width: 100%; height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--win-fg) 8%, transparent); color: inherit; font: 400 13px/1 var(--mac); }
.addpop .find:focus-visible { outline: 3px solid color-mix(in srgb, var(--sys-blue) 55%, transparent); outline-offset: 0; }
.addpop .find::placeholder { color: color-mix(in srgb, var(--win-fg) 62%, transparent); }
.addpop .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 296px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; }
.addpop .ch { display: flex; align-items: center; gap: 7px; height: 44px; min-width: 0; padding: 0 8px; border-radius: 6px; text-align: left; }
.addpop .ch:hover, .addpop .ch:focus-visible { background: color-mix(in srgb, var(--sys-blue) 18%, transparent); outline: none; }
.addpop .ch .ic { width: 15px; height: 15px; flex: none; margin: 0 1.5px; }
.addpop .ch span { min-width: 0; }
.addpop .ch b { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addpop .ch small { display: block; margin-top: 1px; font-size: 10px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); }
.addpop .ch .from-store { width: 11px; height: 11px; flex: none; margin-left: auto; }
.addpop .none { padding: 10px 2px 2px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); }
.addpop .back { height: 22px; padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--win-fg) 12%, transparent); }
.addpop h4 { margin-top: 12px; font: 600 15px/1.25 var(--mac); }
.addpop .d { margin-top: 4px; color: color-mix(in srgb, var(--win-fg) 78%, transparent); }
.addpop .m { margin-top: 4px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); }
.addpop .can { list-style: none; margin-top: 12px; padding: 2px 10px; border-radius: 8px; background: color-mix(in srgb, var(--win-fg) 5%, transparent); }
.addpop .can li { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.addpop .can li + li { border-top: 1px solid color-mix(in srgb, var(--win-fg) 8%, transparent); }
.addpop .can svg { width: 14px; height: 14px; flex: none; color: color-mix(in srgb, var(--win-fg) 60%, transparent); }
.addpop .foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: color-mix(in srgb, var(--win-fg) 68%, transparent); font-size: 11px; }
.addpop .go { flex: none; margin-left: auto; height: 26px; padding: 0 12px; border-radius: 6px; background: var(--blue-fill); color: #fff; font-size: 13px; }

/* The bar's context menu, in the system's style */
.ctx {
  position: absolute; z-index: 8; min-width: 190px; padding: 5px; border-radius: 9px;
  color: var(--win-fg); font: 400 13px/1 var(--mac);
  background: color-mix(in srgb, var(--win-bg) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 12px 30px -10px var(--shadow-2);
}
.ctx button { display: block; width: 100%; padding: 5px 10px; border-radius: 5px; text-align: left; }
.ctx button:hover, .ctx button:focus-visible { background: var(--blue-fill); color: #fff; outline: none; }
.ctx hr { height: 1px; margin: 5px 10px; border: 0; background: color-mix(in srgb, var(--win-fg) 14%, transparent); }

/* Popups and the More widgets menu */
.pop {
  position: absolute; z-index: 6; width: 300px;
  background: var(--pop-bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--pop-border), 0 24px 60px -24px var(--shadow-2);
  border-radius: var(--pop-radius); font: var(--pop-font); -webkit-font-smoothing: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .22s var(--ease), visibility 0s .22s;
}
.pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .22s var(--ease); }
/* The bar's popup is one frame: switching widgets moves and resizes it while the contents cross-fade */
#pop { padding: 0; overflow: hidden; }
#pop.morph { transition: opacity .16s, transform .22s var(--ease), left .28s var(--ease), top .28s var(--ease), width .28s var(--ease), height .28s var(--ease); }
.pane { position: absolute; top: 0; left: 0; width: 300px; padding: 12px 14px 11px; opacity: 0; visibility: hidden; transition: opacity .14s, visibility 0s .14s; }
.pane[data-id="agenda"] { width: 320px; padding: 6px 10px; }
.pane.on { opacity: 1; visibility: visible; transition: opacity .2s .08s; }
.pop .hd { font: inherit; margin-bottom: 6px; }
.pop .row { display: grid; grid-template-columns: 56px 1fr; gap: 6px; }
.pop .row + .row { margin-top: 6px; }
.pop .sep { height: 1px; margin: 6px 0; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pop .kv { display: flex; justify-content: space-between; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pop .meter { height: 4px; border-radius: 2px; margin-top: 6px; background: var(--track); overflow: hidden; }
.pop .meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.pop .graph { display: block; width: 100%; height: 44px; margin: 2px 0 4px; }
.pop .graph polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.menu { width: 250px; padding: 6px; }
.menu p { color: var(--muted); padding: 6px 8px 4px; font: 500 11.5px/1 var(--mac); }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; text-align: left; font: inherit; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--accent); color: var(--accent-text); }
.pane[data-id="site"] { width: 200px; }
.np-pop .src { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.np-pop .src svg { width: 13px; height: 13px; }
.np-pop .src .go { margin-left: auto; }
.np-pop .now { display: flex; align-items: center; gap: 12px; }
.np-pop .now .art { width: 64px; height: 64px; border-radius: 6px; }
.np-pop .now div { display: grid; gap: 2px; }
.np-pop .now b { font-weight: 600; }
.np-pop .now span { color: var(--muted); }
.np-pop .meter { margin-top: 14px; }
.np-pop .meter i { background: var(--fg); }
.np-pop .times { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 11px; }
.np-pop .ctrl { display: flex; align-items: center; justify-content: space-between; margin: 6px 6px 8px; }
.np-pop .ctrl button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.np-pop .ctrl svg { width: 15px; height: 15px; }
.np-pop .ctrl .play { width: 40px; height: 40px; background: var(--fg); color: var(--pop-bg); }
.np-pop .play .resume, .paused .np-pop .play .pause { display: none; }
.paused .np-pop .play .resume { display: block; }
.np-pop .vol { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.np-pop .vol input { flex: 1; accent-color: var(--fg); }
.np-pop .vol svg { width: 13px; height: 13px; }
.menu button svg { width: 15px; height: 15px; flex: none; }
.menu button.over-off { display: none; }

/* ---------- Paper ---------- */

/* A note: white paper with an irregular corner, a felt-pen line printed a little off it, and tape.
   main.js draws each line as an SVG (.pen) in three states at the note's size, and the CSS steps between them. */
.note {
  --rot: -.6deg; --ox: -5px; --oy: -3px;
  position: relative; isolation: isolate; background: var(--paper); color: var(--text);
  padding: 32px 34px 30px; border-radius: 16px 24px 14px 28px / 24px 14px 28px 16px; rotate: var(--rot);
}
.note::after {
  content: ""; position: absolute; top: -14px; left: var(--tape-x, 50%); width: var(--tape-w, 118px); height: 30px; z-index: 1;
  translate: -50% 0; rotate: var(--tape-r, -3deg); background: var(--tape); pointer-events: none;
  clip-path: polygon(0 6%, 4% 0, 8% 8%, 13% 2%, 18% 7%, 50% 3%, 82% 6%, 88% 0, 93% 7%, 97% 1%, 100% 8%, 99% 92%, 95% 100%, 90% 93%, 85% 100%, 50% 96%, 15% 99%, 10% 92%, 5% 100%, 1% 94%);
}
/* The pen line before main.js draws it, or without it */
:where(.note, .cta, .tag, .keys button, .lt-p)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--oy) calc(-1 * var(--ox)) calc(-1 * var(--oy)) var(--ox);
  border: 2.4px solid var(--pen); border-radius: inherit;
}
.inked::before { content: none; }
.inked > .pen {
  position: absolute; z-index: -1; left: calc(var(--ox) - 8px); top: calc(var(--oy) - 8px); width: calc(100% + 16px); height: calc(100% + 16px);
  margin: 0 !important; overflow: visible; pointer-events: none; fill: var(--pen);
}
.pen path { visibility: hidden; }
.pen .p0 { visibility: visible; }
/* About seven states a second, the same everywhere; at rest after a few quiet seconds */
@media (prefers-reduced-motion: no-preference) {
  .pen path { animation: boil .429s steps(1, end) infinite; }
  .pen .p1 { animation-delay: -.286s; }
  .pen .p2 { animation-delay: -.143s; }
  .idle .pen path { animation-play-state: paused; }
}
@keyframes boil { 0% { visibility: visible; } 33.333%, 100% { visibility: hidden; } }

/* Type on paper */
h1, h2 { font-family: var(--display); font-weight: 800; font-variation-settings: "INFM" 70, "BNCE" 25; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: clamp(40px, 4.2vw, 62px); line-height: 1.04; rotate: -1deg; }
h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; }
h3 { font: 800 22px/1.2 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; }
.note > * + * { margin-top: 14px; }
.note h2 + p { margin-top: 12px; }
.note a:not(.cta) { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.note a:not(.cta):hover { text-decoration-color: currentColor; }
.note strong { font-weight: 700; }
.lede { font-size: 1.15em; line-height: 1.45; }
.req { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; }
.cap {
  width: fit-content; max-width: 100%; color: var(--red); rotate: -2deg; transform-origin: left center;
  font: 600 18px/1.3 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60;
}
.cap small { font-size: .78em; color: var(--text); }
.note .cap { margin-top: 22px; }

/* Words the beam crosses get a highlighter swipe; at rest the headline has none */
.lumen { position: relative; z-index: 0; }
.lumen::before {
  content: ""; position: absolute; inset: 18% -.08em 4% -.1em; z-index: -1;
  background: var(--highlight) 0 0 / 100% 100% no-repeat; clip-path: inset(0 100% 0 0);
  transition: clip-path .28s var(--ease);
}
.lumen.lit::before { clip-path: inset(0); }

/* Download: Shantell on the lamp's yellow, in a pen line */
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.note .get { margin-top: 24px; }
.cta {
  --ox: -4px; --oy: -3px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 54px; padding: 12px 26px 12px 22px; border-radius: 999px; background: var(--hi); color: #111;
  font: 800 20px/1 var(--display); font-variation-settings: "INFM" 70, "BNCE" 25; text-decoration: none; white-space: nowrap;
  transition: rotate .2s var(--ease), background-color .2s;
}
.cta:hover { background: #ffb547; rotate: -2deg; }
.cta svg { width: 16px; height: 19px; flex: none; fill: currentColor; }
.cta .ver { margin-left: -2px; opacity: .72; font-variant-numeric: tabular-nums; }

/* ---------- The hero: the headline note and the key ---------- */
.hero {
  --left: 5vw;
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  padding: calc(var(--bar-h) + clamp(26px, 6.5vh, 70px)) 0 clamp(18px, 3.4vh, 34px) var(--left);
}
.hero-note { width: min(46vw, 620px); --rot: -.7deg; --tape-x: 38%; padding: 34px 38px 26px; }
.hero-note .lede { margin-top: 16px; }
.hero-note .get { margin-top: 22px; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.note .hero-foot { margin-top: 18px; }
.quiet { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15.5px; }
.hero-foot .cap { margin-top: 0; }

.key { --rot: .8deg; --tape-x: 16%; --tape-w: 66px; --tape-r: 6deg; margin-top: auto; width: fit-content; max-width: min(562px, 46vw); padding: 14px 18px 12px; border-radius: 12px 18px 10px 20px / 18px 10px 20px 12px; }
.js:not(.has-scene) .key { visibility: hidden; }
.key-t, .key-or { font: 600 16px/1.25 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
.key .touch { display: none; }
@media (pointer: coarse) { .key .mouse { display: none; } .key .touch { display: inline; } }
.keys { display: flex; flex-wrap: wrap; gap: 8px; }
.note .keys { margin-top: 9px; }
.note .key-or { margin-top: 7px; }
.keys button {
  --ox: -3px; --oy: -2px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 6px;
  border-radius: 999px; background: var(--paper); font: 600 15px/1 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60;
  transition: background-color .15s, rotate .2s var(--ease);
}
.keys button:hover { background: #fff6c2; rotate: -2deg; }
.keys button[aria-pressed="true"] { background: var(--hi); }
.keys svg { width: 26px; height: 20px; flex: none; }
/* The ball game moves; without motion it isn't offered */
@media (prefers-reduced-motion: reduce) { .keys [data-play] { display: none; } }

/* ---------- Sections: each a different piece of paper, in the left part of the window ---------- */
.sec { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 14vh 0 14vh var(--left, 5vw); }
.sec .note { width: min(44vw, 620px); }
.edit { --left: 7vw; }
.themes { --left: 4.5vw; }
.widgets { --left: 6vw; }
.tiling { --left: 7.5vw; }
.guide { --left: 6vw; }
.install { --left: 5vw; }
/* The footer. Out at sea its links are on the islands' signposts (see setSigns in scene.js), so there it's for
   keyboards and screen readers, and shows when one of its links has the focus; without the dive it ends the page */
.foot { position: relative; z-index: 1; padding: 0 0 14vh 5vw; }
.foot .note { --rot: .4deg; --tape-x: 82%; --tape-r: 4deg; width: min(44vw, 620px); font-size: 16px; line-height: 1.5; }
.foot .note > * + * { margin-top: 10px; }
.foot .links span { display: contents; }
/* (over a signpost's board, the pointer says it's a link: see main.js) */
.on-board { cursor: pointer; }
.has-dive .foot:not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Narrow landscape screens: wider notes so the Download button stays on its paper, still clear of the lighthouse at 0.775 × width */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hero-note, .sec .note { width: min(58vw, 620px); }
  .hero-note { padding-left: 30px; padding-right: 30px; }
  .key { max-width: min(562px, 58vw); }
}

/* Edit: a taped note with a picture of the bar in edit mode */
.taped { --rot: .7deg; --tape-x: 9%; --tape-r: -32deg; --tape-w: 104px; }
.taped::after { top: -6px; }
.taped .tape2 + h2 { margin-top: 0; }
.taped .tape2 { position: absolute; top: -4px; right: -12px; width: 96px; height: 28px; rotate: 34deg; background: var(--tape); clip-path: polygon(0 6%, 5% 0, 10% 8%, 50% 3%, 90% 6%, 95% 0, 100% 8%, 99% 92%, 94% 100%, 50% 96%, 6% 100%, 1% 92%); pointer-events: none; z-index: 1; }
.screen { position: relative; border-radius: 13px; background: var(--screen); box-shadow: 0 0 0 2.2px var(--pen); }
.fig-edit { display: block; margin-top: 22px !important; padding: 40px 12px 16px; color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto; container-type: inline-size; }
.fig-edit .trays { display: flex; flex-wrap: wrap; gap: 8px; }
.fig-edit .tray { position: relative; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 7px; border-radius: 9px; background: linear-gradient(var(--tray-tint) 0 0) var(--tray-backing); box-shadow: inset 0 0 0 .5px var(--tray-line); }
.fig-edit .tray.center { flex: 1; justify-content: center; min-width: 48px; }
.fig-edit .tile { cursor: default; }
.fig-edit .w { cursor: default; }
.fig-edit .w.ws { gap: 2px; padding: 0 4px; }
.fig-edit .w.ws .wsi { height: 22px; cursor: default; }
.fig-edit .w.ws .wsi.on { background: var(--ws-ind); }
.fig-edit .arrow { position: absolute; left: var(--ax, 196px); top: 6px; width: var(--aw, 150px); height: 36px; color: var(--pen); pointer-events: none; }
[data-mode="dark"] .fig-edit .arrow { color: #fff; }
.fig-edit .drag-note { position: absolute; left: calc(var(--ax, 196px) + var(--aw, 150px) * .42); top: 2px; font: 600 15px/1 var(--hand); color: var(--pen); rotate: -4deg; }
[data-mode="dark"] .fig-edit .drag-note { color: #fff; }
@container (max-width: 470px) { .fig-edit .arrow, .fig-edit .drag-note { display: none; } .fig-edit { padding-top: 16px; } }

/* The Edit section, now the notch in the menu bar: a compact live strip, a
   resize handle, and the same hand-drawn arrow. */
.notch-fig { padding-top: 18px; padding-bottom: 18px; }
.notch-fig .mb {
  position: relative; display: flex; justify-content: center; height: 30px;
  border-radius: 9px 9px 4px 4px; background: var(--tray-backing);
  box-shadow: inset 0 0 0 .5px var(--tray-line);
}
.notch-fig .notch {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px; width: min(280px, 74%); height: 34px;
  padding: 0 11px; border-radius: 0 0 12px 12px; background: #090909;
  color: #fff; box-shadow: 0 7px 16px rgba(0, 0, 0, .22);
}
.notch-fig .n-ear { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.notch-fig .n-ear--r { justify-content: flex-end; }
.notch-fig .n-art { flex: none; width: 17px; height: 17px; border-radius: 4px; background: linear-gradient(135deg, #ff5f6d, #b3122f); }
.notch-fig .n-eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.notch-fig .n-eq i { width: 2.5px; height: 8px; border-radius: 1px; background: #ff9f0a; transform-origin: bottom; }
.notch-fig .n-eq i:nth-child(2) { height: 14px; }
.notch-fig .n-eq i:nth-child(3) { height: 11px; }
.notch-fig .n-eq i:nth-child(4) { height: 16px; }
.notch-fig .n-eq--right { justify-content: flex-end; }
.notch-fig .n-eq--right i { background: #fff; }
.notch-fig .n-cam { width: 5px; height: 5px; border-radius: 50%; background: #2b2b2d; box-shadow: 0 0 0 1px #171719; }
.notch-fig .n-time { font: 600 11px/1 var(--mac); font-variant-numeric: tabular-nums; color: #ff9f0a; white-space: nowrap; }
.notch-fig .notch::after {
  content: ""; position: absolute; inset: -5px; border: 1.4px dashed rgba(255, 255, 255, .4);
  border-radius: 4px 4px 16px 16px; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .notch-fig .n-eq i { animation: notch-eq 1.05s ease-in-out infinite alternate; }
  .notch-fig .n-eq i:nth-child(2) { animation-delay: -.35s; }
  .notch-fig .n-eq i:nth-child(3) { animation-delay: -.6s; }
  .notch-fig .n-eq i:nth-child(4) { animation-delay: -.15s; }
}
@keyframes notch-eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.try {
  position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 20px !important; padding: 9px 16px 10px;
  border-radius: 10px 14px 12px 9px; background: var(--paper); box-shadow: 0 0 0 2.2px var(--pen), 3px 3px 0 2.2px var(--pen);
  font: 600 17px/1.2 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; transition: translate .15s, box-shadow .15s;
}
.try::after { content: "↑"; font-family: var(--body); font-weight: 700; }
.try:hover { background: #fff6c2; }
.try:active { translate: 2px 2px; box-shadow: 0 0 0 2.2px var(--pen), 1px 1px 0 2.2px var(--pen); }

/* Themes: seven tags pegged on a washing line, each a miniature bar in its theme */
.line-note { --rot: -.9deg; }
.line-note::after { display: none; }
.line {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: 112px; column-gap: 12px;
  margin: 18px -12px 0 !important; padding: 0 12px; background: var(--string) 0 0 / 100% 112px repeat-y;
}
.tag {
  --ox: -3px; --oy: -2px; --r: -2deg;
  position: relative; isolation: isolate; align-self: start; display: flex; flex-direction: column; gap: 7px;
  margin-top: 18px; padding: 8px 8px 9px; border-radius: 6px 9px 7px 10px; background: var(--paper); text-align: left;
  rotate: var(--r); transform-origin: 50% -8px; transition: rotate .35s var(--ease), background-color .15s;
}
.tag:nth-child(3n + 2) { --r: 1.8deg; }
.tag:nth-child(3n) { --r: -.5deg; }
.tag:hover { --r: 0deg; }
.tag[aria-pressed="true"] { background: var(--hi); }
/* a wooden peg */
.tag::after {
  content: ""; position: absolute; top: -19px; left: 50%; width: 10px; height: 24px; translate: -50% 0; rotate: 4deg;
  border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, #d79b5f 0 45%, #b8783f 45% 55%, #d79b5f 55%); box-shadow: 0 0 0 1.8px var(--pen);
}
.tag .shot { position: relative; height: 40px; overflow: hidden; border-radius: 5px; background: var(--screen); box-shadow: 0 0 0 1.6px var(--pen); }
.tag .nm { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 16px/1 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
.tag[aria-pressed="true"] .nm::after { content: "✓"; font-family: var(--body); font-weight: 700; }

/* Small sample bars in the theme tags: three workspaces, Finder, battery and clock, as in Settings' theme cards */
.mini {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 200%; height: 200%; padding: 0 calc(5px + var(--strip-m) * .5); transform: scale(.5); transform-origin: 0 0;
  font: var(--bar-font); color: var(--fg); -webkit-font-smoothing: auto;
}
.mini .strip { position: absolute; inset: 6px calc(6px + var(--strip-m) * .4); background: var(--strip-bg); border-radius: var(--strip-radius); box-shadow: var(--strip-edge); }
.mini .g { display: flex; gap: 4px; position: relative; }
.mini .t { position: relative; filter: var(--w-glow); background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius); padding: 0 7px; height: var(--tile-h); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mini .wsi { padding: 0 6px; cursor: inherit; }
.ws-under .mini .wsi.on::after { bottom: 1px; }

/* Scripts and the Store: a page torn from a notebook, ruled, with a red margin */
.notebook { --rot: .5deg; --ox: -5px; --oy: -3px; background: none; padding: 46px 34px 34px 70px; line-height: 28px; }
.notebook::after {
  content: ""; inset: 0; top: 0; left: 0; width: auto; height: auto; translate: none; rotate: none; z-index: -2;
  border-radius: 0 0 14px 22px / 0 0 22px 14px; clip-path: var(--torn, none);
  background:
    linear-gradient(90deg, transparent 48px, #e8786b 48px 50px, transparent 50px),
    repeating-linear-gradient(transparent 0 27px, #b7d2ef 27px 28px) 0 17px / 100% 28px,
    var(--paper);
}
.notebook > * + * { margin-top: 14px; }
.notebook h2 { line-height: 1.1; }
.notebook .script { margin-top: 18px; }
.code { border-radius: 10px; background: #fbfaf6; box-shadow: 0 0 0 2px var(--pen); overflow: hidden; }
.code .fn { display: flex; justify-content: space-between; padding: 7px 14px; border-bottom: 2px solid var(--pen); font: 500 12.5px/1.2 var(--mono); color: #4a4a4a; background: #fff2a8; }
.code pre { padding: 12px 14px 14px; font: 400 13px/1.6 var(--mono); color: #1d1d1f; overflow-x: auto; }
.code pre:focus-visible { outline-offset: -3px; border-radius: 0 0 10px 10px; }
.code .c { color: #6b6b6b; }
.result { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: -14px 18px 0 auto; padding: 7px; }
.result .w { font: var(--bar-font); -webkit-font-smoothing: auto; color: var(--fg); }
.result .w.new { box-shadow: inset 0 0 0 1px var(--w-border), 0 0 0 2.5px var(--amber); }
.result.pinned {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px;
  min-width: 180px; padding: 7px 12px 8px; border-radius: 0 0 11px 11px;
  background: #090909; color: #fff;
  box-shadow: 0 0 0 2px var(--pen), 0 8px 16px rgba(0, 0, 0, .18);
}
.result.pinned .pin { display: flex; align-items: center; gap: 4px; font: 600 10px/1 var(--mac); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.result.pinned .pin:last-of-type { justify-content: flex-end; }
.result.pinned .pin svg { width: 11px; height: 11px; color: #ff9f0a; }
.result.pinned .pin b { color: #ff9f0a; font-weight: 600; }
.result.pinned .pin-cam { width: 4px; height: 4px; border-radius: 50%; background: #3a3a3c; box-shadow: 0 0 0 1px #1a1a1c; }
.store { margin-top: 30px !important; }
.store > * + * { margin-top: 12px; }
.store-fig { position: relative; margin-top: 18px !important; rotate: -.6deg; }

/* The Store: Settings → Packages, as the app draws it */
.win { border-radius: 12px; background: var(--win-bg); color: var(--win-fg); font: 400 13px/1.3 var(--mac); box-shadow: 0 0 0 .5px var(--win-ring), inset 0 0 0 1px var(--win-edge), 0 0 0 2.4px var(--pen), 6px 8px 0 0 #1111111f; }
[data-mode="dark"] .store-fig { color-scheme: dark; }
.win .tb { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.tl { display: flex; gap: 8px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.tl i:nth-child(2) { background: #febc2e; } .tl i:nth-child(3) { background: #28c840; }
.store-win .tb { gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--win-fg) 9%, transparent); }
.tabs { display: flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--win-fg) 8%, transparent); font-size: 12.5px; }
.tabs span { padding: 4px 10px; border-radius: 5px; color: color-mix(in srgb, var(--win-fg) 80%, transparent); }
.tabs .on { background: color-mix(in srgb, var(--win-fg) 16%, transparent); color: var(--win-fg); }
.store-win .find { flex: 1; min-width: 0; max-width: 200px; padding: 5px 10px; border-radius: 7px; background: color-mix(in srgb, var(--win-fg) 6%, transparent); color: color-mix(in srgb, var(--win-fg) 50%, transparent); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; padding: 12px; line-height: 1.3; }
.pkg { display: flex; flex-direction: column; min-width: 0; padding: 9px; border-radius: 10px; background: color-mix(in srgb, var(--win-fg) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--win-fg) 8%, transparent); }
.pkg .pv { display: grid; place-items: center; height: 50px; border-radius: 7px; background: var(--screen); font: var(--bar-font); -webkit-font-smoothing: auto; color: var(--fg); overflow: hidden; }
.pkg .pv .w { height: 26px; }
.pkg b { margin-top: 9px; font-weight: 600; font-size: 13px; }
.pkg p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: color-mix(in srgb, var(--win-fg) 66%, transparent); }
.pkg .by { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 9px; font-size: 11px; color: color-mix(in srgb, var(--win-fg) 60%, transparent); }
.pkg .by > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg .pkg-get { flex: none; height: 24px; padding: 0 12px; border-radius: 6px; background: color-mix(in srgb, var(--win-fg) 12%, transparent); color: var(--win-fg); font-size: 12.5px; }
.pkg .pkg-get:hover { background: color-mix(in srgb, var(--win-fg) 18%, transparent); }
.pkg .state { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pkg .state svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.store-win { position: relative; }
.store-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #00000059; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.store-win.sheet::after { opacity: 1; visibility: visible; transition: opacity .2s; }
.addpop.pkg-review { z-index: 3; top: 52px; left: 50%; translate: -50% 0; width: min(400px, calc(100% - 24px)); line-height: 1.3; }
.pkg-review::before { content: none; }

/* Tiling: a postcard, with the workspace widget large as its picture */
.postcard {
  --rot: -1.1deg; --tape-x: 88%; --tape-r: 28deg; --tape-w: 90px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 34%); column-gap: 26px;
  padding: 30px 30px 24px; border-radius: 8px 12px 9px 14px / 12px 8px 14px 9px;
}
.postcard > * + * { margin-top: 0; }
.postcard > * { min-width: 0; }
.pc-msg > * + * { margin-top: 12px; }
.pc-addr { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }
.pc-addr::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2.2px; border-radius: 2px; background: var(--pen); rotate: .8deg; }
.stamp {
  align-self: flex-end; display: grid; place-items: center; width: 62px; height: 74px; margin-bottom: 12px; rotate: 3deg;
  background: #9fd6f5;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 2.6px, transparent 2.8px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat;
  mask: radial-gradient(circle at 50% 50%, #000 2.6px, transparent 2.8px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat;
}
.stamp img { width: 40px; height: 48px; }
.postmark { position: absolute; top: -6px; right: 34px; width: 74px; height: 50px; rotate: -12deg; color: #3a3a46; opacity: .75; pointer-events: none; }
.pc-addr .to { font: 600 15px/1 var(--hand); color: var(--red); }
.pc-addr .addr { padding: 0 2px 4px; border-bottom: 2px dotted #9aa3b5; font: 600 19px/1.1 var(--hand); font-variation-settings: "INFM" 100, "BNCE" 60; }
/* The live strip is anchored to the bottom of the blue screen. At the narrow
   postcard breakpoint the fixed 1.7x strip is wider than the screen, so the
   container query scales it down instead of letting it cross the ink border. */
.pc-ws {
  grid-column: 1 / -1; display: flex; justify-content: center; align-items: flex-end;
  margin-top: 22px; padding: 22px 12px 12px;
  overflow: hidden; container-type: inline-size;
}
.ws-big {
  display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 5px; zoom: 1.7;
  background: var(--w-bg); box-shadow: inset 0 0 0 1px var(--w-border), 0 1px 3px var(--w-shadow); border-radius: var(--w-radius);
  color: var(--fg); font: var(--bar-font); -webkit-font-smoothing: auto;
}
@media (min-width: 720px) {
  @container (max-width: 430px) {
    .pc-ws .ws-big { zoom: 1.5; }
  }
}
.ws-big .wsi { height: 26px; }
.live-big .wsi { cursor: default; }
.live-big .wsi svg { width: 14px; height: 14px; flex: none; }
.live-big .wsi .art { width: 14px; height: 14px; }
.live-big .livebars { display: flex; align-items: flex-end; gap: 1.5px; height: 14px; flex: none; }
.live-big .livebars i { width: 2.5px; height: 6px; border-radius: 1px; background: #fff; transform-origin: bottom; }
.live-big .livebars i:nth-child(2) { height: 11px; }
.live-big .livebars i:nth-child(3) { height: 8px; }
.live-big .livebars i:nth-child(4) { height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .live-big .livebars i { animation: notch-eq 1.05s ease-in-out infinite alternate; }
  .live-big .livebars i:nth-child(2) { animation-delay: -.35s; }
  .live-big .livebars i:nth-child(3) { animation-delay: -.6s; }
  .live-big .livebars i:nth-child(4) { animation-delay: -.15s; }
}
.pc-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-top: 18px !important; }
.note .pc-foot .cap { margin-top: 0; }

/* Install: a recipe card, numbered */
.recipe {
  --rot: .9deg; --tape-x: 50%; --tape-r: 2deg;
  padding: 30px 34px 30px; border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px;
}
.recipe h2 { padding-bottom: 12px; border-bottom: 2.4px solid #e8786b; }
.steps { list-style: none; counter-reset: step; background: repeating-linear-gradient(transparent 0 33px, #c3d8f0 33px 35px) 0 0 / 100% 35px; }
.note .steps { margin-top: 18px; }
.steps li { position: relative; counter-increment: step; padding-left: 44px; line-height: 35px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 54% 46% 50% 48% / 48% 54% 46% 52%; box-shadow: 0 0 0 2.2px var(--pen); background: var(--paper);
  font: 600 16px/1 var(--hand); color: var(--red);
}
.steps li:nth-child(2n)::before { rotate: -8deg; }
.brew { font-size: 15.5px; color: var(--text-2); }
.brew code { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: #fbfaf6; box-shadow: 0 0 0 1.6px var(--pen); font: 400 14px/1.4 var(--mono); color: #1d1d1f; white-space: nowrap; }
.install .brew code.wrap { white-space: normal; max-width: 100%; }

/* ---------- Portrait: phones and portrait tablets. The scene's rule: narrower than 700 px, or taller than 1.1 × wide ---------- */
@media (max-width: 699.98px), (max-aspect-ratio: 10/11) {
  .hero, .sec { --left: var(--m); padding-left: var(--m); padding-right: var(--m); align-items: stretch; }
  :root { --m: clamp(14px, 4vw, 32px); }
  .hero { padding-top: calc(var(--bar-h) + 24vh); padding-top: calc(var(--bar-h) + 24lvh); padding-bottom: 0; min-height: 0; }
  .hero-note, .sec .note { width: auto; max-width: 680px; }
  .key { width: auto; max-width: 680px; margin-top: 28px; }
  .sec { display: block; min-height: 0; padding-top: 34vh; padding-bottom: 6vh; }
  .install { padding-bottom: 12vh; }
  .foot { padding: 0 var(--m) 10vh; }
  .foot .note { width: auto; max-width: 680px; }
  h1 { font-size: clamp(34px, 9.4vw, 58px); }
}
@media (max-width: 719.98px) {
  body { font-size: 17px; }
  .note { padding: 26px 22px 24px; }
  .hero-note { padding: 28px 22px 24px; }
  .hero-note .lede { margin-top: 14px; }
  .note .get { margin-top: 20px; }
  .cap small { display: block; }
  .cta { min-height: 50px; padding: 10px 22px 10px 18px; font-size: 18px; }
  h2 { font-size: 30px; }
  .notebook { padding: 40px 18px 26px 52px; }
  .notebook::after { background: linear-gradient(90deg, transparent 36px, #e8786b 36px 38px, transparent 38px), repeating-linear-gradient(transparent 0 27px, #b7d2ef 27px 28px) 0 17px / 100% 28px, var(--paper); }
  .result { margin-right: 8px; }
  .postcard { grid-template-columns: 1fr; }
  .pc-ws .ws-big { zoom: 1.1; }
  .pc-addr { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px !important; padding: 16px 70px 0 0; }
  .pc-addr::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2.2px; }
  .stamp { position: absolute; right: 0; top: 14px; width: 52px; height: 62px; margin: 0; }
  .stamp img { width: 32px; height: 40px; }
  .postmark { top: 12px; right: 30px; width: 60px; height: 42px; }
  .ws-big { zoom: 1.25; }
  .ws-big .ai { display: none; }
  .code pre { font-size: 11.5px; }
  .brew code { white-space: normal; }
  .taped .tape2 { right: 4px; }
  .try, .edit-ctl { display: none !important; }
  .pkg:nth-child(n + 5) { display: none; }
  .store-win .find { display: none; }
  .line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bar .ws .ai, #bar [data-key="app"], #bar [data-key="meeting"], #bar [data-key="system"], #bar [data-key="sound"], #bar [data-key="battery"], #bar .np .track, #bar .clock .day,
  .header [data-key="clock"], .site .menus { display: none; }
}
@media (max-width: 380px) {
  .keys button { padding-right: 11px; font-size: 14.5px; }
  .cta { font-size: 17px; padding-left: 16px; padding-right: 18px; }
}
@media (min-width: 1080px) {
  .header .w.ws { display: flex; }
}

/* ---------- Privacy Policy and Terms: one sheet of paper on the sky, no drawing ---------- */
.doc .page {
  position: relative; isolation: isolate; max-width: 820px; margin: 40px auto 56px; padding: 6px 48px 8px;
  background: var(--paper); color: var(--text); border-radius: 14px 22px 12px 26px / 22px 12px 26px 14px;
}
.doc .page::before { content: ""; position: absolute; inset: -4px 6px 4px -6px; z-index: -1; border: 2.6px solid var(--pen); border-radius: inherit; pointer-events: none; }
.doc .page::after { content: ""; position: absolute; top: -15px; left: 50%; width: 130px; height: 30px; translate: -50% 0; rotate: -2deg; background: var(--tape); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 10px 0; background: var(--rule) left bottom / 160px 10px repeat-x; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 600 17px/1 var(--hand); }
.nav a { padding: 8px 0; color: var(--link); text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.legal { padding: 34px 0 40px; }
.legal h1 { rotate: none; font-size: clamp(36px, 7vw, 54px); line-height: 1.05; }
.legal .updated { margin-top: 10px; font: 600 16px/1.3 var(--hand); color: var(--red); }
.legal h2 { margin-top: 38px; font-size: 27px; line-height: 1.15; }
.legal p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 8px; }
.legal strong { font-weight: 700; }
.legal a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.legal code { font: 15px var(--mono); }
.doc footer { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 22px 0 28px; background: var(--rule) left top / 160px 10px repeat-x; font-size: 15.5px; }
.doc footer a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
@media (max-width: 719.98px) {
  .doc .page { margin: 26px 12px 36px; padding: 4px 20px 6px; }
  .doc { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}


/* Phones: keep the download button and live strip inside the screen. */
@media (max-width: 390px) {
  .cta {
    width: 100%; max-width: 100%; justify-content: center; flex-wrap: wrap;
    white-space: normal; text-align: center; font-size: 16px; padding: 12px 14px;
  }
  .cta .ver { margin-left: 0; }
}
@media (max-width: 340px) {
  .pc-ws .ws-big { zoom: 1; }
}


/* MacNative listing badge */
.mn-listed { margin-top: 16px; }
.mn-hero { margin-top: 18px; }
.mn-listed a { display: inline-flex; }
.mn-listed img { display: block; width: 212px; height: 58px; }
.mn-listed .mn-dark { display: none; }
[data-mode="dark"] .mn-listed .mn-light { display: none; }
[data-mode="dark"] .mn-listed .mn-dark { display: block; }