:root {
  color-scheme: light;
  --paper: #f8f7fb;
  --text: #292535;
  --muted: #716b7d;
  --line: #e4dfec;
  --surface: #f5f2fa;
  --accent: #6844ae;
  --content-width: 960px;
  --page-inset: 32px;
  --cell-padding: 32px;
  --columns: 12;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; color: var(--text); font: 16px/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, pre:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
.skip-link { position: absolute; top: -100px; left: var(--page-inset); z-index: 10; padding: 12px 18px; background: white; }
.skip-link:focus { top: 8px; }
.site-shell, header, main, footer, .intro, .setup, .available, .skills-list, .skills-list li, .skill-link {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: 0;
  min-width: 0;
}
.site-shell { max-width: var(--content-width); margin: auto; padding-inline: var(--page-inset); }
header, main, footer, .intro, .setup, .available, .skills-list, .skills-list li, .skill-link { grid-column: 1 / -1; }
@supports (grid-template-columns: subgrid) {
  header, main, footer, .intro, .setup, .available, .skills-list, .skills-list li, .skill-link { grid-template-columns: subgrid; }
}
header { padding: 28px var(--cell-padding); border-bottom: 1px solid var(--line); }
header a { grid-column: 1 / -1; width: fit-content; font-size: 22px; font-weight: 650; letter-spacing: -.9px; text-decoration: none; color: var(--text); }
header a > span { color: var(--accent); }
header a .wordmark-name { color: #96909f; font-weight: 500; }
header a .wordmark-domain { color: #b8b2c1; font-weight: 500; }
.intro { padding: 64px var(--cell-padding) 40px; }
.intro > * { grid-column: 1 / -1; min-width: 0; }
h1 { margin: 0 0 24px; font-size: clamp(36px, 5vw, 52px); line-height: 1.08; letter-spacing: -2px; font-weight: 600; text-wrap: balance; }
p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.intro > p:first-of-type { grid-column: 1 / 11; font-size: 17px; line-height: 1.8; }
.intro > p:last-child { margin-top: 22px; font-size: 13px; color: #81798e; }
code { font: .87em/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; color: #5e4a77; }
p code { background: #ede8f3; padding: 2px 5px; border-radius: 4px; }
h2 { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.35; letter-spacing: -.65px; }
.setup {
  padding: 32px calc(var(--cell-padding) - 1px) 24px;
  border: 1px solid #d7cbe8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 10px #47316a04, 0 16px 48px #47316a08;
}
.setup > * { grid-column: 1 / -1; min-width: 0; }
.setup-heading { padding-bottom: 12px; }
.setup > p { font-size: 14px; }
.code-panel { margin-top: 26px; border: 1px solid #e5deee; border-radius: 12px; background: #faf8fd; overflow: hidden; }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #e8e1ef; background: #f3eff8; }
.code-toolbar > span { color: #83728f; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
button { cursor: pointer; font: inherit; }
#copy { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #5e3b9d; padding: 9px 14px; border-radius: 7px; color: white; background: var(--accent); font-size: 12px; font-weight: 600; transition: background 160ms ease, box-shadow 160ms ease; }
#copy:hover { background: #583596; box-shadow: 0 3px 9px #6844ae26; }
#copy > span { font-size: 17px; line-height: 1; }
pre { margin: 0; min-width: 0; padding: 22px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
pre code { color: #514260; font-size: 12px; line-height: 1.95; }
.snippet-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding-top: 16px; font-size: 12px; }
#copy-status { color: #665079; }
.setup > .setup-note { padding-top: 12px; font-size: 12px; color: #81788c; }
.full-instructions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.full-instructions summary { width: fit-content; color: #776186; font-size: 12px; cursor: pointer; }
.full-instructions pre { margin-top: 18px; background: #faf8fd; border: 1px solid var(--line); border-radius: 10px; }
.available { padding: 44px var(--cell-padding) 32px; }
.available > * { grid-column: 1 / -1; min-width: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-heading > span { color: #93889f; font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: 1px; }
.skills-list { list-style: none; margin: 0; padding: 0; }
.skills-list li { position: relative; border-bottom: 1px solid var(--line); }
.skills-list li:last-child { border-bottom: 0; }
.skills-list li::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--cell-padding)); border-radius: 10px; background: #f0eaf7; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.skills-list li:hover::before, .skills-list li:focus-within::before { opacity: 1; }
.skill-link { position: relative; align-items: start; padding-block: 28px; text-decoration: none; color: inherit; }
.skill-identity { grid-column: 1 / 5; min-width: 0; padding-right: 24px; }
.skill-title { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.4px; line-height: 1.5; }
.skill-file { display: block; margin-top: 6px; color: #9a8ba7; font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.skill-description { grid-column: 5 / 12; color: #7d7387; font-size: 13px; line-height: 1.85; padding-inline-end: 24px; }
.skill-arrow { grid-column: 12 / -1; justify-self: end; font-size: 22px; line-height: 1.4; color: #a394b2; }
.skill-link:hover .skill-title { color: var(--accent); }
footer { padding: 24px var(--cell-padding) 32px; border-top: 1px solid var(--line); font-size: 11px; }
footer > span { grid-column: 1 / 7; color: #9b92a4; }
footer > a { grid-column: 7 / -1; justify-self: end; color: #877592; text-decoration: none; }
@media (max-width: 800px) {
  :root { --columns: 6; --page-inset: 24px; --cell-padding: 24px; }
  .intro > p:first-of-type { grid-column: 1 / -1; }
  .skill-identity { grid-column: 1 / 3; }
  .skill-description { grid-column: 3 / 6; }
  .skill-arrow { grid-column: 6 / -1; }
  footer > span { grid-column: 1 / 4; }
  footer > a { grid-column: 4 / -1; }
}
@media (max-width: 550px) {
  :root { --columns: 4; --page-inset: 20px; --cell-padding: 20px; }
  header { padding: 22px 0; }
  header a { font-size: 20px; }
  .intro { padding: 38px 0 30px; }
  h1 { font-size: 37px; letter-spacing: -1.4px; margin-bottom: 22px; }
  .intro > p:first-of-type { font-size: 15px; }
  .intro > p:last-child { font-size: 12px; }
  .setup { padding-block: 25px 20px; border-radius: 14px; }
  h2 { font-size: 21px; }
  .setup > p { font-size: 13px; }
  .code-panel { margin-top: 22px; }
  .code-toolbar { padding: 10px 12px; gap: 8px; }
  #copy { padding: 8px 10px; font-size: 11px; gap: 8px; }
  pre { padding: 16px; }
  pre code { font-size: 11px; }
  .available { padding: 34px 0 20px; }
  .skill-identity { grid-column: 1 / 4; padding: 0; }
  .skill-arrow { grid-column: 4 / -1; grid-row: 1; }
  .skill-description { grid-column: 1 / -1; padding: 14px 0 0; }
  .skill-file { font-size: 10px; }
  footer { padding: 22px 0; row-gap: 10px; }
  footer > span, footer > a { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}