.learning-format { padding:32px 0 130px; scroll-margin-top:36px; }
.format-heading { margin:0 auto 52px; text-align:center; }
.format-heading h2 { margin:0; font-size:clamp(30px,3.7vw,48px); line-height:1.22; font-weight:750; letter-spacing:-.04em; }
.format-heading h2 span { display:inline-block; margin-left:.08em; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.25em; font-weight:400; letter-spacing:0; color:var(--accent); transform:rotate(-1.6deg); }
.format-panel { max-width:1060px; margin:auto; }
.format-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.format-row { min-width:0; perspective:1100px; }
.format-card { position:relative; isolation:isolate; height:100%; min-height:310px; padding:34px 38px 36px; border-radius:29px; }
.format-card::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#0c0d0bf5; filter:blur(1.4px); box-shadow:0 16px 38px -20px #000b; pointer-events:none; opacity:1; transition:opacity .32s ease; }
@media (hover:hover) and (pointer:fine) {
  .format-row:hover .format-card::before { opacity:.6; }
}
@media (prefers-reduced-motion:reduce) {
  .format-card::before { transition:none; }
}
.format-card[data-moving] { will-change:transform; }
.format-card>.author-glare { z-index:2; contain:paint; }
.format-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:23px; }
.format-drawing { flex:0 1 224px; display:block; width:224px; max-width:calc(100% - 53px); height:auto; overflow:visible; pointer-events:none; }
.format-drawing .f-paper { fill:#e0dfce; }
.format-drawing .f-orange { fill:#d97750; }
.format-drawing .f-green { fill:#c7d5a4; }
.format-drawing .f-charcoal { fill:#272e29; }
.format-drawing .f-skin { fill:#c0a282; }
.format-drawing .f-shadow { fill:#000; opacity:.45; }
.format-drawing .f-ink,.format-drawing .f-line,.format-drawing .f-paper-line,.format-drawing .f-orange-line,.format-drawing .f-green-line { stroke:#242b26; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.format-drawing .f-line,.format-drawing .f-paper-line,.format-drawing .f-orange-line,.format-drawing .f-green-line { fill:none; }
.format-drawing .f-paper-line { stroke:#e0dfce; }
.format-drawing .f-orange-line { stroke:#c65730; stroke-width:1.8; }
.format-drawing .f-green-line { stroke:#c7d5a4; }
.format-drawing .f-fine { stroke-width:1; }
.format-drawing .f-muted { opacity:.3; }
.format-drawing .f-connector { opacity:.7; }
.format-drawing .f-hand { font-family:'Orange Marker',Manrope,sans-serif; fill:#272e29; }
.format-drawing .f-typing { opacity:0; }
.format-drawing[data-motion='true'] .f-reveal { opacity:0; }
.format-drawing[data-motion='true'] .f-trace { stroke-dasharray:1; stroke-dashoffset:1; }
.format-drawing[data-motion='true'].is-playing .f-reveal { animation:format-scene-appear .5s cubic-bezier(.2,.6,.35,1) var(--at,0s) both; }
.format-drawing[data-motion='true'].is-playing .f-trace { animation:format-scene-draw var(--duration,.7s) ease-out var(--at,0s) both; }
.format-drawing[data-motion='true'].is-playing .f-typing { animation:format-scene-typing .6s ease-in-out var(--at,0s) 2 both; }
.format-drawing[data-motion='true'].is-playing .f-voice path { transform-box:fill-box; transform-origin:center; animation:format-scene-voice .75s ease-in-out var(--at,0s) 4 both; }
.format-drawing .f-voice path:nth-child(2n) { animation-duration:.6s!important; }
.format-drawing .f-voice path:nth-child(3n) { animation-duration:.9s!important; }
.format-drawing.is-paused * { animation-play-state:paused!important; }
@keyframes format-scene-appear { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes format-scene-draw { to { stroke-dashoffset:0; } }
@keyframes format-scene-typing { 0%,100% { opacity:0; } 40%,65% { opacity:1; } }
@keyframes format-scene-voice { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.35); } }
@media (prefers-reduced-motion:reduce) {
  .format-drawing .f-reveal { opacity:1!important; animation:none!important; }
  .format-drawing .f-trace { stroke-dashoffset:0!important; animation:none!important; }
  .format-drawing .f-typing { display:none; }
  .format-drawing .f-voice path { animation:none!important; }
}
.format-number { padding:11px 4px 0 0; color:var(--accent); font-family:'Orange Marker',Manrope,sans-serif; font-size:35px; line-height:1; font-weight:400; }
.format-card h3 { margin:0 0 15px; color:#e9eae3; font-size:25px; font-weight:650; line-height:1.3; letter-spacing:-.03em; text-wrap:balance; }
.format-card p { margin:0; color:#a8ada0; font-size:18px; font-weight:500; line-height:1.6; text-wrap:pretty; }
.format-period { white-space:nowrap; }
.format-description p+p { margin-top:12px; }
.format-update { margin:26px 0 0; color:#8f9785; font-size:14px; line-height:1.6; text-align:center; }
.format-update span { color:#ccd5bd; }
@media (max-width:1000px) {
  .format-card { padding:28px; min-height:310px; }
  .format-card h3 { font-size:23px; }
  .format-card p { font-size:17px; }
  .format-card-top { margin-bottom:22px; }
}
@media (max-width:680px) {
  .learning-format { padding:24px 0 80px; }
  .format-heading { margin-bottom:36px; }
  .format-heading h2 { font-size:31px; }
  .format-heading h2 span { display:block; margin:3px 0 0; }
  .format-list { grid-template-columns:1fr; gap:18px; }
  .format-card { padding:27px; min-height:0; border-radius:25px; }
  .format-card-top { margin-bottom:23px; }
  .format-card h3 { font-size:23px; }
  .format-card p { font-size:16px; line-height:1.6; }
  .format-drawing { width:208px; flex-basis:208px; }
  .format-number { font-size:32px; }
  .format-update { margin-top:24px; font-size:13px; }
  .format-update span { display:block; }
}
@media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) {
  .format-card { transform:none!important; }
  .format-card>.author-glare { display:none; }
}