:root{--bg:#09131e;--panel:#102131;--ink:#ede9df;--muted:#a1b3c1;--accent:#79d0c6;--line:#2a4052;--light:#e3dfcf;--dark:#718b88}*{box-sizing:border-box}
/* Reserve the scrollbar gutter always. The right column's height changes while a position
   loads, and a scrollbar appearing shifts the whole layout sideways. */
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui}header{display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;border-bottom:1px solid var(--line)}header strong{font:25px Georgia;letter-spacing:2px}small{display:block;color:var(--muted);font-size:12px}button,select,input{font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px}button{cursor:pointer}button:hover{border-color:var(--accent)}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button:disabled{opacity:.5}#status{margin:12px 4vw;color:var(--muted)}main{display:grid;grid-template-columns:var(--rail,246px) minmax(420px,760px) minmax(360px,1fr);gap:24px;max-width:1720px;margin:20px auto;padding:0 24px}.board-panel,.evidence,#rail{min-width:0}h1{font:34px/1.15 Georgia;margin:10px 0 18px}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:12px}/* One line, always. The sentence scales with the column and is truncated with an ellipsis rather than
   wrapping, so the table below it never shifts down by a line. */
#report{font:clamp(12px,1.02vw,17px)/1.45 Georgia;margin:10px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-frame{display:flex;gap:8px}.eval-bar{width:8px;flex-shrink:0;background:#1a2c3d;border-radius:4px;overflow:hidden;position:relative}.eval-bar>div{position:absolute;bottom:0;left:0;width:100%;height:50%;background:var(--ink);transition:height .2s}#board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;overflow:hidden;border-radius:4px}.square{position:relative;background:var(--light);border:0;border-radius:0;padding:0;aspect-ratio:1}.square.dark{background:var(--dark)}.square img{width:88%;height:88%;pointer-events:none}.square.chosen{box-shadow:inset 0 0 0 4px var(--accent)}
/* The piece being dragged: a clone on its own fixed layer, following the mouse. It must
   not take pointer events or elementFromPoint at the drop would find this instead of the
   square underneath it. Mirrors the floating piece in static/game.js. */
.drag-piece{position:fixed;z-index:10000;pointer-events:none;transition:none;
  display:flex;align-items:center;justify-content:center}
