/* Homepage walkthrough: deliberately illustrated, never a stale search screenshot. */
#text article>section#guide{overflow:hidden;border-color:#cddff2;background:linear-gradient(160deg,var(--yt-card) 0%,var(--yt-soft) 100%)}
html.dark #text article>section#guide{border-color:#355071}
#text #guide>p{max-width:58ch}
#text #guide ol{gap:10px}
#text #guide ol>li{border-color:var(--yt-line);background:var(--yt-card);box-shadow:0 5px 16px rgba(12,51,91,.04)}
#text #guide .guide-visuals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 0}
#text #guide .guide-visual{min-width:0;overflow:hidden;margin:0;border:1px solid var(--yt-line);border-radius:13px;background:var(--yt-card);box-shadow:0 8px 20px rgba(8,47,87,.055)}
#text #guide .guide-visual-scene{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:124px;box-sizing:border-box;overflow:hidden;padding:15px;background:radial-gradient(circle at 93% 10%,rgba(0,134,231,.13),transparent 43%),linear-gradient(155deg,#f5faff,#eaf4ff)}
html[dir=rtl] #text #guide .guide-visual-scene{direction:ltr}
html.dark #text #guide .guide-visual-scene{background:radial-gradient(circle at 93% 10%,rgba(76,166,239,.17),transparent 43%),linear-gradient(155deg,#1b2e4b,#182844)}
#text #guide .guide-visual figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-content:center;min-height:47px;box-sizing:border-box;padding:8px 11px;border-top:1px solid var(--yt-line);color:var(--yt-muted);line-height:1.3;text-align:left}
#text #guide .guide-visual figcaption span{grid-row:1/3;color:var(--yt-blue);font-size:11px;font-weight:800;letter-spacing:.08em}
#text #guide .guide-visual figcaption strong{color:var(--yt-ink);font-size:11px;font-weight:750}
#text #guide .guide-visual figcaption small{font-size:9px}
html[dir=rtl] #text #guide .guide-visual figcaption{direction:rtl;text-align:right}
#text #guide .guide-browser-bar{display:flex;gap:4px;align-items:center;height:22px;padding:0 8px;border:1px solid #c5d8ec;border-radius:7px 7px 0 0;background:#fff}
#text #guide .guide-browser-bar i{width:5px;height:5px;border-radius:50%;background:#9db8d1}
#text #guide .guide-browser-bar i:first-child{background:#ee9eaa}
#text #guide .guide-browser-bar i:nth-child(2){background:#f0c688}
#text #guide .guide-address{display:flex;align-items:center;gap:5px;min-width:0;height:34px;padding:0 7px;border:1px solid #c5d8ec;border-top:0;border-radius:0 0 7px 7px;background:#fff;color:#27466c;font-size:10px;font-weight:650;white-space:nowrap}
#text #guide .guide-address svg{width:12px;height:12px;flex:0 0 12px;color:#1277b8}
#text #guide .guide-address span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#text #guide .guide-copy-action{position:absolute;right:18px;bottom:15px;display:grid;place-items:center;width:27px;height:27px;border:1px solid #c9def2;border-radius:8px;background:#fff;color:#1478c5;box-shadow:0 3px 9px rgba(7,73,131,.12)}
#text #guide .guide-copy-action svg{width:14px;height:14px}
#text #guide .guide-demo-brand{align-self:flex-start;margin:0 0 11px;color:#1b3554;font-size:12px;font-weight:850;letter-spacing:-.03em}
html.dark #text #guide .guide-demo-brand{color:#e8f2ff}
#text #guide .guide-demo-play{display:inline-grid;place-items:center;width:21px;height:21px;margin-right:2px;border-radius:6px;background:#0086e7;color:#fff;font-size:10px;letter-spacing:0}
#text #guide .guide-demo-play svg{width:13px;height:13px}
#text #guide .guide-demo-input{display:flex;align-items:center;gap:5px;height:29px;padding:0 7px;border:1px solid #8bbde6;border-radius:6px;background:#fff}
#text #guide .guide-demo-input svg{width:12px;height:12px;flex:0 0 12px;color:#1678c2}
#text #guide .guide-demo-input span{height:4px;border-radius:3px;background:#b8cee3}
#text #guide .guide-demo-input span:nth-of-type(1){width:45%}
#text #guide .guide-demo-input span:nth-of-type(2){width:18%}
#text #guide .guide-demo-button{position:absolute;right:15px;bottom:14px;display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#0086e7;color:#fff;box-shadow:0 4px 10px rgba(0,96,166,.22)}
#text #guide .guide-demo-button svg{width:15px;height:15px}
#text #guide .guide-demo-result{display:flex;gap:7px;align-items:center;padding:7px;border:1px solid #cadeed;border-radius:8px;background:#fff}
#text #guide .guide-demo-thumb{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:5px;background:linear-gradient(140deg,#79b8e3,#17659f);color:#fff}
#text #guide .guide-demo-thumb svg{width:18px;height:18px}
#text #guide .guide-demo-lines{display:grid;gap:6px;flex:1}
#text #guide .guide-demo-lines i{height:5px;border-radius:4px;background:#9fb8d0}
#text #guide .guide-demo-lines i:last-child{width:62%;background:#d1deeb}
#text #guide .guide-demo-download{display:flex;align-items:center;justify-content:space-between;align-self:flex-end;gap:13px;min-width:76px;margin-top:9px;padding:5px 8px;border-radius:6px;background:#0086e7;color:#fff;font-size:10px;font-weight:800;letter-spacing:.03em}
#text #guide .guide-demo-download svg{width:13px;height:13px}

