:root { --bg:#e6e8ec; --bar:#f7f7f9; --accent:#ff0080; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font-family: -apple-system, "Hiragino Sans", "Helvetica Neue", sans-serif; font-size: 13px; background: var(--bg); }
#toolbar { position: sticky; top:0; z-index: 10; display:flex; flex-wrap: wrap; gap: 6px 14px; align-items:center; padding:6px 10px; background: var(--bar); border-bottom:1px solid #ccc; }
#toolbar .group { display:flex; gap:4px; align-items:center; }
#toolbar button { padding: 4px 8px; border:1px solid #bbb; background:#fff; border-radius:4px; cursor:pointer; font-size:13px; }
#toolbar button:hover { background:#eef; }
#toolbar button.active { background: var(--accent); color:#fff; border-color: var(--accent); }
#toolbar select, #toolbar input[type=color] { height: 26px; }
#status { margin-left:auto; color:#555; }
#workspace { padding: 20px; overflow: auto; height: calc(100% - 44px); }
#pages { display:flex; flex-direction: column; align-items:center; gap: 24px; transform-origin: top center; }
svg.page { background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); display:block; }
svg.page text { white-space: pre; user-select:none; cursor: text; }
svg.page .obj { cursor: move; }
svg.page .frameBox { fill:none; stroke:#3af; stroke-width:0.25; stroke-dasharray: 1 1; pointer-events:none; }
svg.page .selBox { fill:none; stroke: var(--accent); stroke-width:0.4; pointer-events:none; }
svg.page .handle { fill:#fff; stroke: var(--accent); stroke-width:0.3; cursor: nwse-resize; }
svg.page .caret { stroke:#000; stroke-width:0.3; }
svg.page .selRange { fill: rgba(60,120,255,.25); pointer-events:none; }
svg.page image.overlay { opacity: .45; pointer-events:none; }
#kbd { position: fixed; left:-1000px; top:0; width:10px; height:10px; opacity:0; }
@media print {
  #toolbar, #kbd { display:none !important; }
  html, body { background:#fff; }
  #workspace { padding:0; height:auto; overflow:visible; }
  #pages { transform:none !important; gap:0; display:block; }
  svg.page { box-shadow:none; page-break-after: always; break-after: page; margin:0; }
  svg.page .frameBox, svg.page .selBox, svg.page .handle, svg.page .caret, svg.page .selRange, image.overlay { display:none; }
  @page { size: 182mm 257mm; margin: 0; }
}