:root { color-scheme: light; --paper: #fff; --ink: #000; --line: 20px; }
:root { --text-font: 'Noto Sans', 'Noto Sans Japanese', 'Noto Sans JP', sans-serif; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --paper: #000; --ink: #fff; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
html, body { width: 100%; min-height: 100%; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; min-height: 100svh; font: 400 12px/var(--line) var(--text-font); }
::-webkit-scrollbar { display: none; }
main { width: min(600px, calc(100% - 96px)); margin: auto; padding: 40px 0; }
main:has(#viewport) { padding-block: calc((100dvh - var(--line)) / 2); }
#viewport { outline: none; }
.site-row { position: relative; min-height: var(--line); line-height: var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }

p { margin: 0; }
p:not(.site-row) { margin-bottom: var(--line); }
button, a { display: block; color: inherit; background: var(--paper); border: 0; border-radius: 0; padding: 0; text-decoration: none; font: inherit; cursor: pointer; }
a:hover, button:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: none; }
form { margin: 0; }
footer { margin: 0; }
[hidden] { display: none !important; }
@media (max-width: 480px) { main { width: calc(100% - 48px); } }