/* THE THEME — generated from lib/theme.ts, the one table of colours. Edit it there. */
:root {
  color-scheme: light;
  --bg: #F2F2F7;
  --panel: #FFFFFF;
  --panel-2: #F2F2F7;
  --raised: #E5E5EA;
  --field: #FFFFFF;
  --line: #C6C6C8;
  --line-soft: #E5E5EA;
  --bar: rgba(242, 242, 247, 0.8);
  --material: rgba(255, 255, 255, 0.9);
  --overlay: rgba(0, 0, 0, 0.22);
  --ink: #000000;
  --ink-2: #3C3C43;
  --ink-3: #636366;
  --accent: #007AFF;
  --accent-ink: #0062C4;
  --accent-fill: #0071E3;
  --accent-fill-hover: #0062C4;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --warn: #C4001A;
  --warn-soft: rgba(255, 59, 48, 0.1);
  --warn-line: rgba(215, 0, 21, 0.35);
  --playhead: #FF3B30;
  --marker: #C93400;
  --wave: #248A3D;
  --beat: #000000;
  --check-a: #FFFFFF;
  --check-b: #E5E5EA;
  --viewer: #FFFFFF;
  --picture-ground: #151517;
  --picture-ink: #FFFFFF;
  --viewer-scrim: rgba(0, 0, 0, 0.86);
  --picture-ink-2: #AEAEB2;
  --picture-material: rgba(44, 44, 46, 0.72);
  --seg-track: rgba(118, 118, 128, 0.12);
  --seg-thumb: #FFFFFF;
  --kind-text: #5856D6;
  --kind-shape: #34C759;
  --kind-image: #FF9500;
  --kind-video: #32ADE6;
  --kind-solid: #AF52DE;
  --kind-composition: #FFCC00;
  --kind-adjustment: #FF2D55;
  --kind-audio: #00C7BE;
  --curve-1: #0062C4;
  --curve-2: #C93400;
  --curve-3: #248A3D;
  --curve-4: #D30F45;
  --curve-5: #8944AB;
  --curve-6: #0071A4;
  --tint: 22%;
  --tint-held: 34%;
  --tint-label: 50%;
  --tint-label-held: 66%;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --panel: #1C1C1E;
  --panel-2: #2C2C2E;
  --raised: #323234;
  --field: #141416;
  --line: #38383A;
  --line-soft: #2C2C2E;
  --bar: rgba(22, 22, 24, 0.78);
  --material: rgba(44, 44, 46, 0.9);
  --overlay: rgba(0, 0, 0, 0.55);
  --ink: #FFFFFF;
  --ink-2: #AEAEB2;
  --ink-3: #9D9DA2;
  --accent: #0A84FF;
  --accent-ink: #4DA3FF;
  --accent-fill: #0071E3;
  --accent-fill-hover: #0062C4;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(10, 132, 255, 0.2);
  --warn: #FF6961;
  --warn-soft: rgba(255, 69, 58, 0.16);
  --warn-line: rgba(255, 105, 97, 0.4);
  --playhead: #FF453A;
  --marker: #FFD60A;
  --wave: #30D158;
  --beat: #FFFFFF;
  --check-a: #1A1A1C;
  --check-b: #111113;
  --viewer: #000000;
  --picture-ground: #151517;
  --picture-ink: #FFFFFF;
  --viewer-scrim: rgba(0, 0, 0, 0.86);
  --picture-ink-2: #AEAEB2;
  --picture-material: rgba(44, 44, 46, 0.72);
  --seg-track: rgba(118, 118, 128, 0.24);
  --seg-thumb: #636366;
  --kind-text: #5E5CE6;
  --kind-shape: #30D158;
  --kind-image: #FF9F0A;
  --kind-video: #64D2FF;
  --kind-solid: #BF5AF2;
  --kind-composition: #FFD60A;
  --kind-adjustment: #FF375F;
  --kind-audio: #63E6E2;
  --curve-1: #0A84FF;
  --curve-2: #FF9F0A;
  --curve-3: #30D158;
  --curve-4: #FF375F;
  --curve-5: #BF5AF2;
  --curve-6: #64D2FF;
  --tint: 34%;
  --tint-held: 50%;
  --tint-label: 36%;
  --tint-label-held: 44%;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.viewing {
  color-scheme: dark;
  --bg: #000000;
  --panel: #1C1C1E;
  --panel-2: #2C2C2E;
  --raised: #323234;
  --field: #141416;
  --line: #38383A;
  --line-soft: #2C2C2E;
  --bar: rgba(22, 22, 24, 0.78);
  --material: rgba(44, 44, 46, 0.9);
  --overlay: rgba(0, 0, 0, 0.55);
  --ink: #FFFFFF;
  --ink-2: #AEAEB2;
  --ink-3: #9D9DA2;
  --accent: #0A84FF;
  --accent-ink: #4DA3FF;
  --accent-fill: #0071E3;
  --accent-fill-hover: #0062C4;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(10, 132, 255, 0.2);
  --warn: #FF6961;
  --warn-soft: rgba(255, 69, 58, 0.16);
  --warn-line: rgba(255, 105, 97, 0.4);
  --playhead: #FF453A;
  --marker: #FFD60A;
  --wave: #30D158;
  --beat: #FFFFFF;
  --check-a: #1A1A1C;
  --check-b: #111113;
  --viewer: #000000;
  --picture-ground: #151517;
  --picture-ink: #FFFFFF;
  --viewer-scrim: rgba(0, 0, 0, 0.86);
  --picture-ink-2: #AEAEB2;
  --picture-material: rgba(44, 44, 46, 0.72);
  --seg-track: rgba(118, 118, 128, 0.24);
  --seg-thumb: #636366;
  --kind-text: #5E5CE6;
  --kind-shape: #30D158;
  --kind-image: #FF9F0A;
  --kind-video: #64D2FF;
  --kind-solid: #BF5AF2;
  --kind-composition: #FFD60A;
  --kind-adjustment: #FF375F;
  --kind-audio: #63E6E2;
  --curve-1: #0A84FF;
  --curve-2: #FF9F0A;
  --curve-3: #30D158;
  --curve-4: #FF375F;
  --curve-5: #BF5AF2;
  --curve-6: #64D2FF;
  --tint: 34%;
  --tint-held: 50%;
  --tint-label: 36%;
  --tint-label-held: 44%;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* site/theme.css */
/*
 * What every page shares of its look: the face, the corners, the focus ring, the
 * appearance switch, and what happens when somebody asks for less motion.
 *
 * COMPOSED SECOND INTO EVERY STYLESHEET, after the colours `lib/theme.ts` writes and
 * before the page's own rules (`STYLESHEETS` there), by the build and the dev server
 * alike. NO COLOUR IS WRITTEN HERE OR IN ANY OTHER STYLESHEET — every one is a name
 * from that table, which is what makes a theme one column of it. `check:layers`
 * refuses a literal.
 *
 * APPLE'S FACE, NOT A COPY OF IT. The system font stack asks the platform for its
 * own UI face — San Francisco on an Apple device, Segoe or Roboto elsewhere — so no
 * font file of Apple's is shipped, and no request is made for one.
 */

:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* CONTINUOUS-LOOKING CORNERS: a control at 8, a card at 12 to 16, a sheet at 14. */
  --r-control: 8px;
  --r-card: 12px;
  --r-sheet: 14px;
  /* The pointer's target on a touch screen, which Apple's guidelines put at 44 points. */
  --touch: 44px;
}

/* A RING FOR THE KEYBOARD, everywhere a page has not drawn its own: systemBlue,
   outside the control, and only for a keyboard — a ring after every click teaches
   people to switch it off. */
:where(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- the appearance switch: Light, Dark --------------------------------------
 *
 * APPLE'S SEGMENTED CONTROL: a sunken track and a raised thumb on the segment chosen.
 * Which one is chosen is read from the root's `data-theme`, which the head's script
 * set before anything painted — so the right segment is lit before the bundle
 * arrives, and the bundle only keeps `aria-checked` in step with it.
 */
.theme-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--seg-track);
  flex: none;
}

