.commands-page { width: min(var(--max-width), calc(100% - 40px)); min-height: calc(100vh - 155px); margin: 0 auto; padding: 76px 0 100px; }
.commands-heading { max-width: 850px; margin-bottom: 48px; }
.commands-heading .comic-label { margin: 0; }
.commands-heading h1 { margin: 28px 0 0; display: grid; gap: 13px; font-family: var(--font-heading); font-size: clamp(54px, 7vw, 82px); font-weight: 400; font-synthesis: none; line-height: .92; letter-spacing: .035em; text-transform: uppercase; paint-order: stroke fill; -webkit-text-stroke: 1.2px var(--display-outline); text-shadow: 2px 2px 0 var(--display-outline); }
.commands-heading h1 mark { width: fit-content; padding: 5px 11px 2px; background: var(--pink); color: #fff8e9; transform: rotate(-1deg); }
.commands-heading h1 span { display: block; }
.commands-heading > p:last-child { max-width: 700px; margin: 22px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.commands-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; }
.category-panel { position: sticky; top: 18px; padding: 10px; display: grid; gap: 7px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); box-shadow: 6px 7px 0 var(--ink); }
.category-button { width: 100%; min-height: 44px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid transparent; border-radius: 4px; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 18px; font-weight: 700; letter-spacing: .1px; text-align: left; cursor: pointer; transition: transform 150ms ease, background-color 150ms ease, color 150ms ease; }
.category-button:hover { background: color-mix(in srgb, var(--cyan) 20%, var(--surface)); transform: translateX(4px); }
.category-button.is-active { border-color: var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.category-button small { min-width: 27px; padding: 3px 6px; border: 2px solid var(--ink); border-radius: 99px; background: #fff8e7; color: var(--ink); text-align: center; font-family: var(--font-ui); font-size: 10px; }
.command-results { min-width: 0; }
.command-search { height: 54px; padding: 0 16px; display: flex; align-items: center; gap: 11px; border: 2px solid var(--ink); border-radius: 5px; background: #fff8e7; box-shadow: 5px 6px 0 var(--ink); transition: transform 160ms ease, box-shadow 160ms ease; }
.command-search:focus-within { transform: translateY(-2px); box-shadow: 7px 8px 0 var(--ink); }
.command-search svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.command-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 600; }
.command-search input::placeholder { color: #6f6877; }
.command-list { margin-top: 18px; display: grid; gap: 12px; }
.command-row { overflow: hidden; border: 2px solid var(--ink); border-radius: 5px; background: #fff8e7; color: var(--ink); box-shadow: 5px 6px 0 var(--ink); transform: translate(0,0); transition: transform 190ms cubic-bezier(.2,.8,.2,1), box-shadow 190ms ease, background-color 190ms ease; }
.command-row:hover { position: relative; z-index: 2; background: #fff1c9; transform: translate(5px,-4px) rotate(.15deg); box-shadow: 8px 10px 0 var(--ink); }
.command-row[hidden] { display: none; }
.command-row__trigger { width: 100%; min-height: 82px; padding: 13px 16px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto 20px; align-items: center; gap: 14px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.command-initial { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 5px; background: var(--yellow); box-shadow: 2px 3px 0 var(--ink); font-family: var(--font-heading); font-size: 19px; transition: transform 180ms cubic-bezier(.34,1.56,.64,1), background-color 180ms ease; }
.command-row:hover .command-initial { transform: rotate(-7deg) scale(1.08); background: var(--lime); }
.command-summary { min-width: 0; display: grid; gap: 4px; }
.command-summary strong { overflow-wrap: anywhere; font-family: var(--font-heading); font-size: 24px; font-weight: 400; font-synthesis: none; letter-spacing: .03em; paint-order: stroke fill; -webkit-text-stroke: .65px var(--display-outline); text-shadow: 1px 1px 0 var(--display-outline); }
.command-summary small { overflow: hidden; color: #534d5b; font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.command-category { padding: 6px 9px; border: 2px solid var(--ink); border-radius: 99px; color: var(--ink); font-size: 10px; font-weight: 700; text-transform: uppercase; transition: background-color 180ms ease; }
.command-row:hover .command-category { background: var(--cyan); }
.command-chevron { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.command-row__trigger[aria-expanded="true"] .command-chevron { transform: rotate(180deg); }
.command-details { display: grid; grid-template-rows: 1fr; border-top: 2px solid var(--ink); }
.commands-js .command-details { grid-template-rows: 0fr; border-top-color: transparent; transition: grid-template-rows 200ms cubic-bezier(.2, .8, .2, 1), border-color 200ms cubic-bezier(.2, .8, .2, 1); }
.commands-js .command-row.is-open .command-details { grid-template-rows: 1fr; border-top-color: var(--ink); }
.command-details__inner { min-height: 0; overflow: hidden; }
.command-details__content { padding: 0 16px 18px 72px; }
.command-syntax { padding: 16px 0; display: flex; align-items: center; gap: 12px; color: #625b68; font-size: 12px; font-weight: 700; }
.command-syntax code { padding: 7px 9px; border: 2px solid var(--ink); border-radius: 4px; background: var(--cyan); color: var(--ink); overflow-wrap: anywhere; }
.parameter-list { display: grid; gap: 8px; }
.parameter-row { padding: 11px 12px; display: grid; grid-template-columns: minmax(90px,auto) auto auto minmax(0,1fr); align-items: center; gap: 9px; border: 2px solid var(--ink); border-radius: 4px; background: #fffdf6; }
.parameter-row code { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.parameter-type, .parameter-state { padding: 4px 6px; border: 1px solid var(--ink); border-radius: 3px; background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 700; }
.parameter-row p { margin: 0; color: #5c5562; font-size: 12px; line-height: 1.45; }
.no-parameters { margin: 15px 0 0; color: #5c5562; font-size: 13px; }
.commands-empty { min-height: 150px; padding: 28px; display: grid; place-items: center; border: 2px dashed var(--ink); border-radius: 5px; background: #fff8e7; color: var(--ink); text-align: center; }
.commands-empty[hidden] { display: none; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 780px) {
  .commands-page { padding-top: 54px; }
  .commands-heading h1 { font-size: 52px; }
  .commands-layout { grid-template-columns: 1fr; }
  .category-panel { position: static; padding: 4px 4px 8px; display: flex; overflow-x: auto; border: 0; background: transparent; box-shadow: none; scrollbar-width: none; }
  .category-panel::-webkit-scrollbar { display:none; }
  .category-button { width:auto; min-width:max-content; padding:0 12px; border-color:var(--ink); background:var(--surface); box-shadow:3px 4px 0 var(--ink); }
  .command-category { display:none; }
  .command-row__trigger { grid-template-columns:42px minmax(0,1fr) 20px; }
  .command-details__content { padding-left:16px; }
  .parameter-row { grid-template-columns:1fr auto auto; }
  .parameter-row p { grid-column:1/-1; }
}

@media (max-width: 520px) {
  .commands-page { width:calc(100% - 28px); padding-top:44px; }
  .commands-heading { margin-bottom:34px; }
  .commands-heading h1 { font-size:44px; }
  .command-row__trigger { padding:12px; gap:9px; }
  .command-summary small { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .command-syntax { align-items:flex-start; flex-direction:column; }
  .parameter-row { grid-template-columns:1fr 1fr; }
  .parameter-state { text-align:right; }
}

@media (prefers-reduced-motion: reduce) {
  .commands-js .command-details { transition:grid-template-rows 200ms cubic-bezier(.2, .8, .2, 1), border-color 200ms cubic-bezier(.2, .8, .2, 1) !important; }
}
.command-summary strong {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}