/* core.css — shared by every preview template. Templates add their own sheet under /assets/t/<template>/. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{--demo-ribbon-h:44px}
body{margin:0;padding-bottom:calc(var(--demo-ribbon-h) + env(safe-area-inset-bottom))}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.demo-ribbon{position:fixed;z-index:9999;left:0;right:0;bottom:0;display:flex;gap:.75rem;align-items:center;justify-content:center;
  min-height:var(--demo-ribbon-h);padding:0 16px env(safe-area-inset-bottom);background:#111;white-space:nowrap;color:#f5f5f5;font:500 13px/1.3 system-ui,-apple-system,sans-serif;text-align:center}
.demo-ribbon-text{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:600px){.demo-ribbon-by{display:none}}
.demo-ribbon a{color:#9ecbff;font-weight:600}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.demo-holding{min-height:100vh;display:grid;place-items:center;background:#0f1115;color:#e8e8e8;font:16px/1.5 system-ui,sans-serif;padding:0}
.demo-holding h1{font-size:1.5rem;margin:0 0 .25rem}
.demo-sample{position:absolute;z-index:2;left:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font:600 11px/1.4 system-ui,-apple-system,sans-serif;letter-spacing:.02em;pointer-events:none}