.tutorial-demo-slot{margin:0 0 48px}.tutorial-demo{--fbd-accent:var(--accent);--fbd-accent-soft:var(--accent-soft);--fbd-on-accent:#fff;--fbd-scale:.6;--fbd-progress:0;--fbd-toolbar-height:56px;border:1px solid var(--line);background:var(--panel);min-width:0;color:var(--ink);border-radius:10px;font-size:13px;line-height:1.65;position:relative;box-shadow:0 2px 3px #30251d03,0 18px 44px -24px #30251d28}:root[data-theme=dark] .tutorial-demo{--fbd-on-accent:#291d18;box-shadow:0 18px 44px -24px #0008}.tutorial-demo *,.tutorial-demo :before,.tutorial-demo :after{box-sizing:border-box}.tutorial-demo [hidden]{display:none!important}.tutorial-demo button{min-height:34px;color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;gap:7px;padding:7px 11px;font-size:12px;line-height:1.5;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.tutorial-demo button:hover:not(:disabled){background:var(--soft)}.tutorial-demo button:disabled{opacity:.4;cursor:default}.tutorial-demo button svg{flex:none}.tutorial-demo button:focus-visible,.tutorial-demo summary:focus-visible,.tutorial-demo .fbd-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.tutorial-demo .fbd-toolbar{z-index:7;top:var(--reading-top,var(--header,72px));border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--panel) 97%, transparent);backdrop-filter:blur(12px);border-radius:10px 10px 0 0;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:10px 14px;display:grid;position:sticky}.tutorial-demo .fbd-toolbar:after{content:"";pointer-events:none;background:var(--accent);height:2px;transform:scaleX(var(--fbd-progress));transform-origin:0;transition:transform .25s;position:absolute;inset:auto 0 -1px}.tutorial-demo .fbd-heading{white-space:nowrap;margin:0 4px 0 0;font-size:12px;font-weight:600;line-height:1.5}.tutorial-demo .fbd-playback{white-space:nowrap;align-items:center;gap:4px;display:flex}.tutorial-demo .fbd-primary{border-color:var(--accent);background:var(--accent);color:var(--fbd-on-accent);padding-inline:12px;font-weight:600}.tutorial-demo .fbd-primary:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 87%, var(--ink))}.tutorial-demo button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.tutorial-demo .fbd-progress{justify-self:end;min-width:0;max-width:100%;position:relative}.tutorial-demo .fbd-progress>summary{min-height:34px;color:var(--muted);cursor:pointer;border-radius:5px;align-items:center;gap:8px;padding:6px 8px;list-style:none;display:flex}.tutorial-demo .fbd-progress>summary::-webkit-details-marker{display:none}.tutorial-demo .fbd-progress>summary:hover,.tutorial-demo .fbd-progress[open]>summary{background:var(--soft);color:var(--ink)}.tutorial-demo .fbd-progress>summary>svg{flex-shrink:0;transition:transform .15s}.tutorial-demo .fbd-progress[open]>summary>svg{transform:rotate(180deg)}.tutorial-demo .fbd-current{align-items:baseline;gap:9px;min-width:0;font-size:11px;display:flex}.tutorial-demo [data-fbd-position]{font-variant-numeric:tabular-nums;color:var(--accent);flex-shrink:0;font:10px/1.5 Cascadia Code,Consolas,monospace}.tutorial-demo [data-fbd-title]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tutorial-demo .fbd-step-panel{z-index:1;overscroll-behavior:contain;border:1px solid var(--line);background:var(--panel);scrollbar-width:thin;border-radius:8px;width:min(320px,100vw - 48px);padding:16px;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto;box-shadow:0 12px 32px #17212b1a}.tutorial-demo .fbd-progress[data-placement=above] .fbd-step-panel{top:auto;bottom:calc(100% + 8px)}.tutorial-demo .fbd-environment{color:var(--muted);margin:0;font-size:11px}.tutorial-demo .fbd-detail{color:var(--ink);margin:10px 0 13px;font-size:12px;line-height:1.8}.tutorial-demo .fbd-steps{gap:2px;margin:0;padding:0;list-style:none;display:grid}.tutorial-demo .fbd-steps li{color:var(--muted);border-radius:4px;align-items:center;gap:10px;padding:5px 8px;font-size:11px;display:flex}.tutorial-demo .fbd-steps li>span:first-child{opacity:.7;font:10px/1.5 Cascadia Code,Consolas,monospace}.tutorial-demo .fbd-steps li.is-done{color:var(--ink)}.tutorial-demo .fbd-steps li[aria-current=step]{color:var(--accent);background:var(--accent-soft);font-weight:600}.tutorial-demo .fbd-panel-actions{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;margin-top:13px;padding-top:10px;display:flex}.tutorial-demo .fbd-mode{color:var(--muted);align-items:center;gap:7px;font-size:11px;display:flex}.tutorial-demo .fbd-mode:before{content:"";opacity:.5;background:currentColor;border-radius:50%;width:5px;height:5px}.tutorial-demo[data-mode=playing] .fbd-mode,.tutorial-demo[data-mode=manual] .fbd-mode,.tutorial-demo[data-mode=complete] .fbd-mode{color:var(--accent)}.tutorial-demo[data-mode=playing] .fbd-mode:before{opacity:1;box-shadow:0 0 0 3px var(--accent-soft)}.tutorial-demo .fbd-utility,.tutorial-demo .fbd-expand{color:var(--muted)}.tutorial-demo .fbd-expand{white-space:nowrap;padding-inline:8px}.tutorial-demo .fbd-viewport{overscroll-behavior:contain;scroll-margin-top:calc(var(--reading-top,var(--header,72px)) + var(--fbd-toolbar-height) + 8px);background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--line) var(--soft);border-radius:0 0 10px 10px;scroll-margin-bottom:24px;position:relative;overflow:auto}.tutorial-demo .fbd-viewport::-webkit-scrollbar{height:8px}.tutorial-demo .fbd-viewport::-webkit-scrollbar-track{background:var(--soft)}.tutorial-demo .fbd-viewport::-webkit-scrollbar-thumb{border:2px solid var(--soft);background:var(--muted);border-radius:4px}.tutorial-demo .fbd-canvas{width:100%;max-width:var(--fbd-native-width);aspect-ratio:var(--fbd-aspect);margin-inline:auto;position:relative;overflow:hidden}.tutorial-demo .fbd-frame{width:var(--fbd-native-width);max-width:none;height:var(--fbd-native-height);background:var(--panel);transform:scale(var(--fbd-scale));transform-origin:0 0;border:0;position:absolute;top:0;left:0}.tutorial-demo .fbd-cover{background:var(--panel);position:absolute;inset:0;overflow:hidden}.tutorial-demo .fbd-cover img{object-fit:cover;object-position:left top;width:100%;height:100%;display:block;position:absolute;inset:0}.tutorial-demo .fbd-loading{background:color-mix(in srgb, var(--panel) 92%, transparent);color:var(--ink);justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.tutorial-demo .fbd-loading p{margin:0;font-size:13px}.tutorial-demo .fbd-loading-mark{border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:17px;height:17px;animation:.9s linear infinite fbd-loading}.tutorial-demo .fbd-pan-hint{color:var(--muted);margin:12px 0 0;font-size:11px}.tutorial-demo .fbd-error{border-left:2px solid var(--accent);background:var(--accent-soft);color:var(--ink);margin:12px 14px;padding:11px 13px;font-size:12px}.tutorial-demo .fbd-noscript{color:var(--muted);margin:0;padding:14px;font-size:12px}.tutorial-demo[data-expanded=true]{z-index:100;width:min(1600px,100vw - 32px);height:auto;max-height:calc(100dvh - 32px);position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax #10141dc9,0 24px 90px #0004}.tutorial-demo[data-expanded=true] .fbd-toolbar{top:0}.tutorial-demo[data-expanded=true] .fbd-viewport{scroll-margin-top:calc(var(--fbd-toolbar-height) + 8px)}.tutorial-demo[data-expanded=true] .fbd-canvas{width:calc(var(--fbd-native-width) * var(--fbd-scale));max-width:none}@keyframes fbd-loading{to{transform:rotate(360deg)}}@media (width<=1100px){.tutorial-demo .fbd-toolbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.tutorial-demo .fbd-heading{clip-path:inset(50%);width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}}@media (width<=560px){.tutorial-demo{border-radius:8px}.tutorial-demo .fbd-toolbar{border-radius:8px 8px 0 0;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;padding:8px}.tutorial-demo .fbd-playback{gap:2px}.tutorial-demo .fbd-playback button{min-height:36px;padding-inline:8px;font-size:11px}.tutorial-demo .fbd-expand{grid-area:1/2;min-height:36px;font-size:11px}.tutorial-demo .fbd-progress{grid-area:2/1/auto/-1;width:100%}.tutorial-demo .fbd-progress>summary{justify-content:space-between;min-height:32px;padding-block:4px}.tutorial-demo .fbd-step-panel{width:auto;left:0;right:0}.tutorial-demo .fbd-viewport{border-radius:0 0 8px 8px}.tutorial-demo[data-expanded=true]{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}}@media (prefers-reduced-motion:reduce){.tutorial-demo *,.tutorial-demo :before,.tutorial-demo :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media print{.tutorial-demo[data-expanded=true]{width:100%;height:auto;box-shadow:none;position:relative;top:auto;left:auto;overflow:visible;transform:none}.tutorial-demo .fbd-frame,.tutorial-demo .fbd-toolbar,.tutorial-demo .fbd-loading{display:none!important}.tutorial-demo .fbd-cover[hidden]{display:block!important}}