:root{--bg:#f1e8d2;--pn:#fffaf0;--ln:#cdb98c;--tx:#2a1a0e;--mu:#7a6445;--ac:#98291d;--in:#fff;--on:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14100b;--pn:#1d1812;--ln:#4d402c;--tx:#f3e8d0;--mu:#ab9b7e;--ac:#e6c88c;--in:#2a241c;--on:#2a1608}}
:root[data-theme="dark"]{--bg:#14100b;--pn:#1d1812;--ln:#4d402c;--tx:#f3e8d0;--mu:#ab9b7e;--ac:#e6c88c;--in:#2a241c;--on:#2a1608}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--tx);font:14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button,select,input,textarea{font:inherit;color:var(--tx)}button{background:var(--in);border:1px solid var(--ln);border-radius:8px;padding:6px 10px;cursor:pointer;min-height:34px}button:hover{border-color:var(--ac)}
button.on{background:var(--ac);color:var(--on);border-color:var(--ac)}button.dn{color:#c0392b}
input[type=text],input:not([type]),input[type=number],select,textarea{background:var(--in);border:1px solid var(--ln);border-radius:8px;padding:5px 8px;width:100%}input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--ln);border-radius:6px;background:none;vertical-align:middle}
#hd{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--pn);border-bottom:1px solid var(--ln);flex-wrap:wrap}.logo{color:var(--ac);white-space:nowrap}#hd input{width:170px}#hd select{width:auto}.sp{flex:1}
#app{flex:1;min-height:0;display:grid;grid-template-columns:54px 1fr 340px}
#tools{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--pn);border-right:1px solid var(--ln);overflow:auto}#tools button{width:38px;height:38px;padding:0;font-size:18px}
#stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;padding:8px;gap:8px}#qb{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;background:var(--pn);border:1px solid var(--ln);border-radius:10px;padding:5px 10px}#qb label{display:flex;gap:5px;align-items:center}#qb select{width:auto}#qb input[type=range]{width:90px}
#cvw{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}canvas{touch-action:none;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.35);cursor:crosshair}
#side{overflow:auto;background:var(--pn);border-left:1px solid var(--ln)}#tabs{display:flex;position:sticky;top:0;background:var(--pn);z-index:2}#tabs button{flex:1;border-radius:0;border:0;border-bottom:2px solid var(--ln)}#tabs button.on{background:none;color:var(--ac);border-bottom-color:var(--ac)}
.pane{padding:10px 12px}.h{display:none}h4{margin:12px 0 6px;color:var(--ac)}.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}.g2 label,.pane>label{display:flex;flex-direction:column;gap:3px;color:var(--mu);font-size:12px}
label.ck{flex-direction:row!important;align-items:center;gap:6px!important;color:var(--tx)!important;font-size:14px!important}label.sl{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;color:var(--tx);font-size:13px}label.sl input{width:55%}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.hint{color:var(--mu);font-size:12px;margin:8px 0}#jt{font:11px/1.3 ui-monospace,Menlo,monospace;word-break:break-all}
#lay .row{display:flex;align-items:center;gap:4px;padding:4px 6px;border:1px solid var(--ln);border-radius:8px;margin-bottom:5px;cursor:pointer}#lay .row.sel{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}#lay .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#lay button{min-height:28px;padding:2px 7px}
@media (max-width:820px){#app{grid-template-columns:1fr;grid-template-rows:auto minmax(300px,56vh) 1fr}#tools{flex-direction:row;border-right:0;border-bottom:1px solid var(--ln);order:-1}#side{border-left:0;border-top:1px solid var(--ln)}#hd input{width:120px}}

a.btn{display:inline-flex;align-items:center;text-decoration:none;background:var(--in);border:1px solid var(--ln);border-radius:8px;padding:6px 10px;min-height:34px;color:var(--tx);white-space:nowrap}a.btn:hover{border-color:var(--ac)}
.sitebar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sitebar .hint{margin:0;max-width:260px}
.hint.ok{color:#2e7d32}.hint.bad{color:#c0392b}
[hidden]{display:none!important}
#hd input[type=checkbox]{width:auto}