:root{--bg:#061a2c; --bar:#081f35; --holo:#52e4ff; --ink:#ddecf6; --muted:#8aa9bf; --edge:rgba(82,228,255,.26);
  --display:"Chakra Petch","Segoe UI",Roboto,Arial,sans-serif; --body:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#061a2c; --bar:#081f35; } }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#0c2c4b; --bar:#0e3050; } }
:root[data-theme="dark"]{ --bg:#061a2c; --bar:#081f35; }
:root[data-theme="light"]{ --bg:#0c2c4b; --bar:#0e3050; }
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--ink); font-family:var(--body)}
#wrap{position:relative; height:100%; display:flex; flex-direction:column}
nav{flex:0 0 auto; display:flex; align-items:stretch; gap:0; background:var(--bar); border-bottom:1px solid var(--edge); padding:0 10px; overflow-x:auto}
.site{font-family:var(--display); font-weight:600; font-size:14px; color:var(--muted); display:flex; align-items:center; padding:0 16px 0 4px; white-space:nowrap}
[role=tab]{appearance:none; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; text-align:left; padding:8px 16px 7px; font-family:var(--display); white-space:nowrap}
[role=tab] strong{display:block; font-size:14px; font-weight:600; color:var(--ink)}
[role=tab] span{display:block; font-family:var(--body); font-size:12px}
[role=tab][aria-selected=true]{border-bottom-color:var(--holo); background:rgba(82,228,255,.07)}
[role=tab][aria-selected=true] strong{color:var(--holo)}
[role=tab]:hover{background:rgba(82,228,255,.05)}
[role=tab]:focus-visible{outline:2px solid var(--holo); outline-offset:-2px}
main{position:relative; flex:1 1 auto; min-height:0}
iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; visibility:hidden; pointer-events:none}
iframe.on{visibility:visible; pointer-events:auto}
textarea{display:none}
@media (max-width:640px){ .site{display:none} [role=tab]{padding:7px 12px} [role=tab] span{font-size:11px} }
@media (max-width:480px){ [role=tab]{flex:1 1 0; padding:8px 10px 7px} [role=tab] strong{font-size:12.5px} [role=tab] span{display:none} nav{padding:0 4px} }
@media (max-height:500px) and (orientation:landscape){ [role=tab]{padding:5px 14px 4px} [role=tab] span{display:none} .site{font-size:12px} }