:root{
  --paper:#FFFCF6;
  --ink:#3E3A39;
  --coral:#F2A497;
  --yamabuki:#F6D27A;
  --mizu:#A8D3E6;
  --wakatake:#B9DAA5;
  --momiji:#E07A5F;
  --orange:#F0A35E;
  --paper-2:#FFF4E4;
  --line:3px solid var(--ink);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --shadow:4px 4px 0 var(--ink);
  --topbar-h:104px;
  font-family:"Huninn","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--topbar-h) + 8px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.7;letter-spacing:.02em;
  min-height:100vh;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.35;margin:0 0 .5em;font-weight:400}
p{margin:0 0 .8em}
button{font:inherit;color:inherit;cursor:pointer}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--yamabuki);padding:6px 12px;border:var(--line);border-radius:var(--r-sm)}
:focus-visible{outline:3px dashed var(--momiji);outline-offset:3px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:var(--line);padding:8px 12px 10px;
  padding-top:max(8px,env(safe-area-inset-top));
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:1.05rem;margin-bottom:6px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tabs a{
  text-align:center;text-decoration:none;padding:6px 0;min-height:40px;
  display:flex;align-items:center;justify-content:center;
  border:var(--line);border-radius:999px;background:#fff;font-size:.95rem;
}
.tabs a[aria-current="page"]{background:var(--coral);box-shadow:2px 2px 0 var(--ink)}

main{max-width:760px;margin:0 auto;padding:16px 14px 40px}
.tab[hidden]{display:none}
.sec-title{font-size:1.25rem;margin:26px 0 12px;display:flex;align-items:center;gap:6px}
.loading{text-align:center;padding:40px 0;opacity:.7}
.foot{border-top:var(--line);padding:16px;font-size:.78rem;text-align:center;opacity:.85;max-width:760px;margin:0 auto}
.muted{opacity:.72;font-size:.88em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (min-width:720px){
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .brand{margin:0}
  .tabs{min-width:440px}
  :root{--topbar-h:64px}
}