:root{font-family:Inter,Arial,"Noto Sans",sans-serif;color:#203c37;background:#f6f8f7;font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0;min-width:1000px}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #d5dfda;background:white;color:#36534a;border-radius:7px;padding:9px 13px;transition:background .12s}button:hover{background:#edf4f0}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #2b866d;outline-offset:2px}button:disabled{opacity:.4;cursor:default}.topbar{height:82px;background:#fff;border-bottom:1px solid #dfe6e2;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;gap:12px;align-items:center}.brand-mark{background:#234f40;color:#fff;font-size:30px;border-radius:12px;width:42px;height:42px;text-align:center}.brand strong{font-size:18px;letter-spacing:-.5px}.brand div>span{display:block;font-size:9px;letter-spacing:2px;margin-top:6px;color:#78877f}.brand b{font-size:8px;background:#eaf0e9;padding:3px 5px;border-radius:3px}.file-actions{display:flex;gap:9px;align-items:center}#save-state{font-size:11px;color:#829087;margin-right:12px}.primary{background:#275e49;color:white;border-color:#275e49}.primary:hover{background:#1c4737}main{max-width:1920px;margin:auto}.workspace{display:grid;grid-template-columns:224px 1fr;min-height:510px}.library{background:#fff;border-right:1px solid #dfe6e2;padding:24px 18px}.section-heading{display:flex;justify-content:space-between;align-items:center}h1,h2{font-size:14px;margin:0;font-weight:600}.section-heading>span{font-size:10px;color:#84928b;background:#f1f5f2;padding:3px 5px;border-radius:4px}.hint{font-size:11px;color:#78877e;line-height:1.7}.part-group{margin-top:23px}.part-group h3{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#88948d;font-weight:500;margin:0 0 10px}.part-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.part{height:69px;padding:8px 3px;background:#fafcfb;border-color:#e4eae6;font-size:10px}.part .icon{display:block;font-size:23px;color:#547b6b;height:31px}.library-note{margin-top:26px;font-size:11px;line-height:1.9;color:#8a9890}.board-area{min-width:0;padding:0 25px;background:#edf1ee}.board-toolbar{height:57px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.dimensions{margin-left:14px;color:#8b9990;font-size:10px}#zoom{border:1px solid #d8e0da;background:#f9fbf9;padding:5px 10px;border-radius:5px;font-size:10px;color:#697e71}#viewport{height:clamp(390px,53vh,620px);display:flex;align-items:center;justify-content:center;overflow:hidden;background-image:radial-gradient(#d1dcd4 .8px,transparent .8px);background-size:16px 16px}#frame{position:relative;flex-shrink:0;box-shadow:0 8px 30px #26413012}#canvas{position:absolute;left:0;top:0;transform-origin:top left;isolation:isolate;overflow:hidden;font-family:Arial,"Noto Sans",sans-serif;touch-action:none}.board-element{cursor:move;user-select:none}.board-element.selected{outline:2px solid #308469;outline-offset:-2px}#selection{position:absolute;border:1px solid #328169;pointer-events:none;z-index:1}#coordinates{position:absolute;bottom:calc(100% + 5px);left:-1px;white-space:nowrap;background:#285f4b;color:white;padding:4px 6px;border-radius:4px;font-size:10px}#resize{pointer-events:auto;position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;border:1px solid #2b7459;border-radius:2px;padding:0;background:white;cursor:nwse-resize;touch-action:none}.board-footer{display:flex;justify-content:space-between;align-items:center;height:35px;color:#85938a;font-size:10px}.properties{padding:20px 26px;background:white;border-block:1px solid #dfe6e2}.property-heading,.property-heading>div{display:flex;align-items:center;gap:16px}.property-heading{justify-content:space-between;margin-bottom:18px}#selected-name{font-size:11px;color:#849189}.element-actions{gap:7px!important}.element-actions button{padding:6px 12px;font-size:11px}.danger{color:#a55b51}#properties{display:grid;grid-template-columns:repeat(4,minmax(65px,.7fr)) minmax(200px,2.4fr) repeat(2,minmax(85px,1fr));gap:12px}#properties label{font-size:10px;color:#7a8a81;display:flex;flex-direction:column;gap:6px}#properties input,#properties textarea,#properties select{min-width:0;width:100%;height:33px;border:1px solid #dce4df;border-radius:5px;background:#fcfdfc;padding:6px 8px;color:#365046}#properties textarea{resize:vertical;min-height:33px}#properties input[type=color]{padding:3px}#properties .text-field{grid-row:span 2}#properties .text-field textarea{height:90px}#properties label[hidden]{display:none}.code-panel{background:#182b27;color:#bad0c5}.code-heading{display:flex;justify-content:space-between;align-items:center;padding:0 26px;border-bottom:1px solid #2c4038;height:49px}.code-heading button{border:0;background:transparent;color:#7e9b8d;border-radius:0;font-size:11px;letter-spacing:1px;padding:17px 18px}.code-heading button[aria-selected=true]{color:#e2f3e7;border-bottom:2px solid #b2d1a2}.code-heading>span{font-size:10px;color:#9bbb91}.code-note{color:#718e80;margin-left:13px}#code{margin:0;padding:20px 30px;height:230px;overflow:auto;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}#status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:11px 18px;border-radius:8px;background:#284f3f;color:white;box-shadow:0 6px 20px #0002;z-index:10;max-width:85vw}#status:empty{display:none}

:root [hidden]{display:none!important}
.json-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 26px;border-bottom:1px solid #2c4038;font-size:11px}.json-toolbar>div{display:flex;gap:8px;flex-shrink:0}.json-toolbar button{padding:6px 12px;font-size:11px}#json-editor{display:block;width:100%;height:280px;resize:vertical;min-height:150px;border:0;border-radius:0;background:#182b27;color:#bad0c5;padding:16px 30px;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}#json-editor[aria-invalid=true]{outline:2px solid #e49a88;outline-offset:-2px}#json-error{margin:0;padding:10px 26px;background:#553831;color:#ffe1d8;white-space:pre-wrap;overflow-wrap:anywhere}#json-error:empty{display:none}#json-help{margin:0;padding:10px 26px;color:#94b3a3;font-size:11px}#inline-help{margin:0;padding:8px 26px;background:#e9f3ec;color:#385c49}#inline-text{box-shadow:0 0 0 4px #fff9}

/* Properties use independent fields so adding options does not change input wiring. */
#properties{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 14px}
.property-field{min-width:0;display:flex;flex-direction:column;gap:6px}
#properties .property-field>label{font-size:10px;color:#6c8074}
#properties .text-field{grid-column:span 2;grid-row:span 2}
#properties .text-field textarea{height:100%;min-height:90px}
.color-pair{display:flex;align-items:center;gap:6px;min-width:0}
#properties .color-pair input[type=color]{width:34px;flex:0 0 34px;padding:2px;cursor:pointer}
#properties .color-pair input[type=text]{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:11px;padding-inline:5px}
#properties .is-transparent{opacity:.4;background:repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0/8px 8px}
.property-field small{color:#84958a;font-size:9px}
.field-error{font-size:10px;color:#9d4739;overflow-wrap:anywhere}.field-error:empty{display:none}
#properties [aria-invalid=true]{border-color:#bb6756}
@media(max-width:1200px){#properties{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* Editing controls: history, alignment, rotation, and deterministic layers. */
.topbar{gap:18px}.editor-tools{display:flex;align-items:center;gap:7px;margin-left:auto}.editor-tools>button{padding:7px 10px;font-size:11px}.toolbar-menu{position:relative}.toolbar-menu summary{list-style:none;border:1px solid #d5dfda;background:#fff;border-radius:7px;padding:8px 11px;cursor:pointer;font-size:11px}.toolbar-menu summary::-webkit-details-marker{display:none}.toolbar-menu[open] summary{background:#edf4f0}.toolbar-menu>div{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:170px;padding:8px;background:#fff;border:1px solid #d7e0db;border-radius:8px;box-shadow:0 10px 28px #203c3725}.toolbar-menu>div button{display:block;width:100%;text-align:left;padding:7px 8px;border:0}.toolbar-menu .menu-grid{width:230px;grid-template-columns:1fr 1fr;gap:3px}.file-actions{flex-shrink:0}.workspace{grid-template-columns:244px 1fr}.library{max-height:680px;overflow:auto}.layers-section{border-top:1px solid #e2e9e5;margin-top:24px;padding-top:20px}#layers{display:flex;flex-direction:column;gap:4px}.layer-item{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;padding:7px 8px;text-align:left;border-color:#e1e8e4;background:#fbfcfb;cursor:grab}.layer-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-item small{color:#87958d;font-size:9px}.layer-item[aria-selected="true"]{background:#dcece5;border-color:#4b9278;color:#204e3d}.layer-item.dragging{opacity:.45}.board-toolbar>div:last-child{display:flex;align-items:center;gap:10px}#selection-count{font-size:10px;color:#6e8276}#selection{transform-origin:center center}#rotate{pointer-events:auto;position:absolute;left:50%;top:-30px;width:16px;height:16px;transform:translateX(-50%);border:2px solid #2b7459;border-radius:50%;padding:0;background:#fff;cursor:grab;touch-action:none}#rotate::after{content:"";position:absolute;width:1px;height:13px;background:#2b7459;left:50%;top:14px}.arrow-svg{display:block;overflow:visible}.board-element[data-id^="arrow-"]{overflow:visible}.board-element.selected{outline-color:#308469}.property-field[data-field="rotation"],.property-field[data-field="arrowHead"]{background:#f4f8f5;padding:7px;border-radius:6px}.element-actions:empty{display:none}
@media(max-width:1350px){.brand div>span,#save-state{display:none}.topbar{padding-inline:16px}.file-actions{gap:5px}.file-actions button{padding-inline:8px}.editor-tools{margin-left:0}}


/* Public-site navigation and concise first-use guidance. */
.public-info{min-height:42px;padding:7px 28px;display:flex;align-items:center;gap:20px;background:#f8faf9;border-bottom:1px solid #dfe6e2;color:#60766a}.back-link{color:#275e49;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}.back-link:hover,.back-link:focus-visible{text-decoration:underline}.public-info details{position:relative}.public-info summary{cursor:pointer;font-size:11px}.public-info p{position:absolute;z-index:50;top:22px;left:0;width:min(560px,80vw);margin:0;padding:13px 15px;border:1px solid #d5dfda;border-radius:8px;background:#fff;color:#4f675b;box-shadow:0 10px 28px #203c3725;font-size:11px;line-height:1.8}@media(max-width:700px){.public-info{padding-inline:16px}.public-info details{display:block}.public-info summary::after{content:" · PC推奨";color:#8a6552}}