:root {
  color-scheme:light;
  --bg:#f8f9f5;
  --paper:#fff;
  --ink:#263a30;
  --muted:#818980;
  --green:#28543f;
  --line:#e4e8df;
  --soft:#eef2e9;
  --gold:#b79255;
  font-family:Inter,"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-synthesis:none;
}
.service-play main {max-width:1180px;}
.service-play #practice {padding-top:28px;}
.service-play .workspace {grid-template-columns:minmax(360px,1fr) 290px;gap:36px;}
.service-play .practice-sidebar {grid-column:auto;display:flex;flex-direction:column;gap:16px;padding-top:0;}
.service-play .mission .move-progress + .move-progress {margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.service-play .exhausted {text-align:center;padding:48px 24px;}
.service-play .exhausted .primary-button {max-width:260px;margin:24px auto 0;}
.service-play .dialog-error {color:#b74a39;font-size:13px;}
.ad-slot {display:flex;justify-content:center;align-items:center;min-width:300px;min-height:271px;padding-top:20px;margin:28px 0 20px;border-top:1px solid var(--line);}
.ad-slot .kakao_ad_area {flex:none;width:300px;height:250px;}
.account-actions {margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.account-actions button {padding:7px 12px;font-size:12px;white-space:nowrap;}
.account-actions.guest-account-actions {flex-wrap:nowrap;}
#guest-language {padding:7px 8px;font-size:12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);}
#guest-language:disabled {opacity:.38;cursor:default;}
#account-name {font-size:12px;max-width:180px;overflow-wrap:anywhere;}
.auth-notice {padding:12px 16px;background:var(--soft);border-radius:8px;color:var(--green);}
.auth-dialog form,.auth-dialog form > div:not(.failure-actions) {display:flex;flex-direction:column;}
.auth-dialog label {font-size:13px;font-weight:600;margin:16px 0 6px;}
.auth-dialog input {width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--bg);color:var(--ink);font-size:16px;}
.auth-dialog small {font-size:11px;color:var(--muted);margin-top:6px;line-height:1.6;}
.auth-dialog .failure-actions {margin-top:24px;}
.auth-dialog .text-button {display:inline-block;margin-top:20px;margin-right:16px;font-size:12px;border:0;background:transparent;padding:0;}
.auth-error {color:#a13929;font-size:13px;}
.merge-policy {font-size:12px;color:var(--muted);}
@media(max-width:800px) {
  .service-play .site-header {height:auto;min-height:72px;gap:12px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;}
  .service-play .site-header nav {order:3;width:100%;margin-left:0;justify-content:center;height:36px;}
  .account-actions {gap:5px;max-width:55%;}
  .account-actions.guest-account-actions {max-width:100%;}
  .account-actions button {font-size:11px;padding:6px 9px;}
  #guest-language {font-size:11px;padding:6px;}
  #account-name {max-width:130px;}
}
@media(max-width:800px) {
  .service-play .workspace {display:flex;flex-direction:column;gap:24px;}
  .service-play .board-section,.service-play .practice-sidebar {width:100%;}
  .service-play .practice-sidebar {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .service-play .practice-sidebar .mission {grid-row:auto;grid-column:1/-1;}
  .service-play .save-note {grid-column:1/-1;}
  .ad-slot {margin-top:20px;}
}
@media(max-width:335px) {
  .ad-slot {width:300px;margin-left:calc((100% - 300px)/2);margin-right:calc((100% - 300px)/2);}
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.6;
}
button,select,input {
  font:inherit;
}
button,a,select,input {
  -webkit-tap-highlight-color:transparent;
}
button,select {
  cursor:pointer;
}
button {
  color:inherit;
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
  transition:background .15s,transform .15s;
}
button:hover:not(:disabled) {
  background:var(--soft);
}
button:disabled {
  opacity:.38;
  cursor:default;
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #a5b89a;
  outline-offset:3px;
}
a {
  color:inherit;
  text-decoration:none;
}
[hidden] {
  display:none!important;
}
.site-header {
  height:84px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:64px;
  padding:0 max(36px,calc((100vw - 1392px)/2));
  background:#fcfdf9;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
}
.brand strong {
  font-size:23px;
  letter-spacing:-1px;
}
.brand strong>span {
  font-size:14px;
  font-weight:500;
  letter-spacing:-.5px;
  margin-left:8px;
}
.brand-mark {
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--green);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:7px;
}
.brand-mark i {
  background:#eef1e5;
  border-radius:50%;
}
.brand-mark i:nth-child(2),.brand-mark i:nth-child(3) {
  opacity:.25;
}
.site-header nav {
  height:100%;
  display:flex;
  gap:32px;
}
.site-header nav a {
  display:flex;
  align-items:center;
  color:#7d867c;
  font-size:13px;
  position:relative;
}
.site-header nav a.active {
  color:var(--green);
  font-weight:700;
}
.site-header nav a.active:after {
  position:absolute;
  content:"";
  bottom:0;
  width:100%;
  height:3px;
  background:var(--green);
}
.header-note {
  margin-left:auto;
  color:#798173;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.live-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#769664;
}
main {
  max-width:1464px;
  margin:auto;
  padding:0 36px;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:40px 0 32px;
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  color:#879278;
  margin:0 0 10px;
}
h1 {
  font-size:36px;
  letter-spacing:-1.8px;
  line-height:1.4;
  font-weight:650;
  margin:0 0 8px;
}
h1>span {
  color:#9baf80;
}
.intro-description {
  color:#7b8278;
  font-size:13px;
  margin:0;
}
.record-summary {
  display:flex;
  gap:25px;
  align-items:center;
}
.record-summary>div:not(.progress-ring) {
  display:flex;
  flex-direction:column;
  gap:1px;
}
.record-summary strong {
  font-size:27px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.record-summary span {
  font-size:11px;
  color:#8a9286;
}
.stat-divider {
  height:34px;
  border-left:1px solid var(--line);
}
.progress-ring {
  width:44px;
  height:44px;
  position:relative;
  margin-left:4px;
}
.progress-ring svg {
  width:44px;
  transform:rotate(-90deg);
}
.progress-ring circle {
  fill:none;
  stroke:#e2e8dc;
  stroke-width:3;
}
.progress-ring circle+circle {
  stroke:#6a8850;
  stroke-linecap:round;
}
.progress-ring>span {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:16px;
  color:#657e55;
}
.workspace {
  display:grid;
  grid-template-columns:230px minmax(360px,1fr) 260px;
  gap:28px;
  align-items:start;
}
.panel {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
}
.library {
  padding:22px 18px 14px;
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.panel-heading h2 {
  font-size:14px;
  font-weight:650;
  margin:0;
  letter-spacing:-.5px;
}
.small-index {
  font-size:10px;
  color:#9ca493;
  font-variant-numeric:tabular-nums;
}
.library>label {
  display:block;
  font-size:11px;
  font-weight:600;
  margin-bottom:8px;
  color:#788170;
}
.library select {
  width:100%;
  height:39px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:#53604c;
  padding:0 10px;
  font-size:11px;
  margin-bottom:22px;
}
.label-note {
  font-size:10px;
  color:#a0a897;
  float:right;
  font-weight:400;
}
.segmented {
  display:flex;
  margin-bottom:22px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:3px;
  gap:3px;
  background:#fafbf8;
}
.segmented button {
  width:33.33%;
  border:0;
  background:transparent;
  border-radius:5px;
  font-size:11px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.segmented button[aria-pressed=true] {
  background:var(--green);
  color:#fff;
}
.stone-dot {
  display:inline-block;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#2d322d;
  vertical-align:middle;
  flex-shrink:0;
}
.stone-dot.white {
  background:#fff;
  border:1px solid #bdc2b7;
}
.segmented button[aria-pressed=true] .stone-dot:not(.white) {
  box-shadow:0 0 0 1px #93a084;
}
.library>label.check-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:400;
  margin:-4px 0 22px;
}
.check-label input {
  accent-color:var(--green);
  margin:0;
  width:13px;
  height:13px;
}
.list-heading {
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-bottom:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#849077;
}
.text-button {
  border:0;
  padding:0;
  background:none;
  font-size:10px;
  color:#8a937f;
}
.puzzle-list {
  min-height:225px;
  max-height:375px;
  overflow:auto;
  margin:0 -7px;
  scrollbar-width:thin;
}
.puzzle-row {
  display:flex;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  padding:11px 9px;
  gap:11px;
  margin-bottom:3px;
  align-items:center;
  border-radius:7px;
}
.puzzle-row .row-number {
  font-size:11px;
  color:#a0a794;
  width:25px;
  font-variant-numeric:tabular-nums;
}
.puzzle-row .row-body {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.row-body strong {
  font-size:12px;
  font-weight:500;
}
.row-body small {
  font-size:10px;
  color:#8d9487;
}
.puzzle-row[aria-pressed=true] {
  background:#edf2e7;
  border-color:#dce5d3;
}
.puzzle-row[aria-pressed=true] .row-number {
  color:#52713c;
}
.row-state {
  font-size:12px;
  color:#66834c;
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:12px;
}
.pagination button {
  border:0;
  background:none;
  font-size:17px;
  min-width:27px;
  min-height:28px;
}
.pagination span {
  color:#8e9784;
  font-size:10px;
}
.board-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 15px;
  min-height:65px;
}
.puzzle-tag {
  display:block;
  font-size:9px;
  letter-spacing:1.8px;
  color:#889677;
  margin-bottom:4px;
}
.board-heading h2,.board-heading h1 {
  font-size:19px;
  margin:0;
  letter-spacing:-.7px;
  font-weight:600;
}
.turn-badge {
  display:flex;
  flex-shrink:0;
  gap:7px;
  align-items:center;
  font-size:11px;
  border:1px solid #dce3d4;
  border-radius:20px;
  padding:5px 10px;
  background:#f0f4e9;
}
.board-frame {
  border-radius:10px;
  background:#e9ce9c;
  border:1px solid #d0b07c;
  box-shadow:0 3px 0 #d3b584,0 10px 28px #4f3f1910;
  position:relative;
  overflow:hidden;
  aspect-ratio:1;
}
.board-frame:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(2deg,#bd924400 0px,#bd924409 1px,#bd924400 3px,#bd924407 6px);
}
.board-viewport {
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:1;
  position:relative;
  overflow:hidden;
  overscroll-behavior:auto;
  touch-action:pan-y;
}
.board-viewport[data-zoomed="true"] {touch-action:none;overscroll-behavior:contain;}
.board-viewport>svg {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  flex-shrink:0;
  touch-action:inherit;
  transform-origin:0 0;
}
.board-zoom-controls {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:12px 0 8px;
}
.board-zoom-controls button {
  flex:0 0 44px;
  min-width:44px;
  min-height:44px;
  padding:8px;
  font-size:20px;
  line-height:1.2;
}
.board-zoom-level {
  flex:0 0 3.5em;
  text-align:center;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.board-zoom-controls [data-zoom-action="reset"] {
  flex:0 1 auto;
  padding:8px 10px;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#board {
  display:block;
  position:relative;
  user-select:none;
  outline-offset:-4px;
}
#board:focus-visible {
  outline:3px solid #789163;
}
.board-grid {
  stroke:#957b4e;
  stroke-width:.8;
}
.coordinate {
  font-size:10px;
  fill:#8d744b;
  font-family:system-ui,sans-serif;
}
.stone-black {
  fill:url(#black-stone);
  stroke:#282a27;
  stroke-width:.65;
  filter:drop-shadow(0 1.5px 1px #0005);
}
.stone-white {
  fill:url(#white-stone);
  stroke:#b5ae99;
  stroke-width:.7;
  filter:drop-shadow(0 1.5px 1px #0003);
}
.move-number {
  text-anchor:middle;
  dominant-baseline:central;
  font:500 12px system-ui;
}
.on-black {
  fill:#f7f6e9;
}
.on-white {
  fill:#53574d;
}
.last-move {
  fill:none;
  stroke:#63966b;
  stroke-width:2.2;
}
.hint-marker {
  fill:#547a3544;
  stroke:#527634;
  stroke-width:2;
  stroke-dasharray:4 3;
}
.wrong-marker {
  fill:none;
  stroke:#be5948;
  stroke-width:2.5;
}
.hover-stone {opacity:0;pointer-events:none;}
@media (hover:hover) {
  #board[aria-disabled="false"][data-input="mouse"] .board-point:hover .hover-stone {opacity:.45;}
}
#board[aria-disabled="false"]:is([data-input="touch"],[data-input="pen"]) .touch-selected .hover-stone {opacity:.45;}
.cursor-marker {
  fill:#28543f28;
  stroke:#28543f;
  stroke-width:1.5;
}
.board-loading {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
  align-items:center;
  background:#eedcbbdd;
  font-size:12px;
  color:#7b6645;
  backdrop-filter:blur(2px);
}
.loader {
  width:23px;
  height:23px;
  border:2px solid #c9b183;
  border-top-color:#627348;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}
.board-caption {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#95967f;
  margin:12px 2px 19px;
}
.board-caption>span:first-child {
  display:flex;
  align-items:center;
  gap:6px;
}
.caption-dot {
  height:4px;
  width:4px;
  background:#9aa18a;
  border-radius:50%;
}
.board-actions {
  display:grid;
  grid-template-columns:1.3fr 1fr .8fr 1.1fr;
  gap:7px;
}
.board-actions button {
  font-size:11px;
  height:39px;
  border-color:#dfe4d7;
  background:transparent;
  white-space:nowrap;
}
.board-actions button span {
  font-size:15px;
  margin:0 4px;
}
.board-actions button:last-child {
  color:#738165;
}
.practice-sidebar {
  padding-top:65px;
}
.mission {
  padding:22px;
}
.mission .eyebrow {
  font-size:9px;
  letter-spacing:1.6px;
}
.mission h2 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.8px;
  line-height:1.5;
  margin:11px 0;
}
.mission>p:not(.eyebrow) {
  font-size:11px;
  line-height:1.8;
  color:#7c8575;
  margin:0;
}
.mission-divider {
  border-top:1px solid var(--line);
  margin:22px 0 16px;
}
.move-progress {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#7b8671;
}
.move-progress strong {
  font-size:14px;
  color:#416035;
}
.muted {
  font-size:11px;
  font-weight:400;
  color:#9ba38f;
}
progress {
  display:block;
  width:100%;
  height:5px;
  border:0;
  border-radius:4px;
  margin-top:12px;
  background:#edf0e6;
  accent-color:#789861;
}
progress::-webkit-progress-bar {
  background:#edf0e6;
  border-radius:4px;
}
progress::-webkit-progress-value {
  background:#789861;
  border-radius:4px;
}
progress::-moz-progress-bar {
  background:#789861;
  border-radius:4px;
}
.session-meta {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#909983;
  margin-top:15px;
}
.session-meta strong {
  font-weight:500;
  color:#647354;
  font-variant-numeric:tabular-nums;
  margin-left:5px;
}
.feedback {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:18px 0;
  min-height:72px;
  padding:3px 5px;
}
.feedback-symbol {
  font-size:20px;
  color:#8a9d77;
  line-height:1.2;
}
.feedback strong {
  font-size:12px;
  font-weight:600;
  color:#62764f;
}
.feedback p {
  font-size:11px;
  line-height:1.7;
  color:#8c9483;
  margin:4px 0 0;
}
.feedback[data-kind=error] strong,.feedback[data-kind=error] .feedback-symbol {
  color:#af6351;
}
.feedback[data-kind=success] {
  background:#e9f0e3;
  border:1px solid #d7e2cd;
  border-radius:9px;
  padding:14px 10px;
}
.feedback[data-kind=warning] strong {
  color:#a88547;
}
.primary-button {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  background:var(--green);
  color:#fff;
  border:1px solid var(--green);
  height:44px;
  padding:0 16px;
  font-size:12px;
}
.primary-button:hover:not(:disabled) {
  background:#386349;
}
.primary-button span {
  font-size:20px;
}
.random-button {
  border:0;
  background:transparent;
  width:100%;
  font-size:11px;
  color:#849276;
  padding:12px;
}
.random-button span {
  margin-right:7px;
}
.move-log {
  margin-top:17px;
  padding:19px 17px 13px;
}
.move-log .panel-heading {
  margin-bottom:12px;
}
.move-log h2 {
  font-size:12px;
}
#move-log {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:145px;
  overflow:auto;
}
.move-chip {
  display:flex;
  gap:5px;
  align-items:center;
  background:#f5f7f1;
  border:1px solid #e8ebdf;
  font-size:10px;
  color:#6a7660;
  padding:4px 7px;
  border-radius:5px;
}
.move-chip small {
  font-size:9px;
  color:#9aa38e;
}
.move-chip .stone-dot {
  width:8px;
  height:8px;
}
.empty {
  font-size:11px;
  color:#a0a791;
  line-height:1.9;
  padding:12px 4px;
  margin:0;
}
#move-log .empty {
  font-size:10px;
  padding:7px 0;
}
.save-note {
  font-size:9px;
  color:#a2aa96;
  text-align:center;
  margin:15px 0;
}
.guide {
  margin-top:58px;
  padding:30px 0 32px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:230px 1fr 1fr 1fr;
  gap:34px;
}
.guide h2 {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.7px;
  margin:0;
}
.guide h3 {
  font-size:12px;
  font-weight:600;
  margin:0 0 10px;
}
.guide h3>span {
  font-size:9px;
  margin-right:9px;
  color:#a2ad92;
}
.guide p:not(.eyebrow) {
  font-size:11px;
  line-height:1.9;
  color:#8a927f;
  margin:0;
  max-width:270px;
}
footer {
  display:flex;
  justify-content:space-between;
  padding:18px 0 25px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:#a3aa98;
}
footer>span:first-child {
  font-weight:600;
  color:#909b83;
}
.global-error {
  padding:12px 16px;
  background:#fff0e7;
  border:1px solid #e7cabc;
  border-radius:8px;
  margin-bottom:20px;
  color:#9b584a;
  font-size:12px;
}
.replay {
  margin-top:18px;
  padding:16px;
}
.replay-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
}
.replay-controls {
  display:flex;
  align-items:center;
  gap:7px;
  margin:14px 0;
}
.replay-controls button {
  height:32px;
  min-width:32px;
  font-size:12px;
}
.replay-controls>span {
  flex:1;
  text-align:center;
  font-size:11px;
}
.sequence {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.sequence button {
  font-size:10px;
  padding:4px 7px;
}
.sequence button[aria-current=step] {
  background:var(--green);
  color:white;
  border-color:var(--green);
}
@media(min-width:1600px) {
  .intro {
    padding-top:48px;
    padding-bottom:38px;
  }
  .workspace {
    gap:34px;
  }
}
@media(max-width:1199px) {
  main {
    padding:0 24px;
  }
  .site-header {
    padding:0 24px;
  }
  .workspace {
    grid-template-columns:200px minmax(330px,1fr) 218px;
    gap:20px;
  }
  .library {
    padding:18px 14px;
  }
  .mission {
    padding:18px;
  }
  .mission h2 {
    font-size:20px;
  }
  .guide {
    grid-template-columns:200px 1fr 1fr 1fr;
    gap:20px;
  }
  .board-actions {
    gap:5px;
  }
  .board-actions button {
    font-size:10px;
  }
  .board-actions button span {
    margin:0 2px;
  }
}
@media(max-width:1000px) {
  .workspace {
    grid-template-columns:210px minmax(0,1fr);
    gap:24px;
  }
  .practice-sidebar {
    grid-column:2;
    padding-top:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .mission {
    grid-row:span 3;
  }
  .feedback {
    margin:0;
    min-height:0;
  }
  .primary-button {
    align-self:end;
  }
  .random-button {
    padding:5px;
  }
  .move-log {
    margin:0;
    grid-column:1/-1;
  }
  .save-note {
    grid-column:1/-1;
    margin:0;
  }
  .guide {
    grid-template-columns:1fr 1fr;
  }
  .guide p:not(.eyebrow) {
    max-width:none;
  }
  .board-actions button {
    font-size:11px;
  }
  .library {
    grid-row:span 2;
  }
  .puzzle-list {
    max-height:545px;
  }
}
@media(max-width:700px) {
  body {
    font-size:13px;
  }
  main {
    padding:0 18px;
  }
  .site-header {
    height:65px;
    padding:0 18px;
    gap:26px;
  }
  .brand strong {
    font-size:21px;
  }
  .brand strong>span {
    font-size:12px;
    margin-left:6px;
  }
  .brand-mark {
    width:30px;
    height:30px;
  }
  .brand {
    gap:8px;
  }
  .site-header nav {
    gap:20px;
    margin-left:auto;
  }
  .site-header nav a {
    font-size:11px;
  }
  .header-note {
    display:none;
  }
  .intro {
    padding:26px 0 24px;
    align-items:flex-start;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.2px;
  }
  h1 {
    font-size:28px;
    letter-spacing:-1.5px;
  }
  .intro-description {
    font-size:11px;
    max-width:195px;
    line-height:1.8;
  }
  .record-summary {
    gap:16px;
    padding-top:18px;
  }
  .record-summary strong {
    font-size:22px;
  }
  .record-summary>div:not(.progress-ring) {
    align-items:flex-end;
  }
  .record-summary span {
    font-size:9px;
  }
  .record-summary .progress-ring,.stat-divider,.record-summary>div:first-child {
    display:none;
  }
  .workspace {
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .board-section {
    order:0;
    width:100%;
  }
  .practice-sidebar {
    order:1;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .library {
    order:2;
    width:100%;
    padding:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:16px;
  }
  .library .panel-heading,.library .list-heading,.library .puzzle-list,.library .pagination,.library>.check-label {
    grid-column:1/-1;
  }
  .library .panel-heading {
    margin-bottom:18px;
  }
  .library>label[for=collection] {
    grid-column:1;
    grid-row:2;
  }
  .library #collection {
    grid-column:1;
    grid-row:3;
  }
  .library>label:not([for]):not(.check-label) {
    grid-column:2;
    grid-row:2;
  }
  .library .segmented {
    grid-column:2;
    grid-row:3;
  }
  .library>label[for=length-filter] {
    grid-column:1;
    grid-row:4;
  }
  .library #length-filter {
    grid-column:1;
    grid-row:5;
  }
  .library>.check-label {
    grid-column:2;
    grid-row:5;
    align-self:center;
    margin-bottom:22px;
    font-size:10px;
  }
  .library select,.segmented {
    margin-bottom:16px;
  }
  .library .label-note {
    display:none;
  }
  .puzzle-list {
    min-height:0;
    max-height:310px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 7px;
  }
  .puzzle-row {
    gap:6px;
  }
  .puzzle-row .row-number {
    width:22px;
    font-size:10px;
  }
  .row-body strong {
    font-size:11px;
  }
  .row-body small {
    font-size:9px;
  }
  .board-heading {
    padding-bottom:12px;
    min-height:56px;
  }
  .board-heading h2,.board-heading h1 {
    font-size:18px;
  }
  .board-caption {
    font-size:9px;
    margin-bottom:14px;
  }
  .board-actions {
    gap:5px;
  }
  .board-actions button {
    height:39px;
    font-size:10px;
  }
  .board-actions button span {
    font-size:13px;
    margin:0 2px;
  }
  .mission {
    padding:16px;
  }
  .mission h2 {
    font-size:20px;
    margin:9px 0;
  }
  .mission>p:not(.eyebrow) {
    font-size:10px;
  }
  .mission-divider {
    margin:16px 0 12px;
  }
  .session-meta {
    font-size:8px;
    gap:5px;
  }
  .session-meta strong {
    margin-left:3px;
  }
  .feedback {
    padding:6px 0;
    gap:7px;
  }
  .feedback strong {
    font-size:11px;
  }
  .feedback p {
    font-size:10px;
  }
  .feedback-symbol {
    font-size:17px;
  }
  .primary-button {
    font-size:11px;
  }
  .random-button {
    font-size:10px;
  }
  .move-log {
    padding:16px;
  }
  .guide {
    margin-top:35px;
    padding-top:25px;
    gap:22px;
  }
  .guide>div:first-child {
    grid-column:1/-1;
  }
  .guide>div:last-child {
    grid-column:1/-1;
  }
  .guide p:not(.eyebrow) {
    font-size:10px;
  }
  .guide h3 {
    font-size:11px;
  }
  .guide h2 {
    font-size:19px;
  }
  footer {
    font-size:9px;
  }
  .global-error {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}
.mission h2 {
  word-break:keep-all;
}
.failure-dialog {
  width:min(420px,calc(100% - 36px));
  padding:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 18px 60px #10251a33;
}
.failure-dialog::backdrop { background:#15291e66; }
.failure-dialog h2 { font-size:21px; margin:10px 0 14px; }
.failure-dialog>p:not(.eyebrow) { font-size:13px; line-height:1.8; word-break:keep-all; }
.failure-actions { display:flex; gap:10px; margin-top:24px; }
#failure-dialog .failure-actions { flex-wrap:wrap; }
#failure-dialog .failure-actions>button { flex:1 1 auto; padding:10px 12px; }
.failure-actions .primary-button { flex:1; }
.failure-actions>button:last-child { min-width:72px; background:transparent; border:1px solid var(--line); }
#failure-error { color:#af6351; }
.board-frame[data-failed=true] .last-move { stroke:#af6351; }
@media(max-width:700px) {
  .mission h2 {
    font-size:17px;
  }
}
@media(max-width:700px), (hover:none) and (pointer:coarse) {
  .board-zoom-controls {
    display:none;
  }
}
@media(max-width:360px) {
  .board-actions button {
    min-width:0;
    padding:0 3px;
    font-size:9px;
  }
  .board-actions button span {
    display:none;
  }
}

.problem-stats { padding:18px 20px; }
.problem-stats>strong { font-size:14px; color:var(--green); }
.problem-stats p { font-size:13px; margin:10px 0 6px; }
.problem-stats small { font-size:11px; color:var(--muted); line-height:1.6; }

.account-actions a {font-size:12px;padding:6px;white-space:nowrap;}