/* Workshop composition. Shared Aspen primitives supply the controls; this layer
   gives creation, project navigation and the running game their own space. */
.workshop-page {
  /* style.css sets --paper to #212121 for game pages; Workshop uses the product canvas so its #202020 panels, sidebar and bar read as separate surfaces. */
  --ap-color-page: #181818;
  --ws-bg: var(--ap-color-page);
  --ws-surface: var(--ap-color-inset);
  --ws-raised: var(--ap-surface-raised);
  --ws-ink: var(--ap-color-text);
  --ws-muted: var(--ap-color-muted);
  --ws-quiet: var(--ap-color-soft);
  --ws-accent: var(--ap-color-action);
  --ws-mono: var(--ap-font-mono);
  --ws-sidebar-width: 224px;
  --ws-header-height: 54px;
  /* The tactile graphite recipe of the game cards and keys (game-collection.css; Workshop does not load it). */
  --ws-plate: #242424; /* = --card-plate */
  --ws-plate-hover: #2a2a2a; /* = --home-control-hover */
  --ws-plate-shadow: inset 0 1px 0 #ffffff14, var(--ap-shadow-raised); /* = --card-plate-shadow: a 1px top bevel over the compact graphite lift */
  --ws-plate-press: inset 0 1px 0 #ffffff0d, inset 0 -1px 2px #00000038, 0 1px 2px #00000055; /* = --card-plate-press */
  --ws-key-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 2px #00000038, 0 1px 2px #00000066, 0 3px 7px #00000040; /* the light key: a crisp top bevel */
  --ws-key-press: inset 0 1px 0 #ffffff80, inset 0 -1px 2px #00000038, 0 1px 2px #00000055;
  --ws-well: #1a1a1a; /* an inset track */
  --ws-well-shadow: inset 0 1px 0 #000000b3, inset 0 2px 5px #00000059, inset 0 -1px 0 #ffffff0f, 0 1px 0 #ffffff08; /* = --card-well-shadow */
  --ws-console: #141414; /* the Agent console, a step below the #181818 page */
  overflow-x: hidden;
  background: var(--ws-bg);
  font-family: var(--ap-font-sans);
  font-synthesis: none;
}
.workshop-page :is(#workshop,.ws-dialog,.ws-toast) { font-family: var(--ap-font-sans); }
.workshop-page .workshop-shell,
.workshop-page.is-editing .workshop-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}
.workshop-page [hidden] { display: none !important; }
.workshop-page :is(.ws-button,.ws-icon-button,.ws-text-button,.ap-button) {
  border: 0;
  box-shadow: none;
  font-size: 14px;
  transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback), transform var(--ap-duration-press);
}
.workshop-page .ws-button { min-height: 40px; padding-inline: 14px; border-radius: var(--ap-radius-control); background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-button:hover { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-button.ws-primary { background: var(--ws-accent); color: var(--ap-color-on-action); }
.workshop-page .ws-button.ws-primary:hover { background: var(--ws-ink); }
.workshop-page .ws-button.ws-quiet { background: transparent; color: var(--ws-muted); }
.workshop-page .ws-button.ws-quiet:hover { background: var(--ws-raised); color: var(--ws-ink); }
.workshop-page .ws-icon-button { width: 36px; height: 36px; border-radius: var(--ap-radius-control); color: var(--ws-muted); }
.workshop-page .ws-icon-button:hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-icon-button[aria-pressed=true] { color: var(--ws-ink); background: var(--ap-button-secondary-hover); }
.workshop-page .ws-text-button { color: var(--ws-muted); }
.workshop-page :is(#workshop,.ws-dialog) :is(button,a,input,textarea,select,summary):focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
.workshop-page :is(#workshop,.ws-dialog) button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.workshop-page :is(.ws-button,.ws-icon-button,.ap-button):not(:disabled):active { transform: translateY(1px); }
.workshop-page :is(.ws-home-sidebar,.ws-agent-body,.ws-files,.ws-changes-panel) { scrollbar-width: none; }
.workshop-page :is(.ws-home-sidebar,.ws-agent-body,.ws-files,.ws-changes-panel)::-webkit-scrollbar { display: none; }

/* Workshop's bar is the site's top bar (site-header.css @site-chrome), and on phones its tab bar the site's tab bar (none
   in the editor): the same on every page and every width. The project crumb stays in the DOM for page.js but is not drawn. */
.workshop-page .ws-header-context { display: none; }
/* 游戏 and 社区 are already in the tab bar on a phone's home; the phone editor (no tab bar) keeps both links. */
.workshop-page.has-site-nav:not(.is-editing) :is(#workshop-home-link,#workshop-community-link) { display: none; }
/* Above phone width the workspace navigation is the panel's context section (site-header.js moves it there), so the
   home and the editor are one column beside it, below the site's bar. */
@media (min-width: 761px) and (min-height: 501px), (min-width: 1001px) {
  body.workshop-page.has-site-nav #workshop { display: grid; grid-template-columns: minmax(0,1fr); }
  body.workshop-page.is-editing.has-site-nav #workshop-editor { padding-top: 6px; }
}

/* Personal workspace navigation. */
.workshop-page #workshop { display: grid; grid-template-columns: var(--ws-sidebar-width) minmax(0,1fr); flex: 1; min-width: 0; min-height: 0; padding: 0; }
.workshop-page .ws-home-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 24px;
  height: calc(100dvh - var(--ws-header-height) - var(--site-tabbar-offset, 0px)); /* landscape phones 901–1000px keep this column above the tab bar */
  min-width: 0;
  padding: 24px 14px 16px;
  overflow: auto;
  border: 0;
  background: var(--ws-surface);
}
.workshop-page .ws-sidebar-title { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; color: var(--ws-ink); font-size: 14px; font-weight: 450; letter-spacing: -.025em; }
.workshop-page .ws-workspace-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px; background: var(--ap-button-secondary-hover); color: var(--ws-ink); font-size: 18px; font-weight: 500; }
.workshop-page .ws-home-sidebar > .ws-button { justify-content: flex-start; min-height: 44px; margin: -7px 0 0; padding-inline: 13px; background: var(--ap-color-control); color: var(--ws-ink); font-size: 14px; font-weight: 450; }
.workshop-page .ws-home-sidebar > .ws-button:hover { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-sidebar-nav { display: flex; flex-direction: column; gap: 4px; margin: -8px 0 0; }
.workshop-page .ws-sidebar-nav > :is(button,a) { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 0; border-radius: var(--ap-radius-control); background: transparent; color: var(--ws-muted); font-size: 14px; line-height: 1.5; text-decoration: none; transition: background-color var(--ap-duration-feedback),color var(--ap-duration-feedback); }
.workshop-page .ws-sidebar-nav > button > span[data-icon] { display: block; }
.workshop-page .ws-sidebar-nav > button[aria-current=page] { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-sidebar-nav > :is(button,a):hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-sidebar-nav svg { width: 18px; height: 18px; }
.workshop-page .ws-sidebar-nav > .ws-origin-link { margin-top: 4px; min-height: 60px; }
.workshop-page .ws-origin-link > [data-icon] { display: flex; flex: none; }
.workshop-page .ws-origin-label { display: grid; gap: 2px; }
.workshop-page .ws-origin-label small { color: var(--ws-quiet); font-size: 14px; }
.workshop-page .ws-sidebar-recents { padding: 0; border: 0; }
.workshop-page .ws-sidebar-recents > span { margin: 4px 12px 12px; color: var(--ws-quiet); font-size: 14px; }
.workshop-page #recent-projects > button { min-height: 48px; gap: 10px; padding: 8px 10px; border-radius: var(--ap-radius-control); font-size: 14px; }
.workshop-page #recent-projects > button[aria-current=page] { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page #recent-projects > p { margin: 0; padding-inline: 12px; color: var(--ws-quiet); font-size: 14px; line-height: 1.65; }
.workshop-page .ws-sidebar-footer { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: auto; padding: 12px; color: var(--ws-muted); font-size: 14px; text-decoration: none; }
.workshop-page a.ws-sidebar-footer:hover { color: var(--ws-ink); }
.workshop-page .ws-sidebar-footer svg { width: 16px; height: 16px; margin: 0; }
.workshop-page .ws-home-content { min-width: 0; min-height: 0; }
.workshop-page .ws-cloud-status { align-items: center; justify-content: flex-end; flex: none; gap: 8px; min-height: 40px; padding: 4px 24px; color: var(--ws-quiet); font-size: 14px; line-height: 1.45; }
.workshop-page .ws-cloud-status .ap-button { min-height: 32px; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.workshop-page .ws-cloud-status[data-state=error] { color: var(--ap-color-error); }

/* Creation and playable starting points share the home canvas. */
.workshop-page #workshop-home { width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(36px,6vh,68px) clamp(28px,5vw,72px) 48px; }
.workshop-page .ws-home-main { width: 100%; max-width: none; min-width: 0; padding: 0; }
.workshop-page #workshop-home[data-view=projects] { padding-top: 32px; }
.workshop-page.is-browsing-design .workshop-shell { height: 100dvh; min-height: 0; overflow: hidden; }
.workshop-page.is-browsing-design .ws-home-sidebar { align-self: stretch; height: auto; min-height: 0; }
.workshop-page.is-browsing-design .ws-cloud-status { display: none; }
.workshop-page.is-browsing-design .ws-home-content { min-height: 0; overflow: hidden; }
.workshop-page #workshop-home[data-view=design] { height: 100%; max-width: none; padding: 0; }
.workshop-page #workshop-home[data-view=design] .ws-home-main { height: 100%; }
.workshop-page .ws-design-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.workshop-page .ws-design-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; min-height: 64px; padding: 10px 24px; background: var(--ap-color-inset); }
.workshop-page .ws-design-toolbar h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
.workshop-page .ws-design-toolbar h2 span { color: var(--ap-color-muted); font-size: 14px; font-weight: 400; }
.workshop-page .ws-design-toolbar h2:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 4px; }
.workshop-page #close-design { min-height: 44px; flex: none; font-size: 14px; }
.workshop-page .ws-design-stage { position: relative; flex: 1; min-height: 0; background: var(--ap-color-page); }
.workshop-page #design-frame-mount { height: 100%; }
.workshop-page #design-frame-mount iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ap-color-page); }
.workshop-page .ws-design-feedback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: var(--ap-color-page); color: var(--ap-color-muted); font-size: 14px; line-height: 1.6; text-align: center; }
.workshop-page .ws-design-feedback p { margin: 0; }
.workshop-page .ws-prompt-composer { border: 0; background: var(--ap-surface-input); box-shadow: none; transition: background-color var(--ap-duration-feedback),outline-color var(--ap-duration-feedback); }
.workshop-page .ws-prompt-composer:focus-within { outline: 2px solid var(--ws-accent); outline-offset: 3px; background: var(--ap-surface-input-focus); box-shadow: none; }
.workshop-page .ws-prompt-composer[aria-busy=true] { background: var(--ap-color-control); }
.workshop-page .ws-prompt-composer textarea { display: block; width: 100%; resize: none; field-sizing: content; border: 0; background: transparent; color: var(--ws-ink); caret-color: var(--ws-ink); font-family: var(--ap-font-sans); scrollbar-width: thin; scrollbar-color: var(--ws-quiet) transparent; }
.workshop-page .ws-prompt-composer textarea::placeholder { color: var(--ws-muted); opacity: 1; }
.workshop-page .ws-prompt-composer textarea::selection { color: var(--ws-ink); background: var(--ap-voice-tone-2); }
.workshop-page .ws-prompt-label { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 17px; color: var(--ws-muted); font-size: 14px; line-height: 1.5; cursor: text; }
.workshop-page .ws-prompt-label > span[data-icon] { display: grid; place-items: center; }
.workshop-page .ws-prompt-label svg { width: 16px; height: 16px; }
/* One flat writing surface: the field, then its footer — Add images on the left, the credits line and Start creating
   on the right. A hairline frames it and focus brightens the frame; nothing is nested or bevelled. */
.workshop-page .ws-start-composer {
  margin: 28px 0 16px;
  padding: 0;
  border-radius: 20px;
  background: var(--ap-surface-raised);
  box-shadow: inset 0 0 0 1px var(--ap-color-line);
  text-align: left;
  transition: box-shadow var(--ap-duration-feedback), background-color var(--ap-duration-feedback);
}
.workshop-page .ws-start-composer:focus-within {
  outline: none;
  background: var(--ap-surface-raised);
  box-shadow: inset 0 0 0 1px var(--ap-color-muted);
}
.workshop-page .ws-start-writing { padding: 22px 24px 4px; }
.workshop-page .ws-start-composer textarea { min-height: 120px; max-height: 300px; padding: 0; font-size: 16px; line-height: 1.6; letter-spacing: 0; }
.workshop-page .ws-start-composer textarea::placeholder { color: var(--ws-muted); }
.workshop-page #workshop .ws-start-composer textarea:focus-visible { outline: 0; } /* the frame shows focus */
.workshop-page .ws-start-composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 12px 12px; border: 0; }
.workshop-page .ws-start-composer .ws-image-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ws-muted);
  font: 400 14px/1.4 var(--ap-font-sans);
  white-space: nowrap;
}
.workshop-page .ws-start-composer .ws-image-add > span[data-icon] { display: flex; }
.workshop-page .ws-start-composer .ws-image-add svg { width: 18px; height: 18px; }
.workshop-page .ws-start-composer .ws-image-add:not(:disabled):hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-start-composer-tools > :is(.ws-button,.ap-button) { flex: none; gap: 8px; min-height: 40px; padding: 0 14px 0 18px; border: 0; border-radius: 12px; background: var(--ws-accent); color: var(--ap-color-on-action); font: 500 15px/1 var(--ap-font-sans); }
.workshop-page .ws-start-composer-tools > :is(.ws-button,.ap-button):not(:disabled):hover { background: var(--ws-ink); }
.workshop-page .ws-start-composer #create-project:disabled { opacity: 1; background: var(--ap-button-secondary-hover); color: var(--ws-muted); }
.workshop-page .ws-create-arrow { display: flex; }
.workshop-page .ws-create-arrow svg { width: 16px; height: 16px; rotate: 90deg; transition: translate var(--ap-duration-feedback) var(--ap-ease-enter); }
.workshop-page #create-project:not(:disabled):hover .ws-create-arrow svg { translate: 2px 0; }
/* Dropping images covers the whole composer. */
.workshop-page .ws-start-drop { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 12px; padding: 24px; border-radius: 20px; outline: 1px dashed var(--ws-muted); outline-offset: -8px; background: var(--ap-surface-input-focus); color: var(--ws-ink); font-size: 16px; pointer-events: none; }
.workshop-page .ws-start-drop > span[data-icon] { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--ap-button-secondary-hover); }
.workshop-page .ws-start-drop svg { width: 22px; height: 22px; }
.workshop-page .ws-start-composer.ws-prompt-composer[data-image-dragging=true] { outline: none; box-shadow: inset 0 0 0 1px var(--ap-color-text); }
.workshop-page .ws-start-composer[data-image-dragging=true] .ws-start-drop { display: flex; }
.workshop-page .ws-start-composer > .ws-prompt-image-status { margin: 0; padding: 0 24px 14px; }
@media (max-width: 360px) {
 .workshop-page .ws-start-composer .ws-image-add { width: 44px; padding: 0; }
 .workshop-page .ws-start-composer .ws-image-add > [data-copy] { display: none; }
}
@media (forced-colors: active) {
 .workshop-page .ws-start-composer { outline: 1px solid CanvasText; }
 .workshop-page .ws-start-composer:focus-within { outline: 2px solid Highlight; }
 .workshop-page .ws-start-composer #create-project:disabled { color: GrayText; }
}
.workshop-page .ws-game-preview-dialog { width: min(960px,calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; overflow: auto; border-radius: 20px; }
.workshop-page .ws-game-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; }
.workshop-page .ws-game-preview-heading h2 { font-size: 20px; }
.workshop-page .ws-game-preview-heading p { margin: 4px 0 0; color: var(--ws-muted); font-size: 14px; line-height: 1.5; }
.workshop-page .ws-template-preview-mount { height: min(62dvh,620px); min-height: 280px; background: var(--ap-color-page); }
.workshop-page .ws-template-preview-mount iframe { display: block; width: 100%; height: 100%; border: 0; }
.workshop-page .ws-game-preview-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; }
.workshop-page .ws-game-preview-footer p { margin: 0; color: var(--ws-muted); font-size: 14px; line-height: 1.5; }
.workshop-page #remix-preview-game { flex-shrink: 0; }
.workshop-page .ws-library-toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 12px; padding: 0; border: 0; }
.workshop-page .ws-library-toolbar h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ws-ink); font-size: 17px; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }
.workshop-page :is(#project-count,#checkpoint-count) { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--ap-color-control); color: var(--ws-muted); font-size: 12px; }
.workshop-page .ws-library-actions { display: flex; flex: initial; align-items: center; gap: 8px; }
.workshop-page .ws-search { width: 192px; min-height: 40px; gap: 8px; padding-inline: 10px; border-radius: var(--ap-radius-control); background: var(--ws-surface); }
.workshop-page .ws-search input { min-height: 40px; padding: 7px 0; color: var(--ws-ink); font-size: 14px; }
.workshop-page .ws-search input::placeholder { color: var(--ws-quiet); }
.workshop-page .ws-search:focus-within { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
.workshop-page .ws-search input:focus-visible { outline: 0; }
.workshop-page .ws-library-actions > .ws-icon-button { width: 40px; height: 40px; }
.workshop-page .ws-project-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 22px; }
.workshop-page .ws-project-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-width: 0; min-height: 0; padding: 0; gap: 14px 10px; border: 0; border-radius: var(--ap-radius-card); background: transparent; }
.workshop-page #projects-panel .ws-library-toolbar { margin-bottom: 24px; }
.workshop-page #projects-title { font-size: 28px; letter-spacing: -.04em; }
.workshop-page #project-count { display: inline-grid; place-items: center; height: 26px; min-width: 26px; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.workshop-page #projects-panel .ws-search { width: 220px; min-height: 44px; background: var(--ap-color-inset); }
.workshop-page #projects-panel .ws-search input { min-height: 44px; }
.workshop-page #workshop #projects-panel .ws-search input:focus-visible { outline: 0; }
.workshop-page #projects-panel .ws-library-actions > .ws-icon-button { width: 44px; height: 44px; }
.workshop-page #projects-create { min-height: 44px; padding-inline: 14px; white-space: nowrap; }
.workshop-page .ws-project-filters-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.workshop-page #project-filters { gap: 4px; }
.workshop-page #project-filters > button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.workshop-page .ws-filter-count { color: var(--ap-color-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.workshop-page .ws-project-order { flex: none; color: var(--ap-color-soft); font-size: 14px; }
.workshop-page .ws-project-cover { position: relative; grid-column: 1/-1; display: grid; grid-template: minmax(0,1fr)/minmax(0,1fr); place-items: center; aspect-ratio: 16/10; min-width: 0; overflow: hidden; border-radius: var(--ap-radius-card); background: var(--ap-color-control); transition: background-color var(--ap-duration-feedback); }
.workshop-page .ws-project-art { grid-area: 1/1; width: auto; max-width: none; height: calc(90% * var(--game-art-scale,1)); object-fit: contain; transform: translate(var(--game-art-x,0%),var(--game-art-y,0%)); transition: transform var(--ap-duration-enter) var(--ap-ease-enter); }
.workshop-page .ws-project-cover > .ws-project-cover-fallback { grid-area: 1/1; }
.workshop-page .ws-project-art[data-screen] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; filter: var(--ws-screen-lift); }
.workshop-page .ws-project-row:is(:hover,:focus-within) .ws-project-cover { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-project-row:is(:hover,:focus-within) .ws-project-art { transform: translate(var(--game-art-x,0%),var(--game-art-y,0%)) scale(1.035); }
.workshop-page .ws-project-row:is(:hover,:focus-within) .ws-project-art[data-screen] { transform: scale(1.03); }
.workshop-page .ws-project-row:is(:hover,:focus-within) .ws-project-cover-fallback { color: var(--ws-muted); }
.workshop-page .ws-project-row > .ws-project-open { display: inline-flex; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 6px; gap: 5px; border-radius: var(--ap-radius-control); background: transparent; color: var(--ap-color-muted); font-size: 14px; }
.workshop-page .ws-project-open::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--ap-radius-card); cursor: pointer; }
.workshop-page .ws-project-open svg { width: 16px; height: 16px; transform: rotate(45deg); }
.workshop-page #workshop .ws-project-open:focus-visible { outline: 0; }
.workshop-page .ws-project-open:focus-visible::after { outline: 2px solid var(--ap-color-action); outline-offset: 5px; }
.workshop-page .ws-project-row:is(:hover,:focus-within) .ws-project-open { color: var(--ap-color-text); }
.workshop-page .ws-project-list > .ws-empty { grid-column: 1/-1; margin: 0; padding: 56px 20px 24px; border: 0; color: var(--ap-color-muted); text-align: center; font-size: 14px; }
.workshop-page #clear-project-filters { display: flex; margin: 0 auto 36px; min-height: 44px; }
.workshop-page .ws-project-thumb { width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--ap-color-control); }
.workshop-page .ws-project-thumb svg { width: 22px; height: 22px; color: var(--ws-muted); }
.workshop-page .ws-project-summary h3 { margin-bottom: 4px; color: var(--ws-ink); font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.workshop-page .ws-project-summary p { color: var(--ap-color-muted); font-size: 14px; }
.workshop-page .ws-project-empty { align-items: flex-start; min-height: 152px; padding: 26px; border: 0; border-radius: var(--ap-radius-card); background: var(--ws-surface); text-align: left; }
.workshop-page .ws-project-empty > span { display: none; }
.workshop-page .ws-project-empty h2 { margin: 0 0 8px; color: var(--ws-ink); font-size: 16px; font-weight: 450; letter-spacing: -.015em; }
.workshop-page .ws-project-empty p { max-width: 550px; margin: 0; color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-project-empty > .ws-button { margin-top: 18px; }
.workshop-page .ws-library-note { display: none; } /* the projects header already says where projects are kept (guests) — one notice, not two */
.workshop-page .ws-library-note svg { width: 16px; height: 16px; margin-top: 3px; }

/* The workspace rail stays available while editing or browsing references. */
.workshop-page.is-editing { height: 100dvh; overflow: hidden; }
.workshop-page.is-editing .workshop-shell { height: 100dvh; }
.workshop-page.is-editing #workshop { display: grid; grid-template-columns: var(--ws-sidebar-width) minmax(0,1fr); }
.workshop-page.is-editing .ws-home-sidebar { align-self: stretch; height: auto; min-height: 0; }
.workshop-page.is-editing .ws-home-content { display: flex; flex: 1; flex-direction: column; overflow: hidden; }
.workshop-page.is-editing .ws-cloud-status { min-height: 32px; padding: 2px 18px; }
.workshop-page.is-editing .ws-cloud-status:has(#studio-sync-retry[hidden]) { display: none; }
.workshop-page.is-editing #workshop-editor { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; padding: 0 10px 10px; }
.workshop-page .ws-project-toolbar { position: relative; z-index: 4; flex-wrap: nowrap; gap: 10px; min-height: 56px; padding: 5px 6px; }
.workshop-page .ws-project-toolbar > .ws-icon-button { width: 36px; height: 40px; }
.workshop-page .ws-project-breadcrumb,
.workshop-page .ws-breadcrumb-slash { display: none; }
.workshop-page .ws-project-name { flex: 1; min-width: 0; }
.workshop-page .ws-project-name input { min-height: 23px; font-size: 15px; font-weight: 500; }
.workshop-page .ws-project-name > span { min-height: 20px; margin: 0; color: var(--ws-quiet); font-size: 14px; line-height: 1.4; }
.workshop-page .ws-project-name > span[data-error=true] { color: var(--ap-color-error); font-weight: 400; }
.workshop-page .ws-project-actions { display: flex; align-items: center; flex: none; gap: 6px; }
.workshop-page .ws-project-more { position: relative; flex: none; }
.workshop-page .ws-project-more > summary { list-style: none; }
.workshop-page .ws-project-more > summary::-webkit-details-marker { display: none; }
/* Editor actions: one primary key (Publish), two graphite keys (Run, Share) and a ghost overflow, on one 36px line with
   one radius, 16px icons and 14px labels. Hover 180ms; a press sets the key down 1px in 70ms. */
.workshop-page #workshop .ws-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: var(--ap-radius-control); font: 500 14px/1 var(--ap-font-sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--ap-duration-feedback) var(--ap-ease-feedback), color var(--ap-duration-feedback) var(--ap-ease-feedback), box-shadow var(--ap-duration-feedback) var(--ap-ease-feedback), transform var(--ap-duration-feedback) var(--ap-ease-feedback); }
.workshop-page #workshop .ws-action svg { display: block; flex: none; width: 16px; height: 16px; }
.workshop-page #workshop .ws-action[data-emphasis=primary] { background: var(--ap-color-action); color: var(--ap-color-on-action); box-shadow: var(--ws-key-shadow); }
.workshop-page #workshop .ws-action[data-emphasis=secondary] { background: var(--ws-plate); color: var(--ws-ink); box-shadow: var(--ws-plate-shadow); }
.workshop-page #workshop .ws-action[data-emphasis=ghost] { width: 36px; padding: 0; background: transparent; color: var(--ws-muted); box-shadow: none; }
.workshop-page #workshop .ws-project-more[open] > .ws-action[data-emphasis=ghost] { background: var(--ws-plate); color: var(--ws-ink); }
@media (hover: hover) {
  .workshop-page #workshop .ws-action[data-emphasis=primary]:not(:disabled):hover { background: var(--ap-color-text); }
  .workshop-page #workshop .ws-action[data-emphasis=secondary]:not(:disabled):hover { background: var(--ws-plate-hover); }
  .workshop-page #workshop .ws-action[data-emphasis=ghost]:hover { background: var(--ws-plate); color: var(--ws-ink); }
}
.workshop-page #workshop .ws-action:not(:disabled):active { transform: translateY(1px); transition-duration: var(--ap-duration-press); }
.workshop-page #workshop .ws-action[data-emphasis=primary]:not(:disabled):active { box-shadow: var(--ws-key-press); }
.workshop-page #workshop .ws-action[data-emphasis=secondary]:not(:disabled):active { box-shadow: var(--ws-plate-press); }
.workshop-page #workshop .ws-action[data-emphasis=ghost]:active { background: var(--ap-button-secondary-hover); color: var(--ws-ink); }
.workshop-page #workshop .ws-action:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }
.workshop-page #workshop .ws-action:disabled { opacity: 1; background: var(--ws-surface); color: var(--ws-quiet); box-shadow: none; cursor: not-allowed; transform: none; } /* still a key's shape, clearly not ready */
.workshop-page #workshop .ws-action[aria-busy=true] { cursor: progress; }
.workshop-page .ws-project-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: 212px; padding: 6px; border: 1px solid var(--ap-color-line); border-radius: 12px; background: var(--ap-surface-raised); box-shadow: 0 4px 12px #0004; }
.workshop-page .ws-project-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ws-ink); font: 400 14px/1.5 var(--ap-font-sans); text-align: left; }
.workshop-page .ws-project-menu > button:hover { background: var(--ap-color-control); }
.workshop-page .ws-project-menu svg { color: var(--ws-muted); }
.workshop-page .ws-workbench { display: grid; grid-template-columns: minmax(300px,var(--agent-width,340px)) 6px minmax(0,1fr); flex: 1; height: auto; min-height: 0; border: 0; border-radius: 12px; background: var(--ws-bg); }
.workshop-page .ws-workbench[data-expanded=true] { grid-template-columns: minmax(0,1fr); }
.workshop-page .ws-pane-divider { width: 6px; border: 0; background: var(--ws-bg); }
.workshop-page .ws-pane-divider::after { left: 2px; width: 2px; height: 28px; top: calc(50% - 14px); background: var(--ap-color-control); }
.workshop-page .ws-pane-divider:hover,
.workshop-page .ws-pane-divider:focus-visible { background: var(--ap-color-control); }
.workshop-page .ws-pane-divider:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: -2px; }
.workshop-page .ws-agent-panel { position: relative; isolation: isolate; grid-template-rows: 48px minmax(0,1fr) auto auto; overflow: clip; border-radius: 12px; background: var(--ws-console); box-shadow: inset 0 1px 0 #ffffff0a, inset 0 0 0 1px #ffffff06; }
/* The console's field: the design system's low-contrast 16px dots, strongest around the conversation and gone at the
   edges and behind the composer (the mask). Dots and mask are the only gradients; the panel's fill stays solid. */
.workshop-page .ws-agent-panel::before { content: ''; position: absolute; inset: -16px; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, #ffffff33 .85px, transparent 1.35px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse 78% 46% at 50% 34%, #000 0%, #0009 48%, transparent 82%); mask-image: radial-gradient(ellipse 78% 46% at 50% 34%, #000 0%, #0009 48%, transparent 82%); opacity: .9; transition: opacity var(--ap-duration-enter) var(--ap-ease-feedback); animation: ws-console-drift 28s ease-in-out infinite alternate; }
.workshop-page .ws-agent-panel[data-ambient=paused]::before { animation-play-state: paused; }
/* With a conversation the field quiets, so every line of text stays crisp over it. */
.workshop-page .ws-agent-panel:has(.ws-agent-intro[hidden])::before { opacity: .45; }
.workshop-page .ws-agent-panel > * { position: relative; z-index: 1; }
@keyframes ws-console-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(12px,12px,0); } }
.workshop-page .ws-agent-toolbar { gap: 12px; padding: 0 20px; border: 0; color: var(--ws-ink); font-size: 14px; }
.workshop-page .ws-agent-toolbar > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ws-ink); }
/* The status light, bound to the agent (page.js data-agent-state): steady at rest, a slow pulse at work, distinct when it needs attention. */
.workshop-page .ws-agent-light { display: block; flex: none; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: #8a8a8a; transition: background-color var(--ap-duration-feedback) var(--ap-ease-feedback); }
.workshop-page .ws-agent-panel[data-agent-state=working] .ws-agent-light { background: var(--ws-ink); animation: ws-agent-pulse var(--ap-loader-slow,1800ms) ease-in-out infinite; }
.workshop-page .ws-agent-panel[data-agent-state=error] .ws-agent-light { width: 7px; height: 7px; border-radius: 2px; background: var(--ap-color-error); box-shadow: 0 0 0 2px #f0aaa42e; rotate: 45deg; } /* colour and shape: a diamond */
@keyframes ws-agent-pulse { 50% { opacity: .3; } }
.workshop-page .ws-agent-toolbar svg { width: 17px; height: 17px; }
.workshop-page .ws-plan-badge,
.workshop-page #agent-mode-label { padding: 4px 9px; border: 0; border-radius: 6px; background: var(--ap-color-control); color: var(--ws-muted); font-size: 12px; line-height: 1.4; }
.workshop-page #agent-busy-status { margin-left: auto; color: var(--ws-muted); font-size: 12px; line-height: 1.4; }
.workshop-page #agent-busy-status[data-state=error] { color: var(--ap-color-error); }
.workshop-page .ws-agent-body { padding: 24px 22px; }
.workshop-page .ws-agent-intro { padding-bottom: 30px; }
.workshop-page .ws-agent-mark { width: 40px; height: 40px; margin-bottom: 18px; border: 0; border-radius: 12px; background: var(--ws-plate); box-shadow: var(--ws-plate-shadow); color: var(--ws-ink); }
.workshop-page .ws-agent-intro h2 { margin: 0 0 12px; font-size: 23px; font-weight: 450; letter-spacing: -.04em; line-height: 1.3; }
.workshop-page .ws-agent-intro p { color: var(--ws-muted); font-size: 14px; line-height: 1.75; }
/* Requests are conversation messages, not a task checklist. */
.workshop-page .ws-request-list { gap: var(--ap-space-3); margin-bottom: var(--ap-space-6); }
.workshop-page .ws-user-message { align-self: flex-end; max-width: 92%; padding: 12px 16px; border-radius: var(--ap-radius-card) var(--ap-radius-card) 4px var(--ap-radius-card); background: var(--ap-color-control); }
.workshop-page .ws-user-message p { margin: 0; color: var(--ws-ink); font: 400 14px/1.7 var(--ap-font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.workshop-page .ws-agent-creating { justify-items: start; margin: 14px 0 0; color: var(--ws-muted); }
.workshop-page .ws-agent-creating.ap-loader { min-height: 22px; }
.workshop-page .ws-agent-creating .ap-loader-word { font-size: 14px; }
/* The composer is a raised graphite plate over the console; its mode switch an inset track; Send the one light key. */
.workshop-page .ws-request-composer.ws-prompt-composer { margin: 0 12px; padding: 16px 16px 12px; border-radius: var(--ap-radius-card); background: var(--ws-plate); box-shadow: var(--ws-plate-shadow); }
.workshop-page .ws-request-composer.ws-prompt-composer:focus-within { background: var(--ws-plate-hover); box-shadow: var(--ws-plate-shadow); }
.workshop-page .ws-request-composer.ws-prompt-composer[aria-busy=true] { background: var(--ws-plate); }
.workshop-page .ws-request-composer textarea { min-height: 80px; max-height: 180px; padding: 0; font-size: 15px; line-height: 1.7; }
.workshop-page .ws-request-tools { gap: 10px; min-height: 38px; margin-top: 12px; padding: 0; border: 0; }
.workshop-page .ws-request-modes { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ws-well); box-shadow: var(--ws-well-shadow); }
.workshop-page .ws-request-modes > button { min-height: 30px; padding: 5px 11px; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--ws-muted); font: 450 14px/1.4 var(--ap-font-sans); transition: background-color var(--ap-duration-feedback),color var(--ap-duration-feedback),box-shadow var(--ap-duration-feedback); }
.workshop-page .ws-request-modes > button[aria-pressed=true],
.workshop-page .ws-request-modes > button[aria-selected=true] { background: #2e2e2e; color: var(--ws-ink); box-shadow: inset 0 1px 0 #ffffff14, 0 1px 2px #00000066; }
.workshop-page .ws-request-modes > button:not(:disabled):hover { color: var(--ws-ink); }
.workshop-page .ws-prompt-mode { display: inline-flex; align-items: center; gap: 7px; color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-request-tools > .ws-icon-button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--ws-accent); box-shadow: var(--ws-key-shadow); color: var(--ap-color-on-action); transition: background-color var(--ap-duration-feedback),color var(--ap-duration-feedback),box-shadow var(--ap-duration-feedback),transform var(--ap-duration-feedback); }
.workshop-page .ws-request-tools > .ws-icon-button:not(:disabled):hover { background: var(--ws-ink); }
.workshop-page .ws-request-tools > .ws-icon-button:not(:disabled):active { transform: translateY(1px); box-shadow: var(--ws-key-press); transition-duration: var(--ap-duration-press); }
.workshop-page #workshop .ws-request-tools > #add-request:disabled { opacity: 1; background: var(--ws-surface); box-shadow: none; color: var(--ws-quiet); } /* quiet until there is something to send */
.workshop-page .ws-request-tools > .ws-icon-button svg { width: 18px; height: 18px; }
.workshop-page .ws-agent-notice { min-height: 0; padding: 11px 20px 14px; margin: 0; color: var(--ws-quiet); font-size: 14px; line-height: 1.55; text-align: left; }
.workshop-page #agent-status[data-state=error] { color: var(--ap-color-error); }
.workshop-page #agent-status[data-state=working] { color: var(--ws-muted); }
.workshop-page .ws-agent-feedback { min-width: 0; }
.workshop-page #retry-request { justify-self: start; min-height: 36px; margin: 0 20px 14px; padding: 7px 12px; background: var(--ap-color-control); color: var(--ws-ink); border: 0; border-radius: var(--ap-radius-control); font: 450 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-agent-log { gap: 24px; padding: 8px 0 24px; }
.workshop-page .ws-agent-turn { gap: 12px; }
.workshop-page .ws-agent-turn-time,
.workshop-page .ws-agent-step { font-size: 14px; }
.workshop-page .ws-conversation { display: grid; gap: 24px; min-width: 0; }
.workshop-page .ws-conversation-entry { display: grid; gap: 20px; min-width: 0; }
.workshop-page .ws-conversation-entry > .ws-user-message { justify-self: end; }
.workshop-page .ws-conversation-entry + .ws-conversation-entry { margin-top: 16px; }
.workshop-page .ws-agent-responses { display: grid; gap: 20px; min-width: 0; }
.workshop-page .ws-agent-history-note { margin: 0; color: var(--ap-color-soft); font: 14px/1.7 var(--ap-font-sans); }
.workshop-page .ws-agent-turn-state { margin-left: auto; }
.workshop-page .ws-agent-prose { color: var(--ws-ink); font-size: 14px; line-height: 1.75; }
.workshop-page .ws-editor-footer { display: none; }

/* Project tools. Selected tabs have a solid inset, keeping their hierarchy clear. */
.workshop-page .ws-workspace-main { overflow: clip; border-radius: 12px; background: var(--ws-surface); }
.workshop-page .ws-workspace-toolbar { min-height: 48px; gap: 12px; padding: 6px 12px; border: 0; background: var(--ws-surface); }
.workshop-page .ws-workspace-tabs { display: flex; align-self: center; gap: 4px; }
.workshop-page .ws-workspace-tabs > button { gap: 8px; min-height: 36px; padding: 7px 12px; border: 0; border-radius: var(--ap-radius-control); color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-workspace-tabs > button[aria-selected=true] { background: var(--ap-button-secondary-hover); color: var(--ws-ink); }
.workshop-page .ws-workspace-tabs > button:hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-workspace-tabs svg { width: 16px; height: 16px; }
.workshop-page .ws-preview-tools { display: flex; align-items: center; flex: none; gap: 6px; margin-left: auto; }
.workshop-page .ws-preview-tools .ws-icon-button { width: 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; color: var(--ws-muted); }
.workshop-page .ws-preview-tools .ws-icon-button:hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-preview-tools svg { width: 16px; height: 16px; }
.workshop-page .ws-device-switch { display: flex; gap: 2px; padding: 3px; border-radius: var(--ap-radius-control); background: var(--ws-bg); }
.workshop-page .ws-device-switch .ws-icon-button { width: 30px; height: 30px; }
.workshop-page .ws-device-switch .ws-icon-button[aria-pressed=true] { background: var(--ap-button-secondary-hover); color: var(--ws-ink); }
.workshop-page .ws-workbench:is([data-pane=code],[data-pane=changes]) .ws-preview-tools,
.workshop-page .ws-workspace-main:has(.ws-preview-empty:not([hidden])) .ws-preview-tools { display: none; }
.workshop-page .ws-preview-status-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.workshop-page #preview-indicator { display: inline-block; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ws-quiet); }
.workshop-page #preview-indicator[data-running=true] { background: var(--ws-accent); box-shadow: none; }
.workshop-page #preview-indicator[data-error=true] { background: var(--ap-color-error); box-shadow: none; }
.workshop-page .ws-preview-panel { flex-direction: column; }
.workshop-page .ws-preview-stage { position: relative; flex: 1; min-height: 0; padding: 0; background: var(--ws-bg); }
.workshop-page #preview-mount { border: 0; border-radius: 0; background: var(--ws-bg); }
/* Desktop previews sit in a rounded well inside the workspace panel, so the running game never meets the canvas edge-on. */
.workshop-page .ws-preview-stage:not([data-device=phone]) { padding: 0 8px 8px; background: transparent; }
.workshop-page .ws-preview-stage:not([data-device=phone]) #preview-mount { overflow: hidden; border-radius: 10px; }
.workshop-page .ws-preview-stage:not([data-device=phone]) .ws-preview-empty { inset: 0 8px 8px; border-radius: 10px; }
.workshop-page .ws-preview-stage[data-device=phone] { padding: 20px; }
.workshop-page .ws-preview-stage[data-device=phone] #preview-mount { width: min(100%,360px); border: 4px solid var(--ap-button-secondary-hover); border-radius: 22px; box-shadow: none; }
/* The creation surface owns the entire stage; no starter HUD leaks through. */
.workshop-page .ws-preview-empty { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; min-height: 0; padding: 32px; overflow: auto; background: var(--ap-color-page); color: var(--ws-ink); text-align: center; }
.workshop-page .ws-preview-emblem { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 32px; border-radius: 24px; background: var(--ap-color-control); }
.workshop-page .ws-preview-empty-icon { display: grid; place-items: center; color: var(--ap-color-muted); }
.workshop-page #preview-idle-mark svg { width: 40px; height: 40px; }
.workshop-page #preview-creating { width: 64px; height: 64px; min-height: 0; }
/* Creating your game: the 64px composing orb fills the plate's centre; its 20px twin waits for the waiting game. */
.workshop-page #preview-creating .ap-loader-visual { --loader-size: 64px; }
.workshop-page #preview-creating .ws-orb[data-orb-size="20"] { display: none; }
.workshop-page .ws-preview-empty h2 { margin: 0 0 12px; color: var(--ws-ink); font-size: clamp(24px,2.4vw,32px); font-weight: 350; line-height: 1.2; letter-spacing: -.035em; }
.workshop-page .ws-preview-empty p { max-width: 320px; margin: 0 0 28px; color: var(--ws-muted); font-size: 15px; line-height: 1.7; }
.workshop-page #preview-generation-status { display: flex; flex-direction: column; align-items: center; max-width: 360px; gap: 24px; margin-top: 0; color: var(--ws-muted); font-size: 15px; line-height: 1.7; }
.workshop-page #preview-generation-status > [data-icon] { display: none; }
.workshop-page #preview-generation-text { overflow-wrap: anywhere; }
.workshop-page #preview-generation-status[data-state=error] #preview-generation-text { color: var(--ap-color-error); }
.workshop-page #preview-open-agent { min-height: 44px; padding: 10px 18px; border-radius: var(--ap-radius-control); background: var(--ap-color-control); color: var(--ws-ink); font: 450 14px/1.5 var(--ap-font-sans); }
.workshop-page #preview-open-agent:hover { background: var(--ap-button-secondary-hover); }
.workshop-page #preview-keep-game { margin-top: 12px; min-height: 44px; color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-preview-empty > .ap-button { min-height: 44px; gap: 8px; }
.workshop-page .ws-preview-empty > .ap-button svg { width: 18px; height: 18px; }
.workshop-page .ws-preview-panel:has(.ws-preview-empty:not([hidden])) > :is(.ws-preview-toolbar,.ws-preview-status,.ws-console) { display: none; }
.workshop-page .ws-preview-status { min-height: 36px; padding: 0 16px; border: 0; color: var(--ws-muted); font-size: 12px; }
.workshop-page .ws-preview-status .ws-text-button { min-height: 36px; font-size: 14px; }
.workshop-page .ws-console { background: var(--ws-surface); }
.workshop-page .ws-console-heading { min-height: 36px; padding: 0 16px; }
.workshop-page .ws-console-heading > button:first-child,
.workshop-page .ws-console-heading .ws-text-button { min-height: 36px; color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-console-heading svg { width: 16px; height: 16px; }
.workshop-page .ws-code-workspace { grid-template-columns: 168px minmax(0,1fr); }
.workshop-page .ws-files { border: 0; background: var(--ws-surface); }
.workshop-page .ws-panel-label { min-height: 42px; color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-file-list { gap: 4px; padding: 8px; }
.workshop-page .ws-file-list > button { min-height: 38px; padding-inline: 10px; border: 0; border-radius: 8px; font-size: 14px; }
.workshop-page .ws-file-list > button[aria-selected=true] { background: var(--ap-color-control); }
.workshop-page .ws-code-toolbar { min-height: 42px; border: 0; background: var(--ws-bg); color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-file-hint { font-size: 14px; }
.workshop-page .ws-code-status { border: 0; font-size: 14px; }
.workshop-page .ws-changes-panel { padding: 28px; }
.workshop-page .ws-changes-heading h2 { color: var(--ws-ink); font-size: 24px; font-weight: 450; letter-spacing: -.035em; }
.workshop-page .ws-changes-heading p { color: var(--ws-muted); font-size: 14px; line-height: 1.6; }
.workshop-page .ws-checkpoint-row { border: 0; border-radius: 12px; background: var(--ap-color-control); }
.workshop-page .ws-checkpoint-summary :is(strong,h3) { font-size: 15px; }
.workshop-page .ws-checkpoint-summary :is(p,small) { font-size: 14px; }
.workshop-page .ws-checkpoint-row :is(button,.ws-text-button) { font-size: 14px; }
.workshop-page .ws-checkpoint-diff { border: 0; background: var(--ws-bg); }
.workshop-page .ws-empty { color: var(--ws-muted); font-size: 14px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .workshop-page { --ws-sidebar-width: 208px; }
  .workshop-page #workshop-home { padding-inline: 36px; }
  .workshop-page .ws-workbench { grid-template-columns: minmax(300px,var(--agent-width,320px)) 6px minmax(0,1fr); }
  .workshop-page .ws-workbench[data-expanded=true] { grid-template-columns: minmax(0,1fr); }
  .workshop-page .ws-agent-body { padding-inline: 20px; }
  .workshop-page .ws-workspace-toolbar { gap: 6px; padding-inline: 8px; }
  .workshop-page .ws-workspace-tabs > button { gap: 6px; padding-inline: 9px; }
  }
@media (max-width: 900px) and (min-width: 761px) {
  .workshop-page .ws-workspace-tabs > button > span[data-icon],
  .workshop-page .ws-workspace-tabs #checkpoint-count { display: none; }
  .workshop-page .ws-workspace-tabs > button { padding-inline: 8px; }
  .workshop-page .ws-code-workspace { grid-template-columns: minmax(0,1fr); grid-template-rows: 46px minmax(0,1fr); }
  .workshop-page .ws-files { flex-direction: row; }
  .workshop-page .ws-panel-label { display: none; }
  .workshop-page .ws-file-list { flex-direction: row; padding: 4px; }
}

/* Keep a usable game canvas alongside navigation on smaller laptops/tablets. */
@media (min-width: 761px) and (max-width: 1100px) {
  .workshop-page .ws-mobile-switch { display: flex; flex: none; gap: 3px; margin: 0 0 6px; padding: 4px; border: 0; border-radius: 11px; background: var(--ws-surface); }
  .workshop-page .ws-mobile-switch > button { flex: 1; min-height: 44px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ws-muted); font-size: 14px; }
  .workshop-page .ws-mobile-switch > button[aria-selected=true] { background: var(--ap-button-secondary-hover); color: var(--ws-ink); }
  .workshop-page .ws-workbench { grid-template-columns: minmax(0,1fr); }
  .workshop-page .ws-workbench > .ws-pane-divider,
  .workshop-page .ws-workbench > .ws-agent-panel { display: none; }
  .workshop-page .ws-workbench[data-pane=agent] > .ws-agent-panel { display: grid; }
  .workshop-page .ws-workbench[data-pane=agent] > .ws-workspace-main,
  .workshop-page .ws-workspace-tabs { display: none; }
}

/* Phones keep the same task order, with one editor pane at a time. */
@media (max-width: 760px) {
  .workshop-page #workshop,
  .workshop-page.is-editing #workshop { display: flex; flex-direction: column; }
  .workshop-page .ws-home-sidebar { position: static; flex: none; flex-direction: row; align-items: center; align-self: stretch; gap: 6px; height: 60px; min-height: 60px; padding: 8px 12px; overflow: visible; border: 0; }
  .workshop-page.is-editing .ws-home-sidebar { height: 60px; min-height: 60px; }
  .workshop-page .ws-sidebar-title,
  .workshop-page .ws-sidebar-recents,
  .workshop-page .ws-sidebar-footer { display: none; }
  .workshop-page .ws-home-sidebar > .ws-button { order: 2; min-height: 44px; margin: 0 0 0 auto; padding-inline: 12px; font-size: 14px; }
  .workshop-page .ws-sidebar-nav { flex-direction: row; align-items: center; gap: 3px; margin: 0; }
  .workshop-page .ws-sidebar-nav > button { width: auto; min-height: 44px; gap: 7px; padding: 9px 10px; font-size: 14px; white-space: nowrap; }
  .workshop-page .ws-sidebar-nav > button > span[data-icon] { display: none; }
  .workshop-page .ws-sidebar-nav > .ws-origin-link { justify-content: center; width: 38px; min-height: 44px; margin: 0; padding: 0; }
  .workshop-page .ws-sidebar-nav > .ws-origin-link > span[data-icon] { display: flex; }
  .workshop-page .ws-design-toolbar { min-height: 58px; gap: 8px; padding: 7px 14px; }
  .workshop-page .ws-design-toolbar h2 > span { display: none; }
  .workshop-page .ws-origin-link .ws-origin-label { display: none; }
  .workshop-page .ws-home-content { flex: 1; min-width: 0; min-height: 0; }
  .workshop-page .ws-cloud-status { justify-content: flex-start; gap: 4px 8px; min-height: 44px; padding: 4px 20px; font-size: 14px; }
  .workshop-page .ws-cloud-status .ap-button { min-height: 44px; padding-inline: 8px; font-size: 14px; }
  .workshop-page #workshop-home { padding: 30px 22px 36px; }
  .workshop-page .ws-start-composer { margin-top: 24px; border-radius: 18px; }
  .workshop-page .ws-start-writing { padding: 18px 18px 4px; }
  .workshop-page .ws-prompt-label { margin-bottom: 16px; }
  .workshop-page .ws-start-composer textarea { min-height: 96px; max-height: 240px; }
  .workshop-page .ws-start-composer-tools { gap: 8px; padding: 8px 10px 10px; }
  .workshop-page .ws-start-composer-tools > :is(.ws-button,.ap-button) { min-height: 44px; padding-inline: 16px 14px; }
  .workshop-page .ws-start-composer .ws-image-add { height: 44px; padding-inline: 10px; }
  .workshop-page .ws-start-drop { border-radius: 18px; }
  .workshop-page .ws-project-type { gap: 6px; font-size: 14px; }

  .workshop-page #start-blank { min-height: 44px; }
  .workshop-page .ws-library-toolbar { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 0; }
  .workshop-page .ws-library-toolbar h2 { font-size: 17px; }
  .workshop-page .ws-library-actions { justify-content: space-between; flex-basis: 100%; gap: 8px; }
  .workshop-page .ws-search { flex: 1; width: auto; min-height: 44px; }
  .workshop-page .ws-search input { min-height: 44px; font-size: 16px; }
  .workshop-page .ws-library-actions > .ws-icon-button { width: 44px; height: 44px; }
  .workshop-page .ws-project-empty { min-height: 140px; padding: 22px; }
  .workshop-page #projects-panel .ws-library-toolbar { gap: 18px; }
  .workshop-page #projects-panel .ws-library-actions { flex: 1 0 100%; justify-content: flex-start; }
  .workshop-page #projects-panel .ws-search { flex: 1; width: 0; min-width: 0; }
  .workshop-page #projects-panel .ws-search input { width: 100%; font-size: 16px; }
  .workshop-page #projects-create { display: none; }
  .workshop-page .ws-project-filters-bar { flex-wrap: wrap; gap: 12px; }
  .workshop-page .ws-project-order { display: none; }
  .workshop-page .ws-project-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 18px; }
  .workshop-page .ws-project-row { gap: 12px 10px; padding: 0; }
  .workshop-page.is-editing .ws-cloud-status { min-height: 32px; padding-inline: 14px; }
  .workshop-page.is-editing #workshop-editor { padding: 0 6px max(6px,env(safe-area-inset-bottom)); }
  .workshop-page .ws-project-toolbar { gap: 7px; min-height: 58px; padding: 5px 2px; }
  .workshop-page .ws-project-toolbar > .ws-icon-button { width: 38px; height: 44px; }
  .workshop-page .ws-project-name { flex: 1; min-width: 0; }
  .workshop-page .ws-project-name input { min-height: 25px; font-size: 16px; }
  .workshop-page .ws-project-name > span { font-size: 14px; }
  .workshop-page .ws-project-actions { gap: 4px; margin-left: auto; }
  .workshop-page #workshop .ws-project-actions > .ws-action,
  .workshop-page #workshop .ws-project-more > .ws-action { height: 44px; min-height: 44px; }
  .workshop-page #workshop .ws-project-more > .ws-action { width: 44px; }
  .workshop-page #workshop .ws-action svg { width: 18px; height: 18px; }
  .workshop-page .ws-mobile-switch { display: flex; flex: none; gap: 3px; margin: 0 0 6px; padding: 4px; border: 0; border-radius: 11px; background: var(--ws-surface); }
  .workshop-page .ws-mobile-switch > button { min-height: 40px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ws-muted); font-size: 14px; }
  .workshop-page .ws-mobile-switch > button[aria-selected=true] { background: var(--ap-button-secondary-hover); color: var(--ws-ink); }
  .workshop-page .ws-workbench,
  .workshop-page .ws-workbench[data-expanded=true] { display: grid; grid-template-columns: minmax(0,1fr); flex: 1; height: auto; min-height: 0; border: 0; border-radius: 10px; }
  .workshop-page .ws-workbench > .ws-pane-divider,
  .workshop-page .ws-workbench > .ws-agent-panel { display: none; }
  .workshop-page .ws-workbench[data-pane=agent] > .ws-agent-panel { display: grid; }
  .workshop-page .ws-workbench[data-pane=agent] > .ws-workspace-main { display: none; }
  .workshop-page .ws-agent-body { padding: 22px 20px; }
  .workshop-page .ws-agent-intro h2 { font-size: 24px; }
  .workshop-page .ws-request-composer { margin-inline: 10px; padding: 16px 14px 12px; }
  .workshop-page .ws-request-composer textarea { min-height: 70px; max-height: 130px; font-size: 16px; }
  .workshop-page .ws-request-tools > .ws-icon-button { width: 44px; height: 44px; }
  .workshop-page .ws-request-modes > button { min-height: 38px; }
  .workshop-page .ws-agent-notice { padding: 10px 18px 12px; font-size: 14px; }
  .workshop-page .ws-workspace-toolbar { justify-content: flex-end; min-height: 48px; padding: 2px 8px; }
  .workshop-page .ws-workspace-tabs { display: none; }
  .workshop-page .ws-workbench:is([data-pane=code],[data-pane=changes]) .ws-workspace-toolbar,
  .workshop-page .ws-workspace-main:has(.ws-preview-empty:not([hidden])) .ws-workspace-toolbar { display: none; }
  .workshop-page .ws-preview-tools { gap: 6px; }
  .workshop-page .ws-preview-tools .ws-icon-button { width: 44px; height: 44px; }
  .workshop-page .ws-device-switch { padding: 2px; }
  .workshop-page .ws-preview-stage { padding: 0; }
  .workshop-page .ws-preview-stage[data-device=phone] { padding: 8px; }
  .workshop-page .ws-preview-empty { padding: 20px; }
  .workshop-page .ws-preview-emblem { width: 80px; height: 80px; margin-bottom: 24px; border-radius: 20px; }
  .workshop-page .ws-preview-status { min-height: 36px; padding-inline: 12px; }
  .workshop-page .ws-preview-status .ws-text-button { min-height: 36px; font-size: 14px; }
  .workshop-page .ws-console-heading { min-height: 40px; padding-inline: 12px; }
  .workshop-page .ws-console-heading > button:first-child,
  .workshop-page .ws-console-heading > .ws-text-button { min-height: 40px; }
  .workshop-page .ws-code-workspace { grid-template-columns: minmax(0,1fr); grid-template-rows: 48px minmax(0,1fr); }
  .workshop-page .ws-files { flex-direction: row; }
  .workshop-page .ws-panel-label { display: none; }
  .workshop-page .ws-file-list { flex-direction: row; gap: 2px; padding: 4px; }
  .workshop-page .ws-file-list > button { flex: 1; justify-content: center; gap: 5px; min-height: 40px; padding-inline: 5px; font-size: 12px !important; }
  .workshop-page .ws-code-toolbar { min-height: 38px; padding-inline: 12px; }
  .workshop-page .ws-changes-panel { padding: 22px 16px; }
  .workshop-page .ws-changes-heading { flex-wrap: wrap; gap: 14px; }
  .workshop-page .ws-changes-heading .ws-button,
  .workshop-page .ws-checkpoint-row button { min-height: 44px; }
}
@media (max-width: 400px) {
  .workshop-page .ws-header-context { display: none; }
  .workshop-page #workshop-home { padding-inline: 18px; }
  .workshop-page .ws-home-sidebar { gap: 3px; padding-inline: 8px; }
  .workshop-page .ws-sidebar-nav { gap: 1px; }
  .workshop-page .ws-sidebar-nav > button { padding-inline: 8px; }
  .workshop-page .ws-sidebar-nav > .ws-community-link { width: 32px; padding-inline: 8px; overflow: hidden; }
  .workshop-page .ws-sidebar-nav > .ws-community-link > [data-copy] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .workshop-page .ws-sidebar-nav > .ws-origin-link { width: 32px; }
  .workshop-page .ws-home-sidebar > .ws-button { gap: 6px; padding-inline: 9px; }
  .workshop-page .ws-start-composer-tools > :is(.ws-button,.ap-button) { padding-inline: 14px 12px; }
  .workshop-page .ws-project-type svg { display: none; }
  .workshop-page .ws-project-toolbar { gap: 4px; }
  .workshop-page .ws-project-toolbar > .ws-icon-button { width: 32px; }
}
@media (max-width: 360px) {
  .workshop-page .ws-home-sidebar > .ws-button { width: 44px; flex: none; padding: 0; justify-content: center; }
  .workshop-page .ws-home-sidebar > .ws-button > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .workshop-page .ws-preview-empty { padding: 14px 18px; }
  .workshop-page .ws-agent-intro { padding-bottom: 20px; }
  .workshop-page .ws-request-composer textarea { min-height: 56px; max-height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-page :is(.ws-button,.ws-icon-button,.ap-button,.ws-prompt-composer,.ws-sidebar-nav > button,.ws-request-modes > button,.ws-project-row) { transition: none; }
  .workshop-page #workshop .ws-action { transition: none; }
  .workshop-page #workshop .ws-action:not(:disabled):active { transform: none; }
  .workshop-page .ws-agent-panel::before,
  .workshop-page .ws-agent-panel .ws-agent-light { animation: none; transition: none; }
  .workshop-page :is(.ws-button,.ws-icon-button,.ap-button):not(:disabled):active { transform: none; }
}

@media (max-width: 480px) {
  .workshop-page #workshop .ws-project-actions > :is(#run-project,#share-project,#publish-project) { width: 44px; height: 44px; padding: 0; }
  .workshop-page .ws-project-actions > :is(#run-project,#share-project,#publish-project) > [data-copy] { display: none; }
  .workshop-page .ws-project-toolbar { gap: 4px; }
  .workshop-page .ws-project-toolbar > .ws-icon-button { width: 30px; }
}

@media (max-width: 580px) {
 .workshop-page .ws-game-preview-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
 .workshop-page .ws-game-preview-heading { padding: 14px 16px; }
 .workshop-page .ws-game-preview-footer { padding: 14px 16px; gap: 12px; }
 .workshop-page .ws-game-preview-footer p { max-width: 170px; }
 .workshop-page .ws-template-preview-mount { height: 58dvh; min-height: 220px; }
}



/* References belong to the prompt; controls stay quiet until needed. */
.workshop-page .ws-prompt-input-tools{display:flex;align-items:center;gap:10px;min-width:0}
.workshop-page .ws-image-add{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--ap-radius-control);background:transparent;color:var(--ap-color-muted);transition:background-color var(--ap-duration-feedback),color var(--ap-duration-feedback)}
.workshop-page .ws-image-add:not(:disabled):hover{background:var(--ap-color-control);color:var(--ap-color-text)}
.workshop-page .ws-image-add:disabled{opacity:.4;cursor:default}
.workshop-page .ws-prompt-images{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 4px 8px;margin:-4px -4px 12px;scrollbar-width:thin;scrollbar-color:var(--ap-color-control) transparent}
.workshop-page .ws-prompt-image{position:relative;display:grid;gap:6px;flex:0 0 88px;min-width:0;margin:0}
.workshop-page .ws-prompt-image-thumb{display:block;width:88px;height:76px;border-radius:10px;object-fit:cover;background:var(--ap-color-inset)}
.workshop-page .ws-prompt-image-name{display:block;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ap-color-muted);font:14px/1.4 var(--ap-font-sans)}
.workshop-page .ws-prompt-image-remove{position:absolute;display:grid;place-items:center;top:3px;right:3px;min-width:26px;min-height:26px;padding:0;border:0;border-radius:7px;background:var(--ap-color-inset);color:var(--ap-color-text);font:18px/1 var(--ap-font-sans)}
.workshop-page .ws-prompt-image-status{margin:10px 0 0;color:var(--ap-color-muted);font:14px/1.5 var(--ap-font-sans)}
.workshop-page .ws-prompt-image-status[data-state=error]{color:var(--ap-color-error)}
.workshop-page .ws-prompt-composer[data-image-dragging=true]{outline:2px solid var(--ap-color-text);outline-offset:3px;background:var(--ap-surface-input-focus)}
.workshop-page .ws-message-images{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;max-width:100%}
.workshop-page .ws-message-image{display:block;width:84px;height:72px;overflow:hidden;padding:0;border:0;border-radius:9px;background:var(--ap-color-inset);cursor:zoom-in}
.workshop-page .ws-message-image img{display:block;width:100%;height:100%;object-fit:cover}
.workshop-page .ws-reference-dialog{width:min(920px,calc(100vw - 32px));max-width:none;padding:20px}
.workshop-page .ws-reference-dialog>img{display:block;max-width:100%;max-height:72dvh;width:auto;height:auto;margin:12px auto 0;object-fit:contain;border-radius:var(--ap-radius-control);background:var(--ap-color-inset)}
.workshop-page .ws-reference-dialog>p{margin:14px 0 0;color:var(--ap-color-muted);font:14px/1.5 var(--ap-font-sans)}
@media(max-width:760px),(pointer:coarse){.workshop-page .ws-image-add{width:44px;height:44px}.workshop-page .ws-prompt-image-remove{min-width:44px;min-height:44px}.workshop-page .ws-prompt-input-tools{gap:6px}}
@media(prefers-reduced-motion:reduce){.workshop-page .ws-image-add{transition:none}}

.ws-prompt-image[data-error="true"] { min-height: 102px; padding-top: 80px; box-sizing: border-box; }
.workshop-page .ws-request-time { justify-self: end; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); margin-bottom: -12px; }

/* Files are a secondary workspace drawer; the running game keeps its place. */
.workshop-page .ws-workspace-main { container: workspace / inline-size; }
.workshop-page .ws-workspace-content { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.workshop-page .ws-workspace-utilities { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.workshop-page .ws-files-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ws-muted); font: 450 14px/1.4 var(--ap-font-sans); transition: background-color var(--ap-duration-feedback),color var(--ap-duration-feedback); }
.workshop-page .ws-files-toggle svg { width: 18px; height: 18px; }
.workshop-page .ws-files-toggle:hover,
.workshop-page .ws-files-toggle[aria-expanded=true] { color: var(--ws-ink); background: var(--ap-color-control); }
.workshop-page .ws-workspace-content > .ws-code-workspace { order: 2; display: flex; flex: 0 0 208px; flex-direction: column; gap: 0; min-height: 0; min-width: 0; border-left: 1px solid var(--ap-color-line); background: var(--ws-surface); }
.workshop-page .ws-workspace-content > .ws-code-workspace[data-editing=true] { flex-basis: clamp(340px,48%,560px); }
.workshop-page .ws-workspace-content > .ws-code-workspace[hidden],
.workshop-page .ws-code-panel[hidden] { display: none; }
.workshop-page .ws-files-heading { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 48px; padding: 0 8px 0 16px; color: var(--ws-ink); font: 450 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-files-heading .ws-icon-button,
.workshop-page .ws-code-toolbar .ws-icon-button { width: 32px; height: 32px; border: 0; border-radius: 7px; color: var(--ws-muted); background: transparent; }
.workshop-page .ws-files-heading .ws-icon-button:hover,
.workshop-page .ws-code-toolbar .ws-icon-button:hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-code-workspace .ws-files { flex: none; display: block; max-height: 36%; overflow: auto; }
.workshop-page .ws-code-workspace .ws-file-list { display: flex; flex-direction: column; align-items: stretch; padding: 0 8px 12px; gap: 2px; }
.workshop-page .ws-code-workspace .ws-file-list > button { justify-content: flex-start; flex: none; width: 100%; min-height: 36px; padding: 7px 10px; font-size: 14px !important; }
.workshop-page .ws-code-workspace[data-editing=false] .ws-file-list > button[aria-selected=true] { background: transparent; }
.workshop-page .ws-code-workspace[data-editing=false] .ws-file-list > button:hover { background: var(--ap-color-control); }
.workshop-page .ws-code-workspace .ws-code-panel { flex: 1; border-top: 1px solid var(--ap-color-line); }
.workshop-page .ws-code-workspace .ws-code-toolbar { min-height: 44px; padding-inline: 14px 6px; font-size: 14px; }
@container workspace (max-width: 760px) {
 .workshop-page .ws-workspace-main:has(.ws-code-workspace:not([hidden])) .ws-preview-tools { display: none; }
 .workshop-page .ws-workspace-content > .ws-code-workspace,
 .workshop-page .ws-workspace-content > .ws-code-workspace[data-editing=true] { flex-basis: 100%; border-left: 0; }
 .workshop-page .ws-workspace-content:has(> .ws-code-workspace:not([hidden])) > :is(.ws-preview-panel,.ws-changes-panel) { display: none; }
}
@media (max-width: 760px) {
 .workshop-page .ws-workbench .ws-workspace-toolbar,
 .workshop-page .ws-workspace-main:has(.ws-preview-empty:not([hidden])) .ws-workspace-toolbar { display: flex; }
 .workshop-page .ws-workspace-utilities { width: 100%; justify-content: space-between; gap: 8px; }
 .workshop-page .ws-files-toggle { min-height: 44px; }
 .workshop-page .ws-code-workspace .ws-file-list > button { min-height: 44px; }
 .workshop-page .ws-files-heading .ws-icon-button,
 .workshop-page .ws-code-toolbar .ws-icon-button { width: 44px; height: 44px; }
 .workshop-page .ws-files-heading { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
 .workshop-page .ws-files-toggle { transition: none; }
}


/* The Agent's thinking orb (thinking-orb.mjs, the libraries.dev orbs) while the real task is pending: a 20px orb,
   centred on the 14px words that name the step. The loader keeps its words, states and enter/exit; only the mark
   changes. Motion, pausing and the reduced-motion still frame are the orb's own (one shared loop). */
.workshop-page :is(.ws-agent-reasoning,.ws-agent-creating).ap-loader[data-variant=tiles] {
 --loader-size: 20px;
 display: inline-grid;
 grid-template-columns: 20px minmax(0,1fr);
 align-items: center;
 justify-items: start;
 gap: 8px;
 min-height: 32px;
 min-width: 0;
 color: var(--ap-color-text);
}
.workshop-page .ws-agent-reasoning.ap-loader { flex-shrink: 1; }
.workshop-page :is(.ws-agent-reasoning,.ws-agent-creating) .ap-loader-status {
 color: var(--ws-ink);
 font: 450 14px/1.5 var(--ap-font-sans);
 letter-spacing: .01em;
 overflow-wrap: anywhere;
}
.workshop-page .ap-loader[data-mark=orb] .ap-loader-mark { display: grid; grid-template-columns: none; place-items: center; gap: 0; }
.workshop-page .ws-orb { display: block; flex: none; }
@media (prefers-reduced-motion: reduce) {
 .workshop-page :is(.ws-start-writing,.ws-create-arrow,.ws-create-arrow svg) { transition: none; }
 .workshop-page #create-project:not(:disabled):hover .ws-create-arrow svg { translate: none; }
}

/* The project collection uses the available canvas without stretching metadata. */
@media (max-width: 1180px) and (min-width: 761px) {
 .workshop-page .ws-project-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .workshop-page #projects-panel .ws-library-toolbar { flex-wrap: wrap; gap: 18px; }
 .workshop-page #projects-panel .ws-library-actions { flex: 1 0 100%; justify-content: flex-start; }
 .workshop-page #projects-panel .ws-search { flex: 1; }
 .workshop-page .ws-project-order { display: none; }
}
@media (max-width: 540px) {
 .workshop-page .ws-project-list { grid-template-columns: minmax(0,1fr); }
 .workshop-page .ws-project-cover { aspect-ratio: 16/9; }
 .workshop-page #projects-create { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .workshop-page :is(.ws-project-cover,.ws-project-art) { transition: none; }
}

/* Keep build progress visible while the optional waiting game is being played. */
.workshop-page .ws-preview-empty:has(#preview-waiting-game:not([hidden])) { justify-content: safe center; }
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) .ws-preview-emblem { flex: none; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; }
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) h2 { font-size: 22px; margin-bottom: 8px; }
.workshop-page #preview-waiting-game { flex: none; width: min(100%,304px); margin-top: 24px; }
.workshop-page #preview-waiting-game .ws-waiting-game-help { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.workshop-page #preview-waiting-game .ws-waiting-game-status { margin: 0; font-size: 14px; line-height: 1.5; }
.workshop-page #preview-waiting-game .ws-waiting-game-card svg { width: 24px; height: 24px; }
.workshop-page #preview-waiting-game .ws-waiting-game[data-playing=false] :is(.ws-waiting-game-header,.ws-waiting-game-help) { display: none; }
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) #preview-generation-status { gap: 8px; }
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) #preview-creating { width: 48px; height: 48px; transform: none; }
/* Beside the waiting game the plate is 48px: the orb steps down to its inline 20px design (sizes are designs, not a scale). */
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) #preview-creating .ap-loader-visual { --loader-size: 20px; }
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) #preview-creating .ws-orb[data-orb-size="64"] { display: none; }
.workshop-page .ws-preview-empty:has(#preview-waiting-game[data-state=playing],#preview-waiting-game[data-state=complete]) #preview-creating .ws-orb[data-orb-size="20"] { display: block; }

@media (forced-colors: active) {
  .workshop-page #workshop .ws-action { border: 1px solid ButtonText; }
  .workshop-page #workshop .ws-action[data-emphasis=primary] { border-width: 2px; } /* the one primary, still told apart without its fill */
  .workshop-page #workshop .ws-action:disabled { border-color: GrayText; color: GrayText; }
  .workshop-page .ws-agent-panel::before { display: none; }
  .workshop-page .ws-agent-light { forced-color-adjust: none; background: CanvasText; }
  .workshop-page .ws-orb { forced-color-adjust: none; color: CanvasText; } /* thinking-orb.mjs draws its dots in this colour */
  .workshop-page .ws-request-modes > button[aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -2px; }
}


/* The Workshop home (design-system/docs/aspen-design/SKILL.md). One centred column, 1040px at most, whose two edges
   every section shares: the hero with its composer, your recent games and the Remix library. One question, one
   subtitle line, the composer, a few ideas; then each section's mark, its 20px title and its content. Every word is
   at least 14px; a line that does not help a decision is not there. */
.workshop-page { --ws-column: 1040px; --ws-gutter: clamp(24px, 3.4vw, 48px); --ws-screen-lift: contrast(.8934) brightness(1.0563);
  /* The engineering grid (SKILL.md): SVG lines, 24px minor at 3.5% and 96px major at 6% white, + marks at 12%. */
  --ws-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none'%3E%3Cpath d='M24.5 0v96M48.5 0v96M72.5 0v96M0 24.5h96M0 48.5h96M0 72.5h96' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M.5 0v96M0 .5h96' stroke='%23fff' stroke-opacity='.06'/%3E%3Cpath d='M.5 0v5.5M0 .5h5.5M91 .5h5M.5 91v5' stroke='%23fff' stroke-opacity='.12'/%3E%3C/svg%3E");
  --ws-guide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='8'%3E%3Cpath d='M.5 0v4' stroke='%23fff' stroke-opacity='.1'/%3E%3C/svg%3E");
  --ws-corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M.75 14V.75H14' stroke='%23fff' stroke-opacity='.2' stroke-width='1.5'/%3E%3C/svg%3E"); --ws-corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M0 .75h13.25V14' stroke='%23fff' stroke-opacity='.2' stroke-width='1.5'/%3E%3C/svg%3E");
  --ws-corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M.75 0v13.25H14' stroke='%23fff' stroke-opacity='.2' stroke-width='1.5'/%3E%3C/svg%3E"); --ws-corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath d='M0 13.25h13.25V0' stroke='%23fff' stroke-opacity='.2' stroke-width='1.5'/%3E%3C/svg%3E");
  --ws-annotation: #6b6b6b; }
.workshop-page #workshop-home { position: relative; isolation: isolate; box-sizing: border-box; width: 100%; max-width: calc(var(--ws-column) + 2 * var(--ws-gutter)); margin: 0 auto; padding: clamp(40px, 6vh, 64px) var(--ws-gutter) 72px; }
.workshop-page #workshop-home[data-view=projects] { padding-top: clamp(24px, 4.5vh, 48px); }
.workshop-page #workshop-home[data-view=design] { max-width: none; padding: 0; }
.workshop-page .ws-home-main { container: ws-home / inline-size; }
.workshop-page #workshop-home[data-view=design] .ws-home-main { container-type: normal; }

/* The hero: the title and the composer over the design system's 16px dot field, with a few of the games people made
   here tilted behind the composer's edge. Solid fills; the dots are the one texture, masked so they fade out. */
.workshop-page .ws-welcome { position: relative; isolation: isolate; width: 100%; max-width: none; margin: 0 0 64px; padding: 20px 0 0; text-align: left; }
/* The engineering drawing behind the home (SKILL.md "Engineering grid"): the grid, strongest behind the hero and
   fading down the page, the column's two edges as dashed guides, its measured width as a dimension line, section
   marks in Geist Mono, corner brackets on the composer and a faint crosshair that follows a fine pointer in the hero.
   All of it is aria-hidden decoration behind the content. */
.workshop-page .ws-blueprint { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.workshop-page #workshop-home:not([data-view=overview]) .ws-blueprint { display: none; }
.workshop-page .ws-blueprint::before { content: ''; position: absolute; inset: 0; background-image: var(--ws-grid); background-position: var(--ws-gutter) 0; background-size: 96px 96px; -webkit-mask-image: radial-gradient(ellipse 78% 100% at 50% 0%, #000 0%, #0000008c 30%, #00000038 62%, transparent 100%); mask-image: radial-gradient(ellipse 78% 100% at 50% 0%, #000 0%, #0000008c 30%, #00000038 62%, transparent 100%); }
.workshop-page .ws-blueprint::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--ws-gutter); right: var(--ws-gutter); background-image: var(--ws-guide), var(--ws-guide); background-position: 0 0, 100% 0; background-size: 1px 8px; background-repeat: repeat-y; -webkit-mask-image: radial-gradient(ellipse 160% 80% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 160% 80% at 50% 0%, #000 35%, transparent 100%); }
.workshop-page .ws-blueprint-dimension { position: absolute; top: 14px; left: var(--ws-gutter); right: var(--ws-gutter); display: flex; align-items: center; justify-content: center; height: 11px; box-shadow: inset 1px 0 0 #ffffff29, inset -1px 0 0 #ffffff29; }
.workshop-page .ws-blueprint-dimension::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: #ffffff17; }
.workshop-page .ws-blueprint-dimension > span { position: relative; padding: 0 10px; background: var(--ws-bg); color: var(--ws-annotation); font: 400 14px/1 var(--ap-font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.workshop-page .ws-home-main { counter-reset: ws-section; }
.workshop-page :is(.ws-welcome,.ws-recent-creations,.ws-remix-gallery) { counter-increment: ws-section; }
.workshop-page :is(.ws-welcome,.ws-recent-creations,.ws-remix-gallery)[data-mark]::before { content: counter(ws-section, decimal-leading-zero) " · " attr(data-mark) / ""; display: block; margin: 0 0 12px; color: var(--ws-annotation); font: 400 14px/1.4 var(--ap-font-mono); letter-spacing: .06em; }
.workshop-page .ws-start-composer::before { content: ''; position: absolute; z-index: -1; inset: -9px; background: var(--ws-corner-tl) 0 0 / 14px 14px no-repeat, var(--ws-corner-tr) 100% 0 / 14px 14px no-repeat, var(--ws-corner-bl) 0 100% / 14px 14px no-repeat, var(--ws-corner-br) 100% 100% / 14px 14px no-repeat; pointer-events: none; }
.workshop-page .ws-hero-cursor { position: absolute; z-index: -1; inset: -32px calc(-1 * var(--ws-gutter)) -12px; opacity: 0; transition: opacity var(--ap-duration-feedback); pointer-events: none; }
.workshop-page .ws-welcome[data-cursor=on] .ws-hero-cursor { opacity: 1; }
.workshop-page .ws-hero-cursor::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--cursor-x, 50%); width: 1px; background: #ffffff12; }
.workshop-page .ws-hero-cursor::after { content: ''; position: absolute; left: 0; right: 0; top: var(--cursor-y, 50%); height: 1px; background: #ffffff12; }
.workshop-page .ws-hero-cursor > span { position: absolute; left: calc(var(--cursor-x, 50%) + 12px); top: calc(var(--cursor-y, 50%) + 10px); color: var(--ws-annotation); font: 400 14px/1 var(--ap-font-mono); letter-spacing: .04em; white-space: nowrap; }
.workshop-page .ws-hero-covers { position: absolute; z-index: 0; top: 0; right: 12px; width: 384px; height: 200px; transform-origin: 100% 0; pointer-events: none; } /* the fan, rotations included, stays inside this box */
.workshop-page .ws-hero-pixels { display: block; width: 100%; height: 100%; } /* pixel art drafted on the drawing (pixel-blueprint.mjs) */
.workshop-page .ws-hero-covers > img { position: absolute; top: var(--y); left: var(--x); width: 150px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--ap-surface-card); box-shadow: 0 1px 2px #0006, 0 4px 8px #0003; filter: var(--ws-screen-lift); rotate: var(--r); transition: translate var(--ap-duration-enter) var(--ap-ease-enter); }
.workshop-page .ws-hero-covers > img:nth-child(1) { --x: 12px; --y: 66px; --r: -9deg; }
.workshop-page .ws-hero-covers > img:nth-child(2) { --x: 86px; --y: 18px; --r: -3deg; }
.workshop-page .ws-hero-covers > img:nth-child(3) { --x: 164px; --y: 30px; --r: 4deg; }
.workshop-page .ws-hero-covers > img:nth-child(4) { --x: 220px; --y: 72px; --r: 10deg; }
.workshop-page .ws-welcome:focus-within .ws-hero-covers > img { translate: 0 -4px; }
.workshop-page .ws-hero-copy { position: relative; z-index: 1; max-width: calc(100% - 396px); }
.workshop-page .ws-hero-copy h1 { margin: 0; color: var(--ws-ink); font: 500 40px/1.2 var(--ap-font-sans); letter-spacing: -.035em; text-wrap: balance; }
/* One subtitle line: its two sentences share it on a desktop; narrower, the second moves down whole. */
.workshop-page .ws-hero-copy p { display: flex; flex-wrap: wrap; margin: 10px 0 0; color: var(--ws-muted); font: 400 16px/1.6 var(--ap-font-sans); text-wrap: pretty; }
.workshop-page .ws-hero-copy p:lang(en) { column-gap: .3em; } /* the space between them, only where they meet */
.workshop-page :is(.ws-hero-copy h1,.ws-section-heading h2,.ws-card-caption h3):is(:lang(zh),:lang(ja)) { letter-spacing: 0; } /* Han and kana sit on a full em */

/* The composer, the hero's one control: room for a few lines, then its footer. */
.workshop-page .ws-start-composer { position: relative; z-index: 1; container: ws-start / inline-size; margin: 36px 0 0; }
.workshop-page .ws-credit-line { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; color: var(--ws-quiet); font: 400 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; }
.workshop-page .ws-credit-summary { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ws-muted); font: inherit; white-space: nowrap; cursor: pointer; transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback); }
.workshop-page .ws-credit-summary:hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-credit-summary:active { background: var(--ap-button-secondary-hover); transition-duration: var(--ap-duration-press); }
.workshop-page .ws-credit-summary[data-level=low] { color: var(--ws-ink); }
.workshop-page .ws-credit-summary[data-level=empty] { color: var(--ap-color-error); }
.workshop-page .ws-credit-line > .ws-credit-estimate { margin: 0 6px 0 0; white-space: nowrap; }
.workshop-page .ws-credit-summary:not([hidden]) + .ws-credit-estimate:not([hidden])::before { content: '·'; margin: 0 8px 0 0; }
.workshop-page .ws-credit-line > .ws-credit-estimate[data-state=confirm] { color: var(--ws-muted); }
@container ws-start (width < 560px) {
  .workshop-page .ws-start-composer-tools { flex-wrap: wrap; row-gap: 4px; }
  .workshop-page .ws-credit-line { order: -1; flex: 1 0 100%; justify-content: flex-start; padding: 2px 4px 0; }
  .workshop-page .ws-credit-summary { padding-inline: 6px; }
}

/* Ideas fill the composer; the person still sends it. */
.workshop-page .ws-idea-row { display: flex; align-items: center; margin: 18px 0 0; }
.workshop-page .ws-ideas { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.workshop-page .ws-idea { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ap-color-inset); color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); white-space: nowrap; transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback); }
.workshop-page .ws-idea:not(:disabled):hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-idea:not(:disabled):active { transform: translateY(1px); transition-duration: var(--ap-duration-press); }

/* Section titles as on the homepage, with their one quiet action on the right. */
.workshop-page .ws-section-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 16px; }
.workshop-page .ws-section-heading h2 { margin: 0; color: var(--ws-ink); font: 500 20px/1.4 var(--ap-font-sans); letter-spacing: -.035em; }
.workshop-page .ws-section-heading > .ws-text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: auto; padding: 0; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); transition: color var(--ap-duration-feedback); }
.workshop-page .ws-section-heading > .ws-text-button:hover { color: var(--ws-ink); }
.workshop-page .ws-section-heading > .ws-text-button svg { width: 16px; height: 16px; }
.workshop-page #view-all-projects svg { rotate: 90deg; }
.workshop-page .ws-title-count { color: var(--ws-quiet); font-weight: 400; font-variant-numeric: tabular-nums; }
.workshop-page .ws-title-count::before { content: '·'; margin: 0 .4em; }
.workshop-page .ws-recent-creations { margin: 0 0 64px; }
.workshop-page .ws-remix-gallery { margin-bottom: 24px; scroll-margin-top: 24px; }

/* The save status lives with your projects; on top only while editing (offline). Under your recent games it is one
   row, shown only when it asks something of you: a guest's projects live on this device (sign in), or sync is paused
   (retry). Loading, saving and saved say nothing there. */
.workshop-page .ws-status-slot { display: contents; }
.workshop-page .ws-cloud-icon { display: none; }
.workshop-page #recent-status-slot > .ws-cloud-status { display: flex; align-items: center; gap: 8px 12px; min-height: 52px; margin: 24px 0 0; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--ap-color-inset); color: var(--ws-muted); font: 400 14px/1.45 var(--ap-font-sans); }
.workshop-page #recent-status-slot > .ws-cloud-status:not([data-state=guest],[data-state=offline]) { display: none; }
.workshop-page #recent-status-slot .ws-cloud-icon { display: flex; flex: none; color: var(--ws-quiet); }
.workshop-page #recent-status-slot .ws-cloud-icon svg { width: 18px; height: 18px; }
.workshop-page #recent-status-slot #studio-sync-status { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; } /* a narrow row breaks at the · */
.workshop-page #recent-status-slot .ap-button { flex: none; min-height: 36px; padding: 6px 16px; border-radius: 10px; background: var(--ap-color-control); color: var(--ws-ink); font: 500 14px/1.3 var(--ap-font-sans); text-decoration: none; }
.workshop-page #recent-status-slot .ap-button:hover { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-cloud-status[data-place=inline] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 0; padding: 0; color: var(--ws-quiet); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-cloud-status[data-place=inline] .ap-button { min-height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--ws-muted); font-size: 14px; }
.workshop-page .ws-cloud-status[data-place=inline] .ap-button:hover { color: var(--ws-ink); }
.workshop-page .ws-cloud-status[data-place=inline][data-state=error] { color: var(--ap-color-error); }
.workshop-page #projects-status-slot > .ws-cloud-status { margin: 0 auto 0 4px; } /* beside the Projects title, before the tools */

/* The library's one toolbar row: its source and search. */
.workshop-page .ws-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 24px; }
.workshop-page .ws-library-sources { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 12px; background: var(--ap-color-inset); }
.workshop-page .ws-library-sources > button { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ws-muted); font: 450 14px/1.4 var(--ap-font-sans); white-space: nowrap; transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback); }
.workshop-page .ws-library-sources > button:hover { color: var(--ws-ink); }
.workshop-page .ws-library-sources > button[aria-pressed=true] { background: var(--ap-button-secondary-hover); color: var(--ws-ink); }
.workshop-page .ws-library-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.workshop-page .ws-library-filters > button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--ap-radius-control); background: transparent; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); white-space: nowrap; transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback); }
.workshop-page .ws-library-filters > button:hover { background: var(--ap-color-inset); color: var(--ws-ink); }
.workshop-page .ws-library-filters > button[aria-pressed=true] { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-catalog-toolbar > .ws-search { flex: 0 1 260px; width: auto; min-width: 160px; min-height: 40px; padding-inline: 12px; border-radius: 10px; background: var(--ap-color-inset); }
.workshop-page .ws-catalog-toolbar .ws-search input { min-height: 40px; font-size: 14px; }
.workshop-page #workshop .ws-catalog-toolbar .ws-search input:focus-visible { outline: 0; }
.workshop-page #library-empty { display: flex; align-items: center; gap: 16px; padding: 28px; border-radius: var(--ap-radius-card); background: var(--ap-color-inset); }
.workshop-page #library-empty > span[data-icon] { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ap-color-control); color: var(--ws-muted); }
.workshop-page #library-empty svg { width: 22px; height: 22px; }
.workshop-page #library-empty h3 { margin: 0 0 4px; color: var(--ws-ink); font: 500 16px/1.4 var(--ap-font-sans); }
.workshop-page #library-empty p { max-width: 540px; margin: 0; color: var(--ws-muted); font: 400 14px/1.6 var(--ap-font-sans); }
.workshop-page #start-blank { flex-shrink: 0; min-height: 36px; }

/* Aspen Origin cards, as on the homepage (game-collection.css): one solid rounded cover and the caption beneath it.
   A game with a screen fills the cover with it, lifted so its margin is the cover's own tone; any other game stands
   its illustration there. Hover lights the cover a tone and lifts the art; Remix comes forward on hover and focus,
   and stays in reach on touch. */
.workshop-page .ws-card-grid { --ws-cards: 4; display: grid; grid-template-columns: repeat(var(--ws-cards), minmax(0, 1fr)); gap: 28px 20px; }
.workshop-page .ws-card { position: relative; min-width: 0; }
.workshop-page .ws-card-media { position: relative; }
.workshop-page .ws-card-cover { position: relative; isolation: isolate; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: var(--ap-radius-card); background: var(--ap-surface-card); color: var(--ws-ink); cursor: pointer; transition: background-color var(--ap-duration-enter) var(--ap-ease-enter), transform var(--ap-duration-enter) var(--ap-ease-enter); }
.workshop-page .ws-card-art { grid-area: 1 / 1; display: block; width: auto; max-width: none; height: calc(84% * var(--game-art-scale, 1)); object-fit: contain; transform: translate(var(--game-art-x, 0%), var(--game-art-y, 0%)); transform-origin: 50% 55%; transition: transform var(--ap-duration-enter) var(--ap-ease-enter); pointer-events: none; }
.workshop-page .ws-card-screen { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: var(--ws-screen-lift); transition: opacity var(--ap-duration-feedback) var(--ap-ease-feedback), transform var(--ap-duration-enter) var(--ap-ease-enter); pointer-events: none; }
.workshop-page .ws-card-screen[data-loading] { opacity: 0; }
.workshop-page .ws-card-cover:has(> .ws-card-screen) > .ws-card-art { display: none; }
.workshop-page .ws-card-glyph { grid-area: 1 / 1; display: grid; place-items: center; color: var(--ws-quiet); transition: color var(--ap-duration-feedback); }
.workshop-page #workshop .ws-card-glyph svg { width: 40px; height: 40px; stroke-width: 1.3; }
.workshop-page .ws-card-action { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--ws-ink); color: var(--ap-color-on-action); font: 500 14px/1 var(--ap-font-sans); box-shadow: 0 1px 2px #0005; opacity: 0; transform: translateY(6px) scale(.96); transition: opacity var(--ap-duration-enter) var(--ap-ease-enter), transform var(--ap-duration-enter) var(--ap-ease-enter), background-color var(--ap-duration-feedback); pointer-events: none; }
.workshop-page .ws-card-action > span { display: flex; }
.workshop-page .ws-card-action svg { width: 16px; height: 16px; }
.workshop-page button.ws-card-action { pointer-events: auto; cursor: pointer; }
.workshop-page button.ws-card-action:hover { background: #fff; }
.workshop-page button.ws-card-action:active { transform: translateY(1px); transition-duration: var(--ap-duration-press); }
.workshop-page .ws-card-media:focus-within .ws-card-action { opacity: 1; transform: none; }
.workshop-page #workshop .ws-card-cover:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 4px; }
.workshop-page #workshop button.ws-card-action:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
.workshop-page .ws-card-cover:not(:disabled):active { transform: scale(.985); transition-duration: var(--ap-duration-press); }
@media (hover: hover) {
  .workshop-page .ws-card-media:hover .ws-card-cover:not(:disabled) { background: var(--ap-color-control); }
  .workshop-page .ws-card-media:hover .ws-card-cover:not(:disabled) .ws-card-art { transform: translate(var(--game-art-x, 0%), calc(var(--game-art-y, 0%) - 2.4% / var(--game-art-scale, 1))) scale(1.065) rotate(-3deg); }
  .workshop-page .ws-card-media:hover .ws-card-cover:not(:disabled) .ws-card-screen { transform: scale(1.03); }
  .workshop-page .ws-card-media:hover .ws-card-cover:not(:disabled) .ws-card-glyph { color: var(--ws-muted); }
  .workshop-page .ws-card-media:hover .ws-card-action { opacity: 1; transform: none; }
}
/* Touch has no hover: the library keeps a small Remix key on each cover; a recent game opens from its whole cover. */
@media (hover: none) {
  .workshop-page .ws-game-remix { width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; right: 8px; bottom: 8px; opacity: 1; transform: none; }
  .workshop-page .ws-game-remix::after { content: ''; position: absolute; inset: -2px; }
  .workshop-page .ws-game-remix > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .workshop-page .ws-recent-card .ws-card-action { display: none; }
}
.workshop-page .ws-card-cover:disabled { cursor: default; }
.workshop-page .ws-card-caption { display: grid; gap: 2px; min-width: 0; padding: 12px 2px 0; }
.workshop-page .ws-card-caption h3 { margin: 0; overflow: hidden; color: var(--ws-ink); font: 500 16px/22px var(--ap-font-sans); letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.workshop-page .ws-card-caption p { margin: 0; overflow: hidden; color: var(--ws-quiet); font: 400 14px/20px var(--ap-font-sans); text-overflow: ellipsis; white-space: nowrap; }
/* One row of your latest games, as many as the columns hold: a 16:10 cover (a game screen's own shape), the name at
   15px and the day it was edited. */
.workshop-page .ws-recent-grid > :nth-child(n + 5) { display: none; }
.workshop-page .ws-recent-card .ws-card-cover { aspect-ratio: 16 / 10; }
.workshop-page .ws-recent-card .ws-card-caption h3 { font-size: 15px; line-height: 21px; }

@container ws-home (width < 980px) {
  .workshop-page .ws-card-grid { --ws-cards: 3; }
  .workshop-page .ws-recent-grid > :nth-child(n + 4) { display: none; }
  .workshop-page .ws-hero-covers { right: 0; transform: scale(.84); }
  .workshop-page .ws-hero-copy { max-width: calc(100% - 336px); }
  .workshop-page .ws-hero-copy h1 { font-size: 36px; }
}
@container ws-home (width < 700px) {
  .workshop-page .ws-card-grid { --ws-cards: 2; gap: 24px 12px; }
  .workshop-page .ws-recent-grid { grid-auto-flow: column; grid-auto-columns: calc(50% - 6px); grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .workshop-page .ws-recent-grid::-webkit-scrollbar { display: none; }
  .workshop-page .ws-recent-grid > .ws-card { display: block; scroll-snap-align: start; }
  .workshop-page .ws-hero-covers { transform: scale(.66); }
  .workshop-page .ws-hero-copy { max-width: calc(100% - 264px); }
}
@container ws-home (width < 560px) {
  .workshop-page .ws-welcome { margin-bottom: 48px; padding-top: 112px; }
  .workshop-page .ws-hero-covers { right: auto; left: 50%; transform: translateX(-50%) scale(.52); transform-origin: 50% 0; }
  .workshop-page .ws-hero-copy { max-width: none; }
  .workshop-page .ws-hero-copy h1 { font-size: 32px; }
  .workshop-page .ws-start-composer { margin-top: 24px; }
  .workshop-page .ws-start-composer textarea { min-height: 96px; }
  .workshop-page .ws-idea-row { align-items: stretch; }
  .workshop-page .ws-ideas { flex-wrap: nowrap; margin-inline: calc(-1 * var(--ws-gutter)); padding-inline: var(--ws-gutter); overflow-x: auto; scrollbar-width: none; }
  .workshop-page .ws-ideas::-webkit-scrollbar { display: none; }
  .workshop-page .ws-idea { flex: none; }
  .workshop-page .ws-catalog-toolbar { gap: 10px; }
  .workshop-page .ws-catalog-toolbar > .ws-search { flex: 1 1 0; min-width: 0; }
  .workshop-page .ws-card-caption h3 { font-size: 15px; }
  .workshop-page .ws-card-action { right: 8px; bottom: 8px; }
}
@media (max-width: 760px) {
  .workshop-page { --ws-gutter: 16px; }
  .workshop-page .ws-blueprint-dimension { display: none; } /* the covers sit where it would */
  .workshop-page #workshop-home { padding: 20px var(--ws-gutter) 40px; }
  .workshop-page :is(.ws-idea,.ws-credit-summary,.ws-section-heading > .ws-text-button,.ws-library-filters > button,.ws-library-sources > button,#recent-status-slot .ap-button) { min-height: 44px; }
  .workshop-page .ws-catalog-toolbar > .ws-search, .workshop-page .ws-catalog-toolbar .ws-search input { min-height: 44px; }
  .workshop-page .ws-catalog-toolbar .ws-search input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-page :is(.ws-card-cover,.ws-card-art,.ws-card-screen,.ws-card-glyph,.ws-card-action,.ws-idea,.ws-credit-summary,.ws-hero-covers > img,.ws-library-sources > button,.ws-library-filters > button) { transition: none; }
  .workshop-page .ws-create-arrow svg { transition: none; }
  .workshop-page #create-project:not(:disabled):hover .ws-create-arrow svg { translate: none; }
  .workshop-page .ws-card-media:hover .ws-card-cover .ws-card-art { transform: translate(var(--game-art-x, 0%), var(--game-art-y, 0%)); }
  .workshop-page .ws-card-media:hover .ws-card-cover .ws-card-screen { transform: none; }
  .workshop-page .ws-card-cover:active, .workshop-page .ws-idea:active { transform: none; }
  .workshop-page .ws-welcome:focus-within .ws-hero-covers > img { translate: none; }
  .workshop-page .ws-hero-cursor { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .workshop-page .ws-hero-cursor { display: none; }
}
@media (forced-colors: active) {
  .workshop-page .ws-card-cover { outline: 1px solid CanvasText; }
  .workshop-page .ws-card-action { forced-color-adjust: none; background: ButtonText; color: ButtonFace; }
  .workshop-page :is(.ws-hero-covers,.ws-blueprint,.ws-hero-cursor) { display: none; }
  .workshop-page .ws-start-composer::before { display: none; }
  .workshop-page #recent-status-slot > .ws-cloud-status { outline: 1px solid CanvasText; }
}

/* Workshop credits (billing-ui.mjs, docs/workshop-billing.md), hidden until billing is on. The meter and the estimate
   are text-weight; the paywall is a card in the composer; the Usage & plan dialog shows the month as a ring, Pro with
   the games its credits make, the pack and the coin exchange as small drawings, and this month's usage as bars. */
.workshop-page .ws-credit-meter { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 32px; margin-right: -8px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ws-muted); font: 450 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background-color var(--ap-duration-feedback), color var(--ap-duration-feedback); }
.workshop-page .ws-credit-meter:hover { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-credit-meter:active { transition-duration: var(--ap-duration-press); background: var(--ap-button-secondary-hover); }
.workshop-page .ws-credit-track { position: relative; flex: none; width: 36px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ap-button-secondary-hover); }
.workshop-page .ws-credit-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ws-muted); transition: width var(--ap-duration-enter) var(--ap-ease-enter); }
.workshop-page .ws-credit-meter[data-level=low] { color: var(--ws-ink); }
.workshop-page .ws-credit-meter[data-level=low] .ws-credit-track > span { background: var(--ws-ink); }
.workshop-page .ws-credit-meter[data-level=empty] { color: var(--ap-color-error); }
.workshop-page .ws-credit-estimate { flex: none; margin-left: auto; color: var(--ws-quiet); font: 400 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.workshop-page .ws-request-tools > .ws-credit-estimate { padding: 3px 10px; border-radius: 999px; background: var(--ap-color-inset); }
.workshop-page .ws-request-tools > .ws-credit-estimate[data-state=confirm] { color: var(--ws-ink); }
/* A narrow composer (a slim Agent column, phones, longer languages) gives the estimate its own line above the tools,
   and a narrow Agent header keeps the number without its bar, so neither ever pushes the column wider. */
.workshop-page .ws-agent-toolbar { container: ws-agent-bar / inline-size; }
.workshop-page .ws-request-composer.ws-prompt-composer { container: ws-request / inline-size; }
@container ws-request (max-width: 400px) {
  .workshop-page .ws-request-tools { flex-wrap: wrap; row-gap: 8px; }
  .workshop-page .ws-request-tools > .ws-credit-estimate { order: -1; flex: 1 0 100%; margin: 0; padding: 0; background: none; text-align: right; }
}
@container ws-agent-bar (max-width: 250px) { .workshop-page .ws-credit-track { display: none; } }
/* Beside the meter, the header's status word gives way first (the light and the conversation keep the state). */
.workshop-page .ws-agent-toolbar:has(#billing-meter:not([hidden])) #agent-busy-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workshop-page .ws-agent-turn-cost { flex: none; margin-left: auto; color: var(--ws-quiet); font: 400 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.workshop-page .ws-agent-turn-cost:not([hidden]) + .ws-agent-turn-state { margin-left: 8px; }

/* The paywall card: what happened, a small drawing of the month, and the way on. */
.workshop-page .ws-paywall { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; min-width: 0; margin: 0 0 10px; padding: 14px 16px; border-radius: 16px; background: var(--ap-color-inset); }
.workshop-page .ws-paywall-art { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ap-color-control); }
.workshop-page .ws-paywall-art svg { width: 36px; height: 36px; fill: none; stroke: none; }
.workshop-page .ws-paywall-art .ws-ring { width: 32px; height: 32px; }
.workshop-page .ws-paywall-text { min-width: 0; }
.workshop-page .ws-paywall-title { margin: 0; color: var(--ws-ink); font: 500 15px/1.45 var(--ap-font-sans); }
.workshop-page .ws-paywall-body { margin: 2px 0 0; color: var(--ws-muted); font: 400 14px/1.55 var(--ap-font-sans); overflow-wrap: anywhere; }
.workshop-page .ws-paywall-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.workshop-page .ws-paywall-actions > :is(.ws-button,.ws-text-button) { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border-radius: 10px; font: 500 14px/1.3 var(--ap-font-sans); text-decoration: none; }
.workshop-page .ws-paywall-actions > .ws-button { background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-paywall-actions > .ws-button:hover { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-paywall-actions > .ws-button.ws-primary { background: var(--ws-accent); color: var(--ap-color-on-action); }
.workshop-page .ws-paywall-actions > .ws-button.ws-primary:hover { background: var(--ws-ink); }
.workshop-page .ws-paywall-actions > :is(.ws-button,.ws-text-button):active { transform: translateY(1px); transition-duration: var(--ap-duration-press); }
.workshop-page .ws-paywall-actions > .ws-text-button { padding-inline: 8px; background: transparent; color: var(--ws-muted); font-weight: 400; }
.workshop-page .ws-paywall-actions > .ws-text-button:hover { color: var(--ws-ink); }
.workshop-page .ws-start-composer .ws-paywall { margin: 8px 8px 0; padding: 14px 16px; border-radius: 14px; } /* inside the composer's frame, above the field */
@container ws-start (width >= 720px) {
  .workshop-page .ws-start-composer .ws-paywall { grid-template-columns: auto minmax(0, 1fr) auto; }
  .workshop-page .ws-start-composer .ws-paywall-actions { grid-column: auto; justify-content: flex-end; }
}
.workshop-page .ws-ring { display: block; overflow: visible; }
.workshop-page .ws-ring-track { fill: none; stroke: var(--ap-button-secondary-hover); stroke-width: 6; }
.workshop-page .ws-ring-fill { fill: none; stroke: var(--ws-ink); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray var(--ap-duration-enter) var(--ap-ease-enter); }
.workshop-page .ws-ring[data-level=empty] .ws-ring-fill { stroke: var(--ap-color-error); }

/* The Usage & plan dialog: wide, its title row fixed and its body scrolling; each part a row of equal columns that
   stack below about 700px of content. Focus opens on the title, never on the dialog itself (no ring around it). */
.workshop-page .ws-dialog:focus, .workshop-page .ws-dialog:focus-visible { outline: none; }
.workshop-page .ws-billing-dialog { width: min(960px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.workshop-page .ws-billing-dialog[open] { display: flex; flex-direction: column; }
.workshop-page .ws-billing-dialog > .ws-dialog-heading { flex: none; align-items: flex-start; margin: 0; padding: 28px 32px 20px; }
.workshop-page .ws-billing-heading { display: grid; gap: 6px; min-width: 0; }
.workshop-page .ws-billing-heading h2:focus { outline: none; }
.workshop-page #billing-subtitle { margin: 0; color: var(--ws-muted); font: 400 14px/1.6 var(--ap-font-sans); }
.workshop-page .ws-billing-content { container: ws-dialog / inline-size; display: grid; flex: 1; align-content: start; gap: 32px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 32px 32px; scrollbar-width: thin; scrollbar-color: var(--ap-color-control) transparent; }
.workshop-page .ws-billing-content > * { min-width: 0; }
.workshop-page .ws-billing-section { display: grid; gap: 14px; min-width: 0; }
.workshop-page .ws-billing-content h3 { margin: 0; color: var(--ws-ink); font: 500 16px/1.4 var(--ap-font-sans); letter-spacing: -.01em; }
.workshop-page .ws-billing-content h4 { margin: 0; color: var(--ws-ink); font: 500 16px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-content :is(h3,h4):focus { outline: none; }
.workshop-page .ws-billing-content .ws-billing-note { margin: 0; color: var(--ws-muted); font: 400 14px/1.6 var(--ap-font-sans); }
.workshop-page .ws-billing-content .ws-paywall { margin: 0; }
.workshop-page .ws-billing-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--ap-color-control); color: var(--ws-ink); font: 500 14px/1.3 var(--ap-font-sans); white-space: nowrap; }
.workshop-page .ws-billing-tag[data-tone=current] { background: var(--ws-ink); color: var(--ap-color-on-action); }
.workshop-page .ws-billing-glyph { width: 16px; height: 16px; }
/* 1. The month: what is left of all of it, a labelled bar, the renewal; and what that makes. */
.workshop-page .ws-billing-usage-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.workshop-page :is(.ws-billing-month,.ws-billing-can) { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 22px 24px; border-radius: 20px; background: var(--ap-color-inset); }
.workshop-page .ws-billing-remaining { margin: 0; color: var(--ws-muted); font: 400 16px/1.3 var(--ap-font-sans); }
.workshop-page .ws-billing-remaining strong { margin: 0 3px; color: var(--ws-ink); font: 500 40px/1.1 var(--ap-font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.workshop-page .ws-billing-meter { height: 12px; overflow: hidden; border-radius: 6px; background: var(--ap-button-secondary-hover); }
.workshop-page .ws-billing-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ws-ink); transition: width var(--ap-duration-enter) var(--ap-ease-enter); }
.workshop-page .ws-billing-meter[data-level=empty] > span { background: var(--ap-color-error); } /* low stays ink: the error colour is for empty only */
.workshop-page .ws-billing-legend { display: flex; justify-content: space-between; gap: 12px; color: var(--ws-quiet); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.workshop-page .ws-billing-legend > span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.workshop-page .ws-billing-legend > .ws-billing-legend-left::before { background: var(--ws-ink); }
.workshop-page .ws-billing-month:has(.ws-billing-meter[data-level=empty]) .ws-billing-legend-left::before { background: var(--ap-color-error); }
.workshop-page .ws-billing-legend > .ws-billing-legend-used::before { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-billing-facts { display: grid; margin: 4px 0 0; }
.workshop-page .ws-billing-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.workshop-page .ws-billing-facts > div + div { box-shadow: inset 0 1px 0 var(--ap-color-line); }
.workshop-page .ws-billing-facts dt { min-width: 0; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-facts dd { margin: 0; color: var(--ws-ink); font: 500 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; text-align: right; }
.workshop-page .ws-billing-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; }
.workshop-page .ws-billing-can-title { margin: 0; color: var(--ws-ink); font: 500 16px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-can[data-level=empty] .ws-billing-can-title { color: var(--ap-color-error); }
.workshop-page .ws-billing-can-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.workshop-page .ws-billing-stat { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--ap-color-control); }
.workshop-page .ws-billing-stat-icon { display: flex; margin-bottom: 6px; color: var(--ws-muted); }
.workshop-page .ws-billing-stat-value { margin: 0; color: var(--ws-muted); font: 400 14px/1.3 var(--ap-font-sans); }
.workshop-page .ws-billing-stat-value strong { margin: 0 2px; color: var(--ws-ink); font: 500 28px/1.15 var(--ap-font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.workshop-page .ws-billing-stat-unit { color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-can-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.workshop-page .ws-billing-can-actions > .ws-button { min-height: 40px; padding: 8px 16px; border-radius: 10px; background: var(--ap-color-control); color: var(--ws-ink); font: 500 14px/1.3 var(--ap-font-sans); }
.workshop-page .ws-billing-can-actions > .ws-button:hover { background: var(--ap-button-secondary-hover); }
.workshop-page .ws-billing-can-actions > .ws-button.ws-primary { background: var(--ws-accent); color: var(--ap-color-on-action); }
.workshop-page .ws-billing-can-actions > .ws-button.ws-primary:hover { background: var(--ws-ink); }
/* 2. How credits are counted: three cards, then the rules. */
.workshop-page .ws-billing-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.workshop-page .ws-billing-how-card { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 18px 20px; border-radius: 18px; background: var(--ap-color-inset); }
.workshop-page .ws-billing-how-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: var(--ap-color-control); color: var(--ws-ink); }
.workshop-page .ws-billing-how-title { margin: 0; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-how-value { margin: 0; color: var(--ws-ink); font: 500 20px/1.35 var(--ap-font-sans); font-variant-numeric: tabular-nums; }
.workshop-page .ws-billing-how-card[data-kind=free] .ws-billing-note { color: var(--ws-ink); }
.workshop-page .ws-billing-rules { display: grid; gap: 6px; margin: 0; padding: 0 0 0 20px; color: var(--ws-muted); font: 400 14px/1.6 var(--ap-font-sans); }
.workshop-page .ws-billing-rules li::marker { color: var(--ws-quiet); }
/* 3. Plans: two equal columns, the same rows, the current plan ringed and tagged. */
.workshop-page .ws-billing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.workshop-page .ws-billing-plan { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--ap-surface-card); }
.workshop-page .ws-billing-plan[data-current=true]::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #ffffff59; pointer-events: none; } /* above the band */
.workshop-page .ws-billing-band { position: relative; display: flex; flex: none; align-items: center; height: 96px; padding: 0 20px; overflow: hidden; background: var(--ap-color-control); }
.workshop-page .ws-billing-plan[data-plan=free] .ws-billing-band { background: var(--ap-color-inset); }
.workshop-page .ws-billing-band::before { content: ''; position: absolute; inset: 0; background-image: var(--ws-grid); background-position: 20px 8px; background-size: 96px 96px; -webkit-mask-image: radial-gradient(ellipse 85% 120% at 60% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 85% 120% at 60% 50%, #000 30%, transparent 85%); pointer-events: none; }
.workshop-page .ws-billing-emblem { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ws-ink); color: var(--ap-color-on-action); box-shadow: 0 1px 2px #0006; }
.workshop-page .ws-billing-plan[data-plan=free] .ws-billing-emblem { background: var(--ap-button-secondary-hover); color: var(--ws-ink); box-shadow: none; }
.workshop-page .ws-billing-covers { position: relative; flex: 1; height: 100%; margin-left: 12px; }
.workshop-page .ws-billing-covers > img { position: absolute; top: 50%; left: var(--x); width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--ap-surface-card); box-shadow: 0 1px 2px #0006; filter: var(--ws-screen-lift); translate: 0 -50%; rotate: var(--r); }
.workshop-page .ws-billing-covers > img:nth-child(1) { --x: 0%; --r: -8deg; }
.workshop-page .ws-billing-covers > img:nth-child(2) { --x: 17%; --r: 4deg; }
.workshop-page .ws-billing-covers > img:nth-child(3) { --x: 34%; --r: -3deg; }
.workshop-page .ws-billing-covers > img:nth-child(4) { --x: 51%; --r: 7deg; }
.workshop-page .ws-billing-covers > img:nth-child(5) { --x: 68%; --r: -6deg; }
.workshop-page .ws-billing-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 30px; padding: 18px 22px 8px; }
.workshop-page .ws-billing-plan h4 { font-size: 18px; line-height: 1.3; }
.workshop-page .ws-billing-rows { display: grid; margin: 0; padding: 0 22px; }
.workshop-page .ws-billing-row-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.workshop-page .ws-billing-row-item + .ws-billing-row-item { box-shadow: inset 0 1px 0 var(--ap-color-line); }
.workshop-page .ws-billing-rows dt { min-width: 0; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-rows dd { margin: 0; color: var(--ws-ink); font: 500 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; text-align: right; }
.workshop-page .ws-billing-price { color: inherit; font: inherit; }
.workshop-page .ws-billing-included { display: inline-flex; align-items: center; color: var(--ws-ink); }
.workshop-page .ws-billing-plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 76px; margin-top: auto; padding: 14px 22px 20px; box-shadow: inset 0 1px 0 var(--ap-color-line); }
/* Coming soon reads as a state: a solid pill with a clock, never a greyed-out block, with the reason beside it. */
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-soon, .workshop-page :is(#workshop,.ws-dialog) .ws-billing-soon:disabled { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 11px; border: 0; border-radius: 999px; background: var(--ap-color-control); color: var(--ws-ink); font: 500 14px/1.3 var(--ap-font-sans); opacity: 1; cursor: not-allowed; }
.workshop-page .ws-billing-soon svg { width: 16px; height: 16px; color: var(--ws-muted); }
/* 4. Adding credits: the pack and the coin exchange, each with its drawing. */
.workshop-page .ws-billing-topup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.workshop-page :is(.ws-billing-pack,.ws-billing-coins) { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border-radius: 20px; background: var(--ap-color-inset); }
.workshop-page .ws-billing-card-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.workshop-page .ws-billing-card-text { display: grid; gap: 2px; min-width: 0; }
.workshop-page .ws-billing-art { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--ap-color-control); }
.workshop-page .ws-billing-exchange { width: 88px; }
.workshop-page .ws-billing-redeem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.workshop-page .ws-billing-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--ap-color-control); }
.workshop-page .ws-billing-stepper > .ws-icon-button { width: 40px; height: 40px; min-height: 40px; border-radius: 9px; color: var(--ws-ink); font: 500 18px/1 var(--ap-font-sans); }
.workshop-page .ws-billing-stepper > .ws-icon-button:not(:disabled):hover { background: var(--ap-button-secondary-hover); }
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-stepper > .ws-icon-button:disabled { opacity: 1; color: #6a6a6a; }
.workshop-page .ws-billing-stepper > output { min-width: 76px; color: var(--ws-ink); font: 500 14px/1.4 var(--ap-font-sans); font-variant-numeric: tabular-nums; text-align: center; }
.workshop-page .ws-billing-redeem > .ws-button { flex: 1 1 auto; min-height: 44px; }
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-redeem > #billing-redeem:disabled { opacity: 1; background: var(--ap-color-control); color: var(--ws-quiet); }
.workshop-page .ws-billing-coins[data-ready=false] .ws-billing-stepper > output { color: var(--ws-muted); }
.workshop-page .ws-billing-content .ws-billing-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--ap-color-control); color: var(--ws-muted); font: 400 14px/1.5 var(--ap-font-sans); }
.workshop-page .ws-billing-content .ws-billing-status:empty { display: none; }
.workshop-page .ws-billing-status > span:first-child { display: grid; place-items: center; }
.workshop-page .ws-billing-status[data-tone=done] { color: var(--ws-ink); }
.workshop-page .ws-billing-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ws-ink); text-decoration: none; }
.workshop-page .ws-billing-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 5. This month by day, then the latest charges; the total is the month's 已用 above. */
.workshop-page .ws-billing-month-total { margin: -6px 0 0; color: var(--ws-muted); font: 400 14px/1.5 var(--ap-font-sans); }
.workshop-page .ws-billing-chart { position: relative; margin: 0; padding: 18px 18px 12px; border-radius: 20px; background: var(--ap-color-inset); }
.workshop-page .ws-chart-bar { fill: var(--ap-button-secondary-hover); }
.workshop-page .ws-chart-bar[data-state=used] { fill: #8c8c8c; }
.workshop-page .ws-chart-bar[data-state=today] { fill: var(--ws-ink); }
.workshop-page .ws-chart-bar[data-state=future] { fill: var(--ap-color-control); }
.workshop-page .ws-billing-chart-axis { display: flex; justify-content: space-between; margin-top: 10px; color: var(--ws-quiet); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-chart-empty { position: absolute; inset: 18px 18px 40px; display: grid; place-content: center; gap: 2px; text-align: center; }
.workshop-page .ws-billing-chart-empty > p { margin: 0; }
.workshop-page .ws-billing-chart-empty > p:first-child { color: var(--ws-ink); font: 500 14px/1.5 var(--ap-font-sans); }
.workshop-page .ws-billing-history ol { display: grid; margin: 0; padding: 4px 18px; border-radius: 20px; background: var(--ap-color-inset); list-style: none; }
.workshop-page .ws-billing-history li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; min-height: 52px; padding: 8px 0; }
.workshop-page .ws-billing-history li + li { box-shadow: inset 0 1px 0 var(--ap-color-line); }
.workshop-page .ws-billing-history li > span { display: grid; gap: 2px; min-width: 0; color: var(--ws-ink); font: 400 14px/1.45 var(--ap-font-sans); }
.workshop-page .ws-billing-history time { color: var(--ws-quiet); font: 400 14px/1.45 var(--ap-font-sans); }
.workshop-page .ws-billing-history strong { flex: none; color: var(--ws-ink); font: 500 14px/1.45 var(--ap-font-sans); font-variant-numeric: tabular-nums; }
.workshop-page .ws-billing-history li[data-kind=credit] strong { color: var(--ws-muted); }
.workshop-page .ws-billing-more { justify-self: start; min-height: 40px; padding: 8px 2px; color: var(--ws-muted); font: 400 14px/1.4 var(--ap-font-sans); }
.workshop-page .ws-billing-more:hover { color: var(--ws-ink); }
.workshop-page .ws-billing-confirm .ws-dialog-actions { justify-content: flex-end; padding-bottom: 0; }
/* The drawings' sizes and fills outrank the page's 17px outline-icon default (workshop/style.css, scoped by #workshop). */
.workshop-page :is(#workshop,.ws-dialog) .ws-paywall-art svg { width: 36px; height: 36px; fill: none; stroke: none; }
.workshop-page :is(#workshop,.ws-dialog) .ws-paywall-art svg.ws-ring { width: 32px; height: 32px; }
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-art svg { width: 48px; height: 48px; fill: none; stroke: none; }
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-exchange svg { width: 80px; height: 44px; }
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-emblem svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.workshop-page :is(#workshop,.ws-dialog) :is(.ws-billing-how-icon,.ws-billing-stat-icon) svg { width: 20px; height: 20px; }
.workshop-page :is(#workshop,.ws-dialog) .ws-billing-chart-plot svg { display: block; width: 100%; height: 88px; fill: none; stroke: none; }
.workshop-page :is(#workshop,.ws-dialog) :is(.ws-billing-check,.ws-billing-status,.ws-billing-link,.ws-billing-soon,.ws-card-action) svg { width: 16px; height: 16px; }
/* Narrow content: every part becomes one column. */
@container ws-dialog (width >= 700px) {
  .workshop-page .ws-billing-content > .ws-paywall { grid-template-columns: auto minmax(0, 1fr) auto; }
  .workshop-page .ws-billing-content > .ws-paywall .ws-paywall-actions { grid-column: auto; }
}
@container ws-dialog (width < 700px) {
  .workshop-page :is(.ws-billing-usage-grid,.ws-billing-how-grid,.ws-billing-plans,.ws-billing-topup-grid) { grid-template-columns: minmax(0, 1fr); }
  .workshop-page .ws-billing-remaining strong { font-size: 34px; }
}
@media (max-width: 600px) {
  .workshop-page .ws-billing-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .workshop-page .ws-billing-dialog > .ws-dialog-heading { padding: 20px 20px 14px; }
  .workshop-page .ws-billing-content { gap: 28px; padding: 4px 16px 20px; }
  .workshop-page :is(.ws-billing-month,.ws-billing-can) { padding: 18px; }
  .workshop-page .ws-billing-plan-head, .workshop-page .ws-billing-rows, .workshop-page .ws-billing-plan-foot { padding-inline: 18px; }
  .workshop-page .ws-billing-covers > img { width: 60px; height: 45px; }
  .workshop-page .ws-billing-redeem > .ws-button { flex: 1 1 100%; }
  .workshop-page .ws-credit-meter { min-height: 44px; }
  .workshop-page .ws-paywall-actions > :is(.ws-button,.ws-text-button), .workshop-page .ws-billing-can-actions > .ws-button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-page :is(.ws-credit-meter,.ws-paywall-actions > *,.ws-credit-track > span,.ws-ring-fill,.ws-billing-meter > span) { transition: none; }
}
@media (forced-colors: active) {
  .workshop-page .ws-credit-track, .workshop-page .ws-billing-meter { border: 1px solid CanvasText; }
  .workshop-page :is(.ws-credit-track,.ws-billing-meter) > span { forced-color-adjust: none; background: CanvasText; }
  .workshop-page .ws-ring-fill { stroke: CanvasText; }
  .workshop-page .ws-billing-band::before { display: none; }
  .workshop-page .ws-billing-plan[data-current=true] { outline: 2px solid CanvasText; }
}
/* The plan card at the foot of the sidebar's panel (billing-ui.mjs, in #site-nav-panel-footer): one quiet row with the
   plan and what is left, a small meter, and Upgrade. It sits outside #workshop, so it brings its own focus ring. */
.workshop-page .ws-plan-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--ap-color-inset); font-family: var(--ap-font-sans); }
.workshop-page .ws-plan-card[hidden] { display: none; }
.workshop-page .ws-plan-card-main { display: grid; flex: 1; gap: 7px; min-width: 0; min-height: 36px; align-content: center; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ws-ink); font: 400 14px/1.35 var(--ap-font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.workshop-page .ws-plan-card-title { overflow: hidden; color: var(--ws-muted); text-overflow: ellipsis; white-space: nowrap; transition: color var(--ap-duration-feedback); }
.workshop-page .ws-plan-card-main:hover .ws-plan-card-title { color: var(--ws-ink); }
.workshop-page .ws-plan-card-meter { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ap-button-secondary-hover); }
.workshop-page .ws-plan-card-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ws-ink); }
.workshop-page .ws-plan-card[data-level=empty] .ws-plan-card-meter > span { background: var(--ap-color-error); }
.workshop-page .ws-plan-card[data-level=empty] .ws-plan-card-title { color: var(--ap-color-error); }
.workshop-page .ws-plan-card-action { display: inline-flex; flex: none; align-items: center; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--ws-ink); color: var(--ap-color-on-action); font: 500 14px/1.3 var(--ap-font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--ap-duration-feedback); }
.workshop-page .ws-plan-card-action:hover { background: #fff; }
.workshop-page .ws-plan-card-action:active { transform: translateY(1px); transition-duration: var(--ap-duration-press); }
.workshop-page .ws-plan-card :is(a,button):focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .workshop-page :is(.ws-plan-card-title,.ws-plan-card-action) { transition: none; }
  .workshop-page .ws-plan-card-action:active { transform: none; }
}
@media (forced-colors: active) {
  .workshop-page .ws-plan-card { outline: 1px solid CanvasText; }
  .workshop-page .ws-plan-card-meter { border: 1px solid CanvasText; }
  .workshop-page .ws-plan-card-meter > span { forced-color-adjust: none; background: CanvasText; }
}