.tutorial-main{max-width:1100px;color:var(--text-dim);margin:0 auto;padding:24px 24px 48px;line-height:1.6}.tutorial-main .back{color:var(--text-dim);font-size:13px;text-decoration:none}.tutorial-main h1{letter-spacing:1px;color:var(--text);margin:12px 0 4px;font-size:36px;font-weight:800}.tutorial-main h2{border-top:1px solid var(--border);color:var(--text);margin:48px 0 8px;padding-top:16px;font-size:24px}.tutorial-main h3{color:var(--accent);margin:32px 0 6px;font-size:17px}.tutorial-main p,.tutorial-main li{max-width:760px;font-size:15px}.tutorial-main b,.tutorial-main strong{color:var(--text)}.tutorial-main a{color:var(--accent)}.tutorial-main :not(pre)>code{color:var(--text);background:#ffffff12;border-radius:5px;padding:1px 5px;font:.88em ui-monospace,SFMono-Regular,Consolas,monospace}.tutorial-lead{color:var(--text);font-size:17px!important}.tutorial-contents{flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none;display:flex}.tutorial-contents a{border:1px solid var(--border);background:var(--panel-2);border-radius:8px;padding:6px 12px;font-size:13px;text-decoration:none;display:inline-block}.step{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin:14px 0 8px;display:grid}.step-code{min-width:0}.step-result{flex-direction:column;gap:8px;display:flex}.step-result iframe{border:1px solid var(--border);background:#1c1c22;border-radius:12px;flex:1;width:100%;min-height:340px}.step-actions{flex-wrap:wrap;gap:6px;display:flex}.step-actions button{border:1px solid var(--border);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;border-radius:7px;padding:5px 10px;font-size:12px}.step-actions button:hover{border-color:var(--accent-dim)}.code-title{letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);justify-content:space-between;margin:0 0 4px;font-size:11px;font-weight:700;display:flex}.code-title+.code{margin-bottom:10px}.new-key{letter-spacing:.5px;text-transform:none;border-left:3px solid #e2b04a;padding-left:8px;font-weight:600}.code{border:1px solid var(--border);color:#d6d6dc;background:#101013;border-radius:12px;margin:0;padding:12px 0;font:12.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-x:auto}.code .line{text-indent:-16px;white-space:pre-wrap;border-left:3px solid #0000;padding:0 14px 0 30px;display:block}.code .line.new{background:#e2b04a17;border-left-color:#e2b04a}.t-comment{color:#7d8590;font-style:italic}.t-string{color:#a5d6a7}.t-number{color:#f2b880}.t-keyword{color:#8ab4f8}.whole-page{margin:14px 0}.tutorial-aside{border:1px solid var(--border);border-left:3px solid var(--accent-dim);background:var(--panel-2);border-radius:10px;max-width:760px;margin:18px 0;padding:12px 16px}.tutorial-aside p{margin:6px 0}.tutorial-aside pre{margin:8px 0}@media (width<=860px){.step{grid-template-columns:1fr}.step-result iframe{min-height:300px}}.step.wide{grid-template-columns:1fr}.step.wide .step-result iframe{min-height:520px}