body{grid-template-columns:minmax(0,1fr) 380px;display:grid}.stage{place-items:stretch center;block-size:100dvh;min-inline-size:0;padding:24px;display:grid}.stage .chat{--w:100%;inline-size:min(var(--w), 100%);border:1px solid var(--line);border-radius:20px;overflow:hidden}.slot.top{border-block-end:1px solid var(--line);grid-row:1;padding:8px 16px}.panel{overscroll-behavior:contain;background:var(--panel);border-inline-start:1px solid var(--line);flex-direction:column;gap:20px;block-size:100dvh;padding:20px;display:flex;overflow-y:auto}.panel header h1{margin:0;font-size:15px;font-weight:600}.panel header p{color:var(--muted);text-wrap:pretty;margin:4px 0 0;font-size:13px}.head-row{justify-content:space-between;align-items:center;margin-block-end:8px;display:flex}.panel section>h2,.head-row h2,.controls h2{color:var(--muted);margin:0 0 8px;font-size:13px;font-weight:500}.head-row h2{margin:0}.note{color:var(--muted);text-wrap:pretty;margin:8px 0 0;font-size:13px}.controls{gap:14px;display:grid}.panel button{border:1px solid var(--line);background:0 0;border-radius:999px;font-size:13px;transition:background-color .12s,border-color .12s,color .12s}@media (hover:hover) and (pointer:fine){.panel button:not([aria-pressed=true],[aria-disabled=true]):hover{background:var(--hover)}}.panel button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.panel button[aria-disabled=true]{opacity:.5;cursor:default}.panel button:not([aria-pressed=true],[aria-disabled=true]):active:not(:focus-visible){background:var(--press)}.panel button[aria-pressed=true]:active:not(:focus-visible){background:var(--ink-hover)}.scenarios{gap:4px;display:grid}.scenarios button{text-align:start;border-radius:12px;align-items:baseline;gap:8px;padding:8px 12px;font-size:14px;display:flex}.scenarios button small{color:var(--muted);font-size:13px}.scenarios button[aria-pressed=true] small{color:color-mix(in oklab, var(--bg) 70%, transparent)}.row,.seg{flex-wrap:wrap;gap:4px;display:flex}.row button,.seg button{min-block-size:30px;padding:0 12px}.clear{min-block-size:24px;color:var(--muted);padding:0 10px;font-size:12px}pre{border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:240px;color:var(--ink-2);border-radius:12px;margin:0;padding:10px 12px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.log{gap:1px;max-block-size:320px;margin:8px 0 0;padding:0;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;list-style:none;display:grid;overflow:auto}.log li{overflow-wrap:anywhere;color:var(--ink-2);border-radius:6px;padding:3px 8px}.log li[data-dir=host]{background:var(--soft)}.log li[data-dir=note]{color:var(--muted);font-family:var(--font)}.log time{color:var(--muted);margin-inline-end:8px}@media (width<=900px){html,body{block-size:auto}body{grid-template-columns:minmax(0,1fr)}.stage{block-size:88dvh;padding:12px}.panel{block-size:auto;border-inline-start:0;border-block-start:1px solid var(--line);padding-block-end:max(20px, env(safe-area-inset-bottom,0px));overflow:visible}}@media (pointer:coarse){.row button,.seg button,.clear{min-block-size:40px}}@media (forced-colors:active){.panel button[aria-pressed=true]{forced-color-adjust:none;color:highlighttext;background:highlight}}@media (prefers-reduced-motion:reduce){.panel button{transition:none}}