/* Kanghe Lyu site — shared design system and compact media dock */

:root {
  --bg-deep: #060d14;
  --panel: rgba(8, 18, 27, 0.86);
  --gold: #f4d9a0;
  --gold-bright: #ffe4b8;
  --gold-dim: #b99b61;
  --cyan: #a8e6e6;
  --cyan-bright: #d0ffff;
  --cyan-dim: #5ca8b0;
  --paper: #fff7e8;
  --ink: #f4ead9;
  --subtle: #cfc2a4;
  --muted: #96a9bc;
  --line: rgba(168, 230, 230, 0.16);
  --line-soft: rgba(168, 230, 230, 0.08);
  --focus: #ffe4b8;
  --shadow-dock: 0 14px 42px rgba(0, 0, 0, 0.34);
  --radius-md: 12px;
  --content-width: 920px;
  --reading-width: 720px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --font-body: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --glass-bg: linear-gradient(120deg, rgba(160, 224, 244, 0.09), rgba(160, 224, 244, 0.03) 42%, rgba(255, 240, 214, 0.06));
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--paper);
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  line-height: 1.7;
}

/* All pages scroll at the document level. The scene canvas #bg is
   position:fixed with a stable 100lvh box (unified-polish.css), so the
   background never follows the scroll. Horizontal movement stays locked:
   clip rather than hidden so the vertical axis is never turned into a
   second scroll container, and touch-action only permits vertical panning.
   stacks-dark keeps its own shell layout via its inline styles. */
html { overflow-x: clip; }
body { overscroll-behavior: none; overflow-x: clip; touch-action: pan-y; }
::selection { background: rgba(168, 230, 230, 0.2); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

a { color: var(--cyan); text-decoration: none; transition: color var(--motion-fast) ease, text-shadow var(--motion-base) ease; }
a:hover { color: var(--cyan-bright); text-shadow: 0 0 12px rgba(168, 230, 230, 0.34); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(1deg); }
}

