@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --text:#56506c;--muted:#968fa8;--dark:#4b4461;--pink:#f7a6bd;--pink-strong:#e98dac;
  --blue:#a7cfee;--mint:#b5e4d4;--yellow:#f8dda2;--lilac:#c6bbef;
  --line:#f1ebf1;--shadow:0 13px 45px rgba(133,102,137,.095);--radius:23px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fffcfd;color:var(--text);font-family:'Inter','Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a1cef6;outline-offset:3px}::selection{background:#ffdbe8;color:#5c5367}
.layout{display:flex;min-height:100vh}.sidebar{width:263px;flex:0 0 263px;background:linear-gradient(168deg,#fff9fa,#fff 46%,#f9f8ff);border-right:1px solid #f3edf1;padding:31px 17px 24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;min-height:650px;z-index:4}.brand{display:flex;align-items:center;gap:11px;padding:1px 7px;white-space:nowrap}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#ffd8e3,#f7a7c0);box-shadow:0 7px 16px #efacc048;color:white;font-size:31px;border:2px solid #fff}.brand-copy{display:flex;flex-direction:column;gap:2px}.brand-copy strong{font:800 17px 'Inter','Segoe UI',Arial,sans-serif;color:#625670;letter-spacing:-.55px}.brand-copy small{font-size:8px;letter-spacing:1.8px;color:#c0a6b7;font-weight:900}.side-illustration{height:170px;margin:37px 9px 27px;border-radius:23px;background:radial-gradient(ellipse at 25% 15%,#fff8fd,transparent 50%),linear-gradient(145deg,#fff0f4,#f6edff);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;border:1px solid #f8e7f1}.side-illustration img{width:133px;height:126px;object-fit:contain;filter:drop-shadow(0 11px 12px #d89ab03a);margin-top:-9px}.side-illustration>span:last-child{font:800 10px 'Inter','Segoe UI',Arial,sans-serif;letter-spacing:1.6px;color:#ab93ac;margin-top:-9px}.side-orbit{position:absolute;color:#ecb5c9;font-size:24px;top:12px;left:20px}.side-orbit.two{left:auto;right:19px;top:45px;font-size:17px;color:#ada2dc}.side-label{font-weight:900;font-size:10px;letter-spacing:2.05px;color:#bfb5c2;padding:0 19px;margin:0 0 10px}.side-label-second{margin-top:28px}.side-nav{display:grid;gap:6px}.nav-link{height:48px;border-radius:13px;display:flex;align-items:center;gap:12px;padding:5px 11px;color:#827b90;font-weight:800;font-size:12px;position:relative;transition:background .2s,transform .2s}.nav-link:hover{background:#fff2f6;transform:translateX(2px)}.nav-link.active{background:#fff0f5;color:#e080a4;box-shadow:inset 3px 0 #ec9eb9}.nav-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;font-size:22px;color:#cc8dab}.nav-icon-rose{background:#ffe2ea}.nav-icon-peach{background:#ffe9d9;color:#dda48d}.nav-icon-blue{background:#e4f3ff;color:#86b9d8}.nav-icon-lilac{background:#eeebff;color:#a99bdf}.nav-icon-yellow{background:#fff5d9;color:#d9af64}.nav-arrow{margin-left:auto;font-size:20px;opacity:.6}.side-bottom{margin-top:auto}.side-note{padding:18px 18px 15px;background:#fff8ed;border:1px solid #fff0d8;border-radius:17px;margin:12px 4px 22px;position:relative}.side-note p{font-size:11px;line-height:1.72;margin:7px 0 0;color:#9d8a90;font-weight:700}.side-note-stars{color:#deb17b;letter-spacing:5px}.side-credit{text-align:center;color:#c4b8c4;font-weight:800;font-size:9px;letter-spacing:1.4px}.side-credit span{color:#ed9eb4}
.main-wrap{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:81px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(26px,4vw,68px);border-bottom:1px solid #f5edf0;background:rgba(255,255,255,.92);position:sticky;top:0;z-index:3;backdrop-filter:blur(18px);gap:12px}.top-left{display:flex;align-items:center;gap:11px;color:#aca3b4;font-size:12px;font-weight:800;white-space:nowrap}.crumb-flower{font-size:18px;color:#e7a4b9}.crumb-sep{margin:0 8px;color:#d6ccd5}.top-actions{display:flex;align-items:center;gap:16px}.search-box{width:clamp(230px,27vw,374px);height:41px;background:#fbf9fc;border:1px solid #f0ebf0;border-radius:13px;display:flex;align-items:center;gap:9px;padding:0 13px;color:#aea7b7;transition:border .2s,box-shadow .2s}.search-box:focus-within{border-color:#f3bfce;box-shadow:0 0 0 3px #ffeaf1}.search-box svg{width:16px;height:16px;flex:0 0 16px}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:11px;font-weight:700;color:#655b70}.search-box input::placeholder{color:#bbb5c3}.search-hint{font-size:17px;font-family:inherit;color:#c1b5c5}.avatar{border:3px solid white;box-shadow:0 0 0 1px #f3d8e3;width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#f8d0e2,#dfd9fc);font-size:24px;color:#fff}.main-content{width:100%;max-width:1620px;padding:29px clamp(26px,4vw,68px) 57px;margin:0 auto;flex:1}.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 clamp(26px,4vw,68px);padding:17px 0 28px;border-top:1px solid #f3edf0;color:#c1b6c1;font-size:10px;font-weight:800}.footer span:first-child{color:#dba6bc}
.eyebrow{font:900 10px 'Inter','Segoe UI',Arial,sans-serif;letter-spacing:2.45px;text-transform:uppercase}.hero{min-height:315px;border-radius:28px;background:radial-gradient(ellipse at 7% 2%,#ffeef6 0%,transparent 37%),radial-gradient(ellipse at 76% 0%,#fff6fd 0%,transparent 43%),linear-gradient(114deg,#ffdae6 0%,#f7dfef 50%,#e0e5fc 100%);position:relative;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;display:flex;align-items:center;padding:35px clamp(28px,4.6vw,65px);isolation:isolate}.hero:before{content:'';position:absolute;width:650px;height:650px;border-radius:50%;border:1px solid #ffffff99;right:-175px;top:-160px;box-shadow:0 0 0 29px #ffffff1b,0 0 0 61px #ffffff20,0 0 0 93px #ffffff15}.hero:after{content:'✦';position:absolute;top:30px;left:51%;font-size:31px;color:#fff8ff;filter:drop-shadow(0 1px 5px #eaa0b2)}.hero-body{z-index:1;max-width:530px;width:58%;position:relative}.hero-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid #ffffffd8;background:#ffffff77;padding:7px 14px;color:#cf88a4;border-radius:99px;font-size:9px;font-weight:900;letter-spacing:2px}.hero h1{font:800 clamp(31px,3.3vw,48px)/1.27 'Inter','Segoe UI',Arial,sans-serif;color:#765f7c;margin:15px 0 9px;letter-spacing:-1.55px}.hero h1 em{font-style:normal;color:#d683a2}.hero p{font-weight:700;font-size:12px;line-height:1.85;color:#907d91;max-width:420px;margin:0}.hero-buttons{display:flex;gap:10px;margin-top:23px;flex-wrap:wrap}.btn-primary,.btn-secondary{border-radius:12px;height:42px;min-width:139px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:900;transition:transform .2s,box-shadow .2s;border:0}.btn-primary{background:#ee9dba;color:white;box-shadow:0 6px 15px #e5a3b38f}.btn-secondary{background:#fff9fdcc;color:#c18ca4;border:1px solid #fff}.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}.hero-art{position:absolute;width:43%;height:117%;right:20px;bottom:-40px;z-index:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.hero-art img{height:100%;max-height:400px;max-width:100%;object-fit:contain;filter:drop-shadow(0 25px 20px #bd91c044)}.hero-sparkle{position:absolute;font-size:25px;color:#fff9ff;z-index:1}.hero-sparkle.a{right:43%;bottom:34px}.hero-sparkle.b{right:7%;top:35px;font-size:39px}.hero-sparkle.c{right:34%;top:40px;font-size:18px}
.section{margin-top:31px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-title{display:flex;align-items:center;gap:10px}.section-icon{width:35px;height:35px;border-radius:12px;background:#ffe5ee;color:#d897ae;display:grid;place-items:center;font-size:21px}.section-icon.blue{background:#e4f2fd;color:#82b1d0}.section-icon.green{background:#e2f8ef;color:#80c1a4}.section-icon.yellow{background:#fff1d7;color:#dfb76e}.section-icon.purple{background:#ede7ff;color:#a999d5}.section-title h2{font:800 17px 'Inter','Segoe UI',Arial,sans-serif;color:#6c6079;margin:0;letter-spacing:-.4px}.section-title p{margin:3px 0 0;color:#afa5b5;font-weight:800;font-size:10px}.section-more{border:0;background:transparent;color:#df91ae;font-size:11px;font-weight:900;white-space:nowrap;padding:10px 0 10px 10px}.section-more:hover{text-decoration:underline}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.feature{border-radius:19px;padding:22px 19px;min-height:132px;position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;border:1px solid #ffffffdd;box-shadow:0 8px 20px #cbb8c31b;text-align:left;width:100%;transition:transform .2s,box-shadow .2s}.feature:hover{transform:translateY(-4px);box-shadow:0 12px 30px #c4a1b62c}.feature.pink{background:linear-gradient(135deg,#fff0f4,#ffe6ed)}.feature.blue{background:linear-gradient(135deg,#eef8ff,#e4f3fd)}.feature.mint{background:linear-gradient(135deg,#edfcf6,#dff6ed)}.feature:after{content:'';position:absolute;width:147px;height:147px;border-radius:50%;right:-68px;top:-67px;border:1px solid #fff9;box-shadow:0 0 0 16px #fff4,0 0 0 32px #fff3}.feature-emoji{flex:0 0 74px;width:74px;height:74px;border-radius:23px;background:#ffffff99;display:grid;place-items:center;font-size:46px;color:#df9db5;position:relative;z-index:1;box-shadow:inset 0 0 0 1px #fff}.feature.blue .feature-emoji{color:#91bad9}.feature.mint .feature-emoji{color:#90c7af}.feature-body{z-index:1;min-width:0}.feature-body small{font-size:9px;letter-spacing:1.3px;color:#b9a7b7;font-weight:900}.feature-body strong{display:block;font:800 17px 'Inter','Segoe UI',Arial,sans-serif;color:#75657f;margin:4px 0 6px}.feature-body span{display:block;font-size:10px;line-height:1.6;color:#9e91a6;font-weight:700}.feature-arrow{position:absolute;right:19px;bottom:14px;font-size:23px;color:#c8a1bc}
.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:space-between;margin-bottom:15px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{border:1px solid #f0e8ed;background:#fff;color:#a79eac;border-radius:99px;padding:8px 16px;min-height:35px;font-size:10px;font-weight:900;transition:background .2s,color .2s}.tab:hover{border-color:#eac6d3}.tab.active{background:#f7b4ca;border-color:#f7b4ca;color:white;box-shadow:0 5px 12px #f2cad7}.toolbar-count{font-size:10px;color:#afa6b5;font-weight:800}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.item-card{min-width:0;background:#fff;border:1px solid #f5eef1;border-radius:20px;box-shadow:0 8px 25px rgba(122,98,128,.058);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.item-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #bda3b02b}.item-cover{height:148px;position:relative;overflow:hidden;background:linear-gradient(140deg,#ffe0e9,#f3e4fe)}.item-cover.pink{background:radial-gradient(circle at 20% 20%,#fff5f9,transparent 55%),linear-gradient(120deg,#ffe1ec,#f4d6e6)}.item-cover.blue{background:radial-gradient(circle at 20% 15%,#fff,transparent 55%),linear-gradient(120deg,#e1f4ff,#cfe4fa)}.item-cover.mint{background:radial-gradient(circle at 20% 15%,#fff,transparent 55%),linear-gradient(120deg,#e1f9f0,#c8eddf)}.item-cover.yellow{background:radial-gradient(circle at 20% 15%,#fff9ef,transparent 55%),linear-gradient(120deg,#fff1cc,#fae2bb)}.item-cover.lilac{background:radial-gradient(circle at 20% 15%,#fff,transparent 55%),linear-gradient(120deg,#ede5ff,#dcd7f7)}.item-cover:before{content:'';border-radius:50%;width:145px;height:145px;position:absolute;right:-15px;top:-30px;border:1px solid #fff8;box-shadow:0 0 0 20px #fff3,0 0 0 40px #fff3}.item-cover img{position:absolute;right:5px;bottom:-9px;width:67%;height:125%;object-fit:contain;filter:drop-shadow(0 8px 9px #907aa236);transition:transform .25s}.item-card:hover .item-cover img{transform:translateY(-3px) scale(1.035)}.cover-floater{position:absolute;top:48px;left:19px;font-size:23px;color:#ffffffd8}.cover-floater.last{left:auto;top:15px;right:17px;font-size:17px}.cover-label{position:absolute;left:12px;top:12px;background:#ffffffcc;border:1px solid #fff;color:#bd88a0;padding:5px 10px;border-radius:99px;font-size:9px;font-weight:900;z-index:1}.item-body{display:flex;flex-direction:column;flex:1;padding:15px 16px 13px}.item-line{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.tag{color:#d18fad;background:#fff1f6;border-radius:7px;padding:4px 7px;font-weight:900;font-size:9px}.tag.blue{background:#eaf5ff;color:#8aaeca}.tag.mint{background:#e9faf1;color:#82bba1}.tag.yellow{background:#fff7e2;color:#cfa45f}.tag.lilac{background:#f1edff;color:#aa98d8}.demo-badge{font-size:9px;color:#c6bac6;font-weight:900;letter-spacing:.1px}.item-title{font:800 14px/1.46 'Inter','Segoe UI',Arial,sans-serif;color:#665b71;margin:3px 0 6px;min-height:20px}.item-desc{font-size:10.5px;color:#a79aaa;line-height:1.7;font-weight:700;margin:0 0 12px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}.item-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #f1eaf0;padding-top:10px;gap:8px}.text-link{border:0;background:transparent;padding:7px 0;color:#d98ead;font-weight:900;font-size:10px}.text-link:hover{text-decoration:underline}.empty{display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;background:linear-gradient(130deg,#fff8fa,#fbfaff);border:1px dashed #f1dfe8;border-radius:20px;padding:55px 20px;margin-top:8px}.empty-symbol{display:grid;place-items:center;background:#fff0f5;width:72px;height:72px;border-radius:23px;font-size:43px;color:#e8abc3}.empty h3{font:800 20px 'Inter','Segoe UI',Arial,sans-serif;color:#75687d;margin:15px 0 4px}.empty p{font-size:12px;max-width:330px;line-height:1.8;color:#a69bac;font-weight:700;margin:5px 0 15px}.empty a{display:inline-flex;align-items:center;justify-content:center}.page-head{padding:29px 30px;min-height:172px;border:3px solid #fff;border-radius:24px;background:linear-gradient(120deg,#fff0f5,#eaf3ff);box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;overflow:hidden}.page-head:after{content:'✦';position:absolute;right:41px;top:-25px;font-size:185px;color:#ffffff88;line-height:1}.page-head.events{background:linear-gradient(110deg,#ffedf4,#ffe7e7)}.page-head.guides{background:linear-gradient(110deg,#eaf8ff,#ecf6ff)}.page-head.outfits{background:linear-gradient(110deg,#effaee,#f9f3ff)}.page-head-copy{z-index:1}.page-head .eyebrow{color:#bf97ac}.page-head h1{font:800 clamp(23px,3vw,33px)/1.25 'Inter','Segoe UI',Arial,sans-serif;margin:10px 0 8px;color:#76627d}.page-head p{font-size:12px;line-height:1.7;margin:0;max-width:540px;color:#9d8fa4;font-weight:700}.head-motif{position:relative;z-index:1;font-size:90px;line-height:1;color:#edadc3;text-shadow:6px 8px 0 #fff8;font-family:'Segoe UI Symbol',sans-serif;margin-right:19px}.page-section{margin-top:27px}.quick-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.quick-link{display:inline-flex;align-items:center;gap:8px;border:1px solid #f6e7ee;border-radius:10px;padding:9px 12px;background:#fff8fc;color:#ba8ea9;font-weight:900;font-size:10px}.quick-link:hover{background:#ffeaf3}.banner-row{display:grid;grid-template-columns:1.22fr 1fr;gap:17px}.mini-banner{display:flex;justify-content:space-between;align-items:center;min-height:117px;border-radius:17px;background:linear-gradient(125deg,#fff6e4,#fef0cf);padding:18px 23px;overflow:hidden;position:relative}.mini-banner.mint{background:linear-gradient(125deg,#ebfaf4,#d9f1e7)}.mini-banner strong{display:block;font:800 15px 'Inter','Segoe UI',Arial,sans-serif;color:#82717f;margin-bottom:7px}.mini-banner p{margin:0;font-size:10px;color:#9a91a0;font-weight:700;line-height:1.7;max-width:235px}.mini-banner i{font-size:66px;font-style:normal;color:#dfc19c;opacity:.8;position:relative}.mini-banner.mint i{color:#a5cbb9}.data-note{background:#fffaf1;border:1px solid #fbecd5;border-radius:14px;padding:12px 16px;font-size:11px;line-height:1.65;color:#ad9b87;font-weight:800;margin-top:20px}.data-note span{margin-right:7px;color:#e0b477;font-size:14px}
.detail-dialog{border:0;outline:0;border-radius:27px;padding:0;max-width:560px;width:calc(100% - 28px);box-shadow:0 24px 100px #63576e55;background:white;color:var(--text);max-height:min(93vh,840px);overflow:auto}.detail-dialog::backdrop{background:#43394f77;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:17px;top:17px;border:0;background:#ffffffdc;border-radius:50%;width:36px;height:36px;font-size:24px;color:#a78ca0;z-index:2}.dialog-art{height:220px;overflow:hidden;display:grid;place-items:center;position:relative}.dialog-art.pink{background:linear-gradient(120deg,#ffe5ef,#f7dbed)}.dialog-art.blue{background:linear-gradient(120deg,#e5f7ff,#d5e6fa)}.dialog-art.mint{background:linear-gradient(120deg,#e6f9f1,#d4f2e5)}.dialog-art.yellow{background:linear-gradient(120deg,#fff0d4,#fae6c8)}.dialog-art.lilac{background:linear-gradient(120deg,#ede6ff,#d8d1f5)}.dialog-art:after{content:'✧';position:absolute;right:25px;top:14px;color:#fff;font-size:42px}.dialog-art img{height:230px;object-fit:contain;filter:drop-shadow(0 10px 10px #ab89ae35)}.dialog-body{padding:23px 30px 29px}.dialog-body h2{font:800 23px/1.4 'Inter','Segoe UI',Arial,sans-serif;color:#655873;margin:10px 0}.dialog-body p{font-size:12px;line-height:1.8;font-weight:700;color:#968aa0;margin:0 0 18px}.dialog-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:19px}.dialog-meta span{background:#faf5fa;border:1px solid #f3eaf2;border-radius:99px;padding:6px 11px;font-size:10px;color:#a99aac;font-weight:800}.dialog-placeholder{border:1px dashed #eddae5;background:#fff9fc;border-radius:14px;padding:16px 17px;color:#a393a7;font-size:11px;line-height:1.75;font-weight:700}.dialog-placeholder strong{display:block;color:#ca92ad;font-size:12px;margin-bottom:5px}.dialog-bottom{display:flex;gap:10px;justify-content:flex-end;margin-top:21px}.dialog-bottom button{min-width:130px}.mobile-nav{display:none}.load-state{padding:90px;text-align:center;color:#bc9db5;font-weight:900}
@media(min-width:1500px){.hero{min-height:346px}.item-cover{height:168px}.card-grid{gap:21px}.feature{min-height:146px}.main-content{padding-top:35px}}
@media(max-width:1250px){.sidebar{width:229px;flex-basis:229px;padding-left:13px;padding-right:13px}.side-illustration{height:149px;margin:25px 6px}.side-illustration img{height:115px}.brand-copy strong{font-size:14px}.topbar{padding:0 29px}.main-content{padding-left:29px;padding-right:29px}.footer{margin-left:29px;margin-right:29px}.feature{padding:17px 13px;gap:9px}.feature-emoji{width:58px;height:62px;flex-basis:58px;font-size:37px}.feature-body strong{font-size:13px}.card-grid{gap:12px}.item-cover{height:134px}.hero h1{font-size:36px}}
@media(max-width:1020px){.features{grid-template-columns:repeat(3,1fr)}.feature{display:block;min-height:148px}.feature-emoji{height:50px;width:51px;font-size:31px;border-radius:16px;margin-bottom:6px}.feature-body strong{margin:2px 0 4px}.item-cover{height:126px}.search-box{width:240px}.hero{min-height:285px;padding-left:30px}.hero h1{font-size:32px}.hero-art{right:-14px;width:43%}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item-cover{height:150px}}
@media(max-width:800px){.sidebar{display:none}.topbar{position:relative;height:auto;min-height:74px;padding:13px 19px;gap:8px}.main-content{padding:22px 19px 100px}.top-left{display:none}.top-actions{width:100%;gap:10px}.search-box{width:100%;flex:1;height:44px}.avatar{display:none}.footer{margin:0 19px 75px;padding-bottom:13px}.mobile-nav{position:fixed;display:flex;bottom:0;left:0;right:0;z-index:10;background:#fffdfef5;border-top:1px solid #f1e7ee;box-shadow:0 -7px 25px #bea5b32e;justify-content:space-around;padding:9px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));backdrop-filter:blur(18px)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:60px;min-height:45px;color:#a7a0af;border-radius:12px;font-weight:800}.mobile-nav a span{font-size:22px;line-height:21px}.mobile-nav a small{font-size:9px}.mobile-nav a.active{color:#df87a9;background:#fff0f5}.hero{min-height:293px}.hero-art{width:44%;right:7px}.hero h1{font-size:37px}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.item-cover{height:137px}.features{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.topbar{padding:10px 14px}.main-content{padding:18px 13px 99px}.footer{margin:0 15px 80px;font-size:9px}.hero{padding:26px 20px 18px;align-items:flex-start;min-height:358px}.hero-body{width:75%}.hero h1{font-size:31px;line-height:1.3;letter-spacing:-.9px;margin-top:13px}.hero p{font-size:11px;max-width:290px;line-height:1.8}.hero-art{width:58%;height:77%;right:-35px;bottom:-41px;opacity:.88}.hero-buttons{gap:7px;margin-top:16px}.btn-primary,.btn-secondary{height:38px;min-width:auto;font-size:10px;padding:0 12px}.hero-sparkle.b{right:13%;top:28px}.features{grid-template-columns:1fr;gap:10px}.feature{min-height:94px;display:flex;padding:12px 17px}.feature-emoji{width:62px;height:62px;flex-basis:62px;margin:0;font-size:37px}.feature-body strong{font-size:16px}.feature-body span{font-size:10px}.section{margin-top:25px}.section-title h2{font-size:15px}.section-icon{width:32px;height:32px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.item-cover{height:123px}.item-body{padding:11px 11px 9px}.item-title{font-size:12px;line-height:1.48}.item-desc{font-size:9px;line-height:1.55;min-height:28px}.tag,.cover-label{font-size:8px}.demo-badge{font-size:8px}.cover-label{left:9px;top:9px;padding:4px 7px}.item-cover img{width:75%}.item-bottom{padding-top:6px}.banner-row{grid-template-columns:1fr}.mini-banner{min-height:99px}.page-head{padding:25px 20px;min-height:162px}.page-head h1{font-size:26px}.page-head p{font-size:11px}.head-motif{font-size:57px;margin-right:0}.section-more{font-size:10px}.search-box input{font-size:11px}.search-hint{display:none}.footer{display:block}.footer span{display:block;margin-bottom:4px}.dialog-body{padding:19px 21px 22px}.dialog-body h2{font-size:21px}.dialog-art{height:183px}.dialog-art img{height:190px}}
@media(max-width:380px){.hero{min-height:380px}.hero-body{width:88%}.hero h1{font-size:27px}.hero-art{width:63%;opacity:.6}.hero p{max-width:260px}.hero-buttons{max-width:200px}.item-cover{height:108px}.item-cover img{width:80%}.demo-badge{display:none}.card-grid{gap:8px}.head-motif{font-size:48px}.mobile-nav a{min-width:52px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Sửa hiển thị tiếng Việt và chữ ở mọi độ phân giải */
body{line-height:1.5;font-feature-settings:'kern' 1}
button,input,select,textarea{font-family:'Inter','Segoe UI',Arial,sans-serif}
button,input,select,textarea{line-height:normal}
h1,h2,h3,p,.nav-link,.feature-body strong,.item-title{overflow-wrap:break-word}
.item-title,.section-title h2{line-height:1.48}
[data-local-admin][hidden]{display:none!important}
.top-admin{width:40px;height:40px;flex:0 0 40px;border:1px solid #eddfed;background:#fff2f6;border-radius:13px;color:#d37c9d;font-size:19px;display:grid;place-items:center}
.top-admin:hover{background:#ffe5ed}
@media(max-width:800px){.top-admin{width:44px;height:44px;flex-basis:44px}}

[hidden]{display:none!important}

/* 6 tùy chọn ảnh banner chung cho local và GitHub Pages. Nếu chưa nhập ảnh, giữ giao diện pastel mặc định. */
.hero.has-banner{
  background-image:linear-gradient(90deg,rgba(255,249,253,.95) 0%,rgb(255 249 253 / 39%) 47%,rgb(255 249 253 / 0%) 100%),var(--banner-image);
  background-size:cover;background-position:center center;
}
.hero.has-banner::before,.hero.has-banner::after,.hero.has-banner .hero-art,.hero.has-banner .hero-sparkle{display:none}
.page-head.has-banner{
  background-image:linear-gradient(90deg,rgba(255,250,254,.93),rgba(255,250,254,.77) 58%,rgba(255,250,254,.17)),var(--banner-image);
  background-size:cover;background-position:center center;
}
.page-head.has-banner .head-motif,.page-head.has-banner::after{display:none}
.features.has-banner{
  background-image:linear-gradient(90deg,rgba(255,253,255,.17),rgba(255,253,255,.20)),var(--banner-image);
  background-size:cover;background-position:center center;
  padding:20px;border-radius:23px;border:1px solid #fff;
}
.features.has-banner .feature.pink,.features.has-banner .feature.blue,.features.has-banner .feature.mint{
  background:rgba(255,255,255,.88);backdrop-filter:blur(5px);
}
.side-illustration.has-banner{
  background-image:var(--banner-image);background-position:center;background-size:cover;
}
.side-illustration.has-banner > *{visibility:hidden}
@media(max-width:640px){
  .hero.has-banner{background-image:linear-gradient(90deg,rgba(255,249,253,.95) 0%,rgb(255 249 253 / 39%) 47%,rgb(255 249 253 / 0%) 100%),var(--banner-image)}
  .page-head.has-banner{background-image:linear-gradient(90deg,rgba(255,250,254,.94),rgba(255,250,254,.57)),var(--banner-image)}
  .features.has-banner{padding:11px}
}

/* Chi tiết công khai Sổ Tay: trang phục và BXH */
.item-cover.imported-icon-cover img { object-fit:contain; padding:18px; max-width:100%; max-height:100%; }
.dialog-art img[src*="imported-icons/"] {object-fit:contain;max-width:100%;max-height:260px;padding:18px;}
.st-section {margin:18px 0 8px;min-width:0;}
.st-section>h3,.st-group>h3 {font-size:17px;color:#6d5571;margin:12px 0;}
.st-mission-info {display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px;}
.st-mission-info span {padding:5px 9px;border-radius:12px;background:#f0f6ff;color:#4b5e76;font-size:12px;}
.st-group {margin:18px 0;border-top:1px solid #f1e4ed;padding-top:10px;}
.st-entry-list {display:grid;grid-template-columns:minmax(0,1fr);gap:9px;}
.st-entry {display:flex;align-items:flex-start;gap:12px;border:1px solid #f0e5ef;background:#fffdfd;border-radius:14px;padding:12px;min-width:0;}
.st-item-icon {height:68px;width:68px;flex:none;object-fit:contain;border-radius:12px;background:linear-gradient(135deg,#ffe9f2,#e5f9f4);}
.st-icon-empty {display:flex;align-items:center;justify-content:center;}
.st-entry-body {min-width:0;flex:1;font-size:13px;color:#665e70;}
.st-entry-body>strong {display:block;color:#665174;font-size:14px;margin-bottom:3px;overflow-wrap:anywhere;}
.st-entry-sub {font-size:12px;color:#847a8d;}
.st-entry-body p {font-size:12px;margin:5px 0;}
.st-ranks {margin-top:7px;border-radius:8px;background:#faf5ff;border:1px solid #f0e7fc;padding:4px 9px;}
.st-ranks summary {cursor:pointer;font-size:12px;font-weight:650;color:#87699c;}
.st-rank-list {padding-top:6px;display:grid;gap:5px;}
.st-rank-list>div {display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px;padding:4px 0;border-top:1px solid #eee2f5;}
.st-rank-list>div span {flex:1 1 100px;overflow-wrap:anywhere;}
.st-rank-list>div strong {color:#d65e8d;}
.st-rank-list>div small {color:#777;}
@media(max-width:600px){.st-entry{gap:8px;padding:8px}.st-item-icon{width:54px;height:54px}.st-entry-body>strong{font-size:13px}.item-cover.imported-icon-cover img {padding:9px;}}

/* Sổ Tay: giao diện dữ liệu đã xuất từ The_NSTT_DAN 8 */
.st-item-icon{width:100px;height:100px;border-radius:0;background:transparent;object-fit:contain;flex:0 0 100px;padding:0;}
.st-icon-empty{background:transparent;}
.st-entry{align-items:flex-start;gap:16px;}
.st-entry-body{min-width:0;}
.st-item-name{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.st-item-name>strong{font-size:15px;overflow-wrap:anywhere;}
.st-item-meta{margin:7px 0;gap:5px;}
.dialog-meta.st-item-meta>span{border-radius:7px;font-size:11px;font-weight:600;color:#7b6276;background:#fff5fb;border-color:#f5e2f0;max-width:100%;overflow-wrap:anywhere;}
.dialog-meta>span.st-obtain-summary{border-radius:9px;max-width:100%;overflow-wrap:anywhere;line-height:1.6;}
.st-achievement{color:#b271a7!important;}
.st-specials{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;}
.st-specials>span:first-child{font-weight:700;font-size:12px;color:#9a7891;}
.st-special-slot{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:11px;color:#8b7283;}
.st-special-slot img{height:27px;width:auto;max-width:90px;object-fit:contain;}
.st-attributes{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;}
.st-attribute{display:inline-flex;align-items:center;gap:4px;background:#f8f7ff;border:1px solid #ece7fa;border-radius:8px;padding:4px 6px;color:#786781;font-weight:650;font-size:11px;}
.st-attribute img{max-width:42px;width:auto;height:22px;object-fit:contain;}
.st-sss-flag{background:#fff0ce;color:#af7716;border-radius:6px;padding:3px 9px;font-weight:800;}
.st-ranks{display:block;visibility:visible;margin-top:9px;}
.st-ranks-heading{font-weight:750;font-size:12px;color:#78638d;padding:3px 0;}
.st-ranks-heading span{opacity:.75;}
.st-rank-list{display:grid;gap:4px;}
.st-rank-list>div{display:flex;align-items:center;gap:9px;}
.st-rank-list>div>span:first-child{flex:1 1 80px;min-width:0;}
.st-empty-rank{font-size:11px;color:#a5a0ad;}
.st-top-badge{color:#967d9e;font-size:12px;white-space:nowrap;}
.st-top-highlight{color:var(--st-top-color)!important;}
.st-top1-marker{color:#ed2459;background:#fff0f4;border:1px solid #fbd3df;padding:3px 7px;font-size:11px;font-weight:800;border-radius:6px;white-space:nowrap;}
.dialog-art.st-suit-art{height:290px;padding:12px;background:#fff5fa;}
.dialog-art.st-suit-art img{width:215px;height:266px;max-width:100%;max-height:100%;padding:0;object-fit:contain;}
@media(max-width:640px){
  .st-item-icon{width:80px;height:80px;flex-basis:80px;padding:0;}
  .st-entry{gap:9px;}
  .dialog-art.st-suit-art{height:280px;}
  .dialog-art.st-suit-art img{width:215px;height:266px;}
}

.st-special-header{display:inline-flex;gap:5px;align-items:center;}
.st-special-header img{height:25px;width:auto;object-fit:contain;}

/* V4 · Màu thuộc tính như popup gốc, ảnh rank không nền */
.st-attribute{display:inline-flex;align-items:center;gap:6px;background:transparent!important;border:0!important;border-radius:0;padding:1px 2px;font-size:12px;max-width:100%;flex-wrap:wrap;}
.st-attribute-frame{display:inline-block;padding:2px;background:var(--st-attr-bg);border-radius:25px;line-height:1.2;white-space:nowrap;vertical-align:middle;}
.st-attribute-frame>span{display:inline-block;padding:1px 5px;font-size:12px;font-weight:bold;color:var(--st-attr-fg);background:var(--st-attr-bg);border:2px solid #fff;border-radius:20px;}
.st-rank-visual{display:inline-flex;gap:2px;align-items:center;vertical-align:middle;min-height:24px;background:none!important;border:0!important;white-space:nowrap;}
.st-attribute img.st-rank-image{width:var(--st-rank-width,35px);height:var(--st-rank-height,24px);max-width:none;max-height:none;object-fit:contain;flex:none;border:none!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;padding:0;transform:translate(var(--st-rank-x,0px),var(--st-rank-y,0px));}
.st-rank-text-fallback{font-size:12px;font-weight:bold;color:#836493;}
.st-special-text[hidden]{display:none!important;}
.st-special-slot{background:transparent;border:0;}
.st-mission-info .st-attribute-frame{padding:2px;border-radius:25px;background:var(--st-attr-bg);}
.st-mission-info .st-attribute-frame>span{padding:1px 5px;background:var(--st-attr-bg);color:var(--st-attr-fg);border-radius:20px;border:2px solid white;font-size:12px;font-weight:bold;}
.st-mission-info .st-mission-score{background:transparent;border:0;color:#7b6682;font-size:12px;padding:1px 3px;}

.st-mission-info .st-guide-attribute{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;}

/* Các dòng trang phục: thuộc tính và bảng xếp hạng chiếm hết chiều ngang. */
.st-entry{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start;}
.st-entry>.st-item-icon{grid-column:1;grid-row:1;max-width:100%;}
.st-entry>.st-entry-body{grid-column:2;grid-row:1;min-width:0;}
.st-entry>.st-entry-full{grid-column:1/-1;grid-row:2;min-width:0;width:100%;}
.st-entry-full .st-attributes{width:100%;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:5px;margin:5px 0 7px;}
.st-entry-full .st-ranks{width:100%;margin-top:7px;}
.item-cover.st-suit-cover{isolation:isolate;}
.item-cover.st-suit-cover img.st-suit-cover-image{right:0;bottom:0;width:63%;height:100%;max-width:none;max-height:none;padding:3px 6px 0 0;object-fit:contain;object-position:right bottom;z-index:1;}
.item-cover.st-suit-cover img.st-achievement-cover-icon{left:10px;right:auto;bottom:5px;top:auto;width:35%;height:73%;max-height:none;max-width:none;padding:0;object-fit:contain;object-position:left bottom;z-index:1;filter:drop-shadow(0 2px 4px #8d769335);}
.item-cover.st-suit-cover .cover-label{z-index:3;}
@media(max-width:640px){.st-entry{grid-template-columns:80px minmax(0,1fr);column-gap:9px;}.st-entry>.st-item-icon{width:80px;height:80px;}.st-entry-full .st-attributes{gap:5px;}}


/* PATCH UI: suit có hai lớp cùng nguồn ảnh, ảnh nền phóng to và blur nhẹ 5px. */
.dialog-art.st-suit-art { isolation:isolate; overflow:hidden; }
.dialog-art.st-suit-art img.st-suit-art-blur {
  position:absolute; inset:-12%; z-index:0;
  width:124%; height:124%; max-width:none; max-height:none;
  padding:0; border-radius:0; object-fit:cover;
  filter:blur(5px); transform:scale(1.35);
  pointer-events:none;
}
.dialog-art.st-suit-art img.st-suit-art-image {
  position:relative; z-index:1; border-radius:15px;
  width:215px; height:266px; object-fit:contain;
}
.item-cover.st-suit-cover { isolation:isolate; }
.item-cover.st-suit-cover::before { display:none; }
.item-cover.st-suit-cover img.st-suit-cover-blur {
  position:absolute; inset:-15%; z-index:0;
  width:130%; height:130%; max-width:none; max-height:none;
  padding:0; border-radius:0; object-fit:cover;
  filter:blur(18px); opacity:.4; transform:scale(1.35);
  pointer-events:none;
}
.item-cover.st-suit-cover img.st-suit-cover-image {
  border-radius:15px; overflow:hidden;
}
.item-card:hover .item-cover.st-suit-cover img.st-suit-cover-blur {transform:scale(1.35);}
.item-desc.has-obtain {
  display:block; overflow:visible; -webkit-line-clamp:unset;
}
.item-desc-obtain {
  display:block; margin-top:5px; color:#b77a9c; font-weight:750;
  overflow-wrap:anywhere;
}
/* TOP 1 > TOP 2 > TOP 3, từ TOP 4 trở đi hiển thị màu đen. */
.st-ranks .st-top-badge { display:inline-block; font-weight:900; line-height:1.2; }
.st-ranks .st-top-rank-1 { font-size:20px; }
.st-ranks .st-top-rank-2 { font-size:17px; }
.st-ranks .st-top-rank-3 { font-size:15px; }
.st-ranks .st-top-other { font-size:12px; color:#151515!important; }
/* Nhãn loại trang phục / điểm đặt ngay trên mép phải khung món. */
.st-entry { position:relative; padding-top:21px; }
.st-entry>.st-entry-sub {
  position:absolute; right:15px; top:5px; z-index:2;
  transform:none; max-width:calc(100% - 32px);
  border:1px solid #e98dac; border-radius:8px;
  background:#fffdfd; padding:3px 9px;
  color:#dd5b87; font-size:11px; font-weight:700;
  text-align:right; white-space:normal;
}
@media(max-width:640px){
  .st-entry { padding-top:23px; }
  .st-entry>.st-entry-sub { right:10px; max-width:calc(100% - 20px); font-size:10px; }
  .st-ranks .st-top-rank-1 {font-size:18px;}
  .st-ranks .st-top-rank-2 {font-size:16px;}
  .st-ranks .st-top-rank-3 {font-size:14px;}
}

/* Bảng hệ số chủ đề: giữ màu thuộc tính theo bảng gốc của tool tính điểm. */
.st-topic-attributes-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:5px 0 12px;}
.st-topic-attributes-table{width:100%;max-width:800px;border-collapse:collapse;margin:0 auto 10px;border:0;background:transparent;}
.st-topic-attributes-table td{padding:5px;text-align:center;background:transparent;border:0;white-space:nowrap;min-width:82px;}
.st-topic-attributes-table .st-attribute-frame{border-radius:14px;line-height:1;vertical-align:middle;}
.st-topic-attributes-table .st-attribute-frame>span{padding:3px 8px;font-size:12px;border-radius:12px;line-height:1;box-sizing:border-box;vertical-align:middle;}
.st-topic-attributes-table .st-topic-score{font-size:14px;font-weight:bold;color:#333;line-height:1.4;}
@media(max-width:640px){.st-topic-attributes-table{width:max-content;min-width:100%;}.st-topic-attributes-table td{min-width:85px;}}

/* Special của chủ đề nằm trong 2 hàng của topic-attributes-table. */
.st-topic-attributes-table .st-topic-special-cell{vertical-align:bottom;}
.st-topic-attributes-table .st-topic-special-image{display:block;height:30px;width:auto;max-width:90px;object-fit:contain;margin:0 auto;}
.st-topic-attributes-table .st-topic-special-score{font-size:14px;font-weight:700;vertical-align:middle;}
.st-topic-attributes-table .st-special-arrow{font-size:16px;color:#ff005e;margin-right:5px;}
.st-topic-attributes-table .st-special-arrow.is-down{color:#00a1ff;}
.st-topic-attributes-table .st-special-points{color:#333;font-size:14px;}

/* PATCH: ảnh suit lớp dưới phóng to + blur 5px, không giảm opacity. */
.item-cover.st-suit-cover img.st-suit-cover-blur {
  filter:blur(5px); opacity:1;
}
/* Cover riêng cho chủ đề import: chỉ hiển thị ảnh đã cắt, không kéo dãn. */
.item-cover.st-guide-cover {position:relative; overflow:hidden; isolation:isolate;}
.item-cover.st-guide-cover img.st-guide-cover-image {
  position:absolute; inset:0; display:block;
  width:100%; height:100%; max-width:none; max-height:none;
  padding:0; margin:0; object-fit:cover; object-position:center;
  border-radius:0; transform:none;
}
.item-cover.st-guide-cover .cover-label {z-index:2;}
.dialog-art.st-guide-art {overflow:hidden;}
.dialog-art.st-guide-art img.st-guide-dialog-image {
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; padding:0; object-fit:cover;
}

/* PATCH: Thuộc tính của chủ đề luôn tự co vừa khung, kể cả trên điện thoại. */
.st-topic-attributes-scroll{
  width:100%;max-width:100%;min-width:0;
  overflow-x:visible;overflow-y:visible;
  -webkit-overflow-scrolling:auto;
}
.st-topic-attributes-table{
  width:100%;max-width:100%;min-width:0;
  table-layout:fixed;border-collapse:collapse;
}
.st-topic-attributes-table td{
  width:auto;min-width:0;max-width:none;
  padding:4px 2px;white-space:normal;
  overflow-wrap:anywhere;word-break:normal;
}
.st-topic-attributes-table .st-attribute-frame{
  display:inline-block;max-width:100%;box-sizing:border-box;
  padding:2px;white-space:normal;
}
.st-topic-attributes-table .st-attribute-frame>span{
  display:block;max-width:100%;box-sizing:border-box;
  padding:3px 4px;white-space:normal;
  overflow-wrap:anywhere;line-height:1.2;
}
.st-topic-attributes-table .st-topic-special-image{
  width:auto;height:auto;max-width:100%;max-height:30px;
}
.st-topic-attributes-table .st-topic-special-score,
.st-topic-attributes-table .st-special-points{white-space:normal;}
@media(max-width:640px){
  .st-topic-attributes-table{width:100%;min-width:0;table-layout:fixed;}
  .st-topic-attributes-table td{min-width:0;padding:3px 1px;}
  .st-topic-attributes-table .st-attribute-frame>span{
    font-size:10px;padding:2px 1px;border-width:1px;
  }
  .st-topic-attributes-table .st-topic-score,
  .st-topic-attributes-table .st-topic-special-score,
  .st-topic-attributes-table .st-special-points{font-size:11px;}
  .st-topic-attributes-table .st-special-arrow{font-size:12px;margin-right:1px;}
}

/* PATCH: Thuộc tính chủ đề xếp hàng tự động giống .st-attributes, không cuộn ngang. */
.st-topic-attributes-scroll{overflow:visible!important;margin:8px 0 12px;}
.st-topic-attributes-scroll .st-topic-attributes-table{
  display:flex!important;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;
  gap:8px 10px;width:100%;min-width:0;max-width:none;margin:0;
  table-layout:auto;
}
.st-topic-attribute-chip{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-width:0;min-height:64px;padding:7px 9px;
  background:transparent;border:0;border-radius:13px;
  max-width:100%;box-sizing:border-box;
}
.st-topic-attribute-chip .st-attribute-frame{max-width:100%;white-space:normal;}
.st-topic-attribute-chip .st-attribute-frame>span{font-size:12px;line-height:1.25;overflow-wrap:anywhere;white-space:normal;}
.st-topic-attribute-chip .st-topic-score{font-size:14px;font-weight:800;color:#333;line-height:1.1;}
.st-topic-attribute-chip .st-topic-score.is-high{color:#ff005e;}
.st-topic-attribute-chip .st-topic-score.is-medium{color:#00a1ff;}
.st-topic-special-chip{min-width:72px;}
.st-topic-special-chip .st-topic-special-image{
  display:block;object-fit:contain;width:auto;max-width:95px;height:30px;margin:0;
}
.st-topic-special-chip .st-topic-special-score{display:inline-flex;align-items:center;gap:3px;font-size:13px;white-space:nowrap;}
.st-topic-special-chip .st-special-arrow{color:#ff005e;font-size:16px;line-height:1;}
.st-topic-special-chip .st-special-arrow.is-down{color:#00a1ff;}
.st-topic-special-chip .st-special-points{color:#333;}

/* TOP của món thuộc hướng dẫn đặt vào phần trên bên phải, không hiện bảng tím st-guide-rank. */
.st-entry.st-guide-entry{padding-top:12px;}
.st-entry.st-guide-entry>.st-entry-body{padding-right:124px;}
.st-guide-position{
  position:absolute;right:12px;top:9px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:110px;max-width:120px;padding:5px 7px;
  background:transparent;border:0;border-radius:11px;
  text-align:center;
}
.st-guide-entry-type{font-size:10px;font-weight:700;color:#b17f99;}
.st-guide-position .st-top-badge{font-size:15px;font-weight:900;line-height:1.15;}
.st-guide-position .st-top-rank-1{font-size:20px;}
.st-guide-position .st-top-rank-2{font-size:17px;}
.st-guide-position .st-top-rank-3{font-size:15px;}
.st-guide-position .st-top-other{font-size:12px;color:#151515!important;}
.st-guide-position small{font-size:20px;color:#a57a91;white-space:nowrap;}

/* Bộ lọc nhóm bên dưới thuộc tính. */
.st-guide-filter-form{display:block;margin:12px 0 14px;padding:12px;
  background:linear-gradient(130deg,#f5fcff,#fff8fc);border:1px solid #dbedf9;
  border-radius:15px;
}
.st-guide-filter-heading{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#388eb8;margin:0;background:transparent;border:0;padding:0;cursor:pointer;}
.st-guide-filter-heading::after{content:'▾';display:inline-block;transition:transform .15s ease;}
.st-guide-filter-heading[aria-expanded="true"]::after{transform:rotate(180deg);}
.st-guide-filter-options{display:none;flex-wrap:wrap;gap:3px;margin-top:9px;}
.st-guide-filter-options.is-open{display:flex;}
.st-guide-filter-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid #d1e8f7;border-radius:20px;background:#fff;color:#477c9c;
  font:700 11px/1.4 'Inter','Segoe UI',Arial,sans-serif;
  padding:6px 10px;cursor:pointer;max-width:100%;transition:background .15s,border-color .15s;
}
.st-guide-filter-btn>span{font-size:10px;color:#6a9aad;opacity:.9;}
.st-guide-filter-btn:hover,.st-guide-filter-btn:focus-visible{border-color:#58b5e2;background:#ebf9ff;outline-offset:2px;}
.st-guide-filter-btn.is-active{background:#26a8d8;color:white;border-color:#26a8d8;}
.st-guide-filter-btn.is-active>span{color:white;}
.st-guide-groups .st-group{scroll-margin-top:20px;}
.st-guide-groups .st-group[hidden]{display:none!important;}
.st-guide-groups .st-group h3 small{font-size:11px;font-weight:600;color:#a69aaa;}
.st-group-loading{font-size:11px;text-align:center;color:#a4a0b6;padding:12px 5px;}
.st-group-loading[hidden]{display:none!important;}

/* Nút kính lúp nổi tự nằm ở mép trái hoặc phải màn hình (JS chọn phía rộng hơn). */
.st-guide-filter-float{display:none;position:fixed;top:46%;z-index:2147483000;max-width:calc(100vw - 16px);}
.st-guide-filter-float.is-visible{display:block;}
.st-guide-filter-float.is-left{left:8px;right:auto;}
.st-guide-filter-float.is-right{right:8px;left:auto;}
.st-guide-filter-toggle{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;padding:0;
  border:2px solid #e5f8ff;background:#24a7dc;color:#fff;
  box-shadow:0 7px 22px #168dc060;cursor:pointer;
}
.st-guide-filter-toggle span{font:900 33px/1 'Inter','Segoe UI',sans-serif;transform:rotate(-30deg);margin-top:-5px;}
.st-guide-filter-toggle:hover,.st-guide-filter-toggle:focus-visible{background:#128ac5;outline:2px solid #82d4f3;}
.st-guide-filter-panel{
  position:absolute;top:0;width:min(265px,calc(100vw - 68px));max-height:min(60vh,430px);
  overflow:auto;padding:12px;border:1px solid #cdeaf8;border-radius:14px;
  background:#fff;box-shadow:0 14px 42px #45556938;
}
.st-guide-filter-panel[hidden]{display:none!important;}
.st-guide-filter-float.is-left .st-guide-filter-panel{left:53px;right:auto;}
.st-guide-filter-float.is-right .st-guide-filter-panel{right:53px;left:auto;}
.st-guide-filter-panel-title{display:flex;justify-content:space-between;align-items:center;
  color:#3284aa;font-size:12px;font-weight:800;margin-bottom:9px;}
.st-guide-filter-panel-title button{border:0;background:#e8f7ff;border-radius:50%;width:27px;height:27px;color:#2b8eb9;font-size:19px;cursor:pointer;}
.st-guide-filter-panel .st-guide-filter-options{gap:3px;margin-top:0;}

@media(max-width:640px){
  .st-topic-attributes-scroll .st-topic-attributes-table{gap:6px;}
  .st-topic-attribute-chip{padding:5px 6px;min-height:57px;}
  .st-topic-attribute-chip .st-attribute-frame>span{font-size:11px;padding:2px 5px;}
  .st-topic-attribute-chip .st-topic-score{font-size:12px;}
  .st-guide-filter-form{padding:9px;}
  .st-guide-filter-btn{padding:5px 8px;}
  .st-entry.st-guide-entry{padding-top:42px;}
  .st-entry.st-guide-entry>.st-entry-body{padding-right:0;}
  .st-guide-position{top:6px;right:8px;flex-direction:row;min-width:0;max-width:65%;padding:3px 6px;gap:5px;}
  .st-guide-position .st-top-rank-1{font-size:17px;}
  .st-guide-position .st-top-rank-2{font-size:15px;}
  .st-guide-position .st-top-rank-3{font-size:13px;}
  .st-guide-position small{font-size:15px;}
  .st-guide-filter-toggle{width:42px;height:42px;}
  .st-guide-filter-float.is-left{left:5px;}.st-guide-filter-float.is-right{right:5px;}
  .st-guide-filter-float.is-left .st-guide-filter-panel{left:46px;}
  .st-guide-filter-float.is-right .st-guide-filter-panel{right:46px;}
}
/* Nút nổi thuộc top-layer của dialog: đặt sát mép bên trong để nhận được thao tác. */
.st-guide-filter-toggle svg{display:block;width:23px;height:23px;flex:none;}
.st-guide-filter-float .st-guide-filter-toggle{touch-action:none;user-select:none;-webkit-user-select:none;}
.st-guide-filter-float.is-snapping{transition:left .2s cubic-bezier(.2,.8,.2,1),top .16s ease-out;}
.st-guide-filter-float.is-snapping .st-guide-filter-toggle{pointer-events:none;}
.st-guide-filter-toggle{cursor:grab;}
.st-guide-filter-toggle:active{cursor:grabbing;}
.st-copy-name{display:inline-flex;align-items:center;gap:3px;border:1px solid #bbdef1;border-radius:7px;padding:3px 7px;background:#f0faff;color:#238db7;font:750 10px/1.3 'Inter','Segoe UI',sans-serif;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
.st-copy-name:hover,.st-copy-name:focus-visible{background:#dff5ff;border-color:#7bcdec;outline-offset:2px;}
.st-copy-name.is-copied{background:#e7f9ee;border-color:#9dd9b4;color:#238458;}
.st-copy-name>span:first-child{font-size:14px;line-height:1;}

/* Event groups — content on the left, vertical date rail on the right */
.st-event-card-grid{grid-template-columns:minmax(0,1fr);align-items:start}
.st-event-group-card{min-width:0;width:100%;max-width:760px;padding:20px 18px 16px;background:linear-gradient(142deg,#fff,#fff7fb);border:1px solid #f1dce9;border-radius:22px;box-shadow:0 10px 25px #bb99b113;overflow:hidden}
.st-event-group-card.blue{background:linear-gradient(145deg,#fff,#f3faff);border-color:#e2ebf9}
.st-event-group-card.mint{background:linear-gradient(145deg,#fff,#f1fcf6);border-color:#ddf0e7}
.st-event-group-card.yellow{background:linear-gradient(145deg,#fff,#fffaf0);border-color:#f0e7d7}
.st-event-group-card.lilac{background:linear-gradient(145deg,#fff,#faf6ff);border-color:#eae0f5}
.st-event-group-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.st-event-stages-count{font-size:10px;color:#af91a5;font-weight:800}
.st-event-group-card h3{font-size:17px;color:#785b73;line-height:1.4;margin:12px 0 4px}
.st-event-group-summary{font-size:11px;line-height:1.7;color:#9b8a9d;margin:0 0 14px}
.st-event-timeline{margin:0;padding:0;list-style:none}
.st-event-timeline-row{display:grid;grid-template-columns:minmax(0,1fr) 107px;column-gap:9px;min-height:94px}
.st-event-timeline-content{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:11px;padding:10px 2px 13px 0;border-bottom:1px dashed #f4e4ed}
.st-event-timeline-row:last-child .st-event-timeline-content{border-bottom:0}
.st-event-milestone-image{width:550px;max-width:100%;min-width:0;overflow:hidden;border-radius:13px;background:#fff0f7;border:1px solid #f6e8ef}
.st-event-milestone-image img{display:block;width:100%;height:auto;object-fit:contain}
.st-event-photo-placeholder{display:grid;place-items:center;min-height:96px;color:#d8b4ce;font-size:26px}
.st-event-milestone-copy{min-width:0;width:100%;padding-top:2px}
.st-event-milestone-copy strong{display:block;margin:4px 0 3px;font-size:12px;color:#745e74;line-height:1.5;overflow-wrap:anywhere}
.st-event-milestone-copy p{margin:3px 0;font-size:10px;line-height:1.65;color:#9b8da0;overflow-wrap:anywhere}
.st-event-milestone-type{display:inline-block;padding:3px 8px;font-size:9px;font-weight:900;border-radius:99px;background:#ffecf4;color:#d680aa}
.st-event-timeline-row.is-comeback .st-event-milestone-type{background:#e9f6ff;color:#579ec9}
.st-event-timeline-rail{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:24px;border-left:2px solid #f1b7cf;margin-left:14px;min-width:0}
.st-event-timeline-row:last-child .st-event-timeline-rail{border-left-color:transparent}
.st-event-rail-date{display:inline-flex;align-items:center;white-space:nowrap;background:#fff6fa;border:1px solid #efd3e0;border-radius:8px;padding:5px 6px;font-size:10px;font-weight:900;color:#cc78a0;margin-left:13px;z-index:1}
.st-event-node{position:absolute;left:-6px;top:33px;width:10px;height:10px;background:#eb8bb5;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #e4b6c9}
.st-event-timeline-row.is-comeback .st-event-node{background:#72bbdb;box-shadow:0 0 0 2px #b4dfe9}
.st-event-open{display:block;margin:9px 0 0 auto;border:0;background:#ffedf5;padding:9px 12px;border-radius:11px;color:#c7759d;font-size:10px;font-weight:900;cursor:pointer}
.st-event-open:hover{background:#f9dcea}
.st-event-remaining{font-size:10px;font-weight:800;color:#b48ca1;text-align:center}
.st-event-dialog-heading{padding:32px 26px 12px;background:linear-gradient(130deg,#fff1f7,#f0f9ff)}
.st-event-dialog-heading h2{font-size:23px;color:#76617d;line-height:1.35;margin:11px 0 6px}
.st-event-dialog-heading p{font-size:12px;line-height:1.7;color:#9e8c9e}
.st-event-dialog-timeline{padding:10px 22px 6px}
.st-event-dialog-timeline .st-event-milestone-image{width:254px;max-width:100%}
.st-event-dialog-timeline .st-event-timeline-row{grid-template-columns:minmax(0,1fr) 125px;min-height:118px}
.st-event-dialog-bottom{padding:4px 22px 18px}
.st-event-no-milestones{color:#bd9aaf;font-size:12px;padding:18px 0}
@media(max-width:900px){.st-event-card-grid{grid-template-columns:1fr}}
@media(max-width:480px){.st-event-group-card{padding:15px 10px;border-radius:15px}.st-event-timeline-row{grid-template-columns:minmax(0,1fr) 93px;gap:4px}.st-event-milestone-image{max-width:100%}.st-event-timeline-content{gap:7px}.st-event-rail-date{font-size:9px;padding:4px;margin-left:9px}.st-event-rail-date{transform:translateX(-4px)}.st-event-milestone-copy strong{font-size:11px}.st-event-milestone-copy p{font-size:9px}.st-event-dialog-timeline{padding:12px 12px}.st-event-dialog-timeline .st-event-timeline-row{grid-template-columns:minmax(0,1fr) 95px}.st-event-dialog-timeline .st-event-milestone-image{max-width:100%}.st-event-dialog-heading{padding:25px 15px 10px}}

/* Event catalogue v2: group > editions > launch and individual comeback periods */
.st-event-card-grid{grid-template-columns:minmax(0,1fr)}
.st-event-group-card{width:100%;max-width:790px;min-width:0;box-sizing:border-box}
.st-event-edition-card{padding:12px 0 14px;border-top:1px solid #f1e1eb;min-width:0}
.st-event-edition-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.st-event-edition-top strong{font-size:15px;color:#ba6896}
.st-event-edition-top span{border-radius:18px;padding:2px 9px;color:#a47892;background:#fff0f8;font-weight:700;font-size:11px}
.st-event-timeline-row{grid-template-columns:minmax(0,1fr) 160px;min-width:0}
.st-event-timeline-content{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px;min-width:0}
.st-event-milestone-image{width:550px;max-width:100%;height:auto;flex:none;display:block;overflow:hidden;border-radius:13px;background:#fff0f7;border:1px solid #f6e8ef}
.st-event-milestone-image img{width:100%;height:auto;display:block;object-fit:contain}
.st-event-milestone-copy{flex:1 1 180px}
.st-event-rail-date{white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.4}
.st-event-dialog-editions{padding:14px 21px;display:grid;gap:12px}
.st-event-edition-detail{border:1px solid #f0dbe8;border-radius:15px;overflow:hidden;background:#fff}
.st-event-edition-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding:14px;background:#fff7fb;color:#af6c93;font-weight:800}
.st-event-edition-detail>summary strong{font-size:14px}
.st-event-edition-detail>summary span{font-size:11px;color:#a9889d}
.st-event-dialog-timeline{padding:12px}
.st-event-dialog-timeline .st-event-milestone-image{width:254px;max-width:100%;height:auto;flex:none}
.st-event-dialog-timeline .st-event-timeline-row{grid-template-columns:minmax(0,1fr) 165px;min-height:0}
@media(max-width:600px){.st-event-group-card{max-width:100%}.st-event-timeline-row,.st-event-dialog-timeline .st-event-timeline-row{grid-template-columns:minmax(0,1fr) 98px}.st-event-milestone-image,.st-event-dialog-timeline .st-event-milestone-image{width:100%;height:auto;flex:none}.st-event-rail-date{font-size:9px;max-width:90px;margin-left:5px}.st-event-dialog-editions{padding:10px}.st-event-edition-detail>summary{align-items:flex-start;flex-direction:column;padding:10px}}
.st-event-timeline-content{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.st-event-milestone-copy{flex:none;width:100%;min-height:0;height:auto}


/* Feature icon pack — user-managed WebP assets under docs/assets/feature/ */
.nav-icon img,
.section-icon img,
.mobile-nav-icon img,
.feature-emoji img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  object-fit:contain;
}
.nav-icon img{width:27px;height:27px}
.section-icon img{width:29px;height:29px}
.feature-emoji img{width:67px;height:67px}
.mobile-nav-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;line-height:1}
.mobile-nav-icon img{width:27px;height:27px}
@media(max-width:1250px){.feature-emoji img{width:53px;height:53px}}
@media(max-width:1020px){.feature-emoji img{width:46px;height:46px}}
@media(max-width:640px){.feature-emoji img{width:58px;height:58px}.section-icon img{width:26px;height:26px}}

/* Compact event groups on the home page only; full timeline remains on #events */
.st-event-card-grid.st-home-event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.st-home-event-grid .st-event-home-compact{max-width:none;width:100%;display:flex;flex-direction:column;padding:16px 15px;gap:7px;min-width:0}
.st-event-home-compact h3{margin:1px 0 0;font-size:15px}
.st-event-home-compact .st-event-group-summary{margin:0;color:#9b8a9d;font-size:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-event-home-latest{display:flex;gap:10px;align-items:center;min-width:0;flex:1;padding:10px 0 2px}
.st-event-home-photo{flex:0 0 112px;width:112px;aspect-ratio:3/2;min-width:0;overflow:hidden;border-radius:11px;background:#fdf2f7;border:1px solid #f4e6ee}
.st-event-home-photo img{width:100%;height:100%;display:block;object-fit:cover}
.st-event-home-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.st-event-home-info strong{font-size:12px;line-height:1.35;color:#855d7d;overflow-wrap:anywhere}
.st-event-home-info span{font-size:10px;font-weight:700;color:#a08093;line-height:1.4}
.st-event-home-info small{font-size:9px;color:#b18da2;font-weight:800}
.st-event-home-compact .st-event-open{margin:auto 0 0 auto}
@media(max-width:1090px){.st-event-card-grid.st-home-event-grid{grid-template-columns:1fr}.st-home-event-grid .st-event-home-compact{max-width:550px}}
@media(max-width:800px){.st-event-card-grid.st-home-event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.st-event-home-photo{flex-basis:90px;width:90px}}
@media(max-width:630px){.st-event-card-grid.st-home-event-grid{grid-template-columns:1fr}.st-home-event-grid .st-event-home-compact{max-width:none}.st-event-home-photo{flex-basis:110px;width:110px}}
@media(max-width:360px){.st-event-home-photo{flex-basis:85px;width:85px}}


/* Transparent feature icons, larger WebP artwork; do not add a tile around the icon itself. */
.nav-icon,
.nav-icon-rose,
.nav-icon-peach,
.nav-icon-blue,
.nav-icon-lilac,
.nav-icon-yellow,
.nav-icon-mint,
.section-icon,
.section-icon.blue,
.section-icon.green,
.section-icon.yellow,
.section-icon.purple,
.feature-emoji,
.mobile-nav-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none;
  color: inherit;
  overflow: visible;
}
.nav-icon img,
.section-icon img,
.mobile-nav-icon img,
.feature-emoji img {
  display: block;
  max-width: 130%;
  max-height: 130%;
  object-fit: contain;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}
/* Desktop sidebar icons */
.nav-link{min-height:57px;height:auto;gap:11px}
.nav-icon{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center}
.nav-icon img{width:51px;height:51px;flex:0 0 auto}
/* Section headings */
.section-icon{width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center}
.section-icon img{width:51px;height:51px;flex:0 0 auto}
/* Large, free-standing illustrations on the feature cards */
.feature{gap:15px;min-height:156px}
.feature-emoji{width:84px;height:92px;flex:0 0 84px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.feature-emoji img{width:108px;height:108px;max-width:130%;max-height:130%;flex:0 0 auto}
/* Remove active/hover backplates behind transparent menu icons. */
.nav-link.active,.nav-link:hover{background:transparent;box-shadow:none}
.mobile-nav a.active{background:transparent;box-shadow:none}
.mobile-nav-icon{width:40px;height:40px;flex:0 0 40px}
.mobile-nav-icon img{width:44px;height:44px;flex:0 0 auto}
.mobile-nav a{min-height:65px;gap:3px}

/* Wardrobe: warm pastel yellow, without recoloring the user's transparent WebP icon. */
.feature.yellow{background:linear-gradient(135deg,#fff8df,#ffedc4)}
.feature.yellow .feature-body strong,.feature.yellow .feature-arrow{color:#ae792b}
.feature.yellow .feature-body small{color:#b99662}
.features.has-banner .feature.yellow{background:rgba(255,255,255,.88);backdrop-filter:blur(5px)}
.page-head.outfits:not(.has-banner){background:linear-gradient(110deg,#fff8de,#ffebbd)}
.page-head.outfits .eyebrow{color:#bb8a44}
.page-head.outfits h1{color:#986b2b}
.page-head.outfits .head-motif{color:#e3b45d}
.nav-link[data-nav="outfits"].active,.mobile-nav a[data-nav="outfits"].active{color:#bc872d}
body[data-page="outfits"] .tab.active{background:#edbf65;border-color:#edbf65;color:#724e18;box-shadow:0 4px 12px #edbf6540}
body[data-page="outfits"] .tab:hover{border-color:#e0b567}
body[data-page="outfits"] .toolbar-count{color:#ba893e}
.st-outfit-card .tag{background:#fff5d9;color:#b48034}
.st-outfit-card .text-link{color:#ba822c}
.st-outfit-card .cover-label{color:#a97832;background:#fff8e9;border-color:#fff3d2}

@media(max-width:1250px){
  .feature{gap:10px;padding:16px 12px}
  .feature-emoji{width:75px;height:80px;flex-basis:75px}
  .feature-emoji img{width:96px;height:96px}
}
@media(max-width:1020px){
  .feature{min-height:182px}
  .feature-emoji{width:76px;height:88px;flex-basis:76px;margin-bottom:10px}
  .feature-emoji img{width:98px;height:98px}
}
@media(max-width:800px){
  .mobile-nav a{padding:2px 0}
}
@media(max-width:640px){
  .feature{display:flex;min-height:113px;gap:14px;padding:12px 17px}
  .feature-emoji{width:77px;height:77px;flex:0 0 77px;margin:0}
  .feature-emoji img{width:100px;height:100px}
  .section-icon{width:42px;height:42px;flex-basis:42px}
  .section-icon img{width:48px;height:48px}
  .mobile-nav-icon{width:39px;height:39px;flex-basis:39px}
  .mobile-nav-icon img{width:43px;height:43px}
  .mobile-nav a{min-height:65px}
}
@media(max-width:380px){
  .feature-emoji{width:69px;height:72px;flex-basis:69px}
  .feature-emoji img{width:88px;height:88px}
  .mobile-nav-icon img{width:40px;height:40px}
}


/* Event preview slider - landscape images are always shown in full, never cropped. */
.st-event-card-grid.st-home-event-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.st-event-card-grid .st-event-home-compact{max-width:none;width:100%;min-width:0;display:flex;flex-direction:column;gap:9px}
.st-event-slider{min-width:0;width:100%;border-radius:14px;outline-offset:3px;touch-action:pan-y}
.st-event-slide-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:126px;max-width:100%;border-radius:13px;background:#fff9fc;overflow:hidden}
.st-event-slide-img{display:block;width:auto;max-width:100%;height:auto;max-height:270px;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.st-event-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:38px;border-radius:12px;background:#fffffff2;border:1px solid #efdde7;color:#c96b9a;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 3px 14px #7d5c7626;display:grid;place-items:center;z-index:1}
.st-event-slide-arrow.prev{left:7px}
.st-event-slide-arrow.next{right:7px}
.st-event-slide-arrow:hover,.st-event-slide-arrow:focus-visible{background:#ffeff7;outline:2px solid #f2b7d3;outline-offset:1px}
.st-event-slide-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:5px 12px;flex-wrap:wrap;line-height:1.5;padding:3px 1px}
.st-event-slide-caption strong{font-size:12px;color:#8f5d84;overflow-wrap:anywhere}
.st-event-slide-caption span{font-size:10px;color:#ad7c9f;font-weight:700}
.st-event-slide-status{display:flex;justify-content:space-between;align-items:center;color:#a58598;font-weight:800;font-size:10px;gap:8px}
.st-event-slide-instruction{font-weight:600;color:#b9a9b7}
.st-event-home-compact .st-event-home-info{display:flex;gap:4px;flex-wrap:wrap;flex-direction:row;align-items:center;padding:0;min-height:0}
.st-event-home-compact .st-event-home-info strong{font-size:11px}
.st-event-home-compact .st-event-home-info span,.st-event-home-compact .st-event-home-info small{font-size:10px}
.st-event-home-compact .st-event-open{margin-top:auto}
/* Detail dialog: every edition and milestone starts expanded with no hidden rows. */
.st-event-edition-detail .st-event-dialog-edition-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:14px;background:#fff7fb;color:#af6c93;font-weight:800}
.st-event-dialog-edition-heading strong{font-size:14px}
.st-event-dialog-edition-heading span{font-size:11px;color:#a9889d}
/* Mobile navigation: softly enlarge the selected transparent WebP icon only. */
.mobile-nav-icon img{transition:transform .18s ease;transform-origin:center;will-change:transform}
.mobile-nav a.active .mobile-nav-icon img{transform:scale(1.13)}
@media(max-width:1090px){.st-event-card-grid.st-home-event-grid{grid-template-columns:1fr}}
@media(min-width:801px) and (max-width:1080px){.st-event-card-grid.st-home-event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.st-event-card-grid.st-home-event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:630px){.st-event-card-grid.st-home-event-grid{grid-template-columns:1fr}}
@media(max-width:400px){.st-event-slide-stage{min-height:96px}.st-event-slide-arrow{width:28px;height:34px;font-size:25px}.st-event-slide-img{max-height:195px}}
@media(prefers-reduced-motion:reduce){.mobile-nav-icon img{transition:none}}

/* Pastel scrollbars: page, details popup, group filter, and other scroll containers.
   Native scrolling is preserved, including touch scrolling on mobile. */
:root {
  --st-scroll-track: #fff6fb;
  --st-scroll-border: #fff9fc;
  --st-scroll-rose: #e89abb;
  --st-scroll-sky: #acd9ee;
  --st-scroll-lilac: #c9bdef;
}

/* Chromium, Edge and Safari: slim, rounded pastel thumb with soft color transition. */
*::-webkit-scrollbar {
  width: 11px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #fff7fb 0%, #f7f7ff 100%);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  min-height: 38px;
  background: linear-gradient(180deg,
    var(--st-scroll-rose) 0%,
    var(--st-scroll-lilac) 48%,
    var(--st-scroll-sky) 100%);
  border: 2px solid var(--st-scroll-border);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #df81a9 0%, #af9fe2 48%, #83c6e9 100%);
}
*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #d8689b 0%, #9e8bd8 48%, #66b5e0 100%);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Inner scrollbars should be a little narrower than the page scrollbar. */
.detail-dialog::-webkit-scrollbar,
.st-guide-filter-panel::-webkit-scrollbar,
.st-topic-attributes-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Firefox uses its native thin scrollbar with the same pastel palette. */
@supports (-moz-appearance: none) {
  :root {
    scrollbar-width: thin;
    scrollbar-color: #db9dbe #fff6fb;
  }
  .detail-dialog,
  .st-guide-filter-panel,
  .st-topic-attributes-scroll {
    scrollbar-width: thin;
    scrollbar-color: #db9dbe #fff6fb;
  }
}

/* Keep mobile scrollbars unobtrusive; don't interfere with natural touch momentum. */
@media (max-width: 800px) {
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-thumb { border-width: 1px; }
  .detail-dialog::-webkit-scrollbar,
  .st-guide-filter-panel::-webkit-scrollbar,
  .st-topic-attributes-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
}

/* Respect high-contrast user settings. */
@media (forced-colors: active) {
  *::-webkit-scrollbar-track { background: Canvas; }
  *::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
}