/* EasyInput scene system: four input destinations + a separate voice-edit proof. */
.scene-lead { max-width:64ch; margin:-12px 0 32px; font:15px/1.75 var(--sans); color:var(--ink2); text-wrap:pretty; }
.scene-experience { display:block; }
.scene-input { min-width:0; display:flex; flex-direction:column; }
.scene-mode { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.scene-mode .name { font:700 19px/1.4 var(--serif); color:var(--ink); }
.scene-mode .hint { font:11px/1.5 var(--mono); color:var(--ink3); white-space:nowrap; }
.scene-input-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border-block:1px solid var(--line); background:var(--line); }
.scene-case { min-width:0; min-height:330px; display:flex; flex-direction:column; padding:clamp(22px,2.2vw,32px); background:var(--bg); }
.scene-context { display:block; margin-bottom:8px; font:10.5px/1 var(--mono); letter-spacing:.04em; color:var(--accent); }
.scene-case h4 { margin:0 0 7px; font:700 18px/1.45 var(--serif); color:var(--ink); }
.scene-case p { max-width:30ch; margin:0; font:14px/1.65 var(--sans); color:var(--ink2); text-wrap:pretty; }
.scene-surface { min-width:0; margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft); }
.surface-label { display:block; margin-bottom:8px; font:9.5px/1.4 var(--mono); color:var(--ink3); }
.surface-copy { min-height:70px; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); font:12.5px/1.55 var(--sans); color:var(--ink); }
.surface-doc .surface-copy { padding:8px 0 10px; border-width:0 0 1px; border-radius:0; background:transparent; font-family:var(--serif); line-height:1.7; }
.surface-chat .surface-copy { margin-left:14px; border-radius:8px 8px 2px 8px; background:var(--bg); }
.surface-form .surface-copy { background:var(--bg); }
.surface-caret { display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-.12em; background:var(--accent); animation:blink 1s steps(1) infinite; }
.surface-status { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font:9.5px/1.4 var(--mono); color:var(--ink3); }
.surface-status .live { display:inline-flex; align-items:center; gap:5px; color:var(--accent); }
.surface-status .live::before { content:"●"; font-size:7px; }
.rewrite-feature { min-width:0; display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.8fr); margin-top:clamp(42px,5vw,72px); border-top:2px solid var(--ink); border-bottom:1px solid var(--line); background:var(--bg); }
.rewrite-intro { padding:clamp(26px,3vw,40px) clamp(22px,3vw,36px) clamp(26px,3vw,40px) 0; border-right:1px solid var(--line); }
.rewrite-kicker { margin-bottom:10px; font:10.5px/1.4 var(--mono); letter-spacing:.04em; color:var(--accent); }
.rewrite-feature h3 { max-width:12ch; margin:0 0 10px; font:700 clamp(1.35rem,2.4vw,1.75rem)/1.3 var(--serif); color:var(--ink); }
.rewrite-intro > p { max-width:34ch; margin:0; font:14px/1.65 var(--sans); color:var(--ink2); }
.rewrite-flow { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.6fr) minmax(0,1.2fr); margin:0; padding:0; }
.rewrite-source,.rewrite-result { min-width:0; padding:clamp(24px,3vw,40px); font:14px/1.65 var(--sans); color:var(--ink); }
.rewrite-command { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:9px; padding:clamp(24px,3vw,40px); border-left:1px solid var(--line-soft); font:11px/1.5 var(--mono); color:var(--accent); }
.rewrite-command::after { content:"→"; font-size:19px; line-height:1; }
.rewrite-source .tag,.rewrite-result .tag { display:block; margin-bottom:5px; font:10px/1.4 var(--mono); color:var(--ink3); }
.rewrite-result { margin:0; border-left:1px solid var(--line-soft); }
.rewrite-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; padding-top:13px; border-top:1px solid var(--line); font:10.5px/1.4 var(--mono); color:var(--ink3); }
.rewrite-footer strong { font-size:11px; font-weight:600; color:var(--accent); }
.edit-mode-line { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; min-height:104px; padding:16px; border:1px solid var(--line); border-radius:7px; background:var(--bg); font:14px/1.5 var(--sans); color:var(--ink); }
.edit-mode-line .step-label { min-width:0; text-align:center; }
.edit-mode-line .arr { font-family:var(--mono); color:var(--ink3); }
@media (max-width:1199px) { .scene-input-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:880px) {
  .rewrite-feature { grid-template-columns:1fr; }
  .rewrite-intro { padding-right:0; border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:680px) {
  .scene-input-grid,.rewrite-flow { grid-template-columns:1fr; }
  .scene-case { min-height:0; }
  .rewrite-command,.rewrite-result { border-left:0; border-top:1px solid var(--line-soft); }
  .rewrite-command::after { content:"↓"; }
}
@media (max-width:560px) {
  .scene-lead { margin-bottom:26px; }
  .scene-mode { align-items:flex-start; flex-direction:column; gap:4px; }
  .scene-mode .hint { white-space:normal; }
  .edit-mode-line { grid-template-columns:1fr; gap:8px; }
  .edit-mode-line .arr { transform:rotate(90deg); }
}
@media (prefers-reduced-motion:reduce) { .surface-caret { animation:none; } }