/* 公开教程共用排版；颜色、字体、按钮和顶栏均继承 ui.css。 */
.guide-page{background:var(--bg)}
.guide-shell{max-width:1120px;margin:auto;padding:52px 32px 80px}
.guide-hero{max-width:860px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.guide-hero nav{display:flex;gap:12px;color:var(--fg-3);font-size:13px;margin-bottom:36px}
.guide-kicker{font-size:12px;letter-spacing:.08em;font-weight:600;color:var(--fg-3);margin-bottom:12px}
.guide-kicker:before{content:"";display:inline-block;width:18px;height:3px;background:var(--gold);vertical-align:middle;margin-right:8px}
.guide-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.3;letter-spacing:-.035em;font-weight:650;max-width:760px}
.guide-lead{font-size:17px;line-height:1.9;color:var(--fg-3);margin-top:20px;max-width:740px}
.guide-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:12px;color:var(--fg-3)}
.guide-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:56px;padding-top:40px}
.guide-toc nav{position:sticky;top:96px;display:grid;gap:4px}
.guide-toc p{font-size:12px;color:var(--fg-4);margin-bottom:12px}
.guide-toc a{padding:8px 0;color:var(--fg-3)}
.guide-article{min-width:0;font-size:15px;line-height:1.9}
.guide-article section{scroll-margin-top:88px;margin-bottom:52px}
.guide-article h2{font-size:25px;line-height:1.5;letter-spacing:-.025em;margin-bottom:16px}
.guide-article h3{font-size:17px;line-height:1.6;margin-bottom:6px}
.guide-article p{margin-bottom:14px;color:var(--fg-2)}
.guide-article .guide-kicker{color:var(--fg-3)}
.guide-steps{list-style:none;counter-reset:step;padding:0;margin:26px 0}
.guide-steps li{counter-increment:step;position:relative;padding:0 0 22px 46px}
.guide-steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1px;font:500 13px/30px var(--mono);width:30px;text-align:center;background:var(--bg-3);border-radius:6px;color:var(--fg-3)}
.guide-note{padding:20px 24px;border-left:3px solid var(--gold);background:var(--bg-2);border-radius:0 8px 8px 0;color:var(--fg-2);font-size:14px}
.guide-note p:last-child{margin-bottom:0}
.guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:20px}
.guide-actions .primary{min-height:40px;padding:0 16px}
.guide-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.guide-options>a{padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--fg);text-decoration:none}
.guide-options>a:hover{border-color:var(--fg-4)}
.guide-options span{font-size:12px;color:var(--fg-3)}
.guide-options h3{margin-top:8px}.guide-options p{font-size:14px}.guide-options b{font-size:13px;font-weight:500;color:var(--blue-fg)}
.guide-article code{font-family:var(--mono);font-size:.9em;background:var(--bg-3);padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}
.guide-article details{border-bottom:1px solid var(--line);padding:16px 0}
.guide-article summary{cursor:pointer;font-weight:550;line-height:1.7}
.guide-article details p{margin:12px 0 0;color:var(--fg-3);font-size:14px}
.guide-next{border-top:1px solid var(--line);padding-top:32px}
.guide-source{font-size:12px!important;color:var(--fg-3)!important}
.guide-footer{max-width:1120px;margin:auto;padding:24px 32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;font-size:12px;color:var(--fg-3)}
.guide-footer span{flex:1;min-width:240px}.guide-footer a{color:var(--fg-3)}
.guide-skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--bg);padding:12px}.guide-skip:focus{top:8px}
@media(max-width:760px){.guide-shell{padding:28px 20px 40px}.guide-hero nav{margin-bottom:24px}.guide-layout{grid-template-columns:1fr;gap:28px;padding-top:24px}.guide-toc nav{position:static;display:flex;flex-wrap:wrap;gap:4px 16px}.guide-toc p{width:100%;margin:0}.guide-toc a{font-size:13px;padding:4px 0}.guide-options{grid-template-columns:1fr}.guide-article h2{font-size:22px}.guide-steps li{padding-left:40px}.guide-note{padding:16px}.guide-footer{padding:24px 20px}.guide-page .topbar-in{padding:0 20px}.guide-page .topbar-in>a:not(.brand){font-size:12px}}

/* 教程中的独立播放器复用安装 demo，避免模拟浏览器样式影响文章正文。 */
.guide-motion{margin:28px 0 32px;container-type:inline-size;min-width:0}
.guide-motion iframe{display:block;border:0;width:100%;height:calc(56.25cqw + 92px);min-height:240px;background:var(--bg);border-radius:10px}
.guide-motion figcaption{font-size:12px;color:var(--fg-3);line-height:1.7;margin-top:10px}
@media(max-width:450px){.guide-motion iframe{height:calc(56.25cqw + 138px)}}

@media(max-width:450px){.guide-motion:has(iframe:not([src$="mode=zip"])) iframe{height:calc(56.25cqw + 92px)}}

/* 网申插件专题页：功能清单与对比表 */
.guide-list{padding-left:1.2em;margin:18px 0}
.guide-list li{margin-bottom:8px}
.guide-table{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:10px}
.guide-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.7}
.guide-table th,.guide-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.guide-table thead th{background:var(--bg-2);color:var(--fg-2);font-weight:550}
.guide-table tbody tr:last-child th,.guide-table tbody tr:last-child td{border-bottom:0}
.guide-table tbody tr:last-child{background:var(--bg-2)}