.artcard{
  --ac-max:1180px;
  --ac-paper:#ffffff;
  --ac-ink:#0f0f0c;
  --ac-soft:#8d8d84;
  --ac-hair:#e4e4de;
  max-width:var(--ac-max);margin:0 auto;padding:26px 0 80px;   /* the theme decides the real width */
  background:var(--ac-paper);color:var(--ac-ink);
  font:400 17px/1.5 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;box-sizing:border-box;
}
.artcard *,.artcard *::before,.artcard *::after{box-sizing:border-box}
.artcard button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;margin:0}
.artcard :focus-visible{outline:2px solid var(--ac-ink);outline-offset:4px;border-radius:3px}
.artcard svg{display:block}

.ac-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}
.ac-mark{font-weight:700;font-size:17px;line-height:1;letter-spacing:-.03em}
.ac-rail{display:flex;gap:5px}
.ac-rail button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--ac-soft);transition:color .2s,background .2s;padding:0}
.ac-rail button[aria-current="true"]{color:var(--ac-paper);background:var(--ac-ink)}
.ac-rail button:disabled{opacity:.3;cursor:default}

.ac-panel{display:none}
.ac-panel.ac-on{display:block;animation:ac-in .34s ease both}
@keyframes ac-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.artcard .ac-h{margin:0 0 24px;font-weight:700;font-size:clamp(38px,12vw,60px);line-height:.92;
  letter-spacing:-.045em;display:flex;align-items:flex-end;gap:.14em;flex-wrap:wrap;color:var(--ac-ink)}
.ac-h em{font-style:normal;width:.17em;height:.17em;background:var(--ac-ink);display:inline-block;margin-bottom:.13em}
/* The step counter rides on the heading line rather than sitting in its own bar. */
.ac-h .ac-step{font-style:normal;font-weight:400;font-size:14px;letter-spacing:0;
  color:var(--ac-soft);margin-left:auto;align-self:center;padding-left:1em;white-space:nowrap}
.ac-foot{margin:56px 0 0;font-size:11.5px;color:var(--ac-soft);line-height:1.6}

.ac-tally{margin:-12px 0 22px;font-size:12.5px;color:var(--ac-soft)}
.ac-tally b{font-weight:500;color:var(--ac-ink)}

.ac-rooms{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 30px}
.ac-room{border:1px solid var(--ac-hair);border-radius:999px;padding:9px 16px;
  font-size:14px;white-space:nowrap;transition:.16s;flex:0 1 auto;min-width:0}
.ac-room[aria-pressed="true"]{background:var(--ac-ink);border-color:var(--ac-ink);color:var(--ac-paper)}

.ac-wall{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
@media(min-width:620px){.ac-wall{grid-template-columns:1fr 1fr 1fr;gap:30px 26px}}
.ac-piece{display:block;width:100%;padding:0}
.ac-piece figure{margin:0;display:grid;place-items:center;height:186px}
.ac-piece img{max-width:100%;max-height:186px;display:block;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.3);transition:transform .22s ease}
.ac-piece:hover img,.ac-piece:focus-visible img{transform:translateY(-5px) scale(1.02)}
.ac-skel{height:186px;background:var(--ac-hair);border-radius:2px;animation:ac-pulse 1.4s ease-in-out infinite}
.ac-skelwrap{display:contents}
@keyframes ac-pulse{0%,100%{opacity:.5}50%{opacity:1}}

.ac-more{margin:48px auto 0;display:flex;align-items:center;gap:9px;color:var(--ac-soft);font-size:14px}
.ac-more:hover{color:var(--ac-ink)}
.ac-oops{border:1px solid var(--ac-hair);padding:20px;font-size:14.5px;color:var(--ac-soft);line-height:1.55}

