:root {
  color-scheme:light;
  --paper:#faf8f2;
  --ink:#2e4039;
  --muted:#747b70;
  --green:#304e40;
  --line:#e3e4d8;
  --accent:#bf6c40;
  font-family:Inter,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  color:inherit;
}

button:disabled {
  opacity:.55;
  cursor:wait;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #af7950;
  outline-offset:4px;
}

[hidden] {
  display:none!important;
}

.wrap {
  width:min(1180px,calc(100% - 96px));
  margin:auto;
}

.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  margin:0 0 18px;
}

.primary,.secondary {
  border-radius:8px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:12px 17px;
  font-weight:600;
  font-size:12px;
  border:1px solid transparent;
}

.primary {
  background:var(--green);
  color:#fff;
}

.primary:hover {
  background:#41634f;
}

.secondary {
  border-color:#d9dfd2;
  background:transparent;
}

.secondary:hover {
  background:#f0f0e6;
}

.collection {
  padding:32px 0;
  scroll-margin-top:26px;
}

h2 {
  font-size:30px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-1px;
  margin:0;
}

.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:25px;
}

.filters {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}

.filters button {
  border:0;
  border-radius:7px;
  font-size:15px;
  background:transparent;
  padding:10px 16px;
  color:#737b6d;
}

.filters button[aria-pressed=true] {
  background:#e8ecdf;
  color:var(--green);
  font-weight:650;
}

.filters span {
  margin-left:5px;
  opacity:.65;
  font-size:10px;
}

.search {
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fdfbf6;
}

.search>span {
  font-size:23px;
  line-height:1;
  color:#8a9181;
}

.search input {
  border:0;
  background:transparent;
  min-width:0;
  width:181px;
  font-size:11px;
  outline-offset:7px;
}

.search input::placeholder {
  color:#a1a492;
}

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

.card {
  border:1px solid #e3e3d7;
  border-radius:13px;
  overflow:hidden;
  background:#fffef9;
  transition:box-shadow .18s,border-color .18s;
}

.card:hover {
  box-shadow:0 8px 24px #3d49300b;
  border-color:#c8d0bd;
}

.card-art {
  position:relative;
  width:100%;
  height:215px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f0eddc;
  padding:28px;
  overflow:hidden;
}

.card[data-kind=widgets] .card-art {
  background:#e8edde;
}

.card[data-kind=layouts] .card-art {
  background:#eee8e0;
}

.card:nth-child(4n+2) .card-art {
  background:#e7eade;
}

.card:nth-child(4n+3) .card-art {
  background:#eee6dd;
}

.card-art canvas {
  max-width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 4px #57452605);
}

.card-art>.art-row {
  height:100%;
  width:100%;
}

.art-row {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  min-width:0;
}

.art-row canvas {
  min-width:0;
  max-width:100%;
  flex:1;
  object-fit:contain;
}

.card-art .art-row canvas+canvas {
  margin-left:-12%;
}

.category-tag {
  position:absolute;
  top:14px;
  left:15px;
  border-radius:5px;
  padding:4px 7px;
  background:#ffffff83;
  color:#626a59;
  font-size:8px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  font-weight:600;
}

.card-info {
  padding:18px 19px 16px;
}

.card-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.card-title h3 {
  font-size:16px;
  letter-spacing:-.3px;
  margin:0;
  font-weight:600;
}

.version-pill {
  font-size:9px;
  color:#8e9485;
  white-space:nowrap;
}

.card-info p {
  font-size:11px;
  color:#89917f;
  margin:8px 0 16px;
  line-height:1.65;
  min-height:36px;
}

.card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #eceee4;
  padding-top:12px;
}

.view-link {
  border:0;
  padding:0;
  background:none;
  font-size:11px;
  font-weight:600;
}

.copy-small {
  border:0;
  background:none;
  font-size:10px;
  color:#8b927f;
  padding:3px;
}

.view-link:hover,.copy-small:hover {
  color:var(--accent);
}

.status {
  font-size:13px;
  color:var(--muted);
  margin:10px 0;
}

.status:empty {
  display:none;
}

.mini-board {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  height:100%;
  padding:3px;
  transform:rotate(-3deg);
}

