#canvas-tour{position:fixed;inset:auto 24px 98px auto;margin:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 128px);overflow:auto;padding:22px;border:1px solid var(--theme-border,#e1e4e8);border-radius:22px;background:var(--theme-surface,#fff);color:var(--theme-ink,#292b30);box-shadow:0 18px 65px #11182720,0 3px 10px #11182708;font:14px/1.55 BDO,Arial,sans-serif}
#canvas-tour::backdrop{background:#11182716;backdrop-filter:none}
#canvas-tour[open]{animation:tour-arrive 220ms cubic-bezier(.2,.8,.2,1)}
#canvas-tour .tour-top,#canvas-tour .tour-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
#canvas-tour .tour-count{color:var(--theme-muted,#787d86);font-size:12px}
#canvas-tour button{font:inherit;min-height:40px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}
#canvas-tour button:focus-visible{outline:2px solid #6685cf;outline-offset:3px}
#canvas-tour button:active{transform:scale(.97)}
#canvas-tour button:disabled{opacity:.3;cursor:default}
#canvas-tour [data-tour=skip]{font-size:12px;color:var(--theme-muted,#787d86);padding-right:0}
#canvas-tour [data-tour=next]{background:var(--theme-ink,#292b30);color:var(--theme-surface,#fff);min-width:84px}
#canvas-tour .tour-art{position:relative;height:110px;margin:12px 0 4px;display:flex;align-items:center;justify-content:space-around;gap:9px;background:radial-gradient(var(--theme-border,#d8dce3) .8px,transparent .8px) 0 0/14px 14px;border-radius:12px}
#canvas-tour .tour-art svg{position:absolute;width:100%;height:100%;inset:0;fill:none;stroke:#6685cf;stroke-width:1.5;stroke-dasharray:3 5}
#canvas-tour .tour-tile{position:relative;padding:9px 10px;max-width:110px;font-size:11px;line-height:1.35;text-align:center;border:1px solid var(--theme-border,#e0e4ea);border-radius:9px;background:var(--theme-surface,#fff);box-shadow:0 3px 8px #11182706}
#canvas-tour .tour-tile:nth-of-type(2){transform:translateY(-18px)}
#canvas-tour .tour-tile:nth-of-type(3){transform:translateY(17px)}
#canvas-tour .tour-guide{width:64px;height:64px;margin:10px 0 -5px 4px;position:relative;z-index:1;transform:rotate(-6deg)}
#canvas-tour .tour-guide img{display:block;width:100%;height:100%;object-fit:contain}
#canvas-tour .tour-message{padding:16px 18px 18px;background:var(--theme-control,#f5f6f8);border-radius:4px 16px 16px 16px;min-height:158px}
#canvas-tour h2{font-size:21px;letter-spacing:-.65px;line-height:1.2;font-weight:500;margin:0 0 10px}
#canvas-tour p{font-size:14px;line-height:1.6;color:var(--theme-muted,#626974);margin:0}
#canvas-tour .tour-controls{margin-top:18px}
#canvas-tour .tour-dots{display:flex;gap:5px}
#canvas-tour .tour-dots i{height:5px;width:5px;border-radius:99px;background:var(--theme-border,#d9dde4)}
#canvas-tour .tour-dots i.current{width:16px;background:#6685cf}
body.canvas-tour-open #first-use-tip{visibility:hidden}
@keyframes tour-arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){#canvas-tour{right:16px;bottom:88px;padding:18px;max-height:calc(100dvh - 110px)}#canvas-tour .tour-message{min-height:0}#canvas-tour .tour-art{height:86px}#canvas-tour .tour-guide{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){#canvas-tour[open]{animation:none}#canvas-tour button:active{transform:none}}
/* The guide follows the feature being introduced; camera movement is local only. */
#canvas-tour{width:min(350px,calc(100vw - 32px));inset:auto;margin:0;transition:left 380ms cubic-bezier(.2,.8,.2,1),top 380ms cubic-bezier(.2,.8,.2,1);overflow:auto;padding:18px}
#canvas-tour .tour-art{display:none}
#canvas-tour .tour-message{min-height:0}
#canvas-tour .tour-guide{margin-top:4px}
#canvas-tour[data-scene=welcome] .tour-art{display:flex;height:76px;margin-top:4px}
#canvas-tour::backdrop{background:#11182708}
.tour-highlight{outline:2px solid #6685cf!important;outline-offset:6px!important;box-shadow:0 0 0 10px #6685cf16!important;border-radius:10px}
body.canvas-tour-open :is(.nib,[data-branch-point]).tour-highlight{opacity:1!important;visibility:visible!important}
.tour-samples{position:absolute;left:80px;top:100px;width:760px;height:280px;pointer-events:none}
.tour-samples svg{position:absolute;inset:0;width:760px;height:250px;fill:none;stroke:#6685cf;stroke-width:2;stroke-dasharray:4 6}
.tour-example{position:absolute;left:0;top:0;width:270px;padding:22px;background:var(--theme-surface,#fff);color:var(--theme-ink,#292b30);border:1px solid var(--theme-border,#dfe3e9);border-radius:18px;box-shadow:0 5px 20px #1f293710}
.tour-example small{display:block;font-size:11px;color:var(--theme-muted,#727985);margin-bottom:16px}
.tour-example strong{display:block;font-size:18px;font-weight:500;letter-spacing:-.5px}
.tour-example p{font-size:14px;line-height:1.6;margin:10px 0 0;color:var(--theme-muted,#727985)}
.tour-example[data-tour-example=chat]{left:435px;top:95px}
.tour-example-nib{position:absolute;width:8px;height:24px;background:#6685cf;border-radius:10px;right:-18px;top:78px}
@media(max-width:699px){#canvas-tour{width:calc(100vw - 32px);max-height:calc(100dvh - 110px)}#canvas-tour .tour-guide{width:44px;height:44px}#canvas-tour .tour-message{padding:14px}#canvas-tour h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){#canvas-tour{transition:none}}
body.canvas-tour-open #empty-note{visibility:hidden}
/* The opening example teaches shared visibility, planning and context first. */
.tour-samples{width:1110px;height:650px}
.tour-samples .tour-overview-frame{position:absolute;inset:0 auto auto 0;width:740px;height:650px;pointer-events:none}
.tour-samples .tour-branch-frame{position:absolute;left:400px;top:0;width:710px;height:350px;pointer-events:none}
.tour-samples svg{width:1110px;height:650px}
.tour-samples .tour-example{width:300px;padding:20px 22px}
.tour-samples .tour-example small{display:flex;align-items:center;gap:7px;min-height:22px;margin-bottom:12px}
.tour-samples .tour-example strong{font-size:20px}
.tour-samples .tour-example p{font-size:15px;margin-top:10px}
.tour-samples .tour-example ul{padding-left:18px;margin:12px 0 0;font-size:14px;line-height:1.85;color:var(--theme-muted,#727985)}
.tour-samples [data-tour-example=brief]{left:0;top:120px}
.tour-samples [data-tour-example=design]{left:410px;top:0}
.tour-samples [data-tour-example=data]{left:410px;top:220px}
.tour-samples [data-tour-example=you]{left:410px;top:440px}
.tour-samples [data-tour-example=plan]{left:0;top:400px}
.tour-samples [data-tour-example=branch]{left:800px;top:120px}
.tour-samples .tour-example .tour-prompt{background:var(--theme-control,#f1f3f6);padding:9px 11px;border-radius:11px;font-size:14px;line-height:1.4;color:var(--theme-ink,#363a42)}
.tour-person{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:11px/1 BDO,Arial,sans-serif;color:#3d4658;background:#e8eef9}
.tour-person.coral{background:#f6e9e3}.tour-person.green{background:#e7efe6}
.tour-example-input{position:absolute;width:8px;height:24px;background:#6685cf;border-radius:10px;left:-18px;top:78px}
.tour-samples .tour-example,.tour-samples svg{transition:opacity 250ms ease}
.tour-samples[data-scene=brief] :is(.tour-thread,[data-tour-example=plan],svg),.tour-samples:not([data-scene=branch]) :is([data-tour-example=branch],.tour-branch-wire){opacity:0;visibility:hidden}
.tour-samples[data-scene=team]{visibility:hidden}
@media(prefers-reduced-motion:reduce){.tour-samples .tour-example,.tour-samples svg{transition:none}}
.tour-samples .tour-thread{padding:16px 18px}
.tour-samples .tour-thread small{margin-bottom:8px}
.tour-samples .tour-thread strong{font-size:18px}
.tour-samples .tour-thread p{font-size:14px;line-height:1.45;margin-top:8px}