/* Demo + walkthrough share the current mobile/desktop and light/dark design tokens. */
#demoSettingsSection { grid-column:1/-1; min-width:0; border:1px solid var(--td-border); border-radius:18px; background:var(--td-surface-raised); color:var(--td-ink); }
#demoSettingsSection summary { display:flex; align-items:center; gap:12px; padding:16px; min-height:60px; cursor:pointer; list-style:none; }
#demoSettingsSection summary::-webkit-details-marker { display:none; }
#demoSettingsSection summary strong { flex:1; }
.td-demo-settings-body { padding:0 16px 18px; font-size:14px; line-height:1.6; }
.td-demo-settings-body p { color:var(--td-muted); }
.td-guide-primary, #tdWalkthrough button, #tdDemoExit { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 18px; border:1px solid var(--td-border); border-radius:13px; font:600 15px/1.35 system-ui,sans-serif; text-decoration:none; cursor:pointer; background:var(--td-surface-raised); color:var(--td-ink); }
.td-guide-primary, #tdWalkthrough .td-guide-primary { background:linear-gradient(125deg,#079fce,#067eb5); border-color:#078ec4; color:#fff; box-shadow:0 5px 14px #068ab41b; }
#replayWalkthrough { width:100%; margin-bottom:14px; }
#tdWalkthrough { box-sizing:border-box; width:min(560px,calc(100vw - 24px)); max-width:560px; max-height:calc(100dvh - 28px); margin:auto; padding:24px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--td-border); border-radius:26px; background:var(--td-surface-raised,#fff); color:var(--td-ink,#193747); box-shadow:0 24px 90px #0005; font-family:system-ui,sans-serif; }
#tdWalkthrough:not([open]) { display:none!important; }
#tdDemoNotice { box-sizing:border-box; width:min(460px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); margin:auto; padding:24px; border:1px solid var(--td-border); border-radius:22px; background:var(--td-surface-raised); color:var(--td-ink); font:16px/1.6 system-ui,sans-serif; }
#tdDemoNotice:not([open]) { display:none!important; }
#tdDemoNotice h2 { font:700 22px/1.3 system-ui,sans-serif; }
#tdDemoNotice::backdrop { background:#071622b5; }
#tdWalkthrough::backdrop { background:#071622b5; backdrop-filter:blur(5px); }
#tdWalkthrough * { box-sizing:border-box; }
.td-guide-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:700; color:var(--td-muted); }
#tdWalkthrough #tdGuideSkip { background:transparent; box-shadow:none; border:0; font-size:13px; padding:8px; }
.td-guide-visual { height:180px; display:flex; align-items:center; justify-content:center; gap:15px; position:relative; margin:18px 0 6px; border-radius:20px; background:linear-gradient(140deg,#08a1d219,#8b62cb19); overflow:hidden; }
.td-guide-duck { width:100px; height:100px; object-fit:contain; border-radius:24px; background:#fff; animation:td-float 3s ease-in-out infinite; }
.td-guide-speech { max-width:180px; padding:16px; border-radius:18px 18px 18px 3px; background:var(--td-surface-raised); color:var(--td-ink); font-size:17px; font-weight:700; animation:td-appear .55s both; }
.td-guide-caption { text-align:center; margin:8px 0 22px; font-size:12px; letter-spacing:.04em; font-weight:700; color:var(--td-muted); }
#tdGuideTitle { margin:0 0 12px; font:750 clamp(22px,5vw,28px)/1.2 system-ui,sans-serif; color:var(--td-ink); }
#tdGuideText { font:400 16px/1.65 system-ui,sans-serif; color:var(--td-muted); margin:0; }
.td-guide-copy { min-height:156px; }
.td-guide-progress { display:flex; align-items:center; justify-content:space-between; margin:20px 0 14px; color:var(--td-muted); font-size:13px; }
#tdGuideDots { display:flex; gap:6px; }
#tdGuideDots span { width:7px; height:7px; border-radius:8px; background:var(--td-border); }
#tdGuideDots span.active { width:24px; background:#0799cc; }
.td-guide-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#tdWalkthrough button:disabled { opacity:.4; cursor:default; }
#tdGuideDemo:not([hidden]) { margin-top:14px; }
#tdGuideDemo a { width:100%; }
#tdWalkthrough :focus-visible, #demoSettingsSection :focus-visible, #replayWalkthrough:focus-visible { outline:3px solid #f5ae35; outline-offset:3px; }
.td-guide-gauges { display:flex; width:100%; gap:8px; padding:15px; }
.td-guide-gauges > div { position:relative; flex:1; min-width:0; text-align:center; }
.td-guide-gauges svg { display:block; width:100%; }
.td-guide-gauges path { fill:none; stroke-width:9; stroke-linecap:round; }
.td-arc-track { stroke:var(--td-border); }
.td-arc-fill { stroke:#d98395; stroke-dasharray:70 100; animation:td-gauge 2s ease both; }
.td-guide-gauges > div:nth-child(2) .td-arc-fill { stroke:#cca24a; animation-delay:.15s; }
.td-guide-gauges > div:nth-child(3) .td-arc-fill { stroke:#599ecc; animation-delay:.3s; }
.td-guide-gauges b { display:block; margin-top:-30%; font-size:clamp(17px,5vw,24px); }
.td-guide-gauges small { display:block; margin-top:14px; font-size:12px; }
.td-guide-upload { display:flex; align-items:center; gap:12px; }
.td-guide-upload span { padding:14px; background:var(--td-surface-raised); border:1px solid var(--td-border); border-radius:13px; font-weight:750; }
.td-guide-upload i { font-size:24px; color:#0799cc; animation:td-float 1.5s infinite; }
.td-guide-timeline { width:100%; padding:20px; text-align:center; font-size:13px; }
.td-guide-timeline > div { display:flex; height:42px; margin:12px 0; gap:4px; }
.td-guide-timeline i { flex:3; background:#dc8b99; border-radius:7px; animation:td-appear .7s both; }
.td-guide-timeline i:nth-child(2) { flex:1; background:#80b4dc; animation-delay:.3s; }
.td-guide-timeline i:nth-child(3) { flex:2; background:#e1b367; animation-delay:.6s; }
.td-guide-timeline i:nth-child(4) { flex:3; background:#80b4dc; animation-delay:.9s; }
.td-guide-tools { display:flex; justify-content:center; gap:14px; width:100%; }
.td-guide-tools > span { padding:15px; border-radius:15px; background:var(--td-surface-raised); text-align:center; font-size:35px; color:#0988b7; animation:td-appear .6s both; }
.td-guide-tools > span:nth-child(2) { animation-delay:.2s; }
.td-guide-tools > span:nth-child(3) { animation-delay:.4s; }
.td-guide-tools small { display:block; color:var(--td-ink); font-size:12px; margin-top:8px; }
#tdDemoBanner { position:fixed; bottom:0; left:0; right:0; z-index:9500; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)); background:var(--td-surface-raised); border-top:2px solid #1599c2; color:var(--td-ink); box-shadow:0 -4px 20px #0002; font:14px/1.4 system-ui,sans-serif; }
#tdDemoBanner span { display:block; color:var(--td-muted); font-size:12px; margin-top:3px; }
#tdDemoExit { flex-shrink:0; }
.td-demo-mode { padding-bottom:110px!important; }
.td-demo-mode #demoSettingsSection, .td-demo-mode .manual-entry-section { display:none!important; }
@keyframes td-float { 50% { transform:translateY(-6px); } }
@keyframes td-appear { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes td-gauge { from { stroke-dasharray:0 100; } to { stroke-dasharray:70 100; } }
@media(max-width:480px) {
  #tdWalkthrough { padding:18px; border-radius:22px; }
  .td-guide-visual { height:148px; }
  .td-guide-duck { width:80px; height:80px; }
  .td-guide-speech { max-width:155px; font-size:15px; padding:12px; }
  .td-guide-copy { min-height:174px; }
  .td-guide-tools { gap:8px; }
  .td-guide-tools > span { padding:12px; }
  #tdDemoBanner { gap:8px; }
  #tdDemoBanner strong { font-size:13px; }
  #tdDemoBanner span { font-size:11px; }
  #tdDemoExit { padding:9px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { #tdWalkthrough * { animation:none!important; transition:none!important; } }

/* Button guide: scoped to its native modal, never to live application controls. */
#tdWalkthrough[open] { display:flex; flex-direction:column; width:min(640px,calc(100vw - 24px)); max-width:640px; padding:18px 20px; overflow:hidden; }
#tdWalkthrough [hidden] { display:none!important; }
#tdWalkthrough .td-guide-top { flex-shrink:0; }
#tdWalkthrough .td-guide-navigation { flex-shrink:0; position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:8px 0 14px; }
#tdWalkthrough .td-guide-navigation label { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:10px; color:var(--td-muted); font:600 12px/1.4 system-ui,sans-serif; min-width:0; }
#tdWalkthrough .td-guide-navigation :is(input,select) { appearance:none; -webkit-appearance:none; box-sizing:border-box; display:block; width:100%; min-width:0; max-width:100%; min-height:44px; height:44px; margin:0; padding:8px 12px; border:1px solid var(--td-border); border-radius:12px; background:var(--td-surface-raised,#fff); color:var(--td-ink); font:400 16px/1.3 system-ui,sans-serif; }
#tdWalkthrough #tdGuideSection { padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23688da0' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-size:16px; background-position:right 10px center; background-repeat:no-repeat; text-overflow:ellipsis; }
#tdWalkthrough #tdGuideSearchResults { position:absolute; top:48px; left:0; right:0; max-height:min(330px,45dvh); overflow-y:auto; z-index:2; padding:6px; border:1px solid var(--td-border); border-radius:14px; background:var(--td-surface-raised,#fff); box-shadow:0 12px 35px #0003; }
#tdWalkthrough #tdGuideSearchResults button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:3px; width:100%; padding:10px; margin:2px 0; border:0; box-shadow:none; overflow-wrap:anywhere; }
#tdWalkthrough #tdGuideSearchResults button:hover { background:#0799cc18; }
#tdWalkthrough #tdGuideSearchResults small { color:var(--td-muted); font-size:12px; }
#tdGuideSearchStatus { margin:0; color:var(--td-muted); font:400 12px/1.4 system-ui,sans-serif; }
#tdGuideSearchStatus:empty { display:none; }
/* WebKit's native selected text must not enlarge the containing grid track. */
#tdWalkthrough #tdGuideSection { overflow:hidden; contain:inline-size paint; }
#tdWalkthrough .td-guide-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:3px 4px 8px; scrollbar-gutter:stable; }
#tdWalkthrough .td-guide-visual { height:126px; margin:0 0 12px; }
#tdWalkthrough .td-guide-duck { height:84px; width:84px; }
#tdWalkthrough .td-guide-caption { text-align:left; margin:0 0 8px; font:600 12px/1.5 system-ui,sans-serif; letter-spacing:0; }
#tdWalkthrough .td-guide-copy { min-height:0; }
#tdWalkthrough #tdGuideTitle { font:750 clamp(21px,4.5vw,26px)/1.25 system-ui,sans-serif; margin:0 0 14px; }
#tdWalkthrough #tdGuideText { font:400 15px/1.6 system-ui,sans-serif; }
#tdGuideControls { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
#tdWalkthrough .td-guide-control { display:grid; grid-template-columns:minmax(0,142px) minmax(0,1fr); gap:14px; align-items:center; padding:13px; margin:0; border:1px solid var(--td-border); border-radius:16px; background:var(--td-surface-raised,#fff); animation:td-appear .25s both; }
#tdWalkthrough .td-guide-control:nth-child(2) { animation-delay:40ms; }
#tdWalkthrough .td-guide-control:nth-child(3) { animation-delay:80ms; }
#tdWalkthrough .td-guide-control:nth-child(4) { animation-delay:120ms; }
#tdWalkthrough .td-guide-control h3 { font:700 14px/1.4 system-ui,sans-serif; color:var(--td-ink); margin:0 0 4px; overflow-wrap:anywhere; }
#tdWalkthrough .td-guide-control p { font:400 14px/1.5 system-ui,sans-serif; color:var(--td-muted); margin:0; overflow-wrap:anywhere; }
#tdWalkthrough .td-guide-control.is-found { border-color:#0799cc; box-shadow:inset 3px 0 #0799cc; }
#tdWalkthrough .td-guide-replica { display:flex; justify-content:center; align-items:center; gap:7px; min-height:44px; width:100%; min-width:0; padding:10px 8px; border:1px solid #0a96c566; border-radius:13px; background:#099acc12; color:var(--td-ink); font:700 13px/1.35 system-ui,sans-serif; text-align:center; overflow-wrap:anywhere; }
#tdWalkthrough .td-guide-replica.is-symbol { justify-self:center; width:60px; min-height:54px; font-size:27px; color:#078fc6; }
#tdWalkthrough .td-guide-replica svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#tdWalkthrough .td-guide-replica img { width:30px; height:30px; object-fit:contain; padding:2px; background:#fff; border-radius:4px; }
#tdWalkthrough .td-guide-replica.is-rest { width:86px; }
#tdWalkthrough .td-guide-footer { display:block; position:static; flex-shrink:0; width:100%; padding:12px 0 0; margin:8px 0 0; border:0; border-top:1px solid var(--td-border); background:var(--td-surface-raised,#fff); box-shadow:none; color:var(--td-muted); }
#tdWalkthrough .td-guide-progress { gap:16px; margin:0 0 10px; }
#tdGuideProgress { appearance:none; height:5px; flex:1; max-width:200px; border:0; border-radius:8px; overflow:hidden; background:var(--td-border); accent-color:#0799cc; }
#tdGuideProgress::-webkit-progress-bar { background:var(--td-border); }
#tdGuideProgress::-webkit-progress-value { background:#0799cc; }
#tdGuideProgress::-moz-progress-bar { background:#0799cc; }
@media(max-width:480px) {
  #tdWalkthrough[open] { padding:12px; max-height:calc(100dvh - 16px); width:calc(100vw - 16px); }
  #tdWalkthrough .td-guide-navigation label { grid-template-columns:76px minmax(0,1fr); gap:6px; font-size:11px; }
  #tdWalkthrough .td-guide-control { grid-template-columns:minmax(0,100px) minmax(0,1fr); padding:11px 9px; gap:10px; }
  #tdWalkthrough .td-guide-replica { font-size:12px; }
  #tdWalkthrough .td-guide-control p { font-size:13px; }
  #tdWalkthrough .td-guide-body { padding-left:1px; padding-right:3px; }
}