.mini-box {
  background:#fffcf4;
  border-radius:9px;
  box-shadow:0 3px 6px #705e4020;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:8px;
  min-height:0;
  min-width:0;
}

.mini-box span {
  font-size:8px;
  color:#849079;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mini-box canvas {
  object-fit:contain;
  width:100%;
  min-height:0;
  flex:1;
}

dialog {
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);
  color:var(--ink);
  width:min(840px,calc(100% - 32px));
  padding:35px;
  max-height:90vh;
  box-shadow:0 30px 100px #21372c30;
}

dialog::backdrop {
  background:#293b2d65;
  backdrop-filter:blur(5px);
}

.close {
  position:absolute;
  right:18px;
  top:13px;
  font-size:26px;
  border:0;
  background:none;
  width:36px;
  height:36px;
}

.detail-top .eyebrow {
  font-size:9px;
  margin-bottom:8px;
  color:#8a947d;
}

.detail-top h2 {
  font-size:35px;
}

.detail-top p:not(.eyebrow) {
  font-size:13px;
  color:var(--muted);
  max-width:590px;
}

.detail-preview {
  background:#e9edde;
  border-radius:13px;
  margin-top:23px;
  min-height:225px;
  display:flex;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  padding:20px;
  flex-wrap:wrap;
}

.pose {
  flex:1;
  min-width:130px;
  max-width:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:5px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
}

.pose canvas {
  width:100%;
  height:165px;
  object-fit:contain;
}

.pose span {
  font-size:11px;
  color:#6e7c61;
  margin-top:4px;
}

.detail-preview .mini-board {
  min-height:250px;
  transform:none;
  max-width:580px;
}

.detail-preview .mini-box canvas {
  height:140px;
}

.detail-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  gap:12px;
  font-size:10px;
  color:#879178;
}

.detail-bar button {
  padding:6px 11px;
  font-size:10px;
}

#play {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#play[hidden] {
  display:none;
}

.switch-track {
  display:inline-flex;
  align-items:center;
  width:26px;
  height:16px;
  padding:2px;
  border-radius:12px;
  background:#a5aa9e;
}

.switch-track::after {
  content:'';
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--paper);
}

#play[aria-checked="true"] .switch-track {
  background:var(--green);
  justify-content:flex-end;
}

.detail-actions {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:24px;
  flex-wrap:wrap;
}

.version-label {
  margin-left:auto;
  font-size:10px;
  color:#829075;
  display:flex;
  align-items:center;
  gap:8px;
}

.version-label select {
  font-size:11px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
}

.agent-hint {
  font-size:11px;
  color:#8d957e;
  margin:13px 0 0;
}

.includes {
  margin-top:24px;
}

.includes:empty {
  display:none;
}

.includes h3 {
  font-size:12px;
  font-weight:600;
  margin:0 0 9px;
}

.included-row {
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  flex-wrap:wrap;
}

.included-row .arrow {
  color:#9a9f8d;
}

.included-row a {
  border-bottom:1px dotted #a4ad98;
}

.included-row a:hover {
  color:var(--accent);
}

.included-row small {
  color:#949c88;
  font-size:10px;
}

.detail-status {
  font-size:12px;
}

.placeholder {
  font-family:Georgia,serif;
  font-size:14px;
  color:#929781;
  font-style:italic;
}

#copy-fallback input {
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:12px;
}

#copy-fallback label {
  font-size:11px;
}

#detail-status {
  font-size:12px;
  color:#6c775f;
}

@media(min-width:1500px) {
  .wrap {
    width:1250px;
  }
  .card-art {
    height:245px;
  }
}

@media(max-width:950px) {
  .wrap {
    width:calc(100% - 56px);
  }
  .grid {
    gap:18px;
  }
  .card-art {
    height:190px;
    padding:23px 16px;
  }
  .toolbar {
    align-items:start;
  }
  .search input {
    width:135px;
  }
  .filters button {
    padding:8px 10px;
  }
}

