: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:auto;border-radius:12px;box-shadow:0 0 0 1px var(--border);flex:0 0 auto}canvas.pk-canvas{width:100%;height:auto;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)}