:root{
 --bg:#fff;--bg-subtle:#f5f5f5;--surface-2:#ededed;--border:#ddd;--divider:#e8e8e8;
 --text-strong:#111;--text:#333;--text-muted:#6b6b6b;--text-faint:#9a9a9a;
 --primary:#111;--primary-hover:#333;--secondary:#fff;--placeholder:#e6e6e6;--placeholder-text:#7a7a7a;
 --focus-ring:#111;--font-sans:"Noto Sans Thai",Tahoma,Arial,sans-serif;
}
html{color-scheme:light}body{background:var(--bg);color:var(--text);font-family:var(--font-sans)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::placeholder{color:var(--placeholder-text)}
/* Global annotation layer, enabled by assets/shell.js on every prototype page. */
.annotate-toggle{position:fixed;right:1rem;bottom:1rem;z-index:999;min-height:44px;border:1px solid var(--text-strong);border-radius:999px;background:var(--bg);color:var(--text-strong);padding:.65rem 1rem;font-weight:800;box-shadow:0 4px 18px rgb(0 0 0/.16)}
.annotation-summary{position:fixed;right:1rem;bottom:4.75rem;z-index:998;max-width:min(22rem,calc(100vw - 2rem));border:1px dashed var(--text-muted);background:var(--bg);padding:.65rem .8rem;font-size:.75rem;box-shadow:0 4px 18px rgb(0 0 0/.12)}
.annotation-summary b{display:block}.annotation-summary span{color:var(--text-muted)}
body:not(.annotations-on) .annotation-summary,body:not(.annotations-on) .slot-annotation{display:none}
.slot-annotation{position:absolute;z-index:2;top:.25rem;left:.25rem;border:1px dashed var(--text-muted);background:var(--bg);color:var(--text);padding:.15rem .35rem;font-size:.65rem;font-weight:800}
.annotations-on [data-slot-id]{position:relative;outline:1px dashed var(--text-muted);outline-offset:2px}
@media(max-width:480px){.annotate-toggle{right:.65rem;bottom:.65rem}.annotation-summary{right:.65rem;bottom:4.25rem}}