.course-training-board{aspect-ratio:1;isolation:isolate;user-select:none;background:#1c1713;width:100%;position:relative}.course-board-background{z-index:0;object-fit:cover;image-rendering:auto;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.course-board-square{z-index:2;appearance:none;background:0 0;border:0;border-radius:0;outline:none;width:12.5%;height:12.5%;padding:0;position:absolute}.course-board-square:before{z-index:0;content:"";pointer-events:none;border-radius:16%;transition:background-color .12s,box-shadow .12s;position:absolute;inset:5%}.course-board-square[data-selected]:before{background:#22c55e57;box-shadow:inset 0 0 0 3px #15803db8}.course-board-square[data-expected]:before{box-shadow:inset 0 0 0 4px #4ade8080}.course-board-square[data-invalid]:before{background:#ef44446b;box-shadow:inset 0 0 0 4px #b91c1cbf}.course-board-square:focus-visible:before{box-shadow:inset 0 0 0 4px #ffffffe6,0 0 0 3px #f97316e6}.course-board-piece{z-index:3;object-fit:contain;image-rendering:auto;touch-action:none;cursor:grab;filter:none;will-change:transform;width:100%;height:100%;display:block;position:relative}.course-board-piece:active{cursor:grabbing}.course-board-arrow{z-index:5;pointer-events:none;filter:drop-shadow(0 3px 4px #15803d3d);width:100%;height:100%;position:absolute;inset:0;overflow:visible}.course-board-arrow line{stroke:#4ade80;stroke-width:1.8px;stroke-linecap:round;opacity:.96}.course-board-arrow polygon{fill:#4ade80;opacity:.96}.course-board-ranks,.course-board-files{z-index:6;color:#1c17138a;pointer-events:none;font-size:clamp(.55rem,1vw,.72rem);font-weight:700;line-height:1;display:flex;position:absolute}.course-board-ranks{inset-block:.4rem;flex-direction:column;justify-content:space-between;left:.35rem}.course-board-files{inset-inline:.55rem;justify-content:space-between;bottom:.35rem}.course-preview-control{border-radius:.75rem;justify-content:center;align-items:center;min-height:2.5rem;font-size:1.15rem;transition:color .15s,background-color .15s,opacity .15s;display:inline-flex}.course-preview-control:hover:not(:disabled){color:var(--foreground);background:color-mix(in srgb, var(--muted) 70%, transparent)}.course-preview-control:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.course-preview-control:disabled{cursor:not-allowed;opacity:.35}.course-completion-confetti{z-index:20;pointer-events:none;position:absolute;inset:0;overflow:hidden}.course-completion-confetti span{background:var(--confetti-color);opacity:0;width:.55rem;height:1rem;animation:course-confetti-fall var(--confetti-duration) cubic-bezier(.2, .72, .35, 1) var(--confetti-delay) forwards;border-radius:.125rem;position:absolute;top:-1.25rem}.course-completion-confetti span:nth-child(3n){border-radius:999px;width:.8rem;height:.8rem}.course-completion-confetti span:nth-child(2n){transform:rotate(45deg)}@keyframes course-confetti-fall{0%{opacity:0;transform:translateY(-1rem)rotate(0)}10%{opacity:1}to{opacity:0;transform:translate3d(var(--confetti-drift), 38rem, 0) rotate(620deg)}}@keyframes course-completion-enter{0%{opacity:0;transform:translateY(.75rem)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.course-completion-content{animation:.36s cubic-bezier(.2,.8,.2,1) both course-completion-enter}.course-completion-icon{color:#fff;background:#f97316;box-shadow:0 10px 28px #f9731640,0 0 0 8px #f9731617}.course-completion-copy{line-height:2.2}.course-completion-count{color:#c2410c;vertical-align:middle;background:#ffedd5;border:1px solid #fdba74;border-radius:999px;justify-content:center;align-items:center;min-width:3.25rem;min-height:2.35rem;margin:0 .35rem;padding:.1rem .6rem;font-size:1.35rem;font-weight:900;line-height:1;display:inline-flex}.course-completion-cta{color:#fff;background:#f97316;box-shadow:0 8px #c2410c,0 14px 28px #f9731638}.course-completion-cta:hover{background:#ea580c}.course-completion-stores a{border-radius:.5rem;justify-content:center;align-items:center;min-height:2.75rem;transition:opacity .15s,transform .15s;display:inline-flex}.course-completion-stores a:hover{opacity:.84;transform:translateY(-1px)}.course-completion-stores a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.dark .course-completion-count{color:#fdba74;background:#9a34124d;border-color:#fb923c73}@media (prefers-reduced-motion:reduce){.course-board-square:before,.course-preview-control,.course-completion-content{transition:none;animation:none}.course-completion-confetti{display:none}}.course-detail-hero{background:linear-gradient(#2b211b0d 1px, transparent 1px), linear-gradient(90deg, #2b211b0d 1px, transparent 1px), var(--showcase-canvas-soft);background-size:64px 64px;border-bottom:3px solid var(--showcase-line)!important}.course-detail-hero nav{max-width:90rem;margin-inline:auto}.course-preview-island{align-items:stretch}.course-preview-board-shell{transform:rotate(-.35deg);border:3px solid var(--showcase-line)!important;box-shadow:0 12px 0 var(--showcase-line)!important}.course-preview-panel{color:var(--showcase-ink);border-radius:28px;border:1px solid var(--showcase-line-soft)!important;background:var(--showcase-surface)!important;box-shadow:0 6px 0 var(--showcase-card-shadow)!important}.course-preview-panel .course-panel-heading h1{letter-spacing:-.05em;font-size:clamp(1.8rem,2.5vw,2.5rem);line-height:1.08}.course-panel-heading{border-color:var(--showcase-line-soft);padding:clamp(1.25rem,2.3vw,2rem)}.course-panel-heading p{color:var(--showcase-ink-muted)}.course-panel-heading button{color:color-mix(in srgb, var(--showcase-orange) 65%, var(--showcase-ink));text-underline-offset:4px;min-height:36px}.course-panel-heading button:hover{text-decoration:underline}.course-panel-stats>div{border:1px solid var(--showcase-line-soft);background:var(--showcase-canvas);box-shadow:none;padding:.5rem .8rem}.course-panel-stats svg{color:color-mix(in srgb, var(--showcase-orange) 70%, var(--showcase-ink))}.course-panel-complete{background:color-mix(in srgb, var(--showcase-orange) 5%, var(--showcase-surface));padding:1.75rem 1.5rem}.course-preview-panel .course-completion-content{max-width:25rem;padding:0}.course-completion-emblem{width:88px;height:88px;margin-inline:auto;position:relative}.course-completion-emblem img{object-fit:contain;width:100%;height:100%}.course-completion-emblem>span{border:2px solid var(--showcase-surface);background:var(--showcase-success);color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;display:grid;position:absolute;bottom:3px;right:-2px}.course-preview-panel .course-completion-content h2{color:color-mix(in srgb, var(--showcase-orange) 78%, var(--showcase-ink));letter-spacing:-.045em;margin-top:.8rem;font-family:Georgia,serif;font-size:clamp(2rem,2.7vw,2.75rem);font-style:italic;font-weight:500;line-height:1.1}.course-preview-panel .course-completion-copy{max-width:21rem;color:var(--showcase-ink-muted);text-wrap:pretty;margin-top:.9rem;font-size:1rem;font-weight:400;line-height:1.85}.course-preview-panel .course-completion-count{background:color-mix(in srgb, var(--showcase-orange) 13%, var(--showcase-surface));min-width:0;min-height:0;color:var(--showcase-ink);border:0;border-radius:6px;margin-inline:.2rem;padding:.1rem .35rem;font-size:1.2rem;font-weight:800}.course-preview-panel .course-completion-cta{background:var(--showcase-orange);color:#17120f;border:2px solid #30251d;border-radius:999px;min-height:54px;margin-top:1.5rem;font-size:.95rem;font-weight:800;box-shadow:0 5px #a83f00}.course-preview-panel .course-completion-cta:active{box-shadow:0 2px #a83f00}.course-preview-panel .course-completion-stores{gap:.65rem;margin-top:1.4rem}.course-preview-panel .course-completion-stores a{border:1px solid var(--showcase-line-soft);min-width:0;min-height:59px;color:var(--showcase-ink);background:var(--showcase-surface);text-align:left;border-radius:16px;flex:1;justify-content:flex-start;gap:.65rem;padding:.65rem .85rem}.course-completion-stores svg{flex:none}.course-completion-stores span{flex-direction:column;gap:.15rem;display:flex}.course-completion-stores small{color:var(--showcase-ink-muted);font-size:.65rem;line-height:1.2}.course-completion-stores strong{letter-spacing:-.025em;font-size:.9rem;font-weight:650;line-height:1.2}.course-preview-panel .course-completion-stores a:hover{opacity:1;border-color:var(--showcase-orange);background:var(--showcase-canvas)}.course-panel-comment{border:1px solid var(--showcase-line-soft);background:var(--showcase-canvas);border-radius:18px;margin:1rem;padding:1rem}.course-panel-comment p{color:var(--showcase-ink);font-size:.95rem;font-weight:500;line-height:1.65}.course-panel-heading button:focus-visible,.course-completion-stores a:focus-visible{outline:3px solid var(--showcase-orange);outline-offset:3px}@media (width<=380px){.course-panel-complete{padding-inline:1rem}.course-preview-panel .course-completion-stores a{gap:.45rem;padding:.55rem}.course-completion-stores strong{font-size:.8rem}}.course-detail-introduction{padding-block:clamp(5rem,9vw,9rem);position:relative}.course-detail-introduction:before{background:var(--showcase-orange);content:"";height:.8rem;position:absolute;inset:0 0 auto}.course-detail-introduction>div>div:first-child h2{font-size:clamp(2.8rem,3.8vw,4.2rem);line-height:.96}.course-chapter-card{box-shadow:0 12px 0 var(--showcase-line);border:3px solid var(--showcase-line)!important;background:var(--showcase-canvas-soft)!important}.course-chapter-card>ol>li{border:2px solid var(--showcase-line)!important;box-shadow:0 6px 0 var(--showcase-line)!important}@media (width<=1023px){.course-preview-board-shell,.course-preview-panel{transform:none}}@media (width<=767px){.course-detail-hero{padding-top:7rem}.course-preview-board-shell{box-shadow:0 8px 0 var(--showcase-line)!important;border-width:2px!important}.course-chapter-card{box-shadow:0 8px 0 var(--showcase-line);border-width:2px!important;border-radius:1.35rem!important}}
