.learn-head{border-block-end:1px solid var(--hairline);flex-direction:column;align-items:flex-start;padding-block-end:48px;display:flex}.learn-head>*{max-inline-size:var(--read-measure)}.learn-head .page-title{overflow-wrap:anywhere;max-inline-size:22ch;margin-block-end:16px}.learn-head .level-play{margin-block-start:32px}.learn-definition{letter-spacing:-.01em;margin:0;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.55}.learn-page h2,.vs-page h2,.learn-index h2{letter-spacing:-.028em;margin:0 0 16px;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem)}.learn-lead{max-inline-size:var(--read-measure);color:var(--silk-muted);margin:0 0 16px}.learn-board,.vs-case,.learn-body,.learn-columns{margin-block-start:64px}.vs-figures{margin-block-start:48px}.learn-switch{border:1px solid var(--border);border-radius:var(--radius-m);background:var(--mask-sunken);flex-wrap:wrap;gap:4px;max-inline-size:100%;margin:0 0 16px;padding:4px;display:inline-flex}.learn-switch label{border-radius:var(--radius-s);min-block-size:44px;max-inline-size:100%;color:var(--silk-muted);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;--press-opacity:1;transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);flex:auto;align-items:center;gap:8px;padding:8px 14px;display:inline-flex;position:relative}.learn-switch label:has(input:checked){background:var(--mask-raised);color:var(--silk);box-shadow:var(--shadow-1), 0 0 0 1px var(--border);font-weight:600}.learn-switch label:active{background:color-mix(in srgb, var(--silk) 8%, var(--mask-raised))}@media (hover:hover) and (pointer:fine){.learn-switch label:not(:has(input:checked)):hover{color:var(--silk)}}.learn-switch label:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}.learn-switch input{opacity:0;block-size:1px;inline-size:1px;margin:0;position:absolute}.learn-switch span{overflow-wrap:anywhere;align-items:center;gap:10px;min-inline-size:0;display:inline-flex}.learn-switch span:before{content:"";background:color-mix(in srgb, var(--silk) 22%, transparent);border-radius:50%;flex-shrink:0;block-size:8px;inline-size:8px}.learn-switch label:has(input:checked) span:before{background:var(--copper-hot);box-shadow:0 0 8px var(--glow)}.learn-states{grid-template-columns:minmax(0,1fr);gap:24px;display:grid}.learn-state{min-inline-size:0;margin:0}.learn-state figcaption{color:var(--silk-muted);margin-block-start:10px}.learn-state .level-board-art svg{max-block-size:min(60vh,460px)}.learn-board:has(input[value=a]:checked) .learn-state[data-state=b],.learn-board:has(input[value=b]:checked) .learn-state[data-state=a]{display:none}.learn-results td span{display:inline}.learn-results td .learn-verdict{color:var(--silk-muted);font-size:var(--micro);letter-spacing:.02em;vertical-align:1px;align-items:center;gap:4px;margin-inline-start:10px;font-weight:600;display:inline-flex}.learn-results .learn-verdict svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:12px;inline-size:12px}.learn-results td[data-pass=true] .learn-verdict{color:var(--ok)}.learn-results td[data-pass=false] .learn-verdict{color:var(--hot)}.learn-results thead th{white-space:normal;vertical-align:bottom;min-inline-size:6rem}.learn-results th[scope=row]{color:var(--silk);white-space:normal;font-weight:600}@container (width<=599px){.learn-results thead th{white-space:normal;vertical-align:bottom;min-inline-size:6rem}.learn-results th[scope=row]{margin-block-end:4px;display:block}.learn-results td:first-of-type{font-weight:400}.learn-results td:empty{display:none}}.learn-columns{grid-template-columns:minmax(0,1fr);align-items:start;gap:32px;display:grid}.learn-numbers{min-inline-size:0;max-inline-size:var(--read-measure)}.learn-numbers .read-table{margin-block-start:0}.learn-numbers th[scope=row]{color:var(--silk);white-space:normal;font-weight:400}.learn-numbers .learn-num{font-family:var(--font-mono);text-align:end;white-space:nowrap}.learn-results td{font-variant-numeric:tabular-nums}.learn-figure{min-inline-size:0}.learn-links ul{flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none;display:flex}.learn-links li{min-inline-size:0;max-inline-size:100%}.learn-links ul .read-link{border:1px solid var(--border);background:var(--mask-raised);min-block-size:44px;color:var(--silk);overflow-wrap:anywhere;transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);border-radius:999px;padding:0 16px;font-weight:500;text-decoration:none}@media (hover:hover) and (pointer:fine){.learn-links ul .read-link:hover{border-color:var(--copper-hot)}}.learn-index-list{grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none;display:grid}.learn-index-list li{min-inline-size:0;display:grid}.learn-index-list a{min-block-size:44px;color:var(--silk);touch-action:manipulation;background:var(--mask-raised);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-card);transition:translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);align-content:start;gap:6px;padding:16px 18px;text-decoration:none;display:grid}.learn-index-list a:active{background:color-mix(in srgb, var(--silk) 6%, var(--mask-raised))}.learn-index-title{overflow-wrap:anywhere;font-weight:600}.learn-index-text{color:var(--silk-muted)}@media (hover:hover) and (pointer:fine){.learn-index-list a:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card-hover)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){:root:not([data-reduced-motion=true]) .learn-index-list a:hover{translate:0 -2px}}.learn-index section+section{margin-block-start:64px}.vs-case h2{margin-block-end:8px}.vs-case-text{max-inline-size:var(--read-measure);margin:0 0 16px}.vs-boards{grid-template-columns:minmax(0,1fr);gap:24px;margin-block-start:24px;display:grid}@container (width>=640px){.learn-index-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (width>=900px){.vs-boards{grid-template-columns:repeat(2,minmax(0,1fr))}.learn-columns:has(.learn-figure){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}}@container (width>=960px){.learn-index-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=640px){.learn-state figcaption,.learn-index-text{font-size:var(--small)}}
