/* The website stays light; the artwork has its own independent background. */
#yantra-app { --ink:#232629; --muted:#69716e; --line:#dce1df; --accent:#3a6960; color:var(--ink); padding:2.5rem 0; font-size:14px; }
#yantra-app * { box-sizing:border-box; }
.yantra-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.6rem; }

.yantra-heading p { margin:0; } .yantra-heading .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:11px; margin-bottom:.7rem; }
#yantra-app button { border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); padding:.55rem .7rem; font:inherit; cursor:pointer; }
#yantra-app button:hover { background:#edf3f0; border-color:#a0b5af; } #yantra-app button:disabled { opacity:.4; cursor:default; }
#yantra-app button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
#yantra-app :is(button,input,select,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#yantra-app label { display:block; font-size:12px; font-weight:600; margin-bottom:.8rem; }
#yantra-app :is(select,input[type=text],input[type=number],textarea) { display:block; width:100%; min-width:0; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#fff; padding:.45rem; margin-top:.3rem; font:inherit; }
#yantra-app input[type=range] { display:block; width:100%; accent-color:var(--accent); margin:.5rem 0; }
#yantra-app input[type=color] { width:100%; height:32px; border:1px solid var(--line); border-radius:4px; background:#fff; padding:2px; margin-top:.3rem; }
#yantra-app input[type=checkbox] { accent-color:var(--accent); }
#yantra-app .check { display:flex; align-items:center; gap:.5rem; font-weight:400; }
#yantra-app output { float:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.yantra-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; padding:1rem; border:1px solid var(--line); border-radius:10px; margin-bottom:1rem; background:#f7f9f8; }
#yantra-app .yantra-toolbar label { margin:0; min-width:170px; }
.yantra-workspace { display:grid; grid-template-columns:220px minmax(0,1fr) 245px; gap:1rem; align-items:start; }
.yantra-panel { padding:1rem; border:1px solid var(--line); border-radius:10px; background:#fafbf9; max-height:850px; overflow:auto; }
#yantra-app h2 { font-size:15px; font-weight:700; margin:0 0 .75rem; }
.hint { color:var(--muted); font-size:11px; } .button-row { display:flex; gap:.35rem; margin:.6rem 0; } .button-row button { flex:1; }
#layers { display:grid; gap:.4rem; margin:1rem 0; max-height:320px; overflow:auto; }
.layer-row { border:1px solid var(--line); border-radius:6px; padding:.3rem; background:white; }
.layer-row.selected { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
#yantra-app .layer-select { width:100%; text-align:left; border:0; background:transparent; display:flex; align-items:center; gap:.5rem; padding:.3rem; }
.swatch { width:12px; height:12px; border-radius:50%; border:1px solid #0003; flex-shrink:0; }
.layer-actions { display:flex; gap:.25rem; align-items:center; justify-content:flex-end; }
#yantra-app .layer-actions button { font-size:12px; padding:.15rem .45rem; }
#yantra-app details { border-top:1px solid var(--line); padding:.85rem 0 .25rem; margin-top:.7rem; }
#yantra-app summary { cursor:pointer; font-weight:600; margin-bottom:.8rem; }
.color-pair,.number-pair { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.yantra-stage { min-width:0; position:sticky; top:1rem; }
.canvas-shell { border-radius:10px; overflow:hidden; border:1px solid var(--line); background:repeating-conic-gradient(#d4d8d6 0 25%,#eef0ee 0 50%) 0/20px 20px; }
#artwork { display:block; width:100%; height:auto; }
.stage-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; margin:.6rem 0 1rem; color:var(--muted); font-size:11px; }
.export-bar { display:flex; flex-wrap:wrap; gap:.5rem; }
.gif-settings { display:flex; gap:1rem; align-items:center; margin-top:1rem; font-size:11px; color:var(--muted); } .gif-settings label { min-width:110px; }
#status { font-size:12px; padding:.7rem 0; min-height:2.8rem; overflow-wrap:anywhere; }
#yantra-app .yantra-help { margin-top:2rem; max-width:800px; line-height:1.7; }

@media(max-width:1199px) { .yantra-workspace { grid-template-columns:195px minmax(0,1fr); } .inspector-panel { grid-column:1/-1; max-height:none; } #inspector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:start; } }
@media(max-width:767px) { .yantra-heading { align-items:flex-start; flex-direction:column; } .yantra-workspace { display:flex; flex-direction:column; } .yantra-stage { order:-1; position:static; width:100%; } .yantra-panel { width:100%; max-height:none; } #inspector { display:block; } .yantra-toolbar { padding:.7rem; }  }

/* Compact editor previews; use the site's headline typography. */
.yantra-heading { font-size:16px; }
.yantra-heading h1 { margin:0 0 .4rem; letter-spacing:normal; }
.yantra-stage { width:100%; max-width:500px; justify-self:center; }
#yantra-app #artwork { max-height:500px; object-fit:contain; }
@media(min-width:1200px) { .yantra-workspace { grid-template-columns:220px minmax(0,500px) 245px; justify-content:center; } }

/* Align the composition toolbar with the three editor columns. */
@media(min-width:1200px) { .yantra-toolbar { max-width:calc(965px + 2rem); margin-left:auto; margin-right:auto; } }