/* Tutorial companion panel v2: one step at a time, a thick progress bar, Duolingo-style quiz
   feedback, calm Apple-like typography. Depth lives behind "深入了解". */
:is(#main,body) .tp{--tp-purple:#7532d6;--tp-purple-soft:color-mix(in srgb,#7532d6 10%,var(--bg));--tp-green:#3f8f0d;--tp-green-bg:#eef8e6;--tp-green-btn:#58a700;--tp-green-edge:#46870a;--tp-warn:#c2410c;--tp-warn-bg:#fff2ea;--tp-warn-btn:#e8590c;--tp-warn-edge:#b8470a;--tp-soft:color-mix(in srgb,var(--ink) 4%,var(--bg));--tp-hair:color-mix(in srgb,var(--ink) 10%,var(--bg))}
:root[data-theme=dark] :is(#main,body) .tp{--tp-purple:#b39cf7;--tp-green:#7fd24a;--tp-green-bg:#16240d;--tp-warn:#ff9a62;--tp-warn-bg:#2a160c;--tp-soft:color-mix(in srgb,var(--ink) 7%,var(--bg));--tp-hair:color-mix(in srgb,var(--ink) 15%,var(--bg))}
:is(#main,body) .tp{position:absolute;z-index:16;right:16px;top:calc(var(--header-height) + 0px);bottom:16px;width:320px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
:is(#main,body) .tp :is(h2,h3,p,ol,ul,li){margin:0}
:is(#main,body) .tp button{font:inherit}

/* Head */
:is(#main,body) .tp .tp-head{display:flex;align-items:center;gap:8px;padding:16px 16px 0 20px}
:is(#main,body) .tp .tp-lesson{flex:1;min-width:0;overflow:hidden;font-size:13px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
:is(#main,body) .tp .tp-lesson a{color:inherit;text-decoration:none}
:is(#main,body) .tp .tp-lesson a:hover{color:var(--ink)}
:is(#main,body) .tp .tp-icon{all:unset;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;color:var(--muted);cursor:pointer}
:is(#main,body) .tp .tp-icon:hover{background:var(--tp-soft);color:var(--ink)}
:is(#main,body) .tp .tp-icon:focus-visible{outline:2px solid var(--ink)}
:is(#main,body) .tp .tp-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Thick progress bar with a soft highlight, Duolingo-like */
:is(#main,body) .tp .tp-progress{display:flex;align-items:center;gap:10px;padding:12px 20px 0}
:is(#main,body) .tp .tp-track{position:relative;flex:1;height:10px;overflow:hidden;border-radius:999px;background:var(--tp-soft)}
:is(#main,body) .tp .tp-fill{position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:inherit;background:var(--tp-purple);transition:width .6s cubic-bezier(.3,1.4,.5,1)}

:is(#main,body) .tp .tp-count{flex:none;font-size:13px;font-weight:600;color:var(--muted)}

/* Scrolling body */
:is(#main,body) .tp .tp-body{flex:1;overflow:auto;padding:24px 20px 20px;scrollbar-width:thin}
:is(#main,body) .tp .tp-kicker{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--tp-purple)}
:is(#main,body) .tp .tp-title{margin:0 0 10px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
:is(#main,body) .tp .tp-what{margin:0 0 10px;font-size:15px;line-height:1.6}
:is(#main,body) .tp .tp-why{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--muted)}
:is(#main,body) .tp .tp-why b{font-weight:600;color:var(--ink)}
:is(#main,body) .tp .tp-more{margin:0 0 20px}
:is(#main,body) .tp .tp-more summary{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--tp-purple);cursor:pointer;list-style:none}
:is(#main,body) .tp .tp-more summary::-webkit-details-marker{display:none}
:is(#main,body) .tp .tp-more summary::after{content:"›";font-size:16px;line-height:1;transition:transform .2s}
:is(#main,body) .tp .tp-more[open] summary::after{transform:rotate(90deg)}
:is(#main,body) .tp .tp-more ul{display:grid;gap:8px;margin:10px 0 0;padding:14px 16px;border-radius:14px;background:var(--tp-soft);font-size:13px;line-height:1.6;list-style:none}
:is(#main,body) .tp .tp-more li{padding:0}
:is(#main,body) .tp .tp-go{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--tp-soft);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
:is(#main,body) .tp .tp-go:hover{background:var(--tp-hair)}
:is(#main,body) .tp .tp-auto{margin:12px 0 0;font-size:12px;color:var(--muted)}

/* Quiz */
:is(#main,body) .tp .tp-q{margin:4px 0 12px;font-size:16px;font-weight:600;line-height:1.45}
:is(#main,body) .tp .tp-choices{display:grid;gap:10px}
:is(#main,body) .tp .tp-choice{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border:2px solid var(--tp-hair);border-radius:14px;box-shadow:0 2px 0 var(--tp-hair);font-size:15px;line-height:1.4;cursor:pointer;transition:border-color .15s,background-color .15s,transform .08s}
:is(#main,body) .tp .tp-choice:hover{background:var(--tp-soft)}
:is(#main,body) .tp .tp-choice:active{transform:translateY(2px);box-shadow:none}
:is(#main,body) .tp .tp-choice:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:is(#main,body) .tp .tp-key{flex:none;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--tp-hair);border-radius:8px;font-size:12px;font-weight:700;color:var(--muted)}
:is(#main,body) .tp .tp-choice[aria-pressed=true]{border-color:var(--tp-purple);background:var(--tp-purple-soft);box-shadow:0 2px 0 var(--tp-purple)}
:is(#main,body) .tp .tp-choice[aria-pressed=true] .tp-key{border-color:var(--tp-purple);color:var(--tp-purple)}
:is(#main,body) .tp .tp-choice.is-right{border-color:var(--tp-green-btn);background:var(--tp-green-bg);box-shadow:0 2px 0 var(--tp-green-btn)}
:is(#main,body) .tp .tp-choice.is-right .tp-key{border-color:var(--tp-green-btn);background:var(--tp-green-btn);color:#fff}
:is(#main,body) .tp .tp-choice.is-wrong{border-color:var(--tp-warn-btn);background:var(--tp-warn-bg);box-shadow:0 2px 0 var(--tp-warn-btn);animation:tp-shake .4s}
:is(#main,body) .tp .tp-choice.is-wrong .tp-key{border-color:var(--tp-warn-btn);color:var(--tp-warn)}
@keyframes tp-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* Footer: the check button, replaced by the feedback sheet after checking */
:is(#main,body) .tp .tp-foot{position:relative;padding:16px 20px 20px;border-top:1px solid var(--tp-hair);background:var(--bg)}
:is(#main,body) .tp .tp-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:48px;border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .08s,box-shadow .08s}
:is(#main,body) .tp .tp-btn:active{transform:translateY(3px);box-shadow:none!important}
:is(#main,body) .tp .tp-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:is(#main,body) .tp .tp-btn-main{background:var(--ink);color:var(--bg);box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 60%,var(--bg))}
:is(#main,body) .tp .tp-btn-main:disabled,:is(#main,body) .tp .tp-btn-main[aria-disabled=true]{background:var(--tp-soft);color:var(--muted);box-shadow:0 3px 0 var(--tp-hair);cursor:default}
:is(#main,body) .tp .tp-sheet{display:none}
:is(#main,body) .tp .tp-foot.is-right,:is(#main,body) .tp .tp-foot.is-wrong{border-top-color:transparent;animation:tp-rise .28s cubic-bezier(.2,.9,.3,1.2)}
:is(#main,body) .tp .tp-foot.is-right{background:var(--tp-green-bg)}
:is(#main,body) .tp .tp-foot.is-wrong{background:var(--tp-warn-bg)}
:is(#main,body) .tp .tp-foot.is-right .tp-sheet,:is(#main,body) .tp .tp-foot.is-wrong .tp-sheet{display:flex;gap:12px;margin:0 0 14px}
:is(#main,body) .tp .tp-badge{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff}
:is(#main,body) .tp .tp-badge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
:is(#main,body) .tp .is-right .tp-badge{background:var(--tp-green-btn);animation:tp-pop .45s cubic-bezier(.2,1.6,.4,1)}
:is(#main,body) .tp .is-wrong .tp-badge{background:var(--tp-warn-btn)}
:is(#main,body) .tp .tp-sheet h3{margin:0 0 2px;font-size:17px;font-weight:700}
:is(#main,body) .tp .is-right .tp-sheet h3{color:var(--tp-green)}
:is(#main,body) .tp .is-wrong .tp-sheet h3{color:var(--tp-warn)}
:is(#main,body) .tp .tp-sheet p{font-size:13px;line-height:1.55}
:is(#main,body) .tp .is-right .tp-btn-main{background:var(--tp-green-btn);color:#fff;box-shadow:0 3px 0 var(--tp-green-edge)}
:is(#main,body) .tp .is-wrong .tp-btn-main{background:var(--tp-warn-btn);color:#fff;box-shadow:0 3px 0 var(--tp-warn-edge)}
@keyframes tp-rise{from{transform:translateY(16px);opacity:.4}}
@keyframes tp-pop{0%{transform:scale(.3)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Small burst around the badge */
:is(#main,body) .tp .tp-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--tp-green-btn);opacity:0;animation:tp-spark .6s ease-out forwards}
@keyframes tp-spark{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-30px)}}

/* Lesson complete */
:is(#main,body) .tp .tp-done{display:grid;justify-items:center;gap:12px;padding:12px 0 0;text-align:center}
:is(#main,body) .tp .tp-ring{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--tp-green-bg);color:var(--tp-green-btn);animation:tp-pop .5s cubic-bezier(.2,1.6,.4,1)}
:is(#main,body) .tp .tp-ring svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
:is(#main,body) .tp .tp-done h2{font-size:22px;font-weight:700}
:is(#main,body) .tp .tp-stats{display:flex;gap:8px}
:is(#main,body) .tp .tp-stat{padding:10px 14px;border:2px solid var(--tp-hair);border-radius:14px;font-size:12px;color:var(--muted)}
:is(#main,body) .tp .tp-stat b{display:block;font-size:17px;color:var(--ink)}
:is(#main,body) .tp .tp-recap{display:grid;gap:8px;margin:8px 0 0;text-align:left;font-size:13px;line-height:1.6}

@media(prefers-reduced-motion:reduce){:is(#main,body) .tp *,:is(#main,body) .tp{animation:none!important;transition:none!important}}

/* Inline variant: the lesson player on the tutorial page (journey.html), right of the lesson list. */
:is(#main,body) .tp.is-inline{position:sticky;top:0;right:auto;bottom:auto;width:auto;height:calc(100dvh - var(--header-height) - 96px);min-height:560px}
:is(#main,body) .tp.is-inline .tp-head{padding:20px 24px 0 28px}
:is(#main,body) .tp.is-inline .tp-progress{padding:14px 28px 0}
:is(#main,body) .tp.is-inline .tp-body{padding:36px 28px 24px}
:is(#main,body) .tp.is-inline .tp-body>*{max-width:560px}
:is(#main,body) .tp.is-inline .tp-title{font-size:26px}
:is(#main,body) .tp.is-inline .tp-what{font-size:16px}
:is(#main,body) .tp.is-inline .tp-choice{min-height:56px;font-size:16px}
:is(#main,body) .tp.is-inline .tp-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:18px 28px 22px}
:is(#main,body) .tp.is-inline .tp-foot .tp-sheet{flex:1;margin:0}
:is(#main,body) .tp.is-inline .tp-btn{width:auto;min-width:168px;padding:0 28px}
@media(max-width:760px){
 :is(#main,body) .tp.is-inline{position:relative;height:auto;min-height:calc(100dvh - var(--header-height) - 48px)}
 :is(#main,body) .tp.is-inline .tp-foot{display:block}
 :is(#main,body) .tp.is-inline .tp-foot .tp-sheet{margin:0 0 14px}
 :is(#main,body) .tp.is-inline .tp-btn{width:100%}
}
/* Content (reading) steps: depth without clutter. One idea per block, generous spacing. */
:is(#main,body) .tp .tp-lead{margin:0 0 20px;font-size:16px;line-height:1.7}
:is(#main,body) .tp .tp-block{margin:0 0 20px}
:is(#main,body) .tp .tp-label{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted)}
:is(#main,body) .tp .tp-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
:is(#main,body) .tp .tp-node{padding:8px 12px;border-radius:12px;background:var(--tp-soft);line-height:1.4}
:is(#main,body) .tp .tp-node b{display:block;font-size:14px}
:is(#main,body) .tp .tp-node.is-you{background:var(--tp-purple-soft);color:var(--tp-purple)}
:is(#main,body) .tp .tp-arrow{color:var(--muted)}
:is(#main,body) .tp .tp-formula{padding:14px 16px;border-radius:14px;background:var(--tp-purple-soft);font-size:15px;font-weight:600;line-height:1.6;color:var(--ink)}
:is(#main,body) .tp .tp-formula span{color:var(--tp-purple)}
:is(#main,body) .tp .tp-ledger{display:block;margin:0;padding:4px 16px;border:1px solid var(--tp-hair);border-radius:14px;font-size:14px}
:is(#main,body) .tp .tp-ledger div{display:flex;justify-content:space-between;gap:12px;padding:9px 0}
:is(#main,body) .tp .tp-ledger div+div{border-top:1px solid var(--tp-hair)}
:is(#main,body) .tp .tp-ledger dt{color:var(--muted)}
:is(#main,body) .tp .tp-ledger dd{margin:0;font-weight:600}
:is(#main,body) .tp .tp-ledger .is-total dt{font-weight:600;color:var(--ink)}
:is(#main,body) .tp .tp-ledger .is-total dd{color:var(--tp-green)}
:is(#main,body) .tp .tp-note{margin:8px 0 0;font-size:12px;color:var(--muted)}

/* Sound off: a red cross over the whole speaker. */
:is(#main,body) .tp .tp-icon.is-off{color:var(--muted)}
:is(#main,body) .tp .tp-icon .tp-x{stroke:#e5484d;stroke-width:2.4}

/* Footer row: back to the previous step + the main button. */
:is(#main,body) .tp .tp-row{display:flex;gap:10px}
:is(#main,body) .tp .tp-row .tp-btn-main{flex:1}
:is(#main,body) .tp .tp-back{all:unset;box-sizing:border-box;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--tp-soft);color:var(--ink);cursor:pointer}
:is(#main,body) .tp .tp-back:hover{background:var(--tp-hair)}
:is(#main,body) .tp .tp-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:is(#main,body) .tp .tp-back[hidden]{display:none}
:is(#main,body) .tp .tp-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:is(#main,body) .tp.is-inline .tp-row{flex:none}
:is(#main,body) .tp.is-inline .tp-row .tp-btn-main{flex:none}
:is(#main,body) .tp .tp-review{margin:0 0 16px;padding:8px 12px;border-radius:10px;background:var(--tp-soft);font-size:12px;color:var(--muted)}
:is(#main,body) .tp .tp-choice[disabled]{cursor:default}
:is(#main,body) .tp .tp-choice[disabled]:hover{background:inherit}

/* "Take me there" button next to the direct link. */
:is(#main,body) .tp .tp-go-row{display:flex;flex-wrap:wrap;gap:8px}
:is(#main,body) .tp .tp-guide{all:unset;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;background:var(--tp-purple);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:filter .15s ease,transform .2s var(--spring-soft,ease)}
:is(#main,body) .tp .tp-guide svg{width:15px;height:15px}
:is(#main,body) .tp .tp-guide:active{transform:scale(.97)}
:is(#main,body) .tp .tp-guide:hover{filter:brightness(1.08)}
:is(#main,body) .tp .tp-guide:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Sidebar nudge towards the full tutorial page. */
:is(#main,body) .tp .tp-hint{display:flex;align-items:center;gap:8px;margin:12px 16px 0 20px;padding:10px 12px;border-radius:12px;background:var(--tp-purple-soft);font-size:12px;line-height:1.5}
:is(#main,body) .tp .tp-hint a{flex:none;font-weight:600;color:var(--tp-purple);text-decoration:none}
:is(#main,body) .tp .tp-hint a:hover{text-decoration:underline}
:is(#main,body) .tp .tp-hint button{all:unset;flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--muted);cursor:pointer}
:is(#main,body) .tp .tp-hint button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* Coach marks: dim the page, spotlight one control, explain it in a bubble. */
.coach-ring{position:fixed;z-index:2147482000;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,10,12,.48);pointer-events:none;transition:all .35s cubic-bezier(.2,.9,.3,1)}
.coach-ring::after{content:"";position:absolute;inset:-6px;border:3px solid #9b6bff;border-radius:18px;animation:coach-pulse 1.4s ease-out infinite}
@keyframes coach-pulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.coach-tip{position:fixed;z-index:2147482001;width:264px;padding:16px;border-radius:16px;background:var(--bg);color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.18);font-size:14px;line-height:1.55;animation:coach-in .3s cubic-bezier(.2,.9,.3,1.2)}
.coach-tip::before{content:"";position:absolute;left:-7px;top:22px;width:14px;height:14px;background:inherit;transform:rotate(45deg)}
.coach-tip small{display:block;margin:0 0 4px;font-size:12px;font-weight:600;color:#7532d6}
.coach-tip p{margin:0 0 12px}
.coach-tip div{display:flex;justify-content:space-between;align-items:center}
.coach-tip button{font:inherit;font-size:13px;font-weight:600;border:0;border-radius:999px;cursor:pointer}
.coach-tip [data-coach-next]{padding:8px 16px;background:var(--ink);color:var(--bg)}
.coach-tip [data-coach-skip]{padding:8px 4px;background:none;color:var(--muted)}
@keyframes coach-in{from{opacity:0;transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){.coach-ring,.coach-ring::after,.coach-tip{animation:none!important;transition:none!important}}

/* ===== Block library, phase 1 (see docs/tutorial-blocks.md). Every block works in the wide
   player (.tp.is-inline) and the 320px sidebar (.tp). ===== */
:is(#main,body) .tp.is-demo{position:relative;inset:auto;width:auto;height:auto;min-height:0}
:is(#main,body) .tp.is-demo .tp-body{overflow:visible}

/* Course intro */
:is(#main,body) .tp .tb-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 20px}
:is(#main,body) .tp:not(.is-inline) .tb-facts{grid-template-columns:1fr}
:is(#main,body) .tp .tb-fact{padding:12px 14px;border-radius:14px;background:var(--tp-soft);font-size:12px;line-height:1.45;color:var(--muted)}
:is(#main,body) .tp .tb-fact b{display:block;margin:0 0 2px;font-size:15px;color:var(--ink)}

/* True / false */
:is(#main,body) .tp .tb-statement{margin:0 0 16px;padding:22px 20px;border-radius:16px;background:var(--tp-soft);font-size:18px;font-weight:600;line-height:1.5;text-align:center}
:is(#main,body) .tp .tb-tf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
:is(#main,body) .tp .tb-tf .tp-choice{justify-content:center;font-size:16px;font-weight:700}

/* Number / calculation */
:is(#main,body) .tp .tb-given{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
:is(#main,body) .tp .tb-given span{padding:6px 12px;border-radius:999px;background:var(--tp-soft);font-size:13px}
:is(#main,body) .tp .tb-given b{font-weight:600}
:is(#main,body) .tp .tb-num{display:flex;align-items:center;gap:6px;height:56px;padding:0 16px;border:2px solid var(--tp-hair);border-radius:14px;box-shadow:0 2px 0 var(--tp-hair);font-size:22px;font-weight:600;transition:border-color .15s,background-color .15s}
:is(#main,body) .tp .tb-num span{color:var(--muted)}
:is(#main,body) .tp .tb-num input{all:unset;flex:1;min-width:0;font:inherit;color:var(--ink)}
:is(#main,body) .tp .tb-num:focus-within{border-color:var(--tp-purple);box-shadow:0 2px 0 var(--tp-purple)}
:is(#main,body) .tp .tb-num.is-right{border-color:var(--tp-green-btn);background:var(--tp-green-bg);box-shadow:0 2px 0 var(--tp-green-btn)}
:is(#main,body) .tp .tb-num.is-wrong{border-color:var(--tp-warn-btn);background:var(--tp-warn-bg);box-shadow:0 2px 0 var(--tp-warn-btn);animation:tp-shake .4s}
:is(#main,body) .tp .tb-hint{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--tp-purple-soft);font-size:13px;line-height:1.6}
:is(#main,body) .tp .tb-hint b{color:var(--tp-purple)}

/* Risk callout (one per lesson at most) */
:is(#main,body) .tp .tb-risk{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--tp-warn-bg);font-size:13px;line-height:1.6}
:is(#main,body) .tp .tb-risk svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--tp-warn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(#main,body) .tp .tb-risk strong{display:block;margin:0 0 2px;font-size:14px;color:var(--tp-warn)}

/* Good vs bad */
:is(#main,body) .tp .tb-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
:is(#main,body) .tp:not(.is-inline) .tb-compare{grid-template-columns:1fr}
:is(#main,body) .tp .tb-card{padding:14px;border:2px solid var(--tp-hair);border-radius:14px;font-size:13px;line-height:1.55}
:is(#main,body) .tp .tb-card header{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13px;font-weight:700}
:is(#main,body) .tp .tb-card header i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff}
:is(#main,body) .tp .tb-card header svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
:is(#main,body) .tp .tb-card.is-good{border-color:color-mix(in srgb,var(--tp-green-btn) 40%,var(--bg))}
:is(#main,body) .tp .tb-card.is-good header{color:var(--tp-green)}
:is(#main,body) .tp .tb-card.is-good header i{background:var(--tp-green-btn)}
:is(#main,body) .tp .tb-card.is-bad{border-color:color-mix(in srgb,var(--tp-warn-btn) 40%,var(--bg))}
:is(#main,body) .tp .tb-card.is-bad header{color:var(--tp-warn)}
:is(#main,body) .tp .tb-card.is-bad header i{background:var(--tp-warn-btn)}
:is(#main,body) .tp .tb-sample{margin:0 0 8px;padding:10px 12px;border-radius:10px;background:var(--tp-soft);font-size:13px;font-weight:600;line-height:1.5}
:is(#main,body) .tp .tb-card p{color:var(--muted)}

/* Checklist */
:is(#main,body) .tp .tb-list-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px;font-size:14px;font-weight:600}
:is(#main,body) .tp .tb-list-head span{font-size:13px;color:var(--muted)}
:is(#main,body) .tp .tb-checklist{display:grid;gap:8px;margin:0;padding:0;list-style:none}
:is(#main,body) .tp .tb-item{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 14px;border:2px solid var(--tp-hair);border-radius:14px;font-size:15px;cursor:pointer;transition:border-color .15s,background-color .15s}
:is(#main,body) .tp .tb-item:hover{background:var(--tp-soft)}
:is(#main,body) .tp .tb-item:has(input:checked){border-color:color-mix(in srgb,var(--tp-green-btn) 45%,var(--bg))}
:is(#main,body) .tp .tb-item small{display:block;font-size:12px;color:var(--muted)}
:is(#main,body) .tp :is(.tb-item,.tb-confirm) input{appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border:2px solid var(--tp-hair);border-radius:7px;background:var(--bg);cursor:pointer;transition:background-color .15s,border-color .15s}
:is(#main,body) .tp :is(.tb-item,.tb-confirm) input:checked{border-color:var(--tp-green-btn);background:var(--tp-green-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8.5'/%3E%3C/svg%3E") center/14px no-repeat;animation:tp-pop .3s cubic-bezier(.2,1.6,.4,1)}
:is(#main,body) .tp :is(.tb-item,.tb-confirm) input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Copy a template or listing text */
:is(#main,body) .tp .tb-copy{overflow:hidden;border:2px solid var(--tp-hair);border-radius:14px}
:is(#main,body) .tp .tb-copy-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-size:13px;font-weight:600}
:is(#main,body) .tp .tb-copy-head span{font-weight:400;color:var(--muted)}
:is(#main,body) .tp .tb-copy pre{max-height:120px;margin:0;padding:12px 14px;overflow:hidden;background:var(--tp-soft);font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;color:var(--ink);-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
:is(#main,body) .tp .tb-copy.is-open pre{max-height:none;-webkit-mask-image:none;mask-image:none}
:is(#main,body) .tp .tb-copy-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px}
:is(#main,body) .tp .tb-pill{all:unset;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;cursor:pointer}
:is(#main,body) .tp .tb-pill.is-ghost{background:var(--tp-soft);color:var(--ink)}
:is(#main,body) .tp .tb-pill.is-done{background:var(--tp-green-btn);color:#fff}
:is(#main,body) .tp .tb-pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:is(#main,body) .tp .tb-confirm{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:14px;cursor:pointer}

/* Fill-in record */
:is(#main,body) .tp .tb-form{display:grid;gap:14px}
:is(#main,body) .tp .tb-field{display:grid;gap:6px;font-size:13px;font-weight:600}
:is(#main,body) .tp .tb-field small{font-size:12px;font-weight:400;color:var(--muted)}
:is(#main,body) .tp .tb-field :is(input,select,textarea){all:unset;box-sizing:border-box;width:100%;min-height:46px;padding:11px 14px;border:2px solid var(--tp-hair);border-radius:12px;background:var(--bg);font-size:15px;font-weight:400;line-height:1.4;color:var(--ink)}
:is(#main,body) .tp .tb-field textarea{min-height:84px;white-space:pre-wrap}
:is(#main,body) .tp .tb-field select{padding-right:40px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat;cursor:pointer}
:is(#main,body) .tp .tb-field :is(input,select,textarea):focus{border-color:var(--tp-purple)}
:is(#main,body) .tp .tb-saved{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--tp-green-bg);font-size:12px;font-weight:600;color:var(--tp-green)}
:is(#main,body) .tp .tb-saved[hidden]{display:none}

/* Submit a link and check it */
:is(#main,body) .tp .tb-url{display:flex;align-items:flex-end;gap:8px}
:is(#main,body) .tp:not(.is-inline) .tb-url{flex-direction:column;align-items:stretch}
:is(#main,body) .tp .tb-url .tb-field{flex:1}
:is(#main,body) .tp .tb-url .tb-pill{flex:none;justify-content:center;height:46px;padding:0 18px;border-radius:12px}
:is(#main,body) .tp .tb-results{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
:is(#main,body) .tp .tb-result{display:flex;gap:10px;font-size:14px;line-height:1.5}
:is(#main,body) .tp .tb-result i{flex:none;display:grid;place-items:center;box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:var(--tp-soft);color:#fff}
:is(#main,body) .tp .tb-result svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
:is(#main,body) .tp .tb-result small{display:block;font-size:12px;color:var(--muted)}
:is(#main,body) .tp .tb-result.is-ok i{background:var(--tp-green-btn)}
:is(#main,body) .tp .tb-result.is-bad i{background:var(--tp-warn-btn)}
:is(#main,body) .tp .tb-result.is-wait i{border:2px solid var(--tp-hair);border-top-color:var(--tp-purple);background:none;animation:tb-spin .8s linear infinite}
@keyframes tb-spin{to{transform:rotate(360deg)}}

/* Off-site admin step */
:is(#main,body) .tp .tb-path{display:inline-flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:8px 12px;border-radius:12px;background:var(--tp-soft);font-size:13px;line-height:1.5}
:is(#main,body) .tp .tb-path span{color:var(--muted)}
:is(#main,body) .tp .tb-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
:is(#main,body) .tp:not(.is-inline) .tb-actions{flex-direction:column}
:is(#main,body) .tp .tb-actions .tb-pill{justify-content:center;height:42px;padding:0 18px}
:is(#main,body) .tp .tb-status{display:block;padding:12px 14px;border-radius:12px;background:var(--tp-soft);font-size:13px;line-height:1.5}
:is(#main,body) .tp .tb-manual{margin:10px 0 0;font-size:12px;color:var(--muted)}
:is(#main,body) .tp .tb-manual button{all:unset;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
:is(#main,body) .tp .tb-shot{margin:16px 0 0}
:is(#main,body) .tp .tb-shot img{display:block;width:100%;height:auto;border:1px solid var(--tp-hair);border-radius:12px}
:is(#main,body) .tp .tb-shot figcaption{margin:6px 0 0;font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){:is(#main,body) .tp .tb-result.is-wait i{animation:none}}

/* Page-wide "#main input:not([type=checkbox]):not([type=radio])" (1,3,1) would repaint block inputs; match it. */
:is(#main,body) .tp .tb-num input:not([type=checkbox]):not([type=radio]){background:transparent;border:0;color:var(--ink)}
:is(#main,body) .tp .tb-field :is(input,select,textarea):not([type=checkbox]):not([type=radio]){border:2px solid var(--tp-hair);background-color:var(--bg);color:var(--ink)}
:is(#main,body) .tp .tb-field :is(input,select,textarea):not([type=checkbox]):not([type=radio]):focus{border-color:var(--tp-purple);outline:0}
/* Editorial blocks (replace the formula box + check-bullet look, which read as generated). */
:is(#main,body) .tp .tb-hero-q{margin:0 0 22px;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
:is(#main,body) .tp.is-inline .tb-hero-q{font-size:30px}
:is(#main,body) .tp .tb-split{margin:0 0 22px}
:is(#main,body) .tp .tb-split-bar{display:flex;gap:2px;height:44px;overflow:hidden;border-radius:12px}
:is(#main,body) .tp .tb-seg{flex:var(--w) 1 0;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--c);font-size:13px;font-weight:700;color:#fff;transform-origin:left;animation:tb-grow .7s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 110ms)}
:is(#main,body) .tp .tb-seg:not(.is-you){font-size:0}
:is(#main,body) .tp .tb-seg.is-you{background:var(--tp-green-btn)}
@keyframes tb-grow{from{transform:scaleX(0);opacity:0}}
:is(#main,body) .tp .tb-prose{margin:0 0 18px;font-size:15px;line-height:1.8}
:is(#main,body) .tp.is-inline .tb-prose{font-size:16px}
:is(#main,body) .tp .tb-prose strong{font-weight:600}
:is(#main,body) .tp .tb-meta{margin:0;font-size:13px;color:var(--muted)}
:is(#main,body) .tp .tb-receipt{margin:0 0 20px;padding:16px 18px;border-radius:14px;background:var(--tp-soft);font-size:14px}
:is(#main,body) .tp .tb-receipt-title{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--muted)}
:is(#main,body) .tp .tb-receipt dl{display:block;margin:0}
:is(#main,body) .tp .tb-receipt div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
:is(#main,body) .tp .tb-receipt dt{color:var(--muted)}
:is(#main,body) .tp .tb-receipt dd{margin:0;font:600 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:is(#main,body) .tp .tb-receipt .is-total{margin:8px 0 0;padding:10px 0 0;border-top:1.5px dashed var(--tp-hair)}
:is(#main,body) .tp .tb-receipt .is-total dt{font-weight:600;color:var(--ink)}
:is(#main,body) .tp .tb-receipt .is-total dd{font-size:18px;color:var(--tp-green)}
@media(prefers-reduced-motion:reduce){:is(#main,body) .tp .tb-seg{animation:none}}

:is(#main,body) .tp .tb-field>span em{margin-left:4px;font-style:normal;font-weight:400;color:var(--muted)}
:is(#main,body) .tp .tb-manual[hidden]{display:none}

/* Intro stage: one big number counts down while costs push "your money" (green) smaller. */
:is(#main,body) .tp .tb-stage{margin:0 0 20px}
:is(#main,body) .tp .tb-big{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
:is(#main,body) .tp .tb-big-num{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .4s ease}
:is(#main,body) .tp.is-inline .tb-big-num{font-size:64px}
:is(#main,body) .tp .tb-big-num.is-final{color:var(--tp-green)}
:is(#main,body) .tp .tb-big-tag{font-size:15px;font-weight:600;color:var(--tp-green);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
:is(#main,body) .tp .tb-big-tag.is-on{opacity:1;transform:none}
:is(#main,body) .tp .tb-replay{all:unset;margin-left:auto;font-size:12px;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .3s}
:is(#main,body) .tp .tb-replay.is-on{opacity:1}
:is(#main,body) .tp .tb-replay:hover{color:var(--ink)}
:is(#main,body) .tp .tb-replay:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:is(#main,body) .tp .tb-drop{height:24px;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--tp-warn);font-variant-numeric:tabular-nums}
:is(#main,body) .tp .tb-drop span{display:inline-block;animation:tb-drop 1s ease both}
@keyframes tb-drop{0%{opacity:0;transform:translateY(-6px)}18%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
:is(#main,body) .tp .tb-stage .tb-split-bar{height:48px}
:is(#main,body) .tp .tb-stage .tb-seg{flex:var(--g,0) 1 0;overflow:hidden;white-space:nowrap;font-size:12px;animation:none;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1)}
:is(#main,body) .tp:not(.is-inline) .tb-stage .tb-seg:not(.is-you){font-size:0}
:is(#main,body) .tp .tb-stage .tb-seg.is-you{font-size:14px}

/* Key sentence: bold with a highlighter mark. A left rule beside text is banned (docs/design-rules.md). */
:is(#main,body) .tp .tb-key{margin:0 0 18px;font-size:18px;font-weight:700;line-height:1.55}
:is(#main,body) .tp.is-inline .tb-key{font-size:20px}
:is(#main,body) .tp .tb-key mark{padding:0 2px;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--tp-purple) 24%,transparent) 58%);color:inherit}
@media(prefers-reduced-motion:reduce){:is(#main,body) .tp .tb-stage .tb-seg,:is(#main,body) .tp .tb-drop span{transition:none;animation:none}}
:is(#main,body) .tp .tb-stage .tb-seg.is-thin{font-size:0}
:is(#main,body) .tp .tb-stage .tb-split-bar{gap:0}
:is(#main,body) .tp .tb-stage .tb-seg:not(.is-you){box-shadow:inset -2px 0 0 var(--bg)}

/* Check states are a tinted box, never a dot left of the text. */
:is(#main,body) .tp .tb-status.is-ok{background:var(--tp-green-bg);color:var(--tp-green)}
:is(#main,body) .tp .tb-status.is-wait{background:var(--tp-warn-bg);color:var(--tp-warn)}
:is(#main,body) .tp .tb-status b{font-weight:700}

/* Batch 6 host constraints: approved 320px companion fits small viewports. */
:is(#main,body) .tp[hidden]{display:none}
@media(max-width:760px){:is(#main,body) .tp:not(.is-inline):not(.is-demo){position:fixed;top:auto;bottom:8px;right:8px;width:calc(100% - 16px);height:min(62dvh,560px)} }

/* Keep the approved back/main row within the mobile inline player. */
@media(max-width:760px){:is(#main,body) .tp.is-inline .tp-row .tp-btn-main{flex:1;min-width:0;width:auto}}


/* Phone widths: big type must fit on one line. */
:is(#main,body) .tp :is(.tb-big-num,.tb-big-tag,.tb-replay){white-space:nowrap}
@media(max-width:760px){
 :is(#main,body) .tp.is-inline .tb-hero-q{font-size:22px}
 :is(#main,body) .tp.is-inline .tb-big-num{font-size:46px}
 :is(#main,body) .tp.is-inline .tp-title{font-size:22px}
}
/* Intro question stays one sentence: sized so the longest current question fits one line in the wide player. */
:is(#main,body) .tp.is-inline .tb-hero-q{font-size:26px}
:is(#main,body) .tp.is-inline .tp-body>.tb-hero-q{max-width:none}
@media(max-width:760px){:is(#main,body) .tp.is-inline .tb-hero-q{font-size:22px}}

/* Review: the bar steps back to the viewed step; reached progress stays as a pale band. */
:is(#main,body) .tp .tp-track .tp-fill{transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
:is(#main,body) .tp .tp-track .tp-fill-view{opacity:0}
:is(#main,body) .tp .tp-track.is-reviewing .tp-fill:not(.tp-fill-view){opacity:.28}
:is(#main,body) .tp .tp-track.is-reviewing .tp-fill-view{opacity:1}
:is(#main,body) .tp .tp-return{all:unset;flex:none;font-size:13px;font-weight:600;color:var(--tp-purple);white-space:nowrap;cursor:pointer}
:is(#main,body) .tp .tp-return:hover{text-decoration:underline;text-underline-offset:3px}
:is(#main,body) .tp .tp-return:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Restart: an icon; the first click turns it into a small confirm pill. */
:is(#main,body) .tp .tp-restart.is-confirm{width:auto;padding:0 12px;border-radius:999px;background:var(--tp-warn-bg);color:var(--tp-warn);font-size:12px;font-weight:600;white-space:nowrap}
:is(#main,body) .tp .tp-redo{margin-top:8px}
@media(prefers-reduced-motion:reduce){:is(#main,body) .tp .tp-track .tp-fill{transition:none}}
/* Learning area: one centred column for head, bar, content and buttons. */
:is(#main,body) .tp.is-inline{--col:560px}
:is(#main,body) .tp.is-inline :is(.tp-head,.tp-progress,.tp-body,.tp-foot){padding-left:max(28px,calc((100% - var(--col)) / 2));padding-right:max(28px,calc((100% - var(--col)) / 2))}
:is(#main,body) .tp.is-inline .tp-body>*{max-width:none}
@media(max-width:760px){:is(#main,body) .tp.is-inline :is(.tp-head,.tp-progress,.tp-body,.tp-foot){padding-left:20px;padding-right:20px}}

/* Key sentence highlighter: yellow, like a real highlighter pen. */
:is(#main,body) .tp .tb-key mark{background:linear-gradient(transparent 55%,rgba(255,214,10,.6) 55%,rgba(255,214,10,.6) 92%,transparent 92%);color:inherit}
:root[data-theme=dark] :is(#main,body) .tp .tb-key mark{background:linear-gradient(transparent 55%,rgba(255,200,0,.38) 55%,rgba(255,200,0,.38) 92%,transparent 92%)}
:is(#main,body) .tp .tp-here{margin:4px 0 0;padding:12px 14px;border-radius:12px;background:var(--tp-purple-soft);font-size:14px;line-height:1.6;color:var(--ink)}

/* Cost calculator result written by tutorial-page-bridge.js during a lesson: one big number,
   one line of working, the save button. The calculator's own result line hides while it shows. */
#main #tutorial-calculation{margin:20px 0 4px;padding:20px 22px;border-radius:18px;background:color-mix(in srgb,var(--ink) 3.5%,var(--bg))}
#main #tutorial-calculation :is(p){margin:0}
#main #tutorial-calculation .tc-label{font-size:13px;font-weight:600;color:var(--muted)}
#main #tutorial-calculation .tc-big{margin:2px 0 6px;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#248a3d;font-variant-numeric:tabular-nums}
#main #tutorial-calculation .tc-big.is-loss{color:#d70015}
#main #tutorial-calculation .tc-big strong{font-weight:inherit}
#main #tutorial-calculation .tc-line{font-size:14px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}
#main #tutorial-calculation .tc-line strong{font-weight:600;color:var(--ink)}
#main #tutorial-calculation .tc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 0}
#main #tutorial-calculation .tc-foot span{font-size:12px;color:var(--muted)}
#main #tutorial-calculation .tc-save{display:inline-flex;align-items:center;height:40px;padding:0 20px;border:0;border-radius:999px;background:var(--button,var(--ink));color:var(--button-ink,var(--bg));font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s ease}
#main #tutorial-calculation .tc-save:hover{opacity:.85}
#main #tutorial-calculation .tc-save:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:root[data-theme=dark] #main #tutorial-calculation .tc-big{color:#30d158}
:root[data-theme=dark] #main #tutorial-calculation .tc-big.is-loss{color:#ff453a}
#main #tutorial-calculation~#cost-result{display:none}
#main #tutorial-calculation [hidden]{display:none}
#main #tutorial-calculation .tc-save:disabled{opacity:1;background:color-mix(in srgb,var(--ink) 8%,var(--bg));color:var(--muted);cursor:default}

/* ===== Intro stage (2026-10-07): one $30 bar; each cost bites off its end and falls away while
   the bar springs back; what is left turns green. Overrides the earlier split-bar rules. ===== */
:is(#main,body) .tp .tb-stage{--spring:linear(0,.093,.307,.561,.795,.977,1.095,1.152,1.162,1.14,1.102,1.061,1.025,.998,.981,.974,.974,.979,.985,.992,.997,1.001,1.003,1.004,1.004,1.003,1.002,1.001,1,1,.999,.999,1)}
:is(#main,body) .tp .tb-stage .tb-split-bar{position:relative;display:block;gap:0;height:52px;overflow:visible;border-radius:14px;background:var(--tp-soft)}
:is(#main,body) .tp .tb-stage .tb-seg{position:absolute;top:0;bottom:0;left:0;width:0;display:flex;align-items:center;justify-content:center;min-width:0;margin:0;padding:0;border-radius:14px;background:var(--bite,var(--tp-warn-btn));box-shadow:none;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;opacity:0;flex:none;transition:none;animation:none}
:is(#main,body) .tp .tb-stage .tb-seg[data-seg="0"]{--bite:#ff7a59}
:is(#main,body) .tp .tb-stage .tb-seg[data-seg="1"]{--bite:#3d7bfd}
:is(#main,body) .tp .tb-stage .tb-seg[data-seg="2"]{--bite:#f0a500}
:is(#main,body) .tp .tb-stage .tb-seg[data-seg="3"]{--bite:#e0457b}
:is(#main,body) .tp .tb-stage .tb-seg.is-bite{z-index:2;animation:tb-bite .5s both}
@keyframes tb-bite{0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.8,.4,1)}9%{opacity:1;transform:translate(2px,-4px) rotate(-2deg);animation-timing-function:cubic-bezier(.33,.15,.67,.5)}55%{opacity:1}100%{opacity:0;transform:translate(12px,92px) rotate(20deg)}}
:is(#main,body) .tp .tb-stage .tb-seg.is-you{left:0;width:100%;justify-content:flex-end;padding:0 16px;opacity:1;background:var(--tp-purple);font-size:15px;font-variant-numeric:tabular-nums;transform-origin:0 50%;transition:width .75s var(--spring),background-color .45s ease}
:is(#main,body) .tp .tb-stage .tb-seg.is-you.no-move{transition:none}
:is(#main,body) .tp .tb-stage .tb-seg.is-you.is-final{justify-content:center;padding:0;background:var(--tp-green-btn);animation:tb-left-pop .7s var(--spring) both}
@keyframes tb-left-pop{from{transform:scale(1.06,1.22)}to{transform:none}}
:is(#main,body) .tp .tb-drop span{animation:tb-drop-in .9s cubic-bezier(.22,1,.36,1) both}
@keyframes tb-drop-in{0%{opacity:0;transform:translateY(8px)}35%{opacity:1;transform:none}80%{opacity:1}100%{opacity:.0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){:is(#main,body) .tp .tb-stage .tb-seg,:is(#main,body) .tp .tb-stage .tb-seg.is-you{animation:none!important;transition:none!important}}

/* ===== Side panel polish (2026-10-07) ===== */
/* On its own page a step needs no box: one purple line says the page is where to act. */
:is(#main,body) .tp .tp-here{margin:2px 0 14px;padding:0;border-radius:0;background:none;font-size:13px;font-weight:600;line-height:1.6;color:var(--tp-purple)}
/* The side panel floats like a card; on phones it hugs its content so the page stays usable. */
:is(#main,body) .tp:not(.is-inline):not(.is-demo){border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent),0 18px 50px rgba(0,0,0,.12)}
@media(max-width:760px){
 :is(#main,body) .tp:not(.is-inline):not(.is-demo){height:auto;max-height:min(62dvh,560px);border-radius:24px}
 :is(#main,body) .tp:not(.is-inline):not(.is-demo) .tp-body{flex:0 1 auto;padding:16px 20px 12px}
 :is(#main,body) .tp:not(.is-inline):not(.is-demo) .tp-title{font-size:18px}
}