.ppage{flex:1 1 auto;min-width:0;min-height:0;display:flex}
.ph{flex:1 1 auto;display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);min-height:0}
.ph__rail{border-right:1px solid var(--line);background:linear-gradient(180deg,#111A20,#0E1418);
  padding:24px var(--pad) 22px;display:flex;flex-direction:column;gap:15px;overflow:auto;min-height:0}
.ph__h{margin:2px 0 0;line-height:.92;color:#E8F1F5;display:grid;gap:4px}
.ph__h1{font-family:var(--sans);font-size:clamp(38px,4vw,52px);font-weight:800;font-stretch:125%;
  font-variation-settings:"wdth" 125;letter-spacing:-.02em}
.ph__h2{font-family:var(--sans);font-size:clamp(38px,4vw,52px);font-weight:300;font-stretch:62%;
  font-variation-settings:"wdth" 62;letter-spacing:.01em;color:var(--s-proc)}
.ph__lede{margin:0;color:var(--dim);font-size:13.5px;line-height:1.6;max-width:42ch}

.xr{display:grid;gap:6px}
.xr__lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2)}
.xr input{width:100%;accent-color:var(--s-proc);height:18px;margin:0}

.ph__types{display:grid;gap:2px}
.pt{--c:var(--t1);display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;
  padding:9px 12px;border:1px solid var(--line);background:var(--sheet);transition:border-color .15s,background .15s}
.pt:hover{border-color:var(--c)}
.pt[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--sheet))}
.pt__sw{width:10px;height:10px;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
.pt__name{font-size:13px;color:var(--ink)}
.pt__n{font-family:var(--mono);font-size:13px;color:#E8F1F5;font-variant-numeric:tabular-nums}
.pt.t1{--c:var(--t1)} .pt.t2{--c:var(--t2)} .pt.t3{--c:var(--t3)} .pt.t4{--c:var(--t4)}
.ph__hint{margin:-8px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--dim-2)}

.ph__off{display:grid;gap:2px}
.ph__offhd{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);margin-bottom:4px}
.offl{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 10px;
  border:1px solid var(--line-soft);color:var(--dim);font-size:12.5px;text-decoration:none}
.offl b{font-family:var(--mono);font-weight:500;color:var(--s-proc)}
.offl span{font-family:var(--mono);font-size:11px;color:var(--ink)}
.offl:hover{border-color:var(--s-proc);color:var(--ink)}

.ph__stage{position:relative;min-width:0;min-height:0;overflow:hidden;
  background:
    radial-gradient(ellipse at 55% 48%,rgba(76,181,245,.10) 0%,transparent 55%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(42,58,68,.28) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(42,58,68,.28) 39px 40px),
    #0C1216}
.ph__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.ph__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.ph__labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.pl{--c:var(--t1);position:absolute;left:0;top:0;pointer-events:auto;display:grid;gap:5px;text-align:left;
  padding:8px 10px 9px;min-width:150px;max-width:210px;background:rgba(12,18,22,.9);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-top:2px solid var(--c);transition:opacity .2s,border-color .15s,background .15s}
.pl.t1{--c:var(--t1)} .pl.t2{--c:var(--t2)} .pl.t3{--c:var(--t3)} .pl.t4{--c:var(--t4)}
.pl:hover,.pl.hot{border-color:var(--c);background:rgba(18,27,33,.96)}
.pl.dim{opacity:.22!important}
.pl__bar{display:flex;gap:1px;height:3px}
.pl__bar i{display:block;background:var(--c)}
.pl__bar i.t1{--c:var(--t1)} .pl__bar i.t2{--c:var(--t2)} .pl__bar i.t3{--c:var(--t3)} .pl__bar i.t4{--c:var(--t4)}
.pl__t{font-size:12.5px;font-weight:600;color:#E8F1F5;line-height:1.25}
.pl__n{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--dim)}
.pl__s{display:none;font-size:11px;font-weight:600;color:#E8F1F5}
.ph__tip{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .12s;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink);background:rgba(10,15,18,.95);
  border:1px solid var(--s-proc);padding:4px 8px;white-space:nowrap}
.ph__drag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}

.pd{position:absolute;right:16px;top:16px;bottom:16px;width:min(360px,calc(100% - 32px));z-index:5;
  background:#0D1419;border:1px solid var(--line);border-left:2px solid var(--s-proc);
  padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  animation:pdIn .22s ease-out}
@keyframes pdIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.pd__x{position:absolute;right:10px;top:8px;font-size:22px;color:var(--dim);width:32px;height:32px}
.pd__x:hover{color:var(--ink)}
.pd__t{margin:0;font-size:22px;font-weight:700;color:#E8F1F5;font-variation-settings:"wdth" 112;line-height:1.15;padding-right:28px}
.pd__b{margin:0;font-size:13px;color:var(--dim);line-height:1.6}
.pd__mix{display:flex;gap:4px;flex-wrap:wrap}
.pd__list{list-style:none;margin:0;padding:0;overflow:auto;min-height:0;flex:1 1 auto;border-top:1px solid var(--line-soft)}
.pd__list li{display:grid;grid-template-columns:42px minmax(0,1fr) 12px 28px;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.pd__id{font-family:var(--mono);font-size:11px;color:var(--s-proc)}
.pd__nm{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd__list .st{font-size:0}
.pd__to{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--dim);
  border:1px solid var(--line);transition:color .15s,border-color .15s,background .15s}
.pd__to:hover,.pd__to:focus-visible{color:#0B1216;background:var(--s-proc);border-color:var(--s-proc)}

@media (max-width:820px){
  .ph{grid-template-columns:1fr;grid-template-rows:auto auto}
  .ppage{overflow:visible}
  .ph__stage{height:78vh;min-height:520px;order:-1}
  .ph__rail{border-right:none;border-top:1px solid var(--line)}
  .pl{min-width:0;max-width:none;padding:4px 7px 5px;gap:3px}
  .pl__t,.pl__n{display:none}
  .pl__s{display:block}
  .ph__drag{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.pd{animation:none}}