.theme-opt {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-opt:hover { color: var(--ink); }
.theme-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.theme-icon { display: block; width: 15px; height: 15px; }

:root:not([data-theme="dark"]) .theme-opt[data-choice="light"],
:root[data-theme="dark"] .theme-opt[data-choice="dark"] {
  background: var(--seg-thumb);
  color: var(--ink);
  box-shadow: var(--shadow-thumb);
}

@media (pointer: coarse) {
  .theme-opt { width: var(--touch); height: 36px; position: relative; }
  /* THE TARGET IS 44 TALL WHERE THE SEGMENT IS 36: the four points either side are
     the track's padding, and a finger landing on them means the segment. */
  .theme-opt::before { content: ''; position: absolute; inset: -4px 0; }
  .theme-seg { padding: 4px; border-radius: 12px; }
}

/* A FIELD'S HINT IS WORDS A PERSON READS, so it is the quietest label colour, which
   holds AA on a field in both themes — the browser's own grey is 4.0:1 on a dark
   field. Opaque, because Firefox fades a placeholder by default. */
::placeholder { color: var(--ink-3); opacity: 1; }

/* --- less motion, when it is asked for -----------------------------------------
 *
 * EVERYTHING THAT MOVES FOR ITS OWN SAKE STOPS: a transition, an animation, a
 * smooth scroll. What a person drives — a drag, the playhead, a film playing — is
 * not CSS and is untouched, because that motion is the work.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* site/home.css */
/* The homepage uses the shared theme roles. The footage is original illustrative
   media; its typography and motion are a style study, not a screen recording. */
:root { --gutter: 28px; --wide: 1160px; --measure: 62ch; --media-shade: var(--ink); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--panel); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font-family: inherit; }
.media-source { position: absolute; overflow: hidden; pointer-events: none; }
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; padding: 0 max(var(--gutter), calc((100% - var(--wide)) / 2)); background: var(--material); border-bottom: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mark { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch); font: 600 18px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
/* Use the existing logo asset; its alpha follows the page's ink in either theme. */
.brand-icon { display: block; flex: 0 0 34px; width: 34px; height: 34px; background: var(--ink); -webkit-mask: url('/icon.svg') center / contain no-repeat; mask: url('/icon.svg') center / contain no-repeat; mask-mode: alpha; }
.bar nav { display: flex; align-items: center; gap: 8px; }
.bar nav a, .bar-btn { padding: 8px 12px; color: var(--ink-2); font-size: 13px; text-decoration: none; white-space: nowrap; }
.bar nav a:hover, .bar-btn:hover { color: var(--ink); }
.bar-btn { border: 0; background: none; border-radius: 999px; cursor: pointer; max-width: 25vw; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 18px; background: var(--ink); color: var(--panel) !important; border-radius: 999px; padding: 10px 20px; font-weight: 600; text-decoration: none; transition: opacity .18s ease, transform .18s ease; }
.pill:hover { opacity: .82; }
.pill.big { padding: 15px 25px; font-size: 15px; }
.bar .pill { padding: 9px 18px; }
.bar #account { max-width: 180px; }
.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--line); border-radius: 999px; padding: 14px 23px; font-size: 15px; font-weight: 500; text-decoration: none; background: var(--panel); }
.secondary:hover { border-color: var(--ink-2); }
.hero { max-width: var(--wide); margin: 0 auto; padding: 70px var(--gutter) 44px; text-align: center; }
.kicker, .eyebrow { margin: 0 0 20px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.kicker { display: flex; align-items: center; justify-content: center; gap: 9px; }
.kicker > span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
h1 { margin: 0; font: 600 clamp(54px, 6.7vw, 84px)/.99 var(--display); letter-spacing: -.065em; }
.sub { max-width: 47ch; margin: 25px auto 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 29px 0 0; }
.hero-note { color: var(--ink-3); font-size: 12px; margin: 18px 0 0; }
.showcase { max-width: calc(var(--wide) - 24px); margin: 0 auto; border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: 0 24px 80px -36px var(--overlay); }
.showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 22px; border-bottom: 1px solid var(--line-soft); background: var(--panel); color: var(--ink-2); font-size: 12px; }
.showcase-head > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.example-label { color: var(--ink-3); font-size: 10px; }
.style-workspace { display: grid; grid-template-columns: 1fr 1.9fr; align-items: center; gap: 38px; padding: 34px 44px; }
.study-brief h2 { font-size: 38px; letter-spacing: -.05em; }
.study-brief > p:not(.eyebrow) { max-width: 27ch; margin: 16px 0 25px; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.study-brief .eyebrow { font-size: 10px; margin-bottom: 12px; }
.study-details { display: grid; gap: 19px; list-style: none; margin: 0; padding: 0; }
.study-details li { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; }
.detail-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; font: 600 16px/1 var(--display); }
.study-details small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 10px; font-weight: 400; }
.comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 27px; position: relative; }
.comparison figure { margin: 0; min-width: 0; }
.comparison figcaption { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 11px; font-weight: 500; color: var(--ink-2); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.result-dot { background: var(--accent); }
.film { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--media-shade); container-type: inline-size; }
.footage { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--media-shade) 20%, transparent), transparent 45%, color-mix(in srgb, var(--media-shade) 58%, transparent)); }
/* The media's caption ink stays the same in either page theme, as it would in an export. */
.film-hook, .film-caption, .film-time { position: absolute; color: var(--on-accent); }
.film-hook { margin: 0; top: 11%; left: 5%; right: 5%; text-align: center; text-shadow: 0 2px 14px var(--media-shade); animation: hook-reveal 6s ease infinite; }
.film-hook em { display: block; font: italic 6.8cqw/1.1 Georgia, serif; }
.film-hook strong { display: block; margin-top: 2px; font: 800 9cqw/1.05 var(--display); letter-spacing: -.035em; }
.film-caption { margin: 0; left: 5%; right: 5%; bottom: 17%; font: 600 8.2cqw/1.08 var(--display); text-align: center; letter-spacing: -.04em; text-shadow: 0 3px 2px color-mix(in srgb, var(--media-shade) 75%, transparent), 0 3px 16px var(--media-shade); }
.film-caption strong { display: inline-block; font-size: 11cqw; font-weight: 850; animation: caption-emphasis 6s cubic-bezier(.2,.8,.2,1) infinite; }
.film-time { bottom: 12px; left: 12px; font: 400 8px/1 var(--mono); opacity: .8; }
.transfer { position: absolute; z-index: 1; left: 50%; top: 52%; translate: -50% -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-soft); border-radius: 50%; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: 21px; }
.prompt-strip { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line-soft); background: var(--panel); }
.prompt-mark { display: grid; place-items: center; width: 26px; height: 26px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 7px; }
.prompt-strip p { margin: 0; color: var(--ink); font-size: 13px; }
.prompt-tag { margin-left: auto; color: var(--ink-3); font-size: 10px; white-space: nowrap; }
.section-wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.connect { padding-top: 126px; }
.section-heading { text-align: center; margin-bottom: 42px; }
h2 { margin: 0; font: 600 clamp(32px, 4.2vw, 52px)/1.08 var(--display); letter-spacing: -.05em; text-wrap: balance; }
.section-heading .eyebrow { margin-bottom: 14px; }
.section-heading > p:last-child:not(.eyebrow) { color: var(--ink-2); font-size: 16px; max-width: 54ch; margin: 18px auto 0; }
.connect { max-width: 940px; }
.connect .tabs { text-align: left; padding: 9px 24px 26px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--bg); }
pre { margin: 0; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; overflow-x: auto; }
code { color: var(--ink); font: 400 12px/1.75 var(--mono); white-space: pre; }
code .c { color: var(--ink-2); }
.tabs { display: flex; flex-wrap: wrap; align-items: flex-end; }
.tabs input { position: absolute; opacity: 0; width: 0; height: 0; }
.tabs label { order: 1; cursor: pointer; padding: 12px 13px; font-weight: 500; font-size: 13px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs label:hover { color: var(--ink); }
.panels { order: 2; flex: 1 0 100%; min-width: 0; border-top: 1px solid var(--line); padding-top: 24px; margin-top: -1px; }
.panel { display: none; }
#c0:checked ~ label[for="c0"], #c1:checked ~ label[for="c1"], #c2:checked ~ label[for="c2"],
#c3:checked ~ label[for="c3"], #c4:checked ~ label[for="c4"], #c5:checked ~ label[for="c5"],
#c6:checked ~ label[for="c6"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
#c0:checked ~ .panels #p0, #c1:checked ~ .panels #p1, #c2:checked ~ .panels #p2,
#c3:checked ~ .panels #p3, #c4:checked ~ .panels #p4, #c5:checked ~ .panels #p5,
#c6:checked ~ .panels #p6 { display: block; }
.tabs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel .where { margin: 0 0 16px; font-size: 13px; color: var(--ink-2); }
.panel .steps { margin: 0 0 20px; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.panel .steps li { margin-bottom: 8px; }
.panel .steps strong { color: var(--ink); font-weight: 600; }
.panel .note { margin: 16px 0 0; font-size: 13px; color: var(--ink-2); }
.last { text-align: center; padding-top: 135px; padding-bottom: 120px; }
.last h2 { font-size: clamp(40px, 5.8vw, 70px); }
.last .links { margin-top: 30px; }
footer { max-width: var(--wide); margin: 0 auto; padding: 30px var(--gutter) 40px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 30px; color: var(--ink-2); font-size: 12px; }
footer > span { font-size: 14px; }
footer .theme-seg { margin-right: auto; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 5px; }
@keyframes hook-reveal { 0%, 8% { opacity: 0; transform: translateY(8px); } 18%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes caption-emphasis { 0%, 21% { opacity: 0; transform: translateY(8px) scale(.94); } 31%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (pointer: coarse) { .bar nav a, .bar-btn, .tabs label, footer nav a { min-height: var(--touch); display: inline-flex; align-items: center; } }
@media (max-width: 1000px) { .bar nav a:first-child { display: none; } .style-workspace { gap: 26px; padding: 28px; } .study-brief h2 { font-size: 32px; } }
@media (max-width: 760px) { .bar { height: 64px; } .bar nav a { display: none; } .hero { padding-top: 65px; } .showcase { margin-left: var(--gutter); margin-right: var(--gutter); } .study-brief { display: none; } .style-workspace { display: block; padding: 22px; } .comparison { max-width: 520px; margin: 0 auto; } .prompt-tag { display: none; } .connect { padding-top: 85px; } .last { padding-top: 85px; padding-bottom: 80px; } footer { gap: 20px; flex-wrap: wrap; } }
@media (max-width: 560px) { :root { --gutter: 16px; } .bar { gap: 12px; } .bar nav { gap: 0; } .bar-btn { font-size: 12px; padding: 9px; max-width: 30vw; } .bar .pill { padding: 9px 13px; } .hero { padding-top: 54px; padding-bottom: 32px; } h1 { font-size: clamp(48px, 12.8vw, 68px); letter-spacing: -.06em; } .kicker { font-size: 9px; margin-bottom: 20px; } .sub { font-size: 15px; max-width: 33ch; margin-top: 22px; } .links { gap: 9px; margin-top: 24px; } .pill.big, .secondary { font-size: 12px; padding: 13px 17px; gap: 12px; } .hero-note { font-size: 10px; margin-top: 15px; } .showcase { border-radius: 12px; } .showcase-head { padding: 12px 14px; font-size: 9px; gap: 8px; } .example-label { display: none; } .style-workspace { padding: 15px 12px 18px; } .comparison { gap: 15px; } .comparison figcaption { font-size: 8px; gap: 4px; margin-bottom: 8px; } .transfer { width: 29px; height: 29px; font-size: 16px; } .film { border-radius: 7px; } .film-time { font-size: 6px; left: 8px; bottom: 9px; } .prompt-strip { padding: 12px; gap: 8px; } .prompt-strip p { font-size: 9px; } .prompt-mark { width: 22px; height: 22px; flex: 0 0 22px; } .section-heading { margin-bottom: 28px; } .eyebrow { font-size: 9px; } h2 { font-size: 34px; } .section-heading > p:last-child:not(.eyebrow) { font-size: 14px; max-width: 33ch; } .connect .tabs { padding: 8px 15px 20px; } .tabs label { padding: 11px 9px; font-size: 11px; } .panel .where, .panel .note { font-size: 12px; } .panel .steps { font-size: 13px; } pre { padding: 15px; } code { font-size: 10px; } .last h2 { font-size: 40px; } footer { padding-top: 24px; padding-bottom: 30px; gap: 20px 14px; } footer nav { width: 100%; gap: 24px; } footer .theme-seg { margin-left: auto; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .film-hook, .film-caption strong { animation: none; } .pill { transition: none; } }

/* Exported artwork keeps its dark shading when the surrounding page changes theme. */
:root[data-theme="dark"] { --media-shade: var(--viewer); }
:root[data-theme="dark"] { --media-shade: var(--viewer); }
/* Account state owns visibility, including when a control has a display utility. */
.bar [hidden] { display: none; }

h1 > span { display: block; }
@media (min-width: 1001px) { h1 > span { display: inline; } }
@media (max-width: 560px) { .showcase-head .example-label { display: inline; font-size: 7px; white-space: nowrap; } }

.unlimited { text-align: center; padding-top: 80px; }
.unlimited h2 { font-size: clamp(28px, 3.5vw, 42px); }
.unlimited > p:not(.eyebrow) { margin: 16px auto 0; color: var(--ink-2); font-size: 14px; max-width: 54ch; }
.unlimited > p.allowance-note { color: var(--ink-3); font-size: 11px; margin-top: 10px; }
@media (min-width: 1001px) { h1 > span + span { margin-left: .18em; } }
@media (max-width: 560px) { .unlimited { padding-top: 65px; } .unlimited h2 { max-width: 15ch; margin: 0 auto; } .unlimited > p:not(.eyebrow) { font-size: 13px; } .unlimited > p.allowance-note { font-size: 10px; } }

/* One illustrative ChatGPT thread, refining the same video throughout. */
.reel-examples > .chat-demo { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wide) - 24px); margin: 0 auto; }
.chat-demo { background: var(--panel); }
.chat-demo .showcase-head { padding: 17px 24px; align-items: center; }
.demo-provider { gap: 9px; color: var(--ink); font-size: 14px; font-weight: 600; }
.demo-provider > span { color: var(--ink-3); font-size: 11px; font-weight: 400; }
.chat-demo .example-label { display: inline; font-size: 10px; white-space: nowrap; }
.chat-scene { padding: 38px 54px 34px; }
.demo-conversation { max-width: 760px; min-width: 0; margin: 0 auto; }
.demo-chat-heading { margin: 0 0 20px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.demo-chat-heading > span { display: block; margin-top: 5px; color: var(--ink-3); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.demo-thread { padding: 4px 0 16px; }
.demo-upload { padding: 14px; border: 1px solid var(--line-soft); border-radius: 17px; background: var(--bg); }
.demo-turn-name { margin: 0 0 9px; color: var(--ink); font-size: 12px; font-weight: 600; }
.demo-attachments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.demo-file { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); min-width: 0; }
.demo-thumb { position: relative; flex: 0 0 58px; width: 58px; height: 78px; overflow: hidden; border-radius: 6px; background: var(--bg); container-type: inline-size; }
.demo-file > div:last-of-type { min-width: 0; padding-bottom: 5px; }
.demo-file > div:last-of-type > p { margin: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: 10px; font-weight: 500; white-space: nowrap; }
.demo-file > div:last-of-type > span { display: block; margin-top: 4px; color: var(--ink-3); font-size: 9px; }
.demo-file-tick { position: absolute; top: 8px; right: 8px; color: var(--ink-3); font-size: 8px; }
.demo-file-play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid !important; place-items: center; width: 21px; height: 21px; border: 1px solid color-mix(in srgb, var(--on-accent) 50%, transparent); border-radius: 50%; background: var(--overlay); color: var(--on-accent) !important; font-size: 8px !important; margin: 0 !important; }
.demo-turn { margin-top: 24px; }
.demo-turn[hidden], .demo-answer[hidden] { display: none; }
.demo-user { max-width: 90%; margin-left: auto; padding: 14px 16px; border-radius: 18px 18px 5px 18px; background: var(--bg); }
.demo-message { min-height: 42px; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.demo-turn[data-typing="true"] .demo-cursor { display: inline-block; }
.demo-answer { margin-top: 18px; padding-right: 12px; }
.demo-assistant-name { margin: 0 0 9px; color: var(--ink); font-size: 13px; font-weight: 600; }
.demo-loading { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 4px 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.demo-loading[hidden], .demo-complete[hidden] { display: none; }
.demo-loading-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: demo-thinking 1.2s ease-in-out infinite; }
.demo-answer[data-phase="creating"] .demo-loading-mark { width: 18px; height: 18px; border-radius: 0; -webkit-mask: url('/icon.svg') center / contain no-repeat; mask: url('/icon.svg') center / contain no-repeat; mask-mode: alpha; }
.demo-answer-text { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.65; }
.demo-tool { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; padding: 5px 9px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--ink-3); font-size: 10px; }
.demo-tool-logo { flex: 0 0 18px; width: 18px; height: 18px; background: var(--ink); -webkit-mask: url('/icon.svg') center / contain no-repeat; mask: url('/icon.svg') center / contain no-repeat; mask-mode: alpha; }
.demo-tool-done { color: var(--ink-2); }
.demo-cursor { display: none; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--ink); animation: demo-caret .85s step-end infinite; }
.demo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.demo-output { width: 100%; max-width: 220px; margin: 18px 0 0; min-width: 0; }
.demo-output figcaption { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 12px; color: var(--ink-2); font-size: 11px; }
.demo-film { aspect-ratio: 9 / 14; border: 1px solid color-mix(in srgb, var(--line) 50%, transparent); border-radius: 14px; }
.demo-film-tag { position: absolute; z-index: 4; top: 12px; left: 12px; color: var(--on-accent); font: 400 8px/1.3 var(--mono); text-shadow: 0 1px 7px var(--overlay); }
.demo-result-note { margin: 12px auto 0; max-width: 31ch; color: var(--ink-3); font-size: 11px; line-height: 1.5; text-align: center; }
.ugc-scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--accent-fill); container-type: inline-size; }
.ugc-raw { background: var(--panel-2); }
.ugc-presenter { position: absolute; z-index: 2; bottom: -1%; left: -7%; width: 114%; height: 88%; filter: drop-shadow(0 2px 7px var(--overlay)); }
.ugc-kicker { position: absolute; z-index: 1; top: 8%; left: 8%; right: 8%; margin: 0; color: var(--on-accent); font: 500 3cqw/1.2 var(--sans); letter-spacing: .14em; }
.ugc-type { position: absolute; z-index: 1; top: 15%; left: 6%; right: 6%; margin: 0; color: var(--on-accent); font: 850 27cqw/.84 var(--display); letter-spacing: -.065em; }
.ugc-type > span { display: block; }
.ugc-orbit { position: absolute; z-index: 1; top: 43%; left: -22%; width: 94%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--on-accent) 55%, transparent); border-radius: 50%; }
.ugc-orbit::after { content: ''; position: absolute; top: 15%; left: 10%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: var(--on-accent); }
.ugc-spark { position: absolute; z-index: 1; top: 41%; right: 2%; width: 27%; height: auto; fill: var(--on-accent); }
.ugc-caption { position: absolute; z-index: 3; bottom: 12%; left: 6%; right: 6%; margin: 0; color: var(--on-accent); font: 650 8cqw/1.05 var(--display); letter-spacing: -.035em; text-align: center; text-shadow: 0 1px 1px var(--overlay), 0 2px 3px var(--overlay), 0 3px 8px var(--overlay); }
.ugc-caption > strong { display: table; margin: .12em auto 0; padding: .05em .2em .12em; border-radius: .15em; background: var(--accent-fill-hover); font-size: 12cqw; font-weight: 850; letter-spacing: -.045em; }
.demo-file-play { z-index: 4; }

