@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root { --ink:#292a2d; --muted:#77717a; --accent:#ad604b; --line:#e7e2df; --serif:'Instrument Serif',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:#fff; font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button,textarea,input { font:inherit; color:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.navigation { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 34px 0; font-size:12px; color:#716b70; }
.navigation a { display:inline-flex; align-items:center; gap:9px; min-height:32px; }
.navigation a:hover { color:var(--ink); }
.navigation a:first-child span { font-size:23px; line-height:1; }
main { width:min(1180px,100%); margin:0 auto; padding:0 38px 48px; }
.intro { text-align:center; padding-top:33px; }
h1 { margin:0; font:400 clamp(46px,4.8vw,68px)/1.05 var(--serif); letter-spacing:-.023em; }
.explorer { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); grid-template-areas:'editor brain' 'examples brain'; column-gap:clamp(36px,5vw,76px); row-gap:20px; margin:32px auto 0; }
.editor { grid-area:editor; align-self:end; padding-top:24px; }
.editor label,.examples h2 { display:block; margin:0 0 14px; font-size:12px; line-height:1.5; font-weight:400; color:var(--muted); }
.text-field { border-bottom:1px solid #d9d1cd; transition:border-color .2s; }
.text-field:focus-within { border-color:var(--accent); }
textarea { display:block; width:100%; min-height:150px; max-height:270px; padding:0 0 18px; border:0; border-radius:0; outline:none; background:transparent; resize:vertical; font:400 clamp(27px,2.4vw,34px)/1.22 var(--serif); letter-spacing:-.01em; }
textarea::placeholder { color:#a79c9a; }
textarea:focus-visible { outline:none; }
.editor-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:19px; }
.predict-button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:45px; padding:11px 20px; border:1px solid var(--ink); border-radius:25px; background:var(--ink); color:white; font-size:13px; transition:background .2s,border-color .2s; }
.predict-button:hover:not(:disabled) { background:#51413b; border-color:#51413b; }
.predict-button:disabled { background:#817974; border-color:#817974; }
.status-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; min-height:34px; padding-top:11px; font-size:12px; line-height:1.5; color:var(--muted); }
.status-line.is-error { color:#99472f; }
.examples { grid-area:examples; padding-bottom:24px; }
.examples h2 { margin-bottom:5px; }
.example-list { display:flex; flex-wrap:wrap; gap:0 20px; max-width:420px; }
.example-button { position:relative; padding:9px 0; min-height:42px; border:0; background:none; font:400 23px/1.15 var(--serif); color:#746b67; text-transform:capitalize; white-space:nowrap; }
.example-button::after { content:''; position:absolute; bottom:5px; left:0; right:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.example-button:hover::after,.example-button[aria-pressed=true]::after { transform:scaleX(1); }
.brain-panel { grid-area:brain; min-width:0; align-self:center; position:relative; }
.brain-visual { position:relative; height:360px; }
#brain { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; transition:opacity .25s; }
#brain:active { cursor:grabbing; }
.brain-panel.is-stale #brain { opacity:.48; }
.brain-loading { position:absolute; top:50%; left:0; width:100%; text-align:center; color:#978d8b; font-size:12px; pointer-events:none; }
.brain-retry { position:absolute; top:calc(50% + 30px); left:50%; transform:translateX(-50%); }
.view-controls { position:absolute; top:12px; right:0; display:flex; justify-content:flex-end; align-items:center; gap:12px; min-height:34px; }
.view-toggle { border:1px solid #ded6d1; border-radius:18px; background:white; padding:7px 15px; min-height:34px; font-size:12px; color:#746b67; }
.view-toggle:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.view-toggle:disabled { opacity:.5; }
#view-status { max-width:240px; font-size:11px; line-height:1.4; color:#99472f; }
.brain-visual.is-flat #brain { cursor:default; }
.response-controls { margin-top:-52px; transition:opacity .2s; }
.response-controls[inert] { opacity:.4; }
.readout { display:flex; justify-content:center; align-items:baseline; gap:.22em; height:36px; min-height:36px; margin:0 0 9px; text-align:center; font:400 23px/1.3 var(--serif); color:#8a7c7b; visibility:hidden; white-space:nowrap; overflow:hidden; }
.readout.is-visible { visibility:visible; }
.readout span { min-width:0; overflow:hidden; text-overflow:ellipsis; padding-bottom:5px; }
.readout .current-word { flex-shrink:0; max-width:100%; color:var(--ink); text-decoration:underline; text-decoration-color:#b87861; text-decoration-thickness:1px; text-underline-offset:4px; }
.playback { display:flex; align-items:center; justify-content:center; gap:15px; }
.play-button { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:0; border:1px solid #dcd4d0; background:white; border-radius:50%; color:#776d6b; }
.play-button:hover { border-color:var(--accent); color:var(--accent); }
.play-button svg { grid-area:1/1; width:21px; height:21px; fill:currentColor; }
.play-icon { transform:translateX(-.5px); }
.pause-icon { display:none; stroke:currentColor; stroke-width:2.2; fill:none!important; }
.play-button[aria-pressed=true] .play-icon { display:none; }
.play-button[aria-pressed=true] .pause-icon { display:block; }
.timeline { appearance:none; -webkit-appearance:none; width:min(200px,40%); height:30px; margin:0; background:transparent; cursor:pointer; accent-color:var(--accent); }
.timeline::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,#b9755f var(--played,0%),#e6dfda var(--played,0%)); border-radius:2px; }
.timeline::-moz-range-track { height:2px; background:#e6dfda; }
.timeline::-moz-range-progress { height:2px; background:#b9755f; }
.timeline::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:9px; height:9px; border:0; border-radius:50%; background:#b9755f; margin-top:-3.5px; }
.timeline::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#b9755f; }
.text-button { min-height:30px; padding:4px 0; border:0; background:none; color:#746b67; font-size:12px; white-space:nowrap; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
.text-button:hover,.text-button[aria-pressed=true] { color:var(--accent); text-decoration-color:currentColor; }
.activation-legend { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; width:190px; margin:15px auto 0; font-size:10px; line-height:1.3; color:#746e6c; }
.legend-scale { grid-column:1/-1; height:3px; border-radius:3px; background:linear-gradient(90deg,#3c83c4,#f5f3f2 50%,#e86632); }
.activation-legend span:last-child { text-align:right; }
.play-button:disabled,.timeline:disabled,.whole-button:disabled { opacity:.4; cursor:default; }
.compare { display:flex; flex-direction:column; align-items:center; margin-top:14px; text-align:center; }
.compare .text-button:disabled { opacity:.5; cursor:default; }
.compare-panel { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 16px; max-width:100%; }
.compare-note { max-width:330px; margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
.name-baseline,.name-current { font-weight:600; }
.name-baseline { color:#2f6fa8; }
.name-current { color:#c4532a; }
.mode-button .name-baseline,.mode-button .name-current { display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; font-weight:500; }
.example-button.is-baseline { color:#2f6fa8; }
.example-button.is-compared { color:#c4532a; }
.example-button.is-baseline::after,.example-button.is-compared::after { transform:scaleX(1); }
.compare-modes { display:inline-flex; padding:2px; border:1px solid #ded6d1; border-radius:18px; }
.mode-button { min-height:30px; padding:5px 12px; border:0; border-radius:15px; background:none; font-size:12px; color:#746b67; }
.mode-button:hover { color:var(--accent); }
.mode-button[aria-pressed=true] { background:#f4eeeb; color:var(--ink); }
@media(min-width:1200px) and (min-height:950px) { .intro { padding-top:50px; } .explorer { margin-top:48px; } .brain-visual { height:400px; } }
@media(min-width:801px) and (max-height:850px) {
  .intro { padding-top:20px; }
  h1 { font-size:58px; }
  .explorer { margin-top:18px; row-gap:10px; }
  .editor { padding-top:0; }
  textarea { min-height:126px; font-size:29px; }
  .brain-visual { height:310px; }
}
@media(max-width:800px) {
  .navigation { padding:17px 22px 0; }
  main { padding:0 24px; }
  .intro { padding-top:24px; }
  h1 { font-size:50px; }
  .explorer { column-gap:30px; }
  .brain-visual { height:300px; }
  .example-list { column-gap:17px; }
  .example-button { font-size:22px; }
}
@media(max-width:620px) {
  .navigation { font-size:11px; }
  main { padding:0 24px; }
  .intro { padding-top:24px; }
  h1 { font-size:clamp(38px,10.7vw,49px); line-height:1.06; }
  .explorer { grid-template-columns:minmax(0,1fr); grid-template-areas:'editor' 'brain' 'examples'; margin-top:29px; row-gap:8px; }
  .editor { padding-top:0; }
  .editor label { margin-bottom:10px; font-size:11px; }
  textarea { min-height:119px; font-size:29px; padding-bottom:13px; }
  .editor-actions { margin-top:14px; }
  .predict-button { min-height:43px; padding:9px 18px; }
  .status-line { min-height:29px; padding-top:8px; font-size:11px; }
  .brain-visual { height:275px; }
  .view-controls { top:0; }
  .response-controls { margin-top:-37px; }
  .readout { font-size:21px; height:34px; min-height:34px; margin-bottom:6px; }
  .activation-legend { margin-top:13px; }
  .examples { padding:28px 0 0; }
  .examples h2 { font-size:11px; }
  .example-list { max-width:none; column-gap:23px; }
  .example-button { min-height:44px; font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }