:root{--paper:#f3f7f8;--ink:#172d39;--muted:#536d7a;--soft:#6b828c;--line:#d2e0e4;--accent:#147d8b;--blue:#147d8b;--primary:#147d8b;--primary-hover:#106574;--primary-soft:#deeff1;--hero-glow:#e3eff2;--viewer-glow:#e0ecef;--footer:#e6f0f2}
:root[data-theme=dark]{--paper:#101c27;--ink:#e1eef2;--muted:#a1b7c1;--soft:#8fa9b6;--line:#2e4756;--accent:#74d7df;--blue:#80d8df;--surface:#182b38;--surface-soft:#203743;--primary:#64c6d2;--primary-hover:#8bdee4;--primary-soft:#223e4c;--hero-glow:#183c4b;--viewer-glow:#183847;--viewer-edge:#132b39;--footer:#142b37}
#naji-face-caption{position:absolute;z-index:7;left:50%;top:155px;transform:translateX(-50%);padding:10px 18px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);font-size:13px;max-width:80vw;text-align:center}
#naji-face-demo[aria-pressed=true]{background:var(--primary);color:var(--surface)}
#naji-face-demo{margin-left:7px;padding:8px 14px;border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--blue);font-family:inherit;font-size:10px;cursor:pointer;transition:background .2s,border-color .2s}
#naji-face-demo:hover{border-color:var(--accent);background:var(--primary-soft)}
#naji-face-demo:disabled{opacity:.4;cursor:wait}
#naji-face-demo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.controls{max-width:calc(100vw - 32px);white-space:normal;width:max-content}
.controls .animation-controls{max-width:460px}
.controls .animation-controls button{font-family:inherit;font-size:11px;line-height:1.5}
.controls .progress{justify-content:center}
@media(max-width:760px){#naji-face-caption{top:115px;font-size:11px;padding:7px 12px}.entry-controls{gap:6px;flex-wrap:wrap}.entry-controls button{padding:7px 10px;font-size:10px}}
@media(max-width:760px){.controls{width:calc(100% - 32px)}#naji-face-demo{margin-top:7px;font-size:10px}.animation-controls button{font-size:10px}.progress{gap:14px}}