/* Try a template: a live driver running the shipped expression.
   Uses the guide's existing tokens so it matches the rest of the docs. */

.trydrv{
  border:1px solid var(--bd);
  border-radius:12px;
  background:var(--sf);
  overflow:hidden;
  margin:1.4rem 0 2rem;
}

.trydrv-pick{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--bd);
  background:var(--bgHi);
}
.trydrv-pick button{
  font:inherit;font-size:.78rem;
  background:transparent;border:1px solid var(--bd);color:var(--mu);
  border-radius:999px;padding:.34rem .8rem;cursor:pointer;
  transition:border-color .15s,color .15s,background-color .15s;
}
.trydrv-pick button:hover{color:var(--tx);border-color:var(--oHi)}
.trydrv-pick button[aria-pressed="true"]{
  background:var(--btn);border-color:var(--btn);color:#fff;
}

.trydrv-head{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;justify-content:space-between;
  padding:1rem 1.15rem .2rem;
}
.trydrv-head h4{margin:0;font-size:1.05rem;color:var(--tx)}
.trydrv-head .cat{font-size:.78rem;color:var(--dim)}
.trydrv-desc{margin:.35rem 0 0;padding:0 1.15rem;color:var(--mu);font-size:.92rem;max-width:62ch}

.trydrv-stage{position:relative;margin:.9rem 1.15rem 0;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}
.trydrv-stage canvas{display:block;width:100%;height:auto}
.trydrv-readout{
  position:absolute;top:.55rem;right:.7rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;
  color:var(--oHi);background:rgba(0,0,0,.35);border-radius:5px;padding:.15rem .4rem;
}
:root[data-theme="light"] .trydrv-readout{background:rgba(255,255,255,.7)}

.trydrv-graph{
  position:relative;margin:.75rem 1.15rem 0;padding:.35rem .5rem .2rem;
  border:1px solid var(--bd);border-radius:8px;background:var(--bgHi);
}
.trydrv-graph canvas{display:block;width:100%;height:auto}
.trydrv-graph .g-label{
  position:absolute;top:.4rem;right:.6rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}

.trydrv-tools{display:flex;gap:.4rem;padding:.75rem 1.15rem 0}
.trydrv-tools button{
  font:inherit;font-size:.74rem;background:transparent;border:1px solid var(--bd);
  color:var(--mu);border-radius:999px;padding:.3rem .8rem;cursor:pointer;
  transition:border-color .15s,color .15s,background-color .15s;
}
.trydrv-tools button:hover{color:var(--tx);border-color:var(--oHi)}
.trydrv-tools button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:#fff}

.trydrv-params{
  display:grid;gap:.85rem 1.4rem;grid-template-columns:1fr;
  padding:1.1rem 1.15rem 0;
}
@media (min-width:34rem){.trydrv-params{grid-template-columns:1fr 1fr}}
.trydrv-p{display:grid;gap:.15rem}
.trydrv-p .lab{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.82rem}
.trydrv-p .lab span{color:var(--mu)}
.trydrv-p .lab b{
  color:var(--tx);font-weight:600;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;
}
.trydrv-p input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  background:var(--bd);cursor:pointer;margin:.45rem 0 0;
}
.trydrv-p input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--o);border:2px solid var(--sf);cursor:grab;
}
.trydrv-p input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--o);
  border:2px solid var(--sf);cursor:grab;
}
.trydrv-p input[type=range]:focus-visible{outline:2px solid var(--o);outline-offset:4px}
.trydrv-p .tip{color:var(--dim);font-size:.78rem;margin:.15rem 0 0}

.trydrv-expr{
  margin:1.15rem 1.15rem 0;padding:.65rem .75rem;
  background:var(--bgHi);border:1px solid var(--bd);border-radius:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;line-height:1.55;
  color:var(--mu);overflow-x:auto;white-space:pre-wrap;word-break:break-word;
}
.trydrv-expr .t{color:var(--oHi)}

.trydrv-foot{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;
  padding:.85rem 1.15rem 1.15rem;
}
.trydrv-foot p{margin:0;color:var(--dim);font-size:.8rem;max-width:58ch}
.trydrv-foot a{font-size:.82rem}