/* The Little Language Model — front-door styles. Imports nothing; sits on top
   of workbench.css and uses its custom properties. */

#llm-app{max-width:860px;margin:0 auto;padding:1rem 0 3rem}
.llm-intro h2{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--ink);margin:1.2rem 0 .5rem}
.llm-intro p{color:var(--ink-soft);line-height:1.55;max-width:64ch}

.llm-train{display:flex;align-items:center;gap:1rem;margin:1.2rem 0}
.llm-btn{font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.6rem 1.1rem;
  border:1.5px solid var(--rule-strong);border-radius:6px;background:var(--panel);color:var(--ink);cursor:pointer}
.llm-btn:hover{border-color:var(--flame)}
.llm-btn-primary{background:var(--flame);border-color:var(--flame);color:#fff}
.llm-btn-primary:hover{background:var(--flame-deep)}
.llm-status{font-family:var(--mono);font-size:.8rem;color:var(--ink-faint)}

.llm-hidden{display:none}
.llm-lab{margin-top:1rem;border-top:1px solid var(--rule);padding-top:1rem}

.llm-controls{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:1rem}
.llm-slider{display:flex;flex-direction:column;gap:.3rem;min-width:11rem}
.llm-slider-name{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint)}
.llm-slider-val{font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)}
.llm-range{width:100%;accent-color:var(--flame);cursor:pointer}

.llm-chips-label{font-family:var(--sans);font-size:.85rem;color:var(--ink-faint);margin:.2rem 0 .4rem}
.llm-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.llm-chip{font-family:var(--serif);font-size:.92rem;padding:.4rem .8rem;border-radius:999px;
  border:1px solid var(--rule-strong);background:var(--panel);color:var(--ink-soft);cursor:pointer}
.llm-chip:hover{border-color:var(--flame);color:var(--flame-deep)}

.llm-inputrow{display:flex;gap:.6rem;margin-bottom:.6rem}
.llm-input{flex:1;font-family:var(--serif);font-size:1rem;padding:.55rem .8rem;
  border:1.5px solid var(--rule-strong);border-radius:6px;background:#fff;color:var(--ink)}
.llm-input:focus{outline:2px solid var(--flame);outline-offset:1px}

.llm-out{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.llm-out{grid-template-columns:1fr}.llm-inputrow{flex-direction:column}}
.llm-panel{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:1rem}
.llm-panel h3{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 .5rem;color:var(--ink)}
.llm-panel h3 small{display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-top:.15rem}
.llm-panel p{font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:var(--ink);min-height:3.2em;margin:0}
.llm-unknown{color:var(--ink-faint);font-style:italic}

/* About the data — the scale, succinctly */
.llm-scale{margin-top:2.5rem;border-top:1px solid var(--rule);padding-top:1.2rem}
.llm-scale h2{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:0 0 .8rem;color:var(--ink)}
/* the zoom-out: nested area-true squares, bottom-left anchored */
.llm-zoom-viewport{position:relative;width:min(100%,380px);aspect-ratio:1;margin:0 auto;
  border:1px solid var(--rule);border-radius:8px;background:var(--panel);overflow:hidden}
.llm-zoom-world{position:absolute;inset:0}
.llm-zoom-sq{position:absolute;border-radius:2px;
  transition:width .9s cubic-bezier(.4,0,.2,1),height .9s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion: reduce){.llm-zoom-sq{transition:none}}
.llm-zoom-sq-1{background:var(--flame);z-index:4}
.llm-zoom-sq-2{background:var(--ember);background:color-mix(in srgb,var(--flame) 55%,var(--panel));z-index:3}
.llm-zoom-sq-3{background:repeating-linear-gradient(45deg,var(--flame),var(--flame) 4px,var(--ember) 4px,var(--ember) 8px);z-index:2}
.llm-zoom-sq-4{background:repeating-linear-gradient(45deg,var(--flame-deep),var(--flame-deep) 4px,var(--flame) 4px,var(--flame) 8px);z-index:1}
.llm-zoom-tiny{min-width:2px;min-height:2px}
.llm-zoom-lab{position:absolute;top:.5rem;left:.6rem;font-family:var(--sans);font-size:.82rem;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);transition:opacity .5s;pointer-events:none;
  max-width:calc(100% - 1.2rem)}
.llm-zoom-lab strong{font-weight:700}
.llm-zoom-caption{max-width:44rem;margin:.9rem auto 0;font-size:.95rem;line-height:1.55;
  color:var(--ink-soft);text-align:center;min-height:4.6em}
.llm-zoom-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.6rem}
.llm-zoom-nav .llm-btn:disabled{opacity:.35;cursor:default}
.llm-zoom-dots{display:flex;gap:.45rem}
.llm-zoom-dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--rule-strong);
  background:var(--panel);cursor:pointer;padding:0}
.llm-zoom-dot-on{background:var(--flame);border-color:var(--flame)}

.llm-onward{margin-top:2.2rem;text-align:center}
.llm-door{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.05rem;
  color:#fff;background:var(--flame);padding:.8rem 1.4rem;border-radius:8px;text-decoration:none}
.llm-door:hover{background:var(--flame-deep)}

/* matchup chooser */
.llm-choice{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0 .4rem}
.llm-matchup{font-family:var(--display);font-weight:700;font-size:1rem;padding:.7rem 1.2rem}
.llm-matchup-on{background:var(--flame);border-color:var(--flame);color:#fff}
.llm-matchup-on:hover{background:var(--flame-deep)}
.llm-tagline{color:var(--ink-soft);line-height:1.5;max-width:62ch;min-height:1.4em;margin:.3rem 0 .8rem}

/* ---------- Details: the decision log ---------- */
.llm-details{margin-top:.6rem;border-top:1px dashed var(--rule);padding-top:.5rem}
.llm-details summary{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);cursor:pointer}
.llm-details summary:hover{color:var(--flame-deep)}
.llm-log{margin-top:.6rem;max-height:16rem;overflow-y:auto;display:flex;flex-direction:column;gap:.45rem}
.llm-step{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;
  font-size:.82rem;line-height:1.5;padding:.35rem .5rem;border-radius:6px;background:var(--panel)}
.llm-step-n{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);min-width:1.2rem}
.llm-step-ctx{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.llm-step-opts{display:flex;flex-wrap:wrap;gap:.35rem}
.llm-opt{font-family:var(--mono);font-size:.75rem;padding:.1rem .4rem;border-radius:4px;
  border:1px solid var(--rule);color:var(--ink-soft)}
.llm-opt em{font-style:normal;color:var(--ink-faint)}
.llm-opt-chosen{border-color:var(--flame);color:var(--flame-deep);font-weight:600}
.llm-opt-more{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint)}
.llm-step-chose{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--ink)}
.llm-log-empty{font-size:.82rem;color:var(--ink-faint)}