/* Landing-page tutorials. Native details remain usable without JavaScript. */
.tutorial-section{padding-block:75px 80px;scroll-margin-top:30px}
.tutorial-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:29px}
.tutorial-heading h2{font-size:43px;line-height:1.13;letter-spacing:-1.8px;font-weight:650;margin-top:17px}
.tutorial-heading>p{max-width:340px;font-size:13px;line-height:1.85;color:var(--muted);margin-bottom:3px}
.tutorial-preview-note{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;margin-bottom:18px;border:1px solid #ded8ef;border-radius:9px;background:#f0edf9;color:#74668b;font-size:10px;line-height:1.8}
.tutorial-preview-note>span{font-size:17px;line-height:1;flex:none;margin-top:2px}
.tutorial-list{display:grid;gap:12px}
.tutorial-guide{border:1px solid #dedce9;border-radius:14px;background:#fff;overflow:hidden;scroll-margin-top:30px}
.tutorial-guide[open]{border-color:#cfc3ee;box-shadow:0 12px 32px #5f488b07}
.tutorial-guide>summary{display:flex;align-items:center;gap:19px;padding:23px 25px;list-style:none;cursor:pointer;transition:background .18s}
.tutorial-guide>summary::-webkit-details-marker{display:none}
.tutorial-guide>summary:hover{background:#faf8ff}
.tutorial-guide>summary:focus-visible{outline:3px solid #a48bff;outline-offset:-4px}
.tutorial-index{flex:none;width:39px;height:43px;display:flex;align-items:center;justify-content:center;background:#ece7fa;border:1px solid #e0d8f2;border-radius:10px;color:#8266c6;font-size:13px;font-weight:700;letter-spacing:-.5px}
.tutorial-guide:nth-child(2) .tutorial-index{background:#edf5d9;border-color:#dbe9bf;color:#6b802f}
.tutorial-guide:nth-child(3) .tutorial-index{background:#def4f5;border-color:#c7e8ea;color:#43828b}
.tutorial-guide:nth-child(4) .tutorial-index{background:#fff0e8;border-color:#f3dacf;color:#b07a56}
.tutorial-summary-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.tutorial-summary-copy>strong{font-size:16px;line-height:1.4;letter-spacing:-.3px;font-weight:650}
.tutorial-summary-copy>span{font-size:11px;line-height:1.6;color:#838091}
.tutorial-topic{margin-left:auto;font-size:8px;font-weight:650;letter-spacing:1px;color:#9690a6;white-space:nowrap}
.tutorial-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:27px;height:27px;border-radius:50%;background:#f2eef9;color:#907caf;font-size:21px;line-height:1;font-weight:400;transition:transform .18s}
.tutorial-guide[open] .tutorial-toggle{transform:rotate(45deg);background:#e9e0fa;color:#7658b1}
.tutorial-body{display:grid;grid-template-columns:1.35fr 1fr;gap:54px;padding:8px 30px 31px 84px}
.tutorial-steps{list-style:none;padding:0;margin:0;counter-reset:tutorial-step;display:grid;gap:21px;align-content:start}
.tutorial-steps>li{position:relative;padding-left:26px;counter-increment:tutorial-step;min-width:0}
.tutorial-steps>li:before{content:counter(tutorial-step);position:absolute;left:0;top:1px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid #dfd8ed;border-radius:50%;color:#927bad;font-size:8px;font-weight:650}
.tutorial-steps strong{font-size:12px;line-height:1.55;font-weight:650;display:block;color:#494157}
.tutorial-steps p{margin-top:6px;font-size:11px;line-height:1.85;color:#81798d}
.tutorial-steps b{color:#665875;font-weight:550}
.tutorial-steps code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:#f3effa;color:#7a5e9c;padding:2px 4px;border-radius:4px;overflow-wrap:anywhere}
.tutorial-visual{align-self:start;min-width:0;border-radius:12px;padding:23px;background:#f5f2fc;border:1px solid #e8e0f4}
.tutorial-visual-label{display:block;font-size:7px;line-height:1.7;font-weight:700;letter-spacing:1.2px;color:#9787ad}
.tutorial-connection-path{display:flex;align-items:center;margin:23px 0;gap:0;padding-inline:8px}
.tutorial-connection-path>span{display:flex;justify-content:center;align-items:center;width:42px;height:42px;flex:none;background:#e4d9f6;color:#8970b7;border:1px solid #d3c4eb;border-radius:11px;font-size:24px}
.tutorial-connection-path>span:last-child{background:#d9edaf;color:#718a3d;border-color:#c4dfa0}
.tutorial-connection-path>i{height:1px;flex:1;border-top:1px dashed #ccbee1}
.tutorial-example-ad{padding:18px 16px;background:#fff;border:1px solid #e1d7ef;border-radius:9px}
.tutorial-example-ad>div{display:flex;align-items:center;gap:12px;justify-content:space-between}
.tutorial-example-ad strong{font-size:15px;font-weight:650;letter-spacing:-.4px}
.tutorial-example-ad>div>span{font-size:6px;color:#9174b9;background:#f1ebfa;border-radius:4px;padding:5px;font-weight:650;white-space:nowrap}
.tutorial-example-ad>p{font-size:9px;color:#92869f;margin-top:15px;display:flex;justify-content:space-between;gap:10px}
.tutorial-example-ad code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#715c89;font-size:10px}
.tutorial-example-ad>small{display:block;font-size:8px;line-height:1.8;color:#a498ad;margin-top:8px}
.tutorial-visual .tutorial-visual-note{font-size:9px;line-height:1.85;color:#9b8bac;margin-top:18px}
.tutorial-rule-card{background:#f0f5e5;border-color:#e0e9cf}
.tutorial-rule-card .tutorial-visual-label{color:#8c9b6d}
.tutorial-rule-state{display:flex;align-items:center;gap:6px;color:#7e8b68;font-size:9px;margin-top:23px}
.tutorial-paused-dot{height:6px;width:6px;border-radius:50%;background:#b2c091}
.tutorial-range{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:22px 0;border-bottom:1px solid #d9e3c7}
.tutorial-range>div{display:grid;gap:6px}
.tutorial-range>div:last-child{text-align:right}
.tutorial-range>div>span{font-size:7px;letter-spacing:.8px;color:#96a279;font-weight:650}
.tutorial-range strong{font-size:24px;font-weight:650;letter-spacing:-1px;color:#54613d}
.tutorial-range>span{color:#aebc95;font-size:23px}
.tutorial-setting-list{margin:17px 0 0;display:grid;gap:11px;font-size:9px}
.tutorial-setting-list>div{display:flex;justify-content:space-between;gap:10px}
.tutorial-setting-list dt{color:#95a17e}
.tutorial-setting-list dd{margin:0;color:#65734c;text-align:right}
.tutorial-rule-card .tutorial-visual-note{color:#94a17c}
.tutorial-command-card{background:#192637;border-color:#26394c}
.tutorial-command-card .tutorial-visual-label{color:#779cae}
.tutorial-command-list{margin:18px 0 0;display:grid}
.tutorial-command-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff0c}
.tutorial-command-list dt{font-size:10px;color:#b8e9e8}
.tutorial-command-list code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px}
.tutorial-command-list dd{margin:0;font-size:8px;text-align:right;color:#8ca7b8}
.tutorial-command-card .tutorial-visual-note{color:#7a96a9}
.tutorial-routine-card{background:#fff3ec;border-color:#f1e0d5}
.tutorial-routine-card .tutorial-visual-label{color:#b79886}
.tutorial-routine-loop{list-style:none;padding:0;margin:23px 0 0;display:grid;gap:20px}
.tutorial-routine-loop li{display:flex;align-items:center;gap:13px}
.tutorial-routine-loop li>span{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#f8e2d4;color:#b98260;font-size:23px}
.tutorial-routine-loop strong{display:block;font-size:11px;color:#95765f;font-weight:600}
.tutorial-routine-loop small{display:block;font-size:8px;color:#bca390;margin-top:5px;line-height:1.7}
.tutorial-routine-card .tutorial-visual-note{color:#b29987}
.tutorial-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:24px}
.tutorial-footer p{font-size:10px;line-height:1.8;color:#9a91a6}
.tutorial-footer a{display:flex;align-items:center;gap:15px;font-size:11px;color:#8670bc;font-weight:650;white-space:nowrap}
.tutorial-footer a:hover{color:#5c4690}
@media(max-width:1100px){.tutorial-body{gap:28px;padding-left:34px}.tutorial-topic{display:none}.tutorial-heading{gap:40px}.tutorial-heading>p{max-width:295px}.tutorial-visual{padding:19px}.tutorial-example-ad>div{flex-wrap:wrap;gap:8px}}
@media(max-width:720px){.tutorial-section{padding-block:50px}.tutorial-heading{display:block;margin-bottom:24px}.tutorial-heading h2{font-size:34px;letter-spacing:-1.3px}.tutorial-heading>p{max-width:none;font-size:12px;margin-top:19px}.tutorial-preview-note{font-size:9px;padding:12px;gap:8px}.tutorial-guide{border-radius:11px}.tutorial-guide>summary{gap:12px;padding:19px 15px}.tutorial-index{width:31px;height:37px;border-radius:8px;font-size:11px}.tutorial-summary-copy{gap:5px}.tutorial-summary-copy>strong{font-size:13px;letter-spacing:-.2px}.tutorial-summary-copy>span{font-size:9px}.tutorial-toggle{margin-left:auto;width:24px;height:24px;font-size:19px}.tutorial-body{grid-template-columns:1fr;padding:5px 20px 23px;gap:25px}.tutorial-steps{gap:19px}.tutorial-steps strong{font-size:12px}.tutorial-steps p{font-size:11px}.tutorial-visual{padding:22px}.tutorial-visual-label{font-size:7px}.tutorial-example-ad>div{flex-wrap:nowrap}.tutorial-example-ad strong{font-size:16px}.tutorial-example-ad>div>span{font-size:6px}.tutorial-visual .tutorial-visual-note{font-size:9px}.tutorial-range strong{font-size:27px}.tutorial-setting-list{font-size:10px}.tutorial-command-list dt,.tutorial-command-list code{font-size:11px}.tutorial-command-list dd{font-size:9px}.tutorial-routine-loop strong{font-size:12px}.tutorial-routine-loop small{font-size:9px}.tutorial-footer{align-items:flex-start;flex-direction:column;gap:14px;padding-top:20px}.tutorial-footer p{font-size:10px}.tutorial-footer a{font-size:11px}}
@media(max-width:370px){.tutorial-guide>summary{padding-inline:12px;gap:10px}.tutorial-summary-copy>strong{font-size:12px}.tutorial-summary-copy>span{font-size:8px}.tutorial-body{padding-inline:16px}.tutorial-visual{padding:17px}.tutorial-example-ad{padding:16px 12px}}
@media(prefers-reduced-motion:reduce){.tutorial-guide>summary,.tutorial-toggle{transition:none}}

/* Instructions need to stay comfortable to read while following along. */
.tutorial-preview-note{font-size:12px;color:#625273}
.tutorial-summary-copy>span{font-size:12px;color:#6d647b}
.tutorial-steps strong{font-size:14px;color:#42384f}
.tutorial-steps p{font-size:13px;color:#665c74;line-height:1.85}
.tutorial-steps b{color:#51415f;font-weight:600}
.tutorial-steps>li:before{top:3px;color:#6b518a;border-color:#baadcc}
.tutorial-visual .tutorial-visual-note{font-size:11px;color:#786589}
.tutorial-example-ad>p,.tutorial-example-ad>small{font-size:10px;color:#786589}
.tutorial-example-ad>div>span{font-size:8px;color:#72518e}
.tutorial-rule-card .tutorial-visual-note{color:#657447}
.tutorial-rule-state,.tutorial-setting-list{font-size:11px}
.tutorial-setting-list dt{color:#6a7655}
.tutorial-command-list dt,.tutorial-command-list code{font-size:12px}
.tutorial-command-list dd{font-size:11px;color:#abc1cf}
.tutorial-command-card .tutorial-visual-note{color:#a3b8c7}
.tutorial-routine-loop strong{font-size:13px;color:#805b40}
.tutorial-routine-loop small{font-size:11px;color:#906c55}
.tutorial-routine-card .tutorial-visual-note{color:#906c55}
.tutorial-footer p{font-size:12px;color:#75677f}
@media(max-width:720px){.tutorial-summary-copy>span{font-size:11px}.tutorial-preview-note{font-size:11px}.tutorial-steps strong{font-size:14px}.tutorial-steps p{font-size:13px}.tutorial-example-ad>div>span{font-size:7px}.tutorial-footer p{font-size:12px}}

.tutorial-command-example { white-space: pre-wrap; overflow-wrap: anywhere; background: #ffffffa8; border: 1px solid #dcd4f2; border-radius: 12px; padding: 18px; margin: 20px 0; color: #49366f; font-size: 12px; line-height: 1.9; }
.tutorial-setting-list dd code { font-size: 11px; overflow-wrap: anywhere; }