/* ===== OBSCURE ATELIER — old-master atelier aesthetic ===== */
:root{
  --charcoal:#1e1a17;
  --charcoal-2:#26211c;
  --parchment:#efe7d5;
  --parchment-dim:#cbbfa3;
  --gilt:#c9a24b;
  --gilt-soft:#e0c078;
  --ink:#2a231c;
  --rail:#2b2621;
  --line:#453d33;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'IBM Plex Mono',monospace;
  background:
    radial-gradient(circle at 20% 10%, #2c2620 0%, #1a1613 60%, #120f0c 100%);
  color:var(--parchment);
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  -webkit-user-select:none;user-select:none;
}
#grain{
  pointer-events:none;position:fixed;inset:0;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== HEADER ===== */
#topbar{
  display:flex;align-items:center;gap:1.2rem;
  padding:.55rem 1.1rem;
  background:linear-gradient(180deg,#241f1a,#1a1512);
  border-bottom:1px solid var(--gilt);
  box-shadow:0 2px 12px rgba(0,0,0,.5);
  z-index:20;
}
.brand{display:flex;align-items:center;gap:.7rem;}
.mark{
  font-size:2rem;color:var(--gilt-soft);
  filter:drop-shadow(0 0 6px rgba(201,162,75,.4));
}
.brand-text h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;font-size:1.7rem;line-height:1;
  letter-spacing:.5px;color:var(--parchment);
}
.subtitle{font-size:.68rem;color:var(--parchment-dim);letter-spacing:.5px;}
#fact-banner{
  flex:1;text-align:center;font-size:.72rem;color:var(--gilt-soft);
  font-style:italic;padding:0 1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#menuToggle{
  display:none;background:none;border:1px solid var(--gilt);color:var(--gilt-soft);
  font-size:1.1rem;border-radius:4px;padding:.2rem .5rem;cursor:pointer;
}

/* ===== STAGE ===== */
#stage{flex:1;display:flex;min-height:0;position:relative;}

.drawer{
  background:linear-gradient(180deg,var(--rail),#221d18);
  width:230px;flex-shrink:0;
  overflow-y:auto;padding:.8rem;
  border-color:var(--line);
}
#toolRail{border-right:1px solid var(--gilt);}
#propPanel{border-left:1px solid var(--gilt);width:250px;}

.rail-title{
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;
  color:var(--gilt-soft);border-bottom:1px solid var(--line);
  padding-bottom:.4rem;margin-bottom:.7rem;letter-spacing:1px;
}

/* ===== TOOL BUTTONS ===== */
.tool-btn{
  display:flex;align-items:center;gap:.6rem;width:100%;
  background:#221d18;border:1px solid var(--line);
  color:var(--parchment);text-align:left;
  padding:.5rem .55rem;margin-bottom:.4rem;border-radius:5px;
  cursor:pointer;font-family:'IBM Plex Mono';font-size:.72rem;
  transition:all .15s ease;
}
.tool-btn:hover{border-color:var(--gilt-soft);transform:translateX(2px);}
.tool-btn.active{
  border-color:var(--gilt);
  background:linear-gradient(90deg,#3a3020,#2a231a);
  box-shadow:0 0 10px rgba(201,162,75,.35), inset 0 0 8px rgba(201,162,75,.1);
}
.tool-btn .glyph{
  font-size:1.15rem;color:var(--gilt-soft);width:1.4rem;text-align:center;flex-shrink:0;
}
.tool-btn.active .glyph{color:var(--gilt);}
.tname{line-height:1.15;}

/* ===== EASEL / CANVAS ===== */
#easel{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:1.4rem;min-width:0;position:relative;
  background:
    repeating-linear-gradient(45deg,#1a1512 0 10px,#191410 10px 20px);
}
#canvasFrame{
  width:100%;height:100%;max-width:100%;max-height:100%;
  background:#3a2c1c;
  padding:12px;border-radius:3px;
  box-shadow:
    0 0 0 3px #c9a24b,
    0 0 0 10px #5a4426,
    0 24px 50px rgba(0,0,0,.7);
  position:relative;
}
#canvas{
  display:block;width:100%;height:100%;
  border-radius:1px;cursor:crosshair;
  touch-action:none;background:#efe7d5;
}
#cursorHint{
  position:fixed;pointer-events:none;z-index:50;
  border:1px solid rgba(201,162,75,.9);border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
  opacity:0;transition:opacity .1s;
}