/* The feature cards represent YTMP3 capabilities, independent of search imagery. */
#text article>section#features{border-color:#bcd7f2;background:linear-gradient(150deg,var(--yt-card),var(--yt-soft))}
#text #features .feature-grid{gap:12px}
#text #features .feature-card{min-height:178px;border-radius:16px;box-shadow:0 11px 27px rgba(12,55,101,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#text #features .feature-card::before{height:4px}
#text #features .feature-card--1{min-height:164px}
#text #features .feature-card--2{border-color:#c5dff1;background:linear-gradient(155deg,#fff,#f0f9ff)}
#text #features .feature-card--3{border-color:#efd5dc;background:linear-gradient(155deg,#fff,#fff4f7)}
html.dark #text #features .feature-card--2{border-color:#315674;background:linear-gradient(155deg,#1a2c48,#1b3451)}
html.dark #text #features .feature-card--3{border-color:#684456;background:linear-gradient(155deg,#20263e,#302537)}
#text #features .feature-card:hover{transform:translateY(-2px);box-shadow:0 15px 32px rgba(12,55,101,.12)}
#text #features .feature-card h3{font-size:18px;text-align:left}
html[dir=rtl] #text #features .feature-card h3{text-align:right}
#text #features .feature-card p{max-width:52ch}
@media(max-width:500px){#text #guide .guide-visuals{grid-template-columns:minmax(0,1fr)}#text #guide .guide-visual{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:stretch}#text #guide .guide-visual-scene{min-height:96px;padding:11px}#text #guide .guide-visual figcaption{border-top:0;border-left:1px solid var(--yt-line);font-size:12px}#text #guide .guide-address{font-size:8px}#text #guide .guide-copy-action{right:12px;bottom:9px}#text #guide .guide-demo-button{right:11px;bottom:10px}#text #features .feature-card,#text #features .feature-card--1{min-height:0}}
@media(max-width:500px){html[dir=rtl] #text #guide .guide-visual figcaption{border-left:0;border-right:1px solid var(--yt-line)}}
@media(prefers-reduced-motion:reduce){#text #features .feature-card{transition:none}#text #features .feature-card:hover{transform:none}}