/* GENERATED by scripts/generate_tokens_css.py from the Desktop/NetaMateUI
   bundle exports. Do not hand-edit — re-run the script instead, so these
   values keep matching the source design exactly. */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none;transition:color .18s ease,border-color .18s ease,background .18s ease}
a:hover{color:var(--accHover)}
button{font-family:inherit;transition:background .18s ease,border-color .18s ease,color .18s ease}
::selection{background:var(--acc);color:var(--accInk)}
[data-rv="on"]{opacity:0;transform:translateY(20px)}
[data-rv="on"][data-in="1"]{opacity:1;transform:none;transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){[data-rv="on"]{opacity:1 !important;transform:none !important}}
@media (max-width:960px){[data-nav]{display:none !important}[data-navbtn]{display:inline-flex !important}}
@media (max-width:560px){[data-hidesm]{display:none !important}}

/* --- Added by this port -------------------------------------------------
   The original rendered conditional markup through its own component runtime
   (<sc-if>). That runtime is gone, so the theme icons and the mobile menu are
   toggled with CSS + a data attribute instead. */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-flex; }
html[data-theme="dark"] .theme-icon-sun { display: inline-flex; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
/* !important is required: the panel carries an inline `display:grid` copied
   from the source markup, and an inline style beats a stylesheet rule. Without
   this the mobile menu renders permanently on desktop. */
[data-menu-panel][hidden] { display: none !important; }
img { max-width: 100%; display: block; }