@keyframes playlistReveal {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.media-dock {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  padding: 4px 6px;
  border: 1px solid rgba(168, 230, 230, 0.2);
  border-radius: 12px;
  background: rgba(7, 16, 24, 0.82);
  box-shadow: var(--shadow-dock);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.media-dock button {
  min-width: 38px;
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--subtle);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.media-dock button:hover { background: rgba(168, 230, 230, 0.1); color: var(--cyan-bright); }
.media-dock button:active { transform: scale(0.96); }
.lang-toggle { min-width: auto !important; padding: 0 10px; color: var(--cyan) !important; font-size: 0.78rem; letter-spacing: 0.04em; white-space: nowrap; }
.dock-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--line-soft); }
.track-btn { font-size: 1.25rem; line-height: 1; }
.music-toggle { min-width: 52px !important; padding: 0 10px; color: var(--gold) !important; font-size: 0.78rem; letter-spacing: 0.03em; }
.music-toggle.playing { color: var(--cyan) !important; }
.track-label { max-width: 92px; padding: 0 8px; overflow: hidden; color: var(--muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.playlist-toggle { padding: 0 10px; color: var(--gold) !important; font-size: 0.78rem; letter-spacing: 0.03em; }
.playlist-panel { position: absolute; right: 4px; bottom: calc(100% + 8px); width: 188px; max-height: min(320px, calc(100lvh - 88px)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-dock); transform-origin: right bottom; }
.playlist-panel.collapsed { display: none; }
.playlist-panel:not(.collapsed) { animation: playlistReveal 220ms var(--ease-out) both; }
.playlist-list { max-height: min(240px, calc(100lvh - 120px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(244, 217, 160, 0.38) transparent; scrollbar-width: thin; }
.playlist-item { display: block; width: 100%; min-height: 36px; padding: 7px 12px; border: 0; border-bottom: 1px solid rgba(168, 230, 230, 0.06); background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-size: 0.8rem; }
.playlist-item:hover, .playlist-item.active { background: rgba(168, 230, 230, 0.1); color: var(--cyan-bright); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 20px; border: 1px solid rgba(244, 217, 160, 0.26); border-radius: var(--radius-md); background: rgba(15, 28, 34, 0.48); color: var(--paper); font-size: 0.93rem; letter-spacing: 0.03em; transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) ease, background var(--motion-base) ease; }
.button:hover { transform: translateY(-2px); border-color: var(--gold); color: #fff; background: rgba(168, 230, 230, 0.09); }
.button-primary { border-color: rgba(168, 230, 230, 0.38); background: rgba(168, 230, 230, 0.08); }
.button-quiet { border-color: var(--line-soft); color: var(--subtle); }

@media (max-width: 760px) {
  .media-dock { right: 12px; bottom: 12px; left: 12px; justify-content: center; }
  .track-label { max-width: 74px; }
  .playlist-panel { right: 0; width: min(188px, calc(100vw - 24px)); }
}



/* Liquid Glass surfaces. This is copied from the 20260826 subpage cards;
   the runtime attaches their inline SVG displacement filter directly. */
:root {
  --glass-border: rgba(220, 255, 255, 0.38);
  --glass-highlight: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 18px 46px rgba(0, 0, 0, 0.16), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(112, 235, 255, 0.22);
}
.media-dock, .playlist-panel, .button, .glass-panel, .note, .project, .instructions, .preview-box, .file-links, .bookmarklet, .file-links a, .lang-toggle button, input, textarea, select {
  position: relative;
  border: 1px solid var(--glass-border);
  background: linear-gradient(120deg, rgba(160, 224, 244, 0.09), rgba(160, 224, 244, 0.03) 42%, rgba(255, 240, 214, 0.06));
  box-shadow: var(--glass-shadow);
  backdrop-filter: saturate(1.35) contrast(1.05);
  -webkit-backdrop-filter: saturate(1.35) contrast(1.05);
  isolation: isolate;
  overflow: clip;
}
.media-dock.liquid-glass { background: rgba(7, 16, 24, 0.58); overflow: visible; }
.liquid-glass::before, .glass-panel::before, .note::before, .project::before, .instructions::before, .preview-box::before, .playlist-panel::before, .bookmarklet::before, .file-links::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1.5px solid rgba(228, 252, 255, 0.42);
  border-radius: inherit;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 2px 8px rgba(214, 250, 255, 0.18),
    inset 0 -3px 10px rgba(96, 208, 240, 0.16),
    0 0 18px rgba(120, 226, 255, 0.09);
  content: "";
  opacity: 0.95;
  pointer-events: none;
  mix-blend-mode: screen;
}
.liquid-glass::after, .glass-panel::after, .note::after, .project::after, .instructions::after, .preview-box::after, .playlist-panel::after, .bookmarklet::after, .file-links::after {
  display: none;
}
/* Re-assert the dock's fixed positioning after the glass group above,
   which resets position to relative for the refraction layers. */
.media-dock { position: fixed; right: 24px; bottom: 22px; z-index: 100; height: 46px; min-height: 46px; max-height: 46px; border-radius: 20px; contain: layout style; }
.playlist-panel { position: absolute !important; right: 4px; bottom: calc(100% + 8px); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
.media-dock + .playlist-panel { position: fixed !important; right: 28px; bottom: 76px; z-index: 100; }
.button:hover, .note:hover, .project:hover, .instructions:hover, .preview-box:hover {
  border-color: rgba(208,255,255,0.42);
  box-shadow: 0 20px 54px rgba(0,0,0,0.3), 0 0 34px rgba(168,230,230,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
}

@media (prefers-reduced-motion: reduce) {
  .project-icon, .playlist-panel { animation: none !important; }
}

@media (max-width: 760px) {
  .media-dock + .playlist-panel { right: 12px; bottom: 66px; }
}