:root{font-family:Inter,Arial,"Noto Sans JP",sans-serif;color:#203c37;background:#f4f7f5;font-size:14px}*{box-sizing:border-box}body{margin:0;min-width:860px}button,input{font:inherit}button{cursor:pointer;border:1px solid #d4dfda;border-radius:7px;padding:8px 12px;background:#fff;color:#36564a}button:hover{background:#edf4f0}button:focus-visible,input:focus-visible{outline:2px solid #2b866d;outline-offset:2px}.primary{background:#275e49;color:#fff;border-color:#275e49}.primary:hover{background:#1d4939}.danger{color:#a4544d}.topbar{height:76px;background:#fff;border-bottom:1px solid #dfe6e2;padding:0 28px;display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{background:#234f40;color:white;font-size:30px;border-radius:11px;width:42px;height:42px;text-align:center}.brand strong{font-size:18px}.brand span span{display:block;font-size:9px;letter-spacing:1.8px;color:#718278;margin-top:5px}.brand b{font-size:8px;background:#eaf0e9;padding:3px 5px;border-radius:3px}.tools{margin-left:auto;display:flex;gap:7px}.drop-hint{font-size:11px;color:#7e8e85;margin-left:12px}main{max-width:1500px;margin:auto;padding:22px 28px 30px}.intro{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}.intro h1{font-size:21px;margin:0}.intro p{color:#718177;font-size:12px;margin:7px 0 0}.board-shell{border:1px solid #d8e1dc;background:#fff;box-shadow:0 10px 28px #1d40320c}.board-toolbar{height:43px;display:flex;align-items:center;gap:16px;padding:0 15px;border-bottom:1px solid #e1e8e4;font-size:11px;color:#7b8b82}.board-toolbar strong{color:#365147;font-size:12px}.board-toolbar span:last-child{margin-left:auto}#board{height:570px;position:relative;overflow:hidden;outline:0;touch-action:none;background-image:radial-gradient(#d5dfd8 .7px,transparent .7px);background-size:16px 16px}#board:focus{box-shadow:inset 0 0 0 2px #84baaa}.sprite-object{position:absolute;cursor:move;user-select:none;line-height:0}.sprite-object canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.sprite-object.selected{outline:2px solid #328169;outline-offset:3px}.sprite-label{position:absolute;left:0;top:calc(100% + 7px);line-height:1;background:#285f4b;color:#fff;border-radius:3px;padding:4px 6px;font-size:10px;white-space:nowrap}.resize{position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;padding:0;border:1px solid #2b7459;border-radius:2px;background:#fff;cursor:nwse-resize}.sprite-object:not(.selected) .sprite-label,.sprite-object:not(.selected) .resize{display:none}#empty-board{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#84948a;line-height:1.8;font-size:13px}.inspector{margin-top:19px;background:#fff;border:1px solid #dfe6e2}.inspector-head{height:70px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e7e3}.eyebrow{font-size:9px;letter-spacing:1.3px;color:#82948a}.inspector h2{font-size:16px;margin:3px 0 0}.actions{display:flex;gap:7px}.details{padding:17px 20px;display:flex;align-items:start;gap:30px}.details label{width:230px;font-size:10px;color:#718177;display:flex;flex-direction:column;gap:6px}.details input{height:34px;border:1px solid #d9e3dd;border-radius:5px;padding:6px 8px;color:#365147}.details small{font:10px ui-monospace,monospace;color:#84948a}dl{display:flex;flex-wrap:wrap;gap:12px 30px;margin:0}dl div{min-width:95px}dt{font-size:10px;color:#7f8f86}dd{margin:5px 0 0;font-weight:600}.match{color:#237d5f}.bad-match{color:#ab554b}.previews{padding:0 20px 20px;display:flex;gap:20px}.previews figure{margin:0}.previews figcaption{font-size:10px;color:#788a80;margin-bottom:7px}.previews canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid #d5dfd9;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0/12px 12px}.code-panel{background:#182b27;color:#bad0c5}.code-title{height:52px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d4239}.code-title strong{font-size:12px}.code-title span{display:block;font-size:10px;color:#779081;margin-top:3px}.code-title button{font-size:11px;letter-spacing:.6px}#code{margin:0;padding:18px 20px;max-height:340px;overflow:auto;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2;white-space:pre}.instruction{font-size:11px;color:#728178;margin:16px 0}code{font-family:ui-monospace,monospace;color:#365c4d}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:7px;background:#28503f;color:#fff;box-shadow:0 5px 18px #0002;z-index:10}#toast:empty{display:none}@media(max-width:1000px){.drop-hint{display:none}.details{gap:16px}.board-toolbar span:last-child{display:none}}

.code-actions{display:flex;gap:6px;align-items:center}.code-actions button{padding:6px 10px;font-size:11px}.code-actions button.active{background:#d9ece3;color:#1e5945;border-color:#8fc0ab}.code-actions .primary{background:#275e49;color:#fff;border-color:#275e49}

.site-link{margin:0 0 15px;font-size:12px}.site-link a{color:#365c4d;text-decoration:none}.site-link a:hover{text-decoration:underline}