*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,"PingFang HK","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#222;background:#f6f5f2}
header{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.6rem 1rem;background:#8b1e1e;color:#fff}
.brand{color:#fff;font-weight:700;text-decoration:none;flex:1 1 auto}
#q{flex:1 1 12rem;padding:.5rem .7rem;border:0;border-radius:.4rem;font-size:1rem}
.note{margin:.8rem 1rem;padding:.6rem .8rem;background:#fff6d6;border-left:4px solid #e0b400;border-radius:.3rem;font-size:.9rem}
main{padding:0 1rem 2rem;max-width:960px;margin:auto}
.crumb{font-size:.9rem;color:#666;margin:.6rem 0}
.crumb a{color:#8b1e1e}
ul.list{list-style:none;padding:0;margin:0}
ul.list li a{display:flex;gap:.6rem;align-items:center;padding:.8rem;margin:.4rem 0;background:#fff;border-radius:.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 2px #0001}
ul.list li a:active{background:#eee}
.meta{margin-left:auto;font-size:.8rem;color:#888;white-space:nowrap}
.sub{display:block;font-size:.8rem;color:#888}
.frame{position:relative;width:100%;aspect-ratio:16/10;background:#000;border-radius:.5rem;overflow:hidden}
.frame.doc{aspect-ratio:auto;height:75vh;background:#fff}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btn{display:inline-block;margin:.8rem 0;padding:.6rem 1rem;background:#8b1e1e;color:#fff;border-radius:.4rem;text-decoration:none}
footer{text-align:center;font-size:.8rem;color:#999;padding:1rem}
@media(min-width:700px){body{font-size:17px}}