/* Mework site — one stylesheet for the home page and the docs.
 *
 * Warm greys from the app, graphite text, and one colour: the amber of the
 * cat-eared cursor, used on the mark and nowhere else. Light and dark follow
 * the reader's system. */

:root {
  --bg: #fafaf8;
  --bg-raised: #ffffff;
  --bg-sunken: #f1f0ec;
  --bg-hover: #ebeae5;
  --fg: #1b1b1a;
  --fg-2: #4b4a46;
  --fg-3: #6e6d66;
  --fg-4: #a4a29b;
  --line: #e5e3de;
  --line-2: #d6d4ce;
  --amber: #c98a1b;
  --add: #2f7d4f;
  --del: #b4432f;
  --focus: #3769bb;
  --code-bg: #f3f2ee;
  --shadow-1: 0 1px 2px rgb(27 27 26 / 6%), 0 0 0 1px rgb(27 27 26 / 6%);
  --shadow-2: 0 1px 2px rgb(27 27 26 / 5%), 0 8px 24px -6px rgb(27 27 26 / 14%), 0 0 0 1px rgb(27 27 26 / 7%);
  --shadow-3: 0 2px 6px rgb(27 27 26 / 6%), 0 30px 80px -20px rgb(27 27 26 / 28%), 0 0 0 1px rgb(27 27 26 / 8%);
  --shadow-icon: 0 1px 2px rgb(27 27 26 / 12%), 0 12px 28px -10px rgb(27 27 26 / 45%);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wide: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --bg-raised: #1c1c1b;
    --bg-sunken: #0e0e0d;
    --bg-hover: #262624;
    --fg: #edece8;
    --fg-2: #bebcb5;
    --fg-3: #8e8c85;
    --fg-4: #64635e;
    --line: #2a2a27;
    --line-2: #3a3a36;
    --add: #5bb47f;
    --del: #e07a64;
    --focus: #7aa2e8;
    --code-bg: #1a1a19;
    --shadow-1: 0 0 0 1px rgb(255 255 255 / 7%);
    --shadow-2: 0 0 0 1px rgb(255 255 255 / 8%), 0 10px 30px -8px rgb(0 0 0 / 60%);
    --shadow-3: 0 0 0 1px rgb(255 255 255 / 9%), 0 40px 90px -20px rgb(0 0 0 / 75%);
    --shadow-icon: 0 0 0 1px rgb(255 255 255 / 6%), 0 14px 32px -10px rgb(0 0 0 / 80%);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--focus) 24%, transparent); }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  padding: 8px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Brand ---------- */

.mark { fill: var(--amber); }
.lockup { height: 17px; width: auto; }
.lockup__word { fill: currentColor; }
.lockup__mark { fill: var(--amber); }

/* ---------- Top bar ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.top.is-scrolled, .docs-page .top { border-bottom-color: var(--line); }
.top__inner {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--wide); height: 60px; margin: 0 auto; padding-inline: var(--gutter);
}
.docs-page .top__inner { max-width: 1400px; }
.top__brand { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.top__brand:hover .lockup__word { fill: var(--fg); }
.top__section {
  padding-left: 12px; border-left: 1px solid var(--line-2);
  color: var(--fg-2); font-size: 15px; font-weight: 500; line-height: 18px; text-decoration: none;
}
.top__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.top__nav a {
  padding: 6px 10px; border-radius: 8px;
  color: var(--fg-2); font-size: 14.5px; text-decoration: none;
  transition: color .15s, background-color .15s;
}
.top__nav a:hover { color: var(--fg); background: var(--bg-hover); }
.top__nav a[aria-current="page"] { color: var(--fg); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 12px;
  font: 560 15.5px/1 var(--font); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--bg-raised); color: var(--fg);
  box-shadow: 0 1px 1px rgb(27 27 26 / 4%);
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:hover { border-color: var(--fg-4); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--primary:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); border-color: transparent; }

/* =========================================================================
   Home
   ========================================================================= */

