.fen{grid-area:fen}.chessboard{grid-area:chessboard}.info{grid-area:info}.sf{grid-area:sf}.pgn{grid-area:pgn}.bar{grid-area:bar}.grid-analysis{--analysis-board: 100vw;grid-template-columns:var(--analysis-board);grid-template-areas:"info" "chessboard" "sf" "pgn" "fen"}@media (min-width: 640px){.grid-analysis{--analysis-board: 80vw}}@media (min-width: 1024px){.grid-analysis{--analysis-gap: 16px;gap:0px 16px;--analysis-info: 150px;--analysis-bar: 24px;--analysis-right: 300px;--analysis-bottom: 44px;--analysis-board-min: 500px;--analysis-board-max: min( calc(90vw - var(--analysis-right)), calc(85vh - var(--analysis-bottom)) );--analysis-board: calc( var(--analysis-board-min) + max(0px, (var(--analysis-board-max) - var(--analysis-board-min))) * (var(--boardScale, 70) / 100) );grid-template-columns:var(--analysis-board) var(--analysis-bar) var(--analysis-right);grid-template-rows:calc(var(--analysis-board) / 2) calc(var(--analysis-board) / 2);grid-template-areas:"chessboard bar sf" "chessboard bar pgn" "fen        .   info"}}@media (min-width: 1280px){.grid-analysis{--analysis-gap: 16px;gap:var(--analysis-gap);--analysis-info: 150px;--analysis-left: 300px;--analysis-bar: 24px;--analysis-right: 300px;--analysis-bottom: 44px;--analysis-board-min: 500px;--analysis-board-max: min( calc(90vw - var(--analysis-left) - var(--analysis-right)), calc(85vh - var(--analysis-bottom)) );--analysis-board: calc( var(--analysis-board-min) + max(0px, (var(--analysis-board-max) - var(--analysis-board-min))) * (var(--boardScale, 70) / 100) );grid-template-columns:var(--analysis-left) var(--analysis-bar) var(--analysis-board) var(--analysis-bar) var(--analysis-right);grid-template-rows:var(--analysis-info) calc(var(--analysis-board) - var(--analysis-info) * 2 - var(--analysis-gap) * 2) var(--analysis-info);grid-template-areas:"info . chessboard bar sf" "pgn  . chessboard bar sf" ".    . chessboard bar sf" ".    . fen        .   ."}}