/* Each reply keeps its own edit, so revisiting a message shows that version.
   The same presenter is reused; the reference thumbnail stays unchanged. */
.demo-output .ugc-scene { background: color-mix(in srgb, var(--accent-fill) 12%, var(--on-accent)); transition: background .55s ease; }
.demo-output .ugc-type, .demo-output .ugc-kicker { color: var(--accent-fill-hover); }
.demo-output .demo-film-tag { color: var(--accent-fill-hover); text-shadow: none; }
.demo-output .ugc-orbit { border-color: color-mix(in srgb, var(--accent-fill-hover) 55%, transparent); }
.demo-output .ugc-orbit::after { background: var(--accent-fill-hover); }
.demo-output .ugc-spark { opacity: 0; transition: opacity .4s ease, transform .4s ease; }
.demo-output .ugc-caption > strong { font-size: 14cqw; transition: font-size .45s ease; }
.demo-output[data-result-stage="captions"] .ugc-scene { background: var(--panel-2); }
.demo-output[data-result-stage="captions"] .demo-film-tag { color: var(--ink-2); }
.demo-output[data-result-stage="captions"] .ugc-type,
.demo-output[data-result-stage="captions"] .ugc-kicker,
.demo-output[data-result-stage="captions"] .ugc-orbit { opacity: 0; }
.demo-output[data-result-stage="captions"] .ugc-caption > strong,
.demo-output[data-result-stage="graphics"] .ugc-caption > strong { font-size: 12cqw; }
.demo-output[data-result-stage="graphics"] .ugc-scene { background: var(--accent-fill); }
.demo-output[data-result-stage="graphics"] .ugc-type,
.demo-output[data-result-stage="graphics"] .ugc-kicker,
.demo-output[data-result-stage="graphics"] .demo-film-tag { color: var(--on-accent); }
.demo-output[data-result-stage="graphics"] .ugc-orbit { border-color: color-mix(in srgb, var(--on-accent) 55%, transparent); }
.demo-output[data-result-stage="graphics"] .ugc-orbit::after { background: var(--on-accent); }
.demo-output[data-result-stage="graphics"] .ugc-spark,
.demo-output[data-result-stage="refined"] .ugc-spark { opacity: 1; }
.demo-output[data-result-stage="refined"] .ugc-spark { fill: var(--accent-fill-hover); }
.demo-output[data-result-stage="graphics"] .ugc-type > span { animation: ugc-type-in .65s cubic-bezier(.2,.8,.2,1) both; }
.demo-output[data-result-stage="graphics"] .ugc-type > span:nth-child(2) { animation-delay: .18s; }
.demo-output[data-result-stage="graphics"] .ugc-orbit { animation: ugc-orbit-turn 6s linear both; }
.demo-output[data-result-stage="graphics"] .ugc-spark { animation: ugc-spark-turn 6s ease-in-out both; }
.chat-demo[data-playing="false"] .chat-scene *, .chat-demo[data-playing="false"] .chat-scene *::after { animation-play-state: paused !important; }
.chat-demo[data-still="true"] .chat-scene *, .chat-demo[data-still="true"] .chat-scene *::after { animation: none !important; transition: none !important; }
.demo-footer { display: flex; align-items: center; gap: 16px; padding: 17px 24px; border-top: 1px solid var(--line-soft); background: var(--bg); color: var(--ink-3); font-size: 11px; }
@keyframes demo-caret { 50% { opacity: 0; } }
@keyframes demo-thinking { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ugc-type-in { from { opacity: 0; transform: translateX(-24%) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes ugc-orbit-turn { from { transform: rotate(-35deg); } to { transform: rotate(110deg); } }
@keyframes ugc-spark-turn { 0% { opacity: 0; transform: scale(.3) rotate(-35deg); } 20% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 1; transform: scale(.85) rotate(95deg); } }
@media (max-width: 900px) {
  .chat-scene { padding: 30px; }
  .demo-attachments { gap: 8px; }
  .demo-file { display: block; padding: 8px; }
  .demo-thumb { width: 100%; height: 82px; }
  .demo-file > div:last-of-type { padding-top: 8px; padding-bottom: 0; }
}
@media (max-width: 620px) {
  .chat-demo .showcase-head { padding: 14px 16px; }
  .demo-provider { font-size: 12px; gap: 6px; }
  .demo-provider > span { font-size: 9px; }
  .chat-demo .example-label { font-size: 8px; }
  .chat-scene { padding: 22px 18px; }
  .demo-chat-heading { margin-bottom: 16px; }
  .demo-upload { padding: 11px; }
  .demo-user { max-width: 94%; padding: 12px 14px; }
  .demo-message, .demo-answer-text { font-size: 12px; }
  .demo-attachments { gap: 9px; }
  .demo-thumb { height: 80px; }
  .demo-file > div:last-of-type > p { font-size: 9px; }
  .demo-file > div:last-of-type > span { font-size: 8px; }
  .demo-output { max-width: 180px; }
  .demo-output figcaption { margin-bottom: 9px; font-size: 10px; }
  .demo-result-note { font-size: 10px; }
  .demo-footer { padding: 14px 16px; flex-wrap: wrap; gap: 8px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-demo *, .chat-demo *::after { animation: none !important; transition: none !important; }
}

/* site/auth.css */
/*
 * The account dialog, and the menu under the account button.
 *
 * SHARED, BECAUSE THE DIALOG IS. `askToSignIn` and `accountMenu` are one
 * definition in `editor/src/signin.ts` and the editor, /dashboard and /create
 * all open them — so their appearance has to be one definition too. It lived in
 * `editor/app.css`, which the hub pages do not load, and the first thing a
 * person saw on /dashboard was an unstyled form.
 *
 * COMPOSED INTO BOTH STYLESHEETS AT BUILD, rather than linked as a third file:
 * a separate <link> would be an extra request on every page, and an unhashed one
 * under a year-long immutable header is exactly the stale-asset trap this build
 * hashes everything to avoid. `scripts/build-web.ts` and `scripts/serve.ts` each
 * append it, and `npm run check` asserts both outputs still contain it.
 *
 * ITS OWN CHROME, NOT `.connect`'s. That one is the editor's dense panel — small
 * type, a title bar, full width — and a sign-up form in it reads as a settings
 * sheet stretched to 740px. This is the first thing anybody sees after the
 * homepage, so it keeps that register: one narrow column, generous, quiet.
 *
 * APPLE'S SHEET, IN EITHER THEME: a white card (#1C1C1E in dark) with a large
 * title, fields 44 points tall, one filled blue button and the rest tinted. Every
 * colour is a role from lib/theme.ts, which every stylesheet this is composed into
 * starts with — no fallback values, because there is no sheet without them.
 */

.signin-field {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font: inherit;
}

.signin-field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* THE CARD HAS TO STAY REACHABLE ON A SHORT WINDOW. A dialog centres itself
   with `margin: auto` inside its own box, so a card taller than the viewport
   hangs off BOTH ends with nothing to scroll and the "Create account" button
   is simply gone — measured at 708px of card in a 640px window. So the dialog
   is the whole viewport, scrolls itself, and centres the card with a flex
   `margin: auto`, which is the one centring that does not clip what overflows. */
dialog.auth {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 24px 16px;
  box-sizing: border-box;
  background: transparent;
  color: var(--ink);
  overflow-y: auto;
  /* A scroll that reaches the end stops there rather than scrolling the editor
     behind the backdrop. */
  overscroll-behavior: contain;
}

/* SCOPED TO [open], because `dialog:not([open]) { display: none }` is a UA rule
   of the same specificity as `dialog.auth` — an unscoped `display: flex` here
   beats it and the sign-in card is on screen before anybody asks for it. */
dialog.auth[open] { display: flex; }

dialog.auth::backdrop {
  background: var(--overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.auth-card {
  /* `margin: auto` on a flex child, not `place-items: center` on the parent:
     grid centring clips the top of an item taller than its container. */
  margin: auto;
  width: min(400px, 100%);
  flex: 0 0 auto;
  background: var(--panel);
  border: 0.5px solid var(--line);
  border-radius: 18px;
  padding: 34px 34px 28px;
  box-shadow: var(--shadow);
  font: 400 15px/1.55 var(--sans);
}

.auth-mark {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin-bottom: 22px;
}

.auth-card h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Signing in has no lede, so the heading carries the space it was giving. */
.auth-card.auth-tight h2 { margin-bottom: 24px; }

.auth-lede {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.auth-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: 13.5px;
}

/* WHAT IS NOT A FAILURE — an account waiting on its inbox, a link on its way — in the accent's
   soft fill rather than the warning's. */
.auth-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13.5px;
}
.auth-note + .auth-link { display: block; margin: -4px 0 14px; font-size: 13.5px; }
/* HIDDEN MEANS HIDDEN: each of these sets its own `display`, which beats the browser's `[hidden]`. */
.auth-link[hidden], .auth-google[hidden], .auth-or[hidden], .auth-note[hidden] { display: none; }

/* "Forgot password?", under the field it is about, to the right. */
.auth-forgot {
  display: block;
  margin: -6px 0 14px auto;
  font-size: 13px;
}

/* The label wraps its input, so the whole thing is one click target and the
   two cannot drift apart. */
/* `display: block` HERE BEATS THE BROWSER'S OWN `[hidden] { display: none }`,
   because an author rule wins a tie against the user agent — so the Confirm
   password field stayed on screen while signing in, with `hidden` dutifully set
   to true on it. Checking the PROPERTY said it was hidden; checking the pixels
   would have said otherwise. */
.auth-label[hidden] { display: none; }

.auth-label {
  display: block;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.auth-label .signin-field {
  margin: 6px 0 0;
  height: 44px;
  padding: 0 13px;
  font-size: 16px;
  border-radius: 10px;
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink);
  width: 100%;
}

.auth-label .signin-field::placeholder { color: var(--ink-3); }
.auth-label .signin-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-primary {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.auth-primary:hover:not(:disabled) { background: var(--accent-fill-hover); }
.auth-primary:disabled { opacity: 0.6; cursor: default; }

/* A rule with a word in it, rather than a word floating between two buttons. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink-2);
  font-size: 12px;
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-google {
  display: block;
  height: 44px;
  line-height: 42px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.auth-google:hover { background: var(--raised); }

.auth-switch {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}

/* The other mode is a sentence, not a second button competing with the first. */
.auth-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--accent-ink);
  cursor: pointer;
}

.auth-link:hover { text-decoration: underline; }

.auth-fine {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* A SECOND ACTION IN THE CARD, as a button: the Google button's outline, the width of the primary. */
button.auth-second {
  width: 100%;
  margin-top: 10px;
  background: none;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

/* --- the account's connected chatbots -------------------------------------- */

/* A SHEET'S GROUPED LIST (`openConnections`): one inset group on the card, a row each, a hairline
   between rows from the text's edge, a quiet Disconnect in the warning's ink. Wider than the
   sign-in card, so a row is a line of title and a line of detail rather than three. */
.auth-card.conn-card { width: min(480px, 100%); }
.conn-card .auth-lede { margin-bottom: 20px; }

.conn-list {
  margin: 0 0 12px;
  border-radius: 14px;
  background: var(--panel-2);
  overflow: hidden;
}
.conn-list[hidden] { display: none; }

.conn-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 11px 10px 11px 14px;
}
.conn-row + .conn-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 64px;
  right: 0;
  height: 1px;
  background: var(--line);
  transform: scaleY(0.5);
  transform-origin: top;
}

.conn-tile {
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.conn-tile[data-here] { background: var(--raised); color: var(--ink-2); }

.conn-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conn-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conn-sub { color: var(--ink-3); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }

.conn-end {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--warn);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
/* LIFTED ONTO THE CARD'S GROUND, not tinted: the warning's ink on its own tint over `--panel-2`
   is 4.16:1 in dark, under AA for words this size; on `--panel` it is 6:1 (THEME_TEXT_PAIRS). */
.conn-end:hover:not(:disabled) { background: var(--panel); }
.conn-end:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.conn-end:disabled { color: var(--ink-3); cursor: default; }

/* WHILE THE LIST IS READ: two rows' shape, breathing unless motion is turned down. */
.conn-waiting .conn-tile { background: var(--raised); }
.conn-bar { display: block; width: 38%; height: 10px; border-radius: 5px; background: var(--raised); }
.conn-bar + .conn-bar { width: 62%; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .conn-waiting { animation: conn-waiting 1.1s ease-in-out infinite alternate; }
}
@keyframes conn-waiting { to { opacity: 0.45; } }

/* NO ROWS: a drawing, what is so, and where to connect one — in the group's own place. */
.conn-list.conn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 20px 26px;
  text-align: center;
}
.conn-empty-icon { margin-bottom: 8px; color: var(--ink-3); }
.conn-empty-title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.conn-empty-words { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.conn-empty .auth-link { margin-top: 10px; font-size: 14px; text-decoration: none; }

.conn-foot { margin: 0 0 18px; padding: 0 4px; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }

@media (max-width: 460px) {
  .auth-card { padding: 26px 22px 22px; border-radius: 14px; }
  .auth-card h2 { font-size: 22px; }
}

/* The website's signed-in header stays compact; identity is inside the menu. */
body[data-page] #account.account-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--touch);
  min-height: var(--touch);
  max-width: none;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  overflow: visible;
  text-overflow: clip;
}
body[data-page] #account.account-compact:hover { background: var(--bg); opacity: 1; transform: none; }
.account-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font: 600 13px/1 var(--sans);
}
.account-chevron { color: var(--ink-3); font: 400 12px/1 var(--sans); }

/* --- the account menu, shared with the editor ----------------------------- */

.who-menu {
  position: fixed;
  width: 300px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow);
  font: 400 13px/1.4 var(--sans);
  z-index: 60;
}

.who-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.who-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-soft); border-radius: 50%; background: var(--bg); color: var(--ink); font: 600 14px/1 var(--sans); }
.who-identity { display: grid; gap: 3px; min-width: 0; }
.who-caption { color: var(--ink-3); font-size: 10px; }
.who-email { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.who-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  cursor: pointer;
}
.who-item:hover { background: var(--bg); color: var(--ink); }
.who-item:active { background: var(--panel-2); }
.who-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.who-icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ink-3); }
.who-item:hover .who-icon { color: var(--ink); }
.who-item-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* THE WAYS OUT, under a rule of their own. */
.who-item[data-leave] { color: var(--ink-2); }
.who-item:not([data-leave]) + .who-item[data-leave] {
  margin-top: 10px;
}
.who-item:not([data-leave]) + .who-item[data-leave]::before { content: ''; position: absolute; top: -5px; left: 10px; right: 10px; height: 1px; background: var(--line-soft); }

@media (pointer: coarse) {
  .who-item { min-height: var(--touch); }
  .conn-end { min-height: var(--touch); }
}

.auth-fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.auth-fine a:hover { color: var(--ink); }
.auth-legal { margin: 4px 0 18px; padding: 0; border: 0; }