.home main { overflow-x: clip; }

.hero { padding: clamp(40px, 7vw, 80px) var(--gutter) 0; text-align: center; }
.hero__eyebrow { margin: 0 0 22px; color: var(--fg-3); font-size: 15px; font-weight: 500; letter-spacing: 0.005em; }
.hero h1 {
  max-width: 15ch; margin: 0 auto;
  font: 680 clamp(42px, 7vw, 80px)/1.02 var(--font-display);
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 34em; margin: 26px auto 0;
  color: var(--fg-2); font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55;
  text-wrap: pretty;
}
.get { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.get__meta { margin: 18px 0 0; color: var(--fg-3); font-size: 13.5px; line-height: 1.6; }
.get__meta span + span::before { content: "·"; margin: 0 .55em; color: var(--fg-4); }

:lang(zh-CN) .hero h1 { max-width: 12em; font-weight: 650; letter-spacing: -0.01em; line-height: 1.12; }
:lang(zh-CN) .hero__sub { max-width: 30em; }

/* The application icon over the headline. The prompt is typed and the cursor
   appears after it; then it holds still, but for an ear it flicks now and then
   — the left one, six seconds later the right one, and round again. Every
   resting style is the icon as it ships, so with reduced motion (the rule at
   the end) it simply stands there. */
.hero__icon {
  width: clamp(76px, 8.5vw, 104px); margin: 0 auto 30px;
  border-radius: 23%; box-shadow: var(--shadow-icon);
  animation: appicon-in .7s cubic-bezier(.2, .9, .25, 1) both;
}
.appicon { width: 100%; height: auto; }
.appicon__prompt { animation: appicon-type .45s cubic-bezier(.45, 0, .3, 1) .35s both; }
.appicon__mark { animation: appicon-show .15s ease-out .85s both; }
.appicon__ear { transform-box: view-box; }
.appicon__ear--left { transform-origin: 0 50px; animation: appicon-flick-left 12s ease-in-out .85s infinite; }
.appicon__ear--right { transform-origin: 120px 50px; animation: appicon-flick-right 12s ease-in-out .85s infinite; }
@keyframes appicon-in { from { opacity: 0; transform: translateY(8px) scale(.86); } }
@keyframes appicon-type {
  from { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
}
@keyframes appicon-show { from { opacity: 0; } }
/* An ear flicks out and back: the tip leans away from the other ear and dips.
   The left one twice in quick succession, the right one once. */
@keyframes appicon-flick-left {
  0%, 14%, 16.4%, 18.8%, 100% { transform: none; }
  15.2%, 17.6% { transform: skewX(24deg) scaleY(.6); }
}
@keyframes appicon-flick-right {
  0%, 64%, 66.6%, 100% { transform: none; }
  65.3% { transform: skewX(-24deg) scaleY(.6); }
}

/* The picture of the app under the hero. */
.hero__shot { max-width: 1120px; margin: clamp(56px, 8vw, 88px) auto 0; padding-inline: var(--gutter); }

/* ---------- Sections ---------- */

.band { max-width: var(--wide); margin: 0 auto; padding: clamp(80px, 12vw, 152px) var(--gutter) 0; }
.feature {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center;
}
.feature__text { max-width: 30em; }
.label { margin: 0 0 14px; color: var(--fg-3); font-size: 14px; font-weight: 560; letter-spacing: 0.01em; }
.band h2, .closing h2 {
  margin: 0;
  font: 660 clamp(30px, 3.8vw, 44px)/1.08 var(--font-display);
  letter-spacing: -0.032em;
  text-wrap: balance;
}
:lang(zh-CN) .band h2, :lang(zh-CN) .closing h2 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: 0; line-height: 1.25; font-weight: 640; word-break: keep-all; overflow-wrap: anywhere; }
.feature__text p { margin: 20px 0 0; color: var(--fg-2); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.feature__text .more { display: inline-block; margin-top: 20px; color: var(--fg); font-size: 15px; font-weight: 520; text-decoration: none; }
.feature__text .more::after { content: " →"; color: var(--fg-3); transition: margin .15s; }
.feature__text .more:hover::after { margin-left: 3px; }

.stage {
  display: grid; place-items: center;
  margin: 0;
  min-height: 380px; padding: clamp(24px, 5vw, 56px);
  border-radius: 20px; background: var(--bg-sunken);
}

/* ---------- The rest ---------- */

.rest h2 { max-width: 14em; }
.rest__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 48px);
  margin: 56px 0 0; padding: 0; list-style: none;
}
.rest__grid li { padding-top: 20px; border-top: 1px solid var(--line); }
.rest__grid h3 { margin: 0; font-size: 16.5px; font-weight: 620; letter-spacing: -0.01em; }
.rest__grid p { margin: 8px 0 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

/* ---------- Closing ---------- */

.closing { padding: clamp(104px, 14vw, 176px) var(--gutter) clamp(88px, 12vw, 144px); text-align: center; }
.closing p { max-width: 30em; margin: 20px auto 0; color: var(--fg-2); font-size: 17.5px; line-height: 1.6; }
.closing .get { margin-top: 36px; }
.closing__more { margin: 22px 0 0; font-size: 14px; color: var(--fg-3); }
.closing__more a { color: var(--fg-2); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.closing__more a:hover { color: var(--fg); text-decoration-color: currentColor; }
.closing__more span + span::before, .closing__more a + a::before { content: ""; }
.closing__more .sep { margin: 0 .6em; color: var(--fg-4); }

/* ---------- Footer ---------- */

.foot { border-top: 1px solid var(--line); }
.foot__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter);
  color: var(--fg-3); font-size: 13.5px;
}
.docs-page .foot__inner { max-width: 1400px; }
.foot__inner .lockup { height: 14px; color: var(--fg-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__links a { color: var(--fg-3); text-decoration: none; }
.foot__links a:hover { color: var(--fg); }
.foot__legal { margin-left: auto; }

@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__text { max-width: 36em; }
  .rest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .top__nav a.hide-sm { display: none; }
  .get .btn { flex: 1 1 100%; }
  .get__meta span { display: block; }
  .get__meta span + span::before { content: none; }
  .rest__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stage { min-height: 0; border-radius: 16px; }
  .foot__legal { margin-left: 0; }
}

/* =========================================================================
   Pictures of the app — drawn in HTML, aria-hidden, labelled by their figure.
   Everything inside a .ui is sized in em so a picture scales like an image.
   ========================================================================= */

.ui {
  --u-bg: var(--bg-raised);
  --u-panel: #f7f6f3;
  --u-hover: #efeee9;
  --u-line: #e7e5e0;
  --u-text: #2a2a28;
  --u-muted: #7a7972;
  --u-faint: #a9a7a0;
  --u-bubble: #f0efeb;
  --u-sel: #e9e8e3;
  color: var(--u-text);
  font-family: var(--font);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}
@media (prefers-color-scheme: dark) {
  .ui {
    --u-bg: #1c1c1b;
    --u-panel: #171716;
    --u-hover: #262624;
    --u-line: #2d2d2a;
    --u-text: #e4e3de;
    --u-muted: #8e8c85;
    --u-faint: #64635e;
    --u-bubble: #272725;
    --u-sel: #2b2b29;
  }
}
.ui svg { display: inline-block; vertical-align: middle; }
.ui .ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ----- The app window ----- */

.shot { margin: 0; container-type: inline-size; }
.win {
  font-size: clamp(7px, calc(100cqi / 76), 14.5px);
  border-radius: 1em; overflow: hidden;
  background: var(--u-bg);
  box-shadow: var(--shadow-3);
}
.win__bar {
  display: flex; align-items: center; gap: 1.1em;
  height: 3em; padding: 0 1.1em;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-panel);
}
.win__dots { display: flex; gap: .5em; }
.win__dots i { width: .8em; height: .8em; border-radius: 50%; background: var(--u-line); }
.win__dots i:first-child { margin-left: .1em; }
.win__title { display: flex; align-items: baseline; gap: .7em; min-width: 0; font-size: .95em; white-space: nowrap; }
.win__title b { font-weight: 620; }
.win__title span { color: var(--u-muted); }
.win__tools { display: flex; gap: 1.1em; margin-left: auto; color: var(--u-muted); }
.win__body { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); }

