*{box-sizing:border-box}body{margin:0;background:#fff;color:#343438;font:14px OpenSans,Arial,sans-serif}button,input,a{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ff91a8;outline-offset:3px}.header{height:66px;border-bottom:1px solid #efeff1;position:sticky;top:0;background:#fffffff5;backdrop-filter:blur(12px);z-index:30;display:flex;align-items:center;padding:0 25px;gap:23px}.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:19px}.brand-mark{background:linear-gradient(135deg,#ffacc3,#fa6f93);width:34px;height:34px;display:grid;place-items:center;border-radius:9px}.brand-mark img{width:25px;filter:brightness(0) invert(1)}.tagline{font-size:12px;color:#969399}.header-right{margin-left:auto;display:flex;align-items:center;gap:20px}.local-badge{color:#b58151;background:#fff1df;border-radius:7px;padding:7px 12px;font-size:12px}.primary{background:#f45677;color:white;border-radius:7px;padding:11px 19px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;border:0;cursor:pointer}.primary img{width:16px;filter:brightness(0) invert(1)}.primary:hover{background:#dd3c60}.sidebar{position:fixed;top:66px;bottom:0;left:0;width:198px;border-right:1px solid #f2f2f4;padding:20px 12px;display:flex;flex-direction:column;background:white;z-index:20}.sidebar nav{display:grid;gap:5px}.sidebar nav>button,.sidebar nav>a{display:flex;align-items:center;gap:11px;text-align:left;padding:12px 13px;border-radius:7px;font-size:13px}.sidebar nav img{width:18px;height:18px;opacity:.68}.sidebar nav .active{background:#fff0f4;color:#d84568;font-weight:600}.sidebar nav button:hover,.sidebar nav a:hover{background:#f7f7f9}.sidebar nav p{font-size:10px;letter-spacing:1px;color:#b1adb4;padding:17px 12px 3px;margin:0}.sidebar-bottom{margin-top:auto;font-size:11px;color:#a09ba5;padding:15px 10px}.sidebar-bottom a{display:block;margin-top:15px;border-top:1px solid #eee;padding-top:15px;color:#615b66}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#81bba0;margin-right:5px}#favorite-count{margin-left:auto;font-size:11px}main{margin-left:198px;padding:26px 38px 0;max-width:2040px}.search-banner{background:linear-gradient(105deg,#ffabbc,#ffc3c4 57%,#ffcebd);border-radius:10px;padding:16px 28px 0;min-height:190px}.banner-top{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:10px;letter-spacing:1.6px}.banner-top button{background:#ffffffd9;color:#e87b91;padding:7px 11px;border-radius:5px;font-size:11px;letter-spacing:0}.search-banner form{width:min(600px,80%);margin:8px auto 14px;display:flex;align-items:center;background:white;border-radius:7px;padding:0 14px;box-shadow:0 3px 12px #ed7f9020}.search-banner form>img{width:17px;opacity:.4}.search-banner input{border:0;outline:0!important;padding:13px 12px;min-width:0;flex:1;color:#514c56;font-size:13px}.search-banner input::placeholder{color:#b3aeb7}.format-tabs{display:flex;justify-content:center;gap:36px}.format-tabs button{display:flex;flex-direction:column;align-items:center;gap:6px;color:white;font-size:12px;padding:0 8px 16px;position:relative}.format-tabs button>span{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffffb0;border-radius:50%;background:#ffffff25}.format-tabs img{width:21px;filter:brightness(0) invert(1)}.format-tabs .active>span{background:white}.format-tabs .active img{filter:invert(46%) sepia(77%) saturate(1514%) hue-rotate(311deg) brightness(111%)}.format-tabs .active:after{content:'';position:absolute;bottom:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid white}.categories{display:flex;gap:10px;margin:18px 0 32px;overflow:auto;scrollbar-width:none}.category{flex:1;min-width:115px;border-radius:7px;padding:12px 10px;background:var(--tint);display:flex;align-items:center;justify-content:space-between;gap:5px;border:1px solid transparent;text-align:left}.category.active{border-color:#f47491}.category strong{display:block;font-size:12px;font-weight:500;white-space:nowrap}.category small{display:block;font-size:9px;color:#aaa0a3;margin-top:3px}.category img{width:35px;height:35px;object-fit:contain}.collection{margin:0 0 35px}.section-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:15px}.section-heading h2{font-size:17px;margin:0;font-weight:700}.section-heading p{font-size:11px;color:#aba6af;margin:0}.section-heading button{margin-left:auto;color:#a39ca8;font-size:11px}.row-wrap{position:relative}.template-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 90px)/7);gap:15px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 5px}.template-card{position:relative;border:1px solid #ededf0;border-radius:8px;overflow:hidden;scroll-snap-align:start;background:white;transition:box-shadow .2s,transform .2s}.template-card:hover{box-shadow:0 5px 18px #30223914;transform:translateY(-2px)}.poster-button{display:block;width:100%;padding:0;text-align:inherit}.poster{position:relative;aspect-ratio:.65;overflow:hidden;background:var(--bg);color:var(--ink);isolation:isolate}.poster .photo{position:absolute;object-fit:cover;width:100%;height:100%;inset:0}.poster.full:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#0007);z-index:1}.poster.full{color:white}.poster-head{position:absolute;z-index:2;text-align:center;width:90%;left:5%;top:8%;font:clamp(16px,1.65vw,35px) PlayfairDisplay,serif;line-height:1.16;white-space:pre-line}.poster-sub{position:absolute;z-index:2;bottom:10%;width:88%;left:6%;text-align:center;font-size:clamp(6px,.55vw,11px);letter-spacing:1.5px;line-height:1.6}.poster-date{position:absolute;bottom:5%;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:2px;z-index:2}.poster.full .poster-head{font-family:Aquarelle,serif;font-size:clamp(26px,2.1vw,45px)}.poster.arch .photo{top:29%;left:10%;width:80%;height:53%;border-radius:100px 100px 2px 2px}.poster.arch .poster-sub{bottom:9%;font-size:7px}.poster.arch .poster-head{font-family:Aquarelle,serif;font-size:clamp(23px,2.1vw,42px)}.poster.framed:before{content:'';position:absolute;inset:5%;border:1px solid currentColor;opacity:.35;z-index:2;pointer-events:none}.poster.framed .photo{top:29%;left:12%;width:76%;height:52%}.poster.framed .poster-head{font-size:clamp(19px,1.8vw,34px)}.poster.split .photo{top:33%;height:58%;width:88%;left:6%}.poster.split .poster-sub{top:26%;bottom:auto;font-size:6px}.poster.split .poster-date{bottom:3%}.poster.type .poster-head{top:13%;font-size:clamp(23px,2.4vw,43px)}.poster-art{position:absolute;width:56%;height:38%;object-fit:contain;left:22%;top:40%}.card-meta{padding:10px;display:flex;align-items:center;gap:4px;min-width:0}.card-meta span{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.card-meta small{font-size:9px;color:#aaa;margin-left:auto;white-space:nowrap}.favorite{position:absolute;top:8px;right:8px;width:27px;height:27px;border-radius:50%;background:#fffc;z-index:4;display:grid;place-items:center;opacity:0;transition:.2s}.favorite img{width:15px}.template-card:hover .favorite,.favorite.saved{opacity:1}.favorite.saved{background:#ffebf0}.favorite.saved img{filter:invert(43%) sepia(69%) saturate(2149%) hue-rotate(321deg)}.row-next{position:absolute;right:-12px;top:43%;width:29px;height:29px;display:grid;place-items:center;background:white;border-radius:50%;box-shadow:0 2px 12px #0002;color:#9c98a0;font-size:22px;z-index:5}.wide-row .template-row{grid-auto-columns:calc((100% - 60px)/5)}.wide-row .poster{aspect-ratio:1.7}.wide-row .poster-head{top:18%;left:5%;width:50%;font-size:26px;text-align:left}.wide-row .poster-art{width:40%;height:85%;left:57%;top:10%}.wide-row .poster-sub{left:5%;width:50%;bottom:14%;text-align:left;font-size:7px}.wide-row .poster-date{display:none}.all-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px}.filter-note{color:#9c96a2;font-size:12px;margin:0 0 20px}.empty{text-align:center;padding:65px 25px;background:#fcfafb;border-radius:12px}.empty h2{font-size:21px}.empty p{color:#98929e;font-size:13px;line-height:1.8}.empty a,.empty button{margin-top:12px}.home-footer{display:flex;align-items:center;gap:20px;border-top:1px solid #eee;padding:28px 0 35px;color:#aaa3ac;font-size:12px}.home-footer strong{color:#77717b}.home-footer a{margin-left:auto;color:#da5d7c}.back-top{position:fixed;bottom:28px;right:15px;width:35px;height:40px;background:white;border:1px solid #eee;box-shadow:0 2px 12px #0001;border-radius:22px;color:#938b98}dialog{border:0;border-radius:16px;padding:0;width:min(850px,94vw);max-height:92dvh;overflow:auto;box-shadow:0 30px 100px #0003}dialog[open]{display:grid;grid-template-columns:1fr 1fr}dialog::backdrop{background:#27202b80;backdrop-filter:blur(4px)}.modal-image{background:#f4f0f1;padding:30px;display:grid;place-items:center}.modal-image .poster{width:100%;max-width:300px;box-shadow:0 5px 25px #0002}.modal-image .poster-head{font-size:39px}.modal-info{padding:65px 33px 30px}.modal-info h2{font:28px PlayfairDisplay,serif;line-height:1.5}.modal-info p{font-size:14px;line-height:1.9;color:#92909a}.eyebrow{font-size:11px;letter-spacing:1px;color:#e26789}.features{display:grid;gap:12px;border-block:1px solid #eee;padding:20px 0;margin-bottom:22px;font-size:13px;color:#777}.features span:before{content:'✓';color:#d9748d;margin-right:10px}.modal-info .primary{width:100%}.modal-info>a,.save-template{display:block;text-align:center;padding:12px;width:100%;font-size:13px;color:#a36376}.modal-info small{display:block;color:#aaa;font-size:11px;line-height:1.7;margin-top:20px}.modal-close{position:absolute;right:14px;top:10px;font-size:27px;color:#999;z-index:5}#home-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#38323d;color:white;padding:12px 24px;border-radius:25px;z-index:50;font-size:13px}[hidden]{display:none!important}
.poster.split .poster-head{font-size:clamp(17px,1.45vw,28px);top:7%}.poster.full .poster-head{font-size:clamp(22px,1.8vw,36px)}.poster-sub{letter-spacing:.8px}
@media(min-width:1900px){main{margin-inline:auto;padding-left:238px}.template-row{grid-auto-columns:calc((100% - 120px)/9)}.all-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(max-width:1400px){main{padding:24px 26px 0;margin-left:180px}.sidebar{width:180px}.template-row{grid-auto-columns:calc((100% - 60px)/5)}.all-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.wide-row .template-row{grid-auto-columns:calc((100% - 45px)/4)}.poster-head{font-size:25px}.poster.full .poster-head,.poster.arch .poster-head{font-size:30px}.poster.framed .poster-head{font-size:24px}.poster.type .poster-head{font-size:29px}}
@media(max-width:900px){.sidebar{width:68px;padding:15px 6px}.sidebar nav>button,.sidebar nav>a{font-size:0;justify-content:center;padding:14px 0}.sidebar nav img{width:22px;height:22px}.sidebar nav p,.sidebar-bottom,#favorite-count{display:none}main{margin-left:68px;padding:20px}.tagline{display:none}.template-row{grid-auto-columns:calc((100% - 30px)/3)}.all-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wide-row .template-row{grid-auto-columns:calc((100% - 30px)/3)}.wide-row .poster-head{font-size:20px}.section-heading p{display:none}.format-tabs{gap:15px}}
@media(max-width:560px){.header{padding:0 14px;height:60px}.brand{font-size:15px}.brand-mark{width:29px;height:29px}.local-badge{display:none}.header-right .primary{padding:9px 12px;font-size:12px}.sidebar{top:auto;bottom:0;left:0;right:0;width:100%;height:58px;padding:4px 8px;border-top:1px solid #eee}.sidebar nav{display:flex;justify-content:space-around}.sidebar nav>button,.sidebar nav>a{padding:13px;width:50px}.sidebar nav>[data-category],.sidebar nav>[data-view=projects]{display:none}main{margin-left:0;padding:14px 14px 65px}.search-banner{min-height:182px;padding:14px 12px 0}.banner-top>span{font-size:8px}.banner-top button{font-size:9px}.search-banner form{width:100%;margin-top:15px}.search-banner input{font-size:11px}.format-tabs{gap:7px}.format-tabs button{font-size:10px;padding:0 6px 12px}.format-tabs button>span{width:30px;height:30px}.format-tabs img{width:18px}.categories{margin:13px 0 24px;gap:7px}.category{min-width:122px;padding:9px}.template-row{grid-auto-columns:calc((100% - 12px)/2);gap:12px}.all-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wide-row .template-row{grid-auto-columns:75%}.section-heading h2{font-size:16px}.collection{margin-bottom:26px}.home-footer{flex-wrap:wrap;gap:10px}.home-footer span{font-size:10px}.home-footer a{margin-left:0}.favorite{opacity:1}.back-top{bottom:75px;right:9px}dialog[open]{grid-template-columns:1fr}.modal-image{padding:20px}.modal-image .poster{max-width:190px}.modal-image .poster-head{font-size:27px}.modal-info{padding:20px}.modal-info h2{margin:8px 0}.features{display:none}.modal-info small{margin-top:10px}}
/* Interface typography and motion */
html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;color:#303238}button,input,a{font-family:inherit}.brand{font-size:18px;letter-spacing:-.6px}.brand strong{font-weight:600}.tagline{font-size:12px;color:#80838b}.header{box-shadow:none}.local-badge{background:#f5f5f7;color:#777b85;font-weight:400}.sidebar nav>button,.sidebar nav>a{font-size:13px;font-weight:400;transition:background .18s,color .18s}.sidebar nav .active{font-weight:500}.sidebar nav p{font-size:10px;letter-spacing:.55px;color:#9498a0}.search-banner{background:linear-gradient(110deg,#f9b6c5,#fbc9c7 65%,#fbd4c4)}.banner-top>span{color:#965866;font-size:11px;letter-spacing:.8px;font-weight:500}.search-banner form{box-shadow:0 2px 8px #a9556510;border:1px solid #ffffffb0}.search-banner input{font-size:14px}.format-tabs button{color:#9b5262;font-weight:500}.format-tabs button>span{background:#fff9;border:1px solid #fff}.format-tabs img{filter:none;opacity:.55}.category{min-width:125px;padding:12px;transition:border-color .18s,background .18s}.category img{width:25px;height:25px;opacity:.6;margin-left:8px}.category strong{font-size:12px;font-weight:500}.category small{font-size:10px;color:#85858d;line-height:1.4}.section-heading h2{font-size:17px;font-weight:600;letter-spacing:-.35px}.section-heading p{color:#93959c;font-size:12px}.section-heading button{font-size:12px;color:#777c87}.card-meta{padding:11px 10px;min-height:43px}.card-meta span{font-size:12px;font-weight:400}.card-meta small{font-size:10px;color:#858995}.poster-art{width:26%;height:26%;left:37%;top:48%;opacity:.48}.wide-row .poster-art{width:21%;height:45%;left:68%;top:28%}.template-card{transition:box-shadow .22s ease,border-color .22s ease;will-change:auto}.template-card:hover{transform:none;border-color:#e8c5cf;box-shadow:0 5px 18px #3022390d}.poster .photo{transition:transform .45s ease}.poster-button:hover .photo{transform:scale(1.025)}.poster-head{letter-spacing:0}.modal-info h2{font-family:Inter,Arial,sans-serif;font-size:25px;font-weight:600;letter-spacing:-.7px}.modal-info p{color:#7a7f88}.primary{transition:background .18s,box-shadow .18s;font-weight:500}.primary:hover{box-shadow:0 3px 10px #dd3c6025}.row-next{transition:box-shadow .2s,transform .2s}.row-next:hover{transform:translateX(2px);box-shadow:0 3px 14px #0002}.home-footer{font-size:12px}.home-footer strong{font-weight:500}@media(max-width:900px){.sidebar nav>button,.sidebar nav>a{font-size:0}}@media(max-width:560px){.brand{font-size:15px}.search-banner input{font-size:13px}.section-heading h2{font-size:16px}.category{min-width:135px}.modal-info h2{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.poster{container-type:inline-size}.poster .poster-head{font-size:14cqw;line-height:1.18}.poster.full .poster-head,.poster.arch .poster-head{font-size:18cqw}.poster.split .poster-head{font-size:11cqw}.poster.type .poster-head{font-size:15cqw}.poster .poster-sub{font-size:3.2cqw;letter-spacing:.7px}.poster .poster-date{font-size:3cqw;letter-spacing:1px}.wide-row .poster .poster-head{font-size:10cqw;top:16%;width:58%}.wide-row .poster .poster-sub{font-size:2.8cqw;bottom:12%;width:60%}.wide-row .poster-art{width:20%;height:40%;left:74%;top:26%}.poster.split .poster-sub{top:27%;font-size:2.7cqw}.modal-image .poster .poster-head{font-size:14cqw}.modal-image .poster.arch .poster-head,.modal-image .poster.full .poster-head{font-size:18cqw}

/* Original illustrated library assets */
.search-banner{background:#ffb5c1 url('assets/hunbei/banner.png') center/cover no-repeat;border-radius:7px;min-height:190px}.format-tabs button{color:white}.format-tabs button>span{background:white;border:2px solid white}.format-tabs img,.format-tabs .active img{filter:none;opacity:1;width:31px;height:31px}.format-tabs .active>span{background:#ff6378;box-shadow:0 0 0 2px #fff}.category{min-width:154px;padding:10px 12px;border-radius:6px}.category img{width:49px;height:49px;opacity:1;margin-left:3px}.category strong{font-weight:500;color:#444}.category small{font-size:10px}.categories{gap:12px;margin-top:15px}.poster-art{opacity:1;width:52%;height:40%;left:24%;top:40%}.wide-row .poster-art{opacity:1;width:38%;height:76%;left:59%;top:14%}.reference-cover{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;transition:transform .3s}.reference-wide .reference-cover{aspect-ratio:16/9}.reference-large{display:block;max-width:100%;max-height:75vh;object-fit:contain}.template-card{border-radius:6px}.reference-collection .card-meta{min-height:34px;padding:8px}.reference-collection .card-meta span{font-size:11px;color:#777}.section-heading h2{font-weight:650;color:#333}.banner-top>span{color:#a15c6b}.reference-collection{margin-bottom:32px}@media(min-width:1900px){main{max-width:2600px;padding-right:55px;padding-left:265px}.template-row{grid-auto-columns:calc((100% - 128px)/9);gap:16px}}@media(max-width:560px){.category{min-width:150px}.category img{width:40px;height:40px}.format-tabs img{width:25px;height:25px}}

.live-modal[open]{width:min(880px,95vw);height:min(920px,94dvh);grid-template-columns:1fr 1fr;overflow:hidden;border-radius:16px}.live-modal .modal-image{padding:26px 35px;background:#fff;border-right:1px solid #eee;min-height:0}.live-template{border:0;width:100%;height:100%;border-radius:12px;box-shadow:0 3px 14px #0002;background:#fff8f1}.live-modal .modal-info{padding:40px 32px;display:flex;flex-direction:column;overflow:auto}.live-modal .modal-info h2{margin:14px 0}.live-modal .features{margin-top:auto}.live-modal #full-preview{background:#f1f4f8;border-radius:9px;margin-top:9px;color:#42536b}.live-modal .primary{background:linear-gradient(110deg,#ec4054,#e71648);border-radius:10px}.live-modal .modal-close{background:#fff9;border-radius:50%;width:32px;height:32px;line-height:25px}.live-modal .modal-info p{font-size:15px;color:#50505a;line-height:1.8}@media(max-width:560px){.live-modal[open]{height:94dvh;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.live-modal .modal-image{padding:15px 45px}.live-modal .modal-info{padding:14px 20px}.live-modal .modal-info h2{font-size:19px;margin:0 0 8px}.live-modal .eyebrow,.live-modal .modal-info p,.live-modal .features,.live-modal .modal-info small,.live-modal .save-template{display:none}.live-modal #full-preview{padding:8px}.live-modal .modal-close{z-index:10}}
/* Larger, neutral interface typography */
body{color:#202124;font-size:16px}.sidebar nav>button,.sidebar nav>a{font-size:15px;line-height:1.45;color:#202124}.sidebar nav .active{background:#f1f2f3;color:#171819;font-weight:600}.sidebar nav p{font-size:11px;color:#64676c}.sidebar nav img{opacity:.9}.sidebar-bottom,.sidebar-bottom a{font-size:12px;color:#555}.brand{font-size:20px}.tagline{font-size:14px;color:#555}.category strong{font-size:14px;color:#202124}.category small{font-size:12px;color:#555}.category{min-width:175px}.section-heading h2{font-size:21px;color:#191919}.section-heading p,.section-heading button{font-size:14px;color:#555}.card-meta span,.reference-collection .card-meta span{font-size:14px;color:#292929}.card-meta small{font-size:12px;color:#555}.card-meta,.reference-collection .card-meta{min-height:42px}.banner-top>span,.banner-top button{color:#292929;font-size:13px}.format-tabs button{font-size:14px;color:#292929}.search-banner input{font-size:16px}.eyebrow{color:#333;font-size:14px;letter-spacing:.3px}.modal-info h2{font-size:29px;color:#171717}.modal-info p,.live-modal .modal-info p{font-size:17px;color:#333;line-height:1.8}.features{font-size:15px;color:#333}.features span:before{color:#333}.modal-info>a,.save-template{font-size:15px;color:#252525}.modal-info small{font-size:13px;color:#626262}.primary,.live-modal .primary{background:#252525;color:#fff;font-size:15px}.primary:hover,.live-modal .primary:hover{background:#090909;box-shadow:0 3px 10px #0002}.live-modal #full-preview{color:#252525;background:#f2f2f2}.home-footer,.home-footer a{color:#444;font-size:14px}.category.active{border-color:#555}.favorite.saved{background:#e8e8e8}.favorite.saved img{filter:none}.sidebar nav button:hover,.sidebar nav a:hover{background:#f3f3f3}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#555}@media(max-width:900px){.sidebar nav>button,.sidebar nav>a{font-size:0}}@media(max-width:560px){.brand{font-size:17px}.category{min-width:166px}.section-heading h2{font-size:18px}.format-tabs button{font-size:11px}.search-banner input{font-size:14px}.live-modal .modal-info h2{font-size:22px}.card-meta span,.reference-collection .card-meta span{font-size:13px}}
/* Balanced preview and navigation */
.sidebar{width:220px;padding:20px 14px}.sidebar nav>button,.sidebar nav>a{padding:12px 13px;gap:12px;line-height:1.4}.sidebar nav img{flex:0 0 19px;width:19px;height:19px}.sidebar nav p{padding-top:25px;letter-spacing:.55px}.sidebar nav .active{border-radius:9px}.sidebar-bottom{padding:16px 13px}main{margin-left:220px}.live-modal .modal-info{position:relative;padding:32px;gap:0}.live-modal .eyebrow{padding-right:110px;font-size:13px}.live-modal .modal-info h2{font-size:27px;margin:18px 0 14px}.live-modal .modal-info p{font-size:16px;line-height:1.7;margin:0 0 18px}.live-modal .features{margin-top:auto;padding:14px 0;margin-bottom:14px;gap:8px;font-size:14px}.live-modal .modal-info>small{display:none}.live-modal .modal-close{right:10px;top:8px;font-size:23px}#template-stats{display:flex;gap:7px;align-self:flex-end;margin:3px 0 4px;font-size:12px}#template-stats button,.view-count{display:inline-flex;gap:5px;align-items:center;padding:5px 9px;border-radius:20px;background:#f0f1f3;color:#333;font-weight:600}#template-stats button[aria-pressed=true]{background:#292929;color:white}#template-stats svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}#template-sharing{margin-top:20px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:6px}#template-sharing .qr-link{display:block;width:132px;height:132px;border:1px solid #e5e5e5;border-radius:12px;padding:4px;background:white}#template-sharing svg{display:block;width:100%;height:100%}#template-sharing strong{font-size:13px;font-weight:500;color:#333}#template-sharing small{display:block!important;margin:0;font-size:11px;color:#666}#copy-template-link{font-size:12px;color:#444;text-decoration:underline;padding:4px}.live-modal .save-template{padding:8px;font-size:13px}@media(min-width:1900px){main{margin-inline:auto}}@media(max-width:900px){.sidebar{width:68px;padding:15px 6px}main{margin-left:68px}.sidebar nav>button,.sidebar nav>a{padding:14px 0;gap:0}}@media(max-width:560px){.sidebar{width:100%;padding:4px 8px}main{margin-left:0}.live-modal .modal-info{padding:12px 20px}.live-modal .modal-info h2{font-size:21px;margin:0 0 8px}#template-sharing{display:none}#template-stats{position:absolute;right:20px;top:8px}.live-modal .modal-info h2{padding-right:105px}.live-modal .modal-info .eyebrow{display:none}}
/* Compact card captions and save affordance */
.template-card .favorite{display:grid;opacity:1;top:10px;right:10px;width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.9);border:1px solid #e7e7e7;box-shadow:0 1px 5px #0000000a;transition:background .15s,transform .15s}.favorite svg{width:20px;height:20px;fill:none;stroke:#252525;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.favorite:hover{background:white;transform:translateY(-1px)}.favorite.saved svg{fill:#252525}.favorite.saved{background:#fff}.template-card .card-meta,.reference-collection .card-meta{display:flex;align-items:center;gap:6px;min-height:38px;padding:9px 10px;border-top:1px solid #f0f0f0;background:#fff}.template-card .card-meta span,.reference-collection .card-meta span{font-size:12px;font-weight:400;line-height:1.4;color:#616161;flex:1;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.template-card .card-meta small{font-size:10px;color:#888;flex-shrink:0}.template-card{border-radius:6px;border-color:#e9e9e9}.poster.split .photo{object-position:center 25%}@media(max-width:560px){.template-card .card-meta small{display:none}.template-card .favorite{width:30px;height:30px;right:7px;top:7px}}
.template-card .card-meta small{display:none}.template-card .card-meta span,.reference-collection .card-meta span{font-size:12px}.favorite svg,.favorite svg *{pointer-events:none}
/* Reveal save heart on hover; saved state remains visible */
.template-card .favorite{opacity:0;pointer-events:none;transform:none}.template-card:hover .favorite,.template-card:focus-within .favorite,.template-card .favorite.saved{opacity:1;pointer-events:auto}.template-card .favorite.saved{background:#fff0f5;border-color:#ffd1df}.favorite.saved svg{fill:#f34b7c;stroke:#f34b7c}.template-card .favorite:hover svg{stroke:#f34b7c}.template-card .card-meta span,.reference-collection .card-meta span{font-size:11px;letter-spacing:-.1px;color:#777}.card-meta i{font-style:normal;color:#b4b4b4;margin:0 3px}@media(hover:none){.template-card .favorite{opacity:1;pointer-events:auto}}
/* Shared interface type and card system */
:root{--ui-ink:#25272b;--ui-secondary:#60646c;--ui-border:#e4e5e8;--ui-radius:8px;--ui-gap:16px}
body{font-family:Inter,Arial,sans-serif;font-size:15px;font-weight:500;color:var(--ui-ink);line-height:1.5}button,input,a{font-family:inherit}.header{border-color:var(--ui-border)}.brand{font-size:20px;font-weight:600;letter-spacing:-.4px}.tagline,.local-badge{font-size:13px;font-weight:500;color:var(--ui-secondary)}.sidebar nav>button,.sidebar nav>a{font-size:15px;font-weight:500;line-height:1.45;color:var(--ui-ink)}.sidebar nav .active{font-weight:600}.sidebar nav p{font-size:11px;font-weight:600;color:var(--ui-secondary)}.sidebar-bottom,.sidebar-bottom a{font-weight:500}.section-heading{gap:12px;margin-bottom:16px}.section-heading h2{font-size:21px;line-height:1.4;font-weight:700;letter-spacing:-.35px;color:var(--ui-ink)}.section-heading p,.section-heading button{font-size:13px;font-weight:500;line-height:1.5;color:var(--ui-secondary)}.category strong{font-size:14px;line-height:1.4;font-weight:600}.category small{font-size:12px;font-weight:500;line-height:1.45;color:var(--ui-secondary)}.category{border-radius:var(--ui-radius);min-height:74px}.search-banner input{font-size:15px;font-weight:500}.format-tabs button{font-size:13px;font-weight:600}.template-card{border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:#fff;box-shadow:0 1px 2px #18202b04}.template-card:hover{border-color:#c9ccd2;box-shadow:0 5px 16px #18202b0b}.template-row{gap:16px}.template-card .card-meta,.reference-collection .card-meta{height:44px;min-height:44px;padding:10px 12px;display:flex;align-items:center;border-top:1px solid #eceef0}.template-card .card-meta span,.reference-collection .card-meta span{font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0;color:#595e66;font-variant-numeric:tabular-nums}.card-meta i{color:#b1b5bb;margin:0 5px}.collection{margin-bottom:36px}.favorite svg{stroke-width:1.7}.modal-info h2,.live-modal .modal-info h2{font-size:27px;font-weight:700;letter-spacing:-.45px}.modal-info p,.live-modal .modal-info p{font-size:16px;font-weight:500;color:#4c5057}.eyebrow,.features,.save-template,.modal-info>a{font-weight:500}.primary,.live-modal .primary{font-weight:600}.modal-info small{font-weight:500}#template-sharing strong{font-weight:600}.home-footer{font-weight:500}@media(max-width:1400px){.template-row{grid-auto-columns:calc((100% - 64px)/5)}.wide-row .template-row{grid-auto-columns:calc((100% - 48px)/4)}}@media(min-width:1401px) and (max-width:1899px){.template-row{grid-auto-columns:calc((100% - 96px)/7)}}@media(max-width:900px){.sidebar nav>button,.sidebar nav>a{font-size:0}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 32px)/3)}}@media(max-width:560px){.brand{font-size:17px}.template-row{gap:12px;grid-auto-columns:calc((100% - 12px)/2)}.wide-row .template-row{grid-auto-columns:75%}.section-heading h2{font-size:18px}.template-card .card-meta,.reference-collection .card-meta{padding:9px 8px;height:40px;min-height:40px}.template-card .card-meta span,.reference-collection .card-meta span{font-size:11px}.card-meta i{margin:0 2px}.format-tabs button{font-size:11px}.live-modal .modal-info h2{font-size:21px}}
@media(min-width:901px){.template-row{grid-auto-columns:max(190px,calc((100% - 128px)/9))}.wide-row .template-row{grid-auto-columns:max(190px,calc((100% - 128px)/9))}}.template-card .card-meta span,.reference-collection .card-meta span{white-space:normal;text-overflow:clip}.card-meta i{margin-inline:3px}

.template-card .reference-cover{height:auto;aspect-ratio:2/3;object-fit:cover}.reference-wide .reference-cover{aspect-ratio:16/9}

/* Shared outlined-heart treatment for catalog cards and preview. */
.template-card .favorite{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:44px;height:32px;padding:6px 9px;border:1px solid #e4e6eb;border-radius:999px;background:#f0f1f3;color:#333;box-shadow:0 2px 5px #00000008;font:600 12px/1 Inter,Arial,sans-serif}
.template-card .favorite svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.template-card .favorite.saved{background:#292929;border-color:#292929;color:white}
.template-card .favorite.saved svg,.template-card .favorite:hover svg{fill:none;stroke:currentColor}
.template-card .favorite:hover{box-shadow:0 2px 8px #0002}
.template-card .card-meta>span{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.template-card .card-meta .card-like-count{display:inline-flex;align-items:center;gap:5px;font:inherit;white-space:nowrap}
.card-like-count svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
.card-like-count.is-liked{color:#292929}.card-like-count.is-liked svg{stroke-width:2}

.template-card .card-meta{height:auto;min-height:44px}.template-card .card-meta>span{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;row-gap:4px}.template-card .card-meta .card-like-count{font-size:12px;overflow:visible;text-overflow:clip}.template-card .card-meta i{margin:0 2px}

/* Unified catalog surface: shared dimensions, stronger contrast, natural cover colors. */
body{background:#f4f5f7;color:#24272d}.header{background:#fff;border-bottom:1px solid #dfe2e8}.sidebar{border-right:1px solid #dfe2e8}.sidebar nav .active{background:#ffe4eb;color:#c92d54}.sidebar nav img{opacity:.9}
main{max-width:none;margin-left:198px;margin-right:0;padding:26px 30px 0}.search-banner{background-color:#f88fa6;background-image:linear-gradient(110deg,#ee547933,#fa8d6130),url('assets/hunbei/banner.png');border:1px solid #f291a9}.banner-top>span,.format-tabs button{color:#682b3d}.banner-top>span{font-weight:700}.category{border:1px solid #e2e4ea;box-shadow:0 1px 2px #18203305}.category strong{font-weight:650;color:#292d36}.category small{color:#626975}
.section-heading h2{font-size:20px;font-weight:700;color:#24272d}.section-heading p,.section-heading button{color:#616977}.section-heading{margin-bottom:16px}.collection{margin-bottom:38px}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 120px)/7);gap:20px;padding:2px 0 8px;align-items:stretch}.all-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px}.template-card{display:flex;flex-direction:column;border:1px solid #dcdfe6;border-radius:9px;background:white;box-shadow:0 2px 5px #1b263508}.template-card:hover{border-color:#e887a0;box-shadow:0 6px 18px #1b26351a}.poster-button{flex:none;overflow:hidden}.template-card .reference-cover{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:top;filter:none;opacity:1}.template-card .card-meta{height:48px;min-height:48px;padding:10px 9px;border-top:1px solid #eceef2;background:white}.template-card .card-meta>span{font-size:12px;line-height:1.4;color:#505968;flex-wrap:nowrap;white-space:nowrap}.template-card .card-meta .card-like-count{font-size:11px;gap:3px}.card-meta i{color:#abb2bd}.row-next{color:#424a58;border:1px solid #dfe3e9;width:32px;height:32px}.favorite{opacity:1}
@media(min-width:1900px){main{margin-left:198px;padding:28px 36px 0}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 160px)/9)}.all-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(max-width:1400px){main{margin-left:180px;padding:24px}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 60px)/4)}.all-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 40px)/3)}.all-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){main{margin-left:68px;padding:20px}.section-heading h2{font-size:18px}}
@media(max-width:560px){main{margin-left:0;padding:14px 14px 70px}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 12px)/2);gap:12px}.all-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-card .card-meta{height:56px;min-height:56px;padding:7px}.template-card .card-meta>span{flex-wrap:wrap;white-space:normal;font-size:11px;gap:2px}.template-card .card-meta .card-like-count{font-size:10px}.section-heading h2{font-size:17px}}

@media(min-width:1401px){.sidebar{width:198px}}@media(min-width:901px) and (max-width:1400px){.sidebar{width:180px}}@media(min-width:561px) and (max-width:900px){.sidebar{width:68px}}

@media(min-width:1401px) and (max-width:1699px){.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 80px)/5)}.all-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(min-width:1700px) and (max-width:1899px){.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 100px)/6)}.all-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:1900px){.template-row,.wide-row .template-row{grid-auto-columns:max(195px,calc((100% - 140px)/8))}.all-grid{grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}}

/* Compact, centered recommendation layout matching the reference density. */
@media(min-width:1900px){main{width:calc(100% - 260px);max-width:2480px;margin-left:auto;margin-right:auto;padding:14px 0 0;transform:translateX(70px)}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 192px)/9);gap:24px}.all-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:24px}}
@media(min-width:1401px) and (max-width:1899px){main{width:calc(100% - 290px);max-width:1480px;margin-left:240px;margin-right:50px;padding:20px 0 0}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 96px)/7);gap:16px}.all-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}}
@media(min-width:901px) and (max-width:1400px){.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 64px)/5);gap:16px}.all-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}}
@media(min-width:901px){.template-card .card-meta{height:38px;min-height:38px;padding:7px}.template-card .card-meta>span{font-size:11px;gap:2px;white-space:nowrap}.template-card .card-meta .card-like-count{font-size:10px;gap:3px}.card-like-count svg{width:11px;height:11px}.template-card{border-radius:6px}.collection{margin-bottom:34px}}

