*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
html{-webkit-text-size-adjust:100%}

html{
  scroll-padding-top:calc(var(--topbar) + env(safe-area-inset-top) + var(--s3));
  scroll-padding-bottom:var(--s5);
}
@media (max-width:900px){
  

  :root{--topbar:60px}
  html{scroll-padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--s4))}
}

body{
  background:var(--bg);
  
  padding-bottom:env(safe-area-inset-bottom);
  color:var(--ink);
  

  overflow-wrap:break-word;
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
a{color:var(--brand);text-underline-offset:2px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.25}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:4px}

#root{min-height:100vh;min-height:100dvh}
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;
  min-height:100vh;min-height:100dvh}
.shell.solo{grid-template-columns:1fr}

.side{background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;
  height:100vh;height:100dvh;overflow:hidden}
.main{min-width:0;display:flex;flex-direction:column}

.topbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6);
  background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar h1{font-size:var(--t-title)}
.topbar .sub{font-size:var(--t-small);color:var(--ink-3);margin-top:1px}
.topbar .spacer{margin-left:auto}
.topid{min-width:0;display:flex;flex-direction:column;justify-content:center}

.topco{display:none}
.mobact{display:none}

.content{padding:var(--s5) var(--s6) var(--s7);max-width:var(--content-max);
  width:100%;margin-inline:auto}

.stack{display:flex;flex-direction:column;gap:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s4);align-items:start}
.muted{color:var(--ink-3)}
.small{font-size:var(--t-small)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.center{text-align:center}
.wrap-read{max-width:var(--measure)}

@media (max-width:900px){
  

  .btn{padding:12px 17px}
  .btn-sm{padding:10px 14px}
  .chip{padding:10px 14px}
  .nav{padding:12px 10px 12px 14px}
  .rowlink{padding:var(--s4)}
  .vis-o{padding:9px 12px}
  

  .tile-link{padding:var(--s4)}

  .shell{grid-template-columns:1fr}
  

  

  .side{position:fixed;top:0;left:0;width:min(86vw,320px);z-index:60;
    bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));
    

    height:auto;
    

    transform:translateX(-101%);visibility:hidden;
    box-shadow:none;
    transition:transform .2s cubic-bezier(.4,0,1,1),
               box-shadow .2s linear,
               visibility 0s linear .2s}
  body.drawer .side{transform:none;visibility:visible;box-shadow:var(--shadow-lg);
    transition:transform .32s cubic-bezier(.16,.84,.34,1),
               box-shadow .32s linear,
               visibility 0s linear 0s;
    transition:transform var(--slow) var(--ease),visibility 0s}
  

  .scrim{position:fixed;inset:0;background:var(--scrim);z-index:50;
    opacity:0;pointer-events:none;transition:opacity .16s linear}
  body.drawer .scrim{transition:opacity .32s var(--ease)}
  body.drawer .scrim{opacity:1;pointer-events:auto}
  

  body.drawer{overflow:hidden}
  .topbar{padding:var(--s2) var(--s4);align-items:center;gap:var(--s2)}
  .topbar h1{font-size:var(--t-body);line-height:1.25}
  

  .topbar .sub{display:none}
  .topco{display:block;margin-bottom:1px}

  

  .topact{display:none}
  .demotag{padding:6px;gap:0}
  .demotag button{display:none}
  .demotag::after{content:"";width:7px;height:7px;border-radius:50%;
    background:var(--warn);display:block}
  .sync .syncwords{display:none}
  .sync{padding:7px;gap:0}

  
  .mobact{display:block;margin-bottom:var(--s4)}

  .content{padding:var(--s4) var(--s4) var(--s7)}
  .g2,.g3,.g4,.split{grid-template-columns:1fr}
}

@media (min-width:901px){ .scrim{display:none} }
@media (max-width:480px){ .g4{grid-template-columns:1fr 1fr} }

@media (prefers-reduced-motion:reduce){
  

  *,*::before,*::after{animation-duration:.001ms !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
}

@media (display-mode: standalone){
  

  .side{padding-top:env(safe-area-inset-top)}
  

  .tabs{padding-bottom:calc(env(safe-area-inset-bottom) + 2px)}
  

  .back{position:relative;z-index:1}
}

@media (max-height:520px) and (orientation:landscape){
  .side{overflow-y:auto}
  .veil{padding:var(--s2)}
  .modal{max-height:96dvh}
  .tabs .tab{min-height:44px;padding-top:4px;padding-bottom:3px}
  .tabs .tab-l{font-size:9.5px}
}