.side {
  display: flex; flex-direction: column; gap: .15em;
  padding: 1em .7em; border-right: 1px solid var(--u-line); background: var(--u-panel);
  font-size: .92em;
}
.side__row { display: flex; align-items: center; gap: .6em; padding: .42em .6em; border-radius: .5em; white-space: nowrap; overflow: hidden; }
.side__row span { overflow: hidden; text-overflow: ellipsis; }
.side__new { font-weight: 560; margin-bottom: .7em; }
.side__label { padding: .5em .6em .3em; color: var(--u-faint); font-size: .8em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
:lang(zh-CN) .side__label { text-transform: none; letter-spacing: .02em; font-size: .85em; }
.side__proj { font-weight: 600; }
.side__task { padding-left: 1.1em; color: var(--u-muted); }
.side__task.is-on { background: var(--u-sel); color: var(--u-text); }
.side__task .st { width: .55em; height: .92em; fill: none; stroke: var(--u-faint); stroke-width: 12; flex: none; }
.side__task.is-on .st { fill: var(--u-text); stroke: none; }
.side__foot { margin-top: auto; color: var(--u-muted); }

.main { display: flex; flex-direction: column; min-width: 0; }
.tl { position: relative; width: 100%; max-width: 44em; margin: 0 auto; padding: 2em 2.4em .6em; }
.msg {
  max-width: 82%; margin-left: auto; padding: .85em 1.1em;
  border-radius: 1em; background: var(--u-bubble); line-height: 1.55;
}
.grow {
  display: flex; align-items: center; gap: .5em; margin-top: 1.7em;
  color: var(--u-muted); font-size: .9em; font-weight: 560;
}
.grow .chev { width: .9em; height: .9em; }
.grow .tok, .erow .tok { margin-left: auto; font: 400 .92em var(--mono); color: var(--u-faint); }
.reply { margin: 1.2em 0 0; line-height: 1.6; }
.gap {
  position: relative; height: 1.6em; margin: .1em 0;
}
.gap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1.5px dashed var(--u-faint); opacity: .9;
}
.edits { border: 1px solid var(--u-line); border-radius: .8em; overflow: hidden; font-size: .92em; }
.erow { display: flex; align-items: center; gap: .6em; padding: .65em 1em; }
.erow + .erow { border-top: 1px solid var(--u-line); }
.erow--head { font-weight: 580; }
.add { color: var(--add); font-family: var(--mono); font-size: .92em; }
.del { color: var(--del); font-family: var(--mono); font-size: .92em; }
.erow .add { margin-left: auto; }