/* Keep Vietnamese navigation labels intact at desktop widths. */
@media(min-width:901px){.sidebar{width:248px;padding:18px 12px}.sidebar nav>button,.sidebar nav>a{font-size:14px;line-height:20px;white-space:nowrap;gap:10px;padding:12px 10px}.sidebar nav img{width:18px;height:18px;flex:0 0 18px}.sidebar nav p{white-space:nowrap;padding-left:10px;font-size:10px}.sidebar #favorite-count{flex:0 0 auto;margin-left:auto;padding-left:6px}.sidebar-bottom{padding-left:10px;padding-right:10px}}
@media(min-width:901px) and (max-width:1400px){main{margin-left:248px;padding:24px}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 48px)/4)}.all-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1401px) and (max-width:1899px){main{width:calc(100% - 310px);margin-left:278px;margin-right:32px}.template-row,.wide-row .template-row{grid-auto-columns:calc((100% - 80px)/6)}.all-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1900px){main{width:calc(100% - 560px);max-width:2480px;transform:translateX(90px)}}

/* Original category artwork, balanced with Vietnamese labels. */
.categories{gap:12px;align-items:stretch;padding:2px 0 4px}.category{flex:1 0 180px;max-width:240px;height:70px;min-width:180px;padding:10px 12px;border-radius:8px;gap:10px;box-shadow:none;border:1px solid transparent}.category>span{min-width:0;flex:1}.category strong{font-size:13px;line-height:1.4;font-weight:600;white-space:nowrap;color:#3b3d45}.category small{font-size:11px;line-height:1.4;color:#85818a;white-space:nowrap;margin-top:2px}.category img{width:50px;height:50px;flex:0 0 50px;object-fit:contain;margin:0;opacity:1}.category:hover,.category.active{border-color:#ef91aa}.category:focus-visible{outline-offset:-3px}
@media(max-width:560px){.category{flex:0 0 180px;height:66px}.category img{width:46px;height:46px;flex-basis:46px}.category strong{font-size:12px}.category small{font-size:10px}}

.category{min-width:210px;flex-basis:210px;min-height:70px}@media(max-width:560px){.category{min-width:200px;flex-basis:200px;min-height:66px}}

/* Quiet navigation and softly rounded catalog surfaces. */
.sidebar{border-right:0;background:#fff;box-shadow:none}.sidebar-bottom{display:none}.sidebar nav{gap:4px}.sidebar nav>button,.sidebar nav>a{border:0;box-shadow:none;border-radius:8px;color:#454951;font-weight:500;letter-spacing:0}.sidebar nav .active{background:#f1f2f4;color:#252930;font-weight:600}.sidebar nav button:hover,.sidebar nav a:hover{background:#f5f5f7}.sidebar nav p{color:#8b8f97;font-weight:500}.sidebar nav img{opacity:.78}.category{border:0;border-radius:9px}.category:hover{border:0;box-shadow:inset 0 0 0 1px #edb6c5}.category.active{border:0;box-shadow:inset 0 0 0 1px #ed91ac}.template-card{border:1px solid #e9e9ed;border-radius:8px;box-shadow:none}.template-card:hover{border-color:#dfc6ce;box-shadow:0 3px 12px #20233009}.template-card .card-meta{border-top:1px solid #f1f1f4}.row-next{box-shadow:0 2px 8px #0000000d;border:1px solid #f0f0f3}