.framer, .framer *{box-sizing:border-box}
.framer .shell{display:flex;min-height:100vh;align-items:stretch}
  /* ---------- control column ---------- */
.framer .controls{
    width:392px;flex:0 0 392px;
    background:var(--panel-2);
    border-right:1px solid var(--edge);
    padding:26px 24px 40px;
    overflow-y:auto;
  }
.framer .brandbar{height:3px;background:var(--accent);margin:-26px -24px 22px;transition:background .2s}
.framer h1{
    font-size:15px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    margin:0 0 4px;color:var(--ink);
  }
.framer .tag{color:var(--ink-faint);font-size:11px;letter-spacing:.06em;margin:0 0 26px;line-height:1.5}
.framer fieldset{border:0;padding:0;margin:0 0 24px}
.framer legend{
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-faint);padding:0;margin-bottom:9px;
  }
.framer label.fld{display:block;margin-bottom:12px}
.framer label.fld > span{
    display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:5px;
  }
.framer input[type=text]{
    width:100%;padding:9px 11px;
    background:#141210;border:1px solid var(--edge);border-radius:2px;
    color:var(--ink);font-family:inherit;font-size:13px;
  }
.framer input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.framer input[type=text]::placeholder{color:#544C42}
.framer .seg{display:flex;gap:0;border:1px solid var(--edge);border-radius:2px;overflow:hidden}
.framer .seg button{
    flex:1;padding:9px 4px;background:#141210;border:0;border-right:1px solid var(--edge);
    color:var(--ink-dim);font-family:inherit;font-size:11px;letter-spacing:.06em;
    cursor:pointer;transition:background .15s,color .15s;
  }
.framer .seg button:last-child{border-right:0}
.framer .seg button:hover{background:#1E1B18;color:var(--ink)}
.framer .seg button[aria-pressed=true]{background:var(--accent);color:#fff}
.framer .seg button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
  /* drop zone */
.framer .drop{
    border:1px dashed var(--edge);border-radius:2px;
    padding:26px 14px;text-align:center;cursor:pointer;
    color:var(--ink-faint);line-height:1.6;transition:border-color .15s,background .15s;
  }
.framer .drop:hover, .framer .drop.hot{border-color:var(--accent);background:#141210;color:var(--ink-dim)}
.framer .drop strong{display:block;color:var(--ink);font-weight:500;margin-bottom:4px;font-size:12px}
.framer .drop kbd{
    background:#141210;border:1px solid var(--edge);border-radius:2px;
    padding:1px 5px;font-size:10px;color:var(--ink-dim);font-family:inherit;
  }
.framer .filename{
    margin-top:9px;font-size:11px;color:var(--ink-dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* font slots */
.framer .fontrow{display:flex;align-items:center;gap:9px;margin-bottom:7px}
/* `.fontrow span` below is (0,1,1) and would out-specify a bare `.dot` (0,1,0),
   stretching the status dot across the whole row. It was always so, and it was
   invisible for as long as nothing ever turned a dot on: unlit, it is a dark
   bar on a dark panel. The moment a host supplies the font automatically it
   lights up and reads as a green smear. Qualified rather than reordered, so it
   cannot come undone the next time a rule moves. */
.framer .fontrow .dot{width:6px;height:6px;border-radius:50%;background:#4A4239;flex:0 0 6px}
.framer .dot.on{background:#5E9E63}
.framer .fontrow span{flex:1;font-size:11px;color:var(--ink-dim)}
.framer .mini{
    background:#141210;border:1px solid var(--edge);border-radius:2px;
    color:var(--ink-dim);font-family:inherit;font-size:10px;letter-spacing:.08em;
    padding:5px 9px;cursor:pointer;text-transform:uppercase;
  }
.framer .mini:hover{border-color:var(--accent);color:var(--ink)}
.framer .note{font-size:10px;color:var(--ink-faint);line-height:1.6;margin-top:9px}
  /* crop */
.framer .croprow{display:grid;grid-template-columns:16px 1fr 46px;align-items:center;gap:9px;margin-bottom:7px}
.framer .croprow b{font-weight:400;font-size:10px;letter-spacing:.12em;color:var(--ink-faint)}
.framer .croprow output{font-size:11px;color:var(--ink-dim);text-align:right}
.framer input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:2px;
    background:var(--edge);border-radius:2px;outline:none;
  }
.framer input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;
    background:var(--accent);cursor:pointer;border:0;
  }
.framer input[type=range]::-moz-range-thumb{
    width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:0;
  }
.framer input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.framer .cropbtns{display:flex;gap:7px;margin-top:11px}
.framer .cropbtns .mini{flex:1;text-align:center}
.framer .mini[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.framer .status{font-size:10px;line-height:1.6;margin-top:10px;color:var(--ink-faint)}
.framer .status.found{color:#7FB183}
.framer .export{
    width:100%;padding:14px;margin-top:6px;
    background:var(--accent);border:0;border-radius:2px;color:#fff;
    font-family:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    cursor:pointer;transition:filter .15s;
  }
.framer .export:hover{filter:brightness(1.12)}
.framer .export:disabled{background:#3A342C;color:var(--ink-faint);cursor:not-allowed}
.framer .export.secondary{
    background:#141210;border:1px solid var(--edge);color:var(--ink-dim);
    margin-top:8px;padding:11px;
  }
.framer .export.secondary:hover{border-color:var(--accent);color:var(--ink);filter:none}
.framer .export.secondary:disabled{background:#141210;border-color:var(--edge);color:#4A4239}
.framer .dims{text-align:center;font-size:10px;color:var(--ink-faint);margin-top:9px;letter-spacing:.08em}
  /* ---------- stage ---------- */
.framer .stage{
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:44px;background:
      repeating-linear-gradient(45deg,#1C1916 0 12px,#1F1C18 12px 24px);
    min-width:0;
  }
.framer .frame-wrap{width:100%;max-width:1180px;box-shadow:0 18px 60px rgba(0,0,0,.55)}
.framer canvas{display:block;width:100%;height:auto;background:#fff}

/* ---------- trim-only mode ---------- */

/* The UA stylesheet already does this, but `.framer fieldset` above sets its
   own box and a later display rule anywhere would out-specify a bare attribute
   selector. Stated once, so hiding a fieldset cannot quietly stop working. */
.framer [hidden]{display:none}

/* The canvas is no longer a fixed 2145 × 1458 here — it takes the cropped
   image's own shape, which may be anything from a wide strip to a portrait
   screenshot. `width:100%` on a tall one would blow it past the fold, so the
   bare stage sizes to CONTENT and caps both axes instead. */
.framer .frame-wrap.bare{display:flex;justify-content:center;box-shadow:none}
.framer .frame-wrap.bare canvas{
    width:auto;height:auto;max-width:100%;max-height:74vh;
    box-shadow:0 18px 60px rgba(0,0,0,.55);
  }

/* The export has no background at all, so the preview must not paint one —
   a white canvas would show an opaque chart and a transparent one as the same
   picture, and the difference is the whole point of this mode. The chequerboard
   is the conventional way to say "nothing here", and it is drawn in the panel's
   own two darks rather than the usual grey so it reads as stage, not content. */
.framer canvas.bare{
    background:
      repeating-conic-gradient(#2A2622 0% 25%, #201D19 0% 50%) 0 0 / 28px 28px;
  }
@media screen and (max-width:900px){
.framer .shell{flex-direction:column}
.framer .controls{width:100%;flex:none;border-right:0;border-bottom:1px solid var(--edge)}
.framer .stage{padding:20px}
  }
@media (prefers-reduced-motion:reduce){.framer, .framer *{transition:none!important}}