.example-shell { width:min(920px,calc(100% - 36px)); }
.example-topbar { justify-content:space-between; padding-bottom:54px; }
.example-back { color:var(--muted); font-size:13px; text-decoration:none; }
.example-hero { max-width:760px; padding-bottom:52px; }
.example-hero h1 { font-size:clamp(37px,6vw,64px); line-height:1.07; margin-bottom:23px; }
.example-hero .lead { max-width:680px; }
.experiment-label { font-size:12px; font-weight:650; color:var(--rose-ink); padding:9px 0 9px 12px; border-left:3px solid var(--accent-rose); margin:24px 0; }
.example-availability,.example-help { font-size:14px; color:var(--muted); }
.example-availability { max-width:580px; margin:14px 0 0; }
.example-reference,.example-script,.example-material { margin-bottom:44px; }
.example-section-head { margin-bottom:20px; }
.example-section-head h2 { font-size:clamp(25px,3.5vw,35px); }
.reference-card,.script-card { padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.reference-card { border-top:3px solid var(--accent-cyan); }
.reference-card blockquote { margin:15px 0; padding-left:14px; border-left:2px solid var(--line); font-size:19px; line-height:1.5; }
.reference-pattern { color:var(--muted); font-size:14px; margin:22px 0 0; }
.example-source { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.example-source summary,.example-filming summary { cursor:pointer; color:var(--text); font-size:14px; font-weight:700; }
.example-source[open] summary { margin-bottom:14px; }
.script-card { border-top:3px solid var(--text); }
#example-spoken-script { white-space:pre-wrap; overflow-wrap:anywhere; font-size:18px; line-height:1.75; margin:0; }
.example-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.example-export-status { min-height:24px; color:var(--muted); font-size:13px; margin:10px 0 18px; }
.example-export-status[data-tone="success"] { color:var(--success-ink); }
.example-export-status[data-tone="warning"] { color:var(--rose-ink); }
.example-filming { padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.example-filming[open] > summary { margin-bottom:18px; }
.filming-steps { margin:0; padding:0; list-style:none; }
.filming-steps li { padding:18px 0; border-top:1px solid var(--line); }
.filming-steps li:first-child { border-top:0; }
.step-title { display:flex; align-items:center; gap:13px; margin-bottom:13px; }
.step-title span { color:var(--accent-ink); font-size:12px; font-weight:750; }
.step-title h3 { margin:0; font-size:17px; }
.step-operation { font-weight:650; margin-bottom:8px; }
.step-note,.step-destination { margin:0; color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.step-destination { margin-top:12px; }
.example-material figure { max-width:640px; margin:0; }
.screenshot-link { display:block; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); }
.example-material img { display:block; width:100%; height:auto; }
.example-material figcaption { margin:12px 0 0; color:var(--muted); font-size:12px; }
@media(max-width:540px) { .example-topbar { padding-bottom:38px; gap:14px; flex-wrap:wrap; }.example-hero { padding-bottom:38px; }.reference-card,.script-card { padding:20px; } #example-spoken-script { font-size:16px; }.example-actions .button { flex:1 1 100%; }.example-section-head { margin-bottom:16px; } }