:root{color-scheme:light dark;--site-bg:light-dark(#f3f7f8,#091216);--site-panel:light-dark(#fff,#101d23);--site-text:light-dark(#152d36,#e0eef0);--site-muted:light-dark(#526c75,#93adb5);--site-line:light-dark(#d3e0e4,#273b43);--site-accent:light-dark(#007f90,#72e5ed);--site-input:light-dark(#eef3f5,#091216);--site-button:light-dark(#e8f2f5,#18313a);--site-warning:light-dark(#995500,#ffbd79);font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:var(--site-bg);color:var(--site-text)}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--site-bg)}
button,input{font:inherit}
a{color:var(--site-accent)}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--site-accent);outline-offset:4px}
.site-nav{max-width:1500px;margin:0 auto;padding:10px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px}
.site-wordmark{color:var(--site-text);text-decoration:none;font-size:19px;font-weight:500;letter-spacing:-.035em;white-space:nowrap}
.site-wordmark span{display:inline-block;margin-left:12px;color:var(--site-muted);font-size:11px;font-weight:400;letter-spacing:.05em}
.site-nav-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.site-nav button,.site-footer button{padding:7px 9px;border:1px solid transparent;background:transparent;color:var(--site-muted);font-size:12px;border-radius:5px}
.site-nav button:hover,.site-footer button:hover{color:var(--site-text);border-color:var(--site-line)}
.site-nav #site-theme{border-color:var(--site-line);white-space:nowrap;color:var(--site-text)}
.site-nav #site-theme[aria-pressed=true]{background:var(--site-button);border-color:var(--site-accent)}
main{max-width:1500px;margin:0 auto;padding:0 16px}
html #sylva-reflex-atlas{width:100%;color-scheme:inherit}
#sylva-reflex-atlas .ra-heading{padding:13px 20px}
#sylva-reflex-atlas .ra-play i{display:none}
.site-footer{max-width:1500px;margin:0 auto;padding:16px 24px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:var(--site-muted);font-size:11px}
.site-footer>span:nth-child(2){max-width:560px;line-height:1.6}
.skip-link{position:absolute;top:-100px;left:16px;background:var(--site-panel);padding:12px;z-index:10}
.skip-link:focus{top:8px}
.screenreader-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
dialog{max-width:min(600px,calc(100% - 32px));max-height:85dvh;overflow:auto;margin:auto;padding:26px;background:var(--site-panel);color:var(--site-text);border:1px solid var(--site-line);border-radius:14px;font-size:14px;line-height:1.7}
dialog::backdrop{background:light-dark(#18313a66,#031015cc);backdrop-filter:blur(5px)}
dialog p{margin:16px 0 0}
dialog li{margin:12px 0}
dialog ol{padding-left:22px}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.dialog-heading h2{margin:0;font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.03em}
dialog button{background:var(--site-button);color:var(--site-text);border:1px solid var(--site-line);border-radius:6px;padding:9px 13px;margin-top:14px}
.dialog-heading button{font-size:24px;border:0;background:transparent;padding:0 6px;margin:0}
.no-script{margin:20px;padding:16px;border:1px solid var(--site-warning);color:var(--site-warning)}
#share-dialog label{display:block;color:var(--site-muted);margin-bottom:8px}
#share-url{display:block;width:100%;padding:11px;border:1px solid var(--site-line);border-radius:6px;background:var(--site-input);color:var(--site-text);font-size:14px}
#clear-status,#copy-status{font-size:12px;color:var(--site-accent);min-height:20px}
@media(max-width:580px){
.site-nav{padding:10px 16px;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
.site-wordmark{font-size:17px}
.site-wordmark span{margin-left:8px;font-size:10px}
.site-nav-actions{grid-row:2;grid-column:1/-1;justify-content:flex-start;gap:8px}
.site-nav #site-theme{grid-row:1;grid-column:2}
.site-nav button{font-size:11px;padding:6px}
main{padding:0 8px}
#sylva-reflex-atlas .ra-heading{padding:12px 16px;gap:9px}
.site-footer{padding:16px;font-size:11px}
.site-footer>span:nth-child(2){order:3;max-width:100%}
dialog{padding:20px;font-size:14px}
.dialog-heading h2{font-size:21px}
}