.yt-guide .yt-scene { max-width:640px; margin:26px auto 8px; padding:20px; border-radius:22px; background:#0f0f0f; color:#f1f1f1; border:1px solid #303030; }
.yt-guide .yt-prompt { display:flex; align-items:center; gap:2px; min-height:44px; padding:10px 16px; border-radius:999px; background:#272727; font-size:.92rem; }
.yt-guide .yt-typed { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; animation:yt-type 8s steps(34,end) infinite; }
.yt-guide .yt-typed::after { content:"long documentaries to wind down"; }
@keyframes yt-type { 0%,8% { max-width:0; } 40%,92% { max-width:100%; } 100% { max-width:0; } }
.yt-guide .yt-caret { color:#aaa; }
.yt-guide .yt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 12px; }
.yt-guide .yt-grid div { border-radius:10px; overflow:hidden; background:#1c1c1c; animation:yt-dim 8s ease infinite; }
.yt-guide .yt-grid i { display:block; height:62px; background:linear-gradient(135deg,#3c4a5c,#8a9bb0); } .yt-guide .yt-grid b { display:block; padding:8px 10px; font-size:.72rem; line-height:1.3; font-weight:700; }
.yt-guide .yt-grid .b i { background:linear-gradient(135deg,#a3620d,#f3bd62); } .yt-guide .yt-grid .d i { background:linear-gradient(135deg,#0b3d5c,#1f7a9e); } .yt-guide .yt-grid .f i { background:linear-gradient(135deg,#4a3a7a,#b9a5ff); }
.yt-guide .yt-grid .b, .yt-guide .yt-grid .d, .yt-guide .yt-grid .f { animation:yt-rise 8s ease infinite; }
@keyframes yt-dim { 0%,40% { opacity:1; transform:none; } 52%,90% { opacity:.18; transform:scale(.96); } 100% { opacity:1; transform:none; } }
@keyframes yt-rise { 0%,40% { opacity:1; transform:none; box-shadow:none; } 52%,90% { opacity:1; transform:translateY(-6px) scale(1.03); box-shadow:0 0 0 2px #ff0000; } 100% { opacity:1; transform:none; } }
.yt-guide .yt-tab { display:inline-block; padding:7px 14px; border-radius:999px; background:#f1f1f1; color:#0f0f0f; font-size:.8rem; font-weight:800; opacity:0; animation:yt-tab 8s ease infinite; }
@keyframes yt-tab { 0%,48% { opacity:0; transform:translateY(6px); } 56%,90% { opacity:1; transform:none; } 100% { opacity:0; } }
.yt-guide .yt-fields label { display:flex; flex-direction:column; gap:6px; margin:14px 0; font-size:.84rem; font-weight:700; color:var(--fe-ink); }
.yt-guide .yt-fields textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-ink); font:inherit; font-weight:400; font-size:.9rem; resize:vertical; }
.yt-guide .yt-rows { display:grid; gap:8px; margin-top:12px; }
.yt-guide .yt-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:10px 14px; border-radius:12px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-ink); font-size:.88rem; }
.yt-guide .yt-row b { overflow-wrap:anywhere; } .yt-guide .yt-row small { grid-column:1/-1; font-size:.78rem; color:var(--fe-muted); }
.yt-guide .yt-score { padding:4px 12px; border-radius:999px; font-size:.76rem; font-weight:800; white-space:nowrap; }
.yt-guide .s-hi { background:rgba(46,154,98,.16); color:var(--fe-high); } .yt-guide .s-mid { background:rgba(217,162,27,.18); color:#9a6a00; } .yt-guide .s-lo { background:rgba(201,74,58,.14); color:var(--fe-low); }
html.theme-dark .yt-guide .s-mid { color:var(--fe-mid); }
.yt-guide .yt-steps { display:grid; gap:10px; margin:22px 0; }
.yt-guide .yt-steps > div { display:grid; grid-template-columns:48px 1fr; column-gap:16px; padding:18px 20px; border-radius:16px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-ink); }
.yt-guide .yt-steps > div > b { grid-row:span 2; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--fe-accent); color:#fff; font-family:'DM Serif Display',serif; font-size:1.4rem; font-weight:400; }
html.theme-dark .yt-guide .yt-steps > div > b { color:#111; }
html body.fe-page.page-blog-article .blog-post-content .yt-steps h3 { margin:2px 0 4px !important; padding:0 !important; font-size:1.05rem !important; color:var(--fe-ink) !important; }
html body.fe-page.page-blog-article .blog-post-content .yt-steps p { margin:0 !important; font-size:.9rem !important; line-height:1.55 !important; color:var(--fe-muted) !important; max-width:none; }
@media(max-width:520px) { .yt-guide .yt-grid { grid-template-columns:1fr 1fr; } }