:root{--bg:#0d0d0f;--bg-deep:#08080b;--panel:#131318;--panel-2:#17171f;--line:#26262f;--line-2:#34343f;--ink:#eeeff6;--sub:#a9abc0;--dim:#6e7086;--magenta:#d633ff;--purple:#8b3ff0;--indigo:#4f6ef7;--cyan:#38b6ff;--red:#f5455c;--green:#46e08a;--grad:linear-gradient(135deg,#d633ff,#8b3ff0 52%,#4f6ef7);--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace}
html,body{margin:0;padding:0;background:var(--bg-deep)}
.page{background:radial-gradient(900px 520px at 12% -6%,rgba(214,51,255,.09),transparent 62%),radial-gradient(820px 480px at 90% 6%,rgba(79,110,247,.09),transparent 64%),var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;min-height:100vh}
.page *{box-sizing:border-box}
.page :where(button){padding:0;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.page img{display:block;max-width:100%;height:auto}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.main{overflow-x:clip}
.code{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:4px;color:#cf7bff;text-transform:uppercase;margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.link{color:#c9a0ff;text-decoration:none;border-bottom:1px dashed rgba(201,160,255,.45);padding-bottom:2px;transition:color .25s}
.link:hover{color:#ecb3ff;border-bottom-color:#ecb3ff}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:12px;border:1.5px solid transparent;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(135deg,#d633fff2,#8b3ff0f2 52%,#4f6ef7f2) border-box;color:#f6ebff;font-size:16px;font-weight:800;letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 20px #d633ff1f;transition:background .3s,color .3s,box-shadow .3s,transform .2s}
.btn:hover{background:var(--grad);color:#0b0b10;box-shadow:0 0 26px #a855f780,inset 0 0 #0000;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(135deg,#4f6ef7e6,#38b6ffe6) border-box;color:#dfe9ff;box-shadow:inset 0 0 20px #4f6ef724}
.btn-ghost:hover{background:linear-gradient(135deg,#4f6ef7,#38b6ff);color:#0b0b14;box-shadow:0 0 26px #4f6ef780}
.btn-sm{padding:9px 18px;font-size:14px;border-radius:10px}
.play-glyph{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;flex:none}
.top{position:sticky;top:0;z-index:60;background:#0d0d0ff7}
.top-stripe{height:5px;background:repeating-linear-gradient(115deg,#d633ff 0 16px,#8b3ff0 16px 32px,#4f6ef7 32px 48px)}
.top-bar{width:min(1280px,96vw);margin-inline:auto;display:flex;align-items:center;gap:22px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{width:46px;height:46px;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 0 16px #8b3ff047;flex:none;display:flex;align-items:center;justify-content:center;background:#131318}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt strong{font-size:19px;font-weight:900;letter-spacing:.05em}
.brand-txt small{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:3px;color:var(--dim)}
.nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:6px}
.nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;text-decoration:none;color:var(--sub);font-size:14.5px;font-weight:600;transition:color .25s,background .25s}
.nav a:before{content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--line-2);transition:border-left-color .25s,transform .25s;flex:none}
.nav a:hover{color:#f2e6ff;background:#8b3ff01f}
.nav a:hover:before{border-left-color:var(--magenta);transform:translate(2px)}
.top-cta{flex:none}
.hero{padding:64px 0 78px;border-bottom:1px solid rgba(255,255,255,.05)}
.hero-grid{display:grid;grid-template-columns:148px minmax(0,1fr) 212px;gap:24px;align-items:center}
.camcol{display:flex;flex-direction:column;gap:18px}
.cam{position:relative;margin:0;border-radius:14px;padding:6px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);box-shadow:0 12px 30px #0006}
.cam-screen{position:relative;aspect-ratio:3 / 4;border-radius:9px;overflow:hidden;border:1px solid var(--line-2);background:#0a0a0e}
.cam-screen img{width:100%;height:100%;object-fit:cover}
.cam-screen:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(238,238,246,.03) 0 1px,transparent 1px 4px);pointer-events:none}
.cam-tag{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;color:#e9dcff;background:#0a0a0eb8;border:1px solid rgba(180,120,255,.4);padding:2px 7px;border-radius:5px}
.rec{position:absolute;top:10px;right:10px;z-index:2;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px #f5455ccc;animation:blink 1.7s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}
.mon-frame{padding:12px;border-radius:24px;background:linear-gradient(180deg,#17171f,#121218);border:1px solid var(--line);box-shadow:0 26px 70px #0000008c,inset 0 0 0 1px #ffffff05}
.mon-screen{position:relative;border-radius:15px;border:1px solid var(--line-2);overflow:hidden;padding:46px clamp(24px,4vw,56px) 30px;text-align:center;background:radial-gradient(560px 300px at 50% -12%,rgba(139,63,240,.16),transparent 68%),#0a0a0e}
.mon-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.42));pointer-events:none}
.mon-screen:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(238,238,246,.026) 0 1px,transparent 1px 4px);pointer-events:none}
.corner{position:absolute;width:18px;height:18px;z-index:2}
.corner.tl{top:12px;left:12px;border-top:2px solid #b06bff;border-left:2px solid #b06bff}
.corner.tr{top:12px;right:12px;border-top:2px solid #6f8dff;border-right:2px solid #6f8dff}
.corner.bl{bottom:12px;left:12px;border-bottom:2px solid #6f8dff;border-left:2px solid #6f8dff}
.corner.br{bottom:12px;right:12px;border-bottom:2px solid #b06bff;border-right:2px solid #b06bff}
.mon-rec{position:absolute;top:16px;right:44px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2.5px;color:#ff96a6}
.mon-rec:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px #f5455cd9;animation:blink 1.7s steps(2,start) infinite}
.hero-badge{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 16px;border-radius:999px;border:1px solid rgba(180,120,255,.38);background:#8b3ff01a;font-size:13.5px;font-weight:600;color:#d9c8f2}
.hero-badge .play-glyph{border-left-color:#cf7bff}
.h1{margin:0;font-size:clamp(46px,6.6vw,82px);font-weight:900;letter-spacing:.06em;line-height:1.12;color:#ecd9ff;background:linear-gradient(118deg,#e879f9 8%,#a78bfa,#60a5fa 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 26px rgba(168,85,247,.32))}
.h1-sub{display:block;margin-top:12px;font-size:clamp(15px,1.8vw,19px);font-weight:600;letter-spacing:.08em;color:var(--sub);-webkit-text-fill-color:var(--sub)}
.h1-sub b{font-weight:800;color:#ddc2ff;-webkit-text-fill-color:#ddc2ff}
.lead{max-width:640px;margin:20px auto 0;color:var(--sub);font-size:15.5px;text-align:center}
.lead2{margin-top:10px;font-size:14px;color:var(--dim)}
.hero-cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:660px;margin:30px auto 0;padding:0}
.stats>div{padding:12px 8px 10px;border-radius:10px;border:1px solid var(--line);background:#131318b8}
.stats dt{font-size:12.5px;color:var(--dim);letter-spacing:.06em;margin:0}
.stats dd{margin:4px 0 0;font-size:22px;font-weight:800;color:#e6d9ff}
.signal{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin-top:24px;height:16px}
.signal i{width:6px;border-radius:2px;background:#2a2a36}
.signal i:nth-child(1){height:5px}
.signal i:nth-child(2){height:8px}
.signal i:nth-child(3){height:11px}
.signal i:nth-child(4){height:14px;background:linear-gradient(180deg,#a06bff,#4f6ef7)}
.signal i:nth-child(5){height:16px;background:linear-gradient(180deg,#d633ff,#4f6ef7);box-shadow:0 0 8px #a855f78c}
.signal-live{align-self:center;margin-left:10px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:3px;color:#cf7bff}
.sidecol{display:flex;flex-direction:column;gap:18px}
.datamon{border-radius:14px;padding:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);box-shadow:0 12px 30px #00000061}
.datamon-tag{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:2.5px;color:var(--dim);display:flex;align-items:center;gap:8px}
.datamon-tag:before{content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #8f66d8}
.datamon dl{margin:0;display:grid;gap:8px}
.datamon .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(255,255,255,.07);padding-bottom:7px}
.datamon .row:last-child{border-bottom:0;padding-bottom:0}
.datamon dt{font-size:12.5px;color:var(--sub)}
.datamon dd{margin:0;font-size:15px;font-weight:800;color:#e6d9ff}
.sec{padding:72px 0;border-top:1px solid rgba(255,255,255,.045)}
.sec-alt{background:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 10px),#0b0b0e}
.head{margin-bottom:34px;max-width:780px}
.head h2{margin:12px 0 0;font-size:clamp(25px,3.2vw,37px);font-weight:900;line-height:1.32;letter-spacing:.02em;color:#ece7f7;background:linear-gradient(115deg,#f3d9ff 4%,#ddc9f6 46%,#c3d0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.note{margin:12px 0 0;color:var(--sub);font-size:15px}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{border-radius:16px;padding:8px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);box-shadow:0 10px 26px #00000059;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:#b44df099;box-shadow:0 16px 36px #00000073,0 0 22px #a855f724}
.card-strip{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 4px 8px;min-height:22px}
.chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#e4d4fa;background:#8b3ff029;border:1px solid rgba(180,120,255,.32);white-space:nowrap}
.chip-indigo{color:#d6e2ff;background:#4f6ef726;border-color:#7891ff57}
.chip-mod{color:#0d0d12;background:var(--grad);border-color:transparent}
.card-strip .num{font-size:11.5px;color:var(--dim);white-space:nowrap}
.card-screen{position:relative;margin:0;aspect-ratio:3 / 4;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:#0a0a0e}
.card-screen img{width:100%;height:100%;object-fit:cover;transition:filter .3s,transform .3s}
.card-screen:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(238,238,246,.026) 0 1px,transparent 1px 4px);pointer-events:none}
.card:hover .card-screen img{filter:brightness(1.09) saturate(1.06);transform:scale(1.02)}
.card-camno{position:absolute;right:8px;bottom:8px;z-index:2;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:#e9dcffcc;background:#0a0a0ea8;padding:2px 6px;border-radius:4px}
.card-cap{padding:10px 6px 6px}
.card-cap h3{margin:0;font-size:15.5px;font-weight:800;line-height:1.4;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-state{display:flex;align-items:center;gap:7px;margin:7px 0 0;font-size:12.5px;color:var(--sub)}
.led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px #46e08ab3;flex:none}
.card-state[data-on="0"] .led{background:#8fa4ff;box-shadow:0 0 8px #8fa4ff8c}
.card-done{display:flex;align-items:center;gap:7px;margin:7px 0 0;font-size:12.5px;color:var(--sub)}
.card-done .led{background:var(--cyan);box-shadow:0 0 8px #38b6ff99}
.card-desc{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nextlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.next{border-radius:16px;padding:10px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);transition:transform .25s,border-color .25s}
.next:hover{transform:translateY(-4px);border-color:#7891ff8c}
.next-cap{padding:12px 6px 4px}
.next-cap h3{margin:0;font-size:17px;font-weight:800}
.next-date{margin:6px 0 0;font-size:13.5px;font-weight:700;color:#c9b4ee}
.next-track{margin-top:10px;height:9px;border-radius:5px;background:#1d1d27;border:1px solid var(--line);overflow:hidden}
.next-track i{display:block;height:100%;width:var(--ready,50%);border-radius:4px;background:var(--grad);box-shadow:0 0 10px #a855f780}
.next-meta{margin:8px 0 0;font-size:12.5px;color:var(--dim)}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rank>li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 130px 62px 30px;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.rank>li:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:#2c2c38}
.rank>li.is-top:before{background:var(--grad);box-shadow:0 0 10px #a855f78c}
.rank-no{font-size:20px;font-weight:800;color:#8f6bd6;text-align:center}
.rank>li.is-top .rank-no{color:#d9b8ff}
.rank-main h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rank-main p{margin:3px 0 0;font-size:12.5px;color:var(--dim)}
.rbar{height:6px;border-radius:3px;background:#1d1d27;overflow:hidden}
.rbar i{display:block;height:100%;width:var(--heat,90%);border-radius:3px;background:var(--grad);box-shadow:0 0 8px #a855f773}
.rank-val{font-size:15px;font-weight:800;color:#e6d9ff;text-align:right}
.rank-trend{font-size:15px;font-weight:800;text-align:center;color:var(--dim)}
.rank-trend[data-trend=up]{color:#46e08a}
.rank-trend[data-trend=down]{color:var(--red)}
.steps{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step{position:relative;padding:18px 20px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.step-no{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:3px;color:#cf7bff}
.step h3{margin:8px 0 0;font-size:17px;font-weight:800}
.step p{margin:8px 0 0;font-size:14px;color:var(--sub)}
.duolist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.duo{border-radius:16px;padding:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);transition:border-color .25s,transform .25s}
.duo:hover{border-color:#b44df08c;transform:translateY(-3px)}
.duo-screens{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:8px}
.duo-fig{position:relative;margin:0;aspect-ratio:3 / 4;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:#0a0a0e}
.duo-fig img{width:100%;height:100%;object-fit:cover}
.duo-fig:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(238,238,246,.026) 0 1px,transparent 1px 4px);pointer-events:none}
.duo-fig .duo-label{position:absolute;top:8px;left:8px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:6px;color:#c6c9d8;background:#0a0a0eb8;border:1px solid var(--line-2)}
.duo-fig.is-mod{border-color:#b44df09e;box-shadow:0 0 18px #a855f72e}
.duo-fig.is-mod .duo-label{color:#0d0d12;background:var(--grad);border-color:transparent}
.duo-arrow{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:16px solid;border-left-color:#9d5cf0;filter:drop-shadow(0 0 6px rgba(157,92,240,.65));margin-inline:auto}
.duo-cap{padding:12px 6px 4px}
.duo-cap h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.duo-cap .num{display:block;margin:5px 0 0;font-size:12.5px;color:var(--dim)}
.duo-gain{margin:6px 0 0;font-size:13.5px;color:#cbb6ec}
.extra-lead{max-width:860px;margin:0 0 24px;color:var(--sub);font-size:15.5px}
.grid3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rail{position:relative;padding:20px 20px 20px 28px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.rail:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--grad);box-shadow:0 0 10px #a855f780}
.rail h3{margin:0;font-size:17px;font-weight:800}
.rail p{margin:9px 0 0;font-size:14px;color:var(--sub)}
.extra-note{margin:20px 0 0;font-size:13.5px;color:var(--dim)}
.watch-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:start}
.points{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.points li{display:flex;gap:14px;align-items:flex-start}
.points .play-glyph{margin-top:8px;border-left-color:#a06bff;flex:none}
.points h3{margin:0;font-size:17px;font-weight:800}
.points p{margin:6px 0 0;font-size:14px;color:var(--sub)}
.gates{position:relative;border-radius:16px;padding:22px;border:1px solid var(--line);background:var(--panel)}
.gates-cap{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:3px;color:var(--dim);display:flex;align-items:center;justify-content:space-between;gap:10px}
.gates-cap span{color:#b9a2e6}
.os{padding:16px;border-radius:12px;border:1px solid var(--line-2);background:#101016}
.os+.os{margin-top:12px}
.os h3{margin:0;display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:800}
.os h3 small{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:2.5px;color:#cf7bff}
.os p{margin:7px 0 0;font-size:13.5px;color:var(--sub)}
.install{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.install li{position:relative;padding:18px 18px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.install li:after{content:"";position:absolute;right:-18px;top:-18px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.16),transparent 70%)}
.install-no{font-family:var(--mono);font-size:26px;font-weight:800;background:linear-gradient(120deg,#e879f9,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.install h3{margin:6px 0 0;font-size:16px;font-weight:800}
.install p{margin:7px 0 0;font-size:13.5px;color:var(--sub)}
.genres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gcell{padding:16px 18px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);transition:border-color .25s,transform .25s}
.gcell:hover{border-color:#7891ff80;transform:translateY(-3px)}
.gcell-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gcell-head h3{margin:0;font-size:16px;font-weight:800}
.chip-new{display:inline-flex;padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:800;color:#0d0d12;background:var(--grad);white-space:nowrap}
.gcell .num{margin:6px 0 0;font-size:13px;color:var(--sub)}
.dias{display:flex;gap:7px;margin-top:10px}
.dias i{width:8px;height:8px;transform:rotate(45deg);border-radius:2px;background:#22222c;flex:none}
.dias i.is-on{background:#b45cf7;box-shadow:0 0 8px #b45cf78c}
.rev{display:grid;grid-template-columns:290px minmax(0,1fr);gap:26px;align-items:start}
.score{border-radius:16px;padding:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);text-align:center}
.score-screen{position:relative;border-radius:10px;border:1px solid var(--line-2);background:#0a0a0e;padding:26px 16px 20px;overflow:hidden}
.score-screen:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(238,238,246,.026) 0 1px,transparent 1px 4px);pointer-events:none}
.score-num{margin:0;font-size:56px;font-weight:900;line-height:1;background:linear-gradient(118deg,#e879f9,#a78bfa 52%,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rate{display:inline-flex;gap:5px;margin-top:12px}
.rate i{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #2a2a36}
.rate i.is-on{border-left-color:#b45cf7;filter:drop-shadow(0 0 4px rgba(180,92,247,.6))}
.score p{margin:10px 0 0;font-size:12.5px;color:var(--dim)}
.quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quotes li{padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.quotes blockquote{margin:0;font-size:14px;color:var(--ink)}
.quotes blockquote:before{content:"「";color:#a06bff;font-weight:800}
.quotes blockquote:after{content:"」";color:#6f8dff;font-weight:800}
.quote-meta{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:12.5px;color:var(--dim)}
.quote-meta b{color:#cbb6ec}
.about{max-width:880px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}
.about p{color:var(--sub);font-size:15px}
.faqs{display:grid;gap:12px}
.faq{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.faq[open]{border-color:#b44df080}
.faq summary{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;align-items:center;gap:8px;padding:15px 16px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq-no{font-family:var(--mono);font-size:13px;font-weight:800;color:#cf7bff}
.faq summary h3{margin:0;font-size:15.5px;font-weight:800}
.faq-x{position:relative;width:16px;height:16px;justify-self:center}
.faq-x:before,.faq-x:after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;border-radius:1px;background:#8f6bd6;transition:transform .25s}
.faq-x:after{transform:rotate(90deg)}
.faq[open] .faq-x:after{transform:rotate(0)}
.faq-a{margin:0;padding:0 16px 16px 68px;color:var(--sub);font-size:14.5px}
.faq-more{display:flex;align-items:baseline;gap:12px;margin:20px 0 0;font-size:13.5px;color:var(--dim);flex-wrap:wrap}
.dl{padding:72px 0 84px;border-top:1px solid rgba(255,255,255,.045);background:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 10px),#0b0b0e}
.slate{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:0 0 30px;padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase}
.slate b{color:#cf7bff;font-weight:700}
.duo-dl{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:12px;align-items:center;max-width:880px;margin:0 auto}
.dlcard{position:relative;border-radius:16px;padding:22px 24px;border:1.5px solid transparent;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(135deg,#d633ff8c,#8b3ff08c 52%,#4f6ef78c) border-box;box-shadow:0 14px 34px #0006}
.dlcard.is-and{transform:translateY(-14px)}
.dlcard.is-ios{transform:translateY(14px);background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(135deg,#4f6ef799,#38b6ff8c) border-box}
.dlcard-cap{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2.5px;color:#cf9bff;text-transform:uppercase}
.dlcard-cap .led{background:#b45cf7;box-shadow:0 0 8px #b45cf799}
.dlcard.is-ios .dlcard-cap{color:#8fb0ff}
.dlcard.is-ios .dlcard-cap .led{background:#6f9dff;box-shadow:0 0 8px #6f9dff99}
.dlcard-body{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dlcard-body>p{margin:0;font-size:14px;color:var(--sub);max-width:240px}
.dl-mark{width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(180,120,255,.4);display:flex;align-items:center;justify-content:center;background:#131318cc;justify-self:center}
.dl-mark i{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:20px solid;border-left-color:#a06bff;filter:drop-shadow(0 0 8px rgba(160,107,255,.7))}
.dl-spec{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:880px;margin:34px auto 0;padding:0}
.dl-spec li{padding:12px 14px;border-radius:10px;border:1px dashed var(--line-2);background:#13131899;font-size:12.5px;color:var(--sub);display:grid;gap:3px;text-align:center}
.dl-spec b{color:#cbb6ec;letter-spacing:.08em}
.dl-note{max-width:880px;margin:18px auto 0;text-align:center;font-size:13.5px;color:var(--dim)}
.float{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0d0d0ff5;border-top:2px solid;border-image:var(--grad) 1;backdrop-filter:blur(8px)}
.float-txt{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.float-txt b{font-size:14.5px}
.float-txt span{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft{position:relative;background:var(--bg-deep);border-top:1px solid rgba(255,255,255,.05);padding:54px 0 34px;text-align:center}
.ft:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);opacity:.85}
.ft-fin{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 26px;font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:6px;color:#b78bff}
.ft-fin i{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid;border-left-color:#a06bff;filter:drop-shadow(0 0 6px rgba(160,107,255,.7))}
.ft-fin span{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--dim)}
.ft-row{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 16px}
.ft-role{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;color:#8f6bd6;border:1px solid var(--line-2);border-radius:4px;padding:2px 7px;flex:none}
.ft-row a{color:var(--sub);text-decoration:none;font-size:13.5px;transition:color .25s}
.ft-row a:hover{color:#e4c8ff}
.ft-desc{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px 0 0;font-size:13px;color:var(--sub);max-width:720px;margin-inline:auto}
.ft-desc img{width:30px;height:30px;border-radius:7px;object-fit:contain;border:1px solid var(--line-2);flex:none;background:#131318}
.ft-meta{margin:16px 0 0;font-size:12.5px;color:var(--dim);display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap}
.ft-meta a{color:var(--dim);text-decoration:none;transition:color .25s}
.ft-meta a:hover{color:var(--sub)}
.ft-meta b{color:var(--sub);font-weight:600}
.ft-notice{margin:18px 0 0;font-size:12.5px;color:var(--dim)}
.ft-notice b{color:#c9b4ee;font-weight:700;margin-right:10px}
@media(max-width:1024px){.hero-grid{grid-template-columns:138px minmax(0,1fr)}
.sidecol{display:none}
.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
.install{grid-template-columns:repeat(2,minmax(0,1fr))}
.genres{grid-template-columns:repeat(3,minmax(0,1fr))}
.duolist{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.hero{padding-top:40px}
.hero-grid{grid-template-columns:minmax(0,1fr)}
.mainmon{order:-1}
.camcol{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.cam{flex:0 0 108px}
.top-bar{flex-wrap:wrap;row-gap:8px}
.nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.top-cta{margin-left:auto}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.nextlist{grid-template-columns:minmax(0,1fr)}
.rank>li{grid-template-columns:34px minmax(0,1fr) 34px;grid-template-areas:"no main trend" ". bar bar" ". val val";row-gap:8px;padding:12px 14px}
.rank-no{grid-area:no}
.rank-main{grid-area:main}
.rbar{grid-area:bar}
.rank-val{grid-area:val;text-align:left}
.rank-trend{grid-area:trend}
.steps,.grid3,.watch-grid,.install{grid-template-columns:minmax(0,1fr)}
.genres{grid-template-columns:repeat(2,minmax(0,1fr))}
.rev,.quotes{grid-template-columns:minmax(0,1fr)}
.duo-dl{grid-template-columns:minmax(0,1fr);gap:20px}
.dlcard.is-and,.dlcard.is-ios{transform:none}
.dl-mark{display:none}
.dl-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
.float{display:flex}
.sec{padding:56px 0}
.faq-a{padding-left:16px}}
@media(max-width:620px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-cta .btn{width:100%}
.brand-txt small{display:none}
.quotes{grid-template-columns:minmax(0,1fr)}
.faq summary{grid-template-columns:34px minmax(0,1fr) 24px}}
@media(prefers-reduced-motion:reduce){.page *,.page *:before,.page *:after{animation:none!important;transition:none!important}}