@import url('/brand/tokens.css');
:root{--surface:var(--panel);--text:var(--texto);--muted:var(--sec);--border:var(--borde);--accent:var(--acento);--soft:var(--borde);--oro:#c59d5f;--area-vida-ink:#697353;--on-accent:var(--bg);--font:var(--sans);--mono:monospace;--radius:12px;--radius-s:6px;--fs-h1:clamp(1.7rem,4vw,2.6rem);--fs-sec:1rem;--fs-nota:.875rem;--fs-micro:.8rem;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-7:0px;--sp-8:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font)}a{color:var(--accent)}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.wrap,.ov-wrap{max-width:1200px;margin:auto;padding:24px}.demo-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:auto;padding:12px 24px;border-bottom:1px solid var(--border)}.demo-nav a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}.demo-nav a:first-child{font-weight:600}.demo-nav .idioma{margin-left:auto}
@media(max-width:640px){.demo-nav{padding:8px 12px}.of-top{flex-wrap:wrap}.of-links{flex-wrap:wrap}.ov-intro p{white-space:normal!important;overflow:visible!important}.ov-controls>div{flex-wrap:wrap}.ov-controls button{min-width:60px}.ot-actions{max-width:190px}}