#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; }
#ink-tools #ink-clear[hidden] { display:block; visibility:hidden; pointer-events:none; }
#piece-ghosts { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
#piece-ghosts polygon { fill:#8493a2; fill-opacity:.12; stroke:#687b8d; stroke-width:2; stroke-dasharray:7 5; }
#axis-guide { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#axis-guide-line { stroke:#d92727; stroke-width:3; stroke-dasharray:7 4; }
#axis-guide-line[data-mode="wait"] { stroke:#999; }
#axis-guide .axis-vertex { fill:#0000ff; pointer-events:all; cursor:crosshair; touch-action:none; }
#axis-cut-surface { position:absolute; left:2.0408163265%; top:3.125%; width:81.6326530612%; height:93.75%; pointer-events:none; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#animation_container.axis-cut-active { touch-action:none; overscroll-behavior:contain; user-select:none; }
#animation_container.axis-cut-active #axis-cut-surface { pointer-events:auto; cursor:crosshair; }
#axis-cut-status { position:absolute; left:20px; top:622px; width:800px; height:18px; font:12px/18px Meiryo,sans-serif; color:#333; transform-origin:-20px -622px; pointer-events:none; }
#axis-cut-status[hidden] { display:none; }
#operation-notice { position:absolute; left:20px; top:622px; width:800px; min-height:18px; font:12px/18px Meiryo,sans-serif; color:#8c2500; background:#fff4e8; transform-origin:-20px -622px; pointer-events:none; } #operation-notice[hidden] { display:none; }