/* Tutorial extends the shared Art du Prompt visual system. */
[hidden]{display:none!important}
.tutorial-page main{max-width:1300px}
.tutorial-intro{max-width:820px}
.tutorial-intro h1{font-size:clamp(35px,3.5vw,57px)}
.tutorial-intro>p:last-child{font-size:18px;color:var(--muted);line-height:1.75;max-width:760px;margin-top:23px}
.step-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);padding:17px 0;gap:20px;margin:29px 0 35px}
.step-index a{font-size:14px;font-weight:650;display:flex;align-items:center;gap:10px}
.step-index a:hover{color:var(--blue)}
.step-index span{font-size:12px;color:var(--blue);font-weight:700}
.tutorial-section{margin:34px 0 0}
.tutorial-section+.tutorial-section{padding-top:31px;border-top:1px solid var(--line)}
.tutorial-section>.section-header{margin-bottom:19px}
.tutorial-section>.section-header h2{font-size:27px}
.tutorial-section p{font-size:16px;line-height:1.75;color:#46546b;margin-bottom:16px}
.tutorial-section p strong{color:var(--ink)}
.tutorial-section p>a,.help-list a,.doc-link{color:#304bb6;text-decoration:underline;text-underline-offset:3px}
.tutorial-section p>a:hover,.doc-link:hover{color:var(--blue)}
.tutorial-section code:not(pre code){font:14px/1.6 "SFMono-Regular",Consolas,monospace;background:#e9edf7;border-radius:4px;padding:2px 5px;color:#344d7c;overflow-wrap:anywhere}
.source-links{font-size:14px!important}
.teaching-note{padding:17px 21px;border-left:3px solid var(--blue);background:#edf1fd;border-radius:0 8px 8px 0;margin:22px 0}
.teaching-note>strong{font-size:16px}
.teaching-note p{margin:5px 0 0}
.client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.client-guide{background:var(--white);padding:24px;border-radius:var(--radius);border:1px solid var(--line);min-width:0}
.client-kicker{font-size:12px;letter-spacing:.1em;font-weight:650;color:var(--muted)}
.client-guide h3{font-size:26px;letter-spacing:-.035em;margin:4px 0 20px}
.client-guide p{font-size:15px}
.doc-link{font-size:14px}
.command{background:#19273d;border-radius:8px;overflow:hidden;margin:16px 0 19px;min-width:0}
.command-head{padding:8px 13px;border-bottom:1px solid #38465b;display:flex;justify-content:space-between;gap:12px;align-items:center}
.command-head>span{font-size:12px;font-weight:600;color:#c3cfe5}
.command pre{margin:0;padding:17px;font-size:14px;line-height:1.75;overflow:auto}
.command code{font-family:"SFMono-Regular",Consolas,monospace;color:#e4edff;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;word-break:normal}
.copy-button{background:#34445e;border:1px solid #687c9c;border-radius:5px;color:white;line-height:1.3;font-family:inherit;font-size:12px;font-weight:600;padding:7px 10px;cursor:pointer;flex-shrink:0;min-height:34px}
.copy-button:hover{background:#415780}
.copy-button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.copy-button.copied{color:var(--lime);border-color:var(--lime)}
.tutorial-details{background:white;padding:0 22px;border:1px solid var(--line);border-radius:9px;margin-top:15px}
.tutorial-details summary{min-height:57px;font-size:16px}
.tutorial-details .details-content{padding-bottom:19px}
.tutorial-details .details-content>p:last-child{margin-bottom:0}
.tutorial-details .details-content p{font-size:16px}
.compact{gap:30px;margin:14px 0}
.compact h3{font-size:18px;font-weight:650}
.compact .command{margin:12px 0}
.compact p{font-size:15px}
.success-check{background:#e9f2ed;border-left:3px solid #478664;padding:16px 20px;border-radius:0 8px 8px 0}
.help-list{padding-left:20px;color:#46546b;font-size:16px}
.help-list li{margin-top:13px;line-height:1.7}
.help-list li::marker{color:var(--blue)}
.tutorial-end{border-top:1px solid var(--line);margin-top:35px;padding-top:25px;display:flex;gap:30px;align-items:center}
.tutorial-end>p{font-size:16px;line-height:1.7;color:var(--muted);flex:1}
.tutorial-end .github-link{gap:16px;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.client-guide{padding:20px}.command pre{font-size:13px;padding:15px}.tutorial-intro>p:last-child{font-size:17px}}
@media(max-width:690px){.tutorial-intro h1{font-size:37px}.tutorial-intro>p:last-child{font-size:16px;margin-top:20px}.step-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding-block:17px;margin-block:24px}.client-grid{grid-template-columns:1fr;gap:17px}.client-guide{padding:20px}.tutorial-section>.section-header h2{font-size:24px}.tutorial-section{margin-top:28px}.tutorial-section+.tutorial-section{padding-top:27px}.tutorial-details{padding:0 17px}.tutorial-details summary{font-size:15px}.command-head{padding-inline:12px}.command pre{padding:15px;font-size:13px}.tutorial-end{display:block}.tutorial-end>p{margin-bottom:17px}.compact{gap:5px}.teaching-note{padding:16px 18px}}
@media print{.copy-button,.step-index,.tutorial-end .github-link{display:none}.client-grid{display:block}.client-guide{break-inside:avoid}.command{background:#edf0f5;border:1px solid #ccc}.command-head{border-color:#bbb}.command code,.command-head>span{color:#172035}.command{break-inside:avoid}.tutorial-details{break-inside:avoid}}