:root{--bg:#141414;--panel:#1e1e1e;--border:#2a2a2a;--text:#ededed;--muted:#a3a3a3}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}main.pk{--pad:32px;--vp:100vh;height:var(--vp);padding:var(--pad) 16px;display:flex;justify-content:center}@supports (height:100dvh){main.pk{--vp:100dvh}}.pk-frame{--gap:12px;--header-h:36px;display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content;max-width:100%}.pk-header{display:flex;align-items:stretch;gap:12px;margin:0 0 var(--gap);height:var(--header-h);flex:0 0 auto;min-width:0}.pk-title{margin:0;font-size:30px;line-height:var(--header-h);font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;white-space:nowrap}.pk-actions{flex:1 1 auto;display:flex;gap:12px;min-width:0}.pk-actions .btn{flex:1 1;display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:14px;white-space:nowrap}.btn{display:block;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer;font-size:14px}.btn:hover{border-color:var(--muted)}button.btn{width:100%}.pk-viewport{height:min(calc(var(--vp) - 2*var(--pad) - var(--header-h) - var(--gap)),calc((100vw - 32px)*9/16));aspect-ratio:192/108;overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px var(--border);flex:0 0 auto;touch-action:none}.pk-viewport[data-grab=true]{cursor:-webkit-grab;cursor:grab}.pk-viewport[data-grab=true][data-grabbing=true]{cursor:-webkit-grabbing;cursor:grabbing}canvas.pk-canvas{width:100%;height:100%;display:block;background:#474747}.pk-zoom{display:flex;align-items:stretch;gap:6px;font-size:12px;color:var(--muted);flex:0 0 auto}.btn-zoom{background:var(--panel);padding:0 8px}.pk-zoom button{background:transparent;color:var(--text);border:none;cursor:pointer;font-size:14px;padding:0 4px}.pk-zoom .pk-zoom-reset{font-size:12px;color:var(--muted);min-width:44px;text-align:center}.pk-zoom .pk-zoom-reset:hover{color:var(--text)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;max-width:640px;width:100%;padding:20px;max-height:80vh;overflow:auto}.modal pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow:auto;font-size:12px;color:var(--text)}.history{display:grid;grid-gap:6px;gap:6px}.history-item{display:flex;align-items:center;gap:8px;font-size:13px;border-bottom:1px solid var(--border);padding:6px 0}.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid var(--border)}.muted{color:var(--muted)}@media (max-width:700px){body,html{overflow:visible}main.pk{--pad:16px;padding:var(--pad) 8px;height:auto;min-height:var(--vp)}.pk-frame{width:100%}.pk-header{flex-direction:column;height:auto;gap:8px}.pk-title{font-size:20px;line-height:1.2;justify-content:center}.pk-actions{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;grid-gap:8px;gap:8px;width:100%}.pk-actions .btn{padding:9px 10px}.pk-actions a.btn,.pk-zoom{grid-column:1/-1}.pk-zoom{justify-content:center}.pk-zoom button{padding:6px 10px}.pk-viewport{width:100%;height:auto}}