/* lkhan.ai 综合站：亮灰粒子场景 + 播放时间轴 */
@font-face { font-family: "LK Display"; src: url(fonts/smiley.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(fonts/grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
:root {
  --disp: "LK Display", "Space Grotesk", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, "LK Display", monospace;
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, .8);
  --ink-3: rgba(255, 255, 255, .52);
  --line: rgba(255, 255, 255, .34);
  --accent: #e3f1ff;
  --shade: 0 1px 18px rgba(36, 44, 60, .38), 0 1px 3px rgba(36, 44, 60, .25);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #9aa2b0; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; text-shadow: var(--shade); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 500; }
.dim { color: var(--ink-3); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#spacer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 加载 */
#loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #b3b9c4, #6f7888 75%); transition: opacity 1s var(--ease), visibility 1s; }
#loader.done { opacity: 0; visibility: hidden; }
.ld-in { width: min(320px, 76vw); }
.ld-logo { font-family: var(--sans); font-weight: 700; font-size: 28px; letter-spacing: .34em; margin-bottom: 28px; text-align: center; }
.ld-row { display: flex; justify-content: space-between; color: var(--ink-2); margin-bottom: 10px; }
.ld-bar { height: 1px; background: var(--line); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .3s linear; }

/* ---------------------------------------------------------------- HUD */
.hud { position: fixed; z-index: 20; pointer-events: none; }
.hud a { pointer-events: auto; }
.hud-top { top: calc(var(--safe-t) + 22px); left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .32em; }
.logo b { color: var(--accent); }
.hud-r { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.hud-r .sep { color: var(--ink-3); }
#ch { color: var(--ink); }

/* 播放时间轴 */
.timeline { position: fixed; z-index: 20; left: 30px; right: 30px; bottom: calc(var(--safe-b) + 22px); display: flex; align-items: center; gap: 18px; }
.play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); display: grid; place-items: center; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s, background .3s; }
.play:hover { border-color: #fff; background: rgba(255, 255, 255, .3); }
.play svg { filter: drop-shadow(0 1px 3px rgba(36, 44, 60, .35)); }
.play svg { width: 15px; height: 15px; }
.play .i-pause, .play.on .i-play { display: none; }
.play.on .i-pause { display: block; }
.tl-body { flex: 1; position: relative; height: 40px; display: flex; align-items: center; }
.tl-track { position: relative; width: 100%; height: 1px; background: var(--line); }
#tl-fill { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9); }
#tl-head { position: absolute; top: -6px; width: 1px; height: 13px; background: #fff; box-shadow: 0 0 8px #fff; }
#ticks button { position: absolute; top: -18px; transform: translateX(-50%); width: 36px; height: 36px; display: grid; place-items: center; }
#ticks i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); transition: transform .4s var(--ease), background .3s; }
#ticks span { position: absolute; top: -12px; font-family: var(--disp); font-size: 13px; color: var(--ink-3); white-space: nowrap; transition: color .3s; }
#ticks button.on i { background: #fff; transform: scale(1.7); box-shadow: 0 0 10px #fff; }
#ticks button.on span, #ticks button:hover span { color: var(--ink); }
.tl-time { flex: none; color: var(--ink); min-width: 90px; text-align: right; }

/* ---------------------------------------------------------------- 面板（由脚本按播放进度控制透明度和位移） */
#panels { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.panel { position: absolute; left: 7vw; top: 50%; width: min(520px, 40vw); transform: translateY(-50%); opacity: 0; will-change: opacity, transform; }
.panel.on { pointer-events: auto; }
.panel .kick { display: flex; gap: 14px; align-items: center; color: var(--ink-2); margin-bottom: 20px; }
.panel .kick b { color: #fff; font-weight: 700; }
.panel .kick b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #fff); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.panel .kick .bar { width: 64px; height: 1px; background: rgba(255, 255, 255, .6); }
.panel.proj::before { content: ""; position: absolute; inset: -22% -30% -22% -45%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(52, 60, 78, .34), rgba(52, 60, 78, 0)); }
.panel h2 { font-family: var(--disp); font-weight: 400; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; margin: 0 0 20px; letter-spacing: .01em; }
.panel p { font-size: 16.5px; line-height: 1.8; color: var(--ink-2); margin: 0 0 24px; max-width: 30em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.tags span { font-family: var(--disp); font-size: 15px; padding: 6px 12px 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(60, 70, 90, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.go { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .75); color: #fff; font-family: var(--disp); font-size: 19px; background: rgba(60, 70, 90, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: none; overflow: hidden; isolation: isolate; transition: color .35s var(--ease); }
.go::before { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); z-index: -1; }
.go:hover { color: #3b4454; }
.go:hover::before { transform: scaleX(1); transform-origin: left; }
.go svg { width: 16px; height: 16px; }
.go .host { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; opacity: .75; }

/* 首屏 */
.panel.hero { left: 50%; top: auto; bottom: calc(var(--safe-b) + 14vh); transform: translateX(-50%); width: min(900px, 90vw); text-align: center; }
.panel.hero h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(52px, 10vw, 150px); letter-spacing: .1em; margin: 0 0 18px; line-height: .95; padding-left: .1em;
  color: #fff; text-shadow: 0 4px 40px rgba(36, 44, 60, .35); }
.panel.hero p { margin: 0 auto; max-width: 34em; font-size: 16px; }
.panel.hero .kick { justify-content: center; }
.si { font-weight: 700; color: #fff; border-bottom: 1px dotted rgba(255, 255, 255, .7); }
.si sup { font-size: .7em; margin-left: 1px; color: var(--accent); }
.fn { margin-top: 14px; color: var(--ink-3); font-size: 10.5px; letter-spacing: .16em; }

/* 页脚 */
.panel.foot { left: 50%; top: auto; bottom: calc(var(--safe-b) + 92px); transform: translateX(-50%); width: min(1000px, 92vw); }
.panel.foot .kick { justify-content: center; }
.links { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.links a { display: flex; align-items: center; gap: 14px; padding: 18px 8px; border-bottom: 1px solid var(--line); transition: background .3s, color .3s; }
.links a:nth-child(3n+2), .links a:nth-child(3n+3) { border-left: 1px solid var(--line); padding-left: 20px; }
.links a .n { color: var(--ink-3); }
.links a .t { font-family: var(--disp); font-size: 22px; flex: 1; }
.links a svg { width: 14px; height: 14px; opacity: .55; transition: transform .4s var(--ease), opacity .3s; }
.links a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.links a:hover .n { color: var(--c); }
.links a:hover svg { transform: translate(3px, -3px); opacity: 1; }
.copy { text-align: center; margin-top: 20px; color: var(--ink-3); }

.scr { color: #dbeaff; opacity: .9; }

/* ---------------------------------------------------------------- 光标 */
#cursor { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; display: none; }
#cursor i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; transition: transform .35s var(--ease), background .3s; }
#cursor span { position: absolute; left: 24px; top: -10px; white-space: nowrap; font-family: var(--disp); font-size: 15px; opacity: 0; transition: opacity .25s; }
#cursor.hot i { transform: scale(2); background: rgba(255, 255, 255, .16); }
#cursor.hot span { opacity: 1; }
@media (pointer: fine) { #cursor { display: block; } }

/* ---------------------------------------------------------------- 无 WebGL：退回普通列表 */
.no-gl #gl, .no-gl #spacer, .no-gl .timeline, .no-gl #loader { display: none; }
.no-gl { background: linear-gradient(#5f6879, #a3aab7) fixed; }
.no-gl #panels { position: static; padding: 100px 7vw 60px; }
.no-gl .panel { position: static; transform: none !important; opacity: 1 !important; pointer-events: auto; width: auto; margin: 0 0 80px; }
.nojs { padding: 100px 7vw; font-size: 20px; line-height: 2.2; }

/* ---------------------------------------------------------------- 手机 */
@media (max-width: 760px) {
  .hud-top { left: 18px; right: 18px; top: calc(var(--safe-t) + 16px); }
  .hud-r #clock, .hud-r .sep, .hud-r .dim { display: none; }
  .timeline { left: 14px; right: 16px; bottom: calc(var(--safe-b) + 14px); gap: 12px; }
  .play { width: 36px; height: 36px; }
  #ticks span { display: none; }
  .tl-time { min-width: 0; font-size: 10px; }
  .panel { left: 22px; right: 22px; width: auto; top: auto; bottom: calc(var(--safe-b) + 78px); transform: none; }
  .panel h2 { font-size: 46px; margin-bottom: 12px; }
  .panel p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
  .tags { margin-bottom: 20px; }
  .tags span { font-size: 14px; }
  .go { height: 48px; padding: 0 20px; font-size: 17px; }
  .panel.hero { left: 22px; right: 22px; transform: none; width: auto; bottom: calc(var(--safe-b) + 110px); }
  .panel.hero h1 { font-size: 14vw; letter-spacing: .06em; padding-left: .06em; }
  .panel.foot { left: 14px; right: 14px; transform: none; width: auto; bottom: calc(var(--safe-b) + 70px); }
  .links { grid-template-columns: 1fr 1fr; }
  .links a, .links a:nth-child(3n+2), .links a:nth-child(3n+3) { border-left: 0; padding: 14px 4px; }
  .links a:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 14px; }
  .links a .t { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }