.et-wrap, .et-wrap *{box-sizing:border-box;}
.et-wrap{
  --ink:#0a0e14;
  --panel:#10151dcc;
  --panel-solid:#10151d;
  --border:#212a37;
  --text:#eef1f5;
  --dim:#8b96a5;
  --accent:#ff8f4d;
  --accent-dim:#c96f38;
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--border);
  border-radius:12px;
  font-family:"Archivo",system-ui,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.2;
}
.et-canvas, .et-canvas-3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;}
.et-canvas.dragging, .et-canvas-3d.dragging{cursor:grabbing;}

.et-mark{
  position:absolute;top:20px;left:20px;
  display:flex;align-items:baseline;gap:10px;
  pointer-events:none;user-select:none;
}
.et-glyph{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:1.5rem;color:var(--accent);letter-spacing:0.01em;}
.et-name{font-family:"Fraunces",serif;font-weight:300;font-size:1.05rem;color:var(--text);letter-spacing:0.02em;}

.et-top-controls{
  position:absolute;top:66px;left:20px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.et-select{
  height:36px;
  padding:0 10px;
  border-radius:18px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  color:var(--text);
  font-family:"Archivo",sans-serif;
  font-size:0.72rem;
  cursor:pointer;
}
.et-select:hover{border-color:var(--accent-dim);color:var(--accent);}
.et-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.et-btn{
  font-family:"Archivo",sans-serif;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--text);
  background:var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 14px;
  cursor:pointer;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.et-btn:hover{border-color:var(--accent-dim);color:var(--accent);}
.et-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.et-btn.active{border-color:var(--accent);color:var(--accent);background:#1a2129cc;}
.et-btn:disabled{opacity:0.35;cursor:default;}
.et-btn:disabled:hover{border-color:var(--border);color:var(--text);}

.et-rail{
  display:none; /* stats readout retired from the UI; left in the DOM since the
                   renderer still writes to it internally, just never shown */
  position:absolute;left:20px;bottom:20px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  grid-template-columns:auto auto;
  row-gap:6px;column-gap:16px;
  font-family:"IBM Plex Mono",monospace;
  font-size:0.78rem;
  font-variant-numeric:tabular-nums;
  min-width:240px;
}
.et-label{color:var(--dim);letter-spacing:0.04em;text-transform:uppercase;font-size:0.66rem;align-self:center;}
.et-value{color:var(--text);text-align:right;}
.et-value.et-accent{color:var(--accent);}

.et-ink-row{display:flex;gap:6px;justify-content:flex-end;align-items:center;}
.et-swatch{
  width:15px;height:15px;
  border-radius:50%;
  border:1px solid var(--border);
  padding:0;
  background:none;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.et-swatch:hover{transform:scale(1.15);border-color:var(--border);}
.et-swatch.active{box-shadow:0 0 0 2px var(--panel-solid), 0 0 0 3px var(--text);}
.et-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.et-actions{position:absolute;right:20px;bottom:20px;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:6px;}
.et-icon-btn{
  width:36px;height:36px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.et-icon{width:17px;height:17px;display:block;}

.et-wrap.et-wrap--fill{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  border-radius:0;
  z-index:999999;
}
.et-wrap:fullscreen{border-radius:0;}
.et-wrap:-webkit-full-screen{border-radius:0;}

.et-params-backdrop{position:absolute;inset:0;background:rgba(5,7,10,0.55);z-index:1;}
.et-params-backdrop[hidden]{display:none;}

.et-params{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(320px, calc(100% - 40px));
  max-height:calc(100% - 40px);
  overflow-y:auto;
  background:var(--panel-solid);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:2;
}
.et-params[hidden]{display:none;}
.et-params-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:"Fraunces",serif;font-size:1.05rem;color:var(--text);
}
.et-params-close{
  background:none;border:none;padding:0;
  color:var(--dim);font-size:1.3rem;line-height:1;cursor:pointer;
}
.et-params-close:hover{color:var(--accent);}
.et-params-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.et-params-body{display:flex;flex-direction:column;gap:10px;}
.et-param-row{display:grid;grid-template-columns:52px 1fr 58px;align-items:center;gap:10px;}
.et-param-row span:first-child{
  color:var(--dim);text-transform:uppercase;letter-spacing:0.04em;
  font-size:0.66rem;font-family:"IBM Plex Mono",monospace;
}
.et-param-row input[type=range]{width:100%;accent-color:var(--accent);}
.et-param-val{
  text-align:right;font-variant-numeric:tabular-nums;color:var(--text);
  font-family:"IBM Plex Mono",monospace;font-size:0.78rem;
}
.et-params-empty{color:var(--dim);font-size:0.82rem;margin:0;}
.et-params-foot{display:flex;gap:8px;justify-content:flex-end;}

@media (max-width:640px){
  .et-params{width:calc(100% - 28px);}
}

.et-hint{
  position:absolute;top:20px;right:20px;
  font-family:"IBM Plex Mono",monospace;
  font-size:0.72rem;
  color:var(--dim);
  text-align:right;
  line-height:1.6;
  opacity:1;
  transition:opacity 1s ease;
  pointer-events:none;
  user-select:none;
}
.et-hint.fade{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .et-hint{transition:none;}
}

@media (max-width:640px){
  .et-mark{top:14px;left:14px;}
  .et-name{display:none;}
  .et-top-controls{top:48px;left:14px;max-width:calc(100% - 28px);}
  .et-select{height:32px;padding:0 8px;font-size:0.68rem;}
  .et-actions{right:14px;bottom:14px;}
  .et-icon-btn{width:32px;height:32px;}
  .et-icon{width:15px;height:15px;}
  .et-hint{display:none;}
}