.menu {
  position: absolute; z-index: 2; min-width: 13.5em; padding: .35em;
  border-radius: .7em; background: var(--u-bg); box-shadow: var(--shadow-2);
  font-size: .92em;
}
.menu__item { display: flex; align-items: center; height: 1.95em; padding: 0 .7em; border-radius: .45em; white-space: nowrap; }
.menu__item.is-hover { background: var(--u-hover); }
.menu__item .sub { margin-left: auto; width: .85em; height: .85em; color: var(--u-muted); }
.menu__sep { height: 1px; margin: .3em .4em; background: var(--u-line); }
.pointer { position: absolute; z-index: 3; width: 1.15em; height: auto; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%)); }
.pointer path { fill: #1b1b1a; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }

.composer { width: 100%; max-width: 44em; margin: 0 auto; padding: .4em 2.4em 1.6em; }
.chips { display: flex; gap: .5em; margin-bottom: .6em; font-size: .85em; }
.chip { display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em; border: 1px solid var(--u-line); border-radius: .55em; color: var(--u-muted); white-space: nowrap; }
.chip .ico { width: 1.05em; height: 1.05em; }
.chip--plain { border-color: transparent; padding-inline: .2em; }
.input {
  display: flex; align-items: center; justify-content: space-between;
  height: 3.2em; padding: 0 .6em 0 1.1em;
  border: 1px solid var(--u-line); border-radius: 1em; background: var(--u-bg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  color: var(--u-faint);
}
.send { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; color: var(--u-text); }
.below { display: flex; align-items: center; gap: .5em; margin-top: .6em; font-size: .85em; }
.below .push { margin-left: auto; }

@container (max-width: 640px) {
  .win { font-size: calc(100cqi / 46); }
  .win__body { grid-template-columns: minmax(0, 1fr); }
  .side, .win__tools { display: none; }
  .tl { padding: 1.6em 1.4em .5em; }
  .composer { padding: .4em 1.4em 1.4em; }
  .chips .chip:nth-child(n + 3) { display: none; }
}

/* ----- A card being edited ----- */

.pic {
  width: 100%; max-width: 30em; padding: 1.5em 1.4em;
  border-radius: .9em; background: var(--u-bg); box-shadow: var(--shadow-2);
  font-size: clamp(12px, 1.2vw, 14.5px);
}
.pic .msg { max-width: 86%; }
.editor {
  margin-top: 1.2em; padding: .9em 1em .8em;
  border-radius: .9em; background: var(--u-bg);
  box-shadow: 0 0 0 1.5px var(--u-text);
}
.editor__kind { color: var(--u-muted); font-size: .82em; font-weight: 600; letter-spacing: .01em; }
.editor__text { margin-top: .5em; line-height: 1.6; }
.caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--u-text); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.editor__foot { display: flex; justify-content: flex-end; gap: .5em; margin-top: 1em; font-size: .88em; }
.sbtn { padding: .38em .9em; border: 1px solid var(--u-line); border-radius: .5em; font-weight: 540; }
.sbtn--on { background: var(--u-text); border-color: var(--u-text); color: var(--u-bg); }
.ghost { margin-top: 1.2em; opacity: .45; }

/* ----- Conversation settings, tools page ----- */

.sheet {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  width: 100%; max-width: 36em; overflow: hidden;
  border-radius: .9em; background: var(--u-bg); box-shadow: var(--shadow-2);
  font-size: clamp(11px, 1.15vw, 14px);
}
.sheet__nav { display: flex; flex-direction: column; gap: .1em; padding: .8em .55em; border-right: 1px solid var(--u-line); background: var(--u-panel); }
.nrow { display: flex; align-items: center; padding: .42em .65em; border-radius: .45em; font-size: .93em; white-space: nowrap; }
.nrow b { margin-left: auto; padding-left: .8em; color: var(--u-faint); font-weight: 500; font-family: var(--mono); font-size: .9em; }
.nrow.is-on { background: var(--u-sel); font-weight: 580; }
.sheet__page { padding: 1em 1.1em 1.2em; min-width: 0; }
.sheet__blurb { margin: 0 0 .9em; color: var(--u-muted); font-size: .86em; }
.grp { display: flex; align-items: center; margin: .9em 0 .35em; font-size: .86em; font-weight: 620; }
.grp:first-of-type { margin-top: 0; }
.grp b { margin-left: auto; color: var(--u-faint); font-weight: 500; font-family: var(--mono); }
.trow { display: flex; align-items: center; gap: .6em; padding: .36em .1em; font-size: .93em; }
.trow + .trow { border-top: 1px solid var(--u-line); }
.badge { padding: .05em .45em; border-radius: .35em; background: var(--u-bubble); color: var(--u-muted); font-size: .78em; font-weight: 560; }
.sw { position: relative; flex: none; width: 2em; height: 1.15em; margin-left: auto; border-radius: 1em; background: var(--u-line); }
.sw::after { content: ""; position: absolute; top: .15em; left: .15em; width: .85em; height: .85em; border-radius: 50%; background: var(--u-bg); box-shadow: 0 1px 1px rgb(0 0 0 / 20%); }
.sw.on { background: var(--u-text); }
.sw.on::after { left: auto; right: .15em; }

@media (max-width: 480px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet__nav { flex-direction: row; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--u-line); }
  .sheet__nav .nrow:nth-child(n + 4) { display: none; }
}

