/* roulang page: index */
:root{--bg:#12080C;--band:#1B1016;--panel:#24141C;--hot:#FF2E4C;--sakura:#FF5C8A;--amber:#FF9F1C;--steel:#D5D8DE;--mute:#B7A8B0;--text:#F6EEF1;--line:rgba(213,216,222,.38);--shadow:0 10px 28px rgba(0,0,0,.32);--r2:2px;--r10:10px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;line-height:1.75;font-size:16px}
html body h1,html body h2,html body h3,html body p{margin:0}
html body h1{font-size:clamp(1.85rem,3.2vw,2.65rem);line-height:1.28;font-weight:800;letter-spacing:.01em}
html body h2{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35;font-weight:750;margin-bottom:.75rem}
html body h3{font-size:1.08rem;line-height:1.4;font-weight:700}
html body p{margin-bottom:.85rem;color:var(--mute)}
html body a{color:inherit;text-decoration:none}
html body button,html body input,html body select{font:inherit;color:inherit}
html body img{max-width:100%;display:block}
html body ul,html body ol{margin:0;padding:0;list-style:none}
html body [hidden]{display:none !important}
html body ::selection{background:var(--hot);color:#fff}
html body :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
html body .container{width:min(1120px,calc(100% - 40px));margin:0 auto}
html body .band{padding:48px 0;scroll-margin-top:112px}
html body .band-b{background:var(--band)}
html body .lead{max-width:760px;color:var(--mute);margin-bottom:1rem}
html body .site-header{position:sticky;top:0;z-index:40;background:#0C0609;border-bottom:1px solid var(--line)}
html body .promo{height:36px;background:#1A0C12;border-bottom:1px solid var(--line);color:var(--steel);font-size:13px}
html body .promo-inner{height:36px;display:flex;align-items:center;gap:12px}
html body .ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
html body .ticker-track{display:inline-flex;gap:28px;min-width:max-content;animation:tick 28s linear infinite}
html body .ticker:hover .ticker-track{animation-play-state:paused}
html body .ticker b{color:var(--amber);font-weight:650}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html body .age-pill{flex:none;border:1px solid var(--steel);color:var(--amber);border-radius:var(--r2);padding:1px 8px;font-size:12px;letter-spacing:.08em}
html body .nav-row{min-height:74px;display:flex;align-items:center;gap:16px}
html body .logo-lock{display:flex;align-items:center;gap:8px;flex:none}
html body .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot)}
html body .logo-text{display:flex;flex-direction:column;line-height:1.2;font-weight:800}
html body .logo-text span:first-child{font-size:15px}
html body .logo-text span:last-child{font-size:13px;color:var(--sakura)}
html body .nav-links{display:flex;align-items:center;gap:16px;flex:none}
html body .nav-links a{padding:8px 0;color:var(--steel);font-weight:650}
html body .nav-links a:hover{color:var(--text)}
html body .nav-links a.is-active{color:var(--text);box-shadow:inset 0 -2px 0 var(--hot)}
html body .search-box{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:4px 4px 4px 12px;position:relative}
html body .search-box:focus-within{border-color:var(--sakura)}
html body .search-box input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:8px 0;color:var(--text)}
html body .search-box input::placeholder{color:var(--mute)}
html body .icon-btn{width:42px;height:42px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--steel);border-radius:var(--r2);cursor:pointer}
html body .icon-btn:hover,html body .icon-btn.is-on{color:var(--hot);border-color:var(--hot)}
html body .btn-hot{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;background:var(--hot);color:#2A0A10;border:0;border-radius:var(--r2);font-weight:800;cursor:pointer;transition:filter .2s ease}
html body .btn-hot::before{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--amber);transition:width .35s ease}
html body .btn-hot:hover::before,html body .btn-hot:focus-visible::before{width:100%}
html body .btn-hot:hover{color:#2A0A10;filter:brightness(1.05)}
html body .btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;background:transparent;color:var(--steel);border:1px solid var(--steel);border-radius:var(--r2);cursor:pointer}
html body .btn-ghost:hover{color:var(--text);border-color:var(--sakura)}
html body .search-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);z-index:20;padding:8px}
html body .search-pop a,html body .empty-line{display:block;padding:8px;color:var(--text)}
html body .search-pop a:hover{background:#301821}
html body .menu-btn{display:none}
html body .overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}
html body .drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);background:#160A10;border-left:1px solid var(--line);z-index:50;transform:translateX(100%);transition:transform .28s ease;padding:18px;overflow:auto}
html body .drawer.is-open{transform:translateX(0)}
html body.lock{overflow:hidden}
html body .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
html body .drawer-nav{display:flex;flex-direction:column;gap:4px;margin:14px 0}
html body .drawer-nav a{padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}
html body .drawer-nav a.is-active{box-shadow:inset -3px 0 0 var(--hot)}
html body .drawer .search-box{margin-bottom:12px}
html body .hero-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:end}
html body .sub{color:var(--sakura);font-weight:700;margin:.6rem 0}
html body .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
html body .gauge{width:132px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
html body .gauge-scale{display:flex;gap:4px}
html body .gauge-scale i{display:block;width:2px;height:14px;background:var(--steel)}
html body .gauge-track{width:12px;height:116px;border:1px solid var(--steel);position:relative}
html body .gauge-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--amber),var(--hot));transition:height .6s ease}
html body .gauge strong{font-size:1.7rem;line-height:1}
html body .gauge span{color:var(--mute);font-size:12px}
html body .metric-num{color:var(--amber);font-family:ui-monospace,"Cascadia Mono","Sarasa Mono SC",monospace;font-variant-numeric:tabular-nums;letter-spacing:0}
html body .is-loading{color:transparent !important;position:relative}
html body .is-loading::before{content:"";position:absolute;left:0;right:0;bottom:.25em;height:2px;background:var(--steel)}
html body .score-grid,html body .seat-grid,html body .entry-grid,html body .assure,html body .lead-grid{display:grid;gap:14px}
html body .score-card,html body .seat,html body .entry-card,html body .assure article,html body .lead-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
html body .score-card{border-radius:var(--r2);padding:14px 14px 16px;min-height:148px}
html body .score-card::before{content:"";display:block;height:8px;margin-bottom:10px;background:repeating-linear-gradient(90deg,var(--steel) 0 1px,transparent 1px 8px);opacity:.75}
html body .score-card strong{display:block;font-size:1.85rem;line-height:1.1;margin-bottom:8px}
html body .score-card span{display:block;color:var(--text);font-weight:700}
html body .score-card em{display:block;margin-top:6px;color:var(--mute);font-style:normal;font-size:14px}
html body .seat{position:relative;border-radius:var(--r10);padding:16px;display:flex;flex-direction:column;gap:8px;min-height:160px}
html body .seat::after{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;border-top:1px solid var(--steel);border-right:1px solid var(--steel)}
html body .seat:hover{border-color:var(--sakura);transform:translateY(-2px);transition:transform .2s ease,border-color .2s ease}
html body .tag{align-self:flex-start;color:var(--sakura);border:1px solid var(--sakura);border-radius:var(--r2);padding:0 6px;font-size:12px}
html body .seat p{color:var(--text);margin:0}
html body .bar{display:block;height:6px;margin-top:auto;border:1px solid var(--steel);position:relative}
html body .bar b{display:block;height:100%;background:var(--hot)}
html body .bar b.peak{background:var(--amber)}
html body .compare-list{display:flex;flex-direction:column;gap:16px}
html body .compare-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r10);padding:14px}
html body .pair{display:grid;grid-template-columns:1fr;gap:8px}
html body .pair div{min-width:0}
html body .pair span{display:flex;justify-content:space-between;gap:8px;color:var(--text);font-size:14px}
html body .rec{color:#2A0A10;background:var(--hot);border-radius:var(--r2);padding:0 6px;font-size:12px;font-weight:800}
html body .slot{margin-top:4px;height:8px;border:1px solid var(--steel)}
html body .slot i{display:block;height:100%;background:var(--hot)}
html body .slot i.dim{background:#6E4A55}
html body .axis{display:flex;width:100%;min-width:0;overflow-x:auto;padding-bottom:6px}
html body .node{flex:1 0 190px;position:relative;padding:26px 16px 8px 0}
html body .node::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--steel)}
html body .node::after{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border:1px solid var(--steel);background:var(--bg)}
html body .node.is-now::after{background:var(--hot);border-color:var(--hot)}
html body .node time{display:block;color:var(--amber);font-family:ui-monospace,"Cascadia Mono",monospace;font-size:13px}
html body .node strong{display:block;color:var(--text)}
html body .news-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
html body .news-item{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line);align-items:center}
html body .news-item:hover{background:var(--panel)}
html body .news-item time{color:var(--amber);font-family:ui-monospace,"Cascadia Mono",monospace}
html body .news-item span{color:var(--text);font-weight:700}
html body .more-row{margin:14px 0 0;text-align:right}
html body .more-row a{color:var(--hot);font-weight:800;border-bottom:1px solid var(--hot)}
html body .entry-card{border-radius:var(--r10);padding:18px;display:flex;flex-direction:column;gap:8px;min-height:210px}
html body .entry-card p{color:var(--text)}
html body .entry-card .btn-hot{margin-top:auto;align-self:flex-start}
html body .film-row{display:flex;gap:12px;overflow-x:auto;width:100%;min-width:0;padding-bottom:8px}
html body .clip{flex:0 0 176px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
html body .clip:hover{border-color:var(--hot)}
html body .clip-face{height:96px;background:repeating-linear-gradient(135deg,rgba(213,216,222,.18) 0 1px,transparent 1px 12px),#14090E;position:relative}
html body .clip-face span{position:absolute;left:8px;bottom:8px;background:#12080C;color:var(--steel);border:1px solid var(--line);padding:0 6px;font-family:ui-monospace,"Cascadia Mono",monospace;font-size:12px}
html body .clip-meta{padding:8px}
html body .clip-meta b{display:block;font-size:14px}
html body .clip-meta span{color:var(--mute);font-size:12px}
html body .scene-list{display:flex;flex-direction:column;gap:10px}
html body .scene-list a{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:12px}
html body .scene-list a:hover{border-color:var(--sakura)}
html body .scene-no{color:var(--amber);font-family:ui-monospace,"Cascadia Mono",monospace;font-size:1.2rem}
html body .scene-list h3{margin-bottom:2px}
html body .scene-list p{margin:0;color:var(--text);font-size:14px}
html body .scene-list em{color:var(--sakura);font-style:normal;font-size:13px}
html body .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
html body .chip-row legend{color:var(--steel);font-size:13px;margin-right:4px;padding-top:6px}
html body .chip{border:1px solid var(--steel);background:transparent;color:var(--steel);border-radius:var(--r2);min-height:34px;padding:0 10px;cursor:pointer}
html body .chip:hover{border-color:var(--sakura);color:var(--text)}
html body .chip.is-on{background:var(--hot);border-color:var(--hot);color:#2A0A10;font-weight:800}
html body .pick-list{display:flex;flex-direction:column;margin-top:8px}
html body .pick-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
html body .pick-list a{font-weight:700}
html body .pick-list span{color:var(--mute);font-size:13px;white-space:nowrap}
html body .assure article{border-radius:var(--r2);padding:14px}
html body .assure h3{margin-bottom:6px}
html body .assure p{margin:0;color:var(--text)}
html body .qa-list{display:flex;flex-direction:column}
html body .qa-list article{padding:14px 0;border-bottom:1px solid var(--line)}
html body .qa-list h3{color:var(--hot);margin-bottom:4px}
html body .qa-list p{margin:0;color:var(--text)}
html body details.faq{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);margin-bottom:8px}
html body details.faq summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:750;display:flex;justify-content:space-between;gap:12px}
html body details.faq summary::-webkit-details-marker{display:none}
html body .faq-mark{color:var(--amber);transition:transform .2s ease}
html body details[open] .faq-mark{transform:rotate(45deg)}
html body details.faq p{padding:0 14px 12px;color:var(--text)}
html body .lead-card{border-radius:var(--r10);padding:16px}
html body .form-grid{display:grid;gap:12px}
html body label{display:flex;flex-direction:column;gap:6px;color:var(--steel);font-size:14px}
html body input,html body select{background:#160A10;border:1px solid var(--line);border-radius:var(--r2);min-height:42px;padding:0 10px;width:100%}
html body input.is-error,html body select.is-error{border-color:var(--hot);box-shadow:inset 0 0 0 1px var(--hot)}
html body .ok-line{color:var(--amber);font-weight:700}
html body .playlist{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;color:var(--text)}
html body .playlist a{border-bottom:1px solid var(--line);font-weight:700}
html body .playlist a:hover{border-color:var(--hot);color:var(--text)}
html body .dot{color:var(--steel);margin:0 8px}
html body .site-footer{background:#10070B;border-top:1px solid var(--line);padding:28px 0 34px}
html body .site-footer strong{display:block;margin-bottom:4px}
html body .site-footer p{margin:0;color:var(--mute);font-size:14px}
@media (min-width:768px){
html body .score-grid{grid-template-columns:1fr 1fr}
html body .pair{grid-template-columns:1fr 1fr}
html body .entry-grid{grid-template-columns:1.25fr .8fr}
html body .assure{grid-template-columns:1.15fr .85fr 1fr}
html body .form-grid{grid-template-columns:1fr 1fr}
html body .seat-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
html body .menu-btn,html body .drawer,html body .overlay{display:none !important}
html body .hero-grid{grid-template-columns:minmax(0,1fr) 148px}
html body .score-grid{grid-template-columns:repeat(4,1fr)}
html body .seat-grid{grid-template-columns:1.45fr .9fr;grid-template-areas:"main b" "main c" "d d"}
html body .seat-main{grid-area:main;min-height:340px}
html body .seat-b{grid-area:b}
html body .seat-c{grid-area:c}
html body .seat-d{grid-area:d}
html body .lead-grid{grid-template-columns:.9fr 1.1fr;align-items:start}
}
@media (max-width:1023px){
html body .desktop-only{display:none !important}
html body .menu-btn{display:inline-flex;margin-left:auto}
}
@media (max-width:767px){
html body .band{padding:32px 0}
html body .scene-list a{grid-template-columns:42px 1fr}
html body .scene-list em{display:none}
html body .news-item{grid-template-columns:64px 1fr}
}
@media (max-width:520px){
html body .container{width:calc(100% - 28px)}
html body .logo-text span:first-child{font-size:13px}
html body .logo-text span:last-child{font-size:12px}
html body .hero-actions{flex-direction:column}
html body .hero-actions a,html body .hero-actions button{width:100%}
html body .pick-list li{flex-direction:column;gap:2px}
html body .gauge{width:100%}
}
@media (prefers-reduced-motion:reduce){
html body .ticker-track,html body .gauge-fill,html body .seat{animation:none !important;transition:none !important}
}

html body .is-loading{color:#FF9F1C !important}html body .is-loading::before{display:none !important}html body .gauge-fill{height:96% !important}

/* roulang page: category2 */
:root{--bg:#12080C;--band:#1B1016;--panel:#24141C;--hot:#FF2E4C;--sakura:#FF5C8A;--amber:#FF9F1C;--steel:#D5D8DE;--mute:#B7A8B0;--text:#F6EEF1;--line:rgba(213,216,222,.38);--shadow:0 10px 28px rgba(0,0,0,.32);--r2:2px;--r10:10px}
/* roulang page: index */
:root{--bg:#12080C;--band:#1B1016;--panel:#24141C;--hot:#FF2E4C;--sakura:#FF5C8A;--amber:#FF9F1C;--steel:#D5D8DE;--mute:#B7A8B0;--text:#F6EEF1;--line:rgba(213,216,222,.38);--shadow:0 10px 28px rgba(0,0,0,.32);--r2:2px;--r10:10px}
html{scroll-behavior:smooth}
html body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;line-height:1.75;font-size:16px}
html body h1,html body h2,html body h3,html body p{margin:0}
html body h1{font-size:clamp(1.85rem,3.2vw,2.65rem);line-height:1.28;font-weight:800;letter-spacing:.01em}
html body h2{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35;font-weight:750;margin-bottom:.75rem}
html body h3{font-size:1.08rem;line-height:1.4;font-weight:700}
html body p{margin-bottom:.85rem;color:var(--mute)}
html body a{color:inherit;text-decoration:none}
html body button,html body input,html body select{font:inherit;color:inherit}
html body img{max-width:100%;display:block}
html body ul,html body ol{margin:0;padding:0;list-style:none}
html body [hidden]{display:none !important}
html body ::selection{background:var(--hot);color:#fff}
html body :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
html body .container{width:min(1120px,calc(100% - 40px));margin:0 auto}
html body .band{padding:48px 0;scroll-margin-top:112px}
html body .band-b{background:var(--band)}
html body .lead{max-width:760px;color:var(--mute);margin-bottom:1rem}
html body .site-header{position:sticky;top:0;z-index:40;background:#0C0609;border-bottom:1px solid var(--line)}
html body .promo{height:36px;background:#1A0C12;border-bottom:1px solid var(--line);color:var(--steel);font-size:13px}
html body .promo-inner{height:36px;display:flex;align-items:center;gap:12px}
html body .ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
html body .ticker-track{display:inline-flex;gap:28px;min-width:max-content;animation:tick 28s linear infinite}
html body .ticker:hover .ticker-track{animation-play-state:paused}
html body .ticker b{color:var(--amber);font-weight:650}
html body .age-pill{flex:none;border:1px solid var(--steel);color:var(--amber);border-radius:var(--r2);padding:1px 8px;font-size:12px;letter-spacing:.08em}
html body .nav-row{min-height:74px;display:flex;align-items:center;gap:16px}
html body .logo-lock{display:flex;align-items:center;gap:8px;flex:none}
html body .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot)}
html body .logo-text{display:flex;flex-direction:column;line-height:1.2;font-weight:800}
html body .logo-text span:first-child{font-size:15px}
html body .logo-text span:last-child{font-size:13px;color:var(--sakura)}
html body .nav-links{display:flex;align-items:center;gap:16px;flex:none}
html body .nav-links a{padding:8px 0;color:var(--steel);font-weight:650}
html body .nav-links a:hover{color:var(--text)}
html body .nav-links a.is-active{color:var(--text);box-shadow:inset 0 -2px 0 var(--hot)}
html body .search-box{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:4px 4px 4px 12px;position:relative}
html body .search-box:focus-within{border-color:var(--sakura)}
html body .search-box input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:8px 0;color:var(--text)}
html body .search-box input::placeholder{color:var(--mute)}
html body .icon-btn{width:42px;height:42px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--steel);border-radius:var(--r2);cursor:pointer}
html body .icon-btn:hover,html body .icon-btn.is-on{color:var(--hot);border-color:var(--hot)}
html body .btn-hot{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;background:var(--hot);color:#2A0A10;border:0;border-radius:var(--r2);font-weight:800;cursor:pointer;transition:filter .2s ease}
html body .btn-hot::before{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--amber);transition:width .35s ease}
html body .btn-hot:hover::before,html body .btn-hot:focus-visible::before{width:100%}
html body .btn-hot:hover{color:#2A0A10;filter:brightness(1.05)}
html body .btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;background:transparent;color:var(--steel);border:1px solid var(--steel);border-radius:var(--r2);cursor:pointer}
html body .btn-ghost:hover{color:var(--text);border-color:var(--sakura)}
html body .search-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);z-index:20;padding:8px}
html body .search-pop a,html body .empty-line{display:block;padding:8px;color:var(--text)}
html body .search-pop a:hover{background:#301821}
html body .menu-btn{display:none}
html body .overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}
html body .drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);background:#160A10;border-left:1px solid var(--line);z-index:50;transform:translateX(100%);transition:transform .28s ease;padding:18px;overflow:auto}
html body .drawer.is-open{transform:translateX(0)}
html body.lock{overflow:hidden}
html body .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
html body .drawer-nav{display:flex;flex-direction:column;gap:4px;margin:14px 0}
html body .drawer-nav a{padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}
html body .drawer-nav a.is-active{box-shadow:inset -3px 0 0 var(--hot)}
html body .drawer .search-box{margin-bottom:12px}
html body .hero-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:end}
html body .sub{color:var(--sakura);font-weight:700;margin:.6rem 0}
html body .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
html body .gauge{width:132px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
html body .gauge-scale{display:flex;gap:4px}
html body .gauge-scale i{display:block;width:2px;height:14px;background:var(--steel)}
html body .gauge-track{width:12px;height:116px;border:1px solid var(--steel);position:relative}
html body .gauge-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--amber),var(--hot));transition:height .6s ease}
html body .gauge strong{font-size:1.7rem;line-height:1}
html body .gauge span{color:var(--mute);font-size:12px}
html body .metric-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--amber);font-weight:750}
html body .site-footer{padding:32px 0 40px;background:#0C0609;border-top:1px solid var(--line);color:var(--mute)}
html body .site-footer strong{color:var(--text);font-size:1.05rem}
html body .site-footer p{margin:.35rem 0 0}
html body .tag{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid var(--sakura);color:var(--sakura);border-radius:var(--r2);font-size:12px;letter-spacing:.04em}
html body .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
html body .sort{display:flex;flex-direction:column;gap:6px;color:var(--steel);font-size:13px;min-width:180px}
html body .sort select{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);min-height:42px;padding:0 12px}
html body .sort select:hover,html body .sort select:focus{border-color:var(--hot)}
html body .seg{display:flex;width:min(760px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r10);overflow:hidden;box-shadow:var(--shadow)}
html body .seg button{flex:1;min-height:48px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--steel);cursor:pointer;font-weight:750}
html body .seg button:last-child{border-right:0}
html body .seg button[aria-selected="true"]{background:var(--hot);color:#2A0A10}
html body .seg button:hover{color:var(--text)}
html body .seg button[aria-selected="true"]:hover{color:#2A0A10}
html body .kr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-items:start}
html body .kr-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px 2px 10px 2px;box-shadow:var(--shadow);padding:14px;transition:border-color .2s ease,transform .2s ease}
html body .kr-card:hover{border-color:var(--sakura);transform:translateY(-2px)}
html body .kr-card.is-tall{padding-bottom:22px}
html body .kr-card:nth-child(3n){margin-top:26px}
html body .play-ph{height:92px;border-radius:var(--r2);background:linear-gradient(160deg,#1A0C12,#301821 55%,#12080C);border:1px solid var(--line);position:relative;margin-bottom:12px}
html body .kr-card.is-tall .play-ph{height:128px}
html body .play-ph::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-left:16px solid var(--steel);border-top:10px solid transparent;border-bottom:10px solid transparent;transform:translate(-40%,-50%)}
html body .kr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
html body .kr-card h3 a:hover{color:var(--amber)}
html body .kr-foot{display:flex;justify-content:space-between;align-items:baseline;color:var(--steel);font-size:13px}
html body .heat-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.55rem;color:var(--amber);font-weight:750;line-height:1}
html body .heat-slot{display:block;height:6px;margin-top:10px;background:#12080C;border:1px solid var(--line);position:relative}
html body .heat-slot b{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--amber));width:0}
html body .axis{display:flex;gap:0;overflow-x:auto;padding-bottom:6px}
html body .axis li{flex:1 0 132px;min-height:92px;border-top:2px solid var(--steel);padding:12px 12px 0 0;position:relative}
html body .axis li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;background:var(--hot);border-radius:50%}
html body .axis b{display:block;color:var(--text)}
html body .axis span{color:var(--mute);font-size:14px}
html body .seq{display:flex;align-items:stretch;gap:10px}
html body .seq a,html body .seq span{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:16px;box-shadow:var(--shadow)}
html body .seq a{border-bottom:4px solid var(--hot)}
html body .seq a:hover{border-color:var(--amber)}
html body .seq a strong,.q-row strong,.rec-list a{color:var(--text)}
html body .seq a:hover strong{color:var(--amber)}
html body .q-row{display:grid;grid-template-columns:120px 1fr 72px;gap:12px;align-items:center;margin:0 0 14px}
html body .q-track{height:14px;border:1px solid var(--steel);background:#12080C;position:relative}
html body .q-track i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--hot),var(--amber))}
html body .q-row em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--amber)}
html body .rec-list li{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:11px 0}
html body .rec-list time{color:var(--amber);font-variant-numeric:tabular-nums}
html body .rec-list a:hover{color:var(--sakura)}
html body .more-link{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-bottom:2px solid var(--hot);color:var(--text);font-weight:800}
html body .more-link:hover{color:var(--amber)}
html body .extend{margin:18px 0 8px;display:grid;gap:8px}
html body .extend a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
html body .extend a:hover{border-color:var(--sakura)}
html body .faq{margin-top:22px;display:grid;gap:8px}
html body .faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r10);padding:0 14px}
html body .faq summary{min-height:52px;display:flex;align-items:center;cursor:pointer;font-weight:750;list-style:none}
html body .faq summary::-webkit-details-marker{display:none}
html body .faq details[open]{border-color:var(--hot)}
html body .faq details p{padding-bottom:12px}
html body .list-empty{margin-top:12px;border:1px dashed var(--steel);padding:12px;color:var(--steel)}
html.booting .heat-num{color:transparent;position:relative}
html.booting .heat-num::after{content:"";position:absolute;left:0;right:0;top:.45em;height:8px;background:linear-gradient(90deg,rgba(213,216,222,.15),var(--steel),rgba(213,216,222,.15));background-size:200% 100%;animation:shimmer 1s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (max-width:1023px){
html body .desktop-only{display:none !important}
html body .menu-btn{display:inline-flex;margin-left:auto}
html body .nav-row{min-height:64px}
}
@media (max-width:767px){
html body .band{padding:32px 0}
html body .head-row,html body .seq,html body .q-row,html body .rec-list li{display:flex;flex-direction:column;align-items:stretch}
html body .kr-grid{grid-template-columns:1fr}
html body .kr-card:nth-child(3n){margin-top:0}
html body .sort{min-width:0;width:100%}
html body .seg{flex-direction:column}
html body .seg button{border-right:0;border-bottom:1px solid var(--line)}
html body .container{width:min(1120px,calc(100% - 28px))}
}
@media (min-width:768px) and (max-width:1023px){
html body .kr-grid{grid-template-columns:1fr 1fr}
html body .head-row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
html body .ticker-track,html.booting .heat-num::after{animation:none}
}

/* roulang page: category1 */
:root{--bg:#12080C;--band:#1B1016;--panel:#24141C;--hot:#FF2E4C;--sakura:#FF5C8A;--amber:#FF9F1C;--steel:#D5D8DE;--mute:#B7A8B0;--text:#F6EEF1;--line:rgba(213,216,222,.38);--shadow:0 10px 28px rgba(0,0,0,.32);--r2:2px;--r10:10px}
/* roulang page: category1 */
:root{--bg:#12080C;--band:#1B1016;--panel:#24141C;--hot:#FF2E4C;--sakura:#FF5C8A;--amber:#FF9F1C;--steel:#D5D8DE;--mute:#B7A8B0;--text:#F6EEF1;--line:rgba(213,216,222,.38);--shadow:0 10px 28px rgba(0,0,0,.32);--r2:2px;--r10:10px}
html{scroll-behavior:smooth}
html body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;line-height:1.75;font-size:16px;overflow-x:hidden}
html body h1,html body h2,html body h3,html body p{margin:0}
html body h1{font-size:clamp(1.85rem,3.2vw,2.65rem);line-height:1.28;font-weight:800;letter-spacing:.01em}
html body h2{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35;font-weight:750;margin-bottom:.75rem}
html body h3{font-size:1.08rem;line-height:1.4;font-weight:700}
html body p{margin-bottom:.85rem;color:var(--mute)}
html body a{color:inherit;text-decoration:none}
html body button,html body input,html body select{font:inherit;color:inherit}
html body img{max-width:100%;display:block}
html body ul,html body ol{margin:0;padding:0;list-style:none}
html body [hidden]{display:none !important}
html body ::selection{background:var(--hot);color:#fff}
html body :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
html body .container{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:0}
html body .band{padding:48px 0;scroll-margin-top:112px}
html body .band-b{background:var(--band)}
html body .lead{max-width:760px;color:var(--mute);margin-bottom:1rem}
html body .site-header{position:sticky;top:0;z-index:40;background:#0C0609;border-bottom:1px solid var(--line)}
html body .promo{height:36px;background:#1A0C12;border-bottom:1px solid var(--line);color:var(--steel);font-size:13px}
html body .promo-inner{height:36px;display:flex;align-items:center;gap:12px}
html body .ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
html body .ticker-track{display:inline-flex;gap:28px;min-width:max-content;animation:tick 28s linear infinite}
html body .ticker:hover .ticker-track{animation-play-state:paused}
html body .ticker b{color:var(--amber);font-weight:650}
html body .age-pill{flex:none;border:1px solid var(--steel);color:var(--amber);border-radius:var(--r2);padding:1px 8px;font-size:12px;letter-spacing:.08em}
html body .nav-row{min-height:74px;display:flex;align-items:center;gap:16px}
html body .logo-lock{display:flex;align-items:center;gap:8px;flex:none}
html body .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot)}
html body .logo-text{display:flex;flex-direction:column;line-height:1.2;font-weight:800}
html body .logo-text span:first-child{font-size:15px}
html body .logo-text span:last-child{font-size:13px;color:var(--sakura)}
html body .nav-links{display:flex;align-items:center;gap:16px;flex:none}
html body .nav-links a{padding:8px 0;color:var(--steel);font-weight:650}
html body .nav-links a:hover{color:var(--text)}
html body .nav-links a.is-active{color:var(--text);box-shadow:inset 0 -2px 0 var(--hot)}
html body .search-box{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:4px 4px 4px 12px;position:relative}
html body .search-box:focus-within{border-color:var(--sakura)}
html body .search-box input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:8px 0;color:var(--text)}
html body .search-box input::placeholder{color:var(--mute)}
html body .icon-btn{width:42px;height:42px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--steel);border-radius:var(--r2);cursor:pointer}
html body .icon-btn:hover,html body .icon-btn.is-on{color:var(--hot);border-color:var(--hot)}
html body .btn-hot{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;background:var(--hot);color:#2A0A10;border:0;border-radius:var(--r2);font-weight:800;cursor:pointer;transition:filter .2s ease}
html body .btn-hot::before{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--amber);transition:width .35s ease}
html body .btn-hot:hover::before,html body .btn-hot:focus-visible::before{width:100%}
html body .btn-hot:hover{color:#2A0A10;filter:brightness(1.05)}
html body .btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;background:transparent;color:var(--steel);border:1px solid var(--steel);border-radius:var(--r2);cursor:pointer}
html body .btn-ghost:hover{color:var(--text);border-color:var(--sakura)}
html body .search-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);z-index:20;padding:8px}
html body .search-pop a,html body .empty-line{display:block;padding:8px;color:var(--text)}
html body .search-pop a:hover{background:#301821}
html body .menu-btn{display:none}
html body .overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}
html body .drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);background:#160A10;border-left:1px solid var(--line);z-index:50;transform:translateX(100%);transition:transform .28s ease;padding:18px;overflow:auto}
html body .drawer.is-open{transform:translateX(0)}
html body.lock{overflow:hidden}
html body .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
html body .drawer-nav{display:flex;flex-direction:column;gap:4px;margin:14px 0}
html body .drawer-nav a{padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}
html body .drawer-nav a.is-active{box-shadow:inset -3px 0 0 var(--hot);color:var(--text)}
html body .drawer .search-box{margin-bottom:12px}
html body .metric-num{display:inline-grid;place-items:center;min-width:2.4em;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-weight:800;color:var(--amber);line-height:1}
html body .metric-num b{font-weight:800}
html.js body .metric-num b{visibility:hidden}
html.js body .metric-num.is-on b{visibility:visible}
html body .sk{display:none;width:36px;height:14px;border-radius:var(--r2);background:linear-gradient(90deg,transparent,rgba(213,216,222,.45),transparent);background-size:200% 100%;animation:shine 1.1s linear infinite}
html.js body .metric-num .sk{display:block;grid-area:1/1}
html.js body .metric-num.is-on .sk{display:none}
html body .site-footer{background:#0C0609;border-top:1px solid var(--line);padding:28px 0 36px;color:var(--mute)}
html body .site-footer strong{color:var(--text);font-size:16px}
html body .site-footer p{margin:.35rem 0;color:var(--mute);font-size:13px}
html body .narrow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
html body .kicker{color:var(--sakura);font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:8px}
html body .subline{color:var(--mute);margin-top:8px}
html body .sort-box{display:flex;align-items:center;gap:8px;color:var(--steel);font-size:13px;flex:none}
html body .sort-box select{appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D5D8DE' fill='none'/%3E%3C/svg%3E") right 10px center no-repeat;border:1px solid var(--line);border-radius:var(--r2);min-height:42px;padding:0 32px 0 12px;color:var(--text);cursor:pointer}
html body .sort-box select:hover,html body .sort-box select:focus{border-color:var(--sakura)}
html body .filter-board{background:var(--panel);border:1px solid var(--line);border-radius:10px 2px;box-shadow:var(--shadow);padding:16px 16px 8px}
html body .chip-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
html body .chip-line em{font-style:normal;color:var(--steel);min-width:4.5em;font-size:13px}
html body .chip{min-height:34px;padding:0 12px;border:1px solid var(--line);background:transparent;color:var(--steel);border-radius:var(--r2);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
html body .chip:hover{border-color:var(--sakura);color:var(--text)}
html body .chip[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);color:#2A0A10;font-weight:800}
html body .wide-list{display:flex;flex-direction:column;gap:12px}
html body .wide-card{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px 2px 10px 2px;box-shadow:var(--shadow);padding:14px 16px;transition:border-color .2s ease,transform .2s ease}
html body .wide-card:hover{border-color:var(--sakura);transform:translateY(-2px)}
html body .idx{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;border-right:1px solid var(--line);color:var(--steel);font-size:12px}
html body .idx .metric-num{font-size:1.45rem}
html body .card-mid{min-width:0}
html body .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
html body .tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--sakura);color:var(--sakura);border-radius:var(--r2);font-size:12px}
html body .card-mid h3{margin-bottom:4px}
html body .card-mid a:hover{color:var(--hot)}
html body .card-mid p{margin:0;font-size:14px}
html body .dur{text-align:right;min-width:92px}
html body .dur b{display:block;font-family:ui-monospace,Consolas,monospace;font-size:1.15rem;color:var(--text)}
html body .dur span{color:var(--mute);font-size:12px}
html body .placeholder{height:8px;margin-top:8px;border-radius:var(--r2);background:#1A0E14;border:1px solid var(--line);position:relative;overflow:hidden}
html body .placeholder i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hot),var(--amber))}
html body .wide-card:hover .placeholder i{width:100%;transition:width .45s ease}
html body .empty-line{border:1px dashed var(--line);border-radius:var(--r2);color:var(--mute);padding:14px}
html body .heat-panel{background:var(--panel);border:1px solid var(--line);border-radius:2px 10px;padding:18px;box-shadow:var(--shadow)}
html body .hbar{display:grid;grid-template-columns:92px 1fr 48px;gap:12px;align-items:center;margin:12px 0;color:var(--steel);font-size:14px}
html body .track{height:10px;background:#14090E;border:1px solid var(--steel);border-radius:var(--r2);overflow:hidden}
html body .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hot),var(--amber));transition:width .6s ease}
html body .fill.soft{background:var(--sakura)}
html body .hbar strong{font-family:ui-monospace,Consolas,monospace;color:var(--amber);text-align:right}
html body .duo{display:grid;grid-template-columns:1fr;gap:14px}
html body .slot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r10);padding:16px 16px 12px;box-shadow:var(--shadow)}
html body .slot header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
html body .slot header span{color:var(--amber);font-family:ui-monospace,Consolas,monospace;font-size:1.3rem}
html body .reco-list a{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text)}
html body .reco-list a:hover{color:var(--hot)}
html body .reco-list time{color:var(--steel);font-size:13px}
html body .reco-list small{color:var(--mute)}
html body .note-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--mute)}
html body .note-row b{color:var(--text)}
html body .more-row{display:flex;justify-content:flex-start;margin:8px 0 22px}
html body .extend{margin-bottom:8px}
html body .extend li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--mute)}
html body .extend a{color:var(--text);font-weight:700}
html body .extend a:hover{color:var(--hot)}
html body .faq-list{display:flex;flex-direction:column;gap:8px}
html body details.faq{background:var(--panel);border:1px solid var(--line);border-radius:2px 10px;box-shadow:var(--shadow)}
html body details.faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:750;display:flex;justify-content:space-between;gap:12px}
html body details.faq summary::-webkit-details-marker{display:none}
html body details.faq summary::after{content:"＋";color:var(--hot);font-weight:800}
html body details.faq[open] summary::after{content:"－"}
html body details.faq[open]{border-color:var(--sakura)}
html body details.faq p{padding:0 16px 14px;margin:0}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shine{from{background-position:100% 0}to{background-position:-100% 0}}
@media (min-width:768px){
  html body .duo{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  html body .desktop-only{display:none !important}
  html body .menu-btn{display:inline-flex}
  html body .nav-row{min-height:64px}
}
@media (max-width:767px){
  html body .band{padding:32px 0}
  html body .container{width:min(1120px,calc(100% - 28px))}
  html body .narrow-head{flex-direction:column;align-items:stretch}
  html body .wide-card{grid-template-columns:64px minmax(0,1fr)}
  html body .dur{grid-column:2;text-align:left;min-width:0}
  html body .idx{border-right:0;border-bottom:1px solid var(--line);min-height:56px}
  html body .hbar{grid-template-columns:72px 1fr 40px;gap:8px}
  html body .reco-list a{grid-template-columns:72px minmax(0,1fr)}
  html body .reco-list small{display:none}
  html body .promo{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html body .ticker-track,html body .sk,html body .fill{animation:none;transition:none}
}