#rotation-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.rotation-handle { fill:white; fill-opacity:.9; stroke:#2776ba; stroke-width:2; pointer-events:all; cursor:grab; touch-action:none; }
.rotation-handle:active { cursor:grabbing; fill:#cdefff; }
#extra-controls { position:absolute; left:848px; top:481px; width:104px; height:34px; transform-origin:-848px -481px; font-family:"Meiryo",sans-serif; color:#333; text-align:center; white-space:nowrap; }
#paint-red { position:relative; box-sizing:border-box; width:104px; height:34px; border:0; border-radius:17px; padding:4px 8px; background:transparent; color:#000; font-family:inherit; font-size:17px; line-height:24px; font-weight:900; display:flex; align-items:center; justify-content:space-between; gap:2px; cursor:pointer; touch-action:manipulation; overflow:hidden; }
#paint-red .button-frame { position:absolute; inset:0; width:104px; height:34px; fill:#ccc; pointer-events:none; }
#paint-red .paint-label { position:relative; min-width:0; flex:1; }
#paint-red .paint-icon { position:relative; width:20px; height:20px; flex:0 0 20px; }
#paint-red[aria-pressed="true"] { font-size:14px; }
#paint-red[aria-pressed="true"] .button-frame { fill:#ffe1e1; }
#paint-red:disabled { opacity:.22; cursor:default; }
#paint-red:enabled:hover .button-frame { fill:#f9f; }
#paint-red:enabled:active .button-frame { fill:#ffd653; }
#paint-red:focus-visible { outline:3px solid #247ac6; outline-offset:3px; }
#rotation-help { display:none; }
#ink-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
#ink-surface { position:absolute; left:2.0408163265%; top:3.125%; width:81.6326530612%; height:93.75%; pointer-events:none; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#animation_container.pen-active { touch-action:none; overscroll-behavior:contain; -webkit-user-select:none; user-select:none; }
#animation_container.pen-active #ink-surface { pointer-events:auto; cursor:crosshair; }
#ink-tools { position:absolute; left:670px; top:20px; width:150px; height:50px; display:flex; justify-content:flex-end; transform-origin:-670px -20px; pointer-events:none; }
#ink-tools button { box-sizing:border-box; width:44px; height:44px; margin:3px; flex:0 0 44px; border:3px solid #000; border-radius:12px; background:#eee; color:#000; cursor:pointer; pointer-events:auto; padding:7px; touch-action:manipulation; }
#ink-tools button[aria-pressed="true"] { background:#fff18b; box-shadow:inset 0 0 0 2px white; }
#ink-tools button:enabled:hover { background:#fff18b; }
#ink-tools button:disabled { opacity:.35; cursor:default; }
#ink-tools button:focus-visible { outline:3px solid #247ac6; outline-offset:2px; }
#ink-tools button svg { display:block; width:100%; height:100%; }
#ink-tools button[hidden] { display:none; }