:root{
  --wood-0:#100905;
  --wood-1:#180d08;
  --wood-2:#21130c;
  --wood-3:#2d1a10;
  --wood-4:#442817;
  --wood-5:#684126;
  --wood-6:#986039;
  --wood-7:#bd8250;
  --wood-8:#d7a66e;
  --wood-text:#f1dfca;
  --wood-muted:#9b7a61;
  --wood-line:rgba(202,143,91,.18);
  --wood-line-strong:rgba(215,166,110,.42);
}
html,body{background:var(--wood-0)}
body.draw-page{
  min-height:100svh;
  overflow:auto;
  color:var(--wood-text);
  background:
    radial-gradient(circle at 50% 22%,rgba(119,69,36,.18),transparent 34rem),
    repeating-linear-gradient(90deg,rgba(140,82,44,.024) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#160c07,#0d0704 75%);
}
.draw-page .uf-line{background:rgba(194,127,75,.42)}
.draw-page .uf-corner{border-color:rgba(222,177,132,.65)}
.draw-page .uf-ticks{background:repeating-linear-gradient(90deg,var(--wood-7) 0 1px,transparent 1px 18px)}
.draw-page .brand b{color:var(--wood-8)}
.draw-page .brand-mark{border-color:var(--wood-7);box-shadow:0 0 14px rgba(189,130,80,.22)}

.draw-shell{position:relative;z-index:2;min-height:100svh;padding:84px 18px 28px}
.draw-titlebar,.draw-toolbar,.draw-workspace,.draw-feedback{width:min(1500px,100%);margin-left:auto;margin-right:auto}
.draw-titlebar{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding:16px 18px;border:1px solid var(--wood-line);background:rgba(25,14,8,.84);
  box-shadow:0 10px 34px rgba(0,0,0,.22)
}
.draw-titlebar p{margin:0;color:#87654e;font:800 7px/1 var(--mono);letter-spacing:.15em}
.draw-titlebar h1{margin:7px 0 5px;color:#f4e4d2;font:500 35px/.95 var(--sans);letter-spacing:.14em}
.draw-titlebar span{display:block;max-width:780px;color:#a8876d;font-size:11px;line-height:1.5}
.draw-titlebar>a{
  min-height:38px;display:grid;place-items:center;padding:0 12px;text-decoration:none;
  border:1px solid var(--wood-line-strong);color:#c59a75;background:rgba(73,42,24,.18);
  font:800 7px/1 var(--mono);letter-spacing:.11em
}
.draw-toolbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding:8px;
  border:1px solid var(--wood-line);background:rgba(19,10,6,.9)
}
.draw-toolbar button,.draw-side-section button,.draw-control-group button,.draw-viewport-toolbar button,.draw-dialog button{
  min-height:34px;padding:0 10px;border:1px solid rgba(189,130,80,.20);
  background:linear-gradient(180deg,rgba(83,48,27,.34),rgba(36,20,11,.66));
  color:#c8a382;font:800 7px/1 var(--mono);letter-spacing:.08em;cursor:pointer
}
.draw-toolbar button:hover,.draw-side-section button:hover,.draw-control-group button:hover,.draw-viewport-toolbar button:hover,.draw-dialog button:hover{
  border-color:rgba(215,166,110,.5);color:#f0d8bf;background:rgba(112,67,39,.28)
}
.draw-toolbar button.is-primary,.draw-dialog button.is-primary{
  border-color:rgba(215,166,110,.55);color:#fff1df;background:linear-gradient(180deg,rgba(154,96,55,.48),rgba(87,50,27,.50))
}
.draw-toolbar-sep{width:1px;height:28px;background:var(--wood-line);margin:0 3px}

.draw-workspace{
  min-height:680px;display:grid;grid-template-columns:190px minmax(0,1fr) 270px;
  margin-top:8px;border:1px solid var(--wood-line);background:#120a06
}
.draw-tools-panel,.draw-properties-panel{min-width:0;background:rgba(24,13,8,.96)}
.draw-tools-panel{border-right:1px solid var(--wood-line)}
.draw-properties-panel{border-left:1px solid var(--wood-line);overflow:auto;max-height:calc(100svh - 180px)}
.draw-tools-panel>header,.draw-canvas-panel>header,.draw-side-section>header{
  min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 10px;border-bottom:1px solid var(--wood-line);background:rgba(51,29,16,.45)
}
.draw-tools-panel>header span,.draw-canvas-panel>header span,.draw-side-section>header span{
  color:#7f604b;font:800 6px/1 var(--mono);letter-spacing:.13em
}
.draw-tools-panel>header b,.draw-canvas-panel>header b,.draw-side-section>header b{
  color:#d3ad89;font:800 8px/1 var(--mono);letter-spacing:.1em
}

.draw-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px}
.draw-tool-grid button{
  position:relative;min-height:70px;display:grid;place-items:center;align-content:center;gap:5px;
  border:1px solid rgba(189,130,80,.12);background:rgba(40,22,12,.54);color:#9c775d;cursor:pointer
}
.draw-tool-grid button:hover,.draw-tool-grid button.is-active{border-color:rgba(215,166,110,.46);background:rgba(111,65,36,.24);color:#f0d5b8}
.draw-tool-grid button>b{font:700 22px/1 var(--mono)}
.draw-tool-grid button>span{font:800 6px/1 var(--mono);letter-spacing:.08em}
.draw-tool-grid button>kbd{position:absolute;right:4px;top:4px;color:#6f513d;font:800 5px/1 var(--mono)}

.draw-control-group{display:grid;gap:8px;margin:0 8px 8px;padding:9px;border:1px solid var(--wood-line);background:rgba(36,20,11,.45)}
.draw-control-group label,.draw-property-grid label,.draw-sheet-columns{display:grid;gap:5px}
.draw-control-group label>span,.draw-property-grid label>span,.draw-sheet-columns>span,.draw-layer-props span{
  color:#80614c;font:800 6px/1 var(--mono);letter-spacing:.09em
}
.draw-control-group input[type=color]{width:100%;height:34px;padding:2px;border:1px solid var(--wood-line);background:#120a06}
.draw-control-group input[type=range],.draw-layer-props input[type=range],.draw-viewport-toolbar input[type=range]{accent-color:var(--wood-7)}
.draw-control-group output{color:#c29976;font:800 6px/1 var(--mono)}
.draw-check{grid-template-columns:auto 1fr;align-items:center}
.draw-shortcuts{margin:8px;padding:9px;border:1px solid var(--wood-line);color:#6f5543;background:rgba(32,17,9,.35)}
.draw-shortcuts b{color:#a9876d;font:800 7px/1 var(--mono);letter-spacing:.1em}
.draw-shortcuts p{margin:7px 0 0;font:700 5px/1.3 var(--mono);letter-spacing:.07em}

.draw-canvas-panel{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#0b0704}
.draw-canvas-panel>header{background:#1b0f09}
.draw-canvas-status{display:flex;gap:10px;color:#7a5e4a;font:800 6px/1 var(--mono);letter-spacing:.08em}
.draw-stage{
  min-height:560px;overflow:auto;display:grid;place-items:center;padding:48px;
  background-color:#16100c;
  background-image:
    linear-gradient(45deg,#201812 25%,transparent 25%),
    linear-gradient(-45deg,#201812 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#201812 75%),
    linear-gradient(-45deg,transparent 75%,#201812 75%);
  background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0
}
.draw-canvas-holder{position:relative;box-shadow:0 20px 60px rgba(0,0,0,.55);transform-origin:center}
.draw-canvas-holder canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated}
#displayCanvas{position:relative;display:block;background:transparent}
#previewCanvas{pointer-events:none}
.draw-pixel-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.23;
  background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:var(--grid-size,4px) var(--grid-size,4px)
}
.draw-pixel-grid.is-hidden{display:none}
.draw-viewport-toolbar{
  min-height:44px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-top:1px solid var(--wood-line);background:#170d08
}
.draw-viewport-toolbar input[type=range]{width:min(240px,24vw)}
.draw-viewport-toolbar label{display:flex;align-items:center;gap:5px;color:#80624d;font:800 6px/1 var(--mono);letter-spacing:.07em}

.draw-side-section{border-bottom:1px solid var(--wood-line)}
.draw-side-section>button{margin:0 8px 9px;width:calc(100% - 16px)}
.draw-property-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px}
.draw-property-grid input,.draw-sheet-columns input{
  width:100%;min-height:32px;border:1px solid var(--wood-line);background:#120a06;color:#e3c8ae;padding:6px;font:700 9px/1 var(--mono)
}
.draw-preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0 8px 8px}
.draw-preset-row button{min-width:0;padding:0}
.draw-layer-actions,.draw-frame-actions{display:flex;gap:4px;padding:8px}
.draw-layer-actions button,.draw-frame-actions button{flex:1;min-width:0;padding:0 5px}
.draw-layer-props{padding:0 8px 8px}
.draw-layer-props label{display:grid;gap:5px}
.draw-layer-list,.draw-frame-list{display:grid;gap:4px;padding:0 8px 8px}
.draw-layer-item,.draw-frame-item{
  min-height:42px;display:grid;align-items:center;gap:7px;border:1px solid rgba(189,130,80,.10);
  background:rgba(34,19,10,.48);color:#a88265;cursor:pointer
}
.draw-layer-item{grid-template-columns:26px 1fr auto;padding:5px}
.draw-frame-item{grid-template-columns:32px 1fr;padding:5px}
.draw-layer-item.is-active,.draw-frame-item.is-active{border-color:rgba(215,166,110,.42);background:rgba(111,65,36,.22);color:#ecd0b1}
.draw-layer-thumb,.draw-frame-thumb{width:28px;height:28px;object-fit:contain;background:
  linear-gradient(45deg,#30251d 25%,transparent 25%),linear-gradient(-45deg,#30251d 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#30251d 75%),linear-gradient(-45deg,transparent 75%,#30251d 75%),#211914;
  background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.draw-layer-item b,.draw-frame-item b{font:800 7px/1.2 var(--mono);letter-spacing:.06em}
.draw-layer-item small,.draw-frame-item small{display:block;margin-top:3px;color:#6f5543;font:700 5px/1 var(--mono)}
.draw-layer-visibility{min-width:28px!important;padding:0!important}
.draw-sheet-columns{padding:0 8px 9px}

.draw-feedback{
  margin-top:8px;padding:9px 12px;border:1px solid var(--wood-line);background:rgba(24,13,8,.82);
  color:#84654f;font:800 6px/1.4 var(--mono);letter-spacing:.08em
}
.draw-feedback[data-tone=ok]{color:#caa27c}
.draw-feedback[data-tone=error]{color:#df8c82}

.draw-dialog{width:min(520px,calc(100vw - 28px));padding:0;border:1px solid var(--wood-line-strong);background:#170d08;color:var(--wood-text);box-shadow:0 30px 100px #000b}
.draw-dialog::backdrop{background:rgba(7,3,2,.78);backdrop-filter:blur(5px)}
.draw-dialog form>header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--wood-line)}
.draw-dialog form>header span{font:800 8px/1 var(--mono);letter-spacing:.12em}
.draw-dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}
.draw-dialog-grid label{display:grid;gap:5px}
.draw-dialog-grid label:first-child{grid-column:1/-1}
.draw-dialog-grid span{color:#80614c;font:800 6px/1 var(--mono);letter-spacing:.08em}
.draw-dialog-grid input,.draw-dialog-grid select{min-height:38px;border:1px solid var(--wood-line);background:#0f0805;color:#e8cfb6;padding:8px}
.draw-dialog footer{display:flex;justify-content:flex-end;gap:7px;padding:10px 12px;border-top:1px solid var(--wood-line)}

@media(max-width:1050px){
  .draw-workspace{grid-template-columns:160px minmax(0,1fr) 235px}
  .draw-stage{padding:30px}
}
@media(max-width:820px){
  .draw-shell{padding:74px 8px 18px}
  .draw-titlebar{display:block}.draw-titlebar>a{display:inline-grid;margin-top:10px}
  .draw-workspace{display:flex;flex-direction:column}
  .draw-tools-panel{border-right:0;border-bottom:1px solid var(--wood-line)}
  .draw-properties-panel{border-left:0;max-height:none}
  .draw-tool-grid{grid-template-columns:repeat(4,1fr)}
  .draw-tool-grid button{min-height:58px}
  .draw-stage{min-height:420px;padding:22px}
}

.draw-supplies-note{margin:0;padding:8px;color:#80614c;font:700 5.5px/1.45 var(--mono);letter-spacing:.07em;border-bottom:1px solid var(--wood-line)}
.draw-supply-actions,.draw-supply-use-actions{display:flex;gap:4px;padding:8px}
.draw-supply-actions button,.draw-supply-use-actions button{flex:1;min-width:0;padding:0 5px}
.draw-supply-list{display:grid;gap:4px;max-height:260px;overflow:auto;padding:0 8px 8px}
.draw-supply-item{width:100%;min-height:48px;display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;padding:5px!important;text-align:left!important;border:1px solid rgba(189,130,80,.10)!important;background:rgba(34,19,10,.48)!important}
.draw-supply-item:hover,.draw-supply-item.is-active{border-color:rgba(215,166,110,.42)!important;background:rgba(111,65,36,.22)!important}
.draw-supply-item img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;background:linear-gradient(45deg,#30251d 25%,transparent 25%),linear-gradient(-45deg,#30251d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#30251d 75%),linear-gradient(-45deg,transparent 75%,#30251d 75%),#211914;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.draw-supply-item span{min-width:0}
.draw-supply-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d0ad8e;font:800 6.5px/1.2 var(--mono);letter-spacing:.05em}
.draw-supply-item small{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#725641;font:700 5px/1 var(--mono)}
.draw-supplies-empty{margin:0;padding:12px 8px;color:#6f5543;font:700 5.5px/1.45 var(--mono);letter-spacing:.06em}
.draw-supplies-library-link{display:block;margin:0 8px 9px;padding:9px;text-align:center;text-decoration:none;border:1px solid rgba(189,130,80,.20);color:#c8a382;background:rgba(40,22,12,.54);font:800 6px/1 var(--mono);letter-spacing:.08em}
.draw-supplies-library-link:hover{border-color:rgba(215,166,110,.5);color:#f0d8bf}