:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #101114; color: #f4f3ee; }
button { font: inherit; color: inherit; cursor: pointer; }
#workspace { position: relative; width: 100vw; height: 100vh; overflow: hidden; background-color: #17181c; background-image: radial-gradient(#34363e 1px, transparent 1px); background-size: 24px 24px; user-select: none; }
#workspace.panning { cursor: grabbing; }
#canvas { position: absolute; inset: 0; transform-origin: 0 0; }
.topbar { position: absolute; top: 20px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.brand { display: flex; gap: 8px; align-items: center; font-weight: 700; letter-spacing: .02em; }
.brand span, .spark { color: #e8c05f; }
.shortcuts { color: #9397a3; font-size: 13px; }
kbd { padding: 2px 5px; border: 1px solid #4b4e58; border-radius: 4px; color: #d6d7da; font: 11px inherit; }
.controls { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 6px; border: 1px solid #393b43; border-radius: 11px; background: rgba(32,33,38,.9); box-shadow: 0 12px 40px rgba(0,0,0,.24); }
.controls button { width: 32px; height: 30px; border: 0; border-radius: 7px; background: transparent; font-size: 19px; }
.controls button:hover { background: #41434c; }
.controls output { width: 48px; color: #bfc1c8; text-align: center; font-size: 12px; }
.controls span { width: 1px; height: 20px; margin: 0 3px; background: #484a53; }
.welcome { position: absolute; top: 50%; left: 50%; width: min(360px, calc(100vw - 48px)); transform: translate(-50%, -50%); padding: 30px; text-align: center; border: 1px solid #3b3e46; border-radius: 16px; background: rgba(30,31,36,.78); backdrop-filter: blur(12px); transition: opacity .2s, transform .2s; }
.welcome.hidden { opacity: 0; transform: translate(-50%, -45%); pointer-events: none; }
.welcome .spark { display: block; margin-bottom: 12px; font-size: 22px; }
h1 { margin: 0 0 10px; font-size: 20px; }
.welcome p { margin: 0 0 20px; color: #aeb0b8; font-size: 13px; line-height: 1.7; }
#upload-button { border: 0; border-radius: 8px; padding: 10px 16px; background: #e8c05f; color: #252015; font-weight: 700; }
#upload-button:hover { background: #f3cf72; }
.image-item { position: absolute; border: 1px solid transparent; touch-action: none; cursor: grab; }
.image-item:active { cursor: grabbing; }
.image-item img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.image-item.selected { border-color: #e8c05f; box-shadow: 0 0 0 1px rgba(232,192,95,.26); }
.handle { position: absolute; width: 10px; height: 10px; border: 2px solid #202126; border-radius: 50%; background: #f3cf72; z-index: 3; }
.handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }.handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }.handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }.handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
@media (max-width: 650px) { .shortcuts { display: none; } .topbar { top: 16px; left: 16px; right: 16px; } }