body{background:var(--bg)}.tut-page-head{padding:80px 0 60px;border-bottom:1px solid var(--line-2);background:radial-gradient(circle at 20% 0%,oklch(.78 .15 var(--hue) / .06),transparent 50%),var(--bg)}.tut-page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.02em;margin:18px 0 28px;max-width:900px}.tut-page-head h1 em{font-style:italic;color:var(--accent)}.tut-lede{font-size:17px;line-height:1.6;color:var(--fg-dim);max-width:720px;margin:0}.tut-layout{display:grid;grid-template-columns:260px 1fr;gap:80px;padding-top:80px;padding-bottom:160px;align-items:start}.tut-toc{position:sticky;top:88px;align-self:start}.tut-toc-title{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:16px}.tut-toc ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column}.tut-toc li{border-top:1px solid var(--line-2)}.tut-toc li:last-child{border-bottom:1px solid var(--line-2)}.tut-toc a{display:flex;flex-direction:column;gap:4px;padding:14px 0;color:var(--fg-dim);transition:color .15s}.tut-toc a:hover{color:var(--fg)}.tut-toc a.on{color:var(--accent)}.tut-toc .t-label{font-size:14px}.tut-toc .t-meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}.tut-help-box{background:#0d0c0b;border:1px solid var(--line-2);padding:18px}.tut-help-box .hb-title{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}.tut-help-box p{font-size:13px;line-height:1.55;color:var(--fg-dim);margin:0}.tut-help-box a{color:var(--accent);border-bottom:1px dashed var(--accent-line)}.tut-content{min-width:0}.tut{padding:0 0 72px}.tut-head{display:grid;grid-template-columns:80px 1fr;gap:28px;align-items:start;margin-bottom:32px}.tut-head .num{font-family:var(--serif);font-size:56px;line-height:1;color:var(--accent);opacity:.55}.tut-head h1,.tut-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 14px;letter-spacing:-.01em}.tut-sub{font-size:16px;line-height:1.6;color:var(--fg-dim);margin:0 0 18px;max-width:640px}.meta-row{display:flex;gap:8px;flex-wrap:wrap}.chip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);border:1px solid var(--line);padding:5px 10px}details.explain{background:#0d0c0b;border:1px solid var(--line-2);padding:16px 20px;margin:0 0 28px}details.explain summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:17px;color:var(--fg);display:flex;align-items:baseline;justify-content:space-between;gap:16px}details.explain summary::-webkit-details-marker{display:none}details.explain summary .q{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}details.explain summary:before{content:"+";color:var(--accent);font-family:var(--mono);margin-right:10px}details.explain[open] summary:before{content:"−"}details.explain p,details.explain ul{color:var(--fg-dim);font-size:15px;line-height:1.6;margin:12px 0 0}details.explain ul{padding-left:20px}details.explain li{margin:4px 0}ol.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:36px}ol.steps>li{counter-increment:step;position:relative;padding-left:60px}ol.steps>li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;width:40px;height:40px;display:grid;place-items:center;background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent);font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em}ol.steps h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 12px;line-height:1.3}ol.steps p{font-size:15px;line-height:1.65;color:var(--fg-dim);margin:0 0 12px}ol.steps p.muted{font-size:13px;color:var(--fg-mute)}ol.steps a{color:var(--accent);border-bottom:1px dashed var(--accent-line)}ol.steps code{font-family:var(--mono);font-size:12.5px;background:#1a1816;border:1px solid var(--line-2);padding:1px 6px;color:var(--fg)}ol.steps pre{font-family:var(--mono);font-size:12.5px;line-height:1.5;background:#0a0908;border:1px solid var(--line-2);border-left:2px solid var(--accent);padding:14px 16px;color:var(--fg);margin:0 0 14px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}ol.steps kbd{font-family:var(--mono);font-size:11px;background:#1a1816;border:1px solid var(--line);border-bottom-width:2px;padding:1px 6px;color:var(--fg)}details.tip{margin-top:14px;padding:12px 14px;background:#0a0908;border:1px dashed var(--line)}details.tip summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}details.tip summary::-webkit-details-marker{display:none}details.tip summary:before{content:"+ ";color:var(--accent);margin-right:4px}details.tip[open] summary:before{content:"− "}details.tip summary:hover{color:var(--fg-dim)}details.tip p,details.tip ul{font-size:13.5px;line-height:1.6;color:var(--fg-dim);margin:10px 0 0}details.tip ul{padding-left:20px}details.tip li{margin:3px 0}details.tip code{font-family:var(--mono);font-size:12px;background:#1a1816;padding:0 5px}details.tip pre{font-family:var(--mono);font-size:12px;background:#050504;border:1px solid var(--line-2);padding:10px 12px;margin:8px 0 0;color:var(--fg);overflow-x:auto;white-space:pre-wrap;word-break:break-word}ul.form-list{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--fg-dim)}ul.form-list strong{color:var(--fg)}img.screenshot{display:block;max-width:100%;height:auto;border:1px solid var(--line-2);margin:8px 0 4px}.next-up{margin-top:36px;padding:18px 22px;background:#0d0c0b;border:1px solid var(--line-2);border-left:2px solid var(--accent);display:flex;align-items:center;gap:16px;flex-wrap:wrap}.next-up .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.next-up a{color:var(--fg);font-family:var(--serif);font-size:18px;border-bottom:1px solid var(--line);padding:0 0 2px}.next-up a:hover{color:var(--accent);border-color:var(--accent-line)}.tut-back{display:inline-block;margin-top:48px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);padding:10px 14px;border:1px solid var(--line-2)}.tut-back:hover{color:var(--accent);border-color:var(--accent-line)}.nav-links a.active{color:var(--accent)}.tut-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding:60px 0 120px}.tut-card{background:#0d0c0b;border:1px solid var(--line-2);padding:28px;display:flex;flex-direction:column;gap:14px;transition:border-color .15s,transform .15s}.tut-card:hover{border-color:var(--accent-line);transform:translateY(-2px)}.tut-card .card-top{display:flex;align-items:center;gap:12px}.tut-card .card-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);color:var(--accent);flex-shrink:0}.tut-card .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}.tut-card h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:0;letter-spacing:-.01em;line-height:1.2}.tut-card p{font-size:14.5px;line-height:1.55;color:var(--fg-dim);margin:0;flex:1}.tut-card .meta-row{margin-top:4px}@media(max-width:900px){.tut-layout{grid-template-columns:1fr;gap:40px;padding-top:48px;padding-bottom:80px}.tut-toc{position:static;border:1px solid var(--line-2);padding:18px;background:#0d0c0b}.tut-toc ul{margin-bottom:0}.tut-help-box{display:none}.tut-head{grid-template-columns:1fr;gap:12px}.tut-head .num{font-size:36px}ol.steps>li{padding-left:48px}ol.steps>li:before{width:32px;height:32px;font-size:11px}}
