.demo {
  --indigo: #302D7C;
  --violet: #6955BA;
  --violet-light: #9178E2;
  --lavender: #B99EFF;
  --line-public: #25C5A8;
  --point: #E54B78;
  --bg: #FFFFFF;
  --bg-soft: #F4F4F5;
  --ink: #1C1C22;
  --text: #545659;
  --caption: #66696D;
  --hairline: #E4E4E7;
  --font-kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-num: "Inter", "Pretendard Variable", sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-card: 0 2px 8px rgba(28, 28, 34, .04), 0 12px 32px rgba(28, 28, 34, .06);
}
  .demo *, .demo *::before, .demo *::after { box-sizing: border-box; }
  .demo { margin: 0; }
  .demo { background: var(--bg); color: var(--ink); font-family: var(--font-kr); word-break: keep-all; -webkit-font-smoothing: antialiased; }
  .demo button { font: inherit; }
  .demo .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .post--aside-browser-workflow .aside-demo-figure { margin: 32px 0; }
  .post--aside-browser-workflow .aside-demo-figure figcaption { margin-top: 8px; color: var(--caption); font-size: 12px; line-height: 1.5; text-align: center; }
  .demo { max-width: 980px; min-height: 570px; padding: clamp(18px, 3.2vw, 34px); overflow: hidden; background: radial-gradient(circle at 88% 4%, rgba(185, 158, 255, .18), transparent 34%), var(--bg); }
  .demo p { margin: 0; }
  .demo ol { margin: 0; padding: 0; list-style: none; }
  .demo .demo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
  .demo .demo-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--violet); font: 800 11px/1.3 var(--font-num); letter-spacing: .12em; }
  .demo .demo-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--point); box-shadow: 0 0 0 4px rgba(229, 75, 120, .13); }
  .demo h1, .demo h3 { margin: 0; color: var(--indigo); font-size: clamp(23px, 3.2vw, 34px); line-height: 1.22; letter-spacing: -.04em; }
  .demo .demo-deck { margin: 7px 0 0; color: var(--text); font-size: clamp(12px, 1.6vw, 15px); line-height: 1.55; }
  .demo .motion-toggle { flex: none; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--bg); color: var(--indigo); font-size: 12px; font-weight: 700; cursor: pointer; }
  .demo .motion-toggle:hover { border-color: var(--violet); }
  .demo .motion-toggle:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
  .demo .motion-toggle[hidden] { display: none; }
  .demo .scene { display: none; }
  .demo .scene.is-active { display: block; }
  .demo .scene-note { margin: 12px 0 0; color: var(--caption); font-size: 11px; line-height: 1.5; }