/* ===== PROPERTIES ===== */
.prop-block{margin-bottom:1.1rem;}
.prop-label{
  display:block;font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--parchment-dim);margin-bottom:.5rem;
}
#swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.swatch{
  aspect-ratio:1;border:1px solid var(--line);border-radius:4px;cursor:pointer;
  transition:transform .1s, box-shadow .1s;
}
.swatch:hover{transform:scale(1.12);}
.swatch.sel{border-color:var(--gilt);box-shadow:0 0 0 2px var(--gilt),0 0 8px rgba(201,162,75,.5);}
.picker-row{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;}
.picker-row input[type=color]{
  width:38px;height:32px;border:1px solid var(--line);border-radius:4px;
  background:none;cursor:pointer;padding:2px;
}
#colorName{font-size:.72rem;color:var(--gilt-soft);}

input[type=range]{width:100%;accent-color:var(--gilt);}
#sizeVal{color:var(--gilt-soft);}

.opt-row{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-bottom:.5rem;font-size:.7rem;color:var(--parchment);
}
.opt-row label{color:var(--parchment-dim);}
.opt-row select,.opt-row input[type=color]{
  background:#1c1712;color:var(--parchment);border:1px solid var(--line);
  border-radius:4px;padding:.2rem;font-family:'IBM Plex Mono';font-size:.68rem;
}
.opt-row input[type=color]{width:36px;height:28px;padding:2px;}

.info p{font-size:.72rem;line-height:1.5;color:var(--parchment);
  font-style:italic;border-left:2px solid var(--gilt);padding-left:.6rem;}

.ghost-btn{
  width:100%;background:transparent;border:1px dashed var(--gilt);
  color:var(--gilt-soft);padding:.5rem;border-radius:5px;cursor:pointer;
  font-family:'IBM Plex Mono';font-size:.7rem;transition:all .15s;
}
.ghost-btn:hover{background:rgba(201,162,75,.12);}
.ghost-btn.on{background:var(--gilt);color:#1c1712;border-style:solid;}

/* ===== FOOTER ===== */
#bottombar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1.1rem;background:linear-gradient(0deg,#241f1a,#1a1512);
  border-top:1px solid var(--gilt);gap:1rem;z-index:20;
}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.actions button{
  background:#221d18;border:1px solid var(--line);color:var(--parchment);
  padding:.4rem .8rem;border-radius:5px;cursor:pointer;
  font-family:'IBM Plex Mono';font-size:.72rem;transition:all .15s;
}
.actions button:hover{border-color:var(--gilt-soft);color:var(--gilt-soft);}
.actions button.accent{
  background:var(--gilt);color:#1c1712;border-color:var(--gilt);font-weight:600;
}
.actions button.accent:hover{background:var(--gilt-soft);}
.credit{font-size:.66rem;color:var(--parchment-dim);}
.credit a{color:var(--gilt-soft);text-decoration:none;border-bottom:1px dotted var(--gilt);}
.credit a:hover{color:var(--gilt);}

/* ===== TOOLTIP ===== */
.tooltip{
  position:fixed;z-index:1000;max-width:240px;
  background:#100d0a;border:1px solid var(--gilt);
  color:var(--parchment);padding:.6rem .7rem;border-radius:6px;
  font-size:.68rem;line-height:1.5;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.6);font-style:italic;
}
.tooltip.hidden{display:none;}

/* ===== RESPONSIVE ===== */
@media(max-width:820px){
  #menuToggle{display:block;}
  #fact-banner{display:none;}
  .drawer{
    position:absolute;top:0;bottom:0;z-index:30;
    transform:translateX(0);transition:transform .25s ease;
  }
  #toolRail{left:0;transform:translateX(-105%);}
  #propPanel{right:0;transform:translateX(105%);}
  body.panels-open #toolRail{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,.6);}
  body.panels-open #propPanel{transform:translateX(0);box-shadow:-8px 0 30px rgba(0,0,0,.6);}
  .brand-text h1{font-size:1.35rem;}
  #easel{padding:.6rem;}
  #canvasFrame{padding:6px;box-shadow:0 0 0 2px #c9a24b,0 0 0 6px #5a4426,0 12px 24px rgba(0,0,0,.6);}
  .credit{display:none;}
  .cursorHint{display:none;}
}
@media(hover:none){#cursorHint{display:none;}}