.playground-html { --pg-content-width:1376px; --pg-page-gutter:24px; --pg-display-font:Anton,Impact,'Arial Narrow',sans-serif; }
/* Collector workbench: readable controls, persistent tool labels and compact help. */
.playground-shell [data-pg-chrome] { scroll-margin-top: 94px; }
.playground-shell .pg-workspace-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:8px 0 12px; }
.playground-shell .pg-eyebrow { display:block; color:#ffbf00; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.playground-shell .pg-workspace-heading h1 { font-family:Impact,'Arial Narrow',sans-serif; font-size:32px; font-weight:400; line-height:1.15; margin-top:8px; letter-spacing:.015em; }
.playground-shell .pg-workspace-heading > div > p:not(.pg-eyebrow) { max-width:52rem; font-size:13px; line-height:1.6; color:#aaa; }
.playground-shell .pg-workspace-nav { position:sticky; top:80px; z-index:35; background:#0d0d0d; border:1px solid #d8dde4; border-radius:12px; padding:6px; }
.playground-shell .pg-tab-list { display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; }
.playground-shell .pg-mobile-nav-hint { display:none; }
.playground-shell .pg-tab-button { display:flex; flex:1 0 auto; align-items:center; justify-content:center; gap:8px; padding:13px 14px; border-radius:7px; font-size:13px; min-height:46px; white-space:nowrap; cursor:pointer; transition:background .15s,color .15s; }
.playground-shell .pg-tab-button[aria-selected=true] { background:#ffbf00; color:#111; }
.playground-shell .pg-tab-button:focus-visible, .playground-shell .pg-guide summary:focus-visible { outline:2px solid #ffbf00; outline-offset:3px; }
.playground-shell .pg-tab-button svg { width:16px; height:16px; flex-shrink:0; }
.playground-shell .pg-workspace-content { min-width:0; }
.playground-shell .pg-workspace-content [role=tabpanel] h1 { font-size:28px; line-height:1.2; }
.playground-shell .pg-workspace-content #pg-panel-home h1 { font-family:Impact,'Arial Narrow',sans-serif; font-size:40px; }
.pg-photo-slot-heading { min-height:44px; }
.playground-shell .pg-photo-slot > [x-show] { aspect-ratio:auto; height:220px; width:100%; }
.playground-shell .pg-photo-slot img { object-fit:contain; }
.playground-shell .pg-photo-slot[data-pg-photo-field^=defect] > [x-show] { height:140px; }
.playground-shell .pg-guide { background:#111111; border:1px solid #d8dde4; border-left:3px solid #ffbf00; border-radius:10px; margin:4px 0 20px; }
.playground-shell .pg-guide summary { display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; list-style:none; padding:18px 20px; }
.playground-shell .pg-guide summary::-webkit-details-marker { display:none; }
.playground-shell .pg-guide summary strong { display:block; font-size:18px; margin-top:6px; line-height:1.4; }
.playground-shell .pg-guide-toggle { color:#ffbf00; font-size:22px; transition:transform .15s; }
.playground-shell .pg-guide[open] .pg-guide-toggle { transform:rotate(180deg); }
.playground-shell .pg-guide-body { padding:0 20px 20px; }
.playground-shell .pg-guide-body > p { color:#aaa; font-size:13px; line-height:1.6; margin-bottom:18px; }
.playground-shell .pg-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.playground-shell .pg-guide li { display:flex; align-items:flex-start; gap:12px; }
.playground-shell .pg-step-number { flex:0 0 28px; height:28px; display:flex; align-items:center; justify-content:center; color:#ffbf00; background:#111111; border-radius:50%; font-size:12px; }
.playground-shell .pg-guide li strong { font-size:13px; line-height:1.5; }
.playground-shell .pg-guide li p { color:#b9b6ae; font-size:13px; line-height:1.6; margin:5px 0 0; }
.playground-shell [role=tabpanel]:focus-visible { outline:2px solid #ffbf00; outline-offset:4px; }
@media(max-width:900px) {
  .playground-shell .pg-workspace-heading { align-items:start; flex-direction:column; gap:8px; }
  .playground-shell .pg-workspace-heading > p { max-width:none; }
  .playground-shell .pg-tab-button { flex:0 0 auto; }
  .playground-shell .pg-mobile-nav-hint { display:block; color:#aaa; font-size:11px; margin:5px 8px 2px; }
  .playground-shell .pg-guide ol { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:767px) {
  .playground-shell { padding-bottom:0; }
  .playground-shell .pg-workspace-heading h2 { font-size:27px; }
  .playground-shell .pg-guide summary { padding:16px; }
  .playground-shell .pg-guide-body { padding:0 16px 16px; }
  .playground-shell .pg-photo-slot > [x-show] { height:180px; }
  .playground-shell .pg-workspace-content [role=tabpanel] h1 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { .playground-shell .pg-tab-button, .playground-shell .pg-guide-toggle { transition:none; } }

/* User preference: regular weight throughout Playground, including dynamic reports and CMS headings. */
.playground-html,
.playground-html *,
.playground-html *::before,
.playground-html *::after { font-weight: normal !important; }

/* Keep the cover and its percentage-positioned markers compact in the report. */
.playground-shell .pg-defect-canvas { width:min(100%, 360px, 40vh); aspect-ratio:5 / 7; margin-inline:auto; }

/* Paid design workbench. Hierarchy uses spacing and size; all weights stay regular. */
.pg-design-studio { padding:24px; }
.pg-design-studio header { margin-bottom:24px; }
.pg-design-studio h1 { font-size:28px; margin:8px 0; }
.pg-design-studio h2 { font-size:20px; margin-bottom:18px; }
.pg-design-studio h3 { font-size:17px; margin:12px 0; }
.pg-design-studio p { font-size:13px; line-height:1.65; color:#bbb; margin:10px 0; }
.pg-design-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.pg-design-card { padding:24px; border:1px solid #d8dde4; border-radius:12px; background:#111111; min-width:0; }
.pg-design-studio label { display:block; font-size:13px; margin:16px 0; }
.pg-design-studio input,.pg-design-studio textarea,.pg-design-studio select { display:block; width:100%; margin-top:8px; border:1px solid #d8dde4; background:#0d0d0d; color:#eee; padding:12px; border-radius:7px; font:inherit; }
.pg-design-studio textarea { resize:vertical; }
.pg-design-primary,.pg-design-secondary { display:inline-block; padding:12px 18px; border-radius:7px; cursor:pointer; font-size:13px; text-align:center; }
.pg-design-primary { background:#ffbf00; color:#111; border:1px solid #ffbf00; }
.pg-design-secondary { background:#171717; color:#eee; border:1px solid #d8dde4; margin:8px 0; }
.pg-design-studio button:disabled { opacity:.5; cursor:wait; }
.pg-design-studio :is(button,a,input,select,textarea):focus-visible { outline:2px solid #ffbf00; outline-offset:3px; }
.pg-design-studio .pg-design-error { padding:12px; border:1px solid #944; color:#ffd8d8; border-radius:7px; }
.pg-design-preview { width:100%; max-height:440px; object-fit:contain; display:block; background:#0d0d0d; border-radius:8px; margin-top:16px; }
.pg-design-empty { min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center; }
.pg-design-library { margin-top:20px; }
.pg-design-library-items { display:flex; flex-wrap:wrap; gap:12px; }
.pg-design-library-items small { display:block; color:#aaa; margin-top:6px; }
@media(max-width:800px) { .pg-design-layout { grid-template-columns:1fr; } .pg-design-studio,.pg-design-card { padding:16px; } }

/* Comicz workspace family: light working surfaces, black navigation, amber actions. */
.playground-shell {
  --pg-bg: 210 20% 98%; --pg-fg: 220 14% 12%; --pg-card: 0 0% 100%;
  --pg-popover: 0 0% 100%; --pg-muted: 210 14% 95%; --pg-muted-fg: 215 12% 39%;
  --pg-border: 216 13% 85%; --pg-input: 216 13% 85%;
  background:#f7f8fa; color:#171b22;
}
.playground-shell .pg-comicz-workspace { box-sizing:border-box; max-width:calc(var(--pg-content-width) + 2 * var(--pg-page-gutter)); padding:0 var(--pg-page-gutter) 40px; }
.playground-shell .pg-workspace-heading {
  background:#171717; color:#fff; margin:0 -24px; padding:28px 36px;
  border-bottom:3px solid #ffbf00; align-items:center;
}
.playground-shell .pg-workspace-heading h1 {
  font-family:Anton,Impact,'Arial Narrow',sans-serif; font-size:38px; line-height:1.12;
  margin:8px 0; letter-spacing:.01em;
}
.playground-shell .pg-workspace-heading p { color:#c5c9ce; font-size:14px; line-height:1.5; }
.playground-shell .pg-workspace-heading .pg-eyebrow { color:#ffbf00; font-size:11px; letter-spacing:.12em; }
.playground-shell .pg-workspace-account { display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-size:13px; }
.playground-shell .pg-access-pill { border:1px solid #ffbf00; border-radius:4px; padding:7px 11px; color:#ffdf82; }
.playground-shell .pg-workspace-account a { color:#fff; }
.playground-shell .pg-workspace-nav { background:#f7f8fa; border:0; border-bottom:1px solid #d8dadd; border-radius:0; padding:8px 0 0; top:80px; }
.playground-shell .pg-tab-list { gap:3px; padding-bottom:7px; }
.playground-shell .pg-tab-button { flex:0 0 auto; padding:11px 16px; border-radius:4px; color:#515b69; font-size:13px; }
.playground-shell .pg-tab-button:hover { background:#e9ecf0; color:#171717; }
.playground-shell .pg-tab-button[aria-selected=true] { background:#171717; color:#ffbf00; }
.playground-shell .pg-mobile-nav-hint { color:#59616b; }
.playground-shell .pg-workspace-content { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; padding-top:24px; align-items:start; }
.playground-shell .pg-workspace-help { min-width:0; position:sticky; top:155px; }
.playground-shell .pg-workspace-panels { min-width:0; }
.playground-shell .pg-workspace-panels > [role=tabpanel] { border-radius:6px; background:#fff; }
.playground-shell .pg-guide { background:#fff; border:1px solid #d8dde4; border-radius:6px; overflow:hidden; }
.playground-shell .pg-guide summary { padding:17px; color:#171b22; align-items:start; }
.playground-shell .pg-guide summary strong { display:block; font-size:16px; line-height:1.4; margin-top:7px; }
.playground-shell .pg-guide .pg-eyebrow { color:#ffbf00; font-size:10px; }
.playground-shell .pg-guide-body { padding:0 17px 20px; }
.playground-shell .pg-guide-body > p { color:#59616b; font-size:12px; line-height:1.6; margin-bottom:17px; }
.playground-shell .pg-guide ol { display:flex; flex-direction:column; gap:20px; }
.playground-shell .pg-guide li { align-items:start; }
.playground-shell .pg-guide li strong { color:#171b22; font-size:13px; line-height:1.4; }
.playground-shell .pg-guide li p { color:#59616b; font-size:12px; line-height:1.6; }
.playground-shell .pg-step-number { background:#ffbf00; color:#ffbf00; border:1px solid #ffbf00; border-radius:4px; }
.playground-shell .pg-guide-toggle { color:#59616b; }
.playground-shell .pg-home-overview { padding:24px; }
.playground-shell .pg-home-overview > :first-child h1 { font-size:30px; line-height:1.2; }
.playground-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { color:#171b22; background:#fff; border-color:#cdd3db; border-radius:5px; }
.playground-shell :is(input,textarea)::placeholder { color:#737e8c; }
.playground-shell .pg-design-studio { padding:24px; }
.playground-shell .pg-design-studio header p { color:#59616b; }
.playground-shell .pg-design-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.playground-shell .pg-design-card { background:#fff; border-color:#d8dde4; border-radius:6px; padding:20px; }
.playground-shell .pg-design-card :is(input,select,textarea) { background:#fff; color:#171b22; border-color:#cdd3db; }
.playground-shell .pg-design-note,.playground-shell .pg-design-library-items small { color:#59616b; }
.playground-shell .pg-design-primary { background:#ffbf00; border-color:#ffbf00; color:#171717; border-radius:5px; }
.playground-shell .pg-design-secondary { background:#fff; color:#171717; border-color:#cdd3db; border-radius:5px; }
.playground-shell .pg-design-error { color:#8f1d1d; background:#fff1f1; border-color:#e1aaaa; }
.playground-shell .pg-design-preview { background:#f0f1f3; border:1px solid #d8dde4; }
.playground-shell .text-brand { color:#ff9d00; }
.playground-shell .text-emerald-400 { color:#157347; }
.playground-shell .text-red-400 { color:#a42727; }
.playground-shell .text-amber-400 { color:#ff9d00; }
.playground-shell .text-blue-400 { color:#245fb3; }
.playground-shell .text-purple-400 { color:#7041a6; }
.playground-shell :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid #ff9d00; outline-offset:3px; }
@media(max-width:1100px) {
  .playground-shell .pg-workspace-content { grid-template-columns:230px minmax(0,1fr); gap:16px; }
  .playground-shell .pg-design-layout { grid-template-columns:1fr; }
}
@media(max-width:800px) {
  .playground-shell .pg-comicz-workspace { padding:0 var(--pg-page-gutter) 24px; }
  .playground-shell .pg-workspace-heading { margin:0 -16px; padding:24px 20px; align-items:flex-start; gap:18px; }
  .playground-shell .pg-workspace-heading h1 { font-size:30px; }
  .playground-shell .pg-workspace-heading p { font-size:13px; }
  .playground-shell .pg-workspace-account { align-items:flex-start; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .playground-shell .pg-workspace-content { display:block; padding-top:16px; }
  .playground-shell .pg-workspace-help { position:static; margin-bottom:16px; }
  .playground-shell .pg-tab-button { padding:10px 12px; min-height:44px; }
  .playground-shell .pg-guide ol { gap:14px; }
  .playground-shell .pg-home-overview,.playground-shell .pg-design-studio { padding:16px; }
  .playground-shell .pg-home-overview > :first-child h1 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { .playground-shell * { transition:none!important; animation:none!important; } }

/* One website hero, with fixed-menu clearance independent of utility extraction. */
.pg-site-content { padding-top:80px; }
.pg-main-hero { background:#000; color:#fff; border-bottom:3px solid #ffbf00; padding:52px var(--pg-page-gutter) 44px; }
.pg-main-hero-inner { max-width:var(--pg-content-width); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:48px; }
.pg-main-hero-copy { max-width:960px; min-width:0; }
.pg-main-hero-eyebrow { color:#ffbf00; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; }
.pg-main-hero h1 { font-family:var(--pg-display-font); font-size:clamp(32px,4.5vw,66px); line-height:1.08; text-transform:uppercase; margin:0 0 18px; }
.pg-main-hero-description { font-size:15px; line-height:1.7; color:#e5e5e5; max-width:850px; }
.pg-main-hero-description p { margin:0 0 8px; }
.pg-main-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
.pg-main-hero-actions a { display:inline-block; padding:13px 19px; min-height:44px; border-radius:4px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.pg-main-hero .pg-hero-primary { background:#ffbf00; color:#000; border:1px solid #ffbf00; }
.pg-main-hero .pg-hero-secondary { border:1px solid #ffbf00; color:#ffbf00; }
.pg-main-hero-account { display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex-shrink:0; font-size:13px; }
.pg-main-hero .pg-access-pill { border:1px solid #ffbf00; color:#ffbf00; border-radius:4px; padding:8px 12px; }
.pg-main-hero-account a { color:#fff; }
.pg-main-hero :focus-visible { outline:3px solid #ff9d00; outline-offset:4px; }
.playground-shell .pg-panel-banner { background:#111; color:#fff; padding:20px 24px; border-radius:6px 6px 0 0; border-bottom:2px solid #ffbf00; }
.playground-shell .pg-panel-banner :is(h1,h2,h3) { color:#fff; font-family:var(--pg-display-font); font-size:24px; line-height:1.25; letter-spacing:.01em; text-transform:uppercase; }
.playground-shell .pg-panel-banner p { color:#d8dde4; font-size:13px; line-height:1.6; margin-top:8px; }
.playground-shell .pg-panel-banner .pg-eyebrow { color:#ffbf00; }
.playground-shell .pg-guide summary { background:#111; color:#fff; border-bottom:2px solid #ffbf00; }
.playground-shell .pg-guide summary .pg-eyebrow,.playground-shell .pg-guide-toggle { color:#ffbf00; }
.playground-shell .pg-guide-body { padding-top:18px; }
.playground-shell .pg-step-number { color:#111; background:#ffbf00; border-color:#ffbf00; }
.playground-shell .pg-design-card > h2 { background:#111; color:#fff; margin:-20px -20px 20px; padding:16px 20px; border-radius:5px 5px 0 0; border-bottom:2px solid #ffbf00; font-size:17px; }
.playground-shell .pg-design-studio > .pg-panel-banner { margin-bottom:20px; }
.playground-shell .text-amber-400,.playground-shell .text-brand { color:#ff9d00; }
@media(max-width:800px) {
 .playground-html { --pg-page-gutter:20px; }
 .pg-main-hero { padding:32px var(--pg-page-gutter); }
 .pg-main-hero-inner { flex-direction:column; align-items:flex-start; gap:24px; }
 .pg-main-hero-account { flex-direction:row; align-items:center; flex-wrap:wrap; gap:16px; }
 .playground-shell .pg-panel-banner { padding:17px 18px; }
 .playground-shell .pg-panel-banner :is(h1,h2) { font-size:22px; }
}

/* Pricing uses the same black banner and light content surface as the tools. */
.playground-shell #pg-panel-home .pg-home-pricing { border:1px solid #d8dde4; border-radius:6px; background:#fff; overflow:hidden; }
.playground-shell #pg-panel-home .pg-home-pricing .pg-home-pricing-label { color:#ffbf00; font-size:11px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; }
.playground-shell #pg-panel-home #pg-home-pricing-title { font-size:clamp(22px,2.2vw,30px); line-height:1.35; margin:0; font-weight:400; }
.playground-shell #pg-panel-home .pg-home-pricing-body { display:flex; align-items:center; gap:24px; padding:24px; }
.playground-shell #pg-panel-home .pg-home-pricing-body p { flex:1; color:#59616b; font-size:13px; line-height:1.7; margin:0; }
.playground-shell #pg-panel-home .pg-home-pricing-action { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:#ffbf00; color:#000; padding:13px 20px; min-height:44px; border:1px solid #ffbf00; border-radius:4px; font-size:13px; line-height:1.4; text-decoration:none; }
.playground-shell #pg-panel-home .pg-home-pricing-action:hover { background:#ff9d00; border-color:#ff9d00; }
.playground-shell #pg-panel-home .pg-home-pricing-action:focus-visible { outline:3px solid #ff9d00; outline-offset:3px; }
@media(max-width:800px) { .playground-shell #pg-panel-home .pg-home-pricing-body { flex-direction:column; align-items:flex-start; padding:18px; gap:18px; } }

/* Access confirmation must remain readable on the light Plans surface. */
.playground-shell [data-pg-plans-have-access] { background:#e4f4ec; border-color:#79b99a; border-radius:6px; }
.playground-shell [data-pg-plans-have-access] p,
.playground-shell [data-pg-plans-have-access] strong { color:#145438; opacity:1; }
.playground-shell [data-pg-plans-have-access] svg { color:#145438; }
.playground-shell [data-pg-plans-have-access] button:first-child { background:#ffbf00; color:#000; border:1px solid #ffbf00; border-radius:4px; }
.playground-shell [data-pg-plans-have-access] button:first-child:hover { background:#ff9d00; border-color:#ff9d00; }
.playground-shell [data-pg-plans-have-access] button:focus-visible { outline:3px solid #145438; outline-offset:3px; }
.playground-shell [data-pg-plan-tier] .text-emerald-400 { color:#145438; }

/* Keep Playground titles in the same display family as the main hero. */
.playground-shell .pg-workspace-panels [role=tabpanel] :is(h1,h2,h3),
.playground-shell .pg-guide summary strong {
  font-family:var(--pg-display-font);
}
.playground-shell #pg-elite-pricing-title { text-transform:uppercase; }