.drag-piece img{width:88%;height:88%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
/* The square a piece has been lifted off. The piece rides the cursor instead of sitting
   here, so the tint and the chosen ring are the only things saying where it came from.
   Opacity rather than display, because removing the image would reflow the square. */
.square.dragging img{opacity:0}
.square.dragging{background:color-mix(in srgb,var(--accent) 24%,var(--light))}
.square.dark.dragging{background:color-mix(in srgb,var(--accent) 24%,var(--dark))}.square.target:after{content:'';position:absolute;inset:40%;background:#15454099;border-radius:50%}.square.last{outline:3px solid #cab653;outline-offset:-3px}.coordinate{position:absolute;font:700 clamp(8px,.85vw,11px)/1 system-ui;pointer-events:none;color:#1c3434;opacity:.85}.square.dark .coordinate{color:#eaf1ec}.coordinate.file{bottom:2px;left:3px}.coordinate.rank{top:2px;right:3px}/* Move list: a game viewer, two columns per move pair with the stored eval beside each
   ply. It lives in column three now; as a wrapping breadcrumb above the board it pushed
   the board down the page and clipped it. */
#path{max-height:230px;overflow:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:8px}
.movelist{width:100%;border-collapse:collapse;font-size:13px}
.movelist td{padding:2px 6px;border:0;vertical-align:middle}
.movelist td.num{width:34px;color:var(--muted);font-size:11px;text-align:right;background:var(--panel)}
.movelist td button{font:inherit;border:0;background:none;color:var(--ink);padding:3px 5px;border-radius:4px;min-width:52px;text-align:left}
.movelist td button:hover{background:var(--panel)}
.movelist td.here button{background:var(--accent);color:#08222b;font-weight:700}
.movelist td i{font-style:normal;font-size:11px;color:var(--muted);margin-left:6px}
.movelist-empty{margin:0;padding:12px;font-size:13px;color:var(--muted)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}.controls label{font-size:13px;color:var(--muted)}
/* The stored-evaluation strip was removed 2026-09-18: the hero above the board already
   states the number and the live panel already states the engine and depth. */
/* Play-from-here sits with Copy and wears the color of the side to move. */
#play-here{white-space:nowrap;border-width:2px}
#play-here.as-white{background:#e8e3d2;color:#12202b;border-color:#cfc8b4}
#play-here.as-white:hover{border-color:var(--accent)}
#play-here.as-black{background:#16222c;color:#e8eef5;border-color:#3d5568}
#play-here.as-black:hover{border-color:var(--accent)}
details{margin:16px 0;border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;color:var(--muted)}#fen{width:100%;font-size:11px}
/* Replies table: one row per move, one value per column, headings that sort. The old
   layout stacked rating, player and date under the move as extra lines, which meant two
   moves filled the panel. */
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-weight:400;color:var(--muted);padding:8px 6px;white-space:nowrap}
td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tr.selected{background:var(--panel)}
.replies th[data-sort]{cursor:pointer;user-select:none}
.replies th[data-sort]:hover{color:var(--ink)}
.replies th.sorted{color:var(--accent)}
.replies th[data-sort]:after{content:attr(data-arrow);margin-left:4px;font-size:10px}
.replies th.num,.replies td.num{text-align:right}
.replies td.num{font-variant-numeric:tabular-nums;color:var(--ink)}
.replies .c-move{min-width:106px;white-space:nowrap}
/* Flames: white for lines running hot for White beneath this move, black for Black.
   Deliberately loud -- this is the signal a player scans the column for. */
.flame{display:inline-flex;align-items:center;vertical-align:middle;margin-left:3px}
.flame svg{width:15px;height:15px}
.flame i{font-style:normal;font-size:9px;margin-left:1px;color:var(--muted)}
.flame.wf svg{fill:#f2ecd9;filter:drop-shadow(0 0 2px rgba(242,236,217,.45))}
.flame.bf svg{fill:#0b1219;stroke:#9fb3c2;stroke-width:1.1}
.flame.strong svg{width:18px;height:18px}
.flame.wf.strong svg{filter:drop-shadow(0 0 5px rgba(255,214,120,.85))}
.flame.bf.strong svg{stroke:#dfe8ee;filter:drop-shadow(0 0 4px rgba(120,170,220,.5))}
/* Top 20: one of the elite roster has played this move, from move 6 to ply 40.
   Sits in the flame slot and reads as a small pill, quieter than a flame because
   it states a fact rather than flagging heat. */
.t20{display:inline-flex;align-items:center;vertical-align:middle;margin-left:4px;
  font:600 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em;
  padding:2px 5px;border-radius:999px;border:1px solid var(--accent);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.replies td.c-move button{font:17px Georgia;border:0;padding:0 2px 0 0;background:none;color:var(--accent);vertical-align:baseline}
.replies .c-bar{width:34%;min-width:140px}
/* The bar labels itself; the percentages used to repeat as text underneath. */
.bar{display:flex;height:19px;min-width:120px;border-radius:3px;overflow:hidden;background:var(--line)}
.bar span{display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;overflow:hidden;white-space:nowrap}
.bar .win{background:var(--accent);color:#08222b}.bar .draw{background:#87979f;color:#141f27}.bar .loss{background:#41515c;color:#dfe8ee}.citation{font-size:12px;min-width:140px}.table-scroll{overflow:auto}
/* Hero evaluation: the glanceable verdict, sat directly above the board. The detailed
   stored/live panels live in column three, deliberately quieter, so the same number is
   never printed twice at the same weight. */
/* The page's headline: the number and the opening it belongs to, on one line above the
   board. The stored/live badge was removed from here -- the engine panel already states
   which engine and depth, and the number was being printed three times over. */
/* Fixed height, fixed number width, fixed line count. Everything in this row changes as
   you navigate -- the score, the opening name, its length -- and any of it reflowing moves
   the board underneath. A two-line clamp costs a little vertical space and buys a board
   that never jumps. */
.eval-hero{display:flex;align-items:center;gap:16px;margin:0 0 10px;height:62px}
.eval-hero strong{font:clamp(32px,3.4vw,44px)/1 Georgia;color:var(--ink);flex-shrink:0;min-width:3.6ch;font-variant-numeric:tabular-nums}
#position-title{font:clamp(17px,1.35vw,22px)/1.2 Georgia;color:var(--ink);margin:0;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#captured{display:flex;align-items:center;gap:2px;font-size:17px;line-height:1}
#captured .cap{color:#e9edf1}
#captured .cap.dark{color:#69818f}
#captured em{font-style:normal;font-size:12px;color:var(--muted);margin-left:5px}
.row-sub{display:block;color:var(--muted);font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Engine lines. The score is the thing the eye should land on, so it is a pill with real
   contrast, in tabular figures so the three rows stack into a column you can read down.
   The engine's own first choice carries the accent edge. */
.engine-pv{display:grid;grid-template-columns:86px minmax(0,1fr);column-gap:13px;row-gap:3px;
  margin:7px 0;padding:9px 11px;border-radius:10px;background:#0d1925;border:1px solid var(--line);
  transition:border-color .12s ease,background .12s ease}
.engine-pv.best{border-color:var(--accent);background:#102330;box-shadow:0 0 0 1px rgba(121,208,198,.16)}
.engine-pv:hover{border-color:var(--accent);background:#122636}
/* Tabular figures and a fixed column so the three scores stack into a readable column. */
.pv-score{grid-area:1/1;font:700 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;padding:7px 4px;border-radius:999px;text-align:center}
.pv-score.w{background:#f2ecd9;color:#10202c}
.pv-score.b{background:#070d13;color:#eef3f8;box-shadow:inset 0 0 0 1px #4a637b}
.pv-score.level{background:#283c4d;color:#d3e2ec}
.best .pv-score.w{box-shadow:0 0 14px rgba(242,236,217,.28)}
.best .pv-score.b{box-shadow:inset 0 0 0 1px #6d8ba6,0 0 14px rgba(10,16,22,.9)}
/* Forced mate: the gold ring says "mate", the fill still says whose. */
.pv-score.w.mating{box-shadow:0 0 0 2px #e2a13c,0 0 16px rgba(226,161,60,.55)}
.pv-score.b.mating{box-shadow:inset 0 0 0 1px #4a637b,0 0 0 2px #e2a13c,0 0 16px rgba(226,161,60,.55)}
.pv-depth{grid-area:2/1;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);
  letter-spacing:.08em;text-align:center}
/* Two lines of principal variation, clipped rather than wrapped into a paragraph. */
.pv-line{grid-area:1/2/3/3;align-self:center;text-align:left;font-size:13px;line-height:1.45;
  border:0;background:none;color:var(--ink);padding:0;width:100%;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-line:hover{color:var(--accent)}
.pv-line[disabled]{opacity:.5;cursor:default}
.pv-wdl{grid-column:1/-1;font-size:11px;color:var(--muted);padding-top:2px}
#engine-state{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:2px}
.live-panel .controls{margin:8px 0}
/* Wraps, because it has to. Four controls and a text field do not fit a 390px phone on
   one line: unwrapped, "Play from here" ran off the right edge and #fen collapsed to a
   20px stub, while the document reported no overflow because the row was clipping inside
   its own container rather than widening the page. The FEN keeps a floor so it stays a
   field you can select from rather than a sliver. */
.fen-block{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.fen-block #fen{min-width:170px}
.fen-label{font-size:11px;letter-spacing:.1em;color:var(--muted)}
#fen{flex:1;min-width:0;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
#fen-copied{font-size:12px;color:var(--accent);min-width:50px}
/* The way back. The site header came off this page, so this is the only door out. */
.lobby-back{display:block;text-align:right;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;margin:0 2px 6px}
.lobby-back:hover,.lobby-back:focus-visible{color:var(--accent)}
/* Game against the page's own engine: only on screen while a game is on. */
.play-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding:9px 12px;border:1px solid var(--accent);border-radius:8px;
  background:color-mix(in srgb, var(--accent) 10%, transparent)}
.play-strip[hidden]{display:none}
#play-state{font-size:13px;color:var(--ink)}
/* The left column. It held the opening navigator until 2026-10-01 and now holds the
   reader's repertoire; the #rail hooks stay because the desktop collapse and the
   narrow-screen sheet are driven off them and work at every breakpoint. */
#rail{display:flex;flex-direction:column;gap:10px}
/* The rail is always open on desktop, so the toggle only exists to summon the sheet on
   narrow screens. Showing it here too would be a button that does nothing useful. */
#rail-toggle{display:none;align-items:center;justify-content:space-between;gap:8px;width:100%}
.rail-icon{opacity:.7}
.rail-close{display:none}
.rail-title{font:20px/1.2 Georgia;letter-spacing:.5px;margin:0 0 2px;color:var(--ink)}
#rail-body{display:flex;flex-direction:column;gap:8px;min-height:0}
.rail-head{display:flex;flex-direction:column;gap:6px}
#rail-basis{margin:0 0 2px}
#rail-basis b{display:block;font:13px/1.3 system-ui;font-weight:600;color:var(--ink)}
#rail-basis small{font-size:11px}
/* Game view sits with the table it filters rather than in the rail. */
.tc-group{display:inline-flex;gap:0;margin:0 0 4px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tc-btn{border:0;border-radius:0;padding:6px 14px;font-size:12px;color:var(--muted);background:transparent}
.tc-btn+.tc-btn{border-left:1px solid var(--line)}
.tc-btn:hover{color:var(--ink);background:var(--panel)}
.tc-btn.active{background:var(--accent);color:#08222b;font-weight:600}
#status{margin:6px 0 0;font-size:11px;color:var(--muted);min-height:14px}
.rail-auto{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.rail-auto input{width:auto;padding:0}
#rail-list{overflow:auto;max-height:calc(100vh - 280px)}
/* ── Find an opening: the navigator, under the repertoire in the left column ── */
.find-panel{margin:10px 0 0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel)}
.find-panel>summary{cursor:pointer;color:var(--ink);font-size:13px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.find-panel>summary small{margin-left:auto;color:var(--muted);font-weight:400}
.find-body{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#find-search{width:100%}
/* Two scrollable lists share this column, so neither may claim the whole of it: a tall
   repertoire would otherwise push the finder off the bottom where nobody finds it. */
.find-panel #rail-list{max-height:min(46vh,460px)}
.find-panel #rail-basis{margin:0}
/* This column is 246px, not the 360px-plus the finder had in the right column, so a
   single truncated line turned "Opocensky Variation" and "Opocensky Variation,
   Traditional" into the same row. Names wrap here instead; the count stays on the
   first line because it cannot shrink. */
.find-panel #rail-list li a{align-items:flex-start}
.find-panel #rail-list li a .op-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
#rail-list li[hidden],#rail-list details[hidden]{display:none}
/* ── My repertoire: the left column ── */
#rep-who b{display:block;font:15px/1.3 Georgia;letter-spacing:.3px;color:var(--ink)}
#rep-who small{font-size:11px;color:var(--muted)}
.rep-head{font:13px/1.3 system-ui;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:4px 0 0}
.rep-sides{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rep-side-btn{flex:1;border:0;border-radius:0;padding:5px 10px;font-size:12px;color:var(--muted);background:transparent}
.rep-side-btn+.rep-side-btn{border-left:1px solid var(--line)}
.rep-side-btn:hover{color:var(--ink);background:var(--panel)}
.rep-side-btn.active{background:var(--accent);color:#08222b;font-weight:600}
.rep-empty{font-size:12px;color:var(--muted);line-height:1.5;margin:4px 0}
.rep-empty b{color:var(--ink);font-weight:600}
.rep-tools{margin:6px 0 0}
.rep-tools button{font-size:12px;padding:6px 10px}
#rep-list{overflow:auto;max-height:min(42vh,420px)}
.rep-fam{margin:0;border:0;border-top:1px solid var(--line);padding-top:0}
.rep-fam>summary{padding:7px 2px;font-size:13px;color:var(--ink);display:flex;gap:6px;align-items:baseline;cursor:pointer}
.rep-fam>summary small{margin-left:auto;color:var(--muted)}
.rep-row{display:flex;align-items:baseline;gap:6px;width:100%;text-align:left;border:0;background:none;padding:5px 6px;font-size:12.5px;color:var(--accent);border-radius:4px}
.rep-row:hover{background:var(--panel)}
.rep-row.on{background:var(--panel);color:var(--ink);font-weight:600}
.rep-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-row small{flex-shrink:0;color:var(--muted);display:inline}
.rep-tools-open{display:flex;flex-direction:column;gap:6px;padding:4px 6px 10px}
.rep-eco{font:11px/1 system-ui;letter-spacing:.08em;color:var(--muted)}
.rep-note{width:100%;font-size:12px;padding:5px 6px}
.rep-hint{font-size:11px;color:var(--muted)}
.rep-acts{display:flex;gap:6px;flex-wrap:wrap}
.rep-acts button{font-size:11px;padding:4px 8px}
/* ── The Add button, and Copy demoted beside it ── */
.rep-add{font-weight:600;white-space:nowrap}
.rep-add.saved{border-color:var(--accent);color:var(--accent)}
.fen-mini{font-size:11px;padding:5px 8px;color:var(--muted)}
.rep-undo{font-size:11px;padding:2px 7px;margin-left:6px}
/* ── Variations in the move list ── */
.movelist tr.vartr td{padding-top:0;padding-bottom:6px}
.var{display:flex;flex-direction:column;gap:3px;border-left:2px solid var(--line);padding-left:8px;margin:2px 0}
.varline{font-size:12px;line-height:1.7;color:var(--muted)}
.varline button{min-width:0!important;padding:1px 4px}
.varline .n{color:var(--muted);font-size:11px;margin-right:2px}
.subvar{color:var(--muted);opacity:.85}
.rep-mini{font-size:10px;padding:1px 6px;margin-left:4px;color:var(--muted)}
.movelist td button.on{background:var(--accent);color:#08222b;font-weight:700}
#rail-list details{margin:0;border:0;border-top:1px solid var(--line);padding-top:0}
#rail-list summary{padding:7px 2px;font-size:13px;color:var(--ink);display:flex;gap:6px;align-items:baseline}
#rail-list summary small{margin-left:auto}
.rail-move>summary b{font:15px/1.2 Georgia;letter-spacing:.5px}
.rail-family{margin-left:8px!important}
.rail-family>summary{font-size:12.5px;color:var(--muted)}
#rail-list summary small,#rail-list li a small{display:inline;color:var(--muted);margin-left:6px}
#rail-list ul{list-style:none;margin:0 0 6px;padding:0 0 0 8px}
/* One line per opening: names are long and wrapping turned the list into a wall. The
   full name is on the button's title for anything that gets clipped. */
#rail-list li a{display:flex;text-decoration:none;align-items:baseline;gap:6px;width:100%;text-align:left;border:0;background:none;padding:5px 6px;font-size:12.5px;color:var(--accent);border-radius:4px}
#rail-list li a .op-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rail-list li a small{flex-shrink:0;margin:0}
#rail-list li a:hover{background:var(--panel)}
#rail-list li a.busy .op-name{color:var(--ink);font-weight:600}
#rail-list li a.thin{opacity:.66}
/* Hot / cold: shown only where the last 30 days differ from that window's own baseline
   by more than the sample's margin of error. Most rows carry nothing, by design. */
.heat{flex-shrink:0;font-size:9px;line-height:1;opacity:.75}
.heat.hot{color:#e2a13c}
.heat.cold{color:#6ea8d8}
.heat.strong{opacity:1;font-size:11px}
/* Engine lines, played out on the board. Separated from the navigation buttons so it is
   clear they do something different: these leave the game and come back. */
.line-buttons{display:flex;gap:6px;margin-left:auto;padding-left:10px;border-left:1px solid var(--line)}
.line-btn{padding:8px 10px;font-size:13px}
.line-btn[disabled]{opacity:.4}
.line-btn.active{border-color:var(--accent);color:var(--accent)}
#line-game.previewing{border-color:var(--accent);color:var(--accent)}
@media(min-width:1181px){body.rail-closed{--rail:46px}body.rail-closed #rail-body{display:none}body.rail-closed .rail-label{display:none}}
/* Below 1180px the rail leaves the grid and becomes a sheet over the board, so the
   board keeps its full width at every size. */
@media(max-width:1180px){main{grid-template-columns:minmax(400px,1.4fr) minmax(300px,1fr)}#rail{grid-column:1/-1;flex-direction:row}#rail-toggle{display:flex;width:auto}.rail-close{display:block;align-self:flex-end}#rail-body{position:fixed;inset:0;z-index:60;background:var(--bg);padding:18px;overflow:auto;display:none}body.rail-open{overflow:hidden}body.rail-open #rail-body{display:flex}#rail-list{max-height:none}
/* In the sheet the column is the whole screen, so both lists can run their own length. */
.find-panel #rail-list,#rep-list{max-height:none}}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:24px;max-height:90vh;overflow:auto;width:min(740px,95vw)}dialog::backdrop{background:#0009}.dialog-head{display:flex;justify-content:space-between;align-items:center}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.settings-grid label{display:flex;flex-direction:column;gap:6px}.settings-grid label[hidden]{display:none}.settings-checks{display:grid;gap:10px}.engine-options{white-space:pre-wrap;font-size:12px;max-height:200px;overflow:auto}.secondary{display:block;font-size:11px;color:var(--muted)}#engine-message,#engine-stats{font-size:12px;color:var(--muted)}@media(max-width:790px){main{display:flex;flex-direction:column;gap:12px;padding:0 12px}.board-panel{display:contents}#rail{order:-1}.board-panel .eval-hero,.board-panel .board-frame,.board-panel>.nav-controls,.board-panel .fen-block{order:0}.evidence{order:1}.board-panel>.controls,.board-panel>small{order:2}.evidence h1{font-size:27px}.evidence #report{font-size:18px}.settings-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}