/* Shared preview behaviour only; each example owns its visual system. */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{--preview-accent:var(--luc,#2563eb);--preview-bg:#fff;--preview-ink:#17202c}
body .tb-bao{position:relative;top:auto;font-size:13px;line-height:1.6}
body .tb-bao a{display:inline-flex;align-items:center;min-height:44px;white-space:normal}
.tb-copy{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 14px;border:1px solid rgba(207,227,255,.45);border-radius:999px;background:transparent;color:#cfe3ff;font:600 12.5px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap}
.tb-copy:hover,.tb-copy:focus-visible{color:#fff;border-color:#fff}
.tb-copy.done{color:#86efac;border-color:#86efac}
body :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid currentColor;outline-offset:4px}
body :is(button,input,select,textarea){font:inherit}
body .tb-copy{font:600 12.5px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
body :is(button,summary){cursor:pointer}
body :is(p,dd){font-size:max(1rem,1em)}
body :is(a.n1,a.n2,a.goi,a.nut,button,summary){min-height:44px}
body :is(header,nav) a{min-height:44px;display:inline-flex;align-items:center}
body .skip:focus{z-index:10001;top:8px}
.preview-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:32px;border:2px solid var(--preview-accent);background:var(--preview-bg);color:var(--preview-ink);margin:auto;text-align:left}
.preview-dialog::backdrop{background:rgb(0 0 0 / .72)}
.preview-dialog h2{font-size:clamp(24px,5vw,32px);line-height:1.4;margin:0 0 16px}
.preview-dialog p{margin:16px 0;line-height:1.7}
.preview-dialog button{display:block;background:var(--preview-accent);color:var(--preview-bg);border:2px solid currentColor;padding:12px 20px;margin-top:24px}
.preview-menu{display:none}
@media(max-width:640px){
 .preview-menu{display:block;margin:12px 16px;border-block:1px solid currentColor;padding:8px 0}
 .preview-menu summary{display:flex;align-items:center;justify-content:space-between;padding:8px}
 .preview-menu summary::after{content:'+'}.preview-menu[open] summary::after{content:'−'}
 .preview-menu nav{display:flex;flex-wrap:wrap;gap:8px;padding:8px}
 .preview-menu a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px}
 .preview-dialog{padding:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}