:root{--bg:#fdf6e3;--bg2:#eee8d5;--fg:#586e75;--hi:#073642;--mut:#93a1a1;--acc:#268bd2;--y:#b58900;--o:#cb4b16;--g:#859900;--m:#d33682;--c:#2aa198}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#002b36;--bg2:#073642;--fg:#93a1a1;--hi:#eee8d5;--mut:#586e75}}
:root[data-theme=dark]{--bg:#002b36;--bg2:#073642;--fg:#93a1a1;--hi:#eee8d5;--mut:#586e75}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.65 Georgia,"PT Serif","Times New Roman",serif}
main,header.top,footer{max-width:760px;margin:0 auto;padding:0 20px}
header.top{display:flex;justify-content:space-between;align-items:center;padding-top:18px}
header.top a.logo{font:700 20px system-ui,sans-serif;color:var(--hi);text-decoration:none}
button,select,input{font:15px system-ui,sans-serif}
button{background:var(--bg2);color:var(--hi);border:1px solid var(--mut);border-radius:6px;padding:5px 10px;cursor:pointer}
h1,h2,h3{color:var(--hi);font-family:system-ui,sans-serif;line-height:1.25}
h1{font-size:2.1em;margin:.8em 0 .2em}
a{color:var(--acc)}
.tag{font-size:1.15em;color:var(--mut);margin-top:0}
.list{list-style:none;padding:0}
.list li{background:var(--bg2);border-radius:10px;padding:14px 18px;margin:12px 0}
.list li.soon{opacity:.6}
.list b{color:var(--hi);font-family:system-ui,sans-serif}
.badge{font:12px system-ui,sans-serif;background:var(--mut);color:var(--bg);border-radius:4px;padding:1px 6px;margin-left:6px}
figure{margin:28px 0;background:var(--bg2);border-radius:12px;padding:14px}
figure canvas{width:100%;display:block;border-radius:8px;background:var(--bg);touch-action:none}
figcaption{font:14px/1.5 system-ui,sans-serif;color:var(--mut);margin-top:8px}
.ctl{font:15px system-ui,sans-serif;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:10px;color:var(--hi)}
.ctl input[type=range]{flex:1;min-width:180px;accent-color:var(--acc)}
.ctl .v{font-variant-numeric:tabular-nums;min-width:5em}
code,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}
.math{font-family:ui-monospace,Menlo,monospace;color:var(--hi)}
table{border-collapse:collapse;font:15px system-ui,sans-serif;width:100%}
td,th{padding:3px 8px;border-bottom:1px solid var(--mut);text-align:right}
footer{color:var(--mut);font-size:14px;padding:40px 20px}