.pm-section {
  margin-top:clamp(32px,4.5vw,68px); padding:clamp(20px,3vw,42px);
  color:var(--pv-text); background:linear-gradient(115deg,var(--pv-panel),rgb(17 36 26 / .93));
  border:1px solid var(--pv-line); border-radius:12px;
}
.pm-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:clamp(28px,7vw,100px); }
.pm-intro h2 { color:var(--pv-text); font:600 clamp(1.9rem,3.2vw,3.2rem)/1.13 var(--serif); letter-spacing:-.035em; margin:.2em 0 .42em; }
.pm-intro .eyebrow { color:var(--pv-gold); }
.pm-intro>p:not(.eyebrow),.pm-note { color:var(--pv-muted); max-width:53ch; line-height:1.62; }
.pm-intro .pm-context { border-left:2px solid #c2ad79; padding-inline-start:12px; font-size:.9rem; margin-top:18px; }
.pm-options { display:grid; gap:8px; }
.pm-panel { border:1px solid var(--pv-line); background:#152d20; border-radius:9px; }
.pm-panel[open] { border-color:#90a88a; background:#1d3728; }
.pm-panel summary { cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto 14px; align-items:center; gap:10px; min-height:57px; padding:12px 16px; color:var(--pv-text); list-style:none; }
.pm-panel summary::-webkit-details-marker { display:none; }
.pm-panel summary:focus-visible,.pm-field :focus-visible { outline:2px solid var(--pv-gold); outline-offset:2px; border-radius:5px; }
.pm-title-line { min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 12px; }
.pm-method { font-weight:650; line-height:1.35; }
.pm-minimum { min-width:0; color:var(--pv-gold); font-size:.88rem; line-height:1.4; font-weight:600; }
.pm-tag { max-width:18ch; font-size:.8125rem; font-weight:600; line-height:1.35; background:#304a37; border-radius:4px; padding:3px 7px; color:#f5edd6; }
.pm-caret { width:8px; height:8px; border:solid #dbe4d3; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.pm-panel[open] .pm-caret { transform:rotate(225deg); }
.pm-form { padding:0 16px 17px; }
.pm-field { display:grid; gap:5px; margin-top:14px; font-size:.88rem; font-weight:600; color:var(--pv-text); }
.pm-field select,.pm-field input {
  width:100%; min-width:0; min-height:44px; border:1px solid #8fa38a; border-radius:5px;
  background:#142a1e; padding:7px 9px; color:var(--pv-text); color-scheme:dark; font:400 1rem/1.4 var(--body);
}
.pm-field input::placeholder { color:#c8d5c5; opacity:1; }
.pm-field[hidden],.pm-stack[hidden] { display:none; }
.pm-note { font-size:.91rem; margin:0; }
.pm-stack { margin-top:12px; display:grid; gap:5px; }
.pm-order { color:var(--pv-muted); font-size:.8125rem; }
.pm-layers { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.pm-layers span { font-size:.85rem; color:var(--pv-text); background:#314c38; border-radius:4px; padding:3px 7px; }
.pm-layers span + span::before { content:'›'; color:var(--pv-gold); padding-inline-end:6px; }
.pm-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pm-actions .btn { min-height:44px; font-size:.86rem; }
.pm-intro,.pm-options,.pm-form { min-width:0; }
.pm-preview {
  min-width:0; margin:clamp(18px,2vw,28px) 0 0; overflow:hidden;
  color:var(--pv-text); background:#182e24;
  border:1px solid var(--pv-line); border-radius:7px 25px 8px 8px;
}
.pm-preview [hidden],.pm-preview[hidden] { display:none!important; }
.pm-preview figcaption { display:grid; gap:3px; padding:13px 16px 11px; }
.pm-preview figcaption strong { color:var(--pv-gold); font-size:.84rem; letter-spacing:.035em; }
.pm-preview figcaption span { font-size:clamp(.97rem,1.2vw,1.14rem); font-weight:640; line-height:1.32; }
.pm-viewport {
  position:relative; isolation:isolate; overflow:hidden; height:clamp(200px,18vw,263px);
  background:radial-gradient(ellipse at 42% 44%,#596c58 0%,#394f40 45%,#213a2e 88%);
  box-shadow:inset 0 1px 0 rgb(240 246 223 / .10),inset 0 -1px 0 rgb(242 252 224 / .10);
}
.pm-viewport canvas,.pm-viewport [data-pm-fallback] { position:absolute; inset:0; width:100%; height:100%; }
.pm-viewport [data-pm-fallback] { padding:8px 12px; pointer-events:none; }
.pm-viewport svg { display:block; width:100%; height:100%; }
.pm-viewport canvas { cursor:grab; }
.pm-viewport canvas:active { cursor:grabbing; }
.pm-viewport canvas:focus-visible { outline-offset:-4px; }
.pm-preview:not([data-mode=model]) canvas { visibility:hidden; }
.pm-mode {
  position:absolute; top:7px; right:9px; pointer-events:none; color:var(--pv-text);
  padding:3px 8px; font-size:.78rem; line-height:1.35; font-weight:650; border-radius:20px; background:#183124;
}
.pm-preview[data-mode=empty] .pm-viewport { height:auto; min-height:92px; display:grid; align-items:center; }
.pm-preview [data-pm-empty] { padding:16px; font-size:.94rem; margin:0; }
.pm-legend { padding:9px 15px 11px; }
.pm-legend small { font-size:.8125rem; color:var(--pv-muted); }
.pm-legend ol { display:flex; gap:5px 12px; flex-wrap:wrap; margin:4px 0 0; padding:0; list-style:none; counter-reset:ply; }
.pm-legend li { counter-increment:ply; display:inline-flex; align-items:baseline; gap:4px; font-size:.84rem; font-weight:600; }
.pm-legend li::before { content:counter(ply); color:var(--pv-gold); font:650 .8125rem/1 var(--body); }
.pm-preview-tools { display:flex; align-items:center; justify-content:flex-end; padding:0 9px 5px; gap:5px; }
.pm-preview-tools button { min-width:44px; min-height:44px; padding:6px 10px; border:1px solid var(--pv-control-line); border-radius:6px; background:#203b2d; color:var(--pv-text); font-size:.84rem; }
.pm-preview-tools button:hover { border-color:var(--pv-gold); color:var(--pv-gold); }
@media(max-width:830px) {
  .pm-layout { grid-template-columns:minmax(0,1fr); gap:17px; }
  .pm-intro .pm-context { margin-top:10px; }
  .pm-form .pm-preview { margin:14px 0 0; }
  .pm-form:has(.pm-preview:not([hidden])) .pm-stack { display:none; }
  .pm-viewport { height:clamp(185px,51vw,238px); }
  .pm-preview-tools button { min-width:44px; min-height:44px; }
}
@media(max-width:600px) {
  .pm-panel summary { grid-template-areas:"method tag caret" "minimum minimum minimum"; row-gap:5px; }
  .pm-title-line { display:contents; }
  .pm-method { grid-area:method; }
  .pm-minimum { grid-area:minimum; }
  .pm-tag { grid-area:tag; }
  .pm-caret { grid-area:caret; }
}
@media(max-width:420px) {
  .pm-section { padding:15px 10px; }
  .pm-panel summary { padding-inline:10px; gap:7px; }
  .pm-tag { max-width:14ch; }
  .pm-form { padding-inline:10px; }
}