#manual.workspace-page{padding:0;width:100%;margin:auto;max-width:820px}
#manual .workspace-title{margin:0 auto 30px}
#manual .manual-config{min-width:0}
#manual .range-line input{accent-color:var(--accent);min-width:0;width:100%}
#manual-error:empty{display:none}
#editor.is-manual .pagehead,#editor.is-manual #palette ~ .row,#editor.is-manual .studio .upload,#editor.is-manual #blank,#editor.is-manual label:has(#size),#editor.is-manual label:has(#limit){display:none}
#editor.is-manual .studio{grid-template-columns:230px minmax(0,1fr) 180px;align-items:stretch;background:#eef3f7;gap:12px;padding:12px}
#editor.is-manual .stage{position:relative;padding-left:56px;background:#e7eef4;min-width:0}
.draw-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 12px;color:#23324a;background:#f8fafc;border-bottom:1px solid #b8c6d2}
.draw-top button,.draw-top a,.draw-tools button{padding:6px 9px;border-radius:5px}
#draw-library{font-size:12px;color:#596776}
.draw-tools{position:absolute;left:8px;top:12px;display:grid;gap:5px}
.board-viewport{overflow:auto}
#editor.is-manual .board-viewport{display:grid;align-items:center;min-height:42vh;max-height:76vh}
#editor.is-manual #palette{max-height:51vh;overflow:auto;padding:3px}
#editor.is-manual #counts{max-height:42vh;overflow:auto}
#editor.is-manual #active-color{margin:6px 0;font-size:13px}
#editor.is-manual.is-preview .stage{background:#171717}
#editor.is-manual.is-preview .board-viewport{pointer-events:none}
#editor.is-manual button:disabled{opacity:.5;cursor:default}
@media(max-width:900px){#editor.is-manual .studio{grid-template-columns:175px minmax(0,1fr)}}
@media(max-width:570px){#editor.is-manual .stage{min-height:42vh}.draw-top{gap:5px}#editor.is-manual #palette{max-height:190px}}

#editor.is-manual{position:fixed;inset:0;z-index:70;background:#222f42;color:#26354a;display:grid;grid-template-rows:auto minmax(0,1fr)}
#editor.is-manual .draw-top{justify-content:center;background:#fcfdff;padding:12px 20px;gap:8px}
#editor.is-manual .draw-top>*{flex:none}
#editor.is-manual .draw-top button,#editor.is-manual .draw-top a{border:1px solid #d8e1ed;border-radius:0;min-height:34px;background:#fff;color:#52647f}
#editor.is-manual .draw-top #manual-save,#editor.is-manual #choose-color span{background:#1267c5;color:white}
#editor.is-manual #draw-library{margin-right:auto}
#editor.is-manual .studio{display:block;position:relative;min-height:0;padding:0;background:transparent}
#editor.is-manual .stage{height:100%;padding:0;border:0;background:transparent}
#editor.is-manual .board-viewport{min-height:0;max-height:none;height:100%;padding:14px 0 38px;display:block}
#editor.is-manual .board-viewport canvas{margin:auto;max-height:none}
#editor.is-manual .draw-tools{z-index:2;left:12px;top:12px;bottom:12px;overflow:auto;display:flex;flex-direction:column;gap:4px;background:#fbfcfe;border:1px solid #d8e1ed;padding:5px}
#editor.is-manual .draw-tools button{border-radius:0;border-color:transparent;background:transparent;color:#586d88;width:39px;min-height:39px;font-size:20px}
#editor.is-manual .draw-tools button[aria-pressed=true]{background:#e8f0ff;color:#1267c5;border-color:#cbd7ea}
#editor.is-manual .studio>aside{display:none;position:absolute;z-index:5;bottom:75px;width:min(320px,calc(100vw - 90px));max-height:65vh;overflow:auto;box-shadow:0 8px 30px #0005;background:#fff;color:#23324a}
#editor.is-manual.colors-open .studio>aside:first-child{display:block;left:50%;transform:translateX(-50%)}
#editor.is-manual.materials-open .studio>aside:last-child{display:block;right:16px}
#editor.is-manual #status{position:absolute;bottom:75px;right:20px;color:white}
#draw-dock{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}
#draw-dock button,#recent-colors{border-radius:0;border-color:#d8e1ed;background:#fcfdff;color:#23324a}
#choose-color{gap:9px;padding:6px}
#choose-color i{width:29px;height:29px;border:1px solid #bcc8d9}
#choose-color span{padding:6px 9px}
#recent-colors{display:flex;gap:4px;border:1px solid #d8e1ed;padding:5px}
#recent-colors button{width:31px;padding:4px;background:#f6f8fb}
#editor.is-manual .draw-top{padding:8px 16px;min-height:56px}
#editor.is-manual #draw-size{border:1px solid #d8e1ed;background:#f5f7fa;padding:7px 10px}
#editor.is-manual #draw-library{color:#7889a4}
#editor.is-manual .draw-top :is(#zoom-in,#zoom-out,#zoom-reset){background:#192436;color:white}
#editor.is-manual .draw-top button:disabled{opacity:.43}
#editor.is-manual .is-hidden{display:none}
/* Keep site chrome out of the editor's stacking context. */
body:has(#editor.is-manual:not([hidden]))>.site-footer,
body:has(#editor.is-manual:not([hidden]))>.site-header{display:none}
body:has(#editor.is-manual:not([hidden])){overflow:hidden}
body:has(#editor.is-manual:not([hidden])) > :is(.site-footer,.site-header){display:none!important;pointer-events:none!important}
#color-sheet{position:fixed;inset:auto auto 0 50%;transform:translateX(-50%);width:min(680px,calc(100% - 32px));height:min(82dvh,760px);max-width:none;max-height:none;margin:0;padding:12px 20px 18px;visibility:visible;pointer-events:auto;background:#fff;color:#23324a;border:1px solid #dce5ee;border-bottom:0;border-radius:0;overflow:hidden;text-align:left}
#color-sheet:not([open]){display:none}
#color-sheet[open]{display:flex;flex-direction:column}
#color-sheet::backdrop{background:#26374b40;backdrop-filter:blur(1px)}
#color-sheet .palette-sheet-header{position:static;display:flex;align-items:center;justify-content:space-between;flex:none;border:0;background:none;padding:0;margin:0 0 16px}
#color-sheet h2{margin:0;font-size:20px}
#color-sheet #sheet-search{height:42px;flex:none;width:100%;border:2px solid #cbd7ea;border-radius:0;background:#192233;color:#fff;padding:0 13px;box-shadow:2px 2px 0 #d8e1ed}
#color-sheet #sheet-search::placeholder{color:#9ba4b2}
#color-sheet .palette-sheet-body{flex:1;min-height:0;margin-top:12px}
#color-sheet .palette-list{display:block;min-height:0;max-height:none;overflow:auto}
#color-sheet .palette-group{margin-bottom:18px}
#color-sheet .palette-group h3{margin:8px 0 10px}
#color-sheet .palette-color{aspect-ratio:1;width:100%;min-width:0;padding:0;border:0;position:relative}
#color-sheet .palette-color.active{box-shadow:inset 0 0 0 2px #d1dcec,2px 2px 0 #d1dcec}
#editor.is-manual #choose-color .dock-color{background:none;color:#23324a;text-align:left;min-width:88px}
.dock-color small{display:block;color:#687992;font-size:10px}
@media(max-width:560px){#color-sheet{width:calc(100% - 16px);padding:10px 12px}#color-sheet .palette-color-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}