/* ----- A prompt profile file ----- */

.file {
  width: 100%; max-width: 32em; overflow: hidden;
  border-radius: .9em; background: var(--u-bg); box-shadow: var(--shadow-2);
  font-size: clamp(11px, 1.15vw, 14px);
}
.file__head { display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-bottom: 1px solid var(--u-line); background: var(--u-panel); color: var(--u-muted); font: .86em var(--mono); white-space: nowrap; overflow: hidden; }
.file pre { margin: 0; padding: 1em 1.2em 1.2em; overflow: hidden; font: .9em/1.75 var(--mono); white-space: pre-wrap; word-break: break-word; }
.j-k { color: var(--u-text); }
.j-s { color: var(--u-muted); }
.j-p { color: var(--u-faint); }

/* =========================================================================
   Docs
   ========================================================================= */

.docs {
  display: grid; grid-template-columns: 248px minmax(0, 1fr) 216px; gap: 0 clamp(24px, 3vw, 56px);
  max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter);
}
.docs--wide { grid-template-columns: 248px minmax(0, 1fr); }

.nav {
  position: sticky; top: 61px; align-self: start;
  max-height: calc(100vh - 61px); overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 8px 40px 0; font-size: 14.5px;
}
.nav__group + .nav__group { margin-top: 22px; }
.nav__title { margin: 0 0 6px; padding: 0 10px; color: var(--fg-3); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.nav ul { margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 5px 10px; border-radius: 7px; color: var(--fg-2); text-decoration: none; line-height: 1.4; }
.nav a:hover { color: var(--fg); background: var(--bg-hover); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--bg-sunken); font-weight: 560; }
.nav__menu { display: none; }

