:root{--blue: #2563eb;--blue-soft: #e8f1ff;--ink: #111827;--muted: #6b7280;--line: #eef0f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:#fff;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{min-height:100vh;font-size:14px;line-height:1.45}button,input,textarea{font:inherit}button{color:inherit}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.topbar{min-height:64px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 18px 0}.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:18px;letter-spacing:-.03em}.demo-link{display:inline-flex;align-items:center;color:#1d4ed8;text-decoration:none;font-size:13px;font-weight:650;white-space:nowrap;padding:10px 8px}.demo-link:hover{text-decoration:underline}.spark,.spark-wrap{color:var(--blue)}.open{display:flex;gap:8px;min-width:0}.open input{flex:1;min-width:0;height:40px;border:1px solid #e5e7eb;border-radius:999px;padding:0 16px}.actions{display:flex;gap:8px}.actions button,.send,.connect,.copy,.secondary{border:0;cursor:pointer;font-weight:650}.connect,.instruct{background:var(--blue-soft);color:#1d4ed8;border-radius:999px;padding:10px 14px;white-space:nowrap}.next,.send,.copy{background:var(--blue);color:#fff;border-radius:999px;padding:10px 16px}button:disabled{opacity:.5;cursor:not-allowed}.conn{margin:8px 18px 10px;font-size:13px;color:var(--muted)}.conn.is-on{color:#047857}.conn.is-off{color:#b42318}.conn.is-wait{color:#1d4ed8}main{height:calc(100vh - 110px);min-height:460px;position:relative;overflow:hidden;background:#f8fafc;border-top:1px solid var(--line)}.hit{position:absolute;inset:0;z-index:3;cursor:crosshair;background:#2563eb0f}.mark{position:absolute;z-index:6;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--blue);border-radius:999px;background:#2563eb40;pointer-events:none;box-shadow:0 0 0 6px #2563eb26}.pixel-prompt{position:absolute;z-index:7;width:min(340px,calc(100% - 24px));padding:12px;border-radius:16px;background:#fff;box-shadow:0 18px 50px #0f172a38}.pixel-prompt p{margin:0 0 8px;font-size:12px;color:var(--muted)}.pixel-prompt .row{display:flex;gap:8px}.pixel-prompt input{flex:1;min-width:0;height:40px;border:1px solid #e5e7eb;border-radius:999px;padding:0 14px}iframe,.preview{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}iframe{z-index:2}.preview{z-index:1;overflow:auto;padding:42px 40px 120px}.preview-kicker{margin:0 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}.preview h1{margin:0 0 8px;font-size:clamp(32px,6vw,64px);letter-spacing:-.045em}.preview a{color:var(--blue)}.preview #preview-text{max-width:70ch;margin-top:20px;white-space:pre-wrap;color:#1f2937;font-size:16px}.panel{position:fixed;right:20px;bottom:20px;z-index:20;width:min(380px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 96px));display:grid;grid-template-rows:auto 1fr auto;background:#fff;border-radius:18px;box-shadow:0 24px 70px #0f172a33;overflow:hidden}.panel.is-min{grid-template-rows:auto}.panel.is-min .log,.panel.is-min .reply{display:none}.panel-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}.spark-wrap{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--blue-soft);flex:none}.panel-head div{flex:1;min-width:0}.agent-state{margin:2px 0 0;font-size:12px;color:var(--muted)}.agent-state.is-done{color:#047857}.agent-state.is-run{color:#1d4ed8}.agent-state.is-ready{color:#7c3aed}.icon{border:0;background:transparent;color:var(--muted);cursor:pointer}.log{overflow:auto;padding:14px;display:grid;align-content:start;gap:12px;min-height:160px}.msg{display:grid;grid-template-columns:28px 1fr;gap:8px}.msg.user{grid-template-columns:1fr;justify-items:end}.msg p{margin:0;padding:10px 12px;background:#f8fafc;border-radius:4px 14px 14px}.msg.user p{background:var(--blue);color:#fff;border-radius:14px 14px 4px}.msg time{display:block;margin-top:4px;color:#9ca3af;font-size:11px}.reply{padding:10px 12px 12px;border-top:1px solid var(--line)}.reply input{width:calc(100% - 52px);height:40px;border:1px solid #e5e7eb;border-radius:999px;padding:0 14px}.send{width:40px;height:40px;padding:0;float:right}.reply p{margin:8px 4px 0;color:#9ca3af;font-size:11px;clear:both}.modal-open{overflow:hidden}.handoff-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#0f172aa3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.handoff-dialog{position:relative;width:min(640px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:30px;border-radius:24px;background:#fff;box-shadow:0 36px 90px #0f172a57}.handoff-close{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;border:1px solid #e5e7eb;border-radius:999px;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}.handoff-kicker{margin:0 0 8px;color:var(--blue);font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.handoff-dialog h2{margin:0;padding-right:40px;font-size:clamp(28px,5vw,40px);letter-spacing:-.04em}.handoff-description{margin:10px 0 0;max-width:58ch;color:var(--muted)}.tool-status{display:flex;align-items:center;gap:8px;margin:18px 0;padding:10px 12px;border-radius:12px;background:#fff3dc;color:#765017;font-size:13px;font-weight:650}.tool-status.is-ready{background:#e9f6ee;color:#22633c}.tool-status span{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:#00000014}.handoff-label{display:block;margin-bottom:7px;font-size:12px;font-weight:700}.handoff-instruction{display:block;width:100%;min-height:220px;resize:vertical;padding:16px;border:1px solid #dfe3e8;border-radius:14px;outline:none;background:#f8fafc;color:var(--ink);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.handoff-instruction:focus{border-color:#2563eb99}.handoff-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px}.handoff-actions .copy,.handoff-actions .secondary{border-radius:12px}.secondary{padding:10px 20px;border:1px solid #e5e7eb;background:#fff}.handoff-footnote{margin:10px 0 0;color:var(--muted);font-size:12px;text-align:center}@media(max-width:760px){.topbar{grid-template-columns:1fr auto;padding:10px 12px 0}.brand{grid-column:1}.open{grid-column:1 / -1;grid-row:2}.actions{grid-column:2;grid-row:1}.next{display:none}.conn{margin-inline:12px}main{height:calc(100vh - 158px)}.preview{padding:28px 20px 140px}.panel{right:12px;bottom:12px}.handoff-backdrop{padding:12px}.handoff-dialog{max-height:calc(100vh - 24px);padding:24px 18px;border-radius:18px}.handoff-actions{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}