*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #070B14; --surface: #101827; --surface2: #162033; --border: #1E2D47; --border2: #243149; --text: #EAF0FF; --muted: #9AA7BD; --dim: #576880; --cyan: #38BDF8; --violet: #A78BFA; --green: #22C55E; --amber: #F59E0B; --red: #EF4444; --lime: #84CC16; --nav-bg: #0D1525; --footer-bg: #060C18; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } .nav { background: var(--nav-bg); border-bottom: 1px solid var(--border); padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .nav-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .nav-logo { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700; color: var(--cyan); letter-spacing: 0.4px; display: flex; align-items: center; gap: 7px; cursor: pointer; } .nav-logo i { font-size: 18px; } .nav-links { display: flex; gap: 2px; } .nav-link { font-size: 11px; color: var(--muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: color .15s, background .15s; font-weight: 500; } .nav-link:hover { color: var(--text); background: var(--surface2); } .nav-link.active { color: var(--cyan); background: var(--surface2); } .nav-right { display: flex; align-items: center; gap: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-search-form { width: 184px; height: 30px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; display: grid; grid-template-columns: 1fr 30px; align-items: center; overflow: hidden; transition: border-color .15s, background .15s, box-shadow .15s; } .nav-search-form:focus-within { border-color: rgba(56,189,248,0.58); background: var(--surface); box-shadow: 0 0 0 2px rgba(56,189,248,0.08); } .nav-search-input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; padding: 0 8px 0 10px; } .nav-search-input::placeholder { color: var(--dim); } .nav-search-btn { width: 30px; height: 30px; border: 0; border-left: 1px solid rgba(36,49,73,0.72); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: color .15s, background .15s; } .nav-search-btn:hover { color: var(--cyan); background: rgba(56,189,248,0.06); } .page-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; padding: 20px 0 0; align-items: start; } .main-col { min-width: 0; } .breadcrumb { font-size: 11px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .breadcrumb i { font-size: 10px; color: var(--border2); } .breadcrumb a { color: var(--muted); transition: color .15s; } .breadcrumb a:hover { color: var(--cyan); } .breadcrumb-cur { color: var(--cyan); } .art-type-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .type-badge { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 5px; letter-spacing: 0.4px; text-transform: uppercase; border: 1px solid; display: inline-flex; align-items: center; gap: 4px; } .tb-codes { color: var(--green); background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); } .tb-live { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.25); } .tb-guide { color: var(--violet); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.25); } .tb-patch { color: var(--amber); background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); } .tb-news { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.25); } .tb-review { color: var(--red); background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); } .art-title { font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 700; color: #F0F6FF; line-height: 1.25; margin-bottom: 3px; } .art-subline { font-size: 11px; color: var(--muted); font-weight: 500; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.35; } .art-subline a { color: var(--muted); font-weight: 500; transition: color .15s; } .art-subline a:hover { color: var(--cyan); } .art-subline .sub-dot { color: var(--dim); } .genre-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--muted); background: var(--nav-bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; transition: color .15s, border-color .15s, background .15s; } .genre-pill:hover { border-color: currentColor; filter: brightness(1.12); text-decoration: none; } .genre-pill-open { color: var(--green); background: rgba(34,197,94,.07); border-color: rgba(34,197,94,.24); } .genre-pill-rpg { color: var(--violet); background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.24); } .genre-pill-gacha { color: var(--amber); background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.24); } .genre-pill-anime { color: #F472B6; background: rgba(244,114,182,.07); border-color: rgba(244,114,182,.24); } .model-link { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 8px; border: 1px solid currentColor; transition: filter .15s, background .15s; } .model-link:hover { filter: brightness(1.12); text-decoration: none; } .model-free { color: var(--lime); background: rgba(132,204,22,.08); border-color: rgba(132,204,22,.25); } .model-iap { color: var(--violet); background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.25); } .model-paid { color: var(--amber); background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); } .model-sep { color: var(--dim); padding: 0 4px; font-weight: 600; } .status-link { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 8px; border: 1px solid currentColor; transition: filter .15s, background .15s; } .status-link:hover { filter: brightness(1.12); text-decoration: none; } .status-released { color: var(--cyan); background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.25); } .status-upcoming { color: var(--amber); background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); } .table-pill-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .platform-link-row { margin-top: 10px; gap: 6px; } .art-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11px; color: var(--muted); } .art-meta i { font-size: 12px; } .art-meta a { color: #C8D8EC; font-weight: 600; transition: color .15s; } .art-meta a:hover { color: var(--cyan); } .meta-sep { color: var(--border2); } .plat-row { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; } .plat-pill { font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 5px; border: 1px solid; display: inline-flex; align-items: center; transition: color .15s, border-color .15s, background .15s; } a.plat-pill:hover { border-color: currentColor; filter: brightness(1.12); } .pp-pc { color: var(--cyan); background: rgba(56,189,248,0.07); border-color: rgba(56,189,248,0.22); } .pp-android { color: var(--lime); background: rgba(132,204,22,0.07); border-color: rgba(132,204,22,0.22); } .pp-ios { color: #F472B6; background: rgba(244,114,182,0.07); border-color: rgba(244,114,182,0.22); } .pp-ps { color: #6EA8FE; background: rgba(110,168,254,0.07); border-color: rgba(110,168,254,0.22); } .pp-xb { color: #4ADE80; background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.22); } .pp-mb { color: var(--violet); background: rgba(167,139,250,0.07); border-color: rgba(167,139,250,0.22); } .pp-mac { color: var(--violet); background: rgba(167,139,250,0.07); border-color: rgba(167,139,250,0.22); } .pp-switch { color: var(--red); background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.22); } .pp-cloud { color: var(--cyan); background: rgba(56,189,248,0.07); border-color: rgba(56,189,248,0.22); } .pp-other { color: var(--text); background: rgba(234,240,255,0.06); border-color: rgba(234,240,255,0.20); } .tax-link { font-weight: 600; transition: color .15s, filter .15s; } .tax-link:hover { color: var(--tax-color) !important; filter: brightness(1.18); } .tax-pill { color: var(--tax-color) !important; background: rgba(var(--tax-rgb), .08) !important; border-color: rgba(var(--tax-rgb), .28) !important; } .tax-pill:hover { border-color: var(--tax-color) !important; filter: brightness(1.14); } .hero-img { width: 100%; min-height: 300px; aspect-ratio: 16 / 9; height: auto; background-color: #0D1E38; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 14px; display: flex; align-items: flex-end; padding: 14px; position: relative; overflow: hidden; box-shadow: 0 14px 32px rgba(2, 6, 23, 0.24); } .hero-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); pointer-events: none; } .hero-img-art { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: none; } .hero-label { font-size: 10px; color: #F8FAFC; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(7,11,20,0.72); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); } .qi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; } .qi-card-head { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .qi-card-head i { font-size: 12px; color: var(--cyan); } .qi-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; } .qi-stat { background: var(--nav-bg); border: 1px solid var(--surface2); border-radius: 8px; padding: 8px 9px; min-width: 0; } .qi-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; white-space: nowrap; } .qi-val { font-size: 12px; color: #C8D8EC; font-weight: 600; line-height: 1.35; } .qi-val.green { color: var(--green); } .qi-val.amber { color: var(--amber); } .qi-val.cyan { color: var(--cyan); } .qi-platforms, .qi-credit { background: rgba(13,21,37,0.58); border: 1px solid var(--surface2); border-radius: 8px; padding: 9px 10px; } .qi-platforms { margin-bottom: 8px; } .qi-genres { background: rgba(13,21,37,0.58); border: 1px solid var(--surface2); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; } .qi-platform-pills, .qi-genre-pills { display: flex; flex-wrap: wrap; gap: 5px; } .qi-credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .qi-credit .qi-label { margin-bottom: 0; } .qi-credit .qi-val { text-align: right; } .toc-card { background: var(--nav-bg); border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 13px; margin-bottom: 12px; position: relative; } .toc-head { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .toc-head i { font-size: 12px; color: var(--cyan); } .toc-list { max-height: 178px; overflow-y: auto; padding-right: 4px; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .toc-list::-webkit-scrollbar { width: 5px; } .toc-list::-webkit-scrollbar-track { background: transparent; } .toc-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 999px; } .toc-list::after { display: none; } .toc-item { font-size: 11px; color: var(--muted); padding: 4px 0; display: flex; gap: 8px; align-items: baseline; cursor: pointer; transition: color .15s; } .toc-item:hover { color: var(--cyan); } .toc-n { font-size: 10px; color: var(--border2); min-width: 16px; } .section { margin-bottom: 14px; } .section-h[id], .source-block-head[id] { scroll-margin-top: 72px; } .section-h { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); padding-bottom: 7px; border-bottom: 1px solid var(--surface2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .section-h::before { content: ''; width: 3px; height: 16px; background: var(--cyan); border-radius: 2px; flex-shrink: 0; } .section-p { font-size: 12px; color: var(--muted); line-height: 1.8; } .section-p { text-align: justify; text-justify: inter-word; text-align-last: left; line-height: 1.85; margin: 0 0 12px; overflow-wrap: break-word; hyphens: auto; } .section-p:last-child { margin-bottom: 0; } .codes-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .codes-table th { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 7px 10px; background: var(--nav-bg); border-bottom: 1px solid var(--border); text-align: left; } .codes-table td { font-size: 12px; color: #C8D8EC; padding: 7px 10px; border-bottom: 1px solid var(--surface2); } .codes-table tr:last-child td { border-bottom: none; } .codes-table tr:hover td { background: var(--surface2); } .code-pill { font-family: monospace; background: var(--nav-bg); color: var(--cyan); border: 1px solid rgba(56,189,248,0.25); border-radius: 4px; padding: 2px 7px; font-size: 11px; letter-spacing: 0.3px; } .expired .code-pill { color: var(--dim); border-color: var(--border2); } .expired td { color: var(--dim); } .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 4px; } .dot-active { background: var(--green); } .dot-expired { background: var(--dim); } .baca-juga { background: var(--nav-bg); border-left: 3px solid var(--violet); border-radius: 0 8px 8px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 13px; margin: 12px 0; display: flex; align-items: center; gap: 9px; cursor: pointer; transition: border-color .15s; } .baca-juga:hover { border-color: var(--violet); } .bj-label { font-size: 9px; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; } .bj-title { font-size: 11px; color: #C8D8EC; line-height: 1.4; } .bj-arrow { margin-left: auto; color: var(--border2); font-size: 13px; } .source-block { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; margin-top: 4px; } .source-block-head { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; } .source-block-head i { font-size: 12px; color: var(--dim); } .source-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding: 4px 0; border-bottom: 1px solid var(--surface2); } .source-row:last-child { border-bottom: none; } .source-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border2); flex-shrink: 0; } .source-link { color: var(--cyan); cursor: pointer; } .source-link:hover { text-decoration: underline; } .source-date { font-size: 10px; color: var(--dim); margin-left: auto; white-space: nowrap; } .faq-head { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; } .faq-head i { font-size: 12px; color: var(--cyan); } .faq-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; overflow: hidden; } .faq-q { font-size: 12px; color: #C8D8EC; font-weight: 500; padding: 9px 13px; background: var(--surface); display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 10px; } .faq-q i { font-size: 13px; color: var(--cyan); flex-shrink: 0; transition: transform .18s ease; } .faq-a { display: none; font-size: 11px; color: var(--muted); padding: 9px 13px; background: var(--nav-bg); line-height: 1.7; } .faq-item.is-open .faq-a { display: block; } .faq-item.is-open .faq-q i { transform: rotate(180deg); } .related-stack { margin-top: 16px; } .related-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .related-panel-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--surface2); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .related-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; } .related-title::before { content: ''; width: 3px; height: 14px; background: var(--cyan); border-radius: 2px; } .related-sub { display: none; } .related-list { display: flex; flex-direction: column; } .related-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--surface2); transition: background .15s, border-color .15s; } .related-row:last-child { border-bottom: none; } .related-row:hover { background: var(--surface2); } .related-row:focus-visible { outline: 2px solid rgba(56,189,248,0.45); outline-offset: -2px; } .related-thumb { width: 48px; height: 34px; border-radius: 7px; border: 1px solid var(--border2); background-position: center; background-size: cover; background-color: var(--nav-bg); flex-shrink: 0; } .related-kind, .related-reason { display: none; } .related-main { min-width: 0; } .related-item-title { display: block; font-size: 12px; color: #DCE8F8; line-height: 1.35; font-weight: 600; } .related-arrow { color: var(--border2); font-size: 14px; transition: color .15s, transform .15s; } .related-row:hover .related-arrow { color: var(--cyan); transform: translateX(2px); } .sidebar { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 64px; } .sb-card { --sb-accent: var(--cyan); --sb-accent-rgb: 56,189,248; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .sb-official { --sb-accent: var(--cyan); --sb-accent-rgb: 56,189,248; } .sb-download { --sb-accent: var(--green); --sb-accent-rgb: 34,197,94; } .sb-latest { --sb-accent: var(--violet); --sb-accent-rgb: 167,139,250; } .sb-similar { --sb-accent: var(--amber); --sb-accent-rgb: 245,158,11; } .sb-tags { --sb-accent: #6EA8FE; --sb-accent-rgb: 110,168,254; } .sb-head { font-size: 10px; font-weight: 800; color: var(--sb-accent); padding: 9px 12px 8px; text-transform: uppercase; letter-spacing: 0.75px; border-bottom: 1px solid rgba(var(--sb-accent-rgb),0.16); background: linear-gradient(90deg, rgba(var(--sb-accent-rgb),0.105), rgba(13,21,37,0) 72%); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sb-head-title { display: flex; align-items: center; gap: 7px; min-width: 0; line-height: 1.2; } .sb-head-title i { font-size: 13px; color: var(--sb-accent); flex-shrink: 0; } .sb-head-link { color: var(--sb-accent); background: rgba(var(--sb-accent-rgb),0.08); border: 1px solid rgba(var(--sb-accent-rgb),0.22); border-radius: 999px; padding: 2px 7px; font-size: 9px; text-transform: none; letter-spacing: 0; font-weight: 700; white-space: nowrap; cursor: pointer; } .sb-head-arrow { width: auto; height: auto; padding: 0; background: transparent; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .sb-head-arrow:hover { color: var(--text); } .sb-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--surface2); cursor: pointer; transition: background .15s; } .sb-item:last-child { border-bottom: none; } .sb-item:hover { background: var(--surface2); } .sb-thumb { width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; } .sbt1 { background: linear-gradient(135deg,#1A3050,#0F2040); } .sbt2 { background: linear-gradient(135deg,#1F2D40,#142030); } .sbt3 { background: linear-gradient(135deg,#162438,#0F1A28); } .sbt4 { background: linear-gradient(135deg,#141F32,#0D1622); } .sb-thumb { display: flex; align-items: center; justify-content: center; } .sb-thumb i { font-size: 15px; color: var(--cyan); opacity: 0.9; } .sb-thumb.sbt2:empty::before, .sb-thumb.sbt3:empty::before, .sb-thumb.sbt4:empty::before { font-family: "tabler-icons"; font-size: 15px; color: var(--cyan); opacity: 0.9; } .sb-thumb.sbt2:empty::before { content: "\ec90"; } .sb-thumb.sbt3:empty::before { content: "\ef8e"; } .sb-thumb.sbt4:empty::before { content: "\ec90"; } .sbt4 { background: linear-gradient(135deg,#1C1428,#241830); } .sb-title { font-size: 11px; color: #C8D8EC; font-weight: 500; line-height: 1.2; } .sb-sub { font-size: 10px; color: var(--muted); margin-top: 1px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px 12px; max-height: 132px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(var(--sb-accent-rgb), .32) transparent; } .tag-cloud::-webkit-scrollbar { width: 5px; } .tag-cloud::-webkit-scrollbar-track { background: transparent; } .tag-cloud::-webkit-scrollbar-thumb { background: rgba(var(--sb-accent-rgb), .32); border-radius: 999px; } .tag-pill { display: inline-flex; align-items: center; font-size: 10px; color: var(--muted); background: var(--nav-bg); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; cursor: pointer; transition: color .15s, border-color .15s; } .tag-pill:hover { border-color: currentColor; filter: brightness(1.12); } .tag-game { color: #C8D8EC; border-color: rgba(200,216,236,.20); } .tag-dev { color: var(--amber); border-color: rgba(245,158,11,.24); } .tag-open { color: var(--green); border-color: rgba(34,197,94,.24); } .tag-rpg { color: var(--violet); border-color: rgba(167,139,250,.24); } .tag-gacha { color: #F59E0B; border-color: rgba(245,158,11,.24); } .tag-anime { color: #F472B6; border-color: rgba(244,114,182,.24); } .tag-coop { color: #38BDF8; border-color: rgba(56,189,248,.24); } .tag-free { color: var(--lime); border-color: rgba(132,204,22,.24); } .tag-iap { color: var(--violet); border-color: rgba(167,139,250,.24); } .tag-more { display: flex; justify-content: flex-end; padding: 0 12px 10px; font-size: 10px; font-weight: 700; color: var(--sb-accent); line-height: 1.2; } .tag-more:hover { color: var(--text); } .upcoming-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--surface2); font-size: 11px; cursor: pointer; transition: background .15s; } .upcoming-row:last-child { border-bottom: none; } .upcoming-row:hover { background: var(--surface2); } .up-name { color: #C8D8EC; font-weight: 500; } .up-date { color: var(--amber); font-size: 10px; } .up-confirmed { color: var(--green); font-size: 10px; } .footer { background: var(--footer-bg); border-top: 1px solid var(--surface2); margin-top: 40px; padding: 28px 0 0; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 0.9fr; gap: 20px; margin-bottom: 20px; } .footer-logo { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--cyan); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .footer-logo i { font-size: 17px; } .footer-desc { font-size: 11px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; } .footer-social { display: flex; gap: 6px; } .social-btn { width: 28px; height: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 14px; transition: color .15s, border-color .15s; } .social-btn:hover { color: var(--cyan); border-color: var(--cyan); } .footer-col-title { font-size: 10px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; } .footer-link { font-size: 11px; color: var(--muted); display: block; margin-bottom: 6px; cursor: pointer; transition: color .15s; } .footer-link:hover { color: var(--cyan); } .footer-bottom { border-top: 1px solid var(--surface2); padding: 12px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .footer-copy { font-size: 10px; color: var(--dim); } .footer-legal { display: flex; gap: 14px; flex-wrap: wrap; } .legal-link { font-size: 10px; color: var(--dim); cursor: pointer; transition: color .15s; } .legal-link:hover { color: var(--muted); } .footer-disclaimer { padding: 12px 0 20px; border-top: 1px solid rgba(26,40,64,0.5); } .disclaimer-text { font-size: 10px; color: #3A4A60; line-height: 1.65; } .tb-profile { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.25); } .info-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .info-table th { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 7px 10px; background: var(--nav-bg); border-bottom: 1px solid var(--border); text-align: left; } .info-table td { font-size: 12px; color: #C8D8EC; padding: 7px 10px; border-bottom: 1px solid var(--surface2); vertical-align: top; } .info-table tr:last-child td { border-bottom: none; } .media-grid, .download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; } .media-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .download-card { background: linear-gradient(180deg, rgba(22,32,51,0.92), rgba(16,24,39,0.92)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-height: 52px; padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; position: relative; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; } .download-card::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 0 2px 2px 0; background: rgba(56,189,248,0.55); opacity: .65; transition: opacity .15s, background .15s; } .download-card:hover { border-color: rgba(56,189,248,0.45); background: linear-gradient(180deg, rgba(22,32,51,1), rgba(20,31,50,1)); box-shadow: 0 0 0 1px rgba(56,189,248,0.08), 0 8px 22px rgba(0,0,0,0.18); transform: translateY(-1px); } .download-card:hover::before { opacity: 1; background: var(--cyan); } .download-card:hover .download-title { color: #F0F6FF; } .download-card:hover .download-action { color: var(--cyan); border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.08); } .download-card:focus-visible { outline: 2px solid rgba(56,189,248,0.55); outline-offset: 2px; } .download-main { min-width: 0; } .media-thumb { height: 86px; background-size: cover; background-position: center; border-bottom: 1px solid var(--surface2); } .media-body { padding: 9px 10px; } .media-title, .download-title { font-size: 11px; color: #C8D8EC; font-weight: 600; line-height: 1.35; margin-bottom: 3px; } .media-sub, .download-sub { font-size: 10px; color: var(--muted); line-height: 1.45; } .download-action { font-size: 10px; color: var(--muted); border: 1px solid var(--border2); border-radius: 999px; padding: 3px 8px; white-space: nowrap; line-height: 1.2; transition: color .15s, border-color .15s, background .15s; } .real-link { color: var(--cyan); } .real-link:hover { text-decoration: underline; } .text-link { color: #C8D8EC; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(56,189,248,0.35); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; } .text-link:hover { color: var(--cyan); text-decoration-color: var(--cyan); } .note-box { background: var(--nav-bg); border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 13px; margin: 12px 0; font-size: 11px; color: var(--muted); line-height: 1.7; } @media (max-width: 760px) { .nav { height: auto; padding: 8px 0; } .nav .page-wrap { flex-wrap: wrap; gap: 8px; padding: 0 12px !important; } .nav-logo { font-size: 16px; } .nav-right { margin-left: auto; } .nav-search-form { width: min(46vw, 180px); } .nav-search-input { font-size: 10px; padding-left: 9px; } .nav-links { order: 3; width: 100%; overflow-x: auto; gap: 4px; padding: 2px 0 1px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-link { flex: 0 0 auto; padding: 5px 9px; white-space: nowrap; } .post-layout { grid-template-columns: 1fr; gap: 16px; } .sidebar { position: static; top: auto; } .hero-img { min-height: 190px; border-radius: 10px; } .qi-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qi-credit { align-items: flex-start; flex-direction: column; gap: 3px; } .qi-credit .qi-val { text-align: left; } .toc-list { max-height: 148px; } .req-card-grid { grid-template-columns: 1fr; } .req-block-head { align-items: flex-start; flex-direction: column; gap: 5px; } .req-table { min-width: 560px; } .req-block { overflow-x: auto; } .req-list li { grid-template-columns: 68px 1fr; } .related-row { grid-template-columns: 44px 1fr auto; padding: 9px 10px; } .related-thumb { width: 44px; height: 32px; } .related-row .related-main { grid-column: 2; grid-row: 1; } .related-row .related-arrow { grid-column: 3; grid-row: 1; } .related-panel-head { align-items: flex-start; flex-direction: column; gap: 3px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; } .footer-grid > div:first-child { grid-column: 1 / -1; } .footer-bottom { align-items: flex-start; flex-direction: column; } } @media (max-width: 480px) { .nav-right { width: 100%; margin-left: 0; order: 2; } .nav-search-form { width: 100%; } } .req-intro { font-size: 12px; color: var(--muted); line-height: 1.8; margin-bottom: 10px; } .req-block { background: linear-gradient(180deg, rgba(16,24,39,0.98), rgba(13,21,37,0.98)); border: 1px solid rgba(56,189,248,0.18); border-radius: 11px; overflow: hidden; margin-top: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.12); } .req-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(56,189,248,0.14); background: rgba(56,189,248,0.045); } .req-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: #F0F6FF; letter-spacing: 0.2px; display: flex; align-items: center; gap: 7px; } .req-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(56,189,248,0.35); } .req-chip { font-size: 9px; font-weight: 700; letter-spacing: 0.45px; text-transform: uppercase; color: #7DD3FC; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.25); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .req-table { width: 100%; border-collapse: collapse; } .req-table th { font-size: 9px; font-weight: 800; color: #7DD3FC; text-transform: uppercase; letter-spacing: 0.65px; padding: 9px 10px; border-bottom: 1px solid rgba(36,49,73,0.85); background: rgba(6,12,24,0.18); text-align: left; } .req-table td { font-size: 11px; color: #DCE8F8; padding: 9px 10px; border-bottom: 1px solid rgba(36,49,73,0.55); vertical-align: top; line-height: 1.55; } .req-table tr:last-child td { border-bottom: none; } .req-table tbody tr:hover td { background: rgba(56,189,248,0.025); } .req-table td:first-child { width: 22%; color: #93A9C8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.45px; } .req-table td:nth-child(2) { color: #C8D8EC; } .req-table td:nth-child(3) { color: #EAF0FF; font-weight: 500; } .req-table td.req-plat-cell { text-transform: none; letter-spacing: normal; font-weight: 400; } .req-table td.req-plat-cell .plat-pill { vertical-align: middle; } .req-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; } .req-card { background: linear-gradient(180deg, rgba(16,24,39,0.96), rgba(13,21,37,0.96)); border: 1px solid rgba(36,49,73,0.95); border-radius: 11px; padding: 11px 12px; position: relative; overflow: hidden; } .req-card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(56,189,248,0.55); } .req-card:nth-child(2)::before { background: rgba(167,139,250,0.62); } .req-card:nth-child(3)::before { background: rgba(245,158,11,0.62); } .req-card-title { font-family: 'Syne', sans-serif; font-size: 12px; color: #EAF0FF; font-weight: 700; margin-bottom: 8px; } .req-card:nth-child(1) .req-card-title { color: #7DD3FC; } .req-card:nth-child(2) .req-card-title { color: #C4B5FD; } .req-card:nth-child(3) .req-card-title { color: #FBBF24; } .req-list { list-style: none; display: flex; flex-direction: column; } .req-list li { display: grid; grid-template-columns: 76px 1fr; gap: 8px; font-size: 11px; color: #DCE8F8; line-height: 1.45; padding: 5px 0; border-bottom: 1px solid rgba(36,49,73,0.42); } .req-list li:last-child { border-bottom: none; } .req-list span { color: #93A9C8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.35px; } .req-note { font-size: 11px; color: #AFC0D8; line-height: 1.7; margin-top: 10px; background: rgba(56,189,248,0.045); border: 1px solid rgba(56,189,248,0.16); border-left: 3px solid rgba(56,189,248,0.55); border-radius: 0 9px 9px 0; padding: 9px 11px; } .profile-media-copy { margin-bottom: 10px; } .profile-media-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr); gap: 12px; align-items: start; } .profile-media-primary, .profile-media-secondary { min-width: 0; } .profile-video-frame { width: 100%; min-height: 260px; aspect-ratio: 16 / 9; background: var(--nav-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; margin: 10px 0 12px; } .profile-video-frame video { width: 100%; height: 100%; min-height: inherit; display: block; object-fit: contain; background: #000; } .profile-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .profile-media-subhead { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; } .profile-media-subhead i { font-size: 12px; color: var(--cyan); } .profile-shot-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 28%); gap: 9px; margin-top: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: thin; } .profile-shot-scroller::-webkit-scrollbar { height: 8px; } .profile-shot-scroller::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 999px; } .profile-shot-single { margin-top: 8px; } .profile-shot-card, .profile-shot-feature { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--border); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; position: relative; display: block; scroll-snap-align: start; cursor: zoom-in; } .profile-shot-card img, .profile-shot-feature img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-shot-card:hover, .profile-shot-feature:hover { border-color: var(--cyan); } @media (max-width: 980px) { .profile-media-split { grid-template-columns: 1fr; } } @media (max-width: 760px) { .profile-video-frame { min-height: 190px; border-radius: 10px; } .profile-shot-scroller { grid-auto-columns: minmax(210px, 82%); } } .profile-lightbox { position: fixed; inset: 0; background: rgba(3, 7, 15, 0.92); display: none; align-items: center; justify-content: center; padding: 22px; z-index: 999; } .profile-lightbox.is-open { display: flex; } .profile-lightbox-inner { width: min(1060px, 96vw); height: min(680px, 88vh); position: relative; display: flex; align-items: center; justify-content: center; } .profile-lightbox-figure { position: relative; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; } .profile-lightbox-img { max-width: 100%; max-height: 88vh; object-fit: contain; display: block; border-radius: 12px; border: 1px solid rgba(36,49,73,0.72); background: #050913; box-shadow: 0 22px 80px rgba(0,0,0,0.58); user-select: none; -webkit-user-drag: none; } .profile-lightbox-close, .profile-lightbox-nav { position: absolute; border: 1px solid rgba(36,49,73,0.82); background: rgba(7,11,20,0.72); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); transition: color .15s, border-color .15s, background .15s; z-index: 3; } .profile-lightbox-close { top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 999px; font-size: 16px; } .profile-lightbox-nav { top: 50%; transform: translateY(-50%); width: 38px; height: 54px; border-radius: 10px; font-size: 22px; } .profile-lightbox-prev { left: 10px; } .profile-lightbox-next { right: 10px; } .profile-lightbox-close:hover, .profile-lightbox-nav:hover { color: var(--cyan); border-color: rgba(56,189,248,0.65); background: rgba(13,21,37,0.9); } .profile-shot-card { cursor: zoom-in; } @media (max-width: 760px) { .profile-lightbox { padding: 12px; } .profile-lightbox-inner { width: 100%; height: 84vh; } .profile-lightbox-img { max-height: 84vh; } .profile-lightbox-close { top: 8px; right: 8px; width: 32px; height: 32px; } .profile-lightbox-nav { width: 34px; height: 48px; font-size: 20px; } .profile-lightbox-prev { left: 6px; } .profile-lightbox-next { right: 6px; } } .site-brand-logo{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto}.footer-logo .site-brand-logo{width:21px;height:21px} .sb-author-body { display: flex; gap: 10px; padding: 12px; align-items: flex-start; } .sb-author-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--cyan), #1B6E96); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: #062231; } .sb-author-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .sb-author-info { min-width: 0; } .sb-author-name { font-size: 12px; font-weight: 600; color: var(--text); } .sb-author-role { font-size: 10px; color: var(--muted); margin-top: 1px; } .sb-author-bio { font-size: 10.5px; color: var(--muted); line-height: 1.55; margin-top: 7px; } .sb-author-link { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--cyan); margin-top: 8px; font-weight: 600; } .sb-author-link:hover { text-decoration: underline; } .rc-summary-card { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; } .rc-summary-left { flex-shrink: 0; text-align: center; padding-right: 18px; border-right: 1px solid var(--surface2); } .rc-avg-score { font-family: 'Syne', sans-serif; font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; } .rc-stars-static { display: flex; gap: 2px; justify-content: center; margin: 6px 0 4px; color: var(--amber); font-size: 13px; } .rc-stars-static i.is-empty { color: var(--border2); } .rc-count { font-size: 10px; color: var(--dim); white-space: nowrap; } .rc-summary-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rc-bar-row { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); } .rc-bar-row > span:first-child { width: 8px; flex-shrink: 0; } .rc-bar { flex: 1; height: 6px; background: var(--nav-bg); border-radius: 3px; overflow: hidden; } .rc-bar-fill { height: 100%; background: var(--amber); border-radius: 3px; } .rc-bar-pct { width: 30px; flex-shrink: 0; text-align: right; color: var(--dim); } .rc-rate-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rc-rate-label { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; } .rc-rate-stars { display: flex; gap: 4px; } .rc-rate-stars i { font-size: 19px; color: var(--border2); cursor: pointer; transition: color .12s, transform .12s; } .rc-rate-stars i:hover, .rc-rate-stars i.is-hover { color: var(--amber); transform: scale(1.08); } .rc-rate-stars.is-rated i.is-filled { color: var(--amber); } .rc-rate-stars.is-disabled i { cursor: not-allowed; } .rc-rate-hint { font-size: 10.5px; color: var(--dim); } .rc-rate-hint.is-done { color: var(--green); } .rc-comment-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; margin-bottom: 12px; } .rc-signin-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .rc-signin-note { font-size: 11px; color: var(--dim); } .rc-user-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--surface2); } .rc-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cyan); background-size: cover; background-position: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; color: #06202E; } .rc-user-meta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .rc-user-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-signout-btn { font-size: 10px; color: var(--dim); background: transparent; border: 1px solid var(--border2); border-radius: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; font-family: 'Inter', sans-serif; transition: color .15s, border-color .15s; } .rc-signout-btn:hover { color: var(--text); border-color: var(--muted); } .rc-textarea { width: 100%; resize: vertical; min-height: 64px; background: var(--nav-bg); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12px; padding: 10px 12px; outline: none; transition: border-color .15s; } .rc-textarea:focus { border-color: rgba(56,189,248,0.58); } .rc-textarea:disabled { color: var(--dim); cursor: not-allowed; } .rc-comment-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .rc-char-count { font-size: 10px; color: var(--dim); } .rc-submit-btn { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: #06202E; background: var(--cyan); border: none; border-radius: 7px; padding: 7px 16px; cursor: pointer; transition: opacity .15s, transform .15s; } .rc-submit-btn:hover:not(:disabled) { transform: translateY(-1px); } .rc-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; } .rc-comment-list { display: flex; flex-direction: column; gap: 10px; } .rc-comment-item { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .rc-comment-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--violet); background-size: cover; background-position: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; color: #1A0E33; } .rc-comment-body { flex: 1; min-width: 0; } .rc-comment-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; } .rc-comment-name { font-size: 12px; font-weight: 600; color: var(--text); } .rc-comment-stars { display: flex; gap: 1px; color: var(--amber); font-size: 10px; } .rc-comment-stars i.is-empty { color: var(--border2); } .rc-comment-time { font-size: 10px; color: var(--dim); margin-left: auto; white-space: nowrap; } .rc-comment-text { font-size: 12px; color: #C8D8EC; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .rc-comment-delete { font-size: 10px; color: var(--dim); background: none; border: none; cursor: pointer; margin-top: 5px; padding: 0; font-family: 'Inter', sans-serif; } .rc-comment-delete:hover { color: var(--red); } .rc-empty-comments { font-size: 11px; color: var(--dim); text-align: center; padding: 18px 0; } .rc-loadmore-btn { display: block; margin: 10px auto 0; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 7px 16px; cursor: pointer; } .rc-loadmore-btn:hover { color: var(--cyan); border-color: rgba(56,189,248,0.35); } .rc-error { font-size: 11px; color: var(--red); padding: 8px 0 0; } @media (max-width: 620px) { .rc-summary-card { flex-direction: column; align-items: stretch; gap: 12px; } .rc-summary-left { border-right: none; border-bottom: 1px solid var(--surface2); padding-right: 0; padding-bottom: 12px; } } .ad-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 4px 0; } .ad-slot-label { font-size: 9px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; } .ad-slot-frame { max-width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .ad-slot--mobile { display: none; } .ad-native { display: flex; flex-direction: column; gap: 5px; margin: 14px 0; } .ad-native .ad-slot-label { align-self: center; } .ad-native #container-7c94ae9b66edf69ed936e16a8becf9ed { border-radius: 8px; overflow: hidden; } .sb-sponsor { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; transition: border-color .15s; } .sb-sponsor:hover { border-color: var(--cyan); } .sb-sponsor-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dim); background: var(--nav-bg); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 5px; flex-shrink: 0; } .sb-sponsor-text { font-size: 10.5px; color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-sponsor .ti { font-size: 11px; color: var(--dim); flex-shrink: 0; } @media (max-width: 760px) { .ad-slot--desktop { display: none; } .ad-slot--mobile { display: flex; } .sb-ad-tall { display: none; } } @media (max-width: 760px) { html, body { width: 100%; max-width: 100%; overflow-x: clip; } body, main, .page-wrap, .post-layout, .main-col, .sidebar, .section, .section-p, .qi-card, .toc-card, .source-block, .related-panel, .related-stack { min-width: 0; max-width: 100%; } .page-wrap { width: 100%; padding-left: 12px; padding-right: 12px; } .nav { height: auto; padding: 8px 0; } .nav > .page-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(120px, 42vw); align-items: center; gap: 8px; width: 100%; padding: 0 12px !important; } .nav-logo { grid-column: 1; grid-row: 1; min-width: 0; font-size: 16px; white-space: nowrap; } .nav-right { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; margin-left: 0; } .nav-search-form { width: 100% !important; max-width: none; } .nav-links { grid-column: 1 / -1; grid-row: 2; display: flex; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 2px 0 1px; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-link { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; padding: 6px 9px; white-space: nowrap; } .post-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; padding-top: 14px; } .main-col, .sidebar { width: 100%; } .sidebar { position: static !important; top: auto !important; } .breadcrumb, .art-subline, .art-meta, .plat-row, .source-row, .footer-bottom, .footer-legal { max-width: 100%; } .breadcrumb, .art-title, .art-subline, .art-meta, .section-h, .section-p, .source-link, .related-item-title, .download-title, .download-sub, .media-title, .media-sub, .qi-val, .qi-label, .faq-q, .faq-a { overflow-wrap: anywhere; word-break: normal; } .art-title { font-size: clamp(20px, 6vw, 24px); line-height: 1.22; } .art-meta { display: flex; flex-wrap: wrap; row-gap: 4px; } .hero-img { width: 100%; min-height: clamp(180px, 52vw, 240px); border-radius: 10px; background-position: center; } .qi-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qi-stat, .qi-val, .qi-platforms, .qi-genres, .qi-credit, .qi-platform-pills, .qi-genre-pills { min-width: 0; } .qi-credit { align-items: flex-start; flex-direction: column; gap: 3px; } .qi-credit .qi-val { text-align: left; } .media-grid, .download-grid, .profile-shot-row, .req-card-grid { grid-template-columns: minmax(0, 1fr) !important; } .profile-video-frame, .profile-video-frame iframe, .profile-video-frame video, .media-card, .download-card, .profile-shot-card, .profile-shot-card img, video, iframe, img, svg, canvas { max-width: 100%; } .profile-video-frame { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } .profile-video-frame iframe, .profile-video-frame video { width: 100%; height: 100%; } .codes-scroll, .guide-table-wrap, .table-scroll, .req-block, .info-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .req-table, .guide-table { max-width: none; } .related-row { min-width: 0; grid-template-columns: 44px minmax(0, 1fr) auto; } .related-main { min-width: 0; } .source-row { align-items: flex-start; flex-wrap: wrap; } .source-date { margin-left: 0; white-space: normal; } .rc-summary-card, .rc-rate-box, .rc-signin-row, .rc-user-row, .rc-comment-item, .rc-comment-actions { max-width: 100%; min-width: 0; } .rc-rate-box, .rc-user-row { align-items: flex-start; } .rc-comment-actions { gap: 10px; } .ad-slot, .ad-slot-frame, .ad-native, .sb-sponsor { max-width: 100%; } .ad-slot-frame iframe { max-width: 100%; } .footer-inner { width: 100%; padding-left: 12px; padding-right: 12px; } .footer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; } .footer-grid > div:first-child { grid-column: auto; } .footer-bottom { align-items: flex-start; flex-direction: column; } } @media (max-width: 420px) { .nav > .page-wrap { grid-template-columns: minmax(0, 1fr) minmax(110px, 40vw); padding-left: 10px !important; padding-right: 10px !important; } .page-wrap, .footer-inner { padding-left: 10px; padding-right: 10px; } .nav-logo { font-size: 15px; } .nav-search-input { font-size: 10px; } .art-title { font-size: clamp(19px, 6.2vw, 22px); } .qi-stat-row { grid-template-columns: minmax(0, 1fr); } .hero-img { min-height: 220px; } .related-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .related-thumb { width: 40px; height: 30px; } .rc-comment-actions { align-items: flex-start; flex-direction: column; } .rc-submit-btn { width: 100%; } } @media (max-width: 760px) { .qi-card { padding: 9px 10px; margin-bottom: 10px; border-radius: 9px; } .qi-card-head { font-size: 9px; line-height: 1.2; letter-spacing: 0.65px; margin-bottom: 7px; gap: 5px; } .qi-card-head i { font-size: 11px; } .qi-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px; margin-bottom: 7px; } .qi-stat { padding: 6px 7px; border-radius: 7px; min-height: 0; } .qi-label { font-size: 7.5px; line-height: 1.2; letter-spacing: 0.3px; margin-bottom: 2px; white-space: normal; } .qi-val { font-size: 10.5px; line-height: 1.25; } .qi-stat .code-pill { max-width: 100%; padding: 2px 4px; font-size: 8.5px; line-height: 1.2; white-space: nowrap; } .qi-stat .model-link { padding: 2px 5px; font-size: 8.5px; line-height: 1.2; } .qi-stat .model-sep { padding: 0 2px; } .qi-platforms, .qi-genres, .qi-credit { padding: 7px 8px; border-radius: 7px; } .qi-platforms, .qi-genres { margin-bottom: 6px; } .qi-platform-pills, .qi-genre-pills { flex-wrap: nowrap; gap: 4px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; } .qi-platform-pills::-webkit-scrollbar, .qi-genre-pills::-webkit-scrollbar { display: none; } .qi-platform-pills > *, .qi-genre-pills > * { flex: 0 0 auto; } .qi-platform-pills .plat-pill, .qi-platform-pills .platform-pill, .qi-genre-pills .genre-pill { font-size: 8.5px; padding: 2px 6px; } .qi-credit { align-items: center !important; flex-direction: row !important; justify-content: space-between; gap: 8px; } .qi-credit .qi-label { flex: 0 0 auto; margin-bottom: 0; } .qi-credit .qi-val { min-width: 0; text-align: right !important; overflow-wrap: anywhere; } .profile-shot-scroller { gap: 7px; margin-top: 7px; } .profile-shot-card, .profile-shot-feature { border-radius: 8px; } .profile-media-subhead { margin: 3px 0 7px; } .profile-video-frame { margin: 8px 0 10px; border-radius: 10px; } } @media (max-width: 360px) { .qi-card { padding: 8px; } .qi-stat-row { gap: 4px; } .qi-stat { padding: 5px; } .qi-label { font-size: 7px; } .qi-val { font-size: 9.5px; } .qi-stat .code-pill, .qi-stat .model-link { font-size: 8px; } .qi-credit { gap: 6px; } .profile-shot-row { gap: 6px; } } .profile-video-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 18px;font-size:13px;line-height:1.5} .profile-video-title{font-weight:700;color:var(--text,#eef2ff);min-width:0;overflow-wrap:anywhere} .profile-video-source{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;text-decoration:none} @media(max-width:640px){.profile-video-meta{align-items:flex-start;flex-direction:column;gap:6px;margin-top:8px}.profile-video-source{font-size:12px}} .ad-slot--inline { margin: 22px 0 26px; } .section-p strong, .section-ul strong, .section-ol strong, .section-quote strong { color: var(--text); font-weight: 600; } .section-p code, .section-ul code, .section-ol code, .section-quote code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text); } .section-p mark, .section-ul mark, .section-ol mark, .section-quote mark { background: rgba(56, 189, 248, 0.16); color: var(--text); padding: 0 3px; border-radius: 3px; } .section-p u, .section-ul u, .section-ol u { text-underline-offset: 2px; } .section-p a.real-link, .section-ul a.real-link, .section-ol a.real-link, .section-quote a.real-link { color: var(--cyan); } .section-p a.real-link:hover, .section-ul a.real-link:hover, .section-ol a.real-link:hover, .section-quote a.real-link:hover { text-decoration: underline; } .cg-cyan { color: var(--cyan); } .cg-green { color: var(--green); } .cg-amber { color: var(--amber); } .cg-red { color: var(--red); } .cg-violet { color: var(--violet); } .cg-lime { color: var(--lime); } .cg-text { color: var(--text); } .cg-muted { color: var(--muted); } .cg-sm { font-size: 0.88em; } .cg-lg { font-size: 1.13em; } .cg-xl { font-size: 1.30em; font-weight: 600; } .section-h3 { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45; margin: 18px 0 8px; scroll-margin-top: 84px; } .section-h3:first-child { margin-top: 0; } .section-ul, .section-ol { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: break-word; } .section-ul li + li, .section-ol li + li { margin-top: 5px; } .section-ul li::marker { color: var(--cyan); } .section-ol li::marker { color: var(--cyan); font-weight: 600; } .section-quote { margin: 0 0 12px; padding: 10px 14px; border-left: 2px solid var(--cyan); background: var(--surface); border-radius: 0 6px 6px 0; color: var(--muted); font-size: 12px; line-height: 1.8; } .sb-rel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--surface2); transition: background .15s; } .sb-rel:last-child { border-bottom: none; } .sb-rel:hover { background: var(--surface2); } .sb-rel-thumb { width: 52px; height: 38px; border-radius: 6px; flex-shrink: 0; background-size: cover; background-position: center; } .sb-rel-thumb-empty { background: linear-gradient(135deg,#1A3050,#0F2040); } .sb-rel-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .sb-rel-title { font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sb-rel:hover .sb-rel-title { color: var(--cyan); } .sb-rel-badge { align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor; opacity: .9; } .tax-c-red { --tax-color:#F87171; --tax-rgb:248,113,113; color:var(--tax-color) !important; } .tax-c-crimson { --tax-color:#E11D48; --tax-rgb:225,29,72; color:var(--tax-color) !important; } .tax-c-rose { --tax-color:#F43F5E; --tax-rgb:244,63,94; color:var(--tax-color) !important; } .tax-c-pink { --tax-color:#F472B6; --tax-rgb:244,114,182; color:var(--tax-color) !important; } .tax-c-magenta { --tax-color:#D946EF; --tax-rgb:217,70,239; color:var(--tax-color) !important; } .tax-c-fuchsia { --tax-color:#E879F9; --tax-rgb:232,121,249; color:var(--tax-color) !important; } .tax-c-purple { --tax-color:#A855F7; --tax-rgb:168,85,247; color:var(--tax-color) !important; } .tax-c-violet { --tax-color:#8B5CF6; --tax-rgb:139,92,246; color:var(--tax-color) !important; } .tax-c-indigo { --tax-color:#6366F1; --tax-rgb:99,102,241; color:var(--tax-color) !important; } .tax-c-blue { --tax-color:#3B82F6; --tax-rgb:59,130,246; color:var(--tax-color) !important; } .tax-c-sky { --tax-color:#38BDF8; --tax-rgb:56,189,248; color:var(--tax-color) !important; } .tax-c-cyan { --tax-color:#22D3EE; --tax-rgb:34,211,238; color:var(--tax-color) !important; } .tax-c-teal { --tax-color:#14B8A6; --tax-rgb:20,184,166; color:var(--tax-color) !important; } .tax-c-emerald { --tax-color:#10B981; --tax-rgb:16,185,129; color:var(--tax-color) !important; } .tax-c-green { --tax-color:#4ADE80; --tax-rgb:74,222,128; color:var(--tax-color) !important; } .tax-c-mint { --tax-color:#6EE7B7; --tax-rgb:110,231,183; color:var(--tax-color) !important; } .tax-c-lime { --tax-color:#A3E635; --tax-rgb:163,230,53; color:var(--tax-color) !important; } .tax-c-yellow { --tax-color:#FACC15; --tax-rgb:250,204,21; color:var(--tax-color) !important; } .tax-c-amber { --tax-color:#F59E0B; --tax-rgb:245,158,11; color:var(--tax-color) !important; } .tax-c-orange { --tax-color:#FB923C; --tax-rgb:251,146,60; color:var(--tax-color) !important; } .tax-c-coral { --tax-color:#FF7A59; --tax-rgb:255,122,89; color:var(--tax-color) !important; } .tax-c-brown { --tax-color:#F6C453; --tax-rgb:246,196,83; color:var(--tax-color) !important; } .tax-c-slate { --tax-color:#C4B5FD; --tax-rgb:196,181,253; color:var(--tax-color) !important; } .tax-c-steel { --tax-color:#67E8F9; --tax-rgb:103,232,249; color:var(--tax-color) !important; } .sb-scroll { max-height: 148px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .sb-scroll::-webkit-scrollbar { width: 8px; } .sb-scroll::-webkit-scrollbar-track { background: transparent; } .sb-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid var(--surface); } .sb-scroll::-webkit-scrollbar-thumb:hover { background: var(--sb-accent); } .sb-link { display: block; padding: 8px 12px; border-bottom: 1px solid var(--surface2); color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; } .sb-link:last-child { border-bottom: 0; } .sb-link:hover { color: var(--sb-accent); background: rgba(var(--sb-accent-rgb), .07); } @media (max-width: 760px) { .req-block { overflow-x: visible; } .req-table { min-width: 0; width: 100%; display: block; } .req-table thead { display: none; } .req-table tbody, .req-table tr, .req-table td { display: block; width: auto; } .req-table tr { border: 1px solid var(--surface2); border-radius: 9px; padding: 9px 11px 4px; margin-bottom: 8px; background: rgba(255,255,255,0.015); } .req-table tr:last-child { margin-bottom: 0; } .req-table td { border-bottom: none; padding: 0 0 6px; } .req-table td:first-child { width: auto; font-size: 11px; color: #7DD3FC; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid rgba(36,49,73,0.7); } .req-table td:first-child::before { content: none; } .req-table td::before { content: attr(data-label); display: block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; } .req-table td:not(:first-child) { font-size: 11.5px; color: #DCE8F8; } .req-table tbody tr:hover td { background: none; } } .art-subline.art-subline-marquee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; max-width: 100%; overflow: hidden; padding: 1px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .art-tag-marquee-row { min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.35; } .art-tag-marquee-track { display: flex; align-items: center; width: max-content; will-change: transform; } .art-tag-marquee-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; width: max-content; min-width: max-content; padding-right: 18px; } .art-tag-marquee-group > * { flex: 0 0 auto; } .art-subline.art-subline-marquee .sub-dot { display: inline; } .art-subline.art-subline-marquee a::after { content: none !important; } .art-tag-marquee-group[aria-hidden="true"] { display: none; } .art-tag-marquee-row.is-running .art-tag-marquee-group[aria-hidden="true"] { display: flex; } .art-tag-marquee-row.is-running .art-tag-marquee-track { animation: cg-tag-marquee var(--tag-marquee-duration, 70s) linear infinite; } .art-tag-marquee-row.is-reverse.is-running .art-tag-marquee-track { animation-direction: reverse; } .art-subline-marquee:hover .art-tag-marquee-track, .art-subline-marquee:focus-within .art-tag-marquee-track { animation-play-state: paused; } .art-tag-marquee-row:not(.is-running) .art-tag-marquee-group { padding-right: 0; } .art-tag-marquee-row:not(.is-running) .sub-dot-tail { display: none; } @keyframes cg-tag-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .art-tag-marquee-row { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .art-tag-marquee-row::-webkit-scrollbar { display: none; } .art-tag-marquee-row.is-running .art-tag-marquee-track { animation: none; } .art-tag-marquee-row.is-running .art-tag-marquee-group[aria-hidden="true"] { display: none; } .art-tag-marquee-row.is-running .art-tag-marquee-group { padding-right: 0; } .art-tag-marquee-row.is-running .sub-dot-tail { display: none; } } :root{ --bg: #080B12; --surface: #0E131D; --surface2: #151B28; --surface3: #1C2436; --border: #232B3D; --border2: #2C3550; --text: #E8EBF1; --muted: #98A2B8; --dim: #666F85; --cyan: #4B8BF4; --violet: #7C5CFF; --green: #3ECF8E; --amber: #FFB020; --red: #EF6E50; --lime: #9EDE4A; --orange: #F8974A; --nav-bg: #0E131D; --footer-bg: #070B12; --cg-box: rgba(14,19,29,0.62); --cg-r: 14px; --cg-r-sm: 9px; } body{ background-color:var(--bg); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217.32%22%20height%3D%2230.00%22%20viewBox%3D%220%200%2017.32%2030.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234b8bf4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.14%22%3E%3Cpolygon%20points%3D%22-8.66%2C-25.00%200.00%2C-20.00%200.00%2C-10.00%20-8.66%2C-5.00%20-17.32%2C-10.00%20-17.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C-25.00%2017.32%2C-20.00%2017.32%2C-10.00%208.66%2C-5.00%20-0.00%2C-10.00%200.00%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C-25.00%2034.64%2C-20.00%2034.64%2C-10.00%2025.98%2C-5.00%2017.32%2C-10.00%2017.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C-10.00%20-8.66%2C-5.00%20-8.66%2C5.00%20-17.32%2C10.00%20-25.98%2C5.00%20-25.98%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C-10.00%208.66%2C-5.00%208.66%2C5.00%200.00%2C10.00%20-8.66%2C5.00%20-8.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C-10.00%2025.98%2C-5.00%2025.98%2C5.00%2017.32%2C10.00%208.66%2C5.00%208.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%22-8.66%2C5.00%200.00%2C10.00%200.00%2C20.00%20-8.66%2C25.00%20-17.32%2C20.00%20-17.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C5.00%2017.32%2C10.00%2017.32%2C20.00%208.66%2C25.00%20-0.00%2C20.00%200.00%2C10.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C5.00%2034.64%2C10.00%2034.64%2C20.00%2025.98%2C25.00%2017.32%2C20.00%2017.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C20.00%20-8.66%2C25.00%20-8.66%2C35.00%20-17.32%2C40.00%20-25.98%2C35.00%20-25.98%2C25.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C20.00%208.66%2C25.00%208.66%2C35.00%200.00%2C40.00%20-8.66%2C35.00%20-8.66%2C25.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C20.00%2025.98%2C25.00%2025.98%2C35.00%2017.32%2C40.00%208.66%2C35.00%208.66%2C25.00%22%20/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 15% 0%, rgba(75,139,244,0.10), transparent 40%), radial-gradient(circle at 85% 12%, rgba(124,92,255,0.08), transparent 42%); background-repeat:repeat,no-repeat,no-repeat; background-size:17.32px 30px,auto,auto; background-attachment:scroll,fixed,fixed; } .page-wrap,.footer-inner,.nav-inner{max-width:1180px;} .cg-box{ background:var(--cg-box); border:1px solid var(--border); border-radius:var(--cg-r); padding:20px 22px; } .cg-box.cg-flush{padding:0;overflow:hidden;} @media (max-width:760px){ .cg-box{padding:12px;} } .tax-pill{ border-radius:6px !important; padding:3px 9px !important; font-size:10.5px !important; font-weight:600 !important; background:rgba(var(--tax-rgb),.22) !important; border:1px solid rgba(var(--tax-rgb),.45) !important; color:var(--tax-color) !important; } .tag-pill,.plat-pill,.genre-pill,.model-link,.status-link{border-radius:6px;} .tag-cloud{gap:8px;} .nav{ background:transparent; border-bottom:0; height:auto; padding:14px 0; position:sticky;top:0;z-index:100; } .nav::before{ content:"";position:absolute;inset:0;z-index:-2;background:var(--bg); } .nav .nav-inner, .nav > .page-wrap{ position:relative; height:62px; max-width:1180px; margin:0 auto; padding:0 52px !important; display:flex; align-items:center; gap:20px; } .nav .nav-inner::before, .nav > .page-wrap::before{ content:""; position:absolute; inset:0 32px; z-index:-1; background:#111825; border:1px solid rgba(255,255,255,0.07); border-radius:12px; } .nav-logo{ font-family:'Syne',sans-serif; font-size:16.5px;font-weight:700;color:#fff; gap:11px;flex:0 0 auto; } .nav-logo .site-brand-logo{width:30px;height:30px;border-radius:9px;} @keyframes cg-btn-march{ to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px, 0 0;} } .nav-links{display:flex;align-items:center;gap:8px;flex:1 1 auto;} .nav-link{ padding:8px 13px; border-radius:8px; border:0; font-size:13px; font-weight:500; color:#93A0B8; background-image: linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(180deg, rgba(75,139,244,0.06), rgba(75,139,244,0.06)); background-repeat:repeat-x, repeat-x, repeat-y, repeat-y, no-repeat; background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px, 100% 100%; background-position:0 0, 0 100%, 0 0, 100% 0, 0 0; animation:cg-btn-march .7s infinite linear; transition:color .15s ease; } .nav-link:hover{color:#fff;background-color:transparent;} .nav-link.active{ color:#fff;font-weight:600;background-color:transparent; background-image: linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(180deg, rgba(75,139,244,0.20), rgba(75,139,244,0.20)); } @media (prefers-reduced-motion: reduce){ .nav-link{animation:none;} } .nav-right{flex:0 0 auto;} .nav-search-form{ width:262px;height:36px; border-radius:9px; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.08); box-shadow:none; transition:border-color .18s ease, box-shadow .18s ease; } .nav-search-form:focus-within{ background:rgba(0,0,0,0.4); border-color:rgba(75,139,244,0.55); box-shadow:0 0 0 3px rgba(75,139,244,0.12); } .nav-search-input{font-size:12.5px;} .nav-search-input::placeholder{color:#66708A;} .nav-search-btn{border-left-color:rgba(255,255,255,0.07);color:#6B7794;} .nav-search-btn:hover{color:var(--cyan);background:rgba(75,139,244,0.08);} .footer{background:rgba(7,11,18,0.6);border-top:1px solid var(--border);margin-top:44px;} .footer-logo{font-family:'Syne',sans-serif;color:#fff;} .footer-col-title{letter-spacing:.06em;} .footer-link{font-size:12px;margin-bottom:9px;} .footer-link:hover{color:var(--cyan);} .footer-bottom{border-top-color:var(--border);} .disclaimer-text{color:var(--dim);opacity:.85;} .ad-slot-frame{border-radius:var(--cg-r-sm);border-color:var(--border);background:var(--surface2);} .ad-slot-label{color:var(--dim);letter-spacing:.14em;} .post-layout{grid-template-columns:minmax(0,1fr) 320px;gap:22px;padding:22px 0 0;} .sidebar{gap:20px;top:88px;} .breadcrumb{font-size:11.5px;color:var(--dim);} .type-badge{ border:1px solid transparent;border-radius:6px;padding:4px 9px; font-size:10px;letter-spacing:.05em; } .tb-codes {background:rgba(255,176,32,0.22);border-color:rgba(255,176,32,0.45);color:#FFB020;} .tb-news {background:rgba(75,139,244,0.22);border-color:rgba(75,139,244,0.48);color:#6EA3F7;} .tb-guide {background:rgba(124,92,255,0.24);border-color:rgba(124,92,255,0.48);color:#A78BFA;} .tb-live {background:rgba(62,207,142,0.22);border-color:rgba(62,207,142,0.45);color:#3ECF8E;} .art-title{font-size:29px;line-height:1.18;color:#fff;letter-spacing:-.01em;margin-bottom:10px;} .art-meta{font-size:11.5px;color:var(--dim);gap:9px;} .meta-sep{background:var(--border2);} .hero-img{border-radius:var(--cg-r);border:1px solid var(--border);overflow:hidden;min-height:0;aspect-ratio:16/7;} .hero-label{border-radius:0;background:linear-gradient(0deg,rgba(6,8,13,0.9),transparent);font-size:11.5px;color:rgba(255,255,255,0.75);} .section{padding:0;margin-top:26px;background:transparent;border:0;} .section-h{ font-size:18px;border-bottom:0;padding-bottom:0;margin-bottom:12px; display:flex;align-items:center;gap:9px;letter-spacing:-.005em; } .section-h::before{ content:"";width:8px;height:8px;border-radius:3px;flex:0 0 auto; background:var(--cyan);box-shadow:0 0 0 4px rgba(75,139,244,0.14); } .section-p{font-size:13.5px;color:var(--muted);line-height:1.72;} .body-doc li{font-size:13px;line-height:1.7;color:var(--muted);} .qi-card{background:transparent;border:0;padding:0;margin:0;} .qi-label{font-size:10px;letter-spacing:.06em;color:var(--dim);} .qi-val{font-size:12.5px;} .qi-ticket{border-radius:var(--cg-r);overflow:hidden;box-shadow:none;border:1px solid var(--border);background:var(--cg-box);} .qi-main{padding:16px 18px;} .qi-hero-num{font-size:38px;color:var(--amber);} .qi-stub{border-left:2px dashed var(--border2);background:rgba(8,11,18,0.35);} .qi-chip{border-radius:6px;} .toc-card{ background:var(--cg-box);border:1px solid var(--border);border-left:1px solid var(--border); border-radius:var(--cg-r);padding:14px 16px; } .toc-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);} .toc-item{font-size:12.5px;color:var(--muted);} .toc-n{color:var(--cyan);font-family:ui-monospace,Menlo,monospace;font-size:10.5px;} .table-shell{background:transparent;border:0;border-radius:0;margin-top:0;} .codes-table{margin-bottom:0;} .codes-table th{ position:sticky;top:0;z-index:2; background:#141A26; border-bottom:1px solid var(--border); font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim); padding:12px 14px 11px; } .codes-table td{ border-top:1px solid var(--border);border-bottom:0; font-size:12.5px;color:var(--muted);line-height:1.55; height:64px;vertical-align:middle;padding:11px 14px; } .codes-table tr:hover td{background:rgba(75,139,244,0.04);} .badge{border-radius:6px;background:rgba(102,111,133,0.28);border:1px solid rgba(102,111,133,0.4);color:#B6C0D4;} .badge.no-expiry{background:rgba(62,207,142,0.22);border-color:rgba(62,207,142,0.45);color:#3ECF8E;} .badge.expired{background:rgba(239,110,80,0.22);border-color:rgba(239,110,80,0.45);color:#EF6E50;} @keyframes cg-code-march{ to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px;} } .code-copy, .code-copy:hover{ border:0 !important;border-radius:7px; background-color:rgba(255,176,32,0.10); background-image: linear-gradient(90deg, var(--qi, var(--amber)) 50%, transparent 50%), linear-gradient(90deg, var(--qi, var(--amber)) 50%, transparent 50%), linear-gradient(0deg, var(--qi, var(--amber)) 50%, transparent 50%), linear-gradient(0deg, var(--qi, var(--amber)) 50%, transparent 50%); background-repeat:repeat-x, repeat-x, repeat-y, repeat-y; background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px; background-position:0 0, 0 100%, 0 0, 100% 0; animation:cg-code-march .7s infinite linear; color:var(--qi, var(--amber)); max-width:180px;width:180px; } .code-copy:hover{background-color:rgba(255,176,32,0.2);} .code-copy i{color:var(--qi, var(--amber));} .code-copy.is-copied{ background-color:rgba(62,207,142,0.16);background-image:none;animation:none;color:var(--green); } @media (prefers-reduced-motion: reduce){ .code-copy{animation:none;} } .codes-expired{background:transparent;border:0;border-radius:0;} .codes-expired-head{padding:0 0 12px;} .ce-icon{border-radius:9px;background:rgba(102,111,133,0.16);color:var(--muted);} .ce-label{font-size:13px;} .ce-sub{font-size:11px;color:var(--dim);} .ce-count{font-size:17px;color:var(--muted);} .route-guide{background:transparent;border:0;} .route-tabs{padding:0 0 12px;border-bottom:1px solid var(--border);gap:6px;margin-bottom:14px;} .route-tab{ border:1px solid var(--border);border-radius:20px;padding:6px 12px; font-size:11.5px;color:var(--muted);background:transparent; } .route-tab.active{background:rgba(75,139,244,0.15);border-color:rgba(75,139,244,0.45);color:var(--cyan);} .stop-text{font-size:12.5px;color:var(--muted);line-height:1.6;} .stop-dot{border-color:var(--cyan);background:var(--surface2);} .step-n{ border-radius:8px;background:rgba(124,92,255,0.24); border:1px solid rgba(124,92,255,0.45);color:#A78BFA; } .step-title{font-size:13.5px;} .step-text{font-size:12.5px;color:var(--muted);line-height:1.65;} table.info-table td{border-top:1px solid var(--border);font-size:12.5px;color:var(--muted);} .download-card{background:rgba(21,27,40,0.7);border:1px solid var(--border);border-radius:var(--cg-r-sm);} .download-card:hover{border-color:rgba(75,139,244,0.5);} .download-title{font-size:12.5px;} .download-sub{font-size:10.5px;color:var(--dim);} .download-action{color:var(--cyan);} .req-block{background:rgba(21,27,40,0.7);border:1px solid var(--border);border-radius:var(--cg-r);} .req-chip{background:rgba(102,111,133,0.28);border:1px solid rgba(102,111,133,0.4);color:#B6C0D4;border-radius:6px;} .profile-video-frame{border-radius:var(--cg-r-sm);border:1px solid var(--border);overflow:hidden;} .profile-video-source{color:var(--cyan);} .profile-media-subhead{font-size:10.5px;letter-spacing:.07em;color:var(--dim);} .profile-shot-card{border-radius:10px;overflow:hidden;border:1px solid var(--border);} .profile-shot-card:hover{border-color:rgba(75,139,244,0.55);} .faq-item{border:1px solid var(--border);border-radius:var(--cg-r-sm);margin-bottom:8px;background:rgba(21,27,40,0.55);} .faq-q{background:transparent;font-size:13.5px;color:var(--text);padding:13px 15px;} .faq-q i{color:var(--muted);} .faq-item.is-open .faq-q i{color:var(--cyan);} .faq-a{background:transparent;font-size:12.5px;color:var(--muted);padding:0 15px 13px;line-height:1.7;} .source-block{background:transparent;border:0;padding:0;margin-top:0;} .source-block-head{font-size:11px;letter-spacing:.08em;color:var(--dim);} .source-dot{background:var(--cyan);} .source-link{font-size:12.5px;color:var(--muted);} .source-link:hover{color:var(--cyan);} .rc-summary-card,.rc-rate-box,.rc-comment-box{ background:rgba(21,27,40,0.55);border:1px solid var(--border);border-radius:var(--cg-r); } .rc-bar{background:var(--surface3);border-radius:4px;} .rc-bar-fill{background:linear-gradient(90deg,var(--amber),var(--orange));border-radius:4px;} .rc-textarea{background:var(--surface3);border:1px solid var(--border);border-radius:10px;font-size:12.5px;} .rc-submit-btn{background:var(--cyan);border:0;border-radius:8px;color:#fff;font-weight:600;} .rc-submit-btn:hover{background:#3F7CE0;} .related-panel{background:transparent;border:0;border-radius:0;} .related-item-title{font-size:12.5px;} .related-row:hover .related-item-title{color:var(--cyan);} .related-thumb{border-radius:9px;} .sb-card{background:var(--cg-box);border:1px solid var(--border);border-radius:var(--cg-r);} .sb-head.cg-outside{ background:transparent;border:0;padding:0 0 10px; font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim); } .sb-head-title{font-size:11px;letter-spacing:.07em;color:var(--dim);} .sb-author-avatar{border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#fff;} .sb-link,.sb-item,.sb-rel,.upcoming-row{border-bottom:1px solid var(--border);} .sb-link:hover,.sb-item:hover{color:var(--cyan);} .sb-rel-thumb,.sb-thumb{border-radius:8px;} .tag-more{color:var(--cyan);} .cg-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface3) transparent;} .cg-scroll::-webkit-scrollbar{width:9px;height:9px;} .cg-scroll::-webkit-scrollbar-track{background:rgba(8,11,18,0.35);border-radius:5px;} .cg-scroll::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:5px;border:2px solid transparent;background-clip:padding-box;} .cg-scroll::-webkit-scrollbar-thumb:hover{background:#38445E;background-clip:padding-box;} .cg-xscroll{overflow-x:auto;} @media (max-width:900px){ .post-layout{grid-template-columns:minmax(0,1fr);gap:20px;} .sidebar{position:static;} } @media (max-width:760px){ .art-title{font-size:20px;line-height:1.25;} .section-h{font-size:15.5px;} .section-p{font-size:12.5px;} .hero-img{aspect-ratio:16/9;} } .cg-tabbar,.cg-sheet,.cg-sheet-backdrop{display:none;} @media (max-width:860px){ body.cg-has-tabbar{padding-bottom:62px;} body.cg-has-tabbar .nav-links{display:none !important;} body.cg-has-tabbar .nav{padding:8px 0;} body.cg-has-tabbar .nav .nav-inner, body.cg-has-tabbar .nav > .page-wrap{ height:52px;padding:0 24px !important;gap:10px; } body.cg-has-tabbar .nav .nav-inner::before, body.cg-has-tabbar .nav > .page-wrap::before{inset:0 12px;border-radius:10px;} body.cg-has-tabbar .nav-search-form{width:100%;max-width:none;} .cg-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex; background:rgba(14,19,29,0.96); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom,0px); } .cg-tab{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:7px 0 9px;color:var(--dim);text-decoration:none; font-family:'Inter',sans-serif;font-size:9.5px;background:none;border:0;cursor:pointer; } .cg-tab-ic{ display:flex;align-items:center;justify-content:center; width:42px;height:26px;border-radius:14px;font-size:17px; transition:background .15s ease,color .15s ease; } .cg-tab.is-active{color:var(--cyan);} .cg-tab.is-active .cg-tab-ic{background:rgba(75,139,244,0.15);color:var(--cyan);} .cg-sheet-backdrop{ position:fixed;inset:0 0 62px;z-index:118;display:block; background:rgba(3,5,9,0.55);opacity:0;pointer-events:none;transition:opacity .2s ease; } .cg-sheet-backdrop.is-open{opacity:1;pointer-events:auto;} .cg-sheet{ position:fixed;left:0;right:0;z-index:119;display:block; bottom:calc(62px + env(safe-area-inset-bottom,0px)); background:var(--surface2);border-top:1px solid var(--border); border-radius:16px 16px 0 0;padding:8px 16px 14px; transform:translateY(120%);transition:transform .25s ease; box-shadow:0 -12px 30px -10px rgba(0,0,0,0.5); } .cg-sheet.is-open{transform:translateY(0);} .cg-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:8px auto 12px;} .cg-sheet-row{ display:flex;align-items:center;gap:12px;padding:12px 2px; border-bottom:1px solid var(--border);color:var(--text); font-size:13.5px;text-decoration:none; } .cg-sheet-row:last-child{border-bottom:none;} .cg-sheet-row i{width:18px;text-align:center;font-size:15px;color:var(--muted);} body.cg-has-tabbar .footer-grid{grid-template-columns:1fr;gap:0;} body.cg-has-tabbar .cg-acc{border-bottom:1px solid var(--border);} body.cg-has-tabbar .cg-acc .footer-col-title{ display:flex;align-items:center;justify-content:space-between; margin:0;padding:13px 2px;cursor:pointer; font-size:12px;font-weight:500;color:var(--text); text-transform:none;letter-spacing:0; } body.cg-has-tabbar .cg-acc .cg-acc-chev{font-size:14px;color:var(--muted);transition:transform .2s ease;} body.cg-has-tabbar .cg-acc.is-open .cg-acc-chev{transform:rotate(180deg);color:var(--cyan);} body.cg-has-tabbar .cg-acc-body{max-height:0;overflow:hidden;transition:max-height .22s ease;} body.cg-has-tabbar .cg-acc.is-open .cg-acc-body{max-height:320px;} } @media (min-width:861px){ .cg-acc-body{max-height:none !important;overflow:visible !important;} .cg-acc-chev{display:none !important;} }