/* 1. 작동 방식: 각 영역이 차례로 강조되지만 모든 내용은 항상 읽을 수 있다. */
  .demo .flow-stage { overflow: hidden; border: 1px solid rgba(48, 45, 124, .16); border-radius: var(--radius); box-shadow: var(--shadow-card); background: var(--bg); }
  .demo .browser-top { height: 35px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--indigo); color: rgba(255,255,255,.8); font-size: 10px; }
  .demo .window-dots { display: flex; gap: 4px; }
  .demo .window-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
  .demo .address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo .top-label { margin-left: auto; font: 700 9px var(--font-num); letter-spacing: .1em; white-space: nowrap; }
  .demo .browser-grid { display: grid; grid-template-columns: 116px minmax(0, 1fr) minmax(0, .82fr) 155px; min-height: 276px; }
  .demo .browser-grid > * { min-width: 0; padding: 18px 13px; border-right: 1px solid var(--hairline); }
  .demo .browser-grid > :last-child { border-right: 0; }
  .demo .flow-sidebar { background: rgba(105, 85, 186, .055); }
  .demo .flow-sidebar strong { display: block; margin-bottom: 16px; color: var(--indigo); font-size: 12px; }
  .demo .mini-tab { display: flex; align-items: center; gap: 7px; margin: 7px 0; padding: 8px 6px; border-radius: 7px; color: var(--text); font-size: 10px; line-height: 1.3; white-space: nowrap; }
  .demo .mini-tab span { color: var(--violet); font: 700 9px var(--font-num); }
  .demo .mini-tab.active { background: var(--bg); box-shadow: 0 2px 10px rgba(48,45,124,.1); color: var(--indigo); font-weight: 700; animation: sidebar-focus 9s ease-in-out infinite; }
  .demo .pane-label { display: flex; align-items: center; gap: 5px; margin-bottom: 17px; color: var(--caption); font-size: 10px; font-weight: 700; }
  .demo .pane-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
  .demo .pane-dot.teal { background: var(--line-public); }
  .demo .pane-dot.pink { background: var(--point); }
  .demo .mock-heading { width: 65%; height: 15px; margin-bottom: 16px; border-radius: 4px; background: var(--indigo); opacity: .77; }
  .demo .mock-line { height: 7px; margin-bottom: 9px; border-radius: 3px; background: var(--hairline); }
  .demo .mock-line.long { width: 92%; }  .demo .mock-line.medium { width: 73%; }  .demo .mock-line.short { width: 51%; }
  .demo .page-highlight { width: max-content; max-width: 100%; margin: 18px 0; padding: 7px 9px; border-radius: 7px; background: rgba(185,158,255,.19); color: var(--indigo); font-size: 10px; font-weight: 700; animation: page-focus 9s ease-in-out infinite; }
  .demo .spark { color: var(--violet); }
  .demo .flow-split { background: rgba(37,197,168,.035); animation: split-focus 9s ease-in-out infinite; }
  .demo .result-title { margin: 24px 0 17px; color: var(--indigo); font-size: 12px; font-weight: 800; }
  .demo .result-row { display: flex; justify-content: space-between; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--hairline); color: var(--text); font-size: 10px; }
  .demo .result-row b { color: var(--indigo); font-weight: 700; }
  .demo .flow-panel { background: rgba(105,85,186,.045); animation: panel-focus 9s ease-in-out infinite; }
  .demo .attachment { display: inline-block; padding: 6px; border: 1px solid rgba(105,85,186,.25); border-radius: 6px; background: var(--bg); color: var(--violet); font-size: 10px; font-weight: 700; }
  .demo .flow-panel p { margin: 17px 0; color: var(--indigo); font-size: 11px; font-weight: 700; line-height: 1.5; }
  .demo .panel-response { padding: 8px; border-radius: 7px; background: var(--bg); box-shadow: 0 2px 8px rgba(48,45,124,.07); color: var(--text); font-size: 10px; line-height: 1.45; }
  .demo .panel-response span { color: var(--point); }
  .demo .flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0; margin: 17px 0 0; list-style: none; }
  .demo .flow-steps li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px; border: 1px solid var(--hairline); border-radius: 9px; color: var(--text); background: var(--bg); font-size: 11px; font-weight: 700; animation: step-focus 9s ease-in-out infinite; }
  .demo .flow-steps li:nth-child(2) { animation-delay: 3s; }  .demo .flow-steps li:nth-child(3) { animation-delay: 6s; }
  .demo .flow-steps b { display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--indigo); color: white; font: 800 11px var(--font-num); }

/* 2. 관심 이유: 창 전환의 시선 이동과 한 화면의 안정감을 대비한다. */
  .demo .appeal-stage { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; min-height: 287px; }
  .demo .appeal-old, .demo .appeal-new { position: relative; height: 255px; overflow: hidden; padding: 17px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg-soft); }
  .demo .appeal-new { border-color: rgba(105,85,186,.25); background: linear-gradient(145deg, rgba(185,158,255,.15), rgba(37,197,168,.09)); box-shadow: var(--shadow-card); }
  .demo .comparison-label { color: var(--indigo); font-size: 12px; font-weight: 800; }
  .demo .scatter { position: absolute; display: grid; place-items: center; width: 43%; height: 50px; border: 1px solid var(--hairline); border-radius: 10px; background: white; box-shadow: 0 5px 13px rgba(48,45,124,.06); color: var(--text); font-size: 11px; font-weight: 700; animation: scatter-pulse 5s ease-in-out infinite; }
  .demo .scatter-a { top: 56px; left: 7%; }  .demo .scatter-b { top: 78px; right: 7%; animation-delay: 1.2s; }  .demo .scatter-c { top: 133px; left: 13%; animation-delay: 2.4s; }  .demo .scatter-d { top: 153px; right: 8%; animation-delay: 3.6s; }
  .demo .old-cursor { position: absolute; width: 16px; height: 19px; left: 20%; top: 88px; clip-path: polygon(0 0, 0 100%, 40% 70%, 65% 100%, 82% 91%, 57% 63%, 100% 58%); background: var(--point); filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); animation: cursor-hop 5s ease-in-out infinite; }
  .demo .appeal-old p, .demo .appeal-new p { position: absolute; right: 15px; bottom: 12px; left: 15px; margin: 0; color: var(--text); font-size: 10px; font-weight: 700; text-align: center; }
  .demo .appeal-divider { display: grid; place-items: center; color: var(--violet); font-size: 24px; }
  .demo .appeal-divider span { animation: nudge 2.5s ease-in-out infinite; }
  .demo .workspace-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 124px; margin-top: 24px; padding: 7px; border: 1px solid rgba(105,85,186,.2); border-radius: 10px; background: white; box-shadow: 0 7px 20px rgba(48,45,124,.08); animation: workspace-glow 5s ease-in-out infinite; }
  .demo .workspace-preview > div { display: flex; flex-direction: column; gap: 7px; padding: 8px; border-radius: 6px; background: rgba(105,85,186,.06); }
  .demo .workspace-preview > div + div { background: rgba(37,197,168,.08); }
  .demo .workspace-preview small { color: var(--violet); font-size: 9px; font-weight: 800; }  .demo .workspace-preview span { width: max-content; max-width: 100%; padding: 3px 5px; border-radius: 4px; background: white; color: var(--indigo); font-size: 10px; font-weight: 700; }
  .demo .workspace-ai { width: max-content; max-width: 92%; margin: -6px auto 0; padding: 8px 11px; border-radius: 8px; background: var(--indigo); color: white; box-shadow: 0 8px 18px rgba(48,45,124,.18); font-size: 10px; font-weight: 700; animation: ai-rise 5s ease-in-out infinite; }
  .demo .appeal-line { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 15px; color: var(--indigo); text-align: center; }
  .demo .appeal-line strong { font-size: clamp(12px, 2vw, 17px); line-height: 1.5; }  .demo .quote-mark { color: var(--violet-light); font: 800 29px var(--font-num); }

