/* Generated from docs/brand/tokens.json and the extension's globals.css (scripts/palette.ts). */
:root {
  color-scheme: light;
  --bg: light-dark(#fffdf8, #29241f);
  --fg: light-dark(#261e1a, #ede4d6);
  --muted: light-dark(#7a6a61, #b3a696);
  --surface: light-dark(#faf5ec, #2f2924);
  --border: light-dark(#eadfce, #40372f);
  --accent: light-dark(#9a5b13, #e7b569);
  --accent-soft: light-dark(#f6e6cc, #3d2f1c);
  --header-bg: light-dark(#483b32, #1e1a17);
  --header-fg: light-dark(#fef7ea, #f3e9da);
  --owl: #59493E;
  --eye-cream: #FEF8E8;
  --pupil: #261E1A;
  --beak: #E6AD52;
  --note: #F4C95D;
  --note-fold: #DCA543;
  --wordmark-gold: #E7B569;
  --text-dark: #F3E9DA;
  --text-light: #FEF7EA;
  --bg-dark: #120F0D;
  --bg-light: #483B32;
}

/* Generated from the extension's Theme Colors (scripts/palette.ts). */
.swatch[data-color='cocoa'] { --swatch: #9a5b13; }
.app-panel, .colors:has([name='color'][value='cocoa']:checked) .app-panel { --app-background: light-dark(#fffdf8, #29241f); --app-foreground: light-dark(#261e1a, #ede4d6); --app-primary: light-dark(#9a5b13, #e7b569); --app-secondary: light-dark(#f6e6cc, #3d2f1c); --app-muted: light-dark(#faf5ec, #2f2924); --app-muted-foreground: light-dark(#7a6a61, #b3a696); --app-border: light-dark(#eadfce, #40372f); --app-sidebar: light-dark(#f3ebdf, #2e2823); --app-sidebar-accent: light-dark(#e8d8bf, #463c34); --app-header: light-dark(#483b32, #1e1a17); --app-header-foreground: light-dark(#fef7ea, #f3e9da); }
.swatch[data-color='ink'] { --swatch: #262626; }
.colors:has([name='color'][value='ink']:checked) .app-panel { --app-background: light-dark(#fcfcfc, #1e1e1e); --app-foreground: light-dark(#1f1f1f, #e8e8e8); --app-primary: light-dark(#262626, #d9d9d9); --app-secondary: light-dark(#e8e8e8, #333333); --app-muted: light-dark(#f5f5f5, #262626); --app-muted-foreground: light-dark(#6b6b6b, #a3a3a3); --app-border: light-dark(#e5e5e5, #383838); --app-sidebar: light-dark(#f0f0f0, #252525); --app-sidebar-accent: light-dark(#e0e0e0, #3d3d3d); --app-header: light-dark(#1f1f1f, #141414); --app-header-foreground: light-dark(#f5f5f5, #ededed); }
.swatch[data-color='graphite'] { --swatch: #2e3539; }
.colors:has([name='color'][value='graphite']:checked) .app-panel { --app-background: light-dark(#fcfcfb, #1f2224); --app-foreground: light-dark(#1f2326, #e6e7e7); --app-primary: light-dark(#2e3539, #c9ced1); --app-secondary: light-dark(#e6e8e8, #33393c); --app-muted: light-dark(#f5f6f6, #262a2c); --app-muted-foreground: light-dark(#686f73, #a1a8ab); --app-border: light-dark(#e3e5e6, #383e41); --app-sidebar: light-dark(#eef0f0, #25292b); --app-sidebar-accent: light-dark(#dde1e2, #3c4346); --app-header: light-dark(#2e3539, #151719); --app-header-foreground: light-dark(#f3f4f4, #eceeee); }
.swatch[data-color='moss'] { --swatch: #586a30; }
.colors:has([name='color'][value='moss']:checked) .app-panel { --app-background: light-dark(#fcfcf8, #22251f); --app-foreground: light-dark(#23261d, #e7e9df); --app-primary: light-dark(#586a30, #b9c78f); --app-secondary: light-dark(#e7ecd8, #353c27); --app-muted: light-dark(#f6f7f0, #292c25); --app-muted-foreground: light-dark(#6d7263, #a9ae9c); --app-border: light-dark(#e3e6d9, #3a3f33); --app-sidebar: light-dark(#eef1e4, #282b24); --app-sidebar-accent: light-dark(#dde3cb, #3f4536); --app-header: light-dark(#4c5444, #191b16); --app-header-foreground: light-dark(#f6f7ef, #eef0e6); }
.swatch[data-color='teal'] { --swatch: #316975; }
.colors:has([name='color'][value='teal']:checked) .app-panel { --app-background: light-dark(#fafcfc, #1d2426); --app-foreground: light-dark(#1b2729, #e2eaeb); --app-primary: light-dark(#316975, #8ec3cb); --app-secondary: light-dark(#d8e9ea, #23393e); --app-muted: light-dark(#f1f6f6, #232b2d); --app-muted-foreground: light-dark(#61757a, #9cb0b3); --app-border: light-dark(#dce7e8, #334042); --app-sidebar: light-dark(#e9f1f1, #222b2d); --app-sidebar-accent: light-dark(#d1e2e4, #344548); --app-header: light-dark(#26525d, #141a1c); --app-header-foreground: light-dark(#eef6f6, #e8f1f2); }
.swatch[data-color='mist'] { --swatch: #3a68a3; }
.colors:has([name='color'][value='mist']:checked) .app-panel { --app-background: light-dark(#fafbfd, #1d2129); --app-foreground: light-dark(#1c2330, #e3e8f0); --app-primary: light-dark(#3a68a3, #92b9e4); --app-secondary: light-dark(#dde6f2, #263449); --app-muted: light-dark(#f2f5f9, #232831); --app-muted-foreground: light-dark(#636e80, #9ea9ba); --app-border: light-dark(#dfe5ee, #353d4a); --app-sidebar: light-dark(#eaeff6, #232831); --app-sidebar-accent: light-dark(#d5dfed, #36404f); --app-header: light-dark(#34465f, #14171d); --app-header-foreground: light-dark(#eef3fa, #e9eef6); }
.swatch[data-color='violet'] { --swatch: #6e59a6; }
.colors:has([name='color'][value='violet']:checked) .app-panel { --app-background: light-dark(#fcfbfe, #221f29); --app-foreground: light-dark(#231e2e, #eae6f2); --app-primary: light-dark(#6e59a6, #c7b8ea); --app-secondary: light-dark(#eae4f6, #3a3054); --app-muted: light-dark(#f6f4fb, #292531); --app-muted-foreground: light-dark(#706a82, #aba5bc); --app-border: light-dark(#e7e2f1, #3c3747); --app-sidebar: light-dark(#f0ecf8, #292531); --app-sidebar-accent: light-dark(#dfd6f0, #443d57); --app-header: light-dark(#4f4179, #2e2543); --app-header-foreground: light-dark(#f6f2fe, #f0ebf9); }
.swatch[data-color='rose'] { --swatch: #943945; }
.colors:has([name='color'][value='rose']:checked) .app-panel { --app-background: light-dark(#fdfafa, #271f20); --app-foreground: light-dark(#2a1d1f, #eee2e3); --app-primary: light-dark(#943945, #e3a3ab); --app-secondary: light-dark(#f2dfe1, #43282c); --app-muted: light-dark(#f9f3f3, #2e2527); --app-muted-foreground: light-dark(#7a6466, #b8a2a5); --app-border: light-dark(#ede0e1, #423537); --app-sidebar: light-dark(#f4e9ea, #2d2426); --app-sidebar-accent: light-dark(#ead5d8, #4a393c); --app-header: light-dark(#6b3b41, #1b1516); --app-header-foreground: light-dark(#fbf0f1, #f5e9ea); }
.swatch[data-color='tangerine'] { --swatch: #a55a2e; }
.colors:has([name='color'][value='tangerine']:checked) .app-panel { --app-background: light-dark(#fefbf8, #27201c); --app-foreground: light-dark(#291e16, #eee4dc); --app-primary: light-dark(#a55a2e, #e2a976); --app-secondary: light-dark(#f7e3d3, #463021); --app-muted: light-dark(#faf4ee, #2d2521); --app-muted-foreground: light-dark(#796659, #b7a699); --app-border: light-dark(#eddfd3, #42362e); --app-sidebar: light-dark(#f6eadf, #2d2521); --app-sidebar-accent: light-dark(#eed6c1, #4a3b30); --app-header: light-dark(#a95e33, #55311e); --app-header-foreground: light-dark(#fdf4ec, #fbe9da); }

/* The palette (scripts/palette.ts) is put in front of this file when it is built. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700.woff2') format('woff2');
}
/* The sticky note's handwriting. */
@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/caveat-latin-600.woff2') format('woff2');
}
/* Headlines: a warm, chunky 1970s serif, the cookbook on the shelf beside the notepad. */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/young-serif-latin-400.woff2') format('woff2');
}

/*
 * Roles. The page is the extension's cream, always light; the brand's brown band
 * and the sticky note's yellow carry it. The light-dark() pairs are for the color
 * section's switch, stage and panel, which take the theme picked there.
 */
:root {
  --page: var(--bg);
  --ink: light-dark(var(--pupil), var(--fg));
  --ink-soft: light-dark(var(--owl), var(--muted));
  --line: var(--border);
  --link: var(--accent);

  --band: var(--header-bg);
  --band-ink: var(--header-fg);
  --band-ink-soft: color-mix(in oklab, var(--header-fg) 80%, var(--header-bg));

  --card: var(--surface);
  --card-warm: color-mix(in oklab, var(--note) 14%, var(--bg));
  --hover: color-mix(in oklab, var(--ink) 6%, transparent);
  --segment: color-mix(in oklab, var(--ink) 7%, var(--surface));
  --fine: #6f5f56;

  --button-bg: var(--bg-light);
  --button-fg: var(--text-light);
  --button-arrow: var(--wordmark-gold);

  --sticky: var(--note);
  --sticky-ink: var(--pupil);
  --highlight: var(--note);

  --display: 'Young Serif', Georgia, serif;
  --text: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: Caveat, 'Comic Sans MS', cursive;

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 8vw, 112px);
  --header: 68px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --z-perch: 2;
  --z-stuck: 3;
  --z-header: 10;
}

/*
 * The fonts are Latin only. Han, kana and hangul fall back to a font made for
 * the page's language, sans throughout: a cursive or serif fallback picks odd faces.
 */
:root:lang(zh-TW) {
  --cjk: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

:root:lang(ja) {
  --cjk:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
}

:root:lang(ko) {
  --cjk: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* Korean wraps between words, as Latin does, never inside one. */
:root:lang(ko) {
  word-break: keep-all;
}

:root:is(:lang(zh-TW), :lang(ja), :lang(ko)) {
  --display: 'Young Serif', var(--cjk);
  --text: Inter, var(--cjk);
  --hand: Caveat, var(--cjk);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

::selection {
  background: var(--note);
  color: var(--pupil);
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the brown band the link color is too dark to see; the note's yellow is not. */
.video :focus-visible,
.closing-card :focus-visible {
  outline-color: var(--note);
}

/* Lucide's icons (src/icons.ts), in the color of the words beside them. */
.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

main {
  /* Sticky notes and cards are stuck on askew; their corners must not widen the page. */
  overflow-x: clip;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: calc(720px + 2 * var(--gutter));
}

.muted {
  color: var(--ink-soft);
}

/* The header: on the page's cream, kept at the top with the way to install. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header);
}

.brand {
  display: inline-block;
  padding: 8px 0;
}

.site-nav {
  display: flex;
  gap: 4px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    color 0.16s var(--ease-out),
    background-color 0.16s var(--ease-out);
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--hover);
}

@media (max-width: 760px) {
  .site-nav {
    display: none;
  }
}

/* Buttons: the brown one on the page, the sticky note's yellow on the band. */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.16s var(--ease-out),
    translate 0.16s var(--ease-out);
}

.button:hover {
  translate: 0 -1px;
}

.button-ink {
  background: var(--button-bg);
  color: var(--button-fg);
}

.button-ink:hover {
  background: color-mix(in oklab, var(--button-bg) 88%, white);
}

.button-ink .icon {
  color: var(--button-arrow);
  stroke-width: 2;
}

.button-note {
  background: var(--note);
  color: var(--pupil);
  font-weight: 700;
}

.button-note:hover {
  background: color-mix(in oklab, var(--note) 78%, white);
}

.button-note .icon {
  stroke-width: 2;
}

.button-ghost {
  padding: 0 20px;
  color: var(--ink);
}

.button-ghost:hover {
  background: var(--hover);
}

.button-small {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.fine-print {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fine);
}

/* A screenshot on the page, lifted off it. */
.shot img {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--line),
    0 36px 60px -36px rgb(40 30 20 / 45%);
}

/* Hero: the tagline on the left; on the right the popup, with the owl, a sticky note and its file. */

.hero {
  padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
}

.hero-grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

/* Marked with a highlighter, the way you would in a notebook. */
.highlight {
  padding: 0 0.08em;
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lede {
  max-width: 34em;
  margin: 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.hero-scene {
  position: relative;
  isolation: isolate;
  padding: 64px 0 56px;
}

.perched-owl {
  position: absolute;
  z-index: var(--z-perch);
  top: 0;
  right: 8%;
  width: clamp(80px, 8vw, 104px);
  pointer-events: none;
}

.hero-scene .shot img {
  border-radius: 24px;
  box-shadow:
    0 0 0 1px var(--line),
    0 30px 60px -30px rgb(72 59 50 / 45%);
}

/* Lifted by a shadow that follows the note's cut corner, so the shadow sits outside the clip. */
.hero-sticky {
  position: absolute;
  z-index: var(--z-stuck);
  left: -28px;
  bottom: 0;
  width: min(230px, 60%);
  margin: 0;
  rotate: -4deg;
  filter: drop-shadow(0 14px 14px rgb(38 30 26 / 28%));
}

.hero-sticky span {
  --fold: 26px;
  position: relative;
  display: block;
  padding: 22px 24px 30px;
  background: var(--note);
  color: var(--pupil);
  font: 600 clamp(1.5rem, 1.2rem + 0.9vw, 1.8rem) / 1.1 var(--hand);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--fold)),
    calc(100% - var(--fold)) 100%,
    0 100%
  );
}

.hero-sticky span::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--fold);
  height: var(--fold);
  background: var(--note-fold);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.hero-file {
  position: absolute;
  z-index: var(--z-stuck);
  right: -12px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  line-height: 1.3;
  rotate: 2deg;
  box-shadow: 0 16px 28px -14px rgb(38 30 26 / 40%);
}

.hero-file strong,
.hero-file strong + span {
  display: block;
}

.hero-file strong {
  font-size: 0.9375rem;
}

.hero-file strong + span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

@media (min-width: 920px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .hero-sticky {
    left: 8px;
  }

  /* Up by the owl's feet, so the sticky note has the bottom to itself. */
  .hero-file {
    top: 16px;
    right: auto;
    bottom: auto;
    left: 8px;
  }
}

/* At a glance: four things, in a strip under the hero. */

.glance {
  border-block: 1px solid var(--line);
  background: var(--card);
}

.glance ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
  margin: 0 auto;
  padding-block: 22px;
  list-style: none;
}

.glance li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
}

.glance .icon,
.checks .icon {
  color: var(--link);
}

/* The video, on the brown band. */

.video {
  background: var(--band);
  color: var(--band-ink);
  padding: var(--section) 0;
}

.video .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: calc(1000px + 2 * var(--gutter));
  text-align: center;
}

.video h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
}

.player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--pupil);
  box-shadow:
    0 0 0 1.5px color-mix(in oklab, var(--band-ink) 18%, transparent),
    0 40px 70px -30px rgb(0 0 0 / 60%);
}

.player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player .play {
  position: absolute;
  inset: 0;
  width: clamp(64px, 7vw, 88px);
  height: auto;
  margin: auto;
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / 35%));
  transition: scale 0.2s var(--ease-out);
}

.player .play rect {
  fill: var(--note);
}

.player .play path {
  fill: var(--pupil);
}

.player:hover .play,
.player:focus-visible .play {
  scale: 1.06;
}

/* Features: a bento of cards, each showing what it says. */

.features {
  padding: var(--section) 0;
}

.section-title {
  max-width: 15ch;
  margin-bottom: clamp(32px, 5vw, 56px);
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.08;
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
}

@media (min-width: 900px) {
  .card-wide {
    grid-column: span 4;
  }

  .card-narrow {
    grid-column: span 2;
  }

  .card-half {
    grid-column: span 3;
  }
}

.card h3 {
  margin-bottom: 10px;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem);
  line-height: 1.15;
}

.card-copy p {
  max-width: 30em;
  margin: 0;
  color: var(--ink-soft);
}

.card-wide,
.card-note {
  justify-content: space-between;
}

/* What you type, in the band's brown, beside the note it turns into. */
.markdown-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.typed,
.got {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border-radius: 18px;
}

.typed {
  background: var(--band);
  color: var(--band-ink);
}

.demo-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.typed .demo-label,
.mark {
  color: var(--wordmark-gold);
}

.typed pre {
  margin: 0;
  font:
    400 0.9375rem/1.7 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  white-space: pre-wrap;
}

.got {
  border: 1px solid var(--line);
  background: var(--page);
}

.got .demo-label {
  color: var(--link);
}

.got p {
  margin: 0;
}

.got-title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.todo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.box {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 5px;
  background: var(--page);
}

.done .box {
  border-color: var(--link);
  background: var(--link);
}

.tick {
  fill: none;
  stroke: var(--page);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The notes as Google Drive lists them, on a sticky note. */
.card-note {
  border-color: transparent;
  background: var(--sticky);
  color: var(--sticky-ink);
}

.card-note .card-copy p {
  color: color-mix(in oklab, var(--sticky-ink) 86%, var(--sticky));
}

.drive {
  padding: 6px 0;
  border-radius: 18px;
  background: white;
  color: var(--ink);
  rotate: -2deg;
  box-shadow: 0 18px 30px -16px rgb(38 30 26 / 45%);
}

.drive-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.drive-title .folder {
  fill: var(--wordmark-gold);
  stroke: none;
}

.drive ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drive li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.drive li + li {
  border-top: 1px solid var(--line);
}

.kind {
  color: var(--ink-soft);
  font-weight: 400;
}

/* A screenshot cropped to the part the card is about. */
.card-shot {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.card-shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card-photo .card-shot img {
  object-position: 68% 60%;
}

.card-band {
  border-color: transparent;
  background: var(--band);
  color: var(--band-ink);
}

.card-band .card-copy p {
  color: var(--band-ink-soft);
}

.card-band .card-shot {
  border: 0;
}

.card-band .card-shot img {
  object-position: 30% 50%;
}

.card-band :focus-visible {
  outline-color: var(--note);
}

/* No screenshot: the owl, across the page. */
.card-sticky {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(28px, 4vw, 56px);
  border-color: transparent;
  background: var(--accent-soft);
}

.card-owl {
  flex: none;
  width: 110px;
}

.card-sticky .card-copy {
  flex: 1 1 320px;
}

.card-sticky h3 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  line-height: 1.1;
}

.card-sticky .card-copy p {
  max-width: 36em;
  font-size: 1.125rem;
  color: var(--ink);
}

/* The popup or the side panel, picked on a segmented switch: radios, so it works without scripts. */
.card-views {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.views-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--segment);
}

.segmented label {
  position: relative;
  cursor: pointer;
}

.segmented span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition:
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}

.segmented label:hover span {
  background: var(--hover);
}

.segmented input:checked + span {
  background: var(--button-bg);
  color: var(--button-fg);
}

.segmented input:focus-visible + span {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.view-shots {
  display: grid;
}

.view-shot {
  grid-area: 1 / 1;
}

.card-views:has([name='view'][value='popup']:checked) .view-shot[data-view='side-panel'],
.card-views:has([name='view'][value='side-panel']:checked) .view-shot[data-view='popup'] {
  display: none;
}

.view-shots img {
  border-radius: 20px;
}

/*
 * Theme Colors: the site stays Cocoa, only the panel changes. Radios and
 * :has() pick it, so it works without scripts; colors.js only remembers the
 * color. The theme follows the system until one is picked.
 */

.colors {
  padding: var(--section) 0;
  border-block: 1px solid var(--line);
  background: var(--card);
}

.colors-grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.colors h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
}

.colors-copy p {
  max-width: 26em;
  margin: 0;
  color: var(--ink-soft);
}

/*
 * The stage is the ground of the theme the panel is in, whatever its color:
 * the cream behind the store's screenshots, or a graphite that every Theme
 * Color's dark header sits on without matching any of them. It turns with the
 * panel, at once.
 */
.color-stage {
  --stage-dark: #333231;
  padding: clamp(16px, 3vw, 40px);
  border-radius: 32px;
  background-color: light-dark(var(--eye-cream), var(--stage-dark));
  box-shadow: inset 0 0 0 1px light-dark(var(--line), transparent);
}

@media (min-width: 920px) {
  .colors-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

/*
 * The theme on a switch, then the palette of the colors. The switch's track
 * and the stage are in the theme picked (the system's until one is), as the
 * panel on the stage is; the sun, the moon and the palette stay on the page's.
 */
@media (prefers-color-scheme: dark) {
  .colors :is(.scheme-track, .color-stage) {
    color-scheme: dark;
  }
}

.colors:has(.scheme-light input:checked) :is(.scheme-track, .color-stage) {
  color-scheme: light;
}

.colors:has(.scheme-dark input:checked) :is(.scheme-track, .color-stage) {
  color-scheme: dark;
}

.swatches,
.scheme {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Still reached with Tab and the arrow keys; the ring and the knob show which is picked. */
.swatch input,
.scheme input,
.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* --on is 1 while dark is in effect: the system's, or picked. */
.scheme {
  --on: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

@media (prefers-color-scheme: dark) {
  .scheme {
    --on: 1;
  }
}

.scheme:has(#scheme-light:checked) {
  --on: 0;
}

.scheme:has(#scheme-dark:checked) {
  --on: 1;
}

/* The sun and the moon each pick their own theme; the one in effect is the stronger. */
.scheme-light,
.scheme-dark {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.scheme-light {
  color: color-mix(in oklab, var(--ink) calc((1 - var(--on)) * 100%), var(--ink-soft));
}

.scheme-dark {
  color: color-mix(in oklab, var(--ink) calc(var(--on) * 100%), var(--ink-soft));
}

.scheme-light:hover,
.scheme-dark:hover {
  color: var(--ink);
}

.scheme-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * The track flips the theme: it holds a label for each, and the one for the
 * theme not in effect is on top.
 */
.scheme-track {
  --pad: 3px;
  --knob: 22px;
  position: relative;
  display: grid;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 12%, var(--page));
  box-shadow:
    inset 0 1px 3px rgb(20 15 10 / 28%),
    0 0 0 1px var(--line);
  transition: background-color 0.3s var(--ease-out);
}

.scheme-track label {
  grid-area: 1 / 1;
  border-radius: inherit;
  cursor: pointer;
}

.scheme-track label[for='scheme-light'] {
  z-index: var(--on);
}

.scheme-track label[for='scheme-dark'] {
  z-index: calc(1 - var(--on));
}

.knob {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  z-index: 2;
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  pointer-events: none;
  background: light-dark(white, color-mix(in oklab, var(--ink-soft) 75%, var(--page)));
  box-shadow: 0 1px 3px rgb(20 15 10 / 35%);
  translate: calc(var(--on) * (52px - var(--knob) - 2 * var(--pad))) 0;
  transition:
    translate 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out);
}

.scheme:has(input:focus-visible) .scheme-track {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* The palette: nine dots, five to a row, right on the section; the picked one's ring is cut from its ground. */
.palette {
  --dot: 34px;
  --cell: 44px;
  margin-top: 64px;
  margin-left: calc((var(--dot) - var(--cell)) / 2);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  gap: 8px;
}

.swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  cursor: pointer;
}

.swatch .dot {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 14%),
    0 0 0 1px var(--line);
  transition:
    box-shadow 0.2s var(--ease-out),
    scale 0.2s var(--ease-out);
}

.swatch:hover .dot {
  scale: 1.08;
}

.swatch input:checked ~ .dot {
  box-shadow:
    0 0 0 3px var(--card),
    0 0 0 5px var(--ink);
}

.swatch input:focus-visible ~ .dot {
  outline: 3px solid var(--link);
  outline-offset: 6px;
}

/*
 * The extension's side panel (app-panel.ts), drawn at its own 780 by 580 and
 * scaled to the stage: each length is a number of its pixels (--px). Its
 * colors are the Theme Color's (palette.ts), in the stage's theme, so a pick
 * shows at once. An opaque outline, not a shadow, as the stage's ground shows
 * through neither.
 */
.app-panel {
  container-type: inline-size;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px light-dark(var(--line), #403f3e);
}

.app-window {
  --px: calc(100cqi / 780);
  display: grid;
  grid-template: calc(44 * var(--px)) minmax(0, 1fr) / calc(200 * var(--px)) minmax(0, 1fr);
  aspect-ratio: 780 / 580;
  font:
    calc(14 * var(--px)) / 1.3 system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  color: var(--app-foreground);
  background: var(--app-background);
  user-select: none;
}

.app-icon {
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--px));
  padding: 0 calc(18 * var(--px)) 0 calc(16 * var(--px));
  color: var(--app-header-foreground);
  background: var(--app-header);
}

.app-wordmark {
  font:
    700 calc(17 * var(--px)) / 1 Inter,
    sans-serif;
  letter-spacing: calc(0.2 * var(--px));
}

.app-wordmark,
.app-notes li {
  white-space: nowrap;
}

/* Inline, in the wordmark's letters. */
.app-eyes {
  display: inline;
  width: calc(23 * var(--px));
  height: calc(14 * var(--px));
  margin: 0 calc(0.5 * var(--px));
  vertical-align: calc(-1 * var(--px));
  overflow: visible;
  fill: var(--wordmark-gold);
}

.app-lid {
  fill: none;
  stroke: var(--wordmark-gold);
  stroke-width: 2;
}

.app-avatar {
  display: grid;
  place-items: center;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  margin-left: auto;
  border-radius: 50%;
  font-size: calc(11 * var(--px));
  font-weight: 600;
  color: color-mix(in srgb, var(--app-header-foreground) 70%, var(--app-header));
  background: color-mix(in srgb, var(--app-header-foreground) 15%, var(--app-header));
}

.app-sidebar {
  border-right: 1px solid var(--app-border);
  background: var(--app-sidebar);
}

.app-search {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  padding: calc(8 * var(--px)) calc(16 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px));
  color: var(--app-primary);
}

.app-input {
  display: flex;
  flex: 1;
  align-items: center;
  height: calc(32 * var(--px));
  padding: 0 calc(10 * var(--px));
  border: 1px solid var(--app-border);
  border-radius: calc(10 * var(--px));
  color: var(--app-muted-foreground);
  background: var(--app-background);
}

.app-notes {
  display: grid;
  gap: calc(2 * var(--px));
  margin: 0;
  padding: calc(2 * var(--px)) calc(6 * var(--px));
  list-style: none;
}

.app-notes li {
  padding: calc(9 * var(--px)) calc(10 * var(--px));
  border-radius: calc(10 * var(--px));
}

.app-notes [data-selected] {
  font-weight: 600;
  background: var(--app-sidebar-accent);
}

.app-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.app-toolbar {
  display: flex;
  gap: calc(12 * var(--px));
  padding: calc(6 * var(--px)) calc(12 * var(--px));
  border-bottom: 1px solid var(--app-border);
  background: var(--app-muted);
}

.app-tools {
  display: flex;
  gap: calc(2 * var(--px));
}

.app-tool {
  display: grid;
  place-items: center;
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  border-radius: calc(8 * var(--px));
}

.app-tool .app-icon {
  stroke-width: 2.25;
}

.app-tool[data-pressed] {
  color: var(--app-primary);
  background: var(--app-secondary);
}

.app-note {
  padding: calc(14 * var(--px)) calc(18 * var(--px));
  line-height: 1.6;
}

.app-title {
  margin: 0 0 0.4em;
  font-size: 1.5em;
  font-weight: 700;
}

.app-note ul {
  margin: 0;
  padding-left: 0.2em;
  list-style: none;
}

.app-note li {
  display: flex;
  gap: calc(8 * var(--px));
  align-items: center;
}

/*
 * The extension's checkboxes are the browser's own; drawn here as Chrome draws
 * them, since a phone's would be its own shape at this size.
 */
.app-check {
  flex: none;
  position: relative;
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  border: 1px solid light-dark(#767676, #858585);
  border-radius: calc(2.5 * var(--px));
  background: light-dark(#ffffff, #3b3b3b);
}

.app-check[data-checked] {
  border-color: transparent;
  background: light-dark(#0075ff, #99c8ff);
}

.app-check[data-checked]::after {
  content: '';
  position: absolute;
  inset: 12% 30% 28%;
  border: solid light-dark(#ffffff, #3b3b3b);
  border-width: 0 max(1px, calc(1.8 * var(--px))) max(1px, calc(1.8 * var(--px))) 0;
  rotate: 45deg;
}

/* Privacy: said plainly, on a warm card. */

.privacy {
  padding: var(--section) 0;
}

.privacy-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--card-warm);
}

.privacy h2 {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  line-height: 1.06;
}

.privacy-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.privacy-body p {
  margin: 0;
  font-size: 1.125rem;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.checks .icon {
  stroke-width: 2;
}

/* The arrow sits out of the line, so the link's underline stops at its words. */
.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 1.4em;
  font-weight: 600;
}

.arrow-link::after {
  content: '→';
  position: absolute;
  right: 0;
}

/* Questions, each answer folded under its own. */

.faq {
  padding: 0 0 var(--section);
}

.faq-grid {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
}

.faq h2 {
  max-width: 12ch;
  margin-bottom: 16px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
}

.faq-intro p {
  margin: 0;
  color: var(--ink-soft);
}

.qa {
  border-top: 1px solid var(--line);
}

.qa:last-child {
  border-bottom: 1px solid var(--line);
}

.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 22px 0;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '+';
  flex: none;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--link);
}

.qa[open] summary::after {
  content: '\2212';
}

.qa p {
  max-width: 56ch;
  margin: 0 0 24px;
  color: var(--ink-soft);
}

@media (min-width: 920px) {
  .faq-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .faq-intro {
    position: sticky;
    top: calc(var(--header) + 32px);
  }
}

/* The last word: the owl perched on a brown card, over the way to install. */

.closing {
  padding: 62px 0 clamp(56px, 8vw, 96px);
}

.closing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 72px);
  border-radius: 36px;
  background: var(--band);
  color: var(--band-ink);
  text-align: center;
}

.closing-owl {
  position: absolute;
  top: -62px;
  left: 50%;
  width: 112px;
  margin-left: -56px;
}

.closing h2 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  line-height: 1.06;
}

.closing .fine-print {
  color: var(--band-ink-soft);
}

/* The privacy policy. */

.policy {
  padding: clamp(48px, 7vw, 96px) 0 var(--section);
}

.policy h1 {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
  line-height: 1.05;
  margin-bottom: 0.3em;
}

.policy h2 {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  line-height: 1.2;
  margin: 2.2em 0 0.6em;
}

.policy ul {
  padding-left: 1.2em;
}

.policy li + li {
  margin-top: 0.5em;
}

.policy code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--accent-soft);
  overflow-wrap: anywhere;
}

/* Footer: the wordmark and the links. */

.site-footer {
  border-top: 1px solid var(--line);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: 28px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
}

.footer-links a:hover {
  text-decoration-thickness: 2px;
}

/* The home page in each language, named in itself: a row of its own under the links. */

.languages {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  font-size: 0.875rem;
}

.languages a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fine);
  text-decoration: none;
}

.languages a:hover,
.languages a[aria-current='page'] {
  color: var(--ink);
  text-decoration: underline;
}