/* PLAYGROUND CHROME, DELIBERATELY NOT THE TILEWARD BRAND.
 *
 * tileward.com is warm paper (#FBFAF8) and mint (#0E7A62). This page is cool neutral and orange
 * on purpose: a visitor arriving from the model card should see at a glance that they are in a
 * demo sandbox, not on the product site. The idiom is the one people already read as "ML
 * playground" — labelled blocks, a chat log, an orange submit — so the affordances need no
 * explaining. An earlier revision matched the brand and was wrong for exactly that reason.
 *
 * The LOGOMARK is the exception and keeps its own brand colours: the mark says whose demo this
 * is, the DEMO badge beside it says which surface. Those are two different jobs.
 */
:root{
  --page:#F4F5F7;
  --block:#FFFFFF;
  --block-2:#F9FAFB;
  --border:#E2E5EA;
  --border-2:#CBD0D8;
  --text:#111827;
  --dim:#414B59;
  --faint:#6B7480;
  --accent:#C2410C;        /* white on this is 5.9:1 */
  --accent-hi:#EA580C;
  --accent-wash:#FDF1E7;
  --on-accent:#FFFFFF;
  --user-bubble:#EDF0F4;
  --mint:#0E7A62;          /* brand: the "ward" in the wordmark */
  --code-bg:#F3F4F6;
  --sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#0B0F19;
    --block:#111827;
    --block-2:#171F2E;
    --border:#2B3446;
    --border-2:#3A465C;
    --text:#F3F4F6;
    --dim:#C3CAD5;
    --faint:#8B94A3;
    --accent:#F97316;
    --accent-hi:#FB923C;
    --accent-wash:#261B10;
    --on-accent:#0B0F19;
    --user-bubble:#1D2637;
    --mint:#4FC2A4;
    --code-bg:#0E1522;
  }
}

*{box-sizing:border-box}
/* The ground is painted on BOTH html and body, and body is min-height rather than height.
   height:100% pins body to the viewport while content scrolls past it, leaving the overflow
   area relying on background propagation to be painted at all. */
html{height:100%;background:var(--page)}
body{
  min-height:100%;
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-underline-offset:2px}
@media (prefers-color-scheme:dark){ a{color:var(--accent-hi)} }
.mono{font-family:var(--mono);font-size:.9em;letter-spacing:-.01em}
.spacer{flex:1}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:5px}

/* ---- top bar ---- */
.topbar{
  background:var(--block);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:5;
}
.topbar-in{
  max-width:1040px;
  margin:0 auto;
  padding:12px clamp(14px,4vw,22px);
  display:flex;
  align-items:center;
  gap:13px;
}
.logo{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--text);
  flex:none;
}
.logo .logomark{display:block;flex:none}
.wordmark{font-size:20px;font-weight:700;letter-spacing:-.02em}
.wordmark .ward{color:var(--mint)}
.badge{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-accent);
  background:var(--accent);
  padding:4px 9px;
  border-radius:5px;
  flex:none;
}
.topbar-in > a:not(.logo){
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  color:var(--dim);
  flex:none;
}
.topbar-in > a:not(.logo):hover{color:var(--accent-hi)}

/* ---- page ---- */
.page{
  max-width:1040px;
  margin:0 auto;
  padding:clamp(20px,3.5vw,30px) clamp(14px,4vw,22px) 64px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.head{display:flex;flex-direction:column;gap:7px}
h1{
  margin:0;
  font-size:clamp(1.6rem,3.6vw,2rem);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
}
.lede{margin:0;font-size:17px;color:var(--dim)}

/* ---- block ---- */
.block{
  background:var(--block);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.block-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--faint);
  text-transform:uppercase;
}

/* ---- model block ---- */
.model-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.model-pill{
  display:inline-flex;
  align-items:center;
  background:var(--block-2);
  border:1px solid var(--border-2);
  border-radius:7px;
  padding:8px 13px;
  font-weight:600;
  font-size:17px;
}
.model-note{font-size:15px;color:var(--faint)}
.specs{display:flex;flex-wrap:wrap;gap:9px 24px;font-size:15px;color:var(--dim)}
.spec b{color:var(--text);font-variant-numeric:tabular-nums}
.spec i{color:var(--faint);font-style:normal;font-size:14px}

