.p2p{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.p2p__bar{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--text-tertiary)}.p2p__bar p,.p2p__title{margin:0}.p2p__task{margin:0;max-width:42ch;color:var(--text-secondary)}.p2p__panes{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.p2p-pane{margin:0;display:flex;flex-direction:column;gap:6px}.p2p-pane figcaption{color:var(--text-tertiary)}.p2p-canvas{aspect-ratio:4 / 3;display:grid;place-items:center;padding:6px;border:1px solid var(--card-border-strong);border-radius:12px;background:var(--grey-white);overflow:hidden}.p2p-canvas img{width:100%;height:100%;object-fit:contain}.p2p-canvas.is-empty,.p2p-canvas.is-busy{background:var(--grey-10);border-style:dashed}.p2p-canvas.is-empty p,.p2p-canvas.is-busy p{margin:0;padding:4px;color:var(--text-tertiary)}.p2p-canvas.is-busy{gap:8px}.p2p-spinner{width:24px;height:24px;border-radius:999px;border:3px solid var(--grey-30);border-top-color:var(--teal-primary);animation:p2p-spin .76s linear infinite}@keyframes p2p-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.p2p-spinner{animation-duration:2.4s}}.p2p-template{margin:0;max-width:34ch;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;font-family:var(--font-body, "Nunito", system-ui, sans-serif);font-size:17px;color:var(--text-primary)}.p2p-blank{min-height:42px;padding:6px 30px 6px 12px;font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);font-size:14px;font-weight:600;color:var(--text-primary);background:var(--grey-white);border:1.5px dashed var(--grey-50);border-radius:10px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grey-80) 50%),linear-gradient(135deg,var(--grey-80) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.p2p-blank.is-filled{border-style:solid;border-color:var(--grey-60)}.p2p-blank:focus-visible,.p2p-editor textarea:focus-visible{outline:2px solid var(--teal-primary);outline-offset:2px}.p2p-editor{width:min(100%,30rem);display:flex;flex-direction:column;gap:6px;align-items:flex-start}.p2p-editor span{color:var(--text-tertiary)}.p2p-editor textarea{width:100%;padding:12px;border:1.5px solid var(--card-border-strong);border-radius:12px;background:var(--grey-white);color:var(--text-primary);font-family:var(--font-body, "Nunito", system-ui, sans-serif);font-size:16px;line-height:1.5;resize:vertical}.p2p__sent{margin:0;max-width:44ch;color:var(--text-tertiary)}.p2p__sent span{color:var(--text-secondary);word-break:break-word}.p2p__actions{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.p2p__feedback{margin:0;max-width:44ch;color:var(--text-secondary)}.p2p__feedback:empty{display:none}.p2p__feedback.is-right,.p2p__feedback.is-wrong,.p2p__feedback.is-note{padding:10px 14px;border-radius:12px;border:1px solid;color:var(--grey-90)}.p2p__feedback.is-right{background:var(--success-10);border-color:var(--success-30)}.p2p__feedback.is-wrong{background:var(--error-20);border-color:var(--error-30)}.p2p__feedback.is-note{background:var(--blue-10);border-color:var(--blue-30)}.p2p__after{width:min(100%,30rem);display:flex;flex-direction:column;align-items:center;gap:14px}.p2p__after:empty{display:none}.p2p-beat{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--card-border-strong);background:var(--grey-10);color:var(--grey-90);text-align:left;animation:p2p-beat-in .38s var(--card-ease, cubic-bezier(.2,.7,.3,1))}.p2p-beat p{margin:0}.p2p-beat .p2p-beat__head{color:var(--text-primary);margin-bottom:4px}@keyframes p2p-beat-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.p2p__bar{flex-wrap:wrap}