/* 3. 구체적 시연: 자료 두 곳 → 요청 → 근거가 있는 표. */
  .demo .case-stage { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: 175px 175px; gap: 10px; align-items: stretch; }
  .demo .case-source { display: flex; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bg); box-shadow: var(--shadow-card); animation: source-enter 6s ease-in-out infinite; }
  .demo .source-a { grid-column: 1; grid-row: 1; }  .demo .source-b { grid-column: 1; grid-row: 2; animation-delay: .6s; }
  .demo .source-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--violet); color: white; font: 800 11px var(--font-num); }
  .demo .source-b .source-icon { background: var(--line-public); color: var(--indigo); }
  .demo .case-source div { min-width: 0; }  .demo .case-source small { display: block; margin-bottom: 6px; color: var(--caption); font-size: 9px; }  .demo .case-source strong { display: block; margin-bottom: 11px; color: var(--indigo); font-size: 10px; line-height: 1.35; }
  .demo .source-line { display: block; width: 92%; height: 5px; margin-bottom: 5px; border-radius: 3px; background: var(--hairline); }  .demo .source-line.short { width: 58%; }
  .demo .case-prompt { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 15px; border-radius: var(--radius-sm); background: var(--indigo); box-shadow: 0 12px 25px rgba(48,45,124,.18); color: white; animation: prompt-breathe 6s ease-in-out infinite; }
  .demo .prompt-star { align-self: flex-start; color: var(--lavender, #B99EFF); font-size: 22px; }  .demo .case-prompt p { margin: 0; font-size: 12px; line-height: 1.7; }  .demo .case-prompt b { color: rgba(255,255,255,.82); font-weight: 600; }
  .demo .case-output { grid-column: 3; grid-row: 1 / 3; min-width: 0; overflow: hidden; border: 1px solid rgba(37,197,168,.45); border-radius: var(--radius-sm); background: white; box-shadow: var(--shadow-card); animation: output-reveal 6s ease-in-out infinite; }
  .demo .output-head { display: flex; justify-content: space-between; gap: 5px; padding: 12px; background: rgba(37,197,168,.12); color: var(--indigo); font-size: 11px; font-weight: 800; }  .demo .output-head small { color: var(--caption); font-size: 9px; font-weight: 600; }
  .demo .output-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .demo .output-grid > * { min-width: 0; padding: 8px 5px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); color: var(--text); font-size: 9px; font-weight: 500; text-align: center; }
  .demo .output-grid > :nth-child(3n) { border-right: 0; }  .demo .output-grid > b { background: var(--bg-soft); color: var(--indigo); font-weight: 800; }  .demo .output-grid > :nth-child(3n + 1) { color: var(--indigo); font-weight: 700; }
  .demo .output-source { padding: 7px 9px; border-bottom: 1px solid var(--hairline); color: var(--violet); font-size: 9px; font-weight: 700; }
  .demo .output-questions { display: flex; flex-direction: column; gap: 4px; padding: 8px 9px; background: rgba(105,85,186,.06); color: var(--indigo); font-size: 9px; line-height: 1.35; }
  .demo .output-questions strong { font-weight: 800; }
  .demo .case-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }  .demo .case-footer span { padding: 10px; border-radius: 8px; background: rgba(105,85,186,.08); color: var(--indigo); font-size: 10px; font-weight: 700; text-align: center; }

  .demo.is-paused *, .demo.is-paused *::before, .demo.is-paused *::after { animation-play-state: paused !important; }
