*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f6fd;color:#24243d;font:16px/1.85 system-ui,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}a:hover{color:#176dc8}header,main,footer{max-width:1160px;margin:auto;padding:25px}header{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:25px;font-weight:850;color:#135ea8}.brand:before{content:"✦";margin-right:12px}nav,.links{display:flex;gap:16px;flex-wrap:wrap}.hero{background:#102e4d;color:white;border-radius:24px;padding:48px}.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:35px;align-items:center}.tag,.number{font-size:12px;letter-spacing:2px;color:#8271d8;font-weight:750}.hero .tag{color:#b6b0ff}h1{font-size:clamp(30px,4.5vw,49px);line-height:1.35;margin:20px 0}h2{font-size:27px;line-height:1.45;margin:0 0 18px}h3{font-size:19px;margin:10px 0}.lead{color:#c7c6df;font-size:18px}.btn{display:inline-block;background:#176dc8;color:white;border:0;border-radius:8px;padding:12px 22px;font:inherit;cursor:pointer;margin-top:12px}section{margin:42px 0}.grid,.split{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.card,.panel{background:white;border:1px solid #e0e1f0;padding:27px;border-radius:16px}.muted,footer{color:#77768a;font-size:14px}.links a{padding:9px 14px;border:1px solid #dcdded;border-radius:8px;background:white}.pager{justify-content:space-between;margin:25px 0}.directory{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.directory a{padding:16px;background:white;border:1px solid #e1e1f0;border-radius:10px}.directory small{display:block;color:#838096}input,textarea,select{width:100%;font:inherit;border:1px solid #c9c9dd;border-radius:8px;padding:12px;margin:10px 0;background:white;color:#28283f}textarea{min-height:220px}.toolbar{display:grid;grid-template-columns:2fr 1fr;gap:20px}.tablewrap{overflow:auto;border:1px solid #dedfed;border-radius:12px}table{border-collapse:collapse;width:100%;background:white;font-size:14px;text-align:left}td,th{padding:17px;border-bottom:1px solid #e4e4ee;vertical-align:top}th{background:#e5effa}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{padding:23px;background:#e5effa;border-radius:14px}.code{white-space:pre-wrap;background:#272940;color:#dbd9f8;padding:24px;border-radius:12px;font:14px/1.9 ui-monospace,monospace;overflow-wrap:anywhere}details{background:white;border:1px solid #e0e0ee;padding:20px 24px;border-radius:10px;margin:10px 0}summary{font-weight:700;cursor:pointer}footer{border-top:1px solid #dedfeb;margin-top:45px}.orb{padding:25px;border:1px solid #666080;border-radius:18px;background:#32304e;transform:rotate(2deg)}.orb p{padding:10px 16px;background:#423d68;border-radius:9px;font-size:15px}.orb strong{color:#c3b8ff;font-size:30px}.checklist li{margin:12px 0}[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:3px solid #ab9de9;outline-offset:3px}@media(max-width:760px){header{align-items:flex-start;flex-direction:column}header,main,footer{padding:18px}.hero{padding:28px 23px}.hero-grid,.split,.grid,.toolbar{grid-template-columns:1fr}.steps,.directory{grid-template-columns:repeat(2,1fr)}.orb{transform:none}}
header{position:sticky;top:0;z-index:5;background:#f5f6fdf5;border-bottom:1px solid #e0e6ef}.eyebrow{color:#a7d4ff;letter-spacing:2px;font-size:12px}.mock{background:white;color:#1d3d59;border-radius:14px;padding:16px;box-shadow:0 20px 50px #0003;transform:rotate(-3deg)}.mock-head{font-size:12px;color:#789;border-bottom:1px solid #dde5ed;padding-bottom:10px}.mock-main{background:#e4effa;padding:25px 16px;margin-top:15px;border-radius:8px;font-size:25px;font-weight:800}.mock-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.mock-bars span{height:70px;background:#e9edf4;border-radius:7px}.badge{display:inline-block;padding:5px 12px;border-radius:20px;background:#e7f0fa;color:#24619c;font-size:12px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px}.stat-grid div{padding:18px;background:#ffffff10;border:1px solid #ffffff25;border-radius:12px}.stat-grid strong{display:block;font-size:22px}.stat-grid small{color:#c4d7e9}.wide{grid-column:1/-1}.friendlinks{display:flex;gap:12px;flex-wrap:wrap}.friendlinks a{padding:9px 17px;border:1px solid #d7e2ef;border-radius:8px;background:white}.steps{counter-reset:step}.step:before{counter-increment:step;content:"0" counter(step);font-weight:800;color:#2470b6;font-size:25px}.skip{position:absolute;left:-10000px}.skip:focus{left:10px;top:5px;background:white;padding:10px;z-index:10}@media(max-width:760px){header{position:static}.stat-grid{grid-template-columns:1fr}.section-head{display:block}.mock{transform:none}}
/* Six independent visual layouts */
header .brand{font-size:clamp(17px,2vw,23px);max-width:60%;line-height:1.45;overflow-wrap:anywhere}header nav{font-size:13px}body{--accent:#176dc8}a.btn,button.btn{background:var(--accent)}
.template-1{--accent:#147a72;background:#f2f7f5;color:#193c39}.template-1 .hero{background:#e0eee9;color:#164940;border-radius:0;border-left:9px solid #147a72}.template-1 .hero .lead,.template-1 .eyebrow{color:#52736a}.template-1 .hero-grid{grid-template-columns:1fr}.template-1 .mock{display:none}.template-1 .stat-grid div{background:#fff8;border-color:#bcd5cb}.template-1 .stat-grid small{color:#52736a}.template-1 .grid{grid-template-columns:repeat(4,1fr)}.template-1 .card{border-radius:3px;border-top:4px solid #82b4a3}.template-1 .panel{border-radius:3px}.template-1 .brand{color:#147a72}.template-1 th{background:#e1eee7}
.template-2{--accent:#a4512e;background:#f7f1e6;color:#443126}.template-2 header{background:#f7f1e6}.template-2 .brand{color:#945038}.template-2 .hero{background:#f7f1e6;color:#443126;border-top:2px solid #70432d;border-bottom:2px solid #70432d;border-radius:0;padding-left:0;padding-right:0}.template-2 .hero h1{font-family:serif;font-size:clamp(34px,5vw,60px)}.template-2 .hero .lead,.template-2 .eyebrow{color:#84644e}.template-2 .mock{transform:none;box-shadow:none;border:1px solid #cfb89b;background:#eee0c8}.template-2 .mock-main{background:#dac7a7;color:#65462b}.template-2 .card,.template-2 .panel{background:#fffcf5;border-color:#ddcdb6;border-radius:0}.template-2 .stat-grid div{background:#efe4d3;border-color:#d9c6ac}.template-2 .stat-grid small{color:#84644e}.template-2 th{background:#eee0c8}.template-2 .split{grid-template-columns:1.4fr 1fr}
.template-3{--accent:#6551c5;background:#f1eff8}.template-3 main{max-width:1300px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 32px}.template-3 main>p,.template-3 main>section,.template-3 main>.pager{grid-column:2}.template-3 .contents{grid-column:1;grid-row:1/40;align-self:start;position:sticky;top:125px;padding:25px;background:white;border-radius:15px}.contents a{display:block;margin:12px 0;font-size:14px}.template-3 .hero{background:#49397d}.template-3 .hero-grid{grid-template-columns:1fr}.template-3 .mock{display:none}.template-3 .brand{color:#6551c5}.template-3 .steps{grid-template-columns:repeat(2,1fr)}.template-3 .panel{border-left:4px solid #a99add}.template-3 th{background:#e9e3f6}
.template-4{--accent:#207ca4;background:#12252e;color:#dce9ec}.template-4 header{background:#12252ef5;border-color:#38505c}.template-4 .brand{color:#8ed5eb}.template-4 .hero{background:#173a4b;border:1px solid #3b6a7e;border-radius:8px}.template-4 .hero-grid{grid-template-columns:1fr 1.1fr}.template-4 .card,.template-4 .panel,.template-4 details{background:#1a303b;border-color:#38505c;border-radius:8px}.template-4 .step{background:#234451}.template-4 table{background:#1a303b}.template-4 th{background:#264756}.template-4 td{border-color:#38505c}.template-4 .links a,.template-4 .friendlinks a{background:#203e4a;border-color:#456170}.template-4 .muted,.template-4 footer{color:#a0b5bf}.template-4 .badge{background:#284c5e;color:#a7ddec}.template-4 .mock{transform:none;background:#d9e8ed}.template-4 .grid{gap:12px}.template-4 footer{border-color:#38505c}
.template-5{--accent:#ad3b48;background:#fff9f8;color:#3d2b32}.template-5 .hero{background:#f8dfe2;color:#602e38;border-radius:38px}.template-5 .hero-grid{grid-template-columns:1fr 1fr}.template-5 .hero-grid>div:first-child{order:2}.template-5 .mock{transform:rotate(3deg);box-shadow:12px 15px 0 #d9b8bb}.template-5 .hero .lead,.template-5 .eyebrow{color:#825560}.template-5 .brand{color:#a33e4b}.template-5 .stat-grid div{background:#fff9;border-color:#e5bdc2}.template-5 .stat-grid small{color:#825560}.template-5 .card{border-radius:24px;box-shadow:0 8px 0 #f2e5e7;border-color:#e7d7db}.template-5 .steps{grid-template-columns:1fr}.template-5 .step{display:grid;grid-template-columns:50px 190px 1fr;gap:15px;align-items:center;background:#f5e8eb}.template-5 .step h3,.template-5 .step p{margin:0}.template-5 th{background:#f4e1e5}.template-5 .split{grid-template-columns:1fr 1.2fr}
@media(max-width:900px){.template-1 .grid{grid-template-columns:repeat(2,1fr)}.template-3 main{display:block}.template-3 .contents{position:static;margin-bottom:25px}.template-3 .contents a{display:inline-block;margin:5px 12px 5px 0}.template-5 .step{display:block}.template-5 .step h3{margin:10px 0}}
@media(max-width:760px){header .brand{max-width:100%}.template-1 .grid,.template-2 .split,.template-4 .hero-grid,.template-5 .hero-grid,.template-5 .split{grid-template-columns:1fr}.template-5 .hero-grid>div:first-child{order:0}.template-5 .mock{transform:none}.template-3 .steps{grid-template-columns:1fr}}