.tutorial-hero{padding-block:clamp(74px,12vw,150px) 70px}.tutorial-hero .display{max-width:10ch}.tutorial-actions{margin-top:34px}.tutorial-list{display:grid;gap:12px;padding-bottom:140px}.tutorial-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:28px;min-height:164px;padding:28px 30px;border:1px solid var(--line);background:#ffffff06;transition:border-color .18s ease,background .18s ease,transform .18s ease}.tutorial-card.is-active{border-color:#f5d976ad;background:#f5d97614;transform:translate(8px)}.tutorial-card-index{color:var(--sun);font-family:var(--serif);font-size:27px}.tutorial-card h2{font-family:var(--serif);font-size:clamp(28px,3vw,44px);font-weight:400}.tutorial-card p{max-width:48rem;margin-top:10px;color:var(--muted);line-height:1.75}.tutorial-card .button{white-space:nowrap}.tutorial-detail{grid-column:2 / -1;display:grid;gap:18px;padding-top:22px;border-top:1px solid var(--line)}.tutorial-detail>p{margin-top:0}.tutorial-detail table{width:100%;border-collapse:collapse}.tutorial-detail th,.tutorial-detail td{padding:10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:13px;line-height:1.55}.tutorial-detail th{width:min(44%,280px);padding-right:24px;color:var(--ink);font-weight:650}.tutorial-detail td{color:var(--muted)}.tutorial-detail kbd{display:inline-grid;min-width:28px;min-height:26px;place-items:center;padding:2px 7px;border:1px solid var(--line);border-radius:4px;color:var(--ink);background:#0003;font:11px var(--mono)}.tutorial-detail a{color:var(--sun);text-underline-offset:3px}@media(max-width:760px){.tutorial-card{grid-template-columns:42px minmax(0,1fr);gap:16px}.tutorial-card .button{grid-column:2;justify-self:start}.tutorial-card.is-active{transform:none}.tutorial-detail{grid-column:1 / -1}.tutorial-detail th{width:46%}}