/* misamisa.cc style: one monospace face, flat ground, blue links that turn orange, "# headers", 1px rows, outlined tags.
   Light = the white chito page (#4555cc / #ff6f00), dark = near-black with brightened blue/orange. */
:root{
  --bg:#ffffff; --fg:#000000; --body:#212121; --muted:#757575; --faint:#a3a3a3; --line:#e5e5e5;
  --blue:#4555cc; --orange:#ff6f00; --violet:#6d74b8;
  --mono:Cousine,ui-monospace,Menlo,monospace;
  --zh:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  /* aliases used by the page scripts */
  --accent:var(--orange); --green:var(--blue); --heat:var(--blue); --warn:var(--violet);
  --surface:var(--bg); --surface-2:color-mix(in oklab,var(--fg) 4%,var(--bg));
  --rule:var(--line); --rule-2:color-mix(in oklab,var(--fg) 16%,var(--bg)); --fg-2:var(--body);
  --accent-soft:color-mix(in oklab,var(--orange) 13%,var(--bg)); --green-soft:color-mix(in oklab,var(--blue) 13%,var(--bg));
  --bad:color-mix(in oklab,var(--orange) 55%,var(--fg));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111111; --fg:#ededed; --body:#c9c9c9; --muted:#8e908c; --faint:#5c5c5c; --line:#2a2a2a;
  --blue:#7c8af2; --orange:#ff7a1a; --violet:#adb2db; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111111; --fg:#ededed; --body:#c9c9c9; --muted:#8e908c; --faint:#5c5c5c; --line:#2a2a2a;
  --blue:#7c8af2; --orange:#ff7a1a; --violet:#adb2db; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);transition:background .3s,color .3s}
body{font:400 15px/1.7 var(--mono);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--orange)}
:focus-visible{outline:1px solid var(--orange);outline-offset:2px}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--mono)}
.zh{font-family:var(--zh)}

main{max-width:820px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-block:40px 36px;min-height:100vh;display:flex;flex-direction:column}
main.wide{max-width:1120px}

/* header, like the site's: brand left, text controls right */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.brand{color:var(--fg);font-weight:700;text-decoration:none;display:flex;gap:8px;align-items:center}
.brand span{color:var(--muted);font-weight:400}
.brand:hover{color:var(--fg)}
.controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.links a{color:var(--muted);text-decoration:none;line-height:18px}
.links a:hover{color:var(--fg)}
.links a.on{color:var(--orange);font-weight:700}
.theme{font:inherit;line-height:18px;color:var(--muted);background:none;border:1px solid var(--line);padding:3px 0;width:64px;text-align:center;cursor:pointer}
.theme:hover{color:var(--fg);border-color:var(--muted)}

/* section headers: "# Title" */
section{margin-top:52px;display:flex;flex-direction:column;gap:14px}
.h{font:700 15px/20px var(--mono);color:var(--muted)}
.h b{color:var(--muted);margin-right:6px}
.name{font:700 20px/1.4 var(--mono);color:var(--blue)}
.lead{color:var(--fg);font-weight:700}
.note{font-size:13px;line-height:1.7;color:var(--muted)}
.body{color:var(--body)}

/* rows, as on the site */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.row > *{line-height:26px}
.tag{font-size:11px;line-height:18px;font-weight:700;color:var(--blue);border:1px solid currentColor;padding:0 6px;white-space:nowrap;display:inline-block}
.tag.o{color:var(--orange)}
.tag.v{color:var(--violet)}
.tag.m{color:var(--muted)}
button.tag{background:none;font-family:var(--mono);cursor:pointer}
button.tag:hover,button.tag.on{color:var(--orange)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* text tabs, like the EN / 中文 switch */
.seg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px}
.seg button{font:inherit;background:none;border:0;padding:0;color:var(--muted);cursor:pointer;line-height:22px}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"]{color:var(--orange);font-weight:700}
.seg button .n{color:var(--faint);margin-left:4px;font-weight:400}

/* tables */
.scroll{overflow-x:auto;border-top:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:right;white-space:nowrap;font:13px/1.5 var(--mono);border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left;padding-left:0;position:sticky;left:0;background:var(--bg);z-index:1}
thead th{font-weight:700;color:var(--muted);font-size:12px}
thead th small{display:block;font-weight:400;color:var(--faint)}
tbody tr:hover td{background:var(--surface-2)}

footer{margin-top:auto;padding-top:56px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--faint)}

@keyframes rise{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadein{from{opacity:.2}to{opacity:1}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-width:900px){main{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px));padding-block:48px 40px}section{margin-top:72px}.row{padding:16px 0}}