:root { --panel-width: 700px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; line-height: 1.6; }
.controls { position: fixed; inset: 0 auto 0 0; padding: 24px; overflow-y: auto; border-right: 1px solid; }
.controls nav { margin-bottom: 24px; }
.controls a { color: #52654e; }
.controls p { font-size: 13px; }
.controls > label { display: block; margin-bottom: 8px; font-weight: bold; }
textarea { display: block; width: 100%; padding: 12px; border: 1px solid; border-radius: 6px; resize: vertical; font-family: inherit; line-height: 1.7; }
button { width: 100%; padding: 12px; border: 0; border-radius: 6px; color: white; font: inherit; cursor: pointer; }
button + button { margin-top: 8px; }
button:disabled { opacity: .5; cursor: default; }
textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #6b7b68; outline-offset: 3px; }
.sheet { width: 210mm; height: 297mm; margin: 0 auto 24px; box-shadow: 0 3px 16px #0002; }
@page { size: A4 portrait; margin: 0; }
body { background: #eae7e1; color: #49483f; }
.controls { width: var(--panel-width); background: #fcfbf8; border-color: #dedbd2; }
h1 { margin-bottom: 8px; font-size: 23px; }
.controls .intro { margin: 0 0 28px; color: #827969; }
textarea { background: #fffefa; border-color: #c9c4b7; font-size: 15px; min-height: 420px; }
textarea:focus-visible, button:focus-visible { outline-color: #6b7b68; }
button { background: #697963; }
#print-top { margin-bottom: 24px; }
#font-options { margin: 0 0 24px; padding: 10px 12px; border: 1px solid #c9c4b7; border-radius: 6px; }
#font-options legend { padding: 0 4px; font-size: 14px; font-weight: bold; }
#font-options label { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 15px; font-weight: 400; cursor: pointer; }
#font-options input { margin: 0; flex-shrink: 0; accent-color: #697963; }
#font-options input:focus-visible { outline: 2px solid #6b7b68; outline-offset: 3px; }
#preview { margin-left: var(--panel-width); padding: 36px; overflow-x: auto; }
.letter-sheet { display: block; padding: 25mm 23mm 22mm; background: #fffef9; color: #514d43; }
.letter-line { position: relative; height: 10mm; font-family: var(--letter-font, "Klee One"), "Yu Kyokasho", cursive; font-size: 18px; font-weight: 400; line-height: 10mm; white-space: pre; letter-spacing: .04em; }
.letter-rule { position: absolute; bottom: -3px; left: 0; width: 100%; height: 6px; overflow: visible; pointer-events: none; }
.letter-rule path { fill: none; stroke: #c4bfb0; stroke-width: .8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#measure { position: fixed; left: -10000px; top: 0; width: 164mm; height: auto; visibility: hidden; white-space: pre-wrap; overflow-wrap: anywhere; line-break: strict; }
#panel-resizer { position: fixed; z-index: 2; top: 0; bottom: 0; left: calc(var(--panel-width) - 5px); width: 10px; cursor: col-resize; touch-action: none; }
#panel-resizer::after { content: ""; position: absolute; top: calc(50% - 24px); left: 3px; width: 4px; height: 48px; border-radius: 2px; background: #a49d8e; }
#panel-resizer:hover, #panel-resizer:focus-visible { background: #69796340; outline: none; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
@media screen and (max-width: 700px) {
  #panel-resizer { display: none; }
  .controls { position: static; width: 100%; border-right: 0; border-bottom: 1px solid #dedbd2; }
  #preview { margin-left: 0; padding: 20px 12px; }
  .letter-sheet { margin-left: 0; }
}
@media print {
  body { background: white; }
  .controls, #panel-resizer { display: none; }
  .sheet { margin: 0; box-shadow: none; break-after: page; break-inside: avoid; }
  .sheet:last-child { break-after: auto; }
  #preview { margin: 0; padding: 0; overflow: visible; }
  #measure { display: none; }
  .letter-sheet { background: white; }
}