/* Homepage layout and palette. Original material pages keep their own styles. */
:root{--navy:#18334f;--navy3:#637992;--blue:#1769d2;--blue-soft:#eef5ff;--ink:#18334f;--muted:#5f7288;--line:#dce5ef;--soft:#f7fafe;--bg:#f3f6fa;--gold-soft:#fff4d6;--gold-d:#8a6515;--portal-cyan:#58d6e7}
[hidden]{display:none!important}
html{scroll-padding-top:24px}
body{background:var(--bg)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #1769d2;outline-offset:3px;border-radius:5px}
button{font:inherit;cursor:pointer}
.hero{background:radial-gradient(ellipse at 80% 20%,#16577750,transparent 48%),#081b30;border-bottom:1px solid #28617f;color:#fff}
.hero .grid-bg{opacity:.28;background-size:32px 32px;background-image:linear-gradient(#76caff14 1px,transparent 1px),linear-gradient(90deg,#76caff14 1px,transparent 1px);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.hero .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 32px 35px;min-height:162px}
.hero-copy{position:relative;z-index:1;min-width:0;flex:1}
.hero-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero .tag{font-size:12px;letter-spacing:.06em;padding:5px 9px;color:#c4deed;background:#76d6ef09;border:1px solid #95d9ee28;border-radius:5px}
.hero .tag .dot{width:5px;height:5px;background:var(--portal-cyan);box-shadow:0 0 8px #58d6e777}
.hero .stamp{max-width:none;margin:0;padding:0;color:#94aec7;font-size:12px;letter-spacing:.02em}
.hero .stamp b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#bfdce8;font-weight:500;margin-left:4px}
.hero h1{font-size:38px;line-height:1.25;font-weight:750;letter-spacing:-.025em;margin-top:16px}
.hero h1 span{color:#9be7f2}
/* 与主标题之间留出一行空白：行高 1.5，一行 = 1.5em，随字号自适应 */
.hero-headline{margin-top:calc(15px + 1.5em);font-size:20px;line-height:1.5;font-weight:600;letter-spacing:.01em;color:#d7ecf7}
.hero-sub{margin-top:8px;max-width:640px;font-size:14.5px;line-height:1.75;color:#a5c1d7}
.hero-network{width:225px;height:122px;flex:0 0 225px;pointer-events:none}
body>main{padding-top:28px;padding-bottom:30px}
.library-utilities{position:relative;margin:0 0 24px;padding:16px 20px 12px;border:1px solid #d4e2ed;border-radius:12px;background:#fff;box-shadow:0 8px 26px -18px #173b6b66}
.library-utilities::before{content:"";position:absolute;top:0;left:20px;height:2px;width:60px;background:linear-gradient(90deg,var(--blue),var(--portal-cyan))}
.library-utility-heading{display:flex;justify-content:space-between;align-items:center;gap:8px 18px;margin-bottom:9px}
.library-search-label{font-size:14px;font-weight:600;color:var(--ink)}
.library-links{gap:16px;line-height:1.5}
.library-links a{font-size:12px;color:var(--muted);padding:4px 0}
.library-links a:hover{color:var(--blue)}
.library-search-form{display:flex;align-items:stretch;gap:10px}
.library-search-wrap{position:relative;min-width:0;flex:1}
.library-search-wrap>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#5f7a96;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.library-search{color-scheme:light;width:100%;height:46px;padding:10px 46px 10px 42px;border:1px solid #c8d7e7;border-radius:7px;background:#f7fafe;font-size:15px;color:var(--ink);line-height:1.5}
.library-search::placeholder{color:#677e96;opacity:1}
.library-search::-webkit-search-cancel-button{-webkit-appearance:none}
.library-search:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:7px;background:#fff}
.library-clear{position:absolute;right:2px;top:1px;width:44px;height:44px;border:0;background:transparent;color:#5b7189;font-size:23px;border-radius:6px}
.library-clear:hover{color:var(--blue);background:#eaf1f9}
.library-search-submit,.library-reset{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 18px;border:1px solid var(--blue);border-radius:7px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.library-search-submit:hover,.library-reset:hover{background:#1258b3;border-color:#1258b3}
.library-search-footer{display:flex;align-items:center;justify-content:space-between;gap:6px 18px;margin-top:8px}
.portal-quicknav{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px}
.portal-quicknav a{padding:7px 9px;min-height:34px;display:inline-flex;align-items:center;border-radius:5px;font-size:12px;color:#4f6882;white-space:nowrap}
.portal-quicknav a:hover{background:#edf4fd;color:var(--blue)}
.library-results{margin:0!important;font-size:12px!important;color:var(--muted)!important;line-height:1.6;flex-shrink:0}
.library-intro{margin:0 0 32px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.library-intro .library-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;color:#426d96;margin-bottom:5px}
.library-intro h2{font-size:26px;font-weight:700;line-height:1.4;color:var(--ink);margin-bottom:6px;letter-spacing:0;text-wrap:balance}
.library-intro .library-lead{color:var(--muted);font-size:14px;line-height:1.7}
.library-routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0 0;align-items:stretch}
.library-route{position:relative;min-width:0;padding:20px;background:#fff;border:1px solid #d9e4ef;border-radius:11px;box-shadow:0 2px 4px #19365303}
.library-route{container-type:inline-size}
.library-route-art{display:none;position:absolute;right:20px;bottom:20px;width:132px;height:44px;pointer-events:none;user-select:none}
.library-route-art.practice-art{width:168px;height:84px;right:28px;bottom:22px}
@container(min-width:420px){.library-route-art{display:block}}
.library-route-heading{padding-right:27px;gap:10px;margin-bottom:9px;align-items:flex-start}
.library-route-number,.library-route:first-child .library-route-number{flex:0 0 28px;height:28px;border:1px solid #cce9f0;border-radius:6px;background:#edf9fc;color:#176880;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.library-route h3{font-size:17px;line-height:1.65;font-weight:700;color:var(--ink);text-wrap:pretty}
.library-route-graphic{position:absolute;right:18px;top:22px;width:23px;height:23px;stroke:#487da4;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8;pointer-events:none}
.library-intro .library-route p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 10px}
.library-route-links{display:flex;align-items:center;flex-wrap:wrap;gap:2px 13px;border-top:0;padding-top:0;margin-top:auto}
.library-route-links a{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:6px 0;border:0;border-radius:6px;background:transparent;color:var(--blue);font-size:14px;font-weight:500;line-height:1.5;text-decoration:none}
.library-route-links a:first-child{padding:7px 10px;background:#edf4ff;color:#155fbe;font-weight:600}
.library-route-links a span{font-size:14px;color:inherit}
.library-route-links .route-page{font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#657f9b;white-space:nowrap}
.library-route-links a:hover{color:#104f9b;text-decoration:underline;text-underline-offset:4px}
.library-route-links a:first-child:hover{background:#dcecff;text-decoration:none}
@media(min-width:641px){.library-route:first-child .library-route-links{display:grid;grid-template-columns:1fr;justify-items:start;gap:2px}}
.library-intro a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.library-empty{margin-bottom:32px;padding:38px 24px;text-align:center;border:1px dashed #cbdbe9;border-radius:12px;background:#fff}
.library-empty h3{font-size:20px;color:var(--ink)}
.library-empty p{font-size:14px;color:var(--muted);line-height:1.7;margin:10px 0 20px}
.sec{margin-bottom:32px;scroll-margin-top:20px}
.sec-head{align-items:center;margin-bottom:16px;padding-bottom:10px;gap:12px}
.sec-head h2{font-size:19px;color:var(--ink);font-weight:700;line-height:1.4}
.sec-head .bar{background:#58b6d6;width:3px;height:18px}
.sec-head .hint{font-size:12px;color:var(--muted);text-align:right;line-height:1.5}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
#ourGrid{grid-template-columns:1fr}
.grid:empty{display:none}
.card{border-color:#d9e4ef;border-radius:11px;padding:21px;background:#fff;animation:none;box-shadow:0 2px 4px #19365303}
.card::before,.card.gold::before{display:none}
.card:hover{animation:none;transform:none;border-color:#80acd7;box-shadow:0 4px 14px #173b6b09}
.card h3{font-size:18px;color:var(--ink);line-height:1.5;font-weight:700}
.card p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:10px;flex:none}
.card-head{margin-bottom:11px}
.badge{font-size:11px;background:#eef4fb;border-color:#dce6f2;color:#537391;padding:3px 9px;letter-spacing:.02em}
.card.gold .badge{background:#fff4d6;color:#8a6515;border-color:#f1dfad}
.card-head .date{font-size:12px;color:#687d93}
.tags{gap:6px;margin-top:12px}
.tags span{font-size:12px;background:#f5f8fc;border-color:#e5edf5;color:#5c7590;padding:3px 8px}
.library-meta{margin-top:10px;padding:8px 10px;background:#f4f8fc;color:#587491;font-size:12px;border-radius:5px}
.library-note{font-size:12px;line-height:1.7;color:#87642a}
.card-foot{padding-top:12px;margin-top:14px;border-color:#eaf0f6}
.card-foot .pages{font-size:13px;color:var(--muted)}
.card-foot .open,.card.gold .open{color:var(--blue);font-size:14px}
.card.ghost{background:#f7fafe}
.card.ghost p{color:var(--muted)}
.library-archive{margin-top:16px;border:1px solid #d9e4ef;border-radius:10px;background:#fff}
.library-archive>summary{display:flex;align-items:center;gap:10px;padding:14px 17px;min-height:50px;cursor:pointer;list-style:none;color:#345571;font-size:14px;font-weight:600;border-radius:9px}
.library-archive>summary::-webkit-details-marker{display:none}
.library-archive>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid #5f7c98;border-bottom:1.5px solid #5f7c98;transform:rotate(-45deg);margin-right:3px}
.library-archive[open]>summary::before{transform:rotate(45deg)}
.library-archive>summary:hover{background:#f5f9fd}
.archive-count{color:var(--muted);font-size:12px;font-weight:400}
.archive-action{margin-left:auto;color:var(--blue);font-size:12px;font-weight:400}
.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 16px 16px;align-items:start}
.archive-grid .card{padding:18px;background:#fafcfe;box-shadow:none}
.archive-grid .card h3{font-size:16px}
.archive-grid .card p{font-size:13px}
footer{border-color:#dce5ef}
@media(prefers-reduced-motion:no-preference){
 .network-pulse{animation:network-breathe 5s ease-in-out infinite}
 @keyframes network-breathe{0%,100%{opacity:.4}50%{opacity:.9}}
 .library-route-links a,.library-search-submit,.library-clear{transition:color .15s ease,background .15s ease}
}
@media(max-width:1050px){
 .hero-network{width:185px;flex-basis:185px;height:110px}
 .hero h1{font-size:36px}
 .hero-headline{font-size:19px}
 .hero .inner{padding-top:24px;min-height:153px}
 .library-search-footer{align-items:flex-start;flex-direction:column;gap:2px}
 .library-route{padding:18px}
 .library-route h3{font-size:17px}
}
@media(max-width:760px){
 .hero .inner{padding:24px 20px 34px;min-height:0}
 .hero-network{display:none}
 .hero h1{font-size:34px;margin-top:13px}
 .hero-headline{font-size:18px}
 .hero-sub{margin-top:7px;font-size:14px}
 .hero-meta{gap:9px 16px}
 .hero .stamp{font-size:11px}
 body>main{padding-right:20px;padding-left:20px}
 .library-utilities{padding:15px 16px 12px;margin-bottom:22px}
 .library-utility-heading{align-items:flex-start;flex-direction:column;gap:4px}
 .library-search{font-size:16px}
 .library-search-submit{padding:10px 13px}
 .library-intro h2{font-size:24px}
 .library-routes{gap:12px}
 .library-route-heading{padding-right:24px;gap:8px}
 .library-route-graphic{width:21px;height:21px;right:16px}
 .grid,.archive-grid{grid-template-columns:1fr}
 .sec-head{align-items:flex-start}
 .sec-head .hint{max-width:130px;flex-shrink:0}
 .card{padding:20px}
}
@media(max-width:640px){
 .library-routes{grid-template-columns:1fr}
 .library-intro h2{font-size:23px}
 .library-intro .library-lead{font-size:14px}
 .library-route{padding:20px}
 .library-route h3{font-size:17px}
 .library-route-heading{gap:9px;margin-bottom:9px}
 .library-route-graphic{right:17px;top:22px}
 .library-route-links{gap:2px 12px}
 .library-search-form{flex-wrap:wrap;gap:8px}
 .library-search-wrap{flex-basis:100%}
 .library-search-submit{min-height:44px;padding:8px 12px;font-size:13px}
 .library-search-footer{margin-top:5px}
 .portal-quicknav{gap:0 4px}
 .portal-quicknav a{min-height:40px;padding:7px 5px;font-size:12px}
 .library-results{font-size:12px!important}
 .sec-head h2{font-size:18px}
 .sec-head .hint{font-size:11px;max-width:100px}
}
@media(max-width:360px){
 body>main{padding-left:14px;padding-right:14px}
 .hero .inner{padding-left:16px;padding-right:16px}
 .hero h1{font-size:31px}
 .hero-headline{font-size:17px}
 .library-route{padding:17px}
 .library-route-graphic{display:none}
 .library-route-heading{padding-right:0}
 .library-search-label{font-size:13px}
}
