.pg-main{padding:48px 0 70px}.pg-intro{margin-bottom:32px;max-width:none}.pg-intro-art{width:min(100%,1160px);margin:0 0 25px;line-height:0}
.pg-intro-art img{display:block;width:100%;height:auto}.pg-intro p:last-child{font-size:clamp(17px,1.8vw,22px);line-height:1.4;margin:0}.pg-drop{border:1px dashed var(--ink);border-radius:16px;padding:25px;display:grid;grid-template-columns:1fr 1px 1fr;gap:25px;align-items:center;margin-bottom:24px}.pg-drop.drag{background:#ec6b2d22;border-color:var(--orange)}.pg-drop strong{font:800 32px/1.1 var(--display-font)}.pg-drop p{margin:8px 0 0;font-size:14px}.pg-divider{height:70px;background:var(--line)}.pg-file-link{font-weight:800;cursor:pointer}.pg-file-link:hover{color:var(--orange)}.pg-micro{font-size:11px;font-weight:800;letter-spacing:.08em}.pg-row{display:flex;gap:9px;margin-top:11px}.pg-row select{width:100%;min-width:0}.pg-drop select,.pg-bottom select{font:inherit;border:1px solid var(--ink);padding:9px;border-radius:9px;color:var(--ink);background:var(--cream)}.pg-row button,.pg-bottom button{background:var(--ink);color:var(--cream);font-family:inherit;font-size:12px;font-weight:800;border:1px solid var(--ink);border-radius:9px;padding:9px 15px;cursor:pointer}.pg-row button:hover:enabled,.pg-bottom button:hover:enabled{background:var(--orange);border-color:var(--orange)}.pg-row button:disabled,.pg-bottom button:disabled{opacity:.4;cursor:default}.pg-workbench{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(285px,1fr);gap:18px}.pg-preview,.pg-controls,.pg-console{border:1px solid var(--ink);border-radius:16px;overflow:hidden}.pg-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:13px 16px;font-size:11px;font-weight:800;letter-spacing:.07em}.pg-bar span:last-child{color:#6c6c6c;text-align:right;overflow-wrap:anywhere}.pg-bar button{border:0;background:transparent;font:inherit;cursor:pointer}.pg-stage{width:100%;position:relative;aspect-ratio:16/9;background:#1c1713;overflow:hidden}.pg-stage[data-ratio="1:1"]{aspect-ratio:1}.pg-stage[data-ratio="4:3"]{aspect-ratio:4/3}.pg-stage[data-ratio="9:16"]{aspect-ratio:9/16;max-width:430px;margin:auto}.pg-stage iframe,.pg-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}.pg-stage [hidden]{display:none!important}.pg-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e6d2b8;gap:8px}.pg-empty strong{font:800 clamp(40px,8vw,84px)/1 var(--display-font)}.pg-empty span{font-size:10px;letter-spacing:.15em;font-weight:800}.pg-bottom{min-height:61px;padding:12px 15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pg-bottom label{font-size:11px;font-weight:800;display:flex;align-items:center;gap:6px}.pg-bottom select{padding:7px}.pg-bottom output{font-size:12px;font-weight:700;margin-left:auto}.pg-fields{padding:16px;max-height:520px;overflow:auto}.pg-fields>p{font-size:13px;color:#666}.pg-control{padding:0 0 15px;margin:0 0 14px;border-bottom:1px solid var(--soft-line)}.pg-control:last-child{border:0;padding-bottom:0;margin:0}.pg-control-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:800;margin-bottom:9px}.pg-control-label output{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.pg-control input[type=range]{width:100%;accent-color:var(--orange)}.pg-color{display:grid;grid-template-columns:1fr 50px;gap:4px 12px}.pg-color .pg-control-label{margin:0}.pg-color input[type=color]{width:50px;height:32px;padding:2px;background:transparent;border:1px solid var(--ink)}.pg-color input[type=range]{grid-column:span 2}.pg-console{margin-top:18px}.pg-console #pg-status{font-size:13px;font-weight:700;margin:14px 16px 7px}.pg-console pre{margin:0;padding:10px 16px 17px;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;color:#555;max-height:160px;overflow:auto}.pg-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:37px}.pg-notes h2{font:800 26px/1 var(--display-font);margin:0 0 12px}.pg-notes p{font-size:13px;line-height:1.52;margin:0}@media(max-width:900px){.pg-workbench{grid-template-columns:1fr}.pg-notes{grid-template-columns:1fr 1fr}}@media(max-width:650px){.pg-main{padding-top:25px}.pg-drop{grid-template-columns:1fr;gap:19px}.pg-divider{height:1px;width:100%}.pg-notes{grid-template-columns:1fr}.pg-bottom output{margin-left:0}}

/* V0.19.1: dynamic render column, horizontal color dock, folded diagnostics. */
.pg-workbench { align-items: stretch; grid-template-columns: minmax(0, 1.5fr) minmax(285px, 1fr); }
.pg-preview { display: flex; flex-direction: column; min-width: 0; }
.pg-controls { min-width: 0; }
.pg-fields { max-height: none; overflow: visible; }
.pg-stage {
  display: block;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 340px;
  aspect-ratio: auto !important;
}
.pg-surface { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: hidden; background: #1c1713; }
.pg-surface[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.pg-surface[data-ratio="1:1"] { aspect-ratio: 1; }
.pg-surface[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.pg-surface[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
.pg-surface iframe, .pg-surface canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.pg-surface [hidden] { display:none !important; }
.pg-colors-dock { border-top: 1px solid var(--ink); }
.pg-colors-grid { padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 18px; }
.pg-colors-grid > p { grid-column: 1 / -1; margin: 0; color: #666; font-size: 13px; }
.pg-colors-grid .pg-control { border-bottom: 0; border-right: 1px solid var(--soft-line); padding: 0 18px 0 0; margin: 0; }
.pg-colors-grid .pg-control:last-child { border-right: 0; }
.pg-console { margin-top: 18px; }
.pg-console summary { cursor: pointer; list-style: none; user-select: none; border-bottom: 0; }
.pg-console summary::-webkit-details-marker { display: none; }
.pg-console summary::before { content: '+'; font-size: 17px; line-height: 1; margin-right: 8px; }
.pg-console[open] summary::before { content: '−'; }
.pg-console[open] summary { border-bottom: 1px solid var(--line); }
.pg-console #pg-status { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: normal; color: #666; text-align: right; }
.pg-console #pg-status.pg-status-error { color: var(--orange-deep, #C94B2E); }
.pg-diagnostics-body { padding: 13px 16px 17px; }
.pg-diagnostics-body #pg-clear { display: block; margin-left: auto; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.pg-diagnostics-body pre { padding: 10px 0 0; max-height: 200px; }
@media(max-width:900px){
  .pg-workbench { grid-template-columns: 1fr; }
  .pg-stage { flex: initial; height: min(60vw, 510px); min-height: 260px; }
}
@media(max-width:650px){
  .pg-stage { height: min(72vw, 360px); min-height: 210px; }
  .pg-colors-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pg-colors-grid .pg-control { border-right: 0; }
  .pg-colors-grid .pg-control:nth-child(odd) { padding-right: 12px; border-right:1px solid var(--soft-line); }
  .pg-console #pg-status { max-width: 58%; }
}

/* V0.19.2 — true adaptive canvas, no aspect-ratio selector. */
.pg-stage { overflow: hidden; }
.pg-surface { inset: 0; width: 100% !important; height: 100% !important; top: 0; left: 0; transform: none; aspect-ratio: auto; }
.pg-empty { padding: 18px; }
.pg-empty img { display: block; max-width: min(86%, 580px); max-height: 78%; width: auto; height: auto; object-fit: contain; }
.pg-row button { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-width: 78px; }
.pg-intro p:last-child { max-width: none; }


/* V0.19.3 — predictable changeover, filename action and loading placeholder. */
.pg-drop-action { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:.28em; row-gap:.12em; font:800 32px/1.1 var(--display-font); }
.pg-drop-action strong { font:inherit; transition:color 150ms ease; }
.pg-drop-action .pg-file-link { display:inline-flex; align-items:baseline; font:inherit; color:var(--ink); text-decoration:none; outline-offset:4px; }
.pg-drop-action .pg-file-link:hover,.pg-drop-action .pg-file-link:focus-visible,.pg-drop-action .pg-file-link:active { color:var(--orange); }
.pg-drop-action:has(.pg-file-link:hover) strong,.pg-drop-action:has(.pg-file-link:focus-visible) strong,.pg-drop-action:has(.pg-file-link:active) strong { color:var(--orange); }
.pg-file-arrow { display:inline-block; width:0; opacity:0; overflow:hidden; white-space:nowrap; transform:translateX(-5px); transition:width 150ms ease,opacity 150ms ease,transform 150ms ease; }
.pg-file-link:hover .pg-file-arrow,.pg-file-link:focus-visible .pg-file-arrow,.pg-file-link:active .pg-file-arrow { width:1em; opacity:1; transform:none; }
.pg-surface .pg-empty { z-index:5; background:#1c1713; pointer-events:none; }
.pg-surface .pg-empty[hidden] { display:none !important; }
.pg-surface .pg-empty img { opacity:1; }

/* V0.19.5 — compact, accessible performance gauges in preview; no history graph. */
.pg-drop-action:has(.pg-file-link:hover) strong,
.pg-drop-action:has(.pg-file-link:focus-visible) strong,
.pg-drop-action:has(.pg-file-link:active) strong { color:var(--ink); }
.pg-drop-action .pg-file-link { gap:.32em; }
.pg-file-arrow { display:inline-block; width:0; height:.73em; flex:0 0 auto; opacity:0; margin:0; background:currentColor;
 -webkit-mask:url("../icon-arrow-up-right.svg") center/contain no-repeat;
 mask:url("../icon-arrow-up-right.svg") center/contain no-repeat;
 transform:translateX(-3px); transition:width .15s ease,opacity .15s ease,transform .15s ease; }
.pg-file-link:hover .pg-file-arrow,.pg-file-link:focus-visible .pg-file-arrow,.pg-file-link:active .pg-file-arrow {
 width:.73em; opacity:1; transform:translateX(0); }
.pg-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; padding:12px 15px; }
.pg-bottom-actions { display:flex; flex:0 0 auto; gap:8px; }
.pg-target-control { display:flex; flex:0 0 auto; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:.055em; white-space:nowrap; }
.pg-target-control select { min-width:72px; padding:7px 8px; border:1px solid var(--ink); border-radius:8px; background:var(--cream); color:var(--ink); font-family:inherit; font-size:11px; font-weight:700; line-height:1.2; cursor:pointer; }
.pg-compact-meters { margin-left:auto; display:flex; align-items:flex-end; justify-content:flex-end; gap:12px; flex:1 1 300px; min-width:0; }
.pg-mini-meter { display:flex; flex:1 1 0; flex-direction:column; align-items:center; min-width:90px; max-width:132px; gap:3px; --meter-color:#6a9e5d; }
.pg-mini-meter[data-health="idle"],.pg-mini-meter[data-health="monitoring"],.pg-mini-meter[data-health="paused"] { --meter-color:#777; }
.pg-mini-meter[data-health="warning"] { --meter-color:#ec6b2d; }
.pg-mini-meter[data-health="critical"] { --meter-color:#c94b2e; }
.pg-mini-label { text-align:center; font-size:9px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.pg-mini-gauge { position:relative; width:100%; max-width:100px; height:56px; }
.pg-mini-gauge svg { display:block; width:100%; height:100%; overflow:visible; }
.pg-gauge-track,.pg-gauge-progress { fill:none; stroke-width:7; stroke-linecap:round; }
.pg-gauge-track { stroke:rgba(0,0,0,.13); }
.pg-gauge-progress { stroke:var(--meter-color); transition:stroke-dashoffset .25s ease,stroke .25s ease; }
.pg-gauge-value { position:absolute; display:block; bottom:0; left:0; width:100%; font-size:14px; line-height:1.15; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pg-diagnostics-body .pg-perf-note { margin:0 0 14px; padding:0; font-size:11px; color:#555; line-height:1.45; }
.pg-log-header { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--soft-line); padding-top:13px; }
.pg-log-header span { font-size:10px; font-weight:800; letter-spacing:.07em; }
.pg-diagnostics-body .pg-log-header #pg-clear { margin:0; }
@media(max-width:1150px){
 .pg-compact-meters { flex-basis:100%; justify-content:flex-start; margin-left:0; }
 .pg-mini-meter { flex:0 1 110px; }
}
@media(max-width:650px){
 .pg-bottom { gap:13px; }
 .pg-compact-meters { gap:6px; justify-content:space-between; }
 .pg-mini-meter { flex:1 1 0; min-width:0; }
 .pg-mini-label { font-size:8px; }
 .pg-gauge-value { font-size:12px; }
 .pg-target-control { flex:1 1 auto; justify-content:flex-end; }
}
@media(prefers-reduced-motion:reduce){
 .pg-gauge-progress,.pg-file-arrow { transition:none; }
}

/* V0.20.0 — integrated five-layer Playground. */
.pg-file-arrow{height:.803em !important}
.pg-file-link:hover .pg-file-arrow,.pg-file-link:focus-visible .pg-file-arrow,.pg-file-link:active .pg-file-arrow{width:.803em !important}
.pg-layer-rack{margin-bottom:19px}
.pg-layer-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px}
.pg-layer-heading h2{font:800 clamp(22px,2.3vw,31px)/1 var(--display-font);letter-spacing:.04em;margin:0}
.pg-layer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.pg-layer-card{border:1px solid var(--line);border-radius:13px;padding:11px 11px 10px;min-width:0;background:var(--panel);transition:border-color .12s,background .12s}
.pg-layer-card.is-active{border-color:var(--ink);background:var(--cream-deep);box-shadow:inset 0 0 0 1px var(--ink)}
.pg-layer-card.is-loading{border-color:var(--orange)}
.pg-layer-top{display:flex;align-items:center;gap:5px}
.pg-layer-pick{font:800 24px/1 var(--display-font);border:0;background:none;color:var(--ink);cursor:pointer;margin:0 auto 0 0;padding:3px 2px}
.pg-layer-card.is-active .pg-layer-pick{color:var(--orange-deep)}
.pg-layer-visibility,.pg-layer-clear{font:800 10px/1 var(--display-font);border:1px solid var(--line);border-radius:6px;padding:7px 6px;cursor:pointer;background:transparent;color:var(--ink)}
.pg-layer-visibility[aria-pressed="false"]{opacity:.45}.pg-layer-visibility:hover,.pg-layer-clear:hover{border-color:var(--orange);color:var(--orange-deep)}
.pg-layer-clear{font-size:17px;padding:3px 7px}.pg-layer-clear:disabled{opacity:.25;cursor:default}
.pg-layer-name{font-size:10px;font-weight:700;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:5px 0 8px;min-height:15px;color:#555}
.pg-opacity-row{display:flex;align-items:center;gap:5px;justify-content:center;margin-bottom:7px}
.pg-opacity-slider{flex:1 1 70px;width:100%;min-width:25px;max-width:110px;margin:0;accent-color:var(--orange);cursor:pointer;touch-action:pan-y}
.pg-opacity-number{width:51px;min-width:0;height:30px;border:1px solid var(--line);border-radius:6px;background:transparent;padding:4px 3px;text-align:right;font:700 12px/1.2 inherit;font-variant-numeric:tabular-nums}
.pg-opacity-row>span{font-size:10px;font-weight:800;color:#555}
.pg-blend-select{width:100%;min-width:0;font:700 10px/1.3 inherit;letter-spacing:.04em;border:1px solid var(--line);border-radius:6px;padding:6px 3px;background:var(--cream);color:var(--ink)}
.pg-drop-target{display:block;font:800 10px/1.1 var(--display-font);letter-spacing:.08em;margin-bottom:9px;color:var(--orange-deep)}
.pg-drop{margin-bottom:19px}
.pg-frame-host,.pg-composite{position:absolute;inset:0;width:100%;height:100%}
.pg-layer-frame{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;opacity:0;pointer-events:none;border:0;visibility:visible}
#pg-composite{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pg-surface .pg-empty{z-index:3}
.pg-control input[type=range]{touch-action:pan-y}
@media(max-width:1080px){.pg-layer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.pg-colors-grid{grid-template-columns:1fr}.pg-colors-grid .pg-control{padding:0;margin:0;border-right:0 !important}.pg-layer-heading{flex-direction:column;align-items:flex-start;gap:6px}.pg-layer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-layer-card{padding:9px}}