.tutorial-detail{--cream:#f4f1ec;--ink:#14120f;--ink-2:#2f2b26;--muted:#726c62;--faint:#9a948a;--line:#14120f17;--line-2:#14120f33;--line-3:#14120f57;--beige:#e8e1d4;--panel:#fbf9f5;--accent:#7aa7e8;--accent-deep:#4c7fcf;--ease:cubic-bezier(.22, .61, .36, 1);background-color:var(--cream);width:100%;color:var(--ink);background-image:radial-gradient(#14120f0d .5px,#0000 .5px);background-size:7px 7px;flex:1;justify-content:center;padding:52px 0 96px;font-family:Inter,system-ui,sans-serif;display:flex;position:relative;overflow-x:clip}@media (max-width:900px){.tutorial-detail{padding:40px 0 68px}}.tutorial-detail-rules{z-index:0;pointer-events:none;justify-content:center;display:flex;position:absolute;inset:0}.tutorial-detail-rules-band{justify-content:space-between;width:min(1340px,94%);display:flex}.tutorial-detail-rules-pair{gap:40px;display:flex}.tutorial-detail-rules-pair i{background:var(--line);width:1px;height:100%}@media (max-width:900px){.tutorial-detail-rules{display:none}}.tutorial-detail-container{z-index:1;width:100%;max-width:1000px;margin:0 auto;padding:0 2rem;position:relative}@media (max-width:900px){.tutorial-detail-container{padding:0 1.15rem}}.tutorial-detail-back{height:30px;color:var(--muted);transition:color .18s var(--ease), transform .18s var(--ease);align-items:center;gap:7px;font-size:12.5px;text-decoration:none;display:inline-flex}.tutorial-detail-back:hover{color:var(--ink);transform:translate(-2px)}.tutorial-detail-top{border-bottom:1px solid var(--line);margin-top:22px;padding-bottom:30px}.tutorial-detail-kicker{letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-size:10.5px;font-weight:500;display:block}.tutorial-detail-kicker-rule{background:var(--line-2);width:78px;height:1px;margin:11px 0 22px;display:block;position:relative}.tutorial-detail-kicker-rule:after{content:"";background:var(--accent);border-radius:50%;width:5px;height:5px;position:absolute;top:50%;left:22px;transform:translate(-50%,-50%)}.tutorial-detail-title{letter-spacing:-.7px;color:var(--ink);margin:0;font-family:Instrument Serif,Georgia,serif;font-size:clamp(36px,4.6vw,58px);font-weight:400;line-height:1.02}.tutorial-detail-intro{max-width:62ch;color:var(--muted);margin:16px 0 0;font-size:14.5px;line-height:1.75}.tutorial-detail-meta{flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px;display:flex}.tutorial-detail-meta span{color:var(--faint);font-size:11.5px}.tutorial-detail-meta b{color:var(--ink-2);font-weight:500}.tutorial-detail-body{grid-template-columns:minmax(0,1fr) 212px;align-items:start;gap:56px;margin-top:14px;display:grid}.tutorial-detail-list{margin:0;padding:0;list-style:none}.tutorial-detail-step{border-bottom:1px solid var(--line);grid-template-columns:44px minmax(0,1fr);padding:24px 0;scroll-margin-top:92px;display:grid}.tutorial-detail-step:last-child{border-bottom:0}.tutorial-detail-step-number{color:var(--faint);font-family:Instrument Serif,Georgia,serif;font-size:17px;line-height:1.6}.tutorial-detail-step-where{height:22px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap;background:#fbf9f5b3;border-radius:999px;align-items:center;gap:6px;padding:0 9px;font-size:10.5px;display:inline-flex}.tutorial-detail-step-where i{background:var(--accent);border-radius:1.5px;flex:none;width:4px;height:4px}.tutorial-detail-step-text{max-width:64ch;color:var(--ink-2);margin:10px 0 0;font-size:14.5px;line-height:1.75}.tutorial-detail-side{scrollbar-width:thin;scrollbar-color:#14120f2e transparent;flex-direction:column;gap:22px;max-height:calc(100vh - 124px);padding-right:6px;display:flex;position:sticky;top:92px;overflow-y:auto}.tutorial-detail-side::-webkit-scrollbar{width:5px}.tutorial-detail-side::-webkit-scrollbar-track{background:0 0}.tutorial-detail-side::-webkit-scrollbar-thumb{background:#14120f29;border-radius:3px}.tutorial-detail-side-title{letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0;font-size:10px;font-weight:600}.tutorial-detail-side-list{flex-direction:column;gap:9px;margin-top:12px;display:flex}.tutorial-detail-side-link{color:var(--muted);border-left:1px solid var(--line-2);transition:color .18s var(--ease), border-color .18s var(--ease);padding-left:11px;font-size:12.5px;line-height:1.35;text-decoration:none}.tutorial-detail-side-link:hover{color:var(--ink);border-left-color:var(--line-3)}.tutorial-detail-side-link.is-active{color:var(--ink);border-left-color:var(--accent-deep)}.tutorial-detail-next{border-top:1px solid var(--line);padding-top:20px}.tutorial-detail-next-link{color:var(--muted);transition:color .18s var(--ease);margin-top:9px;font-size:12.5px;text-decoration:none;display:block}.tutorial-detail-next-link:hover{color:var(--ink)}.tutorial-detail-notfound{border-top:1px solid var(--line);margin-top:56px;padding:34px 0 60px}.tutorial-detail-notfound-title{color:var(--ink);margin:0;font-family:Instrument Serif,Georgia,serif;font-size:34px;font-weight:400;line-height:1.06}.tutorial-detail-notfound-des{color:var(--muted);margin:12px 0 0;font-size:14px;line-height:1.7}@media (max-width:900px){.tutorial-detail-body{grid-template-columns:1fr;gap:0}.tutorial-detail-side{display:none}.tutorial-detail-step{grid-template-columns:32px minmax(0,1fr)}.tutorial-detail-step-text{font-size:14px}}