.ph{--ph-foot:max(1.25rem, var(--boxfoot,0px), 4.5rem);--ph-stage:max(20rem, calc(100dvh - 4.75rem - var(--ph-foot)));--ph-pane:calc(var(--ph-stage) - 2px);--ph-pad:1rem;min-height:100dvh;padding:1.25rem 1.25rem var(--ph-foot);background:var(--color-paper)}.ph-top{justify-content:space-between;align-items:center;height:2.5rem;margin-bottom:.9rem;display:flex}.ph-brand{color:var(--color-ink);display:inline-flex}.ph-work{height:var(--ph-stage);border:1px solid var(--color-rule);grid-template-columns:minmax(0,1fr) 23rem;display:grid;overflow:hidden}.ph-work[data-bare=true]{grid-template-columns:minmax(0,1fr)}.ph-work[data-bare=true] .ph-rail{display:none}.ph-stage{min-width:0;padding:var(--ph-pad);background:var(--color-field);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.ph-frame{touch-action:none;-webkit-user-select:none;user-select:none;width:fit-content;max-width:100%;height:fit-content;position:relative}.ph-shot{cursor:crosshair;background:0 0;border:0;padding:0;display:block}.ph-shot:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.ph-img{width:auto;max-width:100%;height:auto;max-height:calc(var(--ph-pane) - var(--ph-pad) * 2);display:block}.ph-pin{z-index:2;cursor:grab;touch-action:none;background:0 0;border:0;border-radius:999px;padding:0;line-height:0;transition:transform .14s ease-out;position:absolute;transform:translate(-50%,-50%)}.ph-pin:active{cursor:grabbing}.ph-pin:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ph-dot{border-radius:999px;transition:background-color .18s ease-out;display:block;box-shadow:0 0 0 3px #fff,0 0 0 4px #0000003d,0 1px 5px #00000059}.ph-pin:hover,.ph-pin:focus-visible,.ph-pin.ph-lit{transform:translate(-50%,-50%)scale(1.3)}.ph-pin:focus-visible{outline:2px solid var(--color-ink);outline-offset:6px}.ph-rail{border-left:1px solid var(--color-rule);background:var(--color-paper);grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid}.ph-head{border-bottom:1px solid var(--color-rule);align-items:center;gap:.75rem;padding:.75rem .9rem;display:flex}.ph-take{background:var(--color-ink);height:2.5rem;color:var(--color-paper);font-size:var(--text-small);white-space:nowrap;border-radius:999px;padding:0 1.05rem;font-weight:600}.ph-take[disabled]{background:var(--color-field);color:var(--color-ink);cursor:default}.ph-swap{min-height:2.5rem;color:var(--color-ink-2);font-size:var(--text-small);white-space:nowrap;text-underline-offset:.22em;cursor:pointer;align-items:center;padding:0 .25rem;text-decoration:underline;display:inline-flex}.ph-swap:has(:focus-visible){outline:2px solid var(--color-ink);outline-offset:2px}.ph-scroll{min-height:0}.ph-cells{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .7rem;margin:0;padding:.9rem;list-style:none;display:grid}.ph-cell{gap:.3rem;min-width:0;display:grid}.ph-de{font-size:var(--text-micro);color:var(--color-muted);justify-content:space-between;align-items:center;gap:.4rem;margin:0;display:flex}.ph-cell.ph-lit .ph-de{color:var(--color-ink)}.ph-x{z-index:1;width:1.55rem;height:1.55rem;color:var(--color-muted);border-radius:999px;justify-content:center;align-items:center;margin:-.3rem -.3rem -.3rem 0;display:inline-flex;position:relative}.ph-x:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ph-x:hover{color:var(--color-ink);background:var(--color-field)}.ph-x:focus-visible{outline:2px solid var(--color-ink);outline-offset:1px}.ph-open{height:var(--ph-stage);border:1px dashed color-mix(in srgb, var(--color-ink) 22%, transparent);background:var(--color-field);flex-direction:column;justify-content:center;align-items:center;gap:1.15rem;display:flex}.ph-choose{background:var(--color-ink);height:2.9rem;color:var(--color-paper);font-size:var(--text-body);cursor:pointer;border-radius:999px;align-items:center;padding:0 1.7rem;font-weight:600;display:inline-flex}.ph-choose:has(:focus-visible){outline:2px solid var(--color-ink);outline-offset:3px}.ph-samp{border:1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);cursor:pointer;background:0 0;padding:0;line-height:0;transition:transform .15s ease-out,box-shadow .15s ease-out}.ph-samp:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0000001f}.ph-samp:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.ph-sampimg{object-fit:cover;width:240px;height:240px;display:block}.ph-err{font-size:var(--text-small);color:var(--color-ink);margin:0}@media (prefers-reduced-motion:reduce){.ph-pin,.ph-dot{transition:none}}@media (max-width:720px){.ph{--ph-foot:max(.85rem, var(--boxfoot,0px), 4.5rem);--ph-stage:max(24rem, calc(100dvh - 3.55rem - var(--ph-foot)));--ph-pane:calc(var(--ph-stage) * .5);--ph-pad:.7rem;padding:.85rem .85rem var(--ph-foot)}.ph-top{height:2.1rem;margin-bottom:.6rem}.ph-work{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--ph-pane) minmax(0, 1fr)}.ph-rail{border-left:0;border-top:1px solid var(--color-rule)}.ph-head{padding:.6rem .75rem}.ph-cells{gap:.9rem .65rem;padding:.75rem}.ph-sampimg{width:168px;height:168px}}.ph-region{pointer-events:none;z-index:2;outline:9999px solid #11111161;position:absolute;box-shadow:0 0 0 1px #111111a6,0 0 0 2px #ffffffd9}.ph-region-draft{outline-color:#1111113d}.ph-whole{font-size:var(--text-small);color:var(--color-muted);text-underline-offset:3px;text-decoration:underline}.ph-whole:hover{color:var(--color-ink)}