/* Editable practice-page prototype; shared Work Sans scale and white canvas. */
.practice-page { color:#302a26; background:#fff; }
.practice-intro,.practice-section { padding:64px 40px; }
.practice-preview { font-size:12px; line-height:1.7; padding:12px 16px; color:#72543d; background:#faf5ec; margin-bottom:40px; }
.practice-intro-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:80px; align-items:center; }
.practice-intro h1 { font-size:clamp(32px,3.5vw,52px); line-height:1.15; letter-spacing:-1.5px; padding:0; max-width:850px; }
.practice-lead { font-size:17px; line-height:1.85; padding:0; color:#62574f; margin:24px 0 28px; max-width:780px; }
.practice-intro .jq-btn { font-size:13px; }
.practice-map { margin:0; }
.practice-map-label { font-size:11px; line-height:1.7; letter-spacing:1px; color:#7c6756; margin-bottom:24px; }
.practice-map ol { list-style:none; margin:0; padding:0; }
.practice-map li { display:flex; align-items:start; gap:20px; padding:0 0 28px; position:relative; }
.practice-map li:not(:last-child)::before { content:''; position:absolute; top:37px; left:18px; bottom:0; border-left:2px dotted #d7c7ba; }
.practice-map li > span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; border-radius:50%; background:#f3ede7; color:#92513e; font-size:12px; }
.practice-map li:nth-child(2) > span { color:#3c7c62; background:#edf6ee; }
.practice-map li:nth-child(3) > span { color:#336b9b; background:#edf4fc; }
.practice-map li:nth-child(4) > span { color:#7b5ca0; background:#f1eafa; }
.practice-map strong { font-size:17px; font-weight:600; }
.practice-map p { padding:0; margin-top:5px; font-size:14px; color:#71665e; }
.practice-map figcaption { font-size:12px; color:#71665e; }
.practice-index { display:flex; flex-wrap:wrap; gap:12px 28px; padding:24px 40px; border-block:1px solid #eee7e1; }
.practice-index a { font-size:13px; color:#62574f; }
.practice-section { scroll-margin-top:90px; }
.practice-section-heading { margin-bottom:36px; max-width:950px; }
.practice-section-heading h2 { margin-bottom:16px; }
.practice-section-heading > p:last-child { padding:0; color:#71665e; font-size:16px; line-height:1.8; }
.practice-problem { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:64px; padding:28px 0; border-bottom:1px solid #e9e2dc; }
.practice-problem > div:first-child { display:flex; align-items:start; gap:20px; }
.practice-problem h3 { margin:0; max-width:480px; }
.practice-number { color:#92513e; font-size:12px; padding-top:5px; }
.practice-label { display:block; font-size:10px; font-weight:600; letter-spacing:1px; color:#87644e; margin-bottom:8px; }
.practice-problem p { padding:0; margin-bottom:20px; font-size:15px; line-height:1.7; }
.practice-problem p:last-child { margin:0; color:#71665e; }
.practice-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; }
.practice-options p { padding:0; font-size:15px; line-height:1.8; color:#71665e; margin-top:14px; }
.practice-outputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 64px; margin:0; }
.practice-outputs > div { border-bottom:1px solid #e9e2dc; padding:24px 0; }
.practice-outputs dt { font-size:18px; font-weight:600; margin-bottom:12px; }
.practice-outputs dd { margin:0; color:#71665e; font-size:15px; line-height:1.8; }
.practice-example { background:#faf8f5; }
.practice-example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; }
.practice-example-grid h3 { margin-bottom:12px; }
.practice-example-grid p { padding:0; line-height:1.8; color:#62574f; margin-bottom:28px; }
.practice-example-grid ul { padding-left:20px; }
.practice-example-grid li { padding:6px 0; font-size:15px; line-height:1.8; }
.practice-small,.practice-example-grid .practice-small { padding:0; font-size:12px; line-height:1.8; color:#84766c; margin-top:24px; }
.practice-method { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; list-style:none; padding:0; margin:0; counter-reset:method; }
.practice-method li { counter-increment:method; }
.practice-method li::before { content:'0' counter(method); color:#92513e; display:block; font-size:12px; margin-bottom:16px; }
.practice-method p { font-size:14px; line-height:1.8; color:#71665e; padding:0; margin-top:12px; }
.practice-operating { margin-top:40px; max-width:1000px; }
.practice-operating p { padding:0; margin-top:12px; color:#71665e; line-height:1.8; }
.practice-questions details { border-bottom:1px solid #e9e2dc; padding:22px 0; }
.practice-questions summary { font-size:17px; font-weight:500; cursor:pointer; }
.practice-questions details p { padding:20px 0 0; max-width:1000px; font-size:15px; line-height:1.9; color:#71665e; }
.practice-page a:focus-visible,.practice-questions summary:focus-visible { outline:3px solid #92513e; outline-offset:5px; }
@media(max-width:1100px) {
 .practice-intro-grid { gap:40px; }
 .practice-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .practice-method { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:800px) {
 .practice-intro,.practice-section { padding:44px 24px; }
 .practice-intro-grid,.practice-problem,.practice-example-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 .practice-index { padding:24px; }
 .practice-outputs { gap:0 28px; }
}
@media(max-width:500px) {
 .practice-options,.practice-outputs,.practice-method { grid-template-columns:minmax(0,1fr); }
 .practice-intro h1 { letter-spacing:-1px; }
 .practice-method { gap:24px; }
}