/* Blender V1.0 (NaN, 1995) — faithful SGI/IRIX look
   Colours sampled from the original 1.0/1.02 manual screendumps. */
:root{
  --bg:#797979;            /* window background grey */
  --view:#7a7a7a;          /* 3D window background */
  --grid:#6e6e6e;
  --grid-axis:#5d5d5d;
  --head:#9d9d9d;          /* header grey */
  --head-dark:#31314d;     /* info header (dark blue-grey) */
  --hi:#c8c8c8;            /* bevel light */
  --lo:#3d3d3d;            /* bevel dark */
  --but:#c8ab8e;           /* salmon action button */
  --but-hi:#e2c8ac;
  --tog:#9aa5c0;           /* toggle button */
  --tog-on:#6f7fae;
  --num:#a9a9a9;
  --text:#000;
  --text-hi:#fff;
  --orange:#e08b3c;
  --pink:#ff30ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#565656;overflow:hidden}
body{
  font:11px/1.1 "DejaVu Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:none;
  user-select:none;
}
.hidden{display:none !important}

#screen{display:flex;flex-direction:column;height:100vh;background:var(--bg)}

/* ---------- generic 1.0 widgets ---------- */
.bev{border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.bev-in{border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.b{
  height:15px;min-width:16px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--num);color:#000;font:inherit;cursor:pointer;
  border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
}
.b:active,.b.on{border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:#8d8d8d}
.b.but{background:var(--but)}
.b.but:hover{background:var(--but-hi)}
.b.tog{background:var(--tog)}
.b.tog.on{background:var(--tog-on);color:#fff}
.b.txt{justify-content:flex-start;background:#b4b4b4}
.icon{width:19px;height:15px;padding:0;image-rendering:pixelated}
.icon svg{width:15px;height:11px;display:block}
.icon img{height:15px;display:block;margin:0 auto;image-rendering:pixelated}
.header.mini .icon img{height:14px}

/* ---------- info header (top) ---------- */
#infohead{
  display:flex;align-items:center;gap:3px;height:19px;padding:1px 2px;
  background:var(--head);
  border-bottom:1px solid var(--lo);
  white-space:nowrap;overflow:hidden;
}
#infohead .stats{color:#3b1f00;background:#9d9d9d;padding:0 4px;font-weight:bold}
#infohead .ver{color:#7a2a00;font-weight:bold}
#infohead .grow{flex:1}

/* ---------- 3D window ---------- */
#win3d{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border-bottom:1px solid var(--lo)}
#viewport{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--view);cursor:crosshair}
#view{width:100%;height:100%;display:block}
#viewname{position:absolute;left:5px;top:4px;color:#000;opacity:.55;font-size:10px}

.header{
  display:flex;align-items:center;gap:2px;height:19px;padding:1px 2px;
  background:var(--head);border-top:1px solid var(--hi);
  white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.header::-webkit-scrollbar{display:none}
.sep{width:6px}

/* layer grid (2 rows x 10, split 5/5) */
.layers{display:grid;grid-template-columns:repeat(10,11px);grid-template-rows:8px 8px;gap:0;border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.layers i{background:#9aa5c0;border:1px solid #7a7a7a;cursor:pointer}
.layers i:nth-child(5n){margin-right:2px}
.layers i.on{background:#e0e0e0}

/* ---------- buttons window ---------- */
#winbuts{height:190px;display:flex;flex-direction:column;background:var(--bg)}
#butspanel{flex:1;overflow:auto;padding:6px;display:flex;gap:10px;align-items:flex-start}
.col{display:flex;flex-direction:column;gap:3px}
.row{display:flex;gap:3px;align-items:center}
.numb{
  height:15px;min-width:88px;padding:0 5px;display:flex;align-items:center;justify-content:space-between;
  background:var(--num);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:ew-resize
}
.numsli{height:15px;width:150px;position:relative;background:var(--num);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:ew-resize;display:flex;align-items:center;padding:0 4px}
.numsli b{position:absolute;left:1px;top:1px;bottom:1px;background:#8b93ad;pointer-events:none}
.numsli span{position:relative;z-index:1;font-weight:normal}
.pt{font-size:10px;color:#2b2b2b;margin:2px 0 0}

/* ---------- popups (toolbox, menus, confirm) ---------- */
.popup{position:absolute;z-index:40;background:var(--head);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:2px 2px 0 rgba(0,0,0,.45)}
#toolbox{display:flex}
#toolbox .tbcol{display:flex;flex-direction:column;background:#8a8a8a}
#toolbox .tbcol.right{background:#0d0d0d;min-width:120px}
#toolbox .tbitem{padding:1px 6px;height:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:#000}
#toolbox .tbcol.right .tbitem{color:#e8e8e8;background:#141414}
#toolbox .tbitem.sel{background:#c8ab8e;color:#000}
#toolbox .tbcol.right .tbitem:hover{background:#3a3a5a}
#toolbox .tbitem small{opacity:.7}

.confirm{padding:0}
.confirm .title{background:#5a5a5a;color:#fff;padding:1px 6px}
.confirm .item{padding:2px 10px;cursor:pointer}
.confirm .item:hover{background:#c8ab8e}

/* ---------- render window ---------- */
#renderwin{position:fixed;inset:0;background:#000;z-index:60;display:flex;flex-direction:column}
#renderwin .rh{display:flex;align-items:center;gap:4px;background:var(--head);height:19px;padding:1px 3px}
#renderwin .rs{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
#rendercanvas{max-width:100%;max-height:100%;image-rendering:pixelated}

/* ---------- file select window ---------- */
#filewin{position:absolute;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column}
#filewin .flist{flex:1;overflow:auto;padding:2px;column-width:150px;background:#6f6f6f}
#filewin .frow{padding:0 4px;cursor:pointer;color:#111}
#filewin .frow.dir{color:#20208a;font-weight:bold}
#filewin .frow.blend{color:#c8a000}
#filewin .frow:hover{background:#8b93ad}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;background:#565656;display:flex;align-items:center;justify-content:center;z-index:80}
#splash .card{background:var(--bg);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);padding:26px 34px;text-align:center;max-width:520px}
#splash h1{font-size:26px;margin:0 0 4px;letter-spacing:2px}
#splash p{font-size:11px;line-height:1.5;color:#141414}
#splash .b{height:20px;padding:0 14px;margin-top:12px}
#splash .donate{margin-top:14px;font-size:10px;color:#2a2a2a}
#splash .donate a{color:#3a1a00;text-decoration:underline}
#splash .donate a:hover{color:#000}


/* move-to-layer popup grid */
.confirm .lgrid{display:grid;grid-template-columns:repeat(10,13px);grid-template-rows:10px 10px;gap:0;margin:4px 6px 6px;border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.confirm .lgrid i{background:#9aa5c0;border:1px solid #7a7a7a;cursor:pointer}
.confirm .lgrid i.on{background:#e0e0e0}

/* ---------- secondary 3D windows (1.0 four-window screen) ---------- */
#win3d{flex:1.05}
#subviews{display:flex;flex:1;min-height:0;border-bottom:1px solid var(--lo)}
#subviews .pane{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--lo)}
#subviews .pane:first-child{border-left:0}
#subviews canvas{flex:1;min-height:0;width:100%;display:block;background:var(--view)}
.header.mini{gap:1px;height:19px}
.header.mini .icon{width:15px}
.minilayers{display:grid;grid-template-columns:repeat(10,7px);grid-template-rows:7px 7px;
  border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);margin:0 3px}
.minilayers i{background:#9aa5c0;border:1px solid #7a7a7a}
.minilayers i.on{background:#e4e4e4}
.minilayers.big{grid-template-columns:repeat(4,14px);grid-template-rows:14px 14px;margin-right:8px}

/* ---------- render buttons panel ---------- */
#butspanel.renderpanel{gap:10px;padding:8px;align-items:flex-start;overflow-x:auto}
#butspanel.renderpanel .col{gap:4px}
#butspanel.renderpanel .row{gap:3px}
#butspanel.renderpanel .col.wide{margin-left:auto}
#butspanel.renderpanel .col.wide .b{width:104px}
.b.big{height:34px;font-weight:bold;letter-spacing:1px}
.b.lbl{background:transparent;border:0;width:100%;cursor:default}


/* ---------- splitters (drag to resize, like the 1.0 tiled screen) ---------- */
.hsplit{height:4px;background:var(--bg);cursor:row-resize;flex:0 0 4px;
  border-top:1px solid var(--lo);border-bottom:1px solid var(--hi)}
.vsplit{width:4px;background:var(--bg);cursor:col-resize;flex:0 0 4px;
  border-left:1px solid var(--lo);border-right:1px solid var(--hi)}

/* ---------- maximized window (CTRL+arrow) ---------- */
body.hasmax #screen > *:not(#infohead){display:none}
body.hasmax #screen > .maxed,
body.hasmax #screen > #subviews:has(.maxed){display:flex !important;flex:1 1 auto !important}
body.hasmax #subviews .pane:not(.maxed),
body.hasmax #subviews .vsplit{display:none}
.maxed{flex:1 1 auto !important}

/* ---------- active window hint (header of the focused area) ---------- */
.activearea > .header{background:#a8a8a8}

/* ---- Help / shortcuts window ---- */
#helpwin{position:absolute;right:8px;top:26px;width:640px;max-width:calc(100% - 16px);
  max-height:calc(100% - 40px);overflow:auto;background:#c8ab8e;border:2px outset #e2cdb4;
  z-index:60;box-shadow:3px 3px 0 rgba(0,0,0,.4)}
#helpwin.hidden{display:none}
.helpbody{display:flex;gap:14px;padding:8px 10px 12px;font-size:11px;color:#1a1409}
.helpcol{flex:1;min-width:0}
.helpbody h4{margin:8px 0 3px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid #8d7458}
.helpbody ul{margin:0;padding-left:14px}
.helpbody li{margin:2px 0;line-height:1.35}
.helpbody b{color:#000}
.helpbody a{color:#3a2d80}
#helpBtn{margin-right:2px}