/* Workspace uses the site's semantic light/dark brand tokens. */
[data-playground] { width:calc(100% - 48px); max-width:1800px; margin:24px auto 40px; font-size:14px; }
[data-playground] *,[data-playground] *::before,[data-playground] *::after { box-sizing:border-box; }
.pg-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.pg-header>div { display:flex; align-items:baseline; gap:18px; }
.pg-header h1 { font:600 26px/1.2 var(--headline); letter-spacing:-.03em; margin:0; }
.pg-header p { margin:0; color:var(--muted); }
.pg-header nav { display:flex; gap:18px; font-size:13px; flex-shrink:0; }
.pg-banner { padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); margin-bottom:16px; font-size:13px; }
.pg-banner a { margin-left:8px; white-space:nowrap; }
.pg-workspace { display:grid; grid-template-columns:228px minmax(0,1fr) 350px; grid-template-rows:auto 1fr; gap:16px; align-items:start; }
.pg-card { border:1px solid var(--line); background:var(--surface); padding:18px; border-radius:var(--dm-radius); min-width:0; }
.pg-card h2 { font-size:16px; margin:0 0 14px; }
.pg-card h3 { margin:24px 0 8px; font-size:15px; }
.pg-library { grid-column:1; grid-row:1 / 3; min-width:0; position:sticky; top:90px; max-height:calc(100vh - 110px); overflow:auto; padding-right:4px; }
.pg-library>#pg-new { width:100%; justify-content:flex-start; margin-bottom:18px; }
.pg-library summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; padding:8px 2px; }
.pg-library summary::after { content:'⌄'; color:var(--muted); }
.pg-library details:not([open]) summary::after { content:'›'; }
.pg-library summary span { margin-left:auto; margin-right:12px; color:var(--muted); font:11px var(--mono); }
.pg-gallery { display:grid; gap:4px; margin-top:6px; }
.pg-gallery button { display:block; width:100%; text-align:left; padding:10px; background:transparent; color:var(--ink); border:1px solid transparent; border-radius:8px; cursor:pointer; font:500 13px/1.4 var(--sans); }
.pg-gallery button:hover,.pg-gallery button[aria-current=true] { background:var(--surface); border-color:var(--line); }
.pg-gallery small { display:flex; flex-wrap:wrap; gap:4px; color:var(--muted); margin-top:6px; font:10px/1.5 var(--mono); }
.pg-chip { border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.pg-thumb { float:right; width:32px; height:32px; object-fit:cover; border:1px solid var(--line); border-radius:5px; margin-left:5px; }
.pg-history { border-top:1px solid var(--line); margin-top:18px; padding-top:10px; }
#pg-history { display:grid; gap:5px; margin:8px 0; }
#pg-history .button { white-space:normal; text-align:left; justify-content:flex-start; font-size:11px; padding:6px 8px; min-height:32px; overflow-wrap:anywhere; }
#pg-history p { color:var(--muted); font-size:12px; }
.pg-library .microcopy { font-size:11px; line-height:1.5; }
#pg-clear-history { font-size:11px; min-height:30px; padding:5px 8px; }
.pg-composer { grid-column:2; grid-row:1 / 3; background:var(--paper); padding-bottom:0; }
.pg-inspector { grid-column:3; grid-row:1 / 3; display:grid; gap:16px; position:sticky; top:90px; max-height:calc(100vh - 110px); overflow:auto; min-width:0; }
.pg-settings { min-width:0; }
.pg-results { min-width:0; }
.pg-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:10px; }
.pg-toolbar label { margin:0!important; }
.pg-toolbar #pg-balance { grid-column:1 / -1; font:12px var(--mono); padding:8px 0; border-top:1px solid var(--line); }
.pg-card input:not([type=file]),.pg-card select,.pg-card textarea { width:100%; min-width:0; }
.pg-card select,.pg-card input { min-height:36px; font-size:13px; }
.pg-card textarea { font:12px/1.6 var(--mono); resize:vertical; background:var(--paper); color:var(--ink); }
.pg-card label { display:block; margin:10px 0 5px; font-size:12px; font-weight:500; }
.pg-card .microcopy,.pg-card .field-hint { font-size:11px; line-height:1.5; color:var(--muted); }
#pg-model-info { margin:10px 0 6px; }
.pg-settings>.microcopy { margin:0 0 10px; }
#pg-key-panel { border-top:1px solid var(--line); }
#pg-key-panel summary { cursor:pointer; font-size:12px; padding:10px 0 0; }
.pg-key-row { display:grid; gap:8px; margin-top:8px; }
.pg-key-row .button { font-size:12px; min-height:34px; }
.pg-composer-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.pg-composer-head h2 { margin:0; }
.pg-segments { display:flex; padding:3px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.pg-segments button { cursor:pointer; border:0; border-radius:4px; padding:5px 9px; color:var(--muted); background:transparent; font:12px var(--sans); }
.pg-segments button[aria-pressed=true] { background:var(--paper); color:var(--ink); box-shadow:0 1px 3px #0001; }
.pg-editor { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
#pg-state { display:block; border:0; border-radius:0; min-height:132px; padding:14px; }
#pg-size { border-top:1px solid var(--line); background:var(--surface); margin:0; padding:8px 12px; }
.pg-card fieldset { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:12px; border:1px solid var(--line); background:var(--surface); border-radius:8px; margin:12px 0; padding:12px; min-width:0; }
.pg-card legend { padding:0 6px; color:var(--muted); font-size:11px; }
.pg-card fieldset label[for$=name] { grid-column:1; grid-row:1; }
.pg-card fieldset input { grid-column:1; grid-row:2; }
.pg-card fieldset label[for$=type] { grid-column:2; grid-row:1; }
.pg-card fieldset select { grid-column:2; grid-row:2; }
.pg-card fieldset label[for$=criteria],.pg-card fieldset textarea { grid-column:1 / -1; }
.pg-card fieldset textarea { min-height:86px; }
.pg-card fieldset button { grid-column:1 / -1; justify-self:start; min-height:28px; font-size:11px; margin-top:8px; padding:4px 8px; }
#pg-add { font-size:12px; min-height:34px; }
#pg-validation { font-size:12px; overflow-wrap:anywhere; }
#pg-validation:empty { margin:10px 0; }
#pg-validation[data-invalid=true] { color:var(--amber); }
.pg-actionbar { position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--paper); padding:14px 0; margin-top:12px; border-top:1px solid var(--line); z-index:2; }
.pg-actionbar .button { min-height:38px; font-size:12px; }
.pg-actionbar kbd { color:var(--muted); font:10px var(--mono); }
#pg-copy { margin-left:auto; }
.pg-empty { color:var(--muted); padding:22px 0; line-height:1.7; font-size:13px; }
#pg-result>section { padding-bottom:12px; }
#pg-result h3 { font:11px var(--mono); color:var(--muted); margin:14px 0 6px; }
#pg-result strong { display:block; font:600 28px/1.2 var(--headline); margin-bottom:16px; overflow-wrap:anywhere; }
.pg-bar { display:grid; grid-template-columns:minmax(60px,1fr) 1.5fr 44px; gap:8px; align-items:center; margin:10px 0; font-size:11px; overflow-wrap:anywhere; }
.pg-bar meter { width:100%; accent-color:var(--green); }
.pg-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; border-top:1px solid var(--line); padding-top:16px; margin:12px 0 0; }
.pg-metrics>div { min-width:0; }
.pg-metrics dt { color:var(--muted); font:10px var(--sans); margin-bottom:4px; }
.pg-metrics dd { margin:0; font:11px/1.5 var(--mono); overflow-wrap:anywhere; }
.pg-metrics .pg-wide { grid-column:1 / -1; }
.pg-metric-copy { border:1px solid var(--line); background:var(--paper); color:var(--muted); border-radius:4px; padding:2px 6px; margin:4px 0 0 6px; cursor:pointer; font:10px var(--sans); }
#pg-error { width:100%; margin:0; padding:12px; border:1px solid var(--amber); overflow-wrap:anywhere; font-size:12px; }
#pg-image-area { border:1px dashed var(--line); border-radius:8px; padding:14px; margin:18px 0; background:var(--surface); }
#pg-image-area>label { margin-top:0; }
#pg-image { width:100%; font-size:11px; color:var(--muted); }
#pg-image::file-selector-button { padding:8px 10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:6px; cursor:pointer; margin-right:8px; }
.pg-image-preview { display:flex; flex-direction:column; align-items:start; gap:6px; }
#pg-preview { max-width:100%; max-height:140px; object-fit:contain; margin:6px 0; border-radius:6px; }
#pg-remove-image { font-size:11px; min-height:28px; padding:4px 8px; }
#pg-code { font:12px/1.6 var(--mono); max-height:55vh; overflow:auto; background:var(--paper); padding:16px; }
#pg-copy-dialog { width:min(800px,calc(100vw - 32px)); }
#pg-account { width:calc(100% - 48px); margin:32px auto; border-top:1px solid var(--line); padding-top:14px; }
#pg-account>summary { cursor:pointer; color:var(--muted); font-size:12px; }
#pg-account .dashboard-intro { display:none; }
.pg-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
[data-playground] button:focus-visible,[data-playground] summary:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
@media(max-width:1099px) {
  .pg-workspace { grid-template-columns:minmax(0,1fr); gap:16px; }
  .pg-inspector { display:contents; }
  .pg-settings,.pg-composer,.pg-results,.pg-library { grid-column:1; grid-row:auto; position:static; }
  .pg-settings { order:0; }.pg-composer { order:1; }.pg-results { order:2; }.pg-library { order:3; max-height:none; padding:0; }
  .pg-toolbar { grid-template-columns:1fr 1fr; }.pg-toolbar #pg-balance { grid-column:1 / -1; }
  .pg-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
  [data-playground] { width:calc(100% - 28px); margin-top:18px; }
  .pg-header { align-items:start; }.pg-header>div { display:block; }.pg-header h1 { font-size:23px; }.pg-header p { font-size:12px; margin-top:6px; }
  .pg-header nav { gap:8px; flex-direction:column; font-size:11px; }
  .pg-card { padding:14px; }.pg-composer { padding-bottom:0; }.pg-gallery { grid-template-columns:1fr 1fr; }
  .pg-composer-head h2 { font-size:14px; }.pg-segments button { font-size:11px; padding:5px 7px; }
  .pg-actionbar { gap:8px; }.pg-actionbar kbd { font-size:9px; }#pg-copy { margin-left:0; }
  #pg-account { width:calc(100% - 28px); }
}