.practice-page{min-height:calc(100svh - 66px);color:var(--color-ink-950);background:radial-gradient(circle at 83% 9%,#c9963e2e,#0000 25rem),radial-gradient(circle at 12% 78%,#35705d1f,#0000 30rem),linear-gradient(135deg,#fbf7ee,#efe2cd);padding:clamp(36px,6vw,76px) max(18px,50vw - 590px) 88px}.practice-hero{grid-template-columns:minmax(0,.86fr) minmax(360px,.72fr);align-items:center;gap:clamp(42px,7vw,94px);max-width:1180px;margin:0 auto;display:grid}.practice-hero__copy{max-width:590px}.practice-eyebrow,.practice-section-heading>p{color:var(--color-red-700);letter-spacing:var(--tracking-label);margin:0 0 13px;font-size:.7rem;font-weight:880}.practice-hero h1{max-width:650px;font-family:var(--font-display);font-size:var(--page-title-size);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);word-spacing:var(--word-spacing-heading);margin:0}.practice-lead{max-width:540px;color:var(--color-ink-600);font-size:clamp(.98rem,1.5vw,1.08rem);line-height:var(--leading-body);margin:24px 0 0}.practice-actions{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.practice-action{border:1px solid var(--color-line-strong);min-height:48px;color:var(--color-ink-900);transition:transform var(--motion-fast), background var(--motion-fast), color var(--motion-fast);border-radius:999px;justify-content:center;align-items:center;gap:14px;padding:0 21px;font-size:.82rem;font-weight:820;text-decoration:none;display:inline-flex}.practice-action:hover{transform:translateY(-2px)}.practice-action--primary{color:#fffaf0;background:#18241f;border-color:#18241f;box-shadow:0 13px 28px #18241f2e}.practice-action--primary:hover{border-color:var(--color-jade-700);background:var(--color-jade-700)}.practice-action--quiet{background:#fffdf89e}.practice-benefits{color:var(--color-ink-600);flex-wrap:wrap;gap:9px 18px;margin:24px 0 0;padding:0;font-size:.72rem;font-weight:720;list-style:none;display:flex}.practice-benefits li:before{color:var(--color-jade-600);content:"✓";margin-right:7px}.practice-board-card{width:min(100%,430px);color:var(--color-paper-100);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:radial-gradient(circle at 74% 8%,#c9963e29,#0000 14rem),linear-gradient(145deg,#173027,#0d1915 72%);border:1px solid #dab4673d;border-radius:25px;justify-self:end;padding:13px 13px 15px;position:relative;overflow:hidden;box-shadow:0 32px 72px #231a1147,inset 0 1px #fff6da14}.practice-board-card:before{z-index:-1;content:"";background:linear-gradient(135deg,#fff6da0d,#0000 40%);position:absolute;inset:0}.practice-board-card__topline{letter-spacing:.14em;justify-content:space-between;align-items:center;padding:2px 5px 11px;font-size:.58rem;font-weight:880;display:flex}.practice-board-card__topline>span{color:#ebdcbea6}.practice-board-card__topline strong{color:var(--color-gold-200);letter-spacing:0;align-items:center;gap:6px;display:inline-flex}.practice-board-card__topline strong:before{aspect-ratio:1;content:"";background:#57977e;border-radius:50%;width:6px;box-shadow:0 0 0 4px #57977e1f}.practice-board-card__board{border-radius:16px;overflow:hidden}.practice-board-card__board .xiangqi-board{width:100%;box-shadow:0 16px 34px #02080561}.practice-board-card>p{color:#ebdcbe9e;text-align:center;margin:12px 5px 0;font-size:.68rem;font-weight:680}.practice-modes{max-width:1180px;margin:clamp(72px,9vw,118px) auto 0}.practice-section-heading h2{max-width:620px;font-family:var(--font-display);letter-spacing:var(--tracking-heading);margin:0;font-size:clamp(1.8rem,3.3vw,2.7rem)}.practice-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;display:grid}.practice-mode{min-height:190px;transition:border-color var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out);background:#fffdf8b8;border:1px solid #47352724;border-radius:23px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:clamp(22px,3vw,31px);display:grid;box-shadow:0 16px 42px #3e2b1b14}.practice-mode:hover,.practice-mode:focus-within{border-color:#35705d61;transform:translateY(-2px);box-shadow:0 20px 48px #3e2b1b1f}.practice-mode--ready{background:linear-gradient(135deg,#eef7f2e6,#fffaf0cc);border-color:#35705d45}.practice-mode--soon{color:var(--color-ink-700)}.practice-mode--bot{background:linear-gradient(135deg,#fff9eeeb,#f5e8d2d1);border-color:#985d3438}.practice-mode__mark{aspect-ratio:1;width:58px;color:var(--color-jade-700);transition:border-color var(--motion-normal) var(--ease-out), color var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out);background:#fff9;border:1px solid #35705d3b;border-radius:18px;place-items:center;display:grid;box-shadow:inset 0 1px #ffffffbd}.practice-mode__mark--bot{color:var(--color-gold-700);background:linear-gradient(145deg,#fffdf8db,#f7ebcb9e);border-color:#aa772947}.practice-mode__mark--board{color:var(--color-jade-700);background:linear-gradient(145deg,#ffffffc2,#dcece594);border-color:#35705d3d}.practice-mode:hover .practice-mode__mark,.practice-mode:focus-within .practice-mode__mark{border-color:currentColor;transform:translateY(-1px)scale(1.025)}.practice-mode__mark svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;width:32px;height:32px}.practice-mode__mark-eye{fill:currentColor;stroke:none}.practice-mode__mark-piece{fill:var(--color-paper-0);stroke-width:1.4px}.practice-mode__mark-move{stroke-width:1.8px}.practice-mode span{color:var(--color-red-700);letter-spacing:.13em;font-size:.57rem;font-weight:880}.practice-mode h3{font-family:var(--font-display);letter-spacing:-.025em;margin:5px 0 7px;font-size:1.24rem}.practice-mode p{max-width:390px;color:var(--color-ink-600);margin:0;font-size:.78rem;line-height:1.55}.practice-mode__start,.practice-mode__status{letter-spacing:0;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;min-height:39px;padding:0 15px;font-size:.7rem;font-weight:820;display:inline-flex}.practice-mode__start{color:#fff;transition:transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);background:#151b18;gap:9px;text-decoration:none;box-shadow:0 8px 18px #151b1824}.practice-mode__start:hover{background:#2d5f4d;transform:translateY(-1px);box-shadow:0 11px 22px #1e4b3a2e}.practice-mode .practice-mode__status{color:var(--color-ink-500);background:#47352712}.practice-mode__actions{justify-items:end;gap:9px;min-width:190px;display:grid}.practice-difficulty-slider{--difficulty-color:#b48a3e;--difficulty-progress:50%;gap:4px;width:190px;display:grid}.practice-difficulty-slider.is-easy{--difficulty-color:#4c8870;--difficulty-progress:0%}.practice-difficulty-slider.is-hard{--difficulty-color:#a4473f;--difficulty-progress:100%}.practice-difficulty-slider input{appearance:none;cursor:grab;background:0 0;width:100%;height:22px;margin:0}.practice-difficulty-slider input:active{cursor:grabbing}.practice-difficulty-slider input::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--difficulty-color) 0 var(--difficulty-progress), #50403029 var(--difficulty-progress) 100%);border-radius:999px;height:6px}.practice-difficulty-slider input::-webkit-slider-thumb{appearance:none;background:var(--difficulty-color);border:4px solid #fffaf0;border-radius:50%;width:20px;height:20px;margin-top:-7px;box-shadow:0 2px 8px #2d1f1240}.practice-difficulty-slider input::-moz-range-track{background:#50403029;border-radius:999px;height:6px}.practice-difficulty-slider input::-moz-range-progress{background:var(--difficulty-color);border-radius:999px;height:6px}.practice-difficulty-slider input::-moz-range-thumb{background:var(--difficulty-color);border:4px solid #fffaf0;border-radius:50%;width:12px;height:12px;box-shadow:0 2px 8px #2d1f1240}.practice-difficulty-slider input:focus-visible{outline:2px solid color-mix(in srgb, var(--difficulty-color), transparent 45%);outline-offset:4px;border-radius:999px}.practice-difficulty-slider>div:first-of-type{color:var(--color-ink-500);justify-content:space-between;display:flex}.practice-difficulty-slider>div:first-of-type span{color:inherit;letter-spacing:0;font-size:.54rem;font-weight:760}.practice-difficulty-slider>div:first-of-type .is-selected,.practice-difficulty-slider__choice{color:var(--difficulty-color)}.practice-difficulty-slider__choice{justify-self:end;font-size:.58rem;font-weight:850}@media (max-width:900px){.practice-hero{grid-template-columns:1fr}.practice-board-card{justify-self:center;width:min(100%,480px)}.practice-mode-grid{grid-template-columns:1fr}}@media (max-width:560px){.practice-page{padding-inline:14px;padding-bottom:56px}.practice-hero h1{font-size:var(--page-title-mobile-size)}.practice-actions,.practice-action{width:100%}.practice-benefits{display:grid}.practice-mode{grid-template-columns:auto minmax(0,1fr)}.practice-mode__mark{border-radius:16px;width:54px}.practice-mode__mark svg{width:29px;height:29px}.practice-mode__start,.practice-mode__status,.practice-mode__actions,.practice-difficulty-slider{grid-column:1/-1}.practice-mode__actions{justify-items:stretch;width:100%}.practice-difficulty-slider{width:100%}}@media (prefers-reduced-motion:reduce){.practice-mode,.practice-mode__mark{transition:none}.practice-mode:hover,.practice-mode:focus-within,.practice-mode:hover .practice-mode__mark,.practice-mode:focus-within .practice-mode__mark{transform:none}}