.article { min-width: 0; padding: 40px 0 88px; }
.toc {
  position: sticky; top: 61px; align-self: start;
  max-height: calc(100vh - 61px); overflow-y: auto;
  padding: 44px 0 40px; font-size: 13.5px;
}
.toc p { margin: 0 0 8px; color: var(--fg-3); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 4px 0 4px 12px; border-left: 1px solid transparent; color: var(--fg-3); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--fg); }
.toc a.is-active { color: var(--fg); border-left-color: var(--fg); }

/* Prose */
.prose { max-width: 46em; font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.prose > :first-child { margin-top: 0; }
.prose h1 { margin: 0 0 18px; color: var(--fg); font: 680 clamp(30px, 3.4vw, 38px)/1.15 var(--font-display); letter-spacing: -0.03em; }
:lang(zh-CN) .prose h1 { letter-spacing: -0.01em; }
.prose h1 + p { font-size: 18px; line-height: 1.6; color: var(--fg-2); }
.prose h2 { margin: 52px 0 14px; padding-top: 4px; color: var(--fg); font: 640 23px/1.3 var(--font-display); letter-spacing: -0.02em; }
.prose h3 { margin: 34px 0 10px; color: var(--fg); font-size: 17.5px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.4; }
.prose h4 { margin: 26px 0 8px; color: var(--fg); font-size: 15.5px; font-weight: 620; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 80px; }
.prose .anchor { color: inherit; text-decoration: none; }
.prose .anchor:hover::after { content: "#"; margin-left: .35em; color: var(--fg-4); font-weight: 400; }
.prose p, .prose ul, .prose ol, .prose table, .prose pre, .prose blockquote { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin: 5px 0; }
.prose li > p { margin: 0 0 8px; }
.prose li::marker { color: var(--fg-4); }
.prose strong { color: var(--fg); font-weight: 620; }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose code { padding: .12em .38em; border-radius: 5px; background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: .86em var(--mono); overflow-wrap: anywhere; }
.prose a code { text-decoration: none; }
.prose kbd { display: inline-block; min-width: 1.6em; padding: .05em .4em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-raised); color: var(--fg); font: 500 .82em/1.5 var(--font); text-align: center; }
.prose blockquote { padding: 12px 16px; border-radius: 10px; background: var(--bg-sunken); color: var(--fg-2); font-size: 15px; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose img { border-radius: 10px; box-shadow: var(--shadow-1); }

.code { position: relative; margin: 0 0 20px; }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; border-radius: 10px; background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: 13.5px/1.6 var(--mono); tab-size: 2; }
.code pre code { padding: 0; background: none; box-shadow: none; font: inherit; overflow-wrap: normal; }
.code__copy {
  position: absolute; top: 8px; right: 8px; padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--bg-raised); color: var(--fg-3); font: 500 12px/1.4 var(--font); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.code:hover .code__copy, .code__copy:focus-visible { opacity: 1; }
