:root{--bg:#eef4fb;--surface:#fff;--text:#111827;--muted:#6f7d92;--line:#e2ebf6;--primary:#0b8df3;--primary2:#4f7cff;--shadow:0 20px 58px rgba(52,69,99,.11)}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:"DM Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 15% 0%,rgba(11,141,243,.12) 0,transparent 28%),radial-gradient(circle at 88% 10%,rgba(108,85,245,.09) 0,transparent 30%),linear-gradient(180deg,#f9fcff 0,#eef4fb 55%,#fff 100%);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.nav-wrap{position:fixed;top:18px;left:0;right:0;z-index:50}.nav{width:min(1160px,calc(100% - 28px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:13px 14px 13px 18px;border:1px solid rgba(219,229,242,.92);border-radius:20px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);box-shadow:0 18px 46px rgba(52,69,99,.10)}.brand{display:flex;align-items:center;gap:11px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.03em;color:#111827}.brand-mark{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#eef4ff;box-shadow:0 12px 26px rgba(11,141,243,.20)}.brand-mark img{display:block;width:23px;height:23px;object-fit:contain}.nav-links{display:flex;gap:28px;color:#66758a;font-size:14px;font-weight:700}.nav-links a{transition:.25s ease}.nav-links a:hover{color:#0b6fc2;background:#eef8ff}
.hero{padding:150px 0 50px;text-align:center}.badge{display:inline-flex;align-items:center;gap:8px;background:#eef8ff;color:#0b6fc2;font-weight:700;padding:8px 13px;border-radius:999px;font-size:13px}.hero h1{font-family:Manrope,sans-serif;font-size:clamp(40px,7vw,78px);line-height:.98;letter-spacing:-.055em;margin:22px auto 18px;max-width:970px}.gradient{background:linear-gradient(90deg,#111827,#0b8df3,#6c55f5);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:740px;margin:0 auto;color:var(--muted);font-size:18px}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}.btn{border:1px solid transparent;border-radius:12px;min-height:46px;padding:0 18px;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;box-shadow:0 10px 26px rgba(52,69,99,.07)}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#0b8df3,#4f7cff);color:#fff;box-shadow:0 16px 34px rgba(11,141,243,.22)}.btn-soft,.btn-ghost{background:#fff;color:#273142;border-color:#dce7f4}.btn-ghost{min-height:46px;padding-inline:18px}
#guides{padding:18px 0 70px}.toolbar{display:grid;grid-template-columns:1fr 220px;gap:14px;position:sticky;top:12px;z-index:5;margin-bottom:24px;padding:10px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border:1px solid rgba(232,233,241,.9);border-radius:18px;box-shadow:0 10px 30px rgba(40,44,70,.06)}.search{position:relative}.search input,.filter{width:100%;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);outline:none;font:inherit}.search input{padding:0 16px}.filter{padding:0 14px}.search input:focus,.filter:focus{border-color:#b8adff;box-shadow:0 0 0 4px rgba(108,85,245,.09)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{--accent:#6c55f5;--tint:#eeeaff;position:relative;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:24px;padding:22px;min-height:245px;box-shadow:0 10px 28px rgba(24,28,48,.055);transition:.22s ease;overflow:hidden}.card:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:var(--tint);right:-45px;top:-50px;opacity:.7}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dddaf6}.card.hidden{display:none}.card-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.brand-icon{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid #ececf3;box-shadow:0 8px 22px rgba(28,30,45,.08);overflow:hidden;padding:10px}.brand-icon img{display:block;width:100%;height:100%;object-fit:contain}.tag{font-size:12px;font-weight:750;background:var(--tint);color:#555a68;border-radius:999px;padding:7px 10px}.card h3{font-size:21px;letter-spacing:-.02em;margin:18px 0 7px}.card p{margin:0;color:var(--muted);font-size:14px}.status{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:18px;padding-top:14px;font-size:13px;color:#626779}.status b{color:#2f3344}.status span:first-child:before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:#e9f8ef;color:#16914b;font-size:11px;font-weight:900}.status>i:after{content:"↗";font-style:normal}.status i{display:none}
.video-link{position:relative;z-index:1;margin-top:14px;width:100%;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #d7e8f8;border-radius:12px;background:#f2f9ff;color:#0b6fc2;font-size:13px;font-weight:850;box-shadow:0 8px 20px rgba(52,69,99,.045);transition:.2s ease}.video-link:before{content:"▶";font-size:10px}.video-link:hover{transform:translateY(-1px);background:#0b8df3;border-color:#0b8df3;color:#fff;box-shadow:0 14px 28px rgba(11,141,243,.18)}
.tip{margin-top:24px;display:flex;gap:15px;align-items:flex-start;padding:20px 22px;border:1px solid #cfe8fb;border-radius:20px;background:linear-gradient(135deg,#eef8ff,#fff);box-shadow:0 14px 36px rgba(52,69,99,.06)}.tip-icon{width:42px;height:42px;border-radius:13px;background:#0b8df3;color:#fff;display:grid;place-items:center;flex:0 0 auto}.tip-icon:before{content:"✦"}.tip-icon i{display:none}.tip h4{margin:1px 0 5px;font-size:16px}.tip p{margin:0;color:var(--muted);font-size:14px}
footer{border-top:1px solid var(--line);background:#fff}.footer-inner{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px 0;color:var(--muted);font-size:13px}.footer-brand span{font-weight:900;color:var(--text);margin-right:5px}
.fa-solid,.fa-brands{font-style:normal}.badge i,.btn i,.search>i{display:none}
.status span:first-child:before,.status>i:after,.video-link:before,.tip-icon:before{content:none}.status i,.badge i,.btn i,.search>i,.tip-icon i{display:inline-grid}.status span:first-child{display:inline-flex;align-items:center;gap:7px}.status span:first-child i{color:#16914b}.status>i{color:var(--accent)}.search>i{position:absolute;left:16px;top:50%;z-index:1;transform:translateY(-50%);color:#8190a4}.search input{padding-left:45px}.video-link .tn-icon{width:15px;height:15px}.tip-icon .tn-icon{width:20px;height:20px}
@media (max-width:900px){.nav-links{display:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding-top:132px}.hero h1{font-size:clamp(42px,10vw,68px)}}
@media (max-width:640px){.container{width:min(100% - 24px,1180px)}.nav{width:min(100% - 20px,1160px);gap:10px;padding:10px}.nav .btn{display:none}.hero{padding:120px 0 36px}.hero p{font-size:16px}.toolbar{grid-template-columns:1fr;position:relative;top:auto}.grid{grid-template-columns:1fr}.card{min-height:220px}.footer-inner{flex-direction:column;align-items:flex-start}.brand-icon{width:62px;height:62px}}

.guide-accent-01{--accent:#EA4335;--tint:#ffe8e5}
.guide-accent-02{--accent:#EA4335;--tint:#ffe8e5}
.guide-accent-03{--accent:#EA4335;--tint:#ffe8e5}
.guide-accent-04{--accent:#0078D4;--tint:#e5f2ff}
.guide-accent-05{--accent:#0078D4;--tint:#e5f2ff}
.guide-accent-06{--accent:#0078D4;--tint:#e5f2ff}
.guide-accent-07{--accent:#0078D4;--tint:#e5f2ff}
.guide-accent-08{--accent:#2563EB;--tint:#e8f0ff}
.guide-accent-09{--accent:#2563EB;--tint:#e8f0ff}
.guide-accent-10{--accent:#6001D2;--tint:#f0e5ff}
.guide-accent-11{--accent:#1F6FEB;--tint:#e8f1ff}
.guide-accent-12{--accent:#111827;--tint:#eceff3}
.guide-accent-13{--accent:#F97316;--tint:#fff0e5}
.guide-accent-14{--accent:#E42527;--tint:#ffeaea}
.guide-accent-15{--accent:#FF7A59;--tint:#fff0eb}
.guide-accent-16{--accent:#FFE01B;--tint:#fff9ce}
.guide-accent-17{--accent:#2563EB;--tint:#e8f0ff}
.guide-accent-18{--accent:#0EA5E9;--tint:#e4f6ff}