:root{
  --paper:#f5f4ee;
  --canvas:#efeee6;
  --ink:#26322d;
  --muted:#667068;
  --line:#d9dbd1;
  --red:#b83e2c;
  --red-soft:#f4e1d8;
  --white:#fffef9;
  --dark:#24352f;
  --serif:Georgia,'Times New Roman','Songti SC','Noto Serif CJK SC',serif;
  --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased
}
button,a,select{
  -webkit-tap-highlight-color:transparent
}
button,select{
  font:inherit;
  color:inherit
}
button,a,select{
  touch-action:manipulation
}
button{
  cursor:pointer
}
a{
  color:inherit;
  text-decoration:none
}
button{
  border:0;
  background:none
}
button:disabled{
  cursor:not-allowed;
  opacity:.42
}
button:focus-visible,a:focus-visible,select:focus-visible,[role=button]:focus-visible{
  outline:2px solid var(--red);
  outline-offset:4px
}
button:not(:disabled):active{
  transform:translateY(1px)
}
[hidden]{
  display:none!important
}
svg{
  display:block
}
button svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.site-shell{
  max-width:1480px;
  margin:auto;
  padding:0 56px
}
.site-header{
  height:94px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:32px
}
.wordmark{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:23px;
  font-weight:800;
  letter-spacing:-1.3px;
  white-space:nowrap
}
.wordmark>svg{
  width:29px;
  height:33px;
  fill:none;
  stroke:var(--red);
  stroke-width:1.4
}
.wordmark-light{
  font-weight:400;
  margin-left:5px
}
.wordmark sup{
  font-size:9px;
  vertical-align:top;
  position:relative;
  top:4px;
  margin-left:4px;
  letter-spacing:0
}
.header-caption{
  font:9px/1.7 var(--mono);
  letter-spacing:1.5px;
  max-width:180px;
  color:var(--muted)
}
.header-caption span{
  color:var(--red);
  margin:0 5px
}
.site-header nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px
}
.site-header nav a{
  padding:14px 0;
  position:relative
}
.nav-current:after{
  content:'';
  position:absolute;
  width:4px;
  height:4px;
  background:var(--red);
  border-radius:50%;
  bottom:3px;
  left:50%
}
.text-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  padding:0;
  font-size:12px;
  white-space:nowrap
}
.text-button:hover{
  color:var(--red)
}
.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:51px 0 42px
}
.eyebrow,.section-code{
  font:10px/1.5 var(--mono);
  letter-spacing:1.7px;
  margin:0;
  color:var(--muted)
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--red)
}
.red-line{
  width:24px;
  height:1px;
  background:var(--red)
}
h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(42px,4.4vw,66px);
  line-height:1.2;
  letter-spacing:-2px;
  margin:13px 0 14px
}
.headline-hex{
  position:relative
}
.headline-hex>svg{
  position:absolute;
  left:0;
  bottom:-7px;
  width:100%;
  height:8px;
  fill:none;
  stroke:var(--red);
  stroke-width:1.8
}
.headline-period{
  color:var(--red);
  margin-left:4px
}
.intro-description{
  font-size:13px;
  color:var(--muted);
  margin:15px 0 0;
  letter-spacing:.6px
}
.intro-note{
  width:238px;
  border-left:1px solid var(--line);
  padding:3px 0 3px 32px;
  position:relative
}
.edition-number{
  position:absolute;
  right:4px;
  top:4px;
  font:11px var(--mono);
  color:var(--red)
}
.intro-note p{
  font:italic 23px/1.35 var(--serif);
  margin:8px 0 13px
}
.edition-label{
  font:8px var(--mono);
  letter-spacing:1.9px;
  color:var(--muted)
}
.workspace{
  border:1px solid var(--line);
  background:rgba(255,255,255,.32);
  scroll-margin-top:20px
}
.workspace-toolbar{
  height:72px;
  padding:0 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line)
}
.mode-switch{
  display:flex;
  gap:5px;
  align-items:center;
  background:#e8e9e1;
  padding:4px;
  border-radius:7px
}
.mode-switch button{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:39px;
  padding:0 15px;
  border-radius:4px;
  font-size:12px;
  white-space:nowrap
}
.mode-switch button small{
  font:9px var(--mono);
  opacity:.68;
  margin-left:1px
}
.mode-switch button[aria-pressed=true]{
  background:var(--white);
  box-shadow:0 1px 4px #26322d0c
}
.mode-switch button svg{
  width:16px;
  height:16px
}
.workspace-options{
  display:flex;
  align-items:center;
  gap:24px
}
.workspace-options>.text-button{
  color:var(--muted)
}
.settings-button{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font:11px var(--mono)
}
.settings-button svg{
  width:16px
}
.studio-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px
}
.board-column{
  padding:26px 28px 0;
  min-width:0
}
.board-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.board-heading h2{
  font-size:19px;
  letter-spacing:.4px;
  font-weight:500;
  margin:6px 0 0
}
.board-heading .section-code{
  font-size:8px;
  letter-spacing:1.5px
}
.live-state{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.live-state i{
  width:5px;
  height:5px;
  background:#798c6b;
  border-radius:50%
}
.players{
  display:flex;
  align-items:center;
  gap:13px;
  margin:24px 0 14px
}
.player-card{
  display:flex;
  align-items:center;
  gap:11px;
  flex:1;
  min-width:0
}
.player-card>div{
  display:flex;
  flex-direction:column;
  gap:1px
}
.player-name{
  font:10px var(--mono);
  font-weight:600;
  letter-spacing:1px
}
.player-detail{
  font-size:10px;
  color:var(--muted)
}
.player-piece{
  width:29px;
  height:29px;
  border-radius:50%;
  flex:0 0 auto
}
.black-piece{
  background:radial-gradient(circle at 32% 24%,#46534b,#20342a 68%);
  box-shadow:0 2px 3px #24352f24
}
.white-piece{
  background:radial-gradient(circle at 32% 24%,white,#e9e9df);
  border:1px solid #d2d5ca;
  box-shadow:0 2px 3px #24352f14
}
.turn-badge{
  font-size:8px;
  color:var(--red);
  background:var(--red-soft);
  padding:3px 7px;
  white-space:nowrap;
  border-radius:2px
}
.versus{
  font:9px var(--serif);
  font-style:italic;
  color:#81887b;
  margin-right:10px
}
.board-stage{
  position:relative;
  background:var(--canvas);
  border:1px solid #e1e2d8;
  padding:16px 14px 11px;
  overflow:hidden
}
.board-corner{
  position:absolute;
  width:12px;
  height:12px;
  border-color:var(--red);
  opacity:.55;
  z-index:1
}
.corner-tl{
  top:-1px;
  left:-1px;
  border-top:1px solid;
  border-left:1px solid
}
.corner-br{
  bottom:-1px;
  right:-1px;
  border-right:1px solid;
  border-bottom:1px solid
}
.board-axis{
  display:block;
  text-align:center;
  font:7px/1 var(--mono);
  letter-spacing:2.2px;
  color:#737b6b
}
.board-axis span{
  margin:0 7px;
  color:var(--red)
}
.board-viewport{
  max-width:660px;
  margin:4px auto 0
}
#board{
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.hex{
  fill:#f6f5ed;
  stroke:#cbd0c1;
  stroke-width:1.1;
  transition:fill 150ms
}
.hit{
  fill:transparent;
  cursor:pointer
}
.hit:hover{
  fill:#b83e2c0c
}
.hit:focus-visible{
  stroke:var(--red);
  stroke-width:3;
  outline:none
}
.stone-black{
  fill:url(#stone-black);
  stroke:#344539;
  stroke-width:.7
}
.stone-white{
  fill:url(#stone-white);
  stroke:#c5cabc;
  stroke-width:1
}
.stone-disc{
  filter:url(#stone-shadow)
}
.last-ring{
  fill:none;
  stroke:var(--red);
  stroke-width:1.5
}
.coord-label{
  fill:#687260;
  font:10px var(--mono)
}
.edge-label{
  font:9px var(--mono);
  fill:#61705e;
  letter-spacing:1.5px
}
.goal-edge{
  stroke:#566e59;
  stroke-width:2.2;
  fill:none;
  opacity:.6
}
.goal-edge.white-edge{
  stroke:#b2a38b;
  stroke-dasharray:5 4
}
.preview-line{
  stroke:var(--red);
  stroke-width:2;
  stroke-dasharray:5 5;
  fill:none;
  opacity:.7
}
.candidate-outline{
  fill:#b83e2c0e;
  stroke:var(--red);
  stroke-width:1.6
}
.candidate-outline.secondary{
  fill:#f6f5ed;
  stroke:#a49a86;
  stroke-width:1;
  stroke-dasharray:3 2
}
.candidate-number{
  fill:var(--red);
  font:600 14px var(--mono);
  text-anchor:middle;
  dominant-baseline:central
}
.candidate-number.secondary{
  fill:#827761
}
.prediction-disc{
  fill:#f5f4ee;
  stroke:var(--red);
  stroke-dasharray:3 2;
  stroke-width:1.6
}
.win-line{
  fill:none;
  stroke:var(--red);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.board-caption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding-top:0;
  color:#626f5d;
  font-size:9px
}
.board-caption>span{
  display:flex;
  align-items:center;
  gap:5px
}
.caption-dot{
  height:4px;
  width:4px;
  border-radius:50%;
  background:var(--red)
}
.layer-button{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  min-height:35px;
  color:#596650
}
.layer-button svg{
  width:13px;
  height:13px
}
.layer-button[aria-pressed=true]{
  color:var(--red)
}
.game-notice{
  font-size:10px;
  color:var(--muted);
  min-height:35px;
  padding:10px 1px 4px
}
.board-actions{
  display:flex;
  justify-content:space-between;
  gap:9px;
  margin:7px 0 21px
}
.secondary-actions{
  display:flex;
  gap:7px
}
.outline-button,.icon-button,.primary-button{
  min-height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line);
  padding:0 13px;
  font-size:11px;
  border-radius:4px;
  transition:background 160ms,color 160ms,border-color 160ms
}
.outline-button:hover:not(:disabled),.icon-button:hover:not(:disabled){
  border-color:#899580;
  background:#eaece2
}
.icon-button{
  width:43px;
  padding:0;
  font-size:25px;
  font-weight:300
}
.icon-button svg{
  height:15px;
  width:15px
}
.primary-button{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
  padding:0 18px
}
.primary-button:hover{
  background:#405142
}
.primary-button svg{
  width:12px;
  height:12px;
  fill:currentColor;
  stroke:none
}
.history-strip{
  border-top:1px solid var(--line);
  padding:13px 0 12px
}
.history-title,.journal-footer{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.history-title .section-code{
  font-size:8px
}
.history-title .text-button{
  font-size:10px;
  min-height:30px
}
.move-strip{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:8px 1px;
  scrollbar-width:thin;
  scrollbar-color:#c6cabc transparent;
  min-height:52px
}
.move-chip{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid #dbded2;
  min-width:66px;
  white-space:nowrap;
  font:10px var(--mono);
  border-radius:3px
}
.move-chip .mini-piece{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink)
}
.move-chip .mini-piece.white{
  background:white;
  border:1px solid #bcc3b3
}
.move-chip small{
  font-size:8px;
  color:var(--muted)
}
.move-chip.latest{
  border-color:#b6bca8;
  background:#e9ebdf
}
.journal-footer{
  color:var(--muted);
  font-size:9px
}
.journal-footer .text-button{
  min-height:25px;
  font-size:9px
}
.mind-column{
  background:var(--dark);
  color:#edf0e7;
  border-left:1px solid var(--line);
  min-width:0
}
.mind-heading{
  padding:29px 24px 21px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid #ffffff14
}
.mind-heading .section-code{
  font-size:8px;
  color:#b1bdb0;
  letter-spacing:1.3px
}
.mind-heading h2{
  font-size:20px;
  font-weight:400;
  letter-spacing:.2px;
  line-height:1.4;
  margin:8px 0 0
}
.mind-heading h2 span{
  color:#df8e71;
  margin-left:2px
}
.demo-badge{
  font:8px var(--mono);
  color:#f3c4b0;
  background:#a35c3b32;
  border:1px solid #cb967a3b;
  border-radius:3px;
  padding:4px 6px;
  white-space:nowrap
}
.mind-body{
  padding:0 24px 15px
}
.decision-topline{
  display:flex;
  align-items:center;
  gap:6px;
  color:#bac8b7;
  font-size:9px;
  padding:18px 0 12px
}
.status-pulse{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b8d296
}
.decision-topline>span:last-child{
  margin-left:auto;
  font:8px var(--mono);
  color:#a5b4a2;
  letter-spacing:1px
}
.recommendation{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.small-label{
  font-size:9px;
  color:#b0beac;
  letter-spacing:.5px
}
.recommendation-move{
  display:flex;
  align-items:center;
  gap:25px
}
.recommendation-move>span{
  font:57px/.99 var(--serif);
  letter-spacing:-3px;
  margin-top:7px
}
.recommendation-move>svg{
  width:26px;
  height:26px;
  stroke:#d4a386;
  stroke-width:1.1;
  fill:none;
  margin-top:13px
}
.score-block{
  display:flex;
  flex-direction:column;
  text-align:right;
  gap:4px;
  margin-top:7px
}
.score-block strong{
  font:27px/1.1 var(--serif);
  letter-spacing:-.8px;
  color:#e9ba99
}
.score-block>span:last-child{
  font-size:8px;
  color:#aabb9f
}
.decision-reason{
  font-size:11px;
  color:#d0d9c9;
  line-height:1.8;
  margin:17px 0
}
.metric-line{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  border-top:1px solid #ffffff1a;
  border-bottom:1px solid #ffffff1a;
  padding:13px 0
}
.metric-line>div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:17px;
  border-left:1px solid #ffffff17
}
.metric-line>div:first-child{
  border-left:0;
  padding-left:0
}
.metric-line strong{
  font:17px var(--mono);
  font-weight:400;
  letter-spacing:-.5px
}
.metric-line strong small{
  font-size:9px;
  color:#bac5b5;
  letter-spacing:0
}
.metric-line span{
  font-size:8px;
  color:#aebba8
}
.subheading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:7px;
  margin:0 0 12px
}
.subheading h3{
  font-size:11px;
  font-weight:500;
  letter-spacing:.5px;
  margin:0
}
.subheading>span{
  font:8px var(--mono);
  color:#b4c0ad
}
.process-block{
  padding:20px 0 15px;
  border-bottom:1px solid #ffffff17
}
.process-steps{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:4px
}
.process-steps button{
  color:#c0cdba;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:8px;
  gap:6px;
  min-width:44px;
  min-height:56px;
  padding:0
}
.phase-icon{
  font:9px var(--mono);
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid #64775e;
  border-radius:50%;
  color:#d3dfca;
  background:#30432f;
  transition:background 180ms,border-color 180ms
}
.process-steps button[aria-pressed=true] .phase-icon{
  border-color:#daa581;
  background:#daad8d;
  color:#29392d
}
.step-link{
  height:1px;
  flex:1;
  max-width:20px;
  background:#718269;
  margin-top:14px;
  opacity:.6
}
.phase-description{
  font-size:9px;
  line-height:1.8;
  color:#b5c3ad;
  min-height:32px;
  margin:9px 0 0
}
.candidates-block{
  padding:17px 0 14px;
  border-bottom:1px solid #ffffff17
}
.candidate-list{
  display:flex;
  flex-direction:column;
  gap:5px
}
.candidate-row{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:18px 32px 1fr 33px;
  align-items:center;
  gap:8px;
  padding:10px 9px;
  width:100%;
  color:#dbe3d5;
  border:1px solid transparent;
  border-radius:3px;
  text-align:left;
  min-height:44px;
  overflow:hidden
}
.candidate-row:hover{
  border-color:#73836d
}
.candidate-row.active{
  background:#c7d4b312;
  border-color:#82956d6b
}
.candidate-row:before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:var(--bar);
  background:linear-gradient(90deg,#bdc9a50e,#bdc9a508);
  z-index:-1
}
.candidate-rank{
  font:8px var(--mono);
  color:#aab9a1
}
.candidate-coordinate{
  font:16px var(--serif);
  color:#edf0e7
}
.candidate-detail{
  font-size:9px;
  color:#bac8af
}
.candidate-score{
  font:11px var(--mono);
  text-align:right;
  color:#e4b692
}
.plan-block{
  padding:17px 0 12px
}
.plan-block .subheading .text-button{
  min-height:25px;
  font-size:8px;
  color:#d2ba9f
}
.plan-sequence{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#1c2d2526;
  border:1px solid #ffffff17;
  border-radius:4px;
  padding:10px 12px
}
.plan-step{
  display:flex;
  align-items:center;
  gap:6px
}
.plan-step>span{
  height:16px;
  width:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:7px var(--mono);
  background:#12271d;
  border:1px solid #b0ba9e;
  color:#e6eddf
}
.plan-step.white>span{
  background:#efeee5;
  color:#293a2c
}
.plan-step strong{
  font:13px var(--serif);
  font-weight:400
}
.plan-arrow{
  color:#84977a;
  font-size:11px
}
.plan-note{
  font-size:8px;
  color:#b5c1ad;
  margin:9px 0 0;
  letter-spacing:.3px
}
.mind-footnote{
  display:flex;
  gap:7px;
  border-top:1px solid #ffffff17;
  padding-top:12px;
  align-items:flex-start;
  color:#b4c0aa
}
.note-symbol{
  font:italic 9px var(--serif);
  width:12px;
  height:12px;
  border:1px solid #83947b;
  border-radius:50%;
  line-height:11px;
  text-align:center;
  flex:0 0 auto;
  margin-top:2px
}
.mind-footnote p{
  font-size:8px;
  line-height:1.8;
  margin:0
}
.mind-empty{
  min-height:570px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:35px;
  text-align:center
}
.mind-empty svg{
  width:60px;
  height:65px;
  stroke:#82957a;
  stroke-width:1;
  fill:none;
  margin-bottom:20px
}
.mind-empty h3{
  font:20px var(--serif);
  font-weight:400
}
.mind-empty p{
  font-size:12px;
  color:#bdc9b7;
  line-height:1.9
}
.mind-empty button{
  color:#e4b692
}
.research-band{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr;
  gap:31px;
  padding:49px 0 45px
}
.research-lead h2{
  font:25px/1.6 var(--serif);
  font-weight:400;
  margin:13px 0
}
.research-lead .section-code{
  font-size:8px
}
.research-item{
  padding:0 0 0 23px;
  border-left:1px solid var(--line)
}
.research-index{
  font:10px var(--mono);
  color:var(--red)
}
.research-item h3{
  font-size:13px;
  font-weight:500;
  margin:13px 0 9px
}
.research-item p{
  font-size:11px;
  line-height:1.9;
  color:var(--muted);
  margin:0
}
.research-tag{
  display:block;
  font:7px var(--mono);
  letter-spacing:1px;
  margin-top:19px;
  color:#68745f
}
.site-footer{
  border-top:1px solid var(--line);
  padding:22px 0 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font:9px var(--mono);
  letter-spacing:.4px
}
.footer-cross{
  color:var(--red);
  margin:0 9px
}
.site-footer p{
  font:italic 15px var(--serif);
  color:var(--muted);
  margin:0
}
.site-footer a{
  font-size:10px
}
.studio-dialog{
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  padding:30px;
  max-width:480px;
  width:calc(100% - 32px);
  max-height:90dvh;
  overflow:auto;
  border-radius:8px;
  box-shadow:0 30px 100px #12271d33
}
.studio-dialog::backdrop{
  background:#16221c66;
  backdrop-filter:blur(4px)
}
.dialog-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:23px
}
.dialog-heading h2{
  font:27px/1.3 var(--serif);
  margin:8px 0 0;
  font-weight:400
}
.dialog-heading .section-code{
  font-size:8px
}
.dialog-heading .icon-button{
  flex:0 0 auto
}
.field-label{
  display:block;
  font-size:12px;
  margin:17px 0 7px
}
.studio-dialog select{
  width:100%;
  min-height:46px;
  padding:10px;
  border:1px solid #bdc5b6;
  background:#faf9f3;
  border-radius:4px
}
.form-note{
  font-size:10px;
  color:var(--muted)
}
.dialog-submit{
  width:100%;
  margin-top:25px;
  min-height:47px;
  justify-content:space-between
}
.pvp-link{
  width:100%;
  margin-top:10px
}
.rule-item{
  display:flex;
  gap:17px;
  margin:21px 0
}
.rule-item>span{
  font:11px var(--mono);
  color:var(--red);
  margin-top:2px
}
.rule-item p{
  margin:0;
  font-size:13px;
  line-height:1.9
}
.rule-item strong{
  font-weight:600;
  display:block;
  margin-bottom:3px
}
.wide-button{
  width:100%;
  margin-top:15px
}
.full-history{
  max-height:50vh;
  overflow:auto;
  margin:0;
  padding-left:25px
}
.full-history li{
  font-size:13px;
  padding:8px;
  border-bottom:1px solid var(--line)
}
.toast{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  background:var(--dark);
  color:#f2f3e9;
  padding:13px 22px;
  border-radius:5px;
  z-index:100;
  max-width:calc(100% - 32px);
  font-size:12px;
  box-shadow:0 5px 25px #15251920
}
.skip-link{
  position:fixed;
  left:12px;
  top:-70px;
  padding:10px 16px;
  background:var(--white);
  z-index:200
}
.skip-link:focus{
  top:12px
}
.mobile-only{
  display:none
}
.board-column,.mind-column{
  animation:arrive 450ms ease-out both
}
.mind-column{
  animation-delay:80ms
}
@keyframes arrive{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1400px){
  .studio-grid{
    grid-template-columns:minmax(0,1fr) 370px
  }
  .mind-body{
    padding-left:28px;
    padding-right:28px
  }
  .mind-heading{
    padding-left:28px;
    padding-right:28px
  }
  .board-column{
    padding:30px 34px 0
  }
  .board-viewport{
    max-width:720px
  }
}
@media(max-width:1150px){
  .site-shell{
    padding:0 30px
  }
  .header-caption{
    display:none
  }
  .studio-grid{
    grid-template-columns:minmax(0,1fr) 320px
  }
  .board-column{
    padding:23px 20px 0
  }
  .mind-heading{
    padding:25px 19px 20px
  }
  .mind-body{
    padding:0 19px 15px
  }
  .players{
    gap:9px
  }
  .player-card{
    gap:7px
  }
  .turn-badge{
    display:none!important
  }
  .player-name{
    font-size:9px
  }
  .board-actions .primary-button{
    padding:0 12px
  }
  .workspace-toolbar{
    padding:0 20px
  }
  .workspace-options{
    gap:15px
  }
  .research-band{
    gap:22px
  }
  .research-item{
    padding-left:18px
  }
  .intro{
    padding:40px 0 34px
  }
}
@media(max-width:900px){
  .site-shell{
    padding:0 24px
  }
  .site-header{
    height:78px
  }
  .site-header nav{
    gap:18px
  }
  .studio-grid{
    grid-template-columns:minmax(0,1fr) 300px
  }
  .board-column{
    padding:21px 15px 0
  }
  .players{
    gap:5px
  }
  .player-piece{
    width:23px;
    height:23px
  }
  .player-detail{
    font-size:9px
  }
  .player-name{
    font-size:8px
  }
  .versus{
    margin-right:3px
  }
  .board-heading h2{
    font-size:17px
  }
  .live-state{
    font-size:8px
  }
  .board-actions{
    flex-wrap:wrap
  }
  .board-actions>.primary-button{
    flex:1;
    min-width:130px
  }
  .secondary-actions{
    flex:1
  }
  .outline-button{
    padding:0 9px
  }
  .research-band{
    grid-template-columns:1fr 1fr
  }
  .research-lead{
    align-self:center
  }
  .intro-note{
    width:200px;
    padding-left:22px
  }
  .intro-note p{
    font-size:21px
  }
  .intro-description{
    font-size:12px
  }
  .mode-switch button{
    padding:0 11px
  }
  .mode-switch button small{
    display:none
  }
  .workspace-options>.text-button{
    display:none
  }
}
@media(max-width:740px){
  .site-shell{
    padding:0 19px
  }
  .site-header{
    height:72px
  }
  .wordmark{
    font-size:21px;
    gap:9px
  }
  .wordmark>svg{
    width:25px
  }
  .site-header nav>a{
    display:none
  }
  .site-header nav{
    gap:0
  }
  .intro{
    padding:34px 0 29px;
    align-items:flex-start;
    gap:10px
  }
  .intro-note{
    display:none
  }
  h1{
    font-size:47px;
    letter-spacing:-2.5px;
    margin-top:12px
  }
  .eyebrow{
    font-size:8px;
    letter-spacing:1.7px
  }
  .intro-description{
    font-size:11px;
    line-height:1.9;
    letter-spacing:.2px
  }
  .studio-grid{
    grid-template-columns:1fr
  }
  .workspace-toolbar{
    height:65px;
    padding:0 12px;
    gap:8px
  }
  .mode-switch{
    gap:0
  }
  .mode-switch button{
    padding:0 10px;
    font-size:11px;
    gap:5px;
    min-height:40px
  }
  .settings-button{
    font-size:9px;
    gap:5px
  }
  .settings-button svg{
    display:none
  }
  .workspace-options{
    gap:0
  }
  .board-column{
    padding:24px 16px 0
  }
  .board-heading h2{
    font-size:20px
  }
  .board-heading .section-code{
    font-size:8px
  }
  .live-state{
    font-size:9px
  }
  .players{
    margin:22px 0 15px;
    gap:14px
  }
  .player-piece{
    width:28px;
    height:28px
  }
  .player-name{
    font-size:10px
  }
  .player-detail{
    font-size:10px
  }
  .player-card{
    gap:9px
  }
  .versus{
    margin:0 3px
  }
  .board-stage{
    padding:15px 8px 8px
  }
  .board-caption{
    font-size:8px;
    gap:3px
  }
  .board-caption>span{
    max-width:180px;
    line-height:1.5
  }
  .layer-button{
    font-size:8px;
    white-space:nowrap
  }
  .board-actions{
    margin-bottom:17px;
    flex-wrap:nowrap;
    gap:6px
  }
  .secondary-actions{
    gap:5px;
    flex:0 1 auto
  }
  .board-actions>.primary-button{
    min-width:0;
    flex:0 1 auto;
    font-size:10px;
    padding:0 10px
  }
  .outline-button{
    font-size:10px;
    padding:0 8px;
    min-height:42px
  }
  .icon-button{
    width:38px;
    min-height:42px
  }
  .mind-column{
    border-left:0;
    border-top:1px solid var(--line)
  }
  .mind-heading{
    padding:26px 24px 22px
  }
  .mind-heading h2{
    font-size:24px
  }
  .mind-body{
    padding:0 24px 20px
  }
  .decision-topline{
    padding-top:22px
  }
  .recommendation-move>span{
    font-size:66px
  }
  .score-block strong{
    font-size:30px
  }
  .decision-reason{
    font-size:12px
  }
  .metric-line{
    padding:17px 0
  }
  .metric-line strong{
    font-size:20px
  }
  .metric-line span,.small-label{
    font-size:10px
  }
  .metric-line>div{
    padding-left:22px
  }
  .process-block,.candidates-block,.plan-block{
    padding-top:22px;
    padding-bottom:19px
  }
  .subheading h3{
    font-size:13px
  }
  .subheading>span{
    font-size:9px
  }
  .process-steps button{
    font-size:10px;
    gap:8px
  }
  .phase-icon{
    width:34px;
    height:34px;
    font-size:10px
  }
  .step-link{
    max-width:none;
    margin-top:17px
  }
  .phase-description{
    font-size:10px;
    margin-top:13px
  }
  .candidate-row{
    padding:13px 10px;
    grid-template-columns:20px 36px 1fr 38px
  }
  .candidate-coordinate{
    font-size:18px
  }
  .candidate-detail{
    font-size:10px
  }
  .candidate-score{
    font-size:12px
  }
  .plan-sequence{
    padding:14px 16px
  }
  .plan-step strong{
    font-size:16px
  }
  .plan-note,.mind-footnote p{
    font-size:9px
  }
  .research-band{
    padding:34px 0;
    gap:28px 20px
  }
  .research-lead h2{
    font-size:23px
  }
  .research-item h3{
    font-size:12px
  }
  .research-item p{
    font-size:10px
  }
  .research-tag{
    font-size:6px;
    letter-spacing:.6px
  }
  .site-footer{
    flex-wrap:wrap;
    gap:14px;
    padding-bottom:24px;
    font-size:8px
  }
  .site-footer p{
    display:none
  }
  .site-footer a{
    font-size:9px
  }
  .studio-dialog{
    padding:24px
  }
  .mobile-only{
    display:block
  }
  .mind-empty{
    min-height:370px
  }
  .board-axis{
    font-size:6px;
    letter-spacing:1.5px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
}
/* Keep compact metrics together on small screens. */
.metric-line strong{
  white-space:nowrap
}
@media(max-width:740px){
  .metric-line{
    grid-template-columns:1.25fr .85fr 1fr
  }
  .metric-line>div{
    padding-left:12px
  }
  .metric-line>div:first-child{
    padding-left:0
  }
  .metric-line strong{
    font-size:18px
  }
}