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

.type-heading p { margin:0; } .type-heading .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:11px; margin-bottom:.7rem; }
#type-app button { border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); padding:.55rem .7rem; font:inherit; cursor:pointer; }
#type-app button:hover { background:#edf3f0; border-color:#a0b5af; } #type-app button:disabled { opacity:.4; cursor:default; }
#type-app button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
#type-app :is(button,input,select,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#type-app label { display:block; font-size:12px; font-weight:600; margin-bottom:.8rem; }
#type-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; }
#type-app input[type=range] { display:block; width:100%; accent-color:var(--accent); margin:.5rem 0; }
#type-app input[type=color] { width:100%; height:32px; border:1px solid var(--line); border-radius:4px; background:#fff; padding:2px; margin-top:.3rem; }
#type-app input[type=checkbox] { accent-color:var(--accent); }
#type-app .check { display:flex; align-items:center; gap:.5rem; font-weight:400; }
#type-app output { float:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.type-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; }
#type-app .type-toolbar label { margin:0; min-width:170px; }
.type-workspace { display:grid; grid-template-columns:220px minmax(0,1fr) 245px; gap:1rem; align-items:start; }
.type-panel { padding:1rem; border:1px solid var(--line); border-radius:10px; background:#fafbf9; max-height:850px; overflow:auto; }
#type-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); }
#type-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; }
#type-app .layer-actions button { font-size:12px; padding:.15rem .45rem; }
#type-app details { border-top:1px solid var(--line); padding:.85rem 0 .25rem; margin-top:.7rem; }
#type-app summary { cursor:pointer; font-weight:600; margin-bottom:.8rem; }
.color-pair,.number-pair { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.type-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; }
#type-app .type-help { margin-top:2rem; max-width:800px; line-height:1.7; }

@media(max-width:1199px) { .type-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) { .type-heading { align-items:flex-start; flex-direction:column; } .type-workspace { display:flex; flex-direction:column; } .type-stage { order:-1; position:static; width:100%; } .type-panel { width:100%; max-height:none; } #inspector { display:block; } .type-toolbar { padding:.7rem; }  }

#type-app [hidden]{display:none!important}.type-workspace{grid-template-columns:255px minmax(0,1fr) 245px}.text-slot{border-bottom:1px solid var(--line);padding-bottom:.3rem;margin-bottom:.8rem}.text-actions{display:flex;align-items:center;gap:.6rem}.text-actions label{flex:1}.export-options{display:flex;gap:1rem;margin:1rem 0}.stage-caption{align-items:center}#type-app .stage-caption button{font-size:12px}.type-panel{max-height:900px}#type-app .font-note{font-weight:400;color:var(--muted);font-size:11px}#type-app .slider-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}#type-app .slider-head input{width:68px;margin:0;padding:.15rem}.type-help{max-width:850px}@media(max-width:1199px){.type-workspace{grid-template-columns:225px minmax(0,1fr)}.style-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-height:none}.style-panel h2{grid-column:1/-1}}@media(max-width:767px){.type-workspace{display:flex}.style-panel{display:block}.export-options{flex-wrap:wrap}}

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

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