﻿.pl {--pl-bg:#03050a; --pl-ink:#eef3ff; --pl-muted:#d6e2ffa3; --pl-faint:#d6e2ff61; --pl-line:#ffffff1f; --pl-accent:#7fe8ff;--pl-accent-2:#a78bfa;--pl-accent-3:#ff9ec7; --pl-mono:"SF Mono", "JetBrains Mono", Menlo, ui-monospace, monospace; --pl-gutter:clamp(16px, 4.2vw, 72px); z-index:20; overscroll-behavior:none; touch-action:pan-y; color:var(--pl-ink); background:var(--pl-bg); color-scheme:dark; -webkit-font-smoothing:antialiased; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; overflow-x:hidden; overflow-y:auto}
.pl-stage {height:100%; position:sticky; top:0; overflow:hidden}
.pl-space {pointer-events:none; width:1px}
.pl-canvas {opacity:0; width:100%; height:100%; transition:opacity 1.4s; display:block; position:absolute; top:0; left:0}
.pl[data-scene-ready] .pl-canvas {opacity:1}
.pl[data-scene-fallback] .pl-stage {background:radial-gradient(60% 50% at 68% 42%, #6078ff47, transparent 70%), var(--pl-bg)}
.pl-veil {pointer-events:none; background:linear-gradient(90deg,#03050ab8 0%,#03050a59 34%,#0000 55%),linear-gradient(#03050a8c 0%,#0000 16% 84%,#03050a80 100%); transition:opacity .6s; position:absolute; top:0; left:0; width:100%; height:100%}
.pl-nav {z-index:30; padding:18px var(--pl-gutter); align-items:center; gap:28px; display:flex; position:absolute; top:0; left:0; right:0}
.pl-brand {color:var(--pl-ink); align-items:center; gap:10px; display:flex}
.pl-brand-logo {object-fit:contain; background:#fffffff0; border-radius:10px; width:32px; height:32px}
.pl-brand-logo.is-default {background:0 0}
.pl-brand b {letter-spacing:.02em; white-space:nowrap; font-size:17px; font-weight:700}
.pl-links {gap:26px; margin-left:18px; display:flex}
.pl-links a,.pl-links button {color:var(--pl-muted); font-size:14px; transition:color .2s}
.pl-links a:hover,.pl-links button:hover {color:var(--pl-ink)}
.pl-nav-actions {gap:10px; margin-left:auto; display:flex}
.pl-btn {border:1px solid var(--pl-line); height:46px; color:var(--pl-ink); letter-spacing:.02em; white-space:nowrap; border-radius:999px; align-items:center; gap:8px; padding:0 22px; font-size:15px; font-weight:600; transition:transform .25s,box-shadow .25s,background .25s,border-color .25s; display:inline-flex}
.pl-btn svg {width:16px; height:16px; transition:transform .25s}
.pl-btn:hover svg {transform:translate(3px)}
.pl-btn.is-small {height:36px; padding:0 16px; font-size:13px}
.pl-btn.is-primary {color:#05070d; background:linear-gradient(120deg,#fff,#d9f6ff 45%,#e5dcff); border-color:#0000; box-shadow:0 0 0 1px #fff3,0 10px 40px -10px #7fe8ff8c}
.pl-btn.is-primary:hover {transform:translateY(-1px); box-shadow:0 0 0 1px #ffffff4d,0 14px 50px -8px #7fe8ffbf}
.pl-btn.is-ghost {background:#141a2cb8}
.pl-btn.is-ghost:hover {background:#283048d9; border-color:#ffffff3d}
.pl-progress {z-index:31; height:2px; position:absolute; top:0; left:0; right:0}
.pl-progress i {transform-origin:0; background:linear-gradient(90deg, var(--pl-accent), var(--pl-accent-2), var(--pl-accent-3)); width:100%; height:100%; display:block; transform:scaleX(0); box-shadow:0 0 12px #7fe8ffb3}
.pl-rail {z-index:25; right:calc(var(--pl-gutter) * .55); flex-direction:column; gap:4px; display:flex; position:absolute; top:50%; transform:translateY(-50%)}
.pl-rail button {height:22px; color:var(--pl-faint); justify-content:flex-end; align-items:center; gap:10px; font-size:12px; display:flex}
.pl-rail button span {opacity:0; transition:opacity .25s,transform .25s,color .25s; transform:translate(6px)}
.pl-rail button i {background:#ffffff47; border-radius:50%; width:6px; height:6px; transition:all .3s}
.pl-rail:hover button span,.pl-rail button.is-on span {opacity:1; transform:none}
.pl-rail button.is-on {color:var(--pl-ink)}
.pl-rail button.is-on i {background:var(--pl-accent); width:8px; height:8px; box-shadow:0 0 12px var(--pl-accent)}
.pl-copy {z-index:10; pointer-events:none; position:absolute; top:0; left:0; width:100%; height:100%}
.pl-chapter {opacity:0; visibility:hidden; will-change:transform, opacity; position:absolute}
.pl-chapter.is-live {visibility:visible}
.pl-chapter.is-live .pl-btn {pointer-events:auto}
.pl-pos-left {left:var(--pl-gutter); width:min(520px,40vw); margin-top:-140px; top:50%}
.is-hero.pl-pos-left {width:min(720px,50vw); margin-top:-190px}
.pl-pos-top {text-align:center; width:min(1040px,90vw); margin:0 auto; top:12%; left:0; right:0}
.pl-pos-top h2 {font-size:clamp(30px,3.6vw,60px)}
.pl-pos-topleft {left:var(--pl-gutter); width:min(560px,44vw); top:14%}
.pl-pos-bottom {text-align:center; width:min(760px,90vw); margin:0 auto; bottom:8%; left:0; right:0}
.pl-kicker {color:var(--pl-accent); font-family:var(--pl-mono); letter-spacing:.22em; align-items:center; gap:10px; margin-bottom:18px; font-size:12px; display:inline-flex}
.pl-kicker b {color:var(--pl-ink); border-right:1px solid var(--pl-line); padding-right:10px; font-weight:600}
.pl-pulse {background:var(--pl-accent); border-radius:50%; width:7px; height:7px; animation:2.2s infinite pl-pulse-692fa6a5}
@keyframes pl-pulse-692fa6a5 {0% {box-shadow:0 0 #7fe8ff99}
70% {box-shadow:0 0 0 10px #7fe8ff00}
to {box-shadow:0 0 #7fe8ff00}
}
.pl h1,.pl h2 {letter-spacing:-.01em; margin:0; font-weight:800}
.pl h1 {font-size:clamp(44px,5.5vw,96px); line-height:1.06}
.pl h1 span {white-space:nowrap; display:block}
.pl h2 {font-size:clamp(34px,4.2vw,68px); line-height:1.08}
.pl-grad {background:linear-gradient(100deg,#fff 0%,#bff3ff 30%,#a78bfa 70%,#ffb3d2 100%); color:#0000; -webkit-background-clip:text; background-clip:text}
.pl-chapter p {color:var(--pl-muted); margin:22px 0 0; font-size:clamp(15px,1.15vw,18px); line-height:1.75}
.pl-pos-top p,.pl-pos-bottom p {margin-top:14px}
.pl-actions {flex-wrap:wrap; gap:12px; margin-top:34px; display:flex}
.pl-pos-bottom .pl-actions {justify-content:center; margin-top:26px}
.pl-tags {flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none; display:flex}
.pl-tags li {border:1px solid var(--pl-line); color:var(--pl-muted); background:#ffffff09; border-radius:999px; padding:7px 14px; font-size:13px}
.pl-tags.is-play li:before {content:"▶"; color:var(--pl-accent); margin-right:8px; font-size:9px}
.pl-chips {z-index:8; pointer-events:none; position:absolute; top:0; left:0; width:100%; height:100%}
.pl-chip {color:var(--pl-ink); white-space:nowrap; will-change:transform, opacity; pointer-events:auto; cursor:default; background:#0a0e1ac7; border:1px solid #ffffff1a; border-radius:999px; align-items:center; gap:7px; padding:5px 11px 5px 5px; font-size:12px; transition:border-color .25s,background .25s,box-shadow .25s; display:flex; position:absolute; top:0; left:0}
.pl-chip img {object-fit:contain; background:#ffffff0f; border-radius:50%; width:20px; height:20px; padding:2px}
.pl-chip em {color:var(--pl-faint); max-width:0; font-size:11px; font-style:normal; transition:max-width .3s; overflow:hidden}
.pl-chip:hover {background:#101a2eeb; border-color:#7fe8ff8c; box-shadow:0 0 24px #7fe8ff59}
.pl-chip:hover em {max-width:60px}
.pl-hud {z-index:9; opacity:0; pointer-events:none; will-change:transform, opacity; position:absolute; top:0; left:0}
.pl-hud-input {align-items:center; gap:14px; padding:0 12px 0 16px; display:flex}
.pl-model-pill {border:1px solid var(--pl-line); background:#ffffff12; border-radius:999px; flex:none; align-items:center; gap:6px; padding:6px 10px; font-size:13px; display:inline-flex}
.pl-model-pill img {width:16px; height:16px}
.pl-model-pill svg {width:12px; height:12px; color:var(--pl-muted)}
.pl-typed {white-space:nowrap; flex:1; min-width:0; font-size:clamp(14px,1.3vw,19px); overflow:hidden}
.pl-caret {vertical-align:-.18em; background:var(--pl-accent); width:2px; height:1.1em; margin-left:2px; animation:1s steps(2,end) infinite pl-blink-692fa6a5; display:inline-block}
@keyframes pl-blink-692fa6a5 {50% {opacity:0}
}
.pl-send {flex:none; place-items:center; width:34px; height:34px; margin-right:6px; display:grid}
.pl-send svg {width:18px; height:18px}
.pl-hud-chat {width:0; height:0}
.pl-chat-head {white-space:nowrap; align-items:center; gap:8px; font-size:13px; display:flex; position:absolute; top:0; left:0}
.pl-chat-head img {width:20px; height:20px}
.pl-chat-head em {font-style:normal; font-family:var(--pl-mono); color:var(--pl-faint); margin-left:4px; font-size:11px}
.pl-chat-head.is-done em {color:var(--pl-accent)}
.pl-step {font-family:var(--pl-mono); letter-spacing:.16em; color:var(--pl-faint); align-items:baseline; gap:8px; font-size:12px; display:flex; position:absolute; top:-34px; left:0}
.pl-step b {color:var(--pl-ink); letter-spacing:.05em; font-size:20px; font-weight:600}
.pl-bar {background:#ffffff1a; border-radius:2px; height:2px; position:absolute; bottom:-16px; left:0; right:0; overflow:hidden}
.pl-bar i {transform-origin:0; background:linear-gradient(90deg, var(--pl-accent), var(--pl-accent-2)); width:100%; height:100%; display:block; transform:scaleX(0)}
.pl-prompt {color:var(--pl-muted); white-space:nowrap; align-items:center; gap:10px; font-size:13px; display:flex; position:absolute; bottom:-54px; left:0}
.pl-prompt span {color:var(--pl-accent); background:#7fe8ff1f; border-radius:6px; padding:3px 8px; font-size:11px}
.pl-corner {border:0 solid #ffffffb3; width:22px; height:22px; position:absolute}
.pl-corner.is-tl {border-top-width:2px; border-left-width:2px; top:-10px; left:-10px}
.pl-corner.is-tr {border-top-width:2px; border-right-width:2px; top:-10px; right:-10px}
.pl-corner.is-bl {border-bottom-width:2px; border-left-width:2px; bottom:-10px; left:-10px}
.pl-corner.is-br {border-bottom-width:2px; border-right-width:2px; bottom:-10px; right:-10px}
.pl-rec {font-family:var(--pl-mono); letter-spacing:.14em; align-items:center; gap:8px; font-size:12px; display:flex; position:absolute; top:-40px; left:6px}
.pl-rec i {background:#ff4d6d; border-radius:50%; width:8px; height:8px; animation:1.2s steps(2,end) infinite pl-blink-692fa6a5; box-shadow:0 0 12px #ff4d6d}
.pl-rec b {color:var(--pl-muted); font-weight:500}
.pl-meta {font-family:var(--pl-mono); letter-spacing:.1em; color:var(--pl-faint); font-size:11px; position:absolute; top:-38px; right:6px}
.pl-scrub {background:#ffffff1f; height:2px; position:absolute; bottom:-26px; left:0; right:0}
.pl-scrub i {transform-origin:0; background:#fff; width:100%; height:100%; display:block}
.pl-hud-graph {width:0; height:0}
.pl-node-label {border:1px solid var(--pl-line); white-space:nowrap; background:#0a0e1acc; border-radius:999px; padding:4px 10px; font-size:12px; position:absolute; top:0; left:0}
.pl-node-label i {font-style:normal; font-family:var(--pl-mono); color:var(--pl-accent); margin-right:6px; font-size:10px}
.pl-cue {z-index:11; pointer-events:none; transition:opacity .4s; position:absolute; bottom:26px; left:50%; transform:translate(-50%)}
.pl-cue-in {color:#d6e2ff80; letter-spacing:.24em; white-space:nowrap; opacity:0; flex-direction:column; align-items:center; gap:9px; padding-left:.24em; font-size:11px; animation:1.2s 2.2s forwards pl-cue-in-692fa6a5,3.2s ease-in-out 3.4s infinite pl-cue-float-692fa6a5; display:flex}
.pl-cue-mouse {border:1.5px solid #ffffff5c; border-radius:10px; width:18px; height:28px; position:relative}
.pl-cue-mouse:after {content:""; background:var(--pl-accent); border-radius:1px; width:2px; height:5px; margin-left:-1px; animation:1.9s ease-in-out infinite pl-cue-wheel-692fa6a5; position:absolute; top:6px; left:50%}
.pl-cue-swipe,.pl-cue-touch {display:none}
.pl-cue-swipe {width:18px; height:18px; color:var(--pl-accent); animation:1.9s ease-in-out infinite pl-cue-swipe-692fa6a5}
.pl-cue-swipe svg {width:100%; height:100%}
@keyframes pl-cue-in-692fa6a5 {to {opacity:1}
}
@keyframes pl-cue-float-692fa6a5 {50% {transform:translateY(-3px)}
}
@keyframes pl-cue-wheel-692fa6a5 {0% {opacity:0; transform:translateY(0)}
20% {opacity:1}
70%,to {opacity:0; transform:translateY(9px)}
}
@keyframes pl-cue-swipe-692fa6a5 {0% {opacity:0; transform:translateY(5px)}
40% {opacity:1}
to {opacity:0; transform:translateY(-6px)}
}
@media (hover:none) and (pointer:coarse) {.pl-cue-mouse,.pl-cue-desk {display:none}
.pl-cue-swipe,.pl-cue-touch {display:block}
}
.pl-skip {z-index:26; right:var(--pl-gutter); border:1px solid var(--pl-line); color:var(--pl-faint); background:#0a0e1ab3; border-radius:999px; align-items:center; gap:6px; padding:8px 14px; font-size:12px; transition:opacity .4s,color .2s,border-color .2s; display:inline-flex; position:absolute; bottom:28px}
.pl-skip:hover {color:var(--pl-ink); border-color:#ffffff4d}
.pl-skip svg {width:14px; height:14px}
@media (max-width:760px) {.pl-nav {gap:12px; padding:14px 16px}
.pl-links,.pl-nav-actions .is-ghost,.pl-rail,.pl-prompt,.pl-meta {display:none}
.pl-cue {bottom:20px}
.pl-brand b {font-size:15px}
.pl-veil {background:linear-gradient(#03050a80 0%,#0000 14% 46%,#03050ae0 72%,#03050af5 100%)}
.pl-pos-left,.is-hero.pl-pos-left,.pl-pos-top,.pl-pos-topleft,.pl-pos-bottom {text-align:left; width:auto; margin:0; inset:auto 16px 84px}
.pl-pos-bottom {text-align:center; bottom:64px}
.pl h1 {font-size:40px}
.pl h2,.pl-pos-top h2 {font-size:30px}
.pl-chapter p {margin-top:12px; font-size:14px; line-height:1.65}
.pl-actions {margin-top:20px}
.pl-btn {height:42px; padding:0 18px; font-size:14px}
.pl-tags {margin-top:14px}
.pl-kicker {letter-spacing:.08em; margin-bottom:12px; font-size:11px}
.pl-chip {padding:3px 8px 3px 3px; font-size:11px}
.pl-chip img {width:16px; height:16px}
.pl-chat-head {gap:5px; font-size:11px}
.pl-chat-head img {width:14px; height:14px}
.pl-chat-head em {display:none}
.pl-skip {bottom:22px; right:16px}
}



/* ===================== 全球实时订阅表格（方形无线表格 + 定时轮换） ===================== */
.pl-sub-table {
  margin: 40px auto 0;
  width: min(720px, 92vw);
  border-radius: 18px;
  background: rgba(10, 14, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(127, 232, 255, 0.06);
  overflow: hidden;
  text-align: left;
}
.pl-sub-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pl-sub-head b { color: var(--pl-ink); font-size: 14px; letter-spacing: 0.04em; }
.pl-sub-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 10px #ff4d6d;
  animation: 1.6s ease-in-out infinite pl-sub-pulse;
}
.pl-sub-updated { margin-left: auto; color: var(--pl-faint); font-size: 11px; font-family: var(--pl-mono); letter-spacing: 0.08em; }
.pl-sub-rows { padding: 6px 20px 12px; }
.pl-sub-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.5fr) 1fr 1fr 72px;
  align-items: center; gap: 12px;
  padding: 8px 0;
  animation: pl-sub-in 0.5s ease both;
}
/* 无边框线：行间用极淡分隔（去掉也不影响无线风格，保留微弱层次） */
.pl-sub-row + .pl-sub-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.pl-sub-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.08); }
.pl-sub-name { color: var(--pl-ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.pl-sub-name i { font-style: normal; font-size: 9.5px; color: #8fa8d8; border: 1px solid rgba(140, 170, 255, 0.3); border-radius: 4px; padding: 0 4px; }
.pl-sub-plan { color: #a9c3ff; font-size: 12px; }
.pl-sub-tokens { color: #fff; font-size: 12.5px; font-weight: 600; }
.pl-sub-tokens em { font-style: normal; font-size: 10px; color: #8fa8c8; font-weight: 400; }
.pl-sub-time { color: var(--pl-faint); font-size: 11.5px; text-align: right; white-space: nowrap; }
@keyframes pl-sub-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes pl-sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width:760px) {
  .pl-sub-table { width: calc(100vw - 32px); }
  .pl-sub-row { grid-template-columns: 30px minmax(0, 1.4fr) 1fr 64px; }
  .pl-sub-plan { display: none; }
}

/* 品牌内联 SVG 标记（替代 favicon 引用） */
.pl-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: var(--pl-accent); background: rgba(127, 232, 255, 0.1); border: 1px solid rgba(127, 232, 255, 0.28); }
.pl-brand-mark svg { width: 18px; height: 18px; }

/* 品牌内联 SVG 标记（替代 favicon 引用） */
.pl-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: var(--pl-accent); background: rgba(127, 232, 255, 0.1); border: 1px solid rgba(127, 232, 255, 0.28); }
.pl-brand-mark svg { width: 18px; height: 18px; }