.code__copy:hover { color: var(--fg); }

.table { margin: 0 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.prose th { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--bg-sunken); color: var(--fg); font-weight: 600; text-align: left; white-space: nowrap; }
.prose td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.prose tr:first-child td { border-top: 0; }
.prose td code { white-space: nowrap; }
.prose td:first-child { color: var(--fg); }

.prose td small { color: var(--fg-3); font-size: 12.5px; }
.prose .tool-index td:first-child a { font-weight: 560; text-decoration: none; }
.prose .tool-index td:first-child a:hover { text-decoration: underline; }
.prose .downloads td:first-child { white-space: nowrap; }

/* Collapsible groups (the prompt-profile key reference) */
details.keys { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; }
details.keys summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--fg); }
details.keys summary::-webkit-details-marker { display: none; }
details.keys summary::before { content: "›"; color: var(--fg-3); transition: transform .15s; }
details.keys[open] summary::before { transform: rotate(90deg); }
details.keys summary span { margin-left: auto; color: var(--fg-3); font-size: 13px; }
details.keys .table { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }

/* Tool pages */
.tool-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.tool-head h1 { margin: 0; }
.tool-head .tool-name { color: var(--fg-3); font: 500 16px var(--mono); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 28px; padding: 14px 16px; border-radius: 10px; background: var(--bg-sunken); font-size: 14.5px; }
.facts dt { color: var(--fg-3); }
.facts dd { margin: 0; color: var(--fg); }
.crumbs { margin: 0 0 14px; color: var(--fg-3); font-size: 13.5px; }
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs span { margin: 0 .45em; color: var(--fg-4); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 46em; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); text-decoration: none; transition: border-color .15s; }
.pager a:hover { border-color: var(--fg-4); }
.pager small { display: block; color: var(--fg-3); font-size: 12.5px; }
.pager .next { grid-column: 2; text-align: right; }

.edit { margin-top: 28px; font-size: 13.5px; color: var(--fg-3); }
.edit a { color: var(--fg-3); text-underline-offset: 3px; }
.edit a:hover { color: var(--fg); }

@media (max-width: 1180px) {
  .docs { grid-template-columns: 232px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 820px) {
  .docs, .docs--wide { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; max-height: none; padding: 12px 0 0; }
  .nav__menu {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised);
    color: var(--fg); font: 500 14.5px var(--font); cursor: pointer;
  }
  .nav__menu::after { content: "▾"; color: var(--fg-3); }
  .nav[data-open="true"] .nav__menu::after { content: "▴"; }
  .nav__groups { display: none; padding: 16px 4px 4px; }
  .nav[data-open="true"] .nav__groups, .no-js .nav__groups { display: block; }
  .article { padding-top: 24px; }
  .top__section { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}