.loading {padding:3rem} .learning-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.learning-section {padding:36px 0 56px;border-top:1px solid var(--line)}.learning-section h2 {font-size:clamp(28px,4vw,44px)}.learning-tile {display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:var(--panel);overflow:hidden;transition:transform .15s,border-color .15s}.learning-tile:hover {transform:translateY(-3px);border-color:var(--cyan)}.learning-tile>img {height:210px;width:100%;object-fit:contain;background:#fff;padding:14px}.learning-tile>div {display:flex;flex:1;flex-direction:column;padding:26px}.learning-tile h3 {font-size:25px;margin:16px 0}.learning-tile p {font-size:16px;flex:1}.learning-tile strong,.back-link {color:var(--yellow)}.detail-intro {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;padding:48px 0}.detail-intro h1 {font-size:clamp(42px,6vw,76px);line-height:1.04}.detail-intro .notice {margin:28px 0 0}.detail-intro .notice p {margin-bottom:0}.detail-image,.step-image {width:100%;max-height:620px;object-fit:contain;background:white;padding:20px;border-radius:20px}.detail-image {align-self:center}.step-view {background:var(--panel);padding:32px;border:1px solid var(--line);border-radius:24px;margin:16px 0 64px}.step-view h2 {font-size:32px;line-height:1.15}.step-view p {white-space:pre-line}.step-image {margin:24px 0}.step-heading,.step-buttons {display:flex;justify-content:space-between;align-items:center;gap:20px}.step-heading progress {width:140px;accent-color:var(--cyan)}button {font:inherit;cursor:pointer}button:disabled {opacity:.4;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--cyan);outline-offset:4px}body[data-background="grid"] {background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:32px 32px}body[data-card-style="square"] .learning-tile {border-radius:3px}.back-link {display:inline-block}.learning-tile h2 {font-size:32px}.kit-brand span {max-width:180px}.kit-nav {flex-wrap:wrap} @media(max-width:900px){.learning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.learning-grid{grid-template-columns:1fr}.step-view{padding:18px}.detail-intro{padding-top:28px}.step-heading{flex-wrap:wrap}.step-buttons .kit-button{padding:0 16px}}