.pn{max-width:1320px;margin:0 auto;color:#f2ecfa;font-size:14px;line-height:1.45}.pn *{box-sizing:border-box}.pn [hidden]{display:none!important}
.pn-head{margin:0 0 14px}.pn-head h1{margin:0 0 4px;font-size:clamp(1.7rem,3vw,2.3rem)}.pn-head p{margin:0;color:#c9bedb;max-width:70ch}
.pn-work{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.pn-stage{position:sticky;top:88px;background:#1b1429;border:1px solid #4b3a66;border-radius:14px;overflow:hidden}.pn-view{height:min(62vh,600px);display:grid;place-items:center;padding:14px;overflow:auto;background:repeating-conic-gradient(#2a2038 0 25%,#221a2f 0 50%) 0 0/20px 20px}.pn-view canvas{display:block;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;box-shadow:0 6px 24px #0009}
.pn-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 12px;border-top:1px solid #4b3a66}.pn-bar .pn-grow{flex:1;min-width:120px;color:#b9abcf;font-size:12.5px}
.pn button,.pn .pn-file{font:inherit;color:#f2ecfa;background:#2c2142;border:1px solid #4b3a66;border-radius:8px;padding:7px 11px;min-height:36px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}.pn button:hover,.pn .pn-file:hover{border-color:#a874f0}.pn :focus-visible{outline:2px solid #fff;outline-offset:1px}.pn .pn-file{position:relative}.pn .pn-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pn .pn-go{background:#7c47c9;border-color:#a874f0;font-weight:700;padding:9px 18px}.pn button[aria-pressed=true]{background:#7c47c9;border-color:#c9a8f7;font-weight:700}
.pn-side{background:#211832;border:1px solid #4b3a66;border-radius:14px;padding:14px}.pn-side h2{font-size:12.5px;margin:14px 0 6px;color:#c9bedb;text-transform:uppercase;letter-spacing:.06em}.pn-side h2:first-child{margin-top:0}
.pn-types{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pn-seg{display:flex;gap:6px;flex-wrap:wrap}.pn-seg button{flex:1}.pn-help{margin:6px 0 0;color:#b9abcf;font-size:12.5px}
.pn label.pn-f{display:block;margin:9px 0 0;font-size:13px}.pn-f>span{display:flex;justify-content:space-between}.pn-f output{color:#c9a8f7}.pn input[type=range]{width:100%;accent-color:#a874f0;margin:4px 0 0}.pn input[type=number]{width:100%;background:#120c1b;color:#f2ecfa;border:1px solid #4b3a66;border-radius:7px;padding:6px 8px;font:inherit;margin-top:3px}.pn input[type=color]{width:100%;height:32px;background:none;border:1px solid #4b3a66;border-radius:7px;padding:2px;margin-top:3px}
.pn-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pn-check{display:flex;gap:7px;align-items:center;margin-top:9px;font-size:13px}.pn-check input{accent-color:#a874f0;width:16px;height:16px}
#pnStatus[data-error=true]{color:#ff9c9c}
@media(max-width:920px){.pn-work{grid-template-columns:minmax(0,1fr)}.pn-stage{position:static}.pn-view{height:320px}}