@keyframes sidebar-focus { 0%, 28%, 100% { box-shadow: 0 2px 10px rgba(48,45,124,.1); } 12% { box-shadow: 0 0 0 4px rgba(105,85,186,.22), 0 3px 14px rgba(48,45,124,.17); } }
@keyframes page-focus { 0%, 26%, 100% { box-shadow: none; } 42% { box-shadow: 0 0 0 5px rgba(185,158,255,.3); } }
@keyframes split-focus { 0%, 27%, 100% { background: rgba(37,197,168,.035); } 48% { background: rgba(37,197,168,.17); } }
@keyframes panel-focus { 0%, 55%, 100% { box-shadow: none; } 77% { box-shadow: inset 0 0 0 3px rgba(229,75,120,.25); } }
@keyframes step-focus { 0%, 19%, 100% { border-color: var(--hairline); transform: translateY(0); } 8% { border-color: var(--violet); transform: translateY(-3px); } }
@keyframes scatter-pulse { 0%, 100% { transform: translateY(0); border-color: var(--hairline); } 12% { transform: translateY(-6px); border-color: var(--point); } }
@keyframes cursor-hop { 0%, 100% { left: 20%; top: 88px; } 25% { left: 64%; top: 112px; } 50% { left: 28%; top: 162px; } 75% { left: 67%; top: 177px; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes workspace-glow { 0%, 100% { box-shadow: 0 7px 20px rgba(48,45,124,.08); } 50% { box-shadow: 0 8px 25px rgba(105,85,186,.2); } }
@keyframes ai-rise { 0%, 100% { transform: translateY(3px); opacity: .78; } 40%, 80% { transform: translateY(-2px); opacity: 1; } }
@keyframes source-enter { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(4px); } }
@keyframes prompt-breathe { 0%, 100% { box-shadow: 0 12px 25px rgba(48,45,124,.18); } 45% { box-shadow: 0 15px 30px rgba(48,45,124,.31); } }
@keyframes output-reveal { 0%, 100% { box-shadow: var(--shadow-card); } 60% { box-shadow: 0 0 0 4px rgba(37,197,168,.2), var(--shadow-card); } }

@media (max-width: 620px) {
    .demo { min-height: 650px; padding: 18px 13px; }
    .demo .demo-head { margin-bottom: 15px; }  .demo h1, .demo h3 { font-size: 23px; }  .demo .demo-deck { font-size: 12px; }  .demo .motion-toggle { padding: 7px; font-size: 10px; }
    .demo .browser-grid { grid-template-columns: 74px 1fr 1fr; grid-template-rows: 192px 130px; }
    .demo .browser-grid > * { padding: 10px 6px; }
    .demo .flow-sidebar { grid-column: 1; grid-row: 1 / 3; }  .demo .flow-page { grid-column: 2; grid-row: 1; }  .demo .flow-split { grid-column: 3; grid-row: 1; border-right: 0; }  .demo .flow-panel { grid-column: 2 / 4; grid-row: 2; border-top: 1px solid var(--hairline); }
    .demo .flow-sidebar strong, .demo .pane-label { font-size: 9px; }  .demo .mini-tab { padding: 6px 2px; font-size: 9px; white-space: normal; }  .demo .mini-tab span { display: none; }  .demo .pane-label { margin-bottom: 10px; }  .demo .page-highlight { margin: 9px 0; padding: 5px; font-size: 8px; }  .demo .mock-heading { margin-bottom: 10px; }  .demo .mock-line { margin-bottom: 6px; }  .demo .result-title { margin: 16px 0 10px; font-size: 10px; }  .demo .result-row { font-size: 8px; padding: 7px 0; }  .demo .flow-panel p { margin: 8px 0; font-size: 9px; }  .demo .panel-response { padding: 5px; font-size: 9px; }
    .demo .flow-steps { gap: 4px; }  .demo .flow-steps li { align-items: flex-start; gap: 4px; padding: 7px 3px; font-size: 9px; }  .demo .flow-steps b { width: 17px; height: 17px; font-size: 9px; }
    .demo .appeal-stage { grid-template-columns: 1fr; min-height: 0; gap: 8px; }  .demo .appeal-old, .demo .appeal-new { height: 170px; padding: 10px; }  .demo .appeal-divider { height: 20px; transform: rotate(90deg); font-size: 20px; }  .demo .comparison-label { font-size: 10px; }  .demo .scatter { height: 32px; font-size: 9px; }  .demo .scatter-a { top: 40px; }  .demo .scatter-b { top: 53px; }  .demo .scatter-c { top: 89px; }  .demo .scatter-d { top: 101px; }  .demo .old-cursor { top: 65px; }  .demo .appeal-old p, .demo .appeal-new p { bottom: 6px; font-size: 9px; }  .demo .workspace-preview { height: 83px; margin-top: 9px; padding: 4px; }  .demo .workspace-preview > div { gap: 3px; padding: 4px; }  .demo .workspace-preview span { font-size: 8px; }  .demo .workspace-ai { padding: 5px; font-size: 9px; }  .demo .appeal-line { margin-top: 8px; }  .demo .appeal-line strong { font-size: 12px; }
    .demo .case-stage { grid-template-columns: 1fr 1fr; grid-template-rows: 83px 105px 157px; gap: 7px; }  .demo .source-a { grid-column: 1; grid-row: 1; }  .demo .source-b { grid-column: 2; grid-row: 1; }  .demo .case-source { padding: 7px; gap: 5px; }  .demo .source-icon { width: 18px; height: 18px; font-size: 9px; }  .demo .case-source small { font-size: 8px; }  .demo .case-source strong { margin-bottom: 5px; font-size: 9px; }  .demo .case-prompt { grid-column: 1 / 3; grid-row: 2; padding: 9px; }  .demo .case-prompt p { font-size: 11px; }  .demo .case-output { grid-column: 1 / 3; grid-row: 3; }  .demo .output-head { padding: 7px; }  .demo .output-grid > * { padding: 4px; font-size: 8px; }  .demo .case-footer { gap: 4px; margin-top: 8px; }  .demo .case-footer span { padding: 6px 3px; font-size: 8px; }
    .demo .scene-note { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .demo *, .demo *::before, .demo *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 620px) {
  .demo { min-height: 0; }
  .demo .browser-grid { display: flex; flex-direction: column; }
  .demo .browser-grid > * { width: 100%; padding: 12px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .demo .flow-sidebar { display: flex; align-items: center; gap: 5px; min-height: 68px; }
  .demo .flow-sidebar strong { flex: none; margin: 0 auto 0 0; font-size: 12px; }
  .demo .mini-tab { margin: 0; padding: 7px 5px; font-size: 11px; white-space: nowrap; }
  .demo .flow-page { height: 135px; }
  .demo .flow-page .mock-line:nth-last-child(-n+2) { display: none; }
  .demo .flow-split { height: 156px; }
  .demo .flow-panel { min-height: 157px; border-bottom: 0; }
  .demo .pane-label { margin-bottom: 8px; font-size: 12px; }
  .demo .mock-heading { height: 12px; margin-bottom: 8px; }
  .demo .mock-line { height: 5px; margin-bottom: 5px; }
  .demo .page-highlight { margin: 8px 0 0; font-size: 12px; }
  .demo .result-title { margin: 0 0 5px; font-size: 13px; }
  .demo .result-row { padding: 5px 0; font-size: 11px; }
  .demo .flow-panel p { margin: 8px 0; font-size: 12px; }
  .demo .panel-response { font-size: 11px; }
  .demo .flow-steps li { font-size: 11px; }
  .demo .comparison-label { font-size: 12px; }
  .demo .scatter { font-size: 11px; }
  .demo .appeal-old, .demo .appeal-new { height: 202px; }
  .demo .appeal-old p, .demo .appeal-new p { bottom: 10px; font-size: 11px; }
  .demo .appeal-new p { display: none; }
  .demo .workspace-preview { height: 110px; margin-top: 15px; }
  .demo .workspace-ai { margin-top: 5px; }
  .demo .workspace-preview span, .demo .workspace-ai { font-size: 10px; }
  .demo .appeal-line strong { font-size: 14px; }
  .demo .case-stage { grid-template-rows: 98px 112px auto; }
  .demo .case-source small { font-size: 10px; }
  .demo .case-source strong, .demo .case-footer span { font-size: 11px; }
  .demo .case-prompt p { font-size: 12px; }
  .demo .output-grid > * { padding: 7px 4px; font-size: 12px; }
  .demo .output-source, .demo .output-questions { font-size: 11px; }
}