@media(max-width:700px) {
  .wrap {
    width:calc(100% - 36px);
  }
  .collection {
    padding-top:24px;
  }
  .toolbar {
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .filters {
    justify-content:space-between;
  }
  .filters button {
    padding:10px 12px;
    font-size:13px;
  }
  .search {
    padding:9px 12px;
  }
  .search input {
    width:100%;
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
  }
  .card-art {
    height:170px;
    padding:22px 12px;
  }
  .card-info {
    padding:13px 12px;
  }
  .card-title {
    align-items:start;
    flex-direction:column;
    gap:3px;
  }
  .card-title h3 {
    font-size:14px;
  }
  .card-info p {
    font-size:10px;
    min-height:48px;
    margin:6px 0 12px;
  }
  .category-tag {
    top:10px;
    left:10px;
    font-size:7px;
    padding:3px 5px;
  }
  .card-bottom {
    gap:5px;
  }
  .view-link {
    font-size:10px;
  }
  .copy-small {
    font-size:9px;
  }
  dialog {
    padding:26px 18px;
  }
  .detail-top h2 {
    font-size:29px;
  }
  .detail-preview {
    padding:12px;
    gap:5px;
  }
  .pose {
    min-width:90px;
  }
  .pose canvas {
    height:120px;
  }
  .detail-actions {
    gap:8px;
  }
  .detail-actions button {
    font-size:11px;
    padding:10px 12px;
  }
  .version-label {
    margin-left:0;
  }
  .mini-board {
    gap:5px;
  }
  .mini-box {
    padding:5px;
  }
  .mini-box span {
    font-size:6px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}

.art-row {
  width:100%;
  height:100%;
}
.layout-screenshot { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* Plugin details keep setup information out of the browsing cards. */
.plugin-links { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
#includes > p, #includes details { font-size:12px; color:var(--muted); }
#includes code { display:block; overflow-wrap:anywhere; font-size:11px; }
.card[data-kind=plugins] .card-art { background:#e8edde; }

.sample-tag { position:absolute; right:12px; bottom:9px; font-size:9px; color:#747b70; }
body[data-plugin-catalog] .filters { flex-wrap:nowrap; overflow-x:auto; }
body[data-plugin-catalog] .filters button { flex-shrink:0; white-space:nowrap; }
@media(max-width:700px) {
  body[data-plugin-catalog] .filters button { padding:10px 8px; font-size:12px; }
  body[data-plugin-catalog] .filters span { margin-left:4px; }
}

/* A compact sticker picker, with a fixed heading and a scrolling grid. */
.detail-heading { display:flex; align-items:center; gap:14px; }
.detail-heading h2 { flex:1; min-width:0; font-size:28px; }
.detail-heading .close { position:static; flex:0 0 36px; padding:0; }
.detail-heading .version-label { flex-shrink:0; margin:0; }
dialog.artwork-detail { padding:24px; width:min(880px,calc(100% - 32px)); overflow:hidden; }
dialog.artwork-detail[open] { display:flex; flex-direction:column; }
.artwork-detail .detail-heading { flex-shrink:0; }
.artwork-detail .detail-top,
.artwork-detail .detail-bar,
.artwork-detail .detail-actions,
.artwork-detail .agent-hint { display:none; }
.detail-preview.artwork-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap:12px;
  padding:4px;
  margin-top:20px;
  min-height:0;
  flex:0 1 auto;
  overflow:auto;
  overscroll-behavior:contain;
  background:transparent;
}
.artwork-grid .artwork-tile {
  width:100%;
  min-width:0;
  max-width:none;
  padding:12px;
  border:1px solid transparent;
  border-radius:12px;
  background:#f0f1e8;
  transition:background .15s,border-color .15s;
}
.artwork-tile:hover { background:#e5eadc; border-color:#c6d0b9; }
.artwork-tile:active { background:#d5dfc9; }
.artwork-tile canvas { height:150px; }
.copy-toast {
  position:fixed;
  z-index:1000;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 22px;
  border-radius:99px;
  background:var(--green);
  color:white;
  font-size:14px;
  font-weight:600;
  box-shadow:0 4px 18px #21372c30;
  pointer-events:none;
}
@media(max-width:700px) {
  dialog.artwork-detail { padding:18px 12px; }
  .detail-heading { gap:8px; }
  .detail-heading h2 { font-size:21px; }
  .detail-heading .close { flex-basis:28px; width:28px; }
  .detail-preview.artwork-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .artwork-grid .artwork-tile { padding:6px; }
  .artwork-tile canvas { height:100px; }
}

#copy-fallback { width:min(520px,calc(100% - 32px)); }
#copy-fallback button { margin-top:16px; }

/* Widgets show a use in several situations; layouts show the assembled screen. */
.scenario-detail .detail-top .eyebrow,
.scenario-detail .detail-bar,
.scenario-detail .includes { display:none; }
.scenario-detail .detail-top p { margin:14px 0 0; max-width:680px; }
.scenario-note { margin:14px 0 0; color:var(--muted); font-size:11px; }
.detail-preview.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:transparent; padding:0; gap:14px; margin-top:12px; min-height:0; }
.scenario-shot { min-width:0; width:100%; padding:0; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.scenario-shot img { display:block; width:100%; height:auto; object-fit:contain; }
.scenario-caption { display:block; padding:13px 8px; color:var(--ink); font-size:12px; border-top:1px solid var(--line); }
button.scenario-shot:hover, .layout-copy-preview:hover { border-color:var(--green); }
.card-art .scenario-shot { border:0; border-radius:0; }
.layout-copy-preview { display:block; width:100%; padding:0; border:1px solid transparent; border-radius:12px; background:transparent; }
.scenario-detail:has(.layout-copy-preview) .detail-preview { padding:0; background:transparent; min-height:0; margin-top:12px; }
@media(max-width:700px) {
  .detail-preview.scenario-grid { grid-template-columns:1fr; }
  .scenario-detail { padding:22px 16px; }
  .scenario-detail .detail-heading { align-items:flex-start; }
}

.grid[data-kind=widgets] { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:700px) { .grid[data-kind=widgets] { grid-template-columns:1fr; } }
.grid[data-kind=widgets] .card-art { height:auto; aspect-ratio:480 / 300; padding:0; }
.card-art .art-row:has(.scenario-shot) { position:absolute; inset:0; }
.card-art .scenario-shot, .card-art .scenario-shot img { height:100%; }
.card-art .scenario-shot img { object-fit:contain; }
dialog.scenario-detail[open] { display:flex; flex-direction:column; overflow:hidden; }
.scenario-detail .detail-heading, .scenario-detail .detail-top, .scenario-detail .scenario-note { flex-shrink:0; }
.scenario-detail .detail-preview { flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; }
.detail-preview.scenario-grid { grid-auto-rows:max-content; align-content:start; }

/* Data plugins explain collection separately from the example display. */
.plugin-detail .detail-top .eyebrow,.plugin-detail .agent-hint{display:none}
.plugin-detail #detail-description{margin:8px 0 20px;font-size:16px;line-height:1.5}
.plugin-detail .detail-preview{min-height:0;padding:20px}
.plugin-detail .layout-screenshot{max-height:220px;width:auto;max-width:100%;object-fit:contain}
.plugin-detail .detail-bar{margin:8px 0 20px;font-size:12px}
.plugin-facts{display:grid;grid-template-columns:1fr 2fr;gap:20px;margin-bottom:20px}
.plugin-fact-label{font-size:12px;color:var(--muted)}
.plugin-facts p{margin:5px 0;font-size:16px}
.plugin-installation{border-top:1px solid #d9ded0;padding-top:16px}
.plugin-installation summary{cursor:pointer;font-size:14px}
.plugin-installation h3{font-size:14px;margin:18px 0 6px}
.plugin-installation p{font-size:14px;line-height:1.5}
.plugin-installation code{display:block;overflow-wrap:anywhere;font-size:11px}
.plugin-links{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin:18px 0}
.plugin-detail .detail-actions{margin-top:22px}
#grid[data-kind=plugins]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){#grid[data-kind=plugins]{grid-template-columns:1fr}.plugin-facts{grid-template-columns:1fr;gap:10px}}

.scenario-detail .detail-actions, .scenario-detail .agent-hint, .scenario-detail #detail-status { flex-shrink:0; }
.scenario-detail .detail-actions { flex-wrap:wrap; }