/* SmartTLDR · Motion study 02. No animation or font dependencies. */
:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#192d2e; background:#f8faf7; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
button:not(:disabled) { cursor:pointer; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #185c66; outline-offset:5px; }
.st-demo-skip { position:fixed; top:10px; left:10px; transform:translateY(-200%); background:white; color:#174b44; padding:12px; z-index:50; }
.st-demo-skip:focus { transform:none; }
.st-demo-header { border-bottom:1px solid #e4e9e3; background:rgba(255,255,255,.76); }
.st-demo-header-inner { max-width:1156px; padding:22px 32px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.st-demo-brand { display:flex; align-items:center; gap:11px; font-size:23px; font-weight:740; letter-spacing:-.9px; }
.st-demo-brand em { font-style:normal; font-weight:420; }
.st-demo-logo { display:flex; align-items:center; gap:3px; width:29px; height:30px; transform:rotate(-8deg); }
.st-demo-logo i { display:block; width:7px; background:#257366; border-radius:3px; }
.st-demo-logo i:nth-child(1) { height:14px; }.st-demo-logo i:nth-child(2) { height:22px; }.st-demo-logo i:nth-child(3) { height:30px; }
.st-demo-header-note { display:flex; align-items:center; gap:9px; font-size:12px; color:#576b66; }
.st-demo-header-note::before { content:'✳'; font-size:20px; color:#297d69; }
.st-demo-shell { width:min(1000px,calc(100% - 64px)); margin:auto; padding:40px 0 30px; }
.st-demo-eyebrow { color:#42635b; display:flex; gap:10px; align-items:center; font-size:10px; font-weight:650; letter-spacing:1.7px; text-transform:uppercase; }
.st-demo-eyebrow::before { content:''; display:block; width:6px; height:6px; border-radius:50%; background:#318b73; box-shadow:0 0 0 4px #e4efe6; }
.st-demo-title { font:500 clamp(46px,5.3vw,72px)/1.04 Georgia,'Times New Roman',serif; letter-spacing:-2.9px; margin:16px 0 13px; }
.st-demo-title span { position:relative; display:inline-block; z-index:0; }
.st-demo-title span::after { content:''; position:absolute; left:-1%; bottom:3%; width:104%; height:14%; background:#e0edb9; border-radius:50%; transform:rotate(-3deg); z-index:-1; }
.st-demo-intro { font-size:15px; line-height:1.7; color:#566863; margin:0 0 27px; }
.st-demo-separator { display:none; }
.st-demo-footer { display:flex; gap:12px 30px; justify-content:space-between; flex-wrap:wrap; padding:25px 0 6px; color:#60716b; font-size:10px; line-height:1.7; }
.st-demo-footer b { font-weight:650; color:#314b43; }
/* The stage has more motion than the reading area. */
smart-depth-selector { --st-accent:#21664f; --st-soft:#eef7e8; --st-line:#dce5db; --st-ink:#1d322c; --st-muted:#536b5f; display:block; }
smart-depth-selector[data-selected='basic'] { --st-accent:#285bb5; --st-soft:#eef4ff; }
smart-depth-selector[data-selected='advanced'] { --st-accent:#704cb1; --st-soft:#f5f0fd; }
smart-depth-selector .st-stage { position:relative; isolation:isolate; border-radius:24px; }
smart-depth-selector .st-stage::before { content:''; position:absolute; inset:30px -16px -26px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 50%,var(--st-soft) 0%,transparent 72%); opacity:.9; transition:background 400ms; }
smart-depth-selector .st-chooser-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
smart-depth-selector .st-heading-copy h2 { margin:0 0 4px; font-size:18px; font-weight:650; letter-spacing:-.4px; }
smart-depth-selector .st-heading-copy p { margin:0; color:#627269; font-size:12px; }
smart-depth-selector .st-motion-toggle { display:none; flex:none; align-items:center; gap:8px; border:1px solid #dbe5d8; background:rgba(255,255,255,.82); padding:8px 12px; min-height:38px; border-radius:24px; color:#36574b; font-size:11px; font-weight:600; }
smart-depth-selector[data-motion-ready] .st-motion-toggle { display:inline-flex; }
smart-depth-selector .st-motion-toggle:disabled { cursor:default; }
.st-motion-toggle svg { width:15px; height:15px; }
.st-motion-toggle i { width:5px; height:5px; border-radius:50%; background:#428567; }
smart-depth-selector[data-motion='off'] .st-motion-toggle i { background:#85958a; }
smart-depth-selector .st-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; perspective:1100px; align-items:stretch; }
smart-depth-selector .st-tab { --card-accent:#28694d; --card-soft:#f2f8eb; --card-wash:#e8f1d6; --rx:0deg; --ry:0deg; --px:0px; --py:0px; --mx:50%; --my:50%; --lift:0px; position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding:21px 18px 19px; min-height:338px; border:1px solid #dbe4d9; border-radius:23px; color:#233c32; background:linear-gradient(158deg,#fff 22%,var(--card-soft) 120%); text-decoration:none; text-align:center; box-shadow:0 8px 24px -24px #294f30; transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform 380ms cubic-bezier(.2,.8,.2,1),border-color 220ms,box-shadow 220ms,background 220ms; overflow:visible; isolation:isolate; }
smart-depth-selector .st-tab[data-depth-tab='basic'] { --card-accent:#2d60aa; --card-soft:#eef4ff; --card-wash:#d8e9ff; }
smart-depth-selector .st-tab[data-depth-tab='advanced'] { --card-accent:#7850b1; --card-soft:#f6f0ff; --card-wash:#ece0ff; }
smart-depth-selector .st-tab::before { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:radial-gradient(220px circle at var(--mx) var(--my),#ffffffd6,transparent 85%); opacity:0; transition:opacity 250ms; pointer-events:none; }
smart-depth-selector .st-tab:hover { --lift:-5px; border-color:var(--card-accent); background:linear-gradient(145deg,#fff,var(--card-soft)); box-shadow:0 19px 38px -27px var(--card-accent); }
smart-depth-selector .st-tab:hover::before { opacity:1; }
smart-depth-selector .st-tab[aria-selected='true'] { border-color:var(--card-accent); box-shadow:0 0 0 1px var(--card-accent),0 14px 25px -22px var(--card-accent); background:linear-gradient(155deg,#fff 8%,var(--card-soft) 100%); }
smart-depth-selector .st-kicker { display:block; align-self:flex-start; font-size:9px; text-align:left; line-height:15px; font-weight:700; letter-spacing:1.5px; color:var(--card-accent); }
smart-depth-selector .st-choice-mark { top:18px; right:17px; width:22px; height:22px; transition:background 200ms,transform 250ms; }
smart-depth-selector .st-tab[aria-selected='true'] .st-choice-mark { transform:scale(1.04); }
smart-depth-selector .st-visual { display:block; position:relative; width:100%; height:205px; margin-top:10px; }
smart-depth-selector .st-ground { display:block; position:absolute; bottom:5px; left:calc(50% - 57px); width:114px; height:12px; background:radial-gradient(ellipse,var(--card-accent),transparent 70%); opacity:.14; transform:scaleX(.84); }
smart-depth-selector .st-orbit { position:absolute; left:calc(50% - 88px); top:13px; width:176px; height:176px; border:1px dashed var(--card-accent); opacity:.17; border-radius:50%; transform:rotate(-12deg) scale(1.13); }
smart-depth-selector .st-portrait { position:absolute; left:50%; top:22px; width:166px; height:166px; margin:0 0 0 -83px; overflow:hidden; border-radius:50%; background:#fff; box-shadow:0 5px 14px -12px var(--card-accent); transform-origin:50% 86%; }
smart-depth-selector .st-portrait img { display:block; width:100%; height:100%; object-fit:cover; transform:translate(var(--px),var(--py)) scale(1.04); transition:transform 330ms ease-out; }
smart-depth-selector .st-bubble { position:absolute; top:-3px; left:50%; transform:translate(-50%,6px) scale(.95); padding:8px 12px; white-space:nowrap; font-size:11px; line-height:1.3; font-weight:600; color:var(--card-accent); background:white; box-shadow:0 3px 14px #2743320c; border:1px solid var(--card-wash); border-radius:12px 12px 12px 2px; z-index:3; opacity:0; transition:opacity 180ms,transform 380ms cubic-bezier(.18,1.3,.4,1); pointer-events:none; }
smart-depth-selector .st-tab:hover .st-bubble,smart-depth-selector .st-tab:focus-visible .st-bubble,smart-depth-selector .st-tab[aria-selected='true'] .st-bubble { opacity:1; transform:translate(-50%,-2px) scale(1); }
smart-depth-selector .st-orbit-chip { position:absolute; width:32px; height:32px; border:1px solid #ffffffc4; border-radius:11px; background:var(--card-wash); display:grid; place-items:center; color:var(--card-accent); z-index:2; font-size:18px; font-weight:600; box-shadow:0 4px 12px #344b3109; }
smart-depth-selector .st-orbit-chip.left { left:calc(50% - 105px); top:115px; transform:rotate(-13deg); }
smart-depth-selector .st-orbit-chip.right { right:calc(50% - 99px); top:49px; transform:rotate(12deg); }
smart-depth-selector .st-orbit-chip svg { width:17px; height:17px; }
smart-depth-selector .st-label { font-size:25px; line-height:1.3; font-weight:650; letter-spacing:-.7px; }
smart-depth-selector .st-description { font-size:12px; margin:4px 0 0; color:#586d61; line-height:1.5; }
smart-depth-selector .st-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--card-wash); padding-top:13px; margin-top:16px; width:100%; color:var(--card-accent); font-size:10px; font-weight:650; }
smart-depth-selector .st-depth-meter { display:flex; align-items:flex-end; gap:3px; height:13px; }
smart-depth-selector .st-depth-meter i { width:4px; border-radius:2px; background:var(--card-accent); opacity:.18; }
smart-depth-selector .st-depth-meter i:nth-child(1) { height:5px;opacity:1; }.st-depth-meter i:nth-child(2){height:9px;}.st-depth-meter i:nth-child(3){height:13px;}
smart-depth-selector .st-tab:not([data-depth-tab='simple']) .st-depth-meter i:nth-child(2),smart-depth-selector .st-tab[data-depth-tab='advanced'] .st-depth-meter i:nth-child(3) { opacity:1; }
smart-depth-selector .st-card-arrow { font-size:18px; line-height:13px; margin-left:auto; transition:transform 220ms; }
smart-depth-selector .st-tab:hover .st-card-arrow { transform:translateX(3px); }
smart-depth-selector .st-level-note { justify-content:center; margin:15px 0 20px; font-size:11px; line-height:1.5; color:#607165; text-align:center; }
smart-depth-selector .st-rail { position:relative; height:3px; border-radius:3px; background:#e5eae1; margin:0 0 25px; display:none; }
smart-depth-selector[data-enhanced] .st-rail { display:block; }
smart-depth-selector .st-rail i { display:block; width:calc((100% - 36px)/3); height:3px; background:var(--st-accent); border-radius:3px; transform:translateX(0); transition:transform 500ms cubic-bezier(.22,1,.36,1),background 350ms; }
smart-depth-selector[data-selected='basic'] .st-rail i { transform:translateX(calc(100% + 18px)); }
smart-depth-selector[data-selected='advanced'] .st-rail i { transform:translateX(calc(200% + 36px)); }
smart-depth-selector .st-panel { margin-top:0; border-color:#dfe6dd; border-radius:21px; box-shadow:0 8px 30px -26px #364c2d; }
smart-depth-selector .st-panel + .st-panel { margin-top:24px; }
smart-depth-selector[data-enhanced] .st-panel { margin-top:0; }
smart-depth-selector .st-panel-bar { padding:12px 25px; min-height:63px; background:linear-gradient(110deg,var(--st-soft),#fff); transition:background 350ms; }
smart-depth-selector .st-panel-ident { display:flex; align-items:center; gap:10px; }
smart-depth-selector .st-panel-ident img { width:34px; height:34px; border-radius:50%; background:#fff; }
smart-depth-selector .st-panel-bar span { font-size:10px; }
smart-depth-selector .st-panel-bar small { font-size:11px; }
smart-depth-selector .st-article { padding:27px 32px 28px; }
smart-depth-selector .st-article h3 { max-width:720px; font-size:32px; color:#213b30; line-height:1.18; margin-bottom:16px; }
smart-depth-selector .st-article p,smart-depth-selector .st-article li { font-size:15px; color:#40594b; }
smart-depth-selector .st-takeaway { border-radius:0 12px 12px 0; }
/* The optional example moves only when explicitly played. */
smart-depth-selector .st-journey { background:#f6f9f4; border:1px solid #e1e9dd; padding:19px 21px 15px; border-radius:16px; margin:22px 0; }
smart-depth-selector .st-journey-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
smart-depth-selector .st-journey-top strong { display:block; font-size:13px; line-height:1.4; }
smart-depth-selector .st-play { display:none; align-items:center; gap:7px; font-size:11px; font-weight:600; padding:8px 11px; min-height:36px; border:1px solid #cbdcba; border-radius:8px; color:#28503b; background:#fff; }
smart-depth-selector[data-motion-ready] .st-play { display:inline-flex; }
.st-play svg { width:12px; height:12px; }
smart-depth-selector .st-journey-nodes { display:flex; align-items:center; gap:0; }
smart-depth-selector .st-node { flex:1; min-width:0; text-align:center; border:1px solid #dbe4d4; background:#fff; border-radius:10px; padding:13px 6px; position:relative; transition:border-color 220ms,background 220ms,transform 260ms; }
smart-depth-selector .st-node-label { display:block; font-size:10px; color:#61745a; margin-bottom:5px; }
smart-depth-selector .st-node code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; font-weight:600; color:#2c4e34; }
smart-depth-selector .st-wire { position:relative; flex:0 0 46px; height:1px; background:#c8d9bf; }
smart-depth-selector .st-wire::after { content:''; position:absolute; right:0; top:-2px; width:5px; height:5px; border-top:1px solid #b4c5aa; border-right:1px solid #b4c5aa; transform:rotate(45deg); }
smart-depth-selector .st-packet { position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:#40865c; opacity:0; }
smart-depth-selector .st-node[data-lit] { border-color:#6b9964; background:#f0f8e4; transform:translateY(-2px); }
smart-depth-selector .st-journey-caption { font-size:11px!important; line-height:1.6!important; color:#516a4a!important; min-height:18px; margin:13px 0 3px!important; }
smart-depth-selector .st-journey-disclaimer { display:block; font-size:9px; line-height:1.5; color:#68785f; }
smart-depth-selector .st-particle { position:absolute; display:block; width:5px; height:5px; background:var(--card-accent); border-radius:2px; top:42%; left:50%; z-index:4; pointer-events:none; }
/* Animation is progressively enabled, off by default without JS. */
@keyframes st-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes st-think { 0%,100% { transform:translateY(0) rotate(1deg); } 50% { transform:translateY(-5px) rotate(-1.3deg); } }
@keyframes st-mentor { 0%,100% { transform:translateY(-1px) rotate(-.5deg); } 50% { transform:translateY(-6px) rotate(1deg); } }
@keyframes st-chip { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes st-shadow { 0%,100%{ transform:scaleX(.86);opacity:.14; }50%{transform:scaleX(.69);opacity:.09;} }
@media(prefers-reduced-motion:no-preference) {
  smart-depth-selector[data-motion='on'] .st-portrait { animation:st-float 4s ease-in-out infinite; }
  smart-depth-selector[data-motion='on'] .st-tab[data-depth-tab='basic'] .st-portrait { animation-name:st-think;animation-duration:4.8s;animation-delay:-1.4s; }
  smart-depth-selector[data-motion='on'] .st-tab[data-depth-tab='advanced'] .st-portrait { animation-name:st-mentor;animation-duration:5.2s;animation-delay:-2.2s; }
  smart-depth-selector[data-motion='on'] .st-orbit-chip { animation:st-chip 4.6s ease-in-out infinite; }
  smart-depth-selector[data-motion='on'] .st-orbit-chip.right { animation-delay:-2s; }
  smart-depth-selector[data-motion='on'] .st-ground { animation:st-shadow 4s ease-in-out infinite; }
}
smart-depth-selector[data-awake='false'] .st-portrait,smart-depth-selector[data-awake='false'] .st-orbit-chip,smart-depth-selector[data-awake='false'] .st-ground { animation-play-state:paused!important; }
smart-depth-selector[data-motion='off'] *,smart-depth-selector[data-motion='off'] *::before,smart-depth-selector[data-motion='off'] *::after { animation:none!important; transition:none!important; }
smart-depth-selector[data-motion='off'] .st-tab { transform:none!important; }
smart-depth-selector[data-motion='off'] .st-portrait img { transform:scale(1.04)!important; }
@media(max-width:800px) {
  .st-demo-shell { width:calc(100% - 44px); }
  smart-depth-selector .st-tabs { gap:12px; }
  smart-depth-selector .st-tab { padding:18px 12px 15px; min-height:320px; }
  smart-depth-selector .st-kicker { font-size:8px;letter-spacing:1px; }
  smart-depth-selector .st-visual { height:192px; }
  smart-depth-selector .st-portrait { width:148px;height:148px;margin-left:-74px; }
  smart-depth-selector .st-orbit { width:148px;height:148px;left:calc(50% - 74px);top:20px; }
  smart-depth-selector .st-orbit-chip.left { left:calc(50% - 87px);top:108px; }
  smart-depth-selector .st-orbit-chip.right { right:calc(50% - 86px); }
  smart-depth-selector .st-label { font-size:23px; }
  smart-depth-selector .st-description { font-size:11px; }
  smart-depth-selector .st-choice-mark { top:15px;right:12px;width:19px;height:19px; }
  smart-depth-selector .st-rail i { width:calc((100% - 24px)/3); }
  smart-depth-selector[data-selected='basic'] .st-rail i { transform:translateX(calc(100% + 12px)); }
  smart-depth-selector[data-selected='advanced'] .st-rail i { transform:translateX(calc(200% + 24px)); }
}
@media(max-width:600px) {
  .st-demo-header-inner { padding:17px 19px; }
  .st-demo-brand { font-size:21px; }.st-demo-header-note { font-size:10px;gap:5px; }
  .st-demo-shell { width:calc(100% - 32px);padding-top:28px; }
  .st-demo-title { font-size:49px;letter-spacing:-2px;margin-top:17px; }
  .st-demo-eyebrow { font-size:9px;letter-spacing:1.2px; }
  .st-demo-intro { font-size:13px;margin-bottom:23px; }
  smart-depth-selector .st-stage::before { inset:20px -10px -15px; }
  smart-depth-selector .st-chooser-heading { display:flex; margin-bottom:15px; }
  smart-depth-selector .st-heading-copy h2 { font-size:17px; }
  smart-depth-selector .st-heading-copy p { font-size:10px; margin-top:4px; }
  smart-depth-selector .st-motion-toggle { padding:7px 9px; gap:5px; font-size:10px; min-height:36px; }
  smart-depth-selector .st-motion-toggle i { display:none; }
  smart-depth-selector .st-tabs { gap:9px; }
  smart-depth-selector .st-tab { padding:10px 6px 11px; border-radius:17px; min-height:207px; }
  smart-depth-selector .st-kicker { width:100%; text-align:center; font-size:8px;line-height:14px;letter-spacing:.9px; }
  smart-depth-selector .st-kicker .st-kicker-extra { display:none; }
  smart-depth-selector .st-choice-mark { top:9px; right:6px; width:15px; height:15px; }
  smart-depth-selector .st-choice-mark svg { width:10px;height:10px; }
  smart-depth-selector .st-visual { height:112px;margin-top:4px; }
  smart-depth-selector .st-portrait { width:clamp(68px,21vw,103px);height:clamp(68px,21vw,103px);left:50%;margin-left:0;translate:-50% 0;top:16px; }
  smart-depth-selector .st-orbit { width:clamp(66px,20vw,100px);height:clamp(66px,20vw,100px);left:50%;translate:-50% 0;top:19px; }
  smart-depth-selector .st-bubble { display:none; }
  smart-depth-selector .st-ground { width:60px;left:calc(50% - 30px);bottom:0; }
  smart-depth-selector .st-orbit-chip { width:20px;height:20px;border-radius:7px;font-size:12px; }
  smart-depth-selector .st-orbit-chip svg { width:12px;height:12px; }
  smart-depth-selector .st-orbit-chip.left { top:71px;left:0; }
  smart-depth-selector .st-orbit-chip.right { top:20px;right:0; }
  smart-depth-selector .st-label { font-size:17px;letter-spacing:-.4px; }
  smart-depth-selector .st-description { font-size:10px;line-height:1.45; min-height:29px;max-width:90px;margin:4px auto 0; }
  smart-depth-selector .st-card-bottom { margin-top:9px;padding-top:8px;justify-content:center;gap:4px; }
  smart-depth-selector .st-card-bottom .st-card-copy,smart-depth-selector .st-card-arrow { display:none; }
  smart-depth-selector .st-depth-meter { height:10px; }
  smart-depth-selector .st-depth-meter i:nth-child(1){height:4px;}.st-depth-meter i:nth-child(2){height:7px;}.st-depth-meter i:nth-child(3){height:10px;}
  smart-depth-selector .st-level-note { font-size:9px;margin:12px 0 15px;gap:5px; }
  smart-depth-selector .st-level-note svg { width:12px; height:12px; }
  smart-depth-selector .st-rail { margin-bottom:19px; }
  smart-depth-selector .st-rail i { width:calc((100% - 18px)/3); }
  smart-depth-selector[data-selected='basic'] .st-rail i { transform:translateX(calc(100% + 9px)); }
  smart-depth-selector[data-selected='advanced'] .st-rail i { transform:translateX(calc(200% + 18px)); }
  smart-depth-selector .st-panel { border-radius:17px; }
  smart-depth-selector .st-panel-bar { padding:11px 16px;min-height:57px;gap:10px; }
  smart-depth-selector .st-panel-bar small { font-size:9px; }
  smart-depth-selector .st-panel-bar span { font-size:9px;letter-spacing:.8px; }
  smart-depth-selector .st-panel-ident img { width:28px;height:28px; }
  smart-depth-selector .st-article { padding:21px 19px; }
  smart-depth-selector .st-article h3 { font-size:27px;letter-spacing:-.7px; }
  smart-depth-selector .st-article p,smart-depth-selector .st-article li { font-size:14px;line-height:1.8; }
  smart-depth-selector .st-journey { padding:14px 12px 12px;margin:19px 0; }
  smart-depth-selector .st-journey-top strong { font-size:12px; }
  smart-depth-selector .st-play { font-size:10px;padding:7px 8px; }
  smart-depth-selector .st-wire { flex-basis:19px; }
  smart-depth-selector .st-node { padding:10px 2px; }
  smart-depth-selector .st-node-label { font-size:9px; }
  smart-depth-selector .st-node code { font-size:10px; }
  smart-depth-selector .st-journey-caption { font-size:10px!important;min-height:32px; }
  smart-depth-selector .st-journey-disclaimer { font-size:8px; }
  .st-demo-footer { font-size:9px;gap:4px;padding-top:18px; }
}
@media(max-width:350px) {
  .st-demo-shell { width:calc(100% - 24px); }
  .st-demo-title { font-size:45px; }
  .st-demo-header-note { font-size:9px; }.st-demo-header-inner { padding-inline:13px; }
  smart-depth-selector .st-tabs { gap:7px; }
  smart-depth-selector .st-label { font-size:15px; }
  smart-depth-selector .st-description { font-size:9px; }
  smart-depth-selector .st-heading-copy p { font-size:9px; }
  smart-depth-selector .st-kicker { text-align:left;padding-left:4px; }
  smart-depth-selector .st-visual { height:99px; }
  smart-depth-selector .st-tab { min-height:200px; }
  smart-depth-selector .st-rail i { width:calc((100% - 14px)/3); }
  smart-depth-selector[data-selected='basic'] .st-rail i { transform:translateX(calc(100% + 7px)); }
  smart-depth-selector[data-selected='advanced'] .st-rail i { transform:translateX(calc(200% + 14px)); }
  smart-depth-selector .st-node code { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  smart-depth-selector .st-tab { transform:none!important; }
}
@media print { .st-demo-header-note,.st-demo-footer,.st-motion-toggle,.st-play,.st-tabs,.st-rail { display:none!important; } .st-demo-shell {width:100%;} smart-depth-selector .st-panel[hidden] {display:block!important;} *,*::before,*::after{animation:none!important;transition:none!important;} }

smart-depth-selector .st-mobile-quote { display:none; }
@media(max-width:600px) {
smart-depth-selector .st-mobile-quote { display:flex; align-items:center; justify-content:center; gap:7px; margin:13px 0 0; font-size:11px; font-weight:600; color:var(--st-accent); }
smart-depth-selector .st-mobile-quote span:first-child { font-size:14px; }
smart-depth-selector .st-level-note { margin-top:9px; }
}