:root {
  --background: #f6f7f8; --surface: #ffffff; --foreground: #182026;
  --muted: #5b6670; --border: #d7dde2; --primary: #0f6b78;
  --primary-hover: #0b5661; --on-primary: #ffffff; --focus: #0e7490;
  --surface-subtle: #f0f2f4; --disabled: #6c7781;
  --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  --radius-md: .375rem; --border-width: 1px; --border-width-strong: 2px;
  --control-touch: 2.75rem; --reading-max: 45rem;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-sm: .8125rem; --text-lg: 1rem; --text-xl: 1.125rem; --text-3xl: 1.5rem;
  --leading-normal: 1.55;
}
* { box-sizing: border-box; }
body { margin: var(--space-0); background: var(--background); color: var(--foreground); font: var(--text-lg)/var(--leading-normal) var(--font-sans); }
main { max-width: var(--reading-max); margin: auto; padding: var(--space-4); padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
h1 { font-size: var(--text-3xl); margin: var(--space-2) var(--space-0); }
h2 { font-size: var(--text-xl); margin: var(--space-0) var(--space-0) var(--space-3); }
p { margin: var(--space-2) var(--space-0) var(--space-4); }
.eyebrow, footer { color: var(--muted); }
#guide { padding: var(--space-4); background: var(--surface); border: var(--border-width-strong) solid var(--primary); overflow-wrap: anywhere; }
section { padding: var(--space-6) var(--space-0); border-bottom: var(--border-width) solid var(--border); }
dl { margin: var(--space-0) var(--space-0) var(--space-4); }
dt { font-weight: 600; } dd { margin: var(--space-0) var(--space-0) var(--space-2); overflow-wrap: anywhere; }
fieldset { margin: var(--space-0); padding: var(--space-0); border: none; min-width: 0; }
legend { font-weight: 600; margin-bottom: var(--space-3); }
label { display: block; margin-top: var(--space-3); }
input:not([type=checkbox]), select { width: 100%; min-height: var(--control-touch); padding: var(--space-2); border: var(--border-width) solid var(--muted); border-radius: var(--radius-md); background: var(--surface); color: var(--foreground); font: inherit; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-touch); }
input[type=checkbox] { flex-shrink: 0; width: var(--space-6); height: var(--space-6); }
button, summary { min-height: var(--control-touch); cursor: pointer; }
button { font: inherit; font-weight: 600; width: 100%; padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--primary); border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); }
button:hover:not(:disabled) { background: var(--primary-hover); }
button.secondary { background: var(--surface); color: var(--primary); }
button.secondary:hover:not(:disabled) { color: var(--on-primary); }
button:disabled { color: var(--disabled); background: var(--surface-subtle); border-color: var(--border); cursor: not-allowed; }
:focus-visible { outline: var(--border-width-strong) solid var(--focus); outline-offset: var(--space-1); }
h2 span { display: block; font-size: var(--text-lg); font-weight: 400; }
details { margin-top: var(--space-4); } summary { padding: var(--space-2) var(--space-0); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-sm)/var(--leading-normal) var(--font-mono); padding: var(--space-3); background: var(--surface); }
footer { padding-top: var(--space-6); }
@media (min-width: 48rem) { main { padding: var(--space-8); } h2 span { display: inline; margin-left: var(--space-3); } }