.pin-wrap{width:100%;height:100%;display:block;position:relative}.pin-wrap.portal{width:auto;max-width:100%;height:auto;display:inline-block}.pin-img{object-fit:contain;-webkit-user-drag:none;width:100%;height:100%;display:block}.pin-wrap.portal .pin-img{width:auto;max-width:100%;height:auto}.pin-layer{position:absolute;inset:0}.pin-wrap.marking .pin-layer{cursor:crosshair;outline:2px dashed var(--brand-solid);outline-offset:-2px;background:#0000000a}.pin{color:#fff;width:26px;height:26px;font-family:var(--font-mono);transition:transform .15s var(--ease-standard);border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:11px;font-weight:700;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 6px #00000059}.pin:hover,.pin.active{z-index:2;transform:translate(-50%,-50%)scale(1.15)}.pin-studio{background:var(--ink)}.pin-client{background:linear-gradient(120deg, var(--brand-from), var(--brand-to))}.pin.resolved{opacity:.55;filter:grayscale(.4)}.pin-draft{pointer-events:none;animation:1.1s ease-in-out infinite pin-pulse}@keyframes pin-pulse{50%{transform:translate(-50%,-50%)scale(1.18)}}.pin:focus-visible{outline:2px solid var(--brand-solid);outline-offset:2px}.pin-mark-toggle{z-index:3;border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 92%, transparent);min-height:28px;color:var(--ink);font-family:var(--font-sans);box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:5px;padding:0 11px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;top:8px;right:8px}.pin-mark-toggle.on{background:linear-gradient(120deg, var(--brand-from), var(--brand-to));color:#fff;border-color:#0000}.pin-mark-toggle:focus-visible{outline:2px solid var(--brand-solid);outline-offset:2px}.pin-wrap.studio .pin-mark-toggle{opacity:0;transition:opacity .15s}.pin-wrap.studio:hover .pin-mark-toggle,.pin-wrap.studio .pin-mark-toggle.on,.pin-wrap.studio .pin-mark-toggle:focus-visible{opacity:1}@media (hover:none){.pin-wrap.studio .pin-mark-toggle{opacity:1}}.pin-hint{z-index:3;color:#fff;pointer-events:none;background:#141414c7;border-radius:8px;max-width:calc(100% - 16px);padding:5px 10px;font-size:12px;line-height:1.35;position:absolute;bottom:8px;left:8px}.pin-pop{z-index:400;border:1px solid var(--line);background:var(--surface);width:280px;max-width:calc(100vw - 16px);box-shadow:var(--shadow-lg);border-radius:12px;padding:12px;position:fixed}.pin-pop textarea{resize:none;border:1px solid var(--line);background:var(--paper);width:100%;color:var(--ink);font-family:var(--font-sans);border-radius:10px;padding:9px 11px;font-size:13.5px;line-height:1.4}.pin-pop textarea:focus{border-color:var(--ink-soft);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.pin-pop-head{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:10px;display:flex}.pin-pop-who.client{color:var(--brand-solid)}.pin-pop-who.studio{color:var(--ink)}.pin-pop-body{color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 10px;font-size:13.5px;line-height:1.45}.pin-pop-body.resolved{color:var(--muted);text-decoration:line-through}.pin-pop-error{color:var(--urgent);margin:6px 0 0;font-size:12px}.pin-pop-actions{justify-content:flex-end;gap:6px;margin-top:8px;display:flex}.pin-btn{border:1px solid var(--line);background:var(--surface);min-height:30px;color:var(--ink);font-family:var(--font-sans);border-radius:999px;align-items:center;gap:5px;padding:0 12px;font-size:12.5px;font-weight:600;display:inline-flex}.pin-btn.primary{background:var(--ink);color:var(--surface);border-color:#0000}.pin-btn.ghost.danger{color:var(--urgent)}.pin-btn:disabled{opacity:.45}.pin-btn:focus-visible{outline:2px solid var(--brand-solid);outline-offset:2px}@media (max-width:719px){.pin{width:32px;height:32px}.pin-btn,.pin-mark-toggle{min-height:40px}}@media (prefers-reduced-motion:reduce){.pin-draft{animation:none}.pin{transition:none}}