:root{--ink:#1d1d1f;--muted:#6f7378;--line:#d9dde1;--paper:#fff;--canvas:#f3f4f5;--brand:#b64232;--brand-dark:#8e3026;--green:#1ea447;--header:#151515;--shadow:0 14px 36px rgba(0,0,0,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 "Segoe UI",Arial,sans-serif}.site-header{height:64px;background:var(--header);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.24)}.header-inner{max-width:1110px;height:100%;margin:auto;display:flex;align-items:stretch;justify-content:space-between;padding:0 18px}.brand,.nav-link,.login-button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}.brand{display:flex;gap:10px;align-items:center;color:#d14d3a;font-weight:700;font-size:18px}.brand-mark{display:grid;place-items:center;width:28px;height:28px;background:#b64232;color:#fff;border-radius:4px;font-weight:800}.site-header nav{display:flex}.nav-link,.login-button{padding:0 20px;color:#bfc2c5}.nav-link:hover{background:#242424;color:#fff}.login-button{background:#138a37;color:#fff}.login-button:hover{background:#18a945}
#app{min-height:calc(100vh - 150px)}.shell{max-width:1110px;margin:0 auto;padding:22px 18px 52px}.crumbs{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:22px;color:#8c3a30;font-size:14px}.crumbs button{border:0;background:none;color:inherit;padding:0;cursor:pointer}.crumbs span{color:#9ca0a4}.page-title{font-size:34px;line-height:1.18;margin:0 0 6px}.subtitle{margin:0 0 28px;color:var(--muted);font-size:17px}.section-heading{font-size:28px;margin:0 0 16px}
.hero{background:linear-gradient(135deg,#252525 0%,#161616 64%,#321a17 100%);color:#fff;padding:42px;border-radius:6px;margin-bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:32px;overflow:hidden}.hero h1{font-size:36px;line-height:1.2;margin:0 0 10px}.hero p{margin:0;color:#c8cbce;max-width:560px}.hero-glyph{font-size:92px;line-height:1;color:#c24735;transform:rotate(-8deg);text-shadow:0 12px 34px rgba(194,71,53,.24)}.search{position:relative;margin-bottom:26px}.search input{width:100%;height:54px;border:1px solid #cfd3d6;border-radius:4px;background:#fff;padding:0 54px 0 18px;font-size:16px;outline:none;box-shadow:0 2px 8px rgba(0,0,0,.04)}.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(182,66,50,.13)}.search span{position:absolute;right:18px;top:12px;font-size:20px;color:#777}.search-results{display:grid;gap:8px;margin:-14px 0 26px}.search-result{display:flex;justify-content:space-between;gap:16px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:4px;padding:13px 15px;cursor:pointer}.search-result:hover{border-color:#b64232;color:#96392d}.search-result small{color:var(--muted)}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.category-card{min-height:268px;background:#fff;border:1px solid #d7d9dc;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.category-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.11);border-color:#c9c9c9}.category-art{height:145px;display:grid;place-items:center;font-size:66px;color:#fff;position:relative;overflow:hidden}.category-art::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.11),transparent)}.category-card:nth-child(1) .category-art{background:linear-gradient(135deg,#376a7f,#1a303c)}.category-card:nth-child(2) .category-art{background:linear-gradient(135deg,#315f78,#183548)}.category-card:nth-child(3) .category-art{background:linear-gradient(135deg,#74433e,#241f24)}.category-card:nth-child(4) .category-art{background:linear-gradient(135deg,#3e6246,#1d2924)}.category-card:nth-child(5) .category-art{background:linear-gradient(135deg,#76542f,#2d241f)}.category-card:nth-child(6) .category-art{background:linear-gradient(135deg,#514352,#262027)}.category-copy{text-align:center;padding:17px 15px 14px;flex:1}.category-copy h3{margin:0 0 7px;color:#a43d31;font-size:23px}.category-copy p{margin:0;color:#3c3f43}.category-count{border-top:1px solid var(--line);padding:12px;text-align:center;color:#777}
.article-list{background:#fff;border:1px solid var(--line);border-radius:4px}.article-row{display:grid;grid-template-columns:46px 1fr 24px;align-items:center;gap:10px;width:100%;padding:15px 18px;border:0;border-bottom:1px solid #e8eaec;background:#fff;text-align:left;cursor:pointer;color:var(--ink);font:inherit}.article-row:last-child{border-bottom:0}.article-row:hover{background:#faf5f4;color:#9b392e}.article-icon{color:#b64232;font-size:20px}.article-row strong{display:block;font-size:17px}.article-row small{display:block;color:var(--muted);margin-top:2px}.arrow{font-size:22px;color:#aeb2b6}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px}.article{background:#fff;border:1px solid var(--line);padding:34px 38px;border-radius:4px}.article h1{font-size:34px;line-height:1.2;margin:0 0 8px}.article .meta{font-size:14px;color:#8a8e92;border-bottom:1px solid #e4e6e8;padding-bottom:18px;margin-bottom:22px}.article h2{font-size:23px;margin:30px 0 9px}.article p{margin:0 0 15px}.article ul,.article ol{padding-left:22px}.notice{border-left:4px solid #cf513e;background:#fbf1ef;padding:14px 16px;margin:22px 0}.steps{counter-reset:step;list-style:none;padding:0!important}.steps li{counter-increment:step;position:relative;padding:0 0 18px 46px}.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#b64232;color:#fff;font-weight:700}.side-panel{align-self:start;background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px;position:sticky;top:86px}.side-panel h3{margin:0 0 12px;font-size:16px}.side-panel button{display:block;width:100%;border:0;border-top:1px solid #eee;background:none;text-align:left;padding:10px 0;cursor:pointer;color:#555}.side-panel button:hover{color:#a23b30}.favorite{width:100%;margin-top:12px;padding:10px;border:1px solid #d2d5d7;background:#fff;border-radius:3px;cursor:pointer}.favorite.active{border-color:#c44836;background:#fbefed;color:#9e362b}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.person{background:#fff;border:1px solid var(--line);padding:24px;text-align:center}.avatar{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;background:#242424;color:#fff;font-size:30px}.person h3{margin:0}.person p{margin:4px 0 0;color:var(--muted)}.empty{padding:26px;text-align:center;background:#fff;border:1px dashed #c9cccf;color:#6f7378}
footer{max-width:1110px;margin:auto;border-top:1px solid var(--line);padding:24px 18px 34px;color:#777;display:flex;justify-content:space-between;align-items:center;font-size:14px}footer strong,footer span{display:block}footer strong{color:#444}footer button{border:0;background:none;color:#9e392e;cursor:pointer}.modal{width:min(500px,calc(100% - 28px));border:1px solid #333;padding:0;box-shadow:var(--shadow);background:#fff}.modal::backdrop{background:rgba(0,0,0,.54)}.modal-title{height:62px;background:#232323;color:#e05440;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.modal-title h2{font-size:21px;margin:0}.modal-title button{border:0;background:none;color:#c64b39;font-size:36px;cursor:pointer}.modal-body{padding:18px 16px}.steam-button{margin:0 4px 4px;width:calc(100% - 8px);height:44px;border:0;background:var(--green);color:#fff;font-size:17px;cursor:pointer}#toast{position:fixed;right:20px;bottom:20px;background:#202020;color:#fff;padding:12px 16px;border-radius:4px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:40}#toast.show{opacity:1;transform:none}
@media(max-width:800px){.category-grid,.people-grid{grid-template-columns:repeat(2,1fr)}.article-layout{grid-template-columns:1fr}.side-panel{position:static}.hero{padding:30px}.hero-glyph{font-size:68px}}
@media(max-width:560px){.site-header{height:58px}.header-inner{padding:0 10px}.brand span:last-child{display:none}.nav-link,.login-button{padding:0 13px}.shell{padding:16px 12px 38px}.hero{padding:24px 20px}.hero h1,.page-title,.article h1{font-size:28px}.hero-glyph{display:none}.category-grid,.people-grid{grid-template-columns:1fr}.category-card{min-height:0}.article{padding:24px 20px}.article-row{grid-template-columns:34px 1fr 18px;padding:14px 12px}footer{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.category-art{height:176px;display:block;background:#222;font-size:0}
.category-art::after{display:none}
.category-art img{width:100%;height:100%;display:block;object-fit:cover}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.guide-card{background:#fff;border:1px solid #d9dcdf;border-radius:2px;overflow:hidden;cursor:pointer;min-width:0}.guide-card:hover,.guide-card:focus-visible{border-color:#bd4a39;box-shadow:0 7px 18px rgba(0,0,0,.09);outline:none}.guide-card img{width:100%;height:174px;display:block;object-fit:cover;background:#e5e5e5}.guide-card h3{font-size:22px;line-height:1.25;color:#bf4937;margin:0;padding:18px 19px 20px;font-weight:600}
@media(max-width:800px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.guide-grid{grid-template-columns:1fr}.guide-card img{height:auto;aspect-ratio:2/1}}
.article-page-title{font-size:38px;line-height:1.2;margin:0 0 18px}.source-article-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:28px}.source-article{min-width:0}.source-article h2{font-size:25px;margin:25px 0 8px}.source-article p{margin:0 0 14px}.source-article ul,.source-article ol{padding-left:24px}.source-article .notice{background:transparent;border-left:0;padding:0;margin:0 0 20px}.article-cover{display:block;width:100%;max-height:360px;object-fit:cover;margin:0 0 24px}.source-sidebar{align-self:start;color:#383b3e}.source-sidebar h4{font-size:18px;margin:0 0 10px}.source-sidebar hr{border:0;border-top:1px solid #d7dadd;margin:18px 0}.source-sidebar p{margin:7px 0}.source-sidebar ul{padding-left:19px;margin:8px 0}.source-sidebar a{color:#b64232;text-decoration:none;cursor:pointer}.source-sidebar .favorite{margin:0;text-align:left}.source-article table{width:100%;border-collapse:collapse;margin:16px 0}.source-article th,.source-article td{padding:9px;border-top:1px solid #d9dcdf;text-align:left}.source-article tr:nth-child(odd){background:#eee}
@media(max-width:800px){.source-article-layout{grid-template-columns:1fr}.source-sidebar{border-top:1px solid #d7dadd;padding-top:20px}.article-page-title{font-size:32px}}
.source-article h3{font-size:25px;margin:0 0 8px}.source-article h4{font-size:20px;margin:20px 0 8px}.source-article hr{border:0;border-top:1px solid #d7dadd;margin:26px 0}.content-image{display:block;max-width:100%;height:auto;margin:18px 0}.item-icon{display:block;width:40px;height:40px;object-fit:contain}.source-article code{background:#e8eaec;border-radius:3px;padding:2px 5px;color:#26282a}
#article-start img{max-width:100%;height:auto;display:block;margin:16px 0}
#article-start img.item-icon{display:inline-block;width:40px;height:40px;margin:0;vertical-align:middle}
#article-start .mw-100{max-width:100%}
#article-start figure{max-width:100%;margin:16px 0}
#article-start pre,#article-start .table-wrap{max-width:100%;overflow-x:auto}