.ac-stage{margin-bottom:30px}
.artcard canvas{display:block;width:100%;height:auto;background:var(--ac-hair);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.35);
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.artcard canvas:active{cursor:grabbing}
.ac-cap{margin:12px 0 0;font-size:11.5px;color:var(--ac-soft);line-height:1.45}
.ac-cap a{color:var(--ac-soft)}
.ac-tip{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ac-soft)}

.ac-desk{display:grid;gap:20px}
.artcard textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--ac-hair);
  padding:10px 0;color:var(--ac-ink);font:400 19px/1.45 inherit;resize:none;min-height:128px;border-radius:0}
.artcard textarea::placeholder{color:#c2c2ba}
.artcard textarea:focus{outline:none;border-bottom-color:var(--ac-ink)}

.ac-row{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.ac-group{display:flex;gap:7px;flex:0 0 auto}
.ac-chip{border:1px solid var(--ac-hair);border-radius:999px;padding:9px 16px;font-size:14px;
  transition:.16s;flex:0 1 auto;min-width:0;white-space:nowrap}
.ac-chip[aria-pressed="true"]{background:var(--ac-ink);border-color:var(--ac-ink);color:var(--ac-paper)}
.ac-icon{display:flex;align-items:center;gap:8px;border:1px solid var(--ac-hair);
  border-radius:999px;padding:9px 16px;font-size:14px;transition:.16s;
  flex:0 1 auto;min-width:0;white-space:nowrap}
.ac-icon:hover{border-color:var(--ac-ink)}
.ac-icon b{font-weight:400;color:var(--ac-soft)}
.ac-icon.ac-sq{padding:9px 12px}
.ac-icon[aria-pressed="true"]{background:var(--ac-ink);border-color:var(--ac-ink);color:var(--ac-paper)}
.ac-icon[aria-pressed="true"] b{color:var(--ac-paper)}

.ac-slider{display:block;font-size:12px;color:var(--ac-soft);margin-top:-4px}
.ac-slider b{float:right;font-weight:400;color:var(--ac-ink)}
.ac-slider input{display:block;width:100%;margin-top:10px;accent-color:var(--ac-ink);height:26px}

.ac-act{display:grid;gap:10px}
.ac-go{background:var(--ac-ink);color:var(--ac-paper);border-radius:999px;padding:17px;
  font-weight:500;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;transition:.16s}
.ac-go:hover{background:#000}
.ac-alt{border:1px solid var(--ac-hair);border-radius:999px;padding:17px;font-size:17px;width:100%}
.ac-alt:hover{border-color:var(--ac-ink)}
.ac-note{margin:0;font-size:13px;color:var(--ac-soft);min-height:18px}
.ac-note.ac-bad{color:#a8341c}
.ac-back{margin-top:6px;color:var(--ac-soft);font-size:14px}
.ac-back:hover{color:var(--ac-ink)}

/* Narrow phones. Tighter chips so a row holds more before it breaks, and the
   rows themselves are still allowed to break wherever they need to. */
@media (max-width:430px){
  .artcard{padding:22px 16px 72px}
  .ac-chip,.ac-room{padding:8px 13px;font-size:13.5px}
  .ac-icon{padding:8px 12px;font-size:13.5px;gap:6px}
  .ac-icon.ac-sq{padding:8px 10px}
  .ac-row,.ac-rooms{gap:6px}
  .ac-wall{gap:20px 14px}
  .ac-go,.ac-alt{padding:15px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .artcard *{animation:none !important;transition:none !important}
}

/* ---------------------------------------------------------------------------
   Wide layout.
   Keyed to the width of the block itself, not the window. A theme with a
   sidebar can hand a 600px column to a 1800px screen, and splitting that in
   two leaves the card the size of a stamp. A script measures the block and
   sets .ac-wide, so this only applies when there is genuinely room.
   --------------------------------------------------------------------------- */
.artcard.ac-narrow{max-width:560px}
.artcard.ac-narrow.ac-wide .ac-panel.ac-on[data-panel="2"],
.artcard.ac-narrow.ac-wide .ac-panel.ac-on[data-panel="3"]{display:block}
.artcard.ac-narrow.ac-wide .ac-stage{position:static;margin-bottom:30px}
.artcard.ac-wide{padding:34px 0 90px}

/* Full bleed. The margins are set by the script, because 100vw includes the
   scrollbar and would push the page sideways. Direct children keep a sane
   measure so the tool does not stretch across a very wide monitor. */
.artcard.ac-full{padding-left:clamp(16px,4vw,56px);padding-right:clamp(16px,4vw,56px)}
.artcard.ac-full > *{max-width:1400px;margin-left:auto;margin-right:auto}
.artcard.ac-full.ac-wide{padding-top:38px}

.artcard.ac-wide .ac-panel.ac-on[data-panel="2"],
.artcard.ac-wide .ac-panel.ac-on[data-panel="3"]{
  display:flex;
  flex-wrap:wrap;
  gap:0 44px;
  align-items:flex-start;
}
.artcard.ac-wide .ac-panel[data-panel="2"] .ac-h,
.artcard.ac-wide .ac-panel[data-panel="3"] .ac-h{flex:1 0 100%}

/* Flex with a basis and a floor, so neither column can be squeezed to nothing. */
.artcard.ac-wide .ac-stage{flex:1 1 440px;min-width:320px;position:sticky;top:26px;margin-bottom:0}
.artcard.ac-wide .ac-desk{flex:0 1 384px;min-width:300px}

.artcard.ac-wide .ac-wall{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:32px 26px}
.artcard.ac-wide .ac-piece figure{height:220px}
.artcard.ac-wide .ac-piece img{max-height:220px}
.artcard.ac-wide .ac-skel{height:220px}
.artcard.ac-wide .ac-h{font-size:clamp(44px,4.2vw,62px)}

.artcard.ac-xwide .ac-wall{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ---------------------------------------------------------------------------
   Standing up to the theme.
   Themes style buttons and links globally, and some of those rules land on top
   of the ones above: a hover colour that turns black text on a black button
   invisible, an underline, a stray margin that nudges things out of line. Every
   selector here is prefixed with .artcard so it only ever affects this block,
   and every state is spelled out rather than left to be inherited.
   --------------------------------------------------------------------------- */

.artcard button,
.artcard a,
.artcard input,
.artcard textarea,
.artcard label{
  font-family:inherit;
  letter-spacing:inherit;
  text-transform:none;
  box-shadow:none;
}
.artcard button{
  -webkit-appearance:none;appearance:none;
  margin:0;
  background:none;
  border:0;
  border-radius:0;
  color:inherit;
  text-decoration:none;
  text-shadow:none;
  line-height:1.4;
  min-height:0;
  min-width:0;
  width:auto;
  cursor:pointer;
}
.artcard button:hover,
.artcard button:focus,
.artcard button:active{
  box-shadow:none;
  text-decoration:none;
  transform:none;
}
.artcard a{text-decoration:none}

/* Filled buttons: the same colours in every state, so nothing can black out. */
.artcard .ac-go,
.artcard .ac-go:hover,
.artcard .ac-go:focus,
.artcard .ac-go:active,
.artcard .ac-go:visited{
  background:var(--ac-ink);
  color:var(--ac-paper);
  border:0;
  border-radius:999px;
}
.artcard .ac-go:hover{background:#000}
.artcard .ac-go svg{color:var(--ac-paper)}

.artcard .ac-chip[aria-pressed="true"],
.artcard .ac-chip[aria-pressed="true"]:hover,
.artcard .ac-chip[aria-pressed="true"]:focus,
.artcard .ac-room[aria-pressed="true"],
.artcard .ac-room[aria-pressed="true"]:hover,
.artcard .ac-room[aria-pressed="true"]:focus,
.artcard .ac-icon[aria-pressed="true"],
.artcard .ac-icon[aria-pressed="true"]:hover,
.artcard .ac-icon[aria-pressed="true"]:focus{
  background:var(--ac-ink);
  border-color:var(--ac-ink);
  color:var(--ac-paper);
}
.artcard .ac-icon[aria-pressed="true"] b{color:var(--ac-paper)}

.artcard .ac-rail button[aria-current="true"],
.artcard .ac-rail button[aria-current="true"]:hover,
.artcard .ac-rail button[aria-current="true"]:focus{
  background:var(--ac-ink);
  color:var(--ac-paper);
}

/* Outlined buttons: never let a theme fill them in. */
.artcard .ac-chip,
.artcard .ac-room,
.artcard .ac-icon,
.artcard .ac-alt{
  background:transparent;
  color:var(--ac-ink);
  border:1px solid var(--ac-hair);
}
.artcard .ac-chip:hover,
.artcard .ac-room:hover,
.artcard .ac-icon:hover,
.artcard .ac-alt:hover{
  background:transparent;
  color:var(--ac-ink);
  border-color:var(--ac-ink);
}
.artcard .ac-alt{border-radius:999px;width:100%}

/* Quiet text buttons and links. */
.artcard .ac-back,
.artcard .ac-more{
  background:none;border:0;color:var(--ac-soft);
  display:flex;align-items:center;gap:8px;padding:8px 0;
}
.artcard .ac-back:hover,
.artcard .ac-more:hover{color:var(--ac-ink);background:none}
.artcard .ac-more{justify-content:center;margin:46px auto 0}
.artcard .ac-cap a,
.artcard .ac-cap a:hover,
.artcard .ac-cap a:visited{color:var(--ac-soft);text-decoration:underline;text-underline-offset:2px}
.artcard .ac-cap a:hover{color:var(--ac-ink)}

/* Rows and stacks, restated so a stray theme margin cannot shift them. */
.artcard .ac-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.artcard .ac-act{display:grid;gap:10px;margin-top:6px}
.artcard.ac-wide .ac-act{grid-template-columns:1fr 1fr}
.artcard .ac-act > button{margin:0;width:100%}
.artcard .ac-rooms{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 30px}
.artcard .ac-desk{display:grid;gap:20px;align-content:start}
.artcard .ac-stage{margin-bottom:30px}
.artcard .ac-cap{margin:12px 0 0}
.artcard p{margin-top:0}

/* ---------------------------------------------------------------------------
   Filled buttons, nailed down.
   Block themes emit their own button colours from theme.json, and those rules
   can outrank anything written here by ordinary means. On a filled button that
   is not cosmetic: black text on a black background is an unreadable button.
   This is the one place !important is warranted, and it is kept to the two
   properties that actually decide legibility.
   --------------------------------------------------------------------------- */

.artcard .ac-go,
.artcard .ac-go:hover,
.artcard .ac-go:focus,
.artcard .ac-go:active,
.artcard .ac-go:focus-visible,
.artcard .ac-chip[aria-pressed="true"],
.artcard .ac-chip[aria-pressed="true"]:hover,
.artcard .ac-chip[aria-pressed="true"]:focus,
.artcard .ac-room[aria-pressed="true"],
.artcard .ac-room[aria-pressed="true"]:hover,
.artcard .ac-room[aria-pressed="true"]:focus,
.artcard .ac-icon[aria-pressed="true"],
.artcard .ac-icon[aria-pressed="true"]:hover,
.artcard .ac-icon[aria-pressed="true"]:focus,
.artcard .ac-rail button[aria-current="true"],
.artcard .ac-rail button[aria-current="true"]:hover,
.artcard .ac-rail button[aria-current="true"]:focus{
  background-color: var(--ac-ink) !important;
  color: var(--ac-paper) !important;
}

/* Labels and icons sit inside the button, so they need saying too. */
.artcard .ac-go *,
.artcard .ac-go:hover *,
.artcard .ac-go:focus *,
.artcard .ac-go:active *,
.artcard .ac-chip[aria-pressed="true"] *,
.artcard .ac-room[aria-pressed="true"] *,
.artcard .ac-icon[aria-pressed="true"] *,
.artcard .ac-rail button[aria-current="true"] *{
  color: var(--ac-paper) !important;
}
.artcard .ac-go svg,
.artcard .ac-icon svg,
.artcard .ac-rail button svg{
  stroke: currentColor;
}
.artcard .ac-go:hover{background-color:#000 !important}

/* ---------------------------------------------------------------------------
   The step icons.
   The reset above sets border-radius:0 on every button, which quietly undoes
   the round shape declared earlier. Restated here, after it, along with a
   darker idle colour: at --ac-soft on white they were almost invisible.
   --------------------------------------------------------------------------- */
.artcard .ac-rail{display:flex;gap:6px;align-items:center}
.artcard .ac-rail button{
  width:36px;height:36px;padding:0;
  border-radius:50%;
  display:grid;place-items:center;
  color:#5f5f58;
  border:1px solid transparent;
}
.artcard .ac-rail button:not(:disabled):hover{color:var(--ac-ink);border-color:var(--ac-hair)}
.artcard .ac-rail button:disabled{opacity:.35;cursor:default}
.artcard .ac-rail button[aria-current="true"]{border-color:var(--ac-ink)}

/* With the wordmark hidden the row holds only the steps, so keep them right. */
.artcard.ac-nobrand .ac-top{justify-content:flex-end}
.artcard.ac-nobrand .ac-mark{display:none}

/* ---------------------------------------------------------------------------
   Focus on the heading.
   Each step moves focus to its heading so screen readers and keyboard users
   land somewhere sensible. The browser then paints the focus ring, even though
   nobody pressed a key to get there. A heading is not interactive, so the ring
   is noise: removed here only, and nowhere that can actually be operated.
   --------------------------------------------------------------------------- */
.artcard .ac-h:focus,
.artcard .ac-h:focus-visible{outline:none}

/* Back rides on the heading line. It is navigation, and it does not belong
   below the button that finishes the card. */
.artcard .ac-h .ac-back{
  margin-left:auto;
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  line-height:1;
  align-self:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--ac-hair);
  color:var(--ac-soft);
  gap:6px;
}
.artcard .ac-h .ac-back:hover{color:var(--ac-ink);border-color:var(--ac-ink)}
.artcard .ac-h .ac-back + .ac-step{margin-left:0;padding-left:.9em}

/* ---------------------------------------------------------------------------
   The writing field.
   A bare underline reads as decoration next to a row of pill buttons, so the
   one thing the visitor is actually here to do looked like the least important
   thing on the page. Given a labelled box it stops being a guess.
   --------------------------------------------------------------------------- */
.artcard .ac-field{display:block}
.artcard .ac-fieldlabel{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--ac-soft);margin:0 0 8px;
}
.artcard .ac-field textarea{
  width:100%;
  border:1px solid var(--ac-hair);
  border-radius:12px;
  background:#fdfdfc;
  padding:15px 16px;
  min-height:150px;
  font:400 18px/1.5 inherit;
  color:var(--ac-ink);
  resize:vertical;
}
.artcard .ac-field textarea::placeholder{color:#b9b9b1}
.artcard .ac-field textarea:focus{
  outline:none;
  border-color:var(--ac-ink);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

/* ---------------------------------------------------------------------------
   Space above the tool.
   With the wordmark switched off the row it lived in was still there, empty,
   pushing everything down by its own height plus its margin.
   --------------------------------------------------------------------------- */
.artcard .ac-top{margin-bottom:26px}
.artcard.ac-nobrand .ac-top{display:none}
.artcard.ac-nobrand{padding-top:0}
.artcard.ac-nobrand.ac-wide{padding-top:0}
.artcard.ac-nobrand .ac-h{margin-top:0}