/* ---- chat ---- */
.log{
  background:var(--block-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px;
  min-height:300px;
  max-height:min(56vh,560px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.empty{display:flex;flex-direction:column;gap:10px}
.empty-t{margin:0;font-size:15px;color:var(--faint)}
.examples{display:flex;flex-direction:column;gap:8px}
.ex{
  text-align:left;
  font:inherit;
  font-size:15.5px;
  line-height:1.5;
  color:var(--dim);
  background:var(--block);
  border:1px solid var(--border-2);
  border-radius:8px;
  padding:11px 13px;
  cursor:pointer;
}
.ex:hover{border-color:var(--accent);color:var(--text)}

.msg{display:flex;flex-direction:column;gap:5px;max-width:100%}
.msg.user{align-items:flex-end}
.who{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--faint);
}
.body{font-size:17px;line-height:1.65;overflow-wrap:anywhere;max-width:100%}
.msg.user .body{
  background:var(--user-bubble);
  border-radius:12px 12px 3px 12px;
  padding:11px 15px;
  max-width:88%;
  white-space:pre-wrap;
}
.msg.assistant .body{border-left:2px solid var(--accent);padding-left:14px}
.msg.error .body{border-left-color:#DC2626;color:#B91C1C;white-space:pre-wrap}
@media (prefers-color-scheme:dark){
  .msg.error .body{border-left-color:#F87171;color:#FCA5A5}
}

/* ---- markdown inside an assistant message ----
   Every element here is produced by md() in app.js, which ESCAPES the model's text before it
   applies any markup. Nothing the model emits reaches innerHTML unescaped. */
.body > :first-child{margin-top:0}
.body > :last-child{margin-bottom:0}
.body p{margin:0 0 .7em}
.body h1,.body h2,.body h3{
  margin:1.1em 0 .45em;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.01em;
}
.body h1{font-size:1.28em}
.body h2{font-size:1.16em}
.body h3{font-size:1.05em}
.body ul,.body ol{margin:0 0 .7em;padding-left:1.5em;display:flex;flex-direction:column;gap:.3em}
.body li{padding-left:.1em}
.body li::marker{color:var(--faint)}
.body blockquote{
  margin:0 0 .7em;
  padding:.15em 0 .15em .9em;
  border-left:3px solid var(--border-2);
  color:var(--dim);
}
.body hr{border:none;border-top:1px solid var(--border-2);margin:1em 0}
.body code{
  font-family:var(--mono);
  font-size:.87em;
  background:var(--code-bg);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.1em .35em;
}
.body pre{
  margin:0 0 .8em;
  padding:12px 14px;
  background:var(--code-bg);
  border:1px solid var(--border);
  border-radius:8px;
  overflow-x:auto;
}
.body pre code{
  background:none;border:none;padding:0;font-size:14.5px;line-height:1.55;
  display:block;white-space:pre;
}
.body strong{font-weight:700;color:var(--text)}
.body table{border-collapse:collapse;margin:0 0 .8em;font-size:.94em;display:block;overflow-x:auto}
.body th,.body td{border:1px solid var(--border-2);padding:.4em .7em;text-align:left}
.body th{background:var(--block-2);font-weight:700}

.think{border:1px solid var(--border-2);border-radius:7px;background:var(--block);margin-bottom:10px}
.think summary{
  cursor:pointer;padding:8px 12px;font-size:13.5px;font-weight:600;
  color:var(--faint);list-style:none;
}
.think summary::-webkit-details-marker{display:none}
.think summary::before{content:"▸ "}
.think[open] summary::before{content:"▾ "}
.think-body{
  padding:0 12px 11px;font-size:14px;line-height:1.55;color:var(--faint);
  white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);
}
.caret{
  display:inline-block;width:8px;height:16px;background:var(--accent);
  vertical-align:-3px;margin-left:2px;animation:blink 1.05s step-end infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .caret{animation:none} }

.turnstile-slot:not([hidden]){display:block}

/* ---- composer ---- */
.composer{display:flex;gap:10px;align-items:flex-end}
#input{
  flex:1;font:inherit;font-size:17px;line-height:1.5;color:var(--text);
  background:var(--block-2);border:1px solid var(--border-2);border-radius:8px;
  padding:12px 14px;resize:none;max-height:190px;min-width:0;
}
#input:focus{border-color:var(--accent);background:var(--block)}
#input::placeholder{color:var(--faint)}
.btn-primary{
  font:inherit;font-size:16px;font-weight:700;color:var(--on-accent);
  background:var(--accent);border:1px solid var(--accent);border-radius:8px;
  padding:12px 24px;cursor:pointer;flex:none;
}
.btn-primary:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}

.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;font-weight:600}
.check input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;margin:0}
.hint{font-size:14px;color:var(--faint)}
.btn-ghost{
  font:inherit;font-size:14.5px;font-weight:600;color:var(--dim);
  background:transparent;border:1px solid var(--border-2);border-radius:7px;
  padding:7px 13px;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--text)}
.stats{margin:0;font-size:13.5px;color:var(--faint);min-height:1.2em;font-variant-numeric:tabular-nums}

/* ---- banner ---- */
.banner{
  border:1px solid var(--accent);border-left-width:3px;background:var(--accent-wash);
  border-radius:8px;padding:12px 15px;font-size:15.5px;color:var(--dim);
}
.banner strong{color:var(--text)}

/* ---- foot ---- */
.foot{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--faint);padding-top:4px}
.foot p{margin:0}
.foot b{color:var(--dim)}
.foot code{font-family:var(--mono);font-size:.9em}

@media (max-width:560px){
  body{font-size:16px}
  .composer{flex-direction:column;align-items:stretch}
  .btn-primary{width:100%}
  .wordmark{font-size:18px}
  .msg.user .body{max-width:94%}
}