:root { color-scheme: dark; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; color: #f5f7ff; background: #10182b; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 50% 0%, #29395a, #10182b 70%); }
button, input { font: inherit; }
button { border: 0; border-radius: 12px; padding: 10px 14px; color: #102039; background: #dce6ff; font-weight: 800; cursor: pointer; }
button:hover { filter: brightness(1.08); }
.editor-shell { width: min(1500px, 100%); margin: auto; padding: 22px; }
.editor-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; color: #7ed9ff; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(26px, 4vw, 42px); }
h2 { margin-bottom: 12px; font-size: 17px; }
.subtext, .tool-help, .stage-help { color: #b7c2dd; font-size: 13px; }
.header-actions { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.header-actions label { display: grid; gap: 4px; color: #b7c2dd; font-size: 12px; }
input[type="text"], .header-actions input { min-width: 190px; border: 1px solid #53658f; border-radius: 9px; padding: 10px; color: #fff; background: #172440; }
.primary { background: #ffe28a; box-shadow: 0 3px 0 #bc8f36; }
.editor-panel { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
.tool-panel, .settings-panel { padding: 16px; border: 1px solid #43557e; border-radius: 16px; background: #172440cc; }
.tools { display: grid; gap: 7px; }
.tool { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: #dbe5ff; background: #26385d; text-align: left; }
.tool.active { outline: 3px solid #7ed9ff; background: #405b8d; }
.swatch { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 5px; background: #55b875; }
.swatch.solid { background: #8169c5; }.swatch.breakable { background: #f2b84b; }.swatch.ball { background: #36b8e8; }.swatch.fire { background: #ff8a3d; }.swatch.feather { background: #f4d77a; }.swatch.enemy-block { background: #d65b72; }.swatch.enemy-a { background: #e95b68; }.swatch.enemy-b { background: #f08a4b; }.swatch.enemy-c { background: #8f6eea; }
.stage-editor { min-width: 0; padding: 16px; border: 1px solid #43557e; border-radius: 16px; background: #172440cc; }
.stage-toolbar { display: flex; justify-content: space-between; margin-bottom: 8px; color: #b7c2dd; font-size: 12px; }
.stage-viewport { overflow-x: auto; overflow-y: hidden; border: 2px solid #53658f; border-radius: 10px; background: #78c9ea; touch-action: none; }
#editor-canvas { display: block; width: 3500px; height: 490px; image-rendering: pixelated; touch-action: none; }
.position-track { position: relative; height: 7px; margin-top: 9px; border-radius: 99px; background: #53658f; }.position-track span { position: absolute; top: -3px; width: 30px; height: 13px; border-radius: 99px; background: #ffe28a; }
.stage-help { margin: 9px 0 0; }
.settings-panel { margin-top: 14px; }.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }.settings-grid label { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; color: #dbe5ff; font-size: 13px; }.settings-grid output { color: #7ed9ff; }.settings-grid input { grid-column: 1 / -1; width: 100%; accent-color: #7ed9ff; }
.editor-status { min-height: 22px; margin: 12px 2px 0; color: #ffe28a; font-size: 13px; }
.share-panel { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; align-items: center; margin-top: 14px; padding: 20px; border: 2px solid #ffe28a; border-radius: 18px; background: linear-gradient(135deg, #263b67, #19304c); box-shadow: 0 10px 30px #07102066; }
.share-panel h2 { margin-bottom: 6px; color: #fff2b3; font-size: 22px; }.share-panel p { color: #dbe5ff; font-size: 13px; }.share-copy .eyebrow { margin-bottom: 4px; color: #7ed9ff; }.share-url-row { display: flex; gap: 8px; margin-top: 14px; }.share-url-row input { min-width: 0; flex: 1; border: 1px solid #6f84b4; border-radius: 9px; padding: 10px; color: #fff; background: #101b31; }.share-url-row button, .qr-box button { white-space: nowrap; background: #ffe28a; }.copy-status { min-height: 18px; margin: 7px 0 0; color: #9ff0b5 !important; }.qr-box { display: grid; justify-items: center; gap: 10px; }.qr-box #share-qr { display: grid; place-items: center; width: 160px; height: 160px; padding: 10px; border-radius: 10px; background: #fff; }.qr-box img, .qr-box canvas { display: block; max-width: 140px; max-height: 140px; }
@media (max-width: 800px) { .editor-shell { padding: 12px; }.editor-header { align-items: stretch; flex-direction: column; }.header-actions { justify-content: stretch; }.header-actions > * { flex: 1; }.editor-panel { grid-template-columns: 1fr; }.tools { grid-template-columns: repeat(2, 1fr); }.settings-grid { grid-template-columns: repeat(2, 1fr); }.tool-help { margin: 10px 0 0; }.share-panel { grid-template-columns: 1fr; }.qr-box { justify-items: start; } }
@media (max-width: 480px) { .header-actions label { flex-basis: 100%; }.header-actions input { width: 100%; }.settings-grid { grid-template-columns: 1fr; }.stage-editor { padding: 10px; } }