*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#fff;touch-action:none}.logo{position:fixed;top:24px;left:24px;font-size:16px;font-weight:500;color:#000;cursor:pointer;z-index:100;pointer-events:auto}.text-input{position:fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:500;color:#000;background:transparent;border:none;outline:none;resize:none;padding:0;margin:0;line-height:1.2;z-index:200;overflow:hidden;white-space:pre-wrap;caret-color:#000;display:block}.text-input.hidden{display:none}body.inverted .text-input{color:#fff;caret-color:#fff}#canvas{display:block;cursor:crosshair;touch-action:none}#controls{position:fixed;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none}.controls-left{display:flex;align-items:center;gap:8px;background:#fff;padding:8px;pointer-events:auto}.control-btn{width:48px;height:48px;border:2px solid transparent;background:#fff;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;outline:none}.control-btn:focus{outline:none}.mode-btn:hover{background:#fff;border-color:#000}.mode-btn:hover svg{color:#000}.control-btn svg{color:#000}.control-btn:disabled{opacity:1;cursor:pointer}.mode-btn.active{background:#fff;border:2px solid black}.mode-btn.active svg{color:#000}.thickness-control{display:flex;align-items:center;gap:4px}#thickness-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:#000;border-radius:0;outline:none}#thickness-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#000;border:none;border-radius:0;cursor:pointer;transform:rotate(45deg);outline:none;box-shadow:0 0 0 1.5px #fff}#thickness-slider::-moz-range-thumb{width:12px;height:12px;background:#000;border:none;border-radius:0;cursor:pointer;transform:rotate(45deg);outline:none;box-shadow:0 0 0 1.5px #fff}#thickness-value{min-width:24px;text-align:center;font-size:14px;font-weight:500;color:#000}.dialog{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}.dialog.hidden{display:none}.dialog-content{background:#fff;padding:32px;border-radius:16px;box-shadow:0 8px 32px #0003;max-width:400px;width:90%}.dialog-content h2{margin-bottom:12px;font-size:24px;font-weight:600;color:#333}.dialog-content p{margin-bottom:24px;color:#666;line-height:1.5}.dialog-buttons{display:flex;gap:12px;justify-content:flex-end}.dialog-btn{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s ease}.dialog-btn{background:#f5f5f5;color:#333}.dialog-btn:hover{background:#e5e5e5}.dialog-btn.primary{background:#333;color:#fff}.dialog-btn.primary:hover,body.inverted{background:#000}body.inverted .logo,body.inverted .text-input{color:#fff}body.inverted .controls-left{background:#000}body.inverted .control-btn{background:#000;border:2px solid transparent}body.inverted .mode-btn:hover{background:#000;border-color:#fff}body.inverted .mode-btn:hover svg{color:#fff}body.inverted .control-btn svg{color:#fff}body.inverted .mode-btn.active{background:#000;border:2px solid white}body.inverted .mode-btn.active svg{color:#fff}body.inverted #thickness-slider{background:#fff}body.inverted #thickness-slider::-webkit-slider-thumb{background:#fff;box-shadow:0 0 0 1.5px #000;transform:rotate(45deg)}body.inverted #thickness-slider::-moz-range-thumb{background:#fff;box-shadow:0 0 0 1.5px #000;transform:rotate(45deg)}body.inverted #thickness-value{color:#fff}.history-panel{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:none}.history-panel.hidden{display:none}.history-content{background:#fff;padding:24px;border-radius:0;border:2px solid black;max-width:500px;max-height:80vh;width:90%;display:flex;flex-direction:column;pointer-events:auto}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid black}.history-header h2{margin:0;font-size:24px;font-weight:600;color:#000}.close-btn{background:#fff;border:none;cursor:pointer;padding:8px 0 8px 8px;display:flex;align-items:center;justify-content:center;border-radius:0}.close-btn svg{color:#000}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;overflow-y:auto;padding:8px;max-height:calc(80vh - 120px)}.history-item{position:relative;aspect-ratio:4/3;border-radius:0;overflow:hidden;cursor:pointer;border:2px solid black}.history-item img{width:100%;height:100%;object-fit:contain}.history-item-time{position:absolute;bottom:0;left:0;right:0;background:#000;color:#fff;padding:4px 8px;font-size:12px;text-align:center}.history-item-delete{position:absolute;top:4px;right:4px;background:#000;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.history-item-delete svg{color:#fff}.history-item:hover .history-item-delete{opacity:1}.history-empty{grid-column:1 / -1;text-align:center;padding:40px;color:#000}body.inverted .history-content{background:#000;border-color:#fff}body.inverted .history-header{border-bottom-color:#fff}body.inverted .history-header h2{color:#fff}body.inverted .close-btn{background:#000}body.inverted .close-btn svg{color:#fff}body.inverted .history-item{border-color:#fff}body.inverted .history-item-time{background:#fff;color:#000}body.inverted .history-item-delete{background:#fff}body.inverted .history-item-delete svg{color:#000}body.inverted .history-empty{color:#fff}.info-panel{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:none}.info-panel.hidden{display:none}.info-content{background:#fff;padding:32px;border-radius:0;border:2px solid black;max-width:500px;width:90%;pointer-events:auto}.info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid black}.info-header h2{margin:0;font-size:24px;font-weight:600;color:#000}.info-body{color:#000;line-height:1.6}.info-body p{margin:0 0 12px}.info-body p:last-child{margin-bottom:0}body.inverted .info-content{background:#000;border-color:#fff}body.inverted .info-header{border-bottom-color:#fff}body.inverted .info-header h2,body.inverted .info-body{color:#fff}@media (max-width: 640px){#controls{bottom:16px;flex-wrap:wrap}.controls-left{padding:6px;gap:6px}.logo{top:16px;left:16px;font-size:14px}.control-btn{width:40px;height:40px}#thickness-slider{width:60px}#thickness-value{font-size:12px;min-width:20px}.history-content{max-height:90vh;padding:16px}.history-header h2{font-size:20px}.history-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}}