/* myglaze.ai: a soft charcoal page. Every color on the site comes from the
   values below. Hovering a theme takes them over with the theme's own colors:
   its background bleeds out from the card (.bleed layers), and these fade to
   match (app.js fades them, frame by frame). They're registered as colors, so
   app.js reads them back as rgb(). */
@property --fg { syntax: '<color>'; inherits: true; initial-value: #f2f2f3; }
@property --fg-soft { syntax: '<color>'; inherits: true; initial-value: #a3a3a8; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.12); }
@property --card { syntax: '<color>'; inherits: true; initial-value: #2a2a2d; }
@property --on-fg { syntax: '<color>'; inherits: true; initial-value: #202022; }
/* The logo's glaze: white, and a theme's accent while it bleeds over the page. */
@property --glaze { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

:root {
  --page: #202022;        /* the page: light black */
  --error: #ff6b6b;
  --radius: 14px;
  --spread: 1.6s;         /* how long the colors take to bleed across the page */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
  background: var(--page);
  /* No CSS transition on the colors above: app.js fades them (and can carry
     on from wherever an interrupted fade had got to). */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: transparent; color: var(--fg); font: 16px/1.5 var(--font); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
strong { font-weight: 600; }
.muted { color: var(--fg-soft); }
.error { color: var(--error); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.wrap { width: min(1080px, 100% - 40px); margin: 0 auto; }

/* --- The bleed: a theme's background, spreading from the hovered card ---
   Only the radius (--r) animates. The center (--x, --y) follows the card as
   the page scrolls (app.js), so the color always grows from, and pulls back
   into, the card itself. */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.bleed {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  --r: 0px;
  clip-path: circle(var(--r) at var(--x) var(--y));
  transition: --r var(--spread) cubic-bezier(0.45, 0, 0.2, 1);
}
.bleed.open { --r: 150vmax; }
@media (prefers-reduced-motion: reduce) {
  /* No spreading: the colors simply fade in. */
  .bleed { clip-path: none; opacity: 0; transition: opacity 0.6s ease; }
  .bleed.open { clip-path: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

/* The glaze strokes (app.js): windows clipped to each stroke's shape, fixed
   on the screen (a backdrop the page scrolls over), over the content but under
   the theme cards (9) and the top bar (10), never catching a click. Each holds
   a copy of the page in the stroke's theme, laid exactly over it; the copy
   scrolls with the page through a scroll-driven animation, which the browser
   runs in step with its own scrolling (app.js follows along where it can't). */
.glaze { position: fixed; inset: 0; z-index: 8; pointer-events: none; background-size: cover; background-position: center; overflow: hidden; }
.glaze-page { position: absolute; left: 0; top: 0; color: var(--fg); font: 16px/1.5 var(--font); }
.glaze-page * { pointer-events: none !important; transition: none !important; animation: none !important; content-visibility: visible !important; }
@supports (animation-timeline: scroll()) {
  .glaze-page { animation: glaze-scroll linear both; animation-timeline: scroll(root block); }
}
@keyframes glaze-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--scroll-max, 0px))); }
}

/* --- Navigation --- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: min(1080px, 100% - 40px); margin: 0 auto; min-height: 56px;
  display: flex; align-items: center; gap: 28px; font-size: 14px;
}
.brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 18px; text-decoration: none; }
/* The mascot, with its glaze tinted --glaze: a wash of that color in the
   donut's shape, multiplied over it, so white turns the color, the shading
   a deeper shade of it, and the black outline stays black. */
.brand .logo {
  position: relative; isolation: isolate; width: 35px; height: 30px; flex: none; margin-right: 8px;
  background: url(/logo.png) center / contain no-repeat;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand .logo::after {
  content: ''; position: absolute; inset: 0; background: var(--glaze); mix-blend-mode: multiply;
  -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat;
}
.brand:hover .logo { transform: rotate(-18deg) scale(1.08); }
.brand span { font-weight: 400; color: var(--fg-soft); }
.tabs { display: flex; gap: 22px; flex: 1; }
.tabs a { padding: 17px 0 15px; color: var(--fg-soft); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font-weight: 600; }
.nav-auth { display: flex; align-items: center; gap: 14px; }
.nav-auth .link { text-decoration: none; color: var(--fg); font-weight: 600; }
.who { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.who:hover #who-name { text-decoration: underline; text-underline-offset: 3px; }
.plan { font-size: 12px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-soft); }
.link { border: 0; background: none; padding: 0; color: var(--fg-soft); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--fg); }

/* --- Intro: short, then the marketplace below --- */
.intro .wrap { padding: 96px 0 40px; }
.intro h1 { margin: 0 0 16px; max-width: 760px; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.intro .lede { max-width: 560px; }
.scroll {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 32px;
  padding: 11px 20px; border: 1px solid var(--fg); border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.scroll:hover { background: var(--fg); color: var(--on-fg); }

/* --- Sections --- */
main > section > .wrap { padding: 64px 0 24px; }
#market-section { scroll-margin-top: 56px; }
.section-head { margin-bottom: 32px; }
.section-head h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.lede { margin: 0; font-size: 18px; color: var(--fg-soft); }
.notice { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; background: var(--card); }

/* --- Theme cards --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.grid > p.muted { grid-column: 1 / -1; }
.theme-card {
  position: relative; z-index: 9; /* above the glaze strokes (8), under the top bar */
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease;
  /* Cards off screen are skipped: hovering fades the page's colors every
     frame, and restyling dozens of hidden mini previews made it lag. */
  content-visibility: auto; contain-intrinsic-block-size: auto 300px; /* most cards are 299px */
}
.theme-card:hover, .theme-card:focus-within { transform: translateY(-3px); border-color: var(--fg-soft); }
.theme-info { display: grid; gap: 2px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.theme-info strong { font-size: 17px; }
.theme-info .muted { font-size: 13px; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.actions .muted { font-size: 13px; }
.theme-info .title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-soft); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }

/* --- Buttons --- */
.button, .actions button, .drafts button {
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600;
}
.actions button:hover, .drafts button:hover { border-color: var(--fg); }
.button, button.primary { background: var(--fg) !important; color: var(--on-fg) !important; border-color: var(--fg) !important; }
.button { padding: 11px 22px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.button.small { padding: 7px 16px; font-size: 14px; }
.button.ghost { background: transparent !important; color: var(--fg) !important; border-color: var(--line) !important; }
.button.ghost:hover { border-color: var(--fg) !important; opacity: 1; }
.button.danger { background: var(--error) !important; border-color: var(--error) !important; color: #fff !important; }
.button:hover, button.primary:hover { opacity: 0.88; }
button:disabled { opacity: 0.5; cursor: progress; }

/* --- Creator --- */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; background: var(--card); }
.card h3 { font-size: 22px; margin: 0 0 18px; }
.card h4 { font-size: 12px; margin: 26px 0 10px; color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.06em; }
#create { display: grid; gap: 22px; }
#create-button { justify-self: start; }
.drop {
  position: relative; display: grid; place-items: center; gap: 10px; min-height: 190px; padding: 20px;
  border: 1px dashed var(--fg-soft); border-radius: var(--radius); cursor: pointer; text-align: center;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.drop:hover { border-color: var(--fg); }
.drop small { color: var(--fg-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop img { max-height: 220px; max-width: 100%; border-radius: 8px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.fields label .muted { font-weight: 400; font-size: 12px; }
.fields .check { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; font-size: 15px; font-weight: 400; }
.fields input:not([type="checkbox"]), .fields select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; font-size: 15px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.fields select option { background: var(--page); color: #f2f2f3; }
.fields input:focus, .fields select:focus { outline: none; border-color: var(--fg); }
input[type="checkbox"] { accent-color: var(--fg); width: 16px; height: 16px; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: grid; justify-items: center; gap: 3px; width: 80px; font-size: 11px; }
.swatch span { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); }
.swatch code, .swatch small { color: var(--fg-soft); text-align: center; }
.report { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }

.drafts { list-style: none; margin: 0; padding: 0; }
.drafts li { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.drafts li:first-child { border-top: 0; }
.drafts .open { flex: 1; text-align: left; border: 0 !important; background: none !important; padding: 0 !important; font-weight: 400 !important; font-size: 16px !important; }
.drafts .open .muted { font-size: 13px; }

/* --- Previews: a miniature chat in the theme's own colors --- */
.preview {
  display: flex; height: 340px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background-color: var(--bg); color: var(--text);
}
.p-side { width: 22%; background: var(--surface); backdrop-filter: blur(12px); border-right: 1px solid var(--border); padding: 18px 14px; display: grid; align-content: start; gap: 12px; }
.p-item { height: 9px; border-radius: 5px; background: var(--muted); opacity: 0.6; }
.p-item.short { width: 60%; }
.p-main {
  flex: 1; display: flex; flex-direction: column; padding: 22px 8%; gap: 12px; font-family: var(--font-message);
  background-image: var(--art, var(--bg-image)); background-size: cover; background-position: var(--art-position, center);
}
.p-bubble { align-self: flex-end; background: var(--bubble); padding: 8px 14px; border-radius: var(--radius); font-size: 14px; }
.p-reply { margin: 0; font-size: 14px; }
.p-code { margin: 0; background: var(--code); border: 1px solid var(--code-border); border-radius: calc(var(--radius) * 0.6); padding: 10px 12px; font-size: 13px; }
.p-composer {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  background: var(--composer); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--muted); font-size: 14px;
}
.p-send { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); }
.preview.mini { height: 170px; border: 0; border-radius: 0; }
.preview.mini .p-side { padding: 10px 8px; gap: 6px; }
.preview.mini .p-item { height: 6px; }
.preview.mini .p-main { padding: 14px 8%; gap: 7px; }
.preview.mini :is(.p-bubble, .p-reply, .p-composer) { font-size: 10px; }
.preview.mini .p-bubble { padding: 4px 9px; }
.preview.mini .p-composer { padding: 6px 9px; }
.preview.mini .p-send { width: 13px; height: 13px; border-radius: 4px; }

/* The card's miniature opens the full-size preview. */
.thumb { position: relative; }
.thumb .preview { cursor: zoom-in; }
.preview-pill {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: 0.94;
  padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 20, 22, 0.78); color: #f2f2f3; font-size: 14px; font-weight: 600;
  backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s ease, scale 0.2s ease;
}
.theme-card:hover .preview-pill, .preview-pill:focus-visible { opacity: 1; scale: 1; }
@media (hover: none) {
  .preview-pill { opacity: 1; scale: 1; top: auto; bottom: 10px; left: auto; right: 10px; translate: none; padding: 6px 14px; font-size: 13px; }
}

/* --- Full-size preview: a mock AI workspace in the theme ---
   .ws is the overlay (opening from the card: app.js animates its clip-path);
   .ws-bar is the site's own; everything in .ws-app is the theme's. */
html.ws-open { overflow: hidden; }
.ws { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--page); }
.ws-bar {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 52px;
  background: #18181a; color: #f2f2f3; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px;
}
.ws-bar .muted { color: #a3a3a8; }
.ws-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-actions { display: flex; align-items: center; gap: 10px; }
.ws-bar button { border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.ws-bar button.primary { background: #f2f2f3; color: #18181a; border-color: #f2f2f3; font-weight: 600; }

.ws-app {
  flex: 1; min-height: 0; display: flex; background-color: var(--bg); color: var(--text);
  font-family: var(--font-ui);
}
.ws-app ::selection { background: var(--selection); }
.ws-app * { scrollbar-color: var(--scrollbar) transparent; }
.ws-side {
  width: 260px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  background: var(--surface); backdrop-filter: blur(var(--blur)); border-right: 1px solid var(--border); font-size: 14px;
}
.ws-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 6px 10px 14px; }
.ws-logo { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); }
.ws-new, .ws-chat { padding: 8px 10px; border-radius: calc(var(--radius) * 0.6); }
.ws-new { color: var(--text); }
.ws-label { margin: 14px 10px 4px; font-size: 12px; color: var(--faint); }
.ws-chats { display: flex; flex-direction: column; gap: 2px; }
.ws-chat { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-chat.active { background: var(--bubble); color: var(--text); }
.ws-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--border); }
.ws-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; }

.ws-main {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  background-color: var(--bg); background-image: var(--art, var(--bg-image)); background-size: cover; background-position: var(--art-position, center);
}
.ws-effects { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ws-head, .ws-thread, .ws-composer { position: relative; z-index: 1; }
.ws-head { padding: 14px 24px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--blur)); }
.ws-thread {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 22px;
  padding: 32px max(24px, calc((100% - 720px) / 2)); font-family: var(--font-message); font-size: 16px; line-height: 1.65;
}
.ws-msg p { margin: 0 0 12px; }
.ws-msg p:last-child { margin-bottom: 0; }
.ws-msg ul { margin: 0 0 12px; padding-left: 22px; }
.ws-msg a { color: var(--link); }
.ws-msg.user { align-self: flex-end; max-width: 75%; background: var(--bubble); padding: 10px 16px; border-radius: var(--radius); }
.ws-msg code { font-family: var(--font-code); font-size: 0.88em; background: var(--code); border: 1px solid var(--code-border); border-radius: 6px; padding: 1px 5px; }
.ws-msg pre { margin: 0 0 12px; background: var(--code); border: 1px solid var(--code-border); border-radius: calc(var(--radius) * 0.6); padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
.ws-msg pre code { background: none; border: 0; padding: 0; font-size: 14px; }
.ws-composer {
  display: flex; align-items: flex-end; gap: 10px; margin: 0 max(24px, calc((100% - 720px) / 2)) 22px;
  background: var(--composer); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 10px 16px;
  backdrop-filter: blur(var(--blur));
}
.ws-composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: 16px/1.5 var(--font-message); padding: 6px 0; }
.ws-composer textarea::placeholder { color: var(--faint); }
.ws-send { flex: none; width: 34px; height: 34px; border: 0; border-radius: calc(var(--radius) * 0.6); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.ws-composer:focus-within { border-color: var(--accent); }
@media (max-width: 760px) {
  .ws-side { display: none; }
  .ws-desc { display: none; }
  .ws-bar { flex-wrap: wrap; row-gap: 6px; }
  .ws-title { flex-basis: 100%; }
  .ws-actions { flex: 1; }
}

/* --- Footer --- */
.foot { padding: 32px 0 48px; font-size: 12px; color: var(--fg-soft); }
.foot .wrap { border-top: 1px solid var(--line); padding-top: 16px; }

/* --- Small screens --- */
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; gap: 0 18px; padding-top: 8px; }
  .tabs { order: 3; flex-basis: 100%; }
  .who { margin-left: auto; }
  .intro .wrap { padding: 56px 0 24px; }
  .card { padding: 20px; }
  .grid { grid-template-columns: 1fr; }
  #market-section { scroll-margin-top: 100px; }
}

/* --- Accounts: forms and the account page --- */
.wrap.auth { max-width: 440px; }
.wrap.narrow { max-width: 720px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.form small { font-weight: 400; font-size: 12px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; font-weight: 400;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--fg); }
.form select option { background: var(--page); color: #f2f2f3; }
.form label .muted { font-weight: 400; }
.form .button { justify-self: start; }
.form .error, .form .status { margin: 0; font-size: 14px; }
.form.inline { grid-template-columns: 1fr auto; align-items: end; }
.form.inline .error, .form.inline .status { grid-column: 1 / -1; }
.form input.code { font-size: 28px; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; max-width: 260px; }
.notice p { margin: 0 0 6px; }
.notice p:last-child { margin: 0; }
.notice.outbox-note { margin: 0 0 20px; font-size: 14px; }
a { text-underline-offset: 3px; }
.plan.large { font-size: 14px; padding: 3px 12px; }
.steps { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 6px; color: var(--fg-soft); }
.steps code, .new-token code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); word-break: break-all; }
.new-token { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--fg-soft); border-radius: var(--radius); }
.new-token p { margin: 0 0 10px; }
.tokens { list-style: none; margin: 18px 0 0; padding: 0; }
.tokens li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tokens li.muted { border: 0; }
.tokens button { border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.tokens button:hover { border-color: var(--error); color: var(--error); }
.card.danger { border-color: color-mix(in srgb, var(--error) 45%, transparent); }
@media (max-width: 760px) {
  .nav-auth .link { display: none; }
  .form.inline { grid-template-columns: 1fr; }
}

/* --- Sign in with another account --- */
.providers { display: grid; gap: 10px; margin-bottom: 18px; }
.providers .provider { width: 100%; }
.or { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--fg-soft); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.methods { list-style: none; margin: 0; padding: 0; }
.methods li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.methods li:first-child { border-top: 0; padding-top: 0; }
.methods button { border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.methods button:hover { border-color: var(--fg); }

/* Provider buttons with their marks, and the password show/hide. */
.providers .provider { gap: 10px; font-weight: 600; }
.providers .provider svg { width: 18px; height: 18px; flex: none; }
.button.wide { justify-self: stretch !important; width: 100%; }
.password { position: relative; display: block; }
.password input { padding-right: 46px; }
.reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--fg-soft);
}
.reveal:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.reveal svg { width: 18px; height: 18px; }

/* --- Legal pages (terms.html, privacy.html) --- */
.legal { padding: 48px 0 24px; }
.legal h1 { font-size: 36px; margin: 0 0 6px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--fg-soft); max-width: 68ch; }
.legal strong { color: var(--fg); }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.small { font-size: 13px; }

/* --- Getting the extension (the intro) --- */
.install { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.install .scroll { margin-top: 0; }
.installed { color: var(--fg-soft); font-size: 15px; }
.installed span { color: var(--fg); font-weight: 700; margin-right: 4px; }

/* A theme opened from a share link. */
.theme-card.featured { outline: 2px solid var(--fg); outline-offset: 3px; }

.form textarea { font: inherit; font-size: 16px; color: inherit; resize: vertical; }

/* --- Home: a row per collection, scrolling sideways --- */
#shelves { padding-bottom: 24px; }
.shelf { margin: 0 0 56px; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shelf-head h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.01em; }
.shelf-head p { margin: 0; }
.shelf-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.arrow {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: 16px; line-height: 1;
}
.arrow:hover:not(:disabled) { border-color: var(--fg); }
.arrow:disabled { opacity: 0.35; cursor: default; }
.view-all { margin-left: 6px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.view-all:hover { text-decoration: underline; }
.shelf-row {
  /* Three cards to a view (two on mid-size screens), the rest a scroll away. */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 6px 4px 14px; margin: -6px -4px 0;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.shelf-row > * { scroll-snap-align: start; }
@media (max-width: 900px) {
  .shelf-row { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .shelf-head { flex-direction: column; align-items: flex-start; }
  .arrow { display: none; }
  .view-all { margin-left: 0; }
  .shelf-row { grid-auto-columns: 82%; }
}

/* --- Marketplace: filters --- */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.chip small { color: var(--fg-soft); font-weight: 500; margin-left: 2px; }
.chip:hover { border-color: var(--fg); }
.chip[aria-current] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.chip[aria-current] small { color: inherit; opacity: 0.7; }
.chip[aria-disabled] { opacity: 0.4; }
.chip[aria-disabled]:hover { border-color: var(--line); }
/* The look filters: their own row, smaller, Light/Dark set apart from the rest. */
.looks { flex-basis: 100%; order: 3; gap: 6px; }
.looks .chip { padding: 5px 12px; font-size: 13px; }
.looks .group-start { margin-left: 14px; }
/* With no collections to pick between, the looks lead the row, the search beside them. */
#market-filters[hidden] ~ .looks { flex-basis: auto; order: -1; }
.search {
  width: min(280px, 100%); padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.search:focus { outline: none; border-color: var(--fg); }
.actions-inner { display: contents; }

/* --- What's new --- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: 13px; }
.new-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--fg); vertical-align: 2px; }
.site-notice { --warning: #fab219; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: center; padding: 10px 20px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--line); background: var(--card); }
.site-notice::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-soft); align-self: center; }
.site-notice[data-level='warning'] { border-bottom-color: color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 12%, var(--card)); }
.site-notice[data-level='warning']::before { background: var(--warning); }
.site-notice-link { font-weight: 600; }

.working-on { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 40px; background: var(--card); }
.working-on .eyebrow { margin-bottom: 6px; }
.working-on ul { margin: 0 0 8px; padding-left: 20px; }
.working-on li { margin: 4px 0; }
.working-on .muted { margin: 0; }

/* The timeline: dates on the left, a line with a dot per release, the notes
   on the right. An update's dot is filled; a patch's is a ring. Each release
   draws its own stretch of the line, so the line runs through them all, and
   fades out below the oldest. */
.releases { list-style: none; margin: 0; padding: 0; }
.release {
  display: grid; grid-template-columns: 150px 22px 1fr; grid-template-areas: "meta node body";
  column-gap: 22px; padding-bottom: 44px; scroll-margin-top: 90px; position: relative;
}
.release-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 8px; color: var(--fg-soft); font-size: 14px; padding-top: 4px; }
.release-meta time { color: var(--fg); font-weight: 600; }
.release-node { grid-area: node; position: relative; }
.release-node::before { content: ''; position: absolute; left: 50%; top: 0; bottom: -44px; width: 2px; margin-left: -1px; background: var(--line); }
.release:first-child .release-node::before { top: 10px; }
.release:last-child .release-node::before { bottom: 0; background: linear-gradient(var(--line), transparent); }
.release-node::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px var(--page);
}
.release.patch .release-node::after { background: var(--page); border: 2px solid var(--fg-soft); width: 12px; height: 12px; margin-left: -6px; top: 7px; }
.release-body { grid-area: body; min-width: 0; }
.release-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.release-kind.update { background: var(--fg); color: var(--on-fg); }
.release-kind.patch { border: 1px solid var(--line); color: var(--fg-soft); }
.release-body h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.release-summary { margin: 0 0 14px; color: var(--fg-soft); }
.release-group { margin-top: 16px; }
.release-label { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.release-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.release-group ul { margin: 0; padding-left: 20px; }
.release-group li { margin: 5px 0; }
.release.focus .release-body h3::after { content: 'Your update'; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-soft); vertical-align: 4px; }
@media (max-width: 640px) {
  /* The line down the left edge; the date and kind above each release's notes. */
  .release { grid-template-columns: 22px 1fr; grid-template-areas: "node meta" "node body"; column-gap: 14px; row-gap: 8px; }
  .release-meta { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding-top: 2px; }
}