:root {
  --paper: #f4f2ed;
  --ink: #1d1b19;
  --ink-2: #57524c;
  --ink-3: #8d877f;
  --rule: rgba(29, 27, 25, 0.14);
  --rule-strong: rgba(29, 27, 25, 0.55);
  --shu: #b8452f;
  --ai: #2c4a74;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }

.app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; height: 100vh; }
.masthead { display: flex; align-items: baseline; gap: 28px; padding: 18px 28px 14px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mark { font: 600 20px/1 var(--serif); color: var(--shu); }
.word { font: 500 15px/1 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; }
.sep { width: 24px; height: 1px; background: var(--rule-strong); align-self: center; }
.sub { font: 400 13px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.lede { margin: 0; font: 400 14px/1.4 var(--serif); color: var(--ink-2); }

.stage { display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.viewport { position: relative; min-height: 0; }
#fold-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.hud { position: absolute; left: 28px; top: 22px; pointer-events: none; }
.hud-fold { font: 300 54px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hud-fold small { font: 400 11px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-left: 8px; vertical-align: 6px; }
.hud-pattern { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule-strong); font: 400 13px/1 var(--serif); letter-spacing: 0.06em; width: 220px; }
.hint { position: absolute; left: 28px; bottom: 18px; margin: 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }

.legend { position: absolute; right: 24px; bottom: 18px; display: grid; gap: 6px; padding: 10px 12px; background: rgba(244, 242, 237, 0.86); border: 1px solid var(--rule); font-size: 11px; color: var(--ink-2); min-width: 200px; }
.legend[hidden] { display: none; }
.legend-title { letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.legend-bar { height: 6px; background: linear-gradient(90deg, #f3efe6 0%, #f0dcb0 25%, #e3a24f 50%, #c8452c 75%, #6e1a12 100%); border: 1px solid var(--rule); }
.legend-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key i { width: 22px; height: 0; border-top: 2px solid; }
.key i.m { border-color: var(--shu); }
.key i.v { border-color: var(--ai); }

.panel { border-left: 1px solid var(--rule); overflow-y: auto; padding: 4px 24px 24px; background: var(--paper); }
.panel section { padding: 18px 0 16px; border-bottom: 1px solid var(--rule); }
.panel h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font: 500 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.jp { font: 400 12px/1 var(--serif); letter-spacing: 0.1em; color: var(--ink-3); text-transform: none; }

.patterns { list-style: none; margin: 0; padding: 0; display: grid; }
.patterns button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; width: 100%; padding: 8px 0; border-top: 1px solid var(--rule); font: 400 14px/1.2 var(--serif); color: var(--ink-2); }
.patterns li:first-child button { border-top: 0; }
.patterns button .n { font: 400 10px/1 var(--mono); color: var(--ink-3); }
.patterns button .jpn { font: 400 11px/1 var(--serif); color: var(--ink-3); }
.patterns button:hover { color: var(--ink); }
.patterns button[aria-checked="true"] { color: var(--ink); }
.patterns button[aria-checked="true"] .n { color: var(--shu); }
.patterns button[aria-checked="true"] .label { box-shadow: inset 0 -1px 0 var(--ink); }
.patterns button:focus-visible, .btn:focus-visible, .seg button:focus-visible, input:focus-visible { outline: 1px solid var(--ai); outline-offset: 3px; }

.row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.row.small { font-size: 12px; color: var(--ink-2); }
.row.small label { white-space: nowrap; }
.row output { font: 400 11px/1 var(--mono); min-width: 44px; text-align: right; color: var(--ink-2); }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 18px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }

.btn { all: unset; cursor: pointer; padding: 6px 12px; border: 1px solid var(--ink); font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; min-width: 44px; text-align: center; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.seg button { all: unset; cursor: pointer; text-align: center; padding: 7px 0; font: 500 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.readout { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.readout div { padding: 8px 0; border-top: 1px solid var(--rule); }
.readout div:nth-child(odd) { padding-right: 10px; }
.readout dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.readout dd { margin: 3px 0 0; font: 400 18px/1.15 var(--serif); font-variant-numeric: tabular-nums; }
.readout dd small { display: block; margin-top: 3px; font: 400 10.5px/1.2 var(--mono); color: var(--ink-3); }
.readout dd.yes { color: var(--ai); }
.readout dd.no { color: var(--shu); }
.note { margin: 12px 0 0; font: 400 13px/1.55 var(--serif); color: var(--ink-2); }
.note.small { font-size: 12px; }

.cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp th, .cmp td { padding: 6px 0; border-top: 1px solid var(--rule); text-align: right; font-variant-numeric: tabular-nums; }
.cmp thead th { border-top: 0; font: 500 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cmp tbody th { text-align: left; font-weight: 400; color: var(--ink-2); }
.cmp td { font-family: var(--mono); font-size: 11.5px; }

.colophon { padding-top: 16px; font-size: 11px; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 860px) {
  .app { height: auto; }
  .masthead { flex-direction: column; gap: 8px; padding: 14px 16px 12px; }
  .stage { grid-template-columns: 1fr; }
  .viewport { height: 62vh; min-height: 360px; }
  .panel { border-left: 0; border-top: 1px solid var(--rule); padding: 0 16px 24px; overflow: visible; }
  .hud { left: 16px; top: 14px; }
  .hud-fold { font-size: 40px; }
  .hint { left: 16px; }
  .legend { right: 12px; bottom: 12px; min-width: 160px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }