/* CAOJIALE · Liquid Glass web material. Explicitly requested by the owner.
   Keep the existing layout; use expensive backdrop filtering on UI, never message lists. */
:root {
  --lg-clear: color-mix(in srgb, var(--surface) 63%, transparent);
  --lg-thick: color-mix(in srgb, var(--surface) 88%, transparent);
  --lg-edge: rgba(255,255,255,.98);
  --lg-low-edge: color-mix(in srgb, var(--accent) 17%, transparent);
  --lg-shadow: 0 5px 13px -9px rgba(26,51,73,.28), inset 0 1px 1px var(--lg-edge), inset 0 -1px 1px var(--lg-low-edge), inset 0 -3px 4px -3px rgba(255,255,255,.85);
  --lg-glint: rgba(255,255,255,.92);
  --lg-sheen: rgba(255,255,255,.42);
  --lg-blur: 14px;
}
:root[data-theme="dark"] {
  --lg-clear: rgba(39,47,55,.70); --lg-thick: rgba(26,32,39,.94);
  --lg-edge: rgba(255,255,255,.23); --lg-glint: rgba(255,255,255,.18);
  --lg-sheen: rgba(255,255,255,.10); --lg-low-edge: rgba(0,0,0,.32);
  --lg-shadow: 0 5px 16px -8px rgba(0,0,0,.48), inset 0 1px 1px var(--lg-edge), inset 0 -1px 1px var(--lg-low-edge);
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --lg-clear: rgba(39,47,55,.70); --lg-thick: rgba(26,32,39,.94);
    --lg-edge: rgba(255,255,255,.23); --lg-glint: rgba(255,255,255,.18);
    --lg-sheen: rgba(255,255,255,.10); --lg-low-edge: rgba(0,0,0,.32);
    --lg-shadow: 0 5px 16px -8px rgba(0,0,0,.48), inset 0 1px 1px var(--lg-edge), inset 0 -1px 1px var(--lg-low-edge);
  }
}
/* The same material reaches controls rendered later by the inbox and pet. */
html body :is(.btn,.go,.icon-btn,.nav-item,.h-top nav a,.tabs button,.reel-nav button,.c-toggle,.r-scroll-hint,.pet-tip-choices button,.pc-form button,.primary,.back,.cta,.prompt,.prompts button,.chips button,.c-btns button,.opt,.new-chat,.v-back,.back-home,.menu > button,.r-basic a,.linkish,.seg button,.fp-button,.fp-link) {
  background-color:var(--lg-clear);
  background-image:radial-gradient(ellipse at 28% 0%,var(--lg-glint),transparent 68%),linear-gradient(118deg,transparent 18%,var(--lg-sheen) 35%,transparent 48%),linear-gradient(175deg,var(--lg-sheen),transparent 42%,color-mix(in srgb,var(--accent) 9%,transparent) 78%,var(--lg-sheen));
  border-color:var(--lg-edge);
  box-shadow:var(--lg-shadow);
  border-radius:999px;
  color:var(--text);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background-color 180ms ease,box-shadow 220ms ease,scale 220ms var(--ease-out,ease),color 180ms ease;
  -webkit-tap-highlight-color:transparent;
}
html body :is(.go:not(.go-soft):not(.go-cv),.btn.primary,button.primary,.pc-form button[type="submit"]) {
  background-color:color-mix(in srgb,var(--primary) 91%,transparent);
  background-image:radial-gradient(ellipse at 25% 0%,rgba(255,255,255,.46),transparent 68%),linear-gradient(118deg,transparent 17%,rgba(255,255,255,.14) 36%,transparent 49%),linear-gradient(175deg,rgba(255,255,255,.18),transparent 50%,rgba(255,255,255,.09));
  border-color:rgba(255,255,255,.28);color:var(--primary-ink);
  box-shadow:0 6px 18px -10px rgba(14,36,56,.5),inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(0,0,0,.18);
}
html body :is(.go.go-cv,.go.go-soft) { animation:none; background-size:100% 100%; }
html body .go.go-cv::after { display:none; }
html body :is(.btn.danger,.btn[data-danger]) { color:var(--negative); }
html body :is(.nav-item[aria-current="page"],.h-top nav a[aria-current="page"],.tabs button[aria-selected="true"]) {
  background-color:color-mix(in srgb,var(--accent-pale) 86%,transparent);color:var(--text);
  box-shadow:var(--lg-shadow),inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);
}
@media(hover:hover) and (pointer:fine) {
  html body :is(.btn,.go,.icon-btn,.nav-item,.h-top nav a,.c-toggle,.reel-nav button,.pet-tip-choices button,.opt,.new-chat):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color:color-mix(in srgb,var(--surface) 82%,transparent);
    box-shadow:0 9px 22px -12px rgba(26,51,73,.38),inset 0 1px 1px var(--lg-edge),inset 0 -1px 1px var(--lg-low-edge);
    scale:1.025;
  }
  html body :is(.go:not(.go-soft):not(.go-cv),.btn.primary,button.primary):hover:not(:disabled) {background-color:var(--primary-hover);color:var(--primary-ink);}
}
html body :is(.btn,.go,.icon-btn,.nav-item,.h-top nav a,.c-toggle,.pet-tip-choices button):active:not(:disabled) {scale:.975;}
html body :is(.btn,.go,.icon-btn,.nav-item,.h-top nav a,button.primary):focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
html body :is(.btn,.go,.icon-btn,button.primary):disabled {opacity:.5;scale:1;}
/* Only compact navigation and floating layers blur their surroundings. */
html body :is(.h-top,.page .h-top,.h-top.scrolled,.m-top) {
  background:linear-gradient(110deg,var(--lg-sheen),transparent 52%,var(--lg-sheen)),var(--lg-thick);border-bottom:1px solid var(--lg-edge);
  box-shadow:0 5px 24px -20px rgba(26,51,73,.3),inset 0 -1px var(--lg-low-edge);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
}
html body .h-top.on-photo:not(.scrolled) :is(.brand,nav a,.icon-btn) {color:var(--text);}
html body :is(dialog.dlg,.menu,.pet-chat,.pet-tip,.pc-panel) {
  background:var(--lg-thick);border:1px solid var(--lg-edge);border-radius:24px;
  box-shadow:0 24px 64px -28px rgba(15,32,48,.4),inset 0 1px 1px var(--lg-edge),inset 0 -1px var(--lg-low-edge);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
}
html body dialog.dlg::backdrop {background:rgba(20,35,49,.25);}
html body :is(.composer,.restore,.pc-form,.chat-head,.convo .who,.pc-head) {
  background:var(--lg-thick);border-color:var(--lg-edge);box-shadow:var(--lg-shadow);
}
html body .composer {border-radius:22px;}
html body :is(.input,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea:not(.composer textarea)) {
  background-color:color-mix(in srgb,var(--surface) 88%,var(--ground));
  background-image:linear-gradient(155deg,color-mix(in srgb,var(--surface) 80%,transparent),transparent);
  border-color:color-mix(in srgb,var(--control) 75%,transparent);border-radius:12px;
  box-shadow:inset 0 2px 4px rgba(32,59,78,.035),0 1px 0 var(--lg-edge);
}
html body :is(.input,input,textarea,select):focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
/* Titles are etched glass, not translucent text: retain their accessible ink. */
html body :is(h1:not(.monument),h2,h3,.pc-head b,.brand) {
  text-shadow:0 1px 0 var(--lg-edge),0 3px 9px color-mix(in srgb,var(--accent) 13%,transparent);
}
html body :is(.r-name,.asks-h,.doors-head h2,.w-head h1,#owner-name) {
  filter:none;
}
html body .monument .word {
  -webkit-text-stroke:.4px color-mix(in srgb,var(--surface) 32%,transparent);
  filter:none;
}
html body :is(.door,.r-card,.edu,.w-entry,.w-item,.stat-card) {
  border-color:var(--lg-edge);box-shadow:inset 0 1px 0 var(--lg-edge),inset 0 -1px 0 var(--lg-low-edge);
  background-color:color-mix(in srgb,var(--surface) 94%,transparent);
}
/* Performance and accessibility fallbacks. No SVG displacement / full-screen GPU loop. */
@media(max-width:680px) { :root{--lg-blur:8px;} html body :is(.h-top,.page .h-top,.h-top.scrolled,.m-top){-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);} }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root{--lg-clear:var(--surface);--lg-thick:var(--surface);}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root{--lg-clear:var(--surface);--lg-thick:var(--surface);--lg-edge:var(--control);}
  html body :is(.btn,.go,.icon-btn,.nav-item,.h-top,dialog.dlg,.menu,.pet-chat,.pet-tip){-webkit-backdrop-filter:none;backdrop-filter:none;background-image:none;}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(.btn,.go,.icon-btn,.nav-item,.h-top nav a,.c-toggle,.pet-tip-choices button){transition:none;scale:1;}
}
@media print {
  html body :is(.btn,.go,.icon-btn,.nav-item,.h-top,dialog.dlg,.menu,.composer,h1,h2,h3){box-shadow:none;text-shadow:none;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* Sticky mobile composers must obscure underlying identity fields. */
html body #composer.composer, html body .composer.composer {
  animation:none;
  background:linear-gradient(165deg,var(--lg-sheen),transparent 32%),var(--surface);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html body .restore {border-radius:18px;}
html body .opt[aria-pressed="true"] {background-color:var(--accent-pale);color:var(--accent);box-shadow:var(--lg-shadow),inset 0 0 0 1px var(--accent);}
html body .menu > button {border-radius:10px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;}
@media(max-width:680px) {html body .actions-hero .go-entry>.go:only-child{width:100%;}}

/* Bright reflected rims on content surfaces, without GPU backdrop layers. */
html body :is(.door,.edu,.courses,.skills>div,.r-card,.w-entry,.w-item,.stat-card,.panel,.a-card) {
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,transparent),transparent 24%),linear-gradient(175deg,transparent 75%,color-mix(in srgb,var(--accent-pale) 45%,transparent));
  box-shadow:inset 0 1px 0 var(--lg-edge),inset 1px 0 0 color-mix(in srgb,var(--surface) 80%,transparent),inset 0 -1px 0 var(--lg-low-edge);
}
html body :is(.bubble,.row,.post,.post-card,.msg,.sheet,.a-sheet) {
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* Coarse pointers need neither moving highlights nor an extra translucent compositor. */
@media(hover:none),(pointer:coarse){
  html body :is(.composer,.pet-chat,.pet-tip,.menu){background-color:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
/* An open overlay already owns the blur; never compound it in child controls. */
html body :is(.h-top,.m-top,dialog,.menu,.pet-chat,.pet-tip) :is(.btn,.go,.icon-btn,.opt,.nav-item,button,a) {
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html body :is(.h-top,.page .h-top,.m-top,dialog.dlg,.menu,.pet-chat,.pet-tip,.pc-panel,.composer){background-color:var(--surface);background-image:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
/* Hidden pet dialogs do not retain an offscreen glass compositor. */
html body .pet-chat:not(.open) {-webkit-backdrop-filter:none;backdrop-filter:none;}

/* Integrated material hierarchy: floating navigation, shared action well, quiet content. */
:root {--lg-motion:cubic-bezier(.2,.8,.2,1);--lg-panel-rim:color-mix(in srgb,var(--surface) 92%,transparent);}
html body :is(.h-top,.page .h-top,.h-top.scrolled) {
  background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
html body .h-top > .brand {
  height:38px;padding:0 12px;border-radius:999px;
  background:linear-gradient(155deg,var(--lg-sheen),transparent 60%),var(--lg-thick);
  box-shadow:var(--lg-shadow);border:1px solid var(--lg-edge);
}
html body .h-top nav {
  position:relative;isolation:isolate;gap:3px;padding:4px;border-radius:999px;
  background:linear-gradient(140deg,var(--lg-sheen),transparent 55%),var(--lg-thick);
  border:1px solid var(--lg-edge);box-shadow:var(--lg-shadow);
  -webkit-backdrop-filter:blur(12px) saturate(135%);backdrop-filter:blur(12px) saturate(135%);
}
html body .h-top nav > :is(a,button) {
  position:relative;z-index:1;min-height:32px;
  background:none;border-color:transparent;box-shadow:none;
}
html body .h-top nav > :is(a,button):hover,
html body .h-top nav > a[aria-current="page"] {background:none;box-shadow:none;}
html body .h-top nav .lg-nav-lens {
  position:absolute;left:0;top:4px;bottom:4px;z-index:0;pointer-events:none;
  width:var(--lg-lens-width,32px);border-radius:999px;opacity:0;
  transform:translateX(var(--lg-lens-left,4px));
  background:linear-gradient(155deg,var(--lg-edge),transparent 78%),color-mix(in srgb,var(--accent-pale) 72%,var(--surface));
  box-shadow:inset 0 1px 0 var(--lg-edge),0 2px 6px -3px rgba(23,46,65,.22);
  transition:transform 340ms var(--lg-motion),width 280ms var(--lg-motion),opacity 150ms ease;
}
html body .h-top nav[data-lg-lens="on"] .lg-nav-lens {opacity:1;}
html body .actions-hero {
  padding:8px;border-radius:34px;
  background:linear-gradient(145deg,var(--lg-sheen),transparent 48%),color-mix(in srgb,var(--surface) 38%,transparent);
  box-shadow:inset 0 1px 0 var(--lg-edge),inset 0 -1px 0 var(--lg-low-edge);
}
html body :is(.sheet,.a-sheet,.panel) {
  border-color:var(--lg-panel-rim);border-radius:22px;
  background-image:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,transparent),transparent 36%);
  box-shadow:inset 0 1px 0 var(--lg-edge),inset 1px 0 0 var(--lg-panel-rim),0 8px 24px -24px rgba(25,49,70,.2);
}
html body .door-chat {background-color:color-mix(in srgb,var(--accent-pale) 72%,var(--surface));}
html body :is(.door,.edu,.skills>div,.panel,.courses) {border-radius:22px;}
html body :is(.r-sec>h2,.doors-head h2,.w-head h1,.col-head h1) {text-shadow:0 1px 0 var(--lg-edge),0 4px 12px color-mix(in srgb,var(--accent) 12%,transparent);}
/* Composited reflection: transform a small light layer instead of repainting the gradient. */
html body :is(.go,.btn,.icon-btn) {position:relative;isolation:isolate;overflow:hidden;}
html body :is(.go,.btn,.icon-btn)::after,
html body .go.go-cv::after {
  display:block;content:"";position:absolute;inset:-20% -30%;z-index:-1;pointer-events:none;
  border-radius:inherit;opacity:0;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.38) 46%,rgba(255,255,255,.10) 55%,transparent 68%);
  background-size:100% 100%;
  transform:translateX(-18%);transition:opacity 220ms ease,transform 420ms var(--lg-motion);
  animation:none;
}
@media(hover:hover) and (pointer:fine) {
  html body :is(.go,.btn,.icon-btn)[data-lg-active]::after {opacity:1;transform:translate3d(var(--lg-light-x,0%),0,0);transition:opacity 220ms ease;}
}
/* A short elastic response on activation; no looping glass animation. */
html body :is(.go,.btn,.icon-btn,.nav-item,.opt) {transition:scale 260ms var(--lg-motion),background-color 180ms ease,box-shadow 220ms ease,color 180ms ease;}
html body :is(.go,.btn,.icon-btn,.nav-item,.opt):active:not(:disabled) {scale:.96;}
html body dialog.dlg[open] {animation:lg-material-in 320ms var(--lg-motion) both;}
@keyframes lg-material-in {from{opacity:.2;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:680px) {
  html body .h-top > .brand {padding:0 10px;height:36px;gap:7px;}
  html body .h-top nav {gap:0;padding:3px;-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);}
  html body .h-top nav .lg-nav-lens {top:3px;bottom:3px;}
  html body .actions-hero {padding:7px;border-radius:30px;}
  html body :is(.sheet,.a-sheet,.panel) {border-radius:20px;}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(.go,.btn,.icon-btn,.nav-item,.opt),html body .h-top nav .lg-nav-lens {transition:none;scale:1;}
  html body :is(.go,.btn,.icon-btn)::after {display:none;}
  html body dialog.dlg[open] {animation:none;}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  html body :is(.actions-hero,.h-top>.brand,.h-top nav) {background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media print {
  html body .h-top nav {-webkit-backdrop-filter:none;backdrop-filter:none;}
  html body .lg-nav-lens {display:none;}
}

/* Newly added footprints share the same material, without filtering map tiles. */
html body :is(.fp-entry,.fp-map-panel,.fp-empty,.fp-admin details) {
  background:linear-gradient(145deg,var(--lg-sheen),transparent 35%),var(--surface);
  color:var(--text);border:1px solid var(--lg-panel-rim);border-radius:22px;
  box-shadow:inset 0 1px 0 var(--lg-edge),0 7px 22px -24px rgba(25,49,70,.3);
}
html body .fp-entry.active {background-color:var(--accent-pale);}
html body .fp-dialog {background:var(--lg-thick);color:var(--text);border:1px solid var(--lg-edge);border-radius:24px;box-shadow:0 20px 50px -24px rgba(20,40,60,.35);}
html body .fp-top>a {padding:6px 12px;border-radius:999px;background:var(--lg-thick);box-shadow:var(--lg-shadow);}
html body .fp-map {-webkit-backdrop-filter:none;backdrop-filter:none;}

/* Natural lake UI · one palette, three surfaces: title / reading / interaction.
   Static optical edges only. No additional backdrop layers, idle loops or dependencies. */
:root {
  --ui-paper:var(--surface);
  --ui-well:color-mix(in srgb,var(--accent-pale) 46%,var(--surface));
  --ui-title:color-mix(in srgb,var(--accent) 23%,var(--surface));
  --ui-title-ink:color-mix(in srgb,var(--accent) 65%,var(--text));
  --ui-edge:color-mix(in srgb,var(--accent) 13%,var(--surface));
  --ui-rim:inset 0 1px 0 var(--lg-edge),inset 0 -1px 0 var(--ui-edge);
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
html {scroll-padding-top:88px;}
html body :is(.input,textarea,input,select)::placeholder {color:var(--faint);opacity:1;}
html body :is(.moment,.qa,.v-main,.a-sheet) :is(h2,h3,b) {text-shadow:none;}
html body :is(.msg .bubble,.qa .q,.qa .a p,.moment .txt,.fp-text) {text-wrap:pretty;}
html body :is(.btn,.go,.icon-btn,.qa-share,.acts button,.fp-focus):focus-visible {outline:3px solid var(--accent);outline-offset:4px;}
html body :is(.h-top>.brand,.h-top nav) {border-color:var(--ui-edge);}
/* Public reading surfaces stay quiet enough to let photography and words lead. */
html body .col-head .who {
  padding:14px 16px;border-radius:22px;background:var(--ui-well);box-shadow:var(--ui-rim);
}
html body .col-head .who .avatar {flex:none;border:3px solid var(--surface);}
html body .col-head h1 {color:var(--ui-title-ink);}
html body .col-head .me {padding:12px 16px;border-radius:18px;background:var(--ui-well);line-height:1.65;}
html body .moment {
  margin:0 0 18px;padding:26px 24px 24px;border-radius:26px;
  border:1px solid var(--ui-edge);background:var(--ui-paper);box-shadow:var(--ui-rim);
  transition:border-color 240ms ease,background-color 240ms ease;
}
html body .moments.many .moment:not(.active) {opacity:1;}
html body .moment::before {display:none;}
html body .moment::after {display:none;}
html body .moment.active {background:var(--ui-well);border-color:color-mix(in srgb,var(--accent) 30%,var(--surface));}
html body .moment .txt {font-size:17px;line-height:1.85;margin-top:12px;color:var(--text);}
html body .moment header {gap:8px 12px;line-height:1.65;}
html body .moment header time {font-variant-numeric:tabular-nums;}
html body .moment .pin-tag {padding:2px 9px;border-radius:999px;background:var(--accent-pale);color:var(--accent);}
html body .thumbs {gap:10px;}
html body .thumbs button {border-radius:16px;}
html body .acts {gap:8px;margin-top:20px;}
html body .acts button {
  min-height:38px;padding:0 13px;border-color:var(--ui-edge);background:var(--surface);
  box-shadow:var(--ui-rim);color:var(--muted);
}
html body .acts .like.on {background:var(--pill-negative-bg);color:var(--pill-negative-ink);border-color:color-mix(in srgb,var(--negative) 26%,var(--surface));}
html body .talk ul {gap:6px;}
html body .talk li {border:0;background:var(--raised);border-radius:14px;padding:12px 14px;}
html body .talk li.by-owner {background:var(--accent-pale);}
html body .talk form {padding-top:8px;}
html body .stage {border-radius:28px;box-shadow:inset 0 1px 0 var(--lg-edge);}
html body .stage-top {padding:10px 14px;border-radius:999px;background:rgba(var(--st-veil),.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
html body .hud {
  left:20px;right:20px;bottom:24px;padding:18px 20px;border-radius:22px;
  background:rgba(var(--st-veil),.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
html body .col-foot {border:0;padding:28px;border-radius:26px;background:var(--ui-well);box-shadow:var(--ui-rim);}
/* Question and answer have different tonal roles; both retain full reading contrast. */
html body .w-hero {gap:40px;padding-bottom:40px;}
html body .w-head {padding:28px 32px;border-radius:30px;background:var(--ui-well);box-shadow:var(--ui-rim);}
html body .w-head h1 {color:var(--ui-title-ink);}
html body .w-tools {gap:10px;}
html body .w-search input {border-radius:999px;border-color:var(--ui-edge);}
html body .w-grid {column-gap:20px;}
html body .w-grid .qa {padding:26px;border:1px solid var(--ui-edge);border-radius:26px;background:var(--surface);box-shadow:var(--ui-rim);margin-bottom:20px;}
html body .w-grid .qa.featured {padding:32px;background:var(--ui-well);gap:24px;}
html body .w-grid .qa .q {font-size:19px;line-height:1.7;color:var(--text);}
html body .w-grid .qa .q::before {background:var(--accent-pale);color:var(--accent);border-radius:9px;vertical-align:2px;}
html body .w-grid .qa.featured .q {font-size:clamp(23px,2.2vw,32px);line-height:1.55;}
html body .qa .q-meta {font-size:13px;line-height:1.7;}
html body .qa .a {padding:18px;border-radius:18px;background:var(--ui-well);}
html body .qa .a b {display:block;line-height:1.7;}
html body .qa .a b span {display:block;margin:2px 0 0;font-size:13px;}
html body .qa .a p {margin-top:10px;font-size:16px;line-height:1.85;}
html body .qa-share {height:36px;padding:0 12px;font-size:13px;border-color:var(--ui-edge);background:var(--surface);}
/* Match the home footer: lake mist, readable ink and one clear next action. */
html body :is(.w-cta,.r-foot) {
  margin:72px var(--m) var(--m);padding:clamp(32px,5vw,72px);
  border:1px solid var(--lg-edge);border-radius:32px;color:var(--text);
  background:linear-gradient(140deg,var(--lg-sheen),transparent 50%),var(--ui-well);box-shadow:var(--ui-rim);
}
html body :is(.w-cta,.r-foot) h2 {color:var(--ui-title-ink);text-shadow:0 1px 0 var(--lg-edge);}
html body .r-foot .r-wrap {width:100%;}
/* Chat: a calm writing sheet, clear sender distinction and tactile, opaque composer. */
html body .v-side .cover {border-radius:26px;box-shadow:var(--ui-rim);}
html body .v-side .owner h1 {color:var(--ui-title-ink);}
html body .v-side > :is(.restore,.code-card,.mine) {padding:18px;border:1px solid var(--ui-edge);border-radius:22px;background:var(--ui-well);box-shadow:var(--ui-rim);}
html body .v-side .chips > span {height:32px;border:0;background:var(--ui-well);}
html body .v-head {background:var(--ui-well);border-color:var(--ui-edge);}
html body .v-main {border:1px solid var(--ui-edge);border-radius:24px;box-shadow:none;overflow:hidden;}
html body :is(.v-main,.convo) .msg .bubble {padding:13px 17px;border-radius:7px 20px 20px 20px;line-height:1.75;background:var(--raised);}
html body :is(.v-main,.convo) .msg.mine .bubble {border-radius:20px 7px 20px 20px;background:var(--accent-pale);color:var(--text);}
html body :is(.v-main,.convo) .msg.same .bubble {border-radius:20px;}
html body #composer.composer {border:1px solid var(--control);box-shadow:var(--ui-rim);}
html body #composer.composer:focus-within {border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring),var(--ui-rim);}
/* Resume: paper frames for evidence, blue headings and quieter section boundaries. */
html body .r-name {color:var(--ui-title-ink);}
html body .r-sec > header h2 {width:fit-content;padding:14px 22px 18px;border-radius:24px;background:var(--ui-title);color:var(--ui-title-ink);font-size:clamp(34px,4.5vw,64px);}
html body :is(.fan a,.peek,.d-cert button,.c-card) {border-radius:20px;box-shadow:var(--ui-rim);}
html body :is(.fan img,.peek img,.d-cert img,.c-card img) {border-radius:12px;}
html body .h-list {border-top:0;}
html body .h-row {margin-bottom:10px;padding:24px;border:1px solid var(--ui-edge);border-radius:22px;background:var(--surface);}
html body .h-row::before {inset:0;border-radius:inherit;background:var(--ui-well);}
html body .c-card {padding:12px 12px 20px;border:1px solid var(--ui-edge);}
html body .proj {margin-bottom:20px;padding:32px;border:1px solid var(--ui-edge);border-radius:28px;background:var(--surface);box-shadow:var(--ui-rim);gap:40px;}
html body .skills article {padding:28px;border:1px solid var(--ui-edge);border-radius:26px;background:var(--ui-well);box-shadow:var(--ui-rim);}
html body .edu {border:1px solid var(--ui-edge);}
html body .edu::before {animation:none;}
html body .d-hero {gap:40px;}
html body .d-hero h1 {font-size:clamp(28px,2.6vw,40px);line-height:1.35;}
html body .d-proj .d-project-name {margin-top:12px;color:var(--muted);font-size:17px;line-height:1.8;}
html body .d-sec {margin-bottom:16px;padding:32px;border:1px solid var(--ui-edge);border-radius:26px;background:var(--surface);}
html body .d-nav a {border:1px solid var(--ui-edge);border-radius:26px;background:var(--ui-well);box-shadow:var(--ui-rim);}
html body .d-blank {border-radius:24px;background:var(--ui-well);box-shadow:var(--ui-rim);}
/* Inbox uses the framed-sheet direction. Navigation recedes, selected rows stay distinct. */
html body .a-side .nav-item {border-radius:12px;background:none;background-image:none;box-shadow:none;border:0;}
html body .a-side .nav-item:hover {background:var(--raised);scale:1;}
html body .a-side .nav-item[aria-current="page"] {background:var(--active);box-shadow:inset 0 1px 0 var(--lg-edge);color:var(--text);font-weight:600;}
html body .a-side .share {border-radius:18px;border-color:var(--ui-edge);background:var(--ui-well);}
html body .a-sheet {box-shadow:none;background:var(--surface);border-radius:22px;}
html body .tabs {gap:6px;padding:5px 12px 8px;}
html body .tabs button {padding:7px 12px;background:none;background-image:none;box-shadow:none;border-radius:999px;}
html body .tabs button[aria-selected="true"] {background:var(--accent-pale);box-shadow:none;color:var(--accent);}
html body .tabs button[aria-selected="true"]::after {display:none;}
html body .trow {margin:3px 0;border-radius:14px;}
html body .trow[aria-selected="true"],html body .trow.on {background:var(--active);}
html body .details {background:var(--raised);}
html body .a-sheet .qa {box-shadow:none;}
/* Footprints and consultation now inherit the same tokens and stored theme. */
html body:has(.fp-wrap),html body:has(.workspace) {background:var(--ground);color:var(--text);}
html body :is(.fp-wrap,.fp-top,.fp-footer,.fp-admin) {color:var(--text);}
html body .fp-heading {padding:26px 30px;border-radius:28px;background:var(--ui-well);box-shadow:var(--ui-rim);}
html body .fp-heading h1 {color:var(--ui-title-ink);}
html body :is(.fp-heading p,.fp-tools,.fp-footer,.fp-entry time,.fp-empty p,.fp-hint,.fp-map-note,.fp-map-empty) {color:var(--muted);}
html body .fp-filters select {background:var(--surface);color:var(--text);border-color:var(--control);}
html body .fp-map-panel {padding:24px;border-radius:28px;background:var(--surface);border-color:var(--ui-edge);}
html body .fp-map {border-radius:18px;background:var(--raised);overflow:hidden;}
html body .fp-map-empty strong {color:var(--text);}
html body .fp-entry {padding:24px;border-radius:26px;background:var(--surface);border-color:var(--ui-edge);}
html body .fp-entry.active {background:var(--ui-well);box-shadow:inset 0 0 0 2px var(--accent);}
html body .fp-entry .fp-city {color:var(--accent);}
html body .fp-gallery img {border-radius:10px;}
html body .fp-timeline:has(.fp-entry) {border-color:var(--ui-edge);}
html body .fp-entry::before {background:var(--accent);border-color:var(--ground);}
html body .fp-empty {background:var(--ui-well);}
html body .fp-map-note {font-size:13px;}
html body .workspace .intro h1 {color:var(--ui-title-ink);}
html body .workspace .panel {border-radius:28px;background:var(--surface);border:1px solid var(--ui-edge);box-shadow:var(--ui-rim);}
html body .workspace :is(.muted,.scope,.price span,.method span,.back) {color:var(--muted);}
html body .workspace .price strong {color:var(--accent);}
html body .workspace .steps {padding:8px;background:var(--raised);border-radius:18px;gap:8px;}
html body .workspace .steps li {flex:1;text-align:center;padding:8px 4px;color:var(--muted);border:0;}
html body .workspace .steps [aria-current] {color:var(--accent);background:var(--surface);border-radius:12px;box-shadow:var(--ui-rim);}
html body .workspace :is(.bill,.notice) {background:var(--ui-well);border-radius:18px;}
html body .workspace .bubble {background:var(--raised);}
html body .workspace .bubble.mine {background:var(--accent-pale);color:var(--text);}
html body:has(.workspace) > footer {color:var(--muted);}
@media(hover:hover) and (pointer:fine) {
  html body :is(.qa-share,.acts button,.fp-link):hover {background-color:var(--accent-pale);color:var(--accent);}
  html body :is(.h-row,.c-card,.d-nav a,.fp-entry) {transition:translate 300ms var(--ui-ease),border-color 240ms ease,background-color 240ms ease;}
  html body :is(.h-row,.d-nav a):hover {border-color:color-mix(in srgb,var(--accent) 35%,var(--surface));}
}
@media(max-width:900px) and (orientation:portrait),(max-width:560px) {
  html body .stage {border-radius:0 0 26px 26px;}
  html body .hud {left:12px;right:12px;bottom:22px;padding:12px 14px;border-radius:18px;}
  html body .hud .when b {font-size:28px;}
  html body .hud .counts {gap:12px;}
  html body .col {padding-left:16px;padding-right:16px;}
}
@media(max-width:780px) {
  html body .w-hero {gap:24px;}
  html body .w-head {padding:24px;border-radius:26px;}
  html body .w-count {font-size:clamp(88px,23vw,140px);}
}
@media(max-width:680px) {
  html {scroll-padding-top:76px;}
  html body .moment {padding:22px 18px;border-radius:24px;}
  html body .moment .txt {font-size:16px;line-height:1.85;}
  html body .acts button {min-height:42px;padding:0 12px;}
  html body .w-grid .qa,html body .w-grid .qa.featured {padding:22px;border-radius:24px;}
  html body .qa .a {padding:14px;grid-template-columns:26px minmax(0,1fr);gap:9px;}
  html body .qa .a p {font-size:15px;}
  html body :is(.r-foot,.w-cta) {margin-top:48px;padding:28px 24px;border-radius:26px;}
  html body .r-sec > header h2 {font-size:32px;padding:12px 18px 16px;border-radius:22px;}
  html body .h-row {padding:20px 16px;}
  html body :is(.proj,.d-sec) {padding:24px 20px;gap:24px;border-radius:24px;}
  html body .fp-heading {padding:22px 20px;border-radius:24px;}
  html body .fp-map-panel,html body .fp-entry {padding:20px;border-radius:24px;}
  html body .fp-top {align-items:center;}
  html body .fp-top>a {font-size:14px;}
  html body .v-main {border-radius:22px;}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(.moment,.acts button,.h-row,.c-card,.d-nav a,.fp-entry) {transition:none;}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  html body :is(.w-cta,.r-foot,.stage-top,.hud) {background:var(--surface);box-shadow:none;}
  html body .moment {border-color:var(--control);}
}
@media print {
  html body :is(.moment,.qa,.w-head,.r-sec>header h2,.proj,.d-sec,.r-foot,.w-cta,.fp-heading) {background:transparent;box-shadow:none;color:#000;border-color:#ccc;}
}

/* ───── Liquid Glass v2（2026-11）─────
   学 Apple 的做法：清透的底 + 高饱和背景模糊 + 随光线转动的双侧高光边 + 底部内反光。
   动态只改小元素上的一个角度变量，不加常驻动画循环；桌面 Chromium 再给顶栏加一层边缘折射（liquid-glass.js）。 */
@property --g-angle {syntax:'<angle>';inherits:false;initial-value:135deg;}
@property --g-spin {syntax:'<angle>';inherits:false;initial-value:0deg;}
:root {
  --g-fill:rgba(255,255,255,.26);
  --g-fill-hi:rgba(255,255,255,.6);
  --g-rim:rgba(255,255,255,.98);
  --g-rim-soft:rgba(255,255,255,.18);
  --g-hair:rgba(28,58,86,.11);
  --g-drop:0 10px 30px -16px rgba(24,54,82,.34),0 2px 8px -4px rgba(24,54,82,.14);
  --g-inner:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -12px 20px -16px rgba(255,255,255,.95),inset 0 0 0 .5px rgba(255,255,255,.4);
  --g-filter:blur(7px) saturate(180%) brightness(1.05);
  --g-lens-tail:blur(2px) saturate(185%) brightness(1.06);
  --g-lens-fill:rgba(255,255,255,.2);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 70%,rgba(255,255,255,.22));
  --g-spring:linear(0,.029,.103,.206,.325,.449,.57,.682,.781,.865,.934,.988,1.028,1.056,1.073,1.082,1.083,1.08,1.073,1.064,1.054,1.044,1.034,1.025,1.017,1.01,1.005,1,.997,.995,.994,.993,.993,.994,.995,.996,.997,.998,1);
  --g-amb-1:#d2e4f4; --g-amb-2:#d6ebe7; --g-amb-3:#f3e5d6;
  --g-btn-fill:color-mix(in srgb,var(--surface) 18%,transparent);
  --g-btn-fill-hover:color-mix(in srgb,var(--surface) 40%,transparent);
  --g-btn-sheen:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.2) 42%,rgba(255,255,255,.03) 68%,rgba(255,255,255,.3));
  --g-btn-inner:inset 0 1px 0 #fff,inset 0 -10px 16px -12px #fff,inset 0 0 0 1px rgba(255,255,255,.5),inset 0 2px 8px -4px rgba(255,255,255,.9);
  --g-primary:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.3) 44%,rgba(255,255,255,.06) 68%,rgba(255,255,255,.4)),linear-gradient(rgba(196,219,238,.48),rgba(196,219,238,.48));
  --g-primary-hover:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.36) 44%,rgba(255,255,255,.1) 68%,rgba(255,255,255,.45)),linear-gradient(rgba(186,212,234,.6),rgba(186,212,234,.6));
  --g-primary-ink:#23496b;
  --g-primary-shadow:0 8px 22px -14px rgba(40,90,130,.42),inset 0 1px 0 #fff,inset 0 -10px 16px -12px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 .5px rgba(63,107,142,.22);
  --g-primary-shadow-hover:0 14px 28px -14px rgba(40,90,130,.5),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 18px -14px rgba(63,107,142,.4),0 0 0 .5px rgba(63,107,142,.3);
}
:root[data-theme="dark"] {
  --g-fill:rgba(38,46,56,.32); --g-fill-hi:rgba(34,41,50,.66);
  --g-rim:rgba(255,255,255,.42); --g-rim-soft:rgba(255,255,255,.05); --g-hair:rgba(0,0,0,.45);
  --g-drop:0 12px 32px -14px rgba(0,0,0,.62),0 2px 8px -4px rgba(0,0,0,.4);
  --g-inner:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -12px 20px -16px rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.07);
  --g-filter:blur(8px) saturate(165%) brightness(.88);
  --g-lens-tail:blur(2.5px) saturate(165%) brightness(.88);
  --g-lens-fill:rgba(38,46,56,.28);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%,rgba(255,255,255,.04));
  --g-amb-1:#13263a; --g-amb-2:#0f2729; --g-amb-3:#272016;
  --g-btn-fill:rgba(255,255,255,.03); --g-btn-fill-hover:rgba(255,255,255,.08); --g-btn-sheen:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 68%,rgba(255,255,255,.08)); --g-btn-inner:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -10px 16px -12px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.07); --g-primary:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,rgba(255,255,255,.06)),linear-gradient(rgba(74,112,146,.42),rgba(74,112,146,.42)); --g-primary-hover:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,rgba(255,255,255,.08)),linear-gradient(rgba(84,124,160,.52),rgba(84,124,160,.52)); --g-primary-ink:#d6e8f6; --g-primary-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 18px -14px rgba(147,188,220,.3),0 0 0 .5px rgba(147,188,220,.3); --g-primary-shadow-hover:0 14px 28px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -10px 18px -14px rgba(147,188,220,.36),0 0 0 .5px rgba(147,188,220,.38);
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --g-fill:rgba(38,46,56,.32); --g-fill-hi:rgba(34,41,50,.66);
    --g-rim:rgba(255,255,255,.42); --g-rim-soft:rgba(255,255,255,.05); --g-hair:rgba(0,0,0,.45);
    --g-drop:0 12px 32px -14px rgba(0,0,0,.62),0 2px 8px -4px rgba(0,0,0,.4);
    --g-inner:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -12px 20px -16px rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.07);
    --g-filter:blur(8px) saturate(165%) brightness(.88);
    --g-lens-tail:blur(2.5px) saturate(165%) brightness(.88);
  --g-lens-fill:rgba(38,46,56,.28);
    --g-sheen:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 55%,rgba(255,255,255,.04));
    --g-amb-1:#13263a; --g-amb-2:#0f2729; --g-amb-3:#272016;
    --g-btn-fill:rgba(255,255,255,.03); --g-btn-fill-hover:rgba(255,255,255,.08); --g-btn-sheen:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 68%,rgba(255,255,255,.08)); --g-btn-inner:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -10px 16px -12px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.07); --g-primary:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,rgba(255,255,255,.06)),linear-gradient(rgba(74,112,146,.42),rgba(74,112,146,.42)); --g-primary-hover:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,rgba(255,255,255,.08)),linear-gradient(rgba(84,124,160,.52),rgba(84,124,160,.52)); --g-primary-ink:#d6e8f6; --g-primary-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 18px -14px rgba(147,188,220,.3),0 0 0 .5px rgba(147,188,220,.3); --g-primary-shadow-hover:0 14px 28px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -10px 18px -14px rgba(147,188,220,.36),0 0 0 .5px rgba(147,188,220,.38);
  }
}

/* 环境光：页面底下一层静止的湖光（天蓝、湖青、一点晨曦暖色），玻璃才有东西可透。固定层只合成不重绘，滚动不花钱。 */
html body:is(.home,.page,.fp-page)::before {
  content:"";position:fixed;inset:-8vh -8vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 36% at 6% 2%,var(--g-amb-1),transparent 72%),
    radial-gradient(36% 32% at 98% 14%,var(--g-amb-2),transparent 72%),
    radial-gradient(44% 38% at 84% 100%,var(--g-amb-3),transparent 70%),
    radial-gradient(38% 34% at 4% 90%,color-mix(in srgb,var(--g-amb-1) 75%,transparent),transparent 72%);
}

/* 高光边：一圈 1px 的锥形渐变，两侧亮、两侧暗，角度跟着光（鼠标、滚动）转。 */
html body :is(.h-top>.brand,.h-top nav,.btn,.go,.icon-btn,.actions-hero,.live-line,dialog.dlg,.pet-chat,.ask,.fact)::before {
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1px;
  background:conic-gradient(from calc(var(--g-angle) + var(--g-spin)),var(--g-rim),var(--g-rim-soft) 20%,var(--g-rim-soft) 30%,color-mix(in srgb,var(--g-rim) 65%,transparent) 50%,var(--g-rim-soft) 70%,var(--g-rim-soft) 80%,var(--g-rim));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:--g-angle 700ms cubic-bezier(.2,.8,.2,1);
}
html body :is(.h-top>.brand,.actions-hero,.live-line,.ask,.fact) {position:relative;}
html body :is(.h-top>.brand,.h-top nav,.btn,.go,.icon-btn,.actions-hero,.live-line,.ask,.fact) {border-color:transparent;}

/* 滚动后的顶栏不再是一整条实色带：只在最上沿留一层由浓到无的淡雾（Apple 的 scroll edge），内容从玻璃按钮底下透过去。 */
html body:is(.page,.home) .h-top.scrolled {
  background:linear-gradient(180deg,color-mix(in srgb,var(--ground) 80%,transparent),color-mix(in srgb,var(--ground) 42%,transparent) 55%,transparent);
  box-shadow:none;
}
/* 漂浮层：顶栏、弹窗、宠物对话框。真的透过去，背景被放大饱和，边缘发亮。 */
html body :is(.h-top>.brand,.h-top nav) {
  background:var(--g-sheen),var(--g-fill);
  box-shadow:var(--g-drop),var(--g-inner),0 0 0 .5px var(--g-hair);
  -webkit-backdrop-filter:var(--g-filter);backdrop-filter:var(--g-filter);
}
html body :is(dialog.dlg,.pet-chat,.menu,.pet-tip) {
  background:var(--g-sheen),var(--g-fill-hi);border-color:transparent;
  box-shadow:0 30px 70px -30px rgba(18,40,62,.45),var(--g-inner),0 0 0 .5px var(--g-hair);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
}
html body dialog.dlg::backdrop {background:rgba(18,36,54,.2);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
html body dialog.dlg[open] {animation:g-pop 560ms var(--g-spring) both;}
@keyframes g-pop {from{opacity:0;scale:.9;translate:0 14px}40%{opacity:1}to{opacity:1;scale:1;translate:0 0}}

/* 按钮：不做背景模糊（省 GPU），靠清透填充、上亮下暗的弧面和内反光读出“玻璃珠”。 */
html body :is(.btn,.go,.icon-btn,.c-toggle,.reel-nav button,.opt,.new-chat,.qa-share,.pet-tip-choices button) {
  background-color:var(--g-btn-fill);
  background-image:var(--g-btn-sheen);
  box-shadow:0 6px 16px -10px rgba(24,54,82,.28),var(--g-btn-inner),0 0 0 .5px var(--g-hair);
}
html body .go.go-soft {background:var(--g-btn-sheen),linear-gradient(var(--g-btn-fill),var(--g-btn-fill));}
@media(hover:hover) and (pointer:fine) {html body .go.go-soft:hover {background:var(--g-btn-sheen),linear-gradient(var(--g-btn-fill-hover),var(--g-btn-fill-hover));}}
/* 简历入口：同一种透亮玻璃，只多一层很淡的湖色 */
html body .go.go-cv {
  background:var(--g-btn-sheen),linear-gradient(color-mix(in srgb,var(--accent-pale) 55%,transparent),color-mix(in srgb,var(--accent-pale) 55%,transparent));
  box-shadow:0 6px 16px -10px rgba(24,54,82,.28),var(--g-btn-inner),0 0 0 .5px var(--g-hair);
}
html body :is(.go:not(.go-soft):not(.go-cv),.btn.primary,button.primary,.pc-form button[type="submit"]) {
  background-color:transparent;
  background-image:var(--g-primary);
  color:var(--g-primary-ink);
  box-shadow:var(--g-primary-shadow);
}
html body .h-top nav :is(a,button,.icon-btn) {background:none;background-image:none;box-shadow:none;}
html body .h-top nav .icon-btn::before {display:none;}
@media(hover:hover) and (pointer:fine) {
  html body :is(.btn,.go,.icon-btn,.c-toggle,.opt,.new-chat,.qa-share):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color:var(--g-btn-fill-hover);
    box-shadow:0 14px 28px -14px rgba(24,54,82,.38),var(--g-btn-inner),0 0 0 .5px var(--g-hair);
    translate:0 -1px;scale:1.03;
  }
  html body :is(.go:not(.go-soft):not(.go-cv),.btn.primary,button.primary):hover:not(:disabled) {
    background-color:transparent;background-image:var(--g-primary-hover);color:var(--g-primary-ink);
    box-shadow:var(--g-primary-shadow-hover);
  }
  /* 指着哪里，哪里就有一团高光，像光透过一颗水珠 */
  html body :is(.go,.btn,.icon-btn)[data-lg-active]::after {
    inset:0;transform:none;opacity:1;transition:opacity 260ms ease;
    background:radial-gradient(circle at var(--lg-px,50%) var(--lg-py,0%),rgba(255,255,255,.55),rgba(255,255,255,.14) 35%,transparent 65%);
  }
  html body :is(.go:not(.go-soft):not(.go-cv),.btn.primary,button.primary)[data-lg-active]::after {
    background:radial-gradient(circle at var(--lg-px,50%) var(--lg-py,0%),rgba(255,255,255,.4),rgba(255,255,255,.08) 38%,transparent 66%);
  }
}
/* 按下去像果冻：先缩一下，松手时带一点回弹 */
html body :is(.btn,.go,.icon-btn,.nav-item,.opt,.c-toggle,.new-chat) {
  transition:scale 520ms var(--g-spring),translate 520ms var(--g-spring),background-color 200ms ease,box-shadow 260ms ease,color 180ms ease;
}
html body :is(.btn,.go,.icon-btn,.nav-item,.opt,.c-toggle,.new-chat):active:not(:disabled) {scale:.95;translate:0 0;transition-duration:120ms;}

/* 顶栏里滑动的那颗“水珠”：弹簧缓动，移动时会被拉长再回弹 */
html body .h-top nav .lg-nav-lens {
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.5)),color-mix(in srgb,var(--accent-pale) 80%,transparent);
  box-shadow:0 3px 10px -4px rgba(24,54,82,.3),inset 0 1px 0 #fff,inset 0 -3px 6px -3px color-mix(in srgb,var(--accent) 30%,transparent);
  transition:transform 560ms var(--g-spring),width 560ms var(--g-spring),opacity 160ms ease;
}
:root[data-theme="dark"] body .h-top nav .lg-nav-lens {background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),var(--accent-pale);box-shadow:0 3px 10px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body .h-top nav .lg-nav-lens {background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),var(--accent-pale);box-shadow:0 3px 10px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25);}}

/* 滚动时顶栏的高光边慢慢绕一圈，像光在玻璃上走（只在支持滚动驱动动画的浏览器里，由合成器驱动时间线） */
@supports (animation-timeline:scroll()) {
  html body :is(.h-top>.brand,.h-top nav)::before {animation:g-spin linear both;animation-timeline:scroll(root);}
  @keyframes g-spin {from{--g-spin:0deg}to{--g-spin:300deg}}
}

/* 手机：顶栏模糊减半，弹窗、对话框改成近乎不透明，省下合成开销 */
/* 有折射的那几块玻璃（JS 加 data-lg-refract）更通透，好让边缘的弯折透出来 */
html body .h-top :is(.brand,nav)[data-lg-refract] {background:var(--g-sheen),var(--g-lens-fill);}
@media(hover:none),(pointer:coarse),(max-width:680px) {
  :root {--g-filter:blur(6px) saturate(170%);}
  html body :is(dialog.dlg,.pet-chat,.menu,.pet-tip) {background:var(--g-sheen),var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
  html body dialog.dlg::backdrop {-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,36,54,.3);}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(.h-top>.brand,.h-top nav)::before {animation:none;}
  html body :is(.btn,.go,.icon-btn,.nav-item,.opt,.c-toggle,.new-chat) {transition:none;}
  html body dialog.dlg[open] {animation:none;}
  html body .h-top nav .lg-nav-lens {transition:opacity 160ms ease;}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  html body :is(.h-top>.brand,.h-top nav,dialog.dlg,.pet-chat,.menu,.pet-tip) {background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
  html body:is(.home,.page,.fp-page)::before {display:none;}
}
@media print {
  html body :is(.h-top>.brand,.h-top nav,.btn,.go,.icon-btn,.actions-hero,.live-line,dialog.dlg,.pet-chat,.ask,.fact)::before,html body:is(.home,.page,.fp-page)::before {display:none;}
}

/* ───── 2026-11 第二批：时间光、顶栏收缩、跨页衔接、图片流光 ───── */
/* 环境光按访客当地时间换色（只换浅色模式；深色模式一直是夜湖） */
:root[data-theme="light"][data-daypart="dawn"] {--g-amb-1:#f5e1d3;--g-amb-2:#d9e8f4;--g-amb-3:#f3e8cc;}
:root[data-theme="light"][data-daypart="dusk"] {--g-amb-1:#f3d9c6;--g-amb-2:#e3d9ee;--g-amb-3:#d6e2f2;}
:root[data-theme="light"][data-daypart="night"] {--g-amb-1:#d3daef;--g-amb-2:#d9e5ee;--g-amb-3:#e6deef;}
@media(prefers-color-scheme:light) {
  :root:not([data-theme="dark"])[data-daypart="dawn"] {--g-amb-1:#f5e1d3;--g-amb-2:#d9e8f4;--g-amb-3:#f3e8cc;}
  :root:not([data-theme="dark"])[data-daypart="dusk"] {--g-amb-1:#f3d9c6;--g-amb-2:#e3d9ee;--g-amb-3:#d6e2f2;}
  :root:not([data-theme="dark"])[data-daypart="night"] {--g-amb-1:#d3daef;--g-amb-2:#d9e5ee;--g-amb-3:#e6deef;}
}
:root[data-theme="dark"][data-daypart="dusk"] {--g-amb-1:#2a1f1a;--g-amb-3:#1a2236;}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"])[data-daypart="dusk"] {--g-amb-1:#2a1f1a;--g-amb-3:#1a2236;}}

/* 往下读时顶栏玻璃收小一点、更通透；只动 scale 和透明度，合成器就能完成 */
html body .h-top :is(.brand,nav) {transition:scale 520ms var(--g-spring),opacity 300ms ease,background-color 300ms ease;transform-origin:0 50%;}
html body .h-top nav {transform-origin:100% 50%;}
html body .h-top[data-lg-compact] :is(.brand,nav) {scale:.9;}
html body .h-top[data-lg-compact] :is(.brand,nav):not(:hover):not(:focus-within) {opacity:.92;}

/* 跨页衔接：点下去的按钮在旧页上放大化开；导航胶囊在两页之间变形 */
html body .h-top nav {view-transition-name:vt-nav;}
::view-transition-group(vt-nav) {animation-duration:560ms;animation-timing-function:cubic-bezier(.2,.8,.2,1);}
::view-transition-old(vt-hit) {animation:vt-hit-out 460ms cubic-bezier(.2,.7,.2,1) both;}
@keyframes vt-hit-out {to{opacity:0;scale:1.35;}}
::view-transition-group(vt-hit) {animation:none;}

/* 图片下载中：湖色流光占位 */
html body img.lg-img-wait {
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent-pale) 70%,var(--surface)) 30%,color-mix(in srgb,var(--surface) 92%,transparent) 50%,color-mix(in srgb,var(--accent-pale) 70%,var(--surface)) 70%) 0 0/300% 100%;
  animation:lg-shimmer 1.4s linear infinite;
}
@keyframes lg-shimmer {from{background-position:100% 0}to{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce) {
  html body .h-top :is(.brand,nav) {transition:none;}
  html body .h-top[data-lg-compact] :is(.brand,nav) {scale:1;}
  html body img.lg-img-wait {animation:none;}
  ::view-transition-old(vt-hit),::view-transition-group(vt-nav) {animation:none;}
}
/* 切换深浅色时，顶栏跟着整页一起被天色晕染，不单独淡入淡出 */
:root.theme-vt :is(.h-top .brand,.h-top nav) {view-transition-name:none;}

/* ───── 2026-11 第三批：标题捕光、高光绕行、按钮池光晕 ───── */
/* 玻璃标题板滚进视野时，一道光从左到右扫过（滚动驱动，往回滚光也往回走；不支持的浏览器就没有） */
@supports (animation-timeline:view()) {
  html body :is(.r-sec>header h2,.doors-head h2,.asks-h h2,.w-head,.fp-heading) {position:relative;}
  html body :is(.r-sec>header h2,.doors-head h2,.asks-h h2,.w-head,.fp-heading)::after {
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.15) 54%,transparent 64%) no-repeat;
    background-size:300% 100%;background-position:130% 0;
    animation:g-catch linear both;animation-timeline:view();animation-range:entry 30% cover 55%;
  }
  @keyframes g-catch {from{background-position:130% 0}to{background-position:-30% 0}}
  /* 三块数字玻璃滚进来时，边上的高光绕着走一圈 */
  html body.home .fact::before {animation:g-spin linear both;animation-timeline:view();animation-range:entry 0% cover 50%;}
}
:root[data-theme="dark"] body :is(.r-sec>header h2,.doors-head h2,.asks-h h2,.w-head,.fp-heading)::after {opacity:.3;}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body :is(.r-sec>header h2,.doors-head h2,.asks-h h2,.w-head,.fp-heading)::after {opacity:.3;}}

/* 首页按钮池：鼠标在里面移动时，一团柔光跟着走，透过半透明的按钮亮起来 */
html body .lg-pool {position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;}
html body .lg-pool i {position:absolute;left:0;top:0;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.9)),transparent 68%);
  opacity:0;transform:translate3d(var(--px,0),var(--py,0),0);transition:opacity 400ms ease;will-change:transform;}
html body .actions-hero:hover .lg-pool i {opacity:.75;}
html body .actions-hero > :not(.lg-pool) {position:relative;z-index:1;}
:root[data-theme="dark"] body .lg-pool i {background:radial-gradient(circle,rgba(147,188,220,.32),transparent 68%);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body .lg-pool i {background:radial-gradient(circle,rgba(147,188,220,.32),transparent 68%);}}
@media(prefers-reduced-motion:reduce) {
  html body :is(.r-sec>header h2,.doors-head h2,.asks-h h2,.w-head,.fp-heading)::after,html body.home .fact::before {animation:none;}
  html body .lg-pool {display:none;}
}
@media print {html body .lg-pool,html body :is(.r-sec>header h2,.doors-head h2,.asks-h h2,.w-head,.fp-heading)::after {display:none;}}

/* ───── 图标微动画：悬停（手机上是按下）时图标自己动一下；首页打开后首屏图标依次“醒来”一次 ───── */
html body :is(.i-d1,.i-d2,.i-d3,.i-fl,.i-fr,.i-l1,.i-l2,.i-l3,.i-rays) {transform-box:fill-box;transform-origin:50% 50%;}
html body .i-rays {transform-origin:12px 12px;transform-box:view-box;}
@keyframes i-dot {0%,70%,100%{transform:none}35%{transform:translateY(-2px)}}
@keyframes i-step {0%,100%{transform:none;opacity:1}40%{transform:translateY(-2.2px) rotate(-6deg);opacity:.75}}
@keyframes i-line {0%,100%{transform:none}45%{transform:scaleX(.55)}}
@keyframes i-spin {to{transform:rotate(180deg)}}
@keyframes i-sun {to{transform:rotate(90deg)}}
@keyframes i-moon {0%,100%{transform:none}35%{transform:rotate(-16deg)}70%{transform:rotate(8deg)}}
html body .lg-wake :is(.i-d1,.i-d2,.i-d3),
html body :is(a,button):is(:hover,:active) :is(.i-d1,.i-d2,.i-d3) {animation:i-dot 900ms ease-in-out 2;}
html body :is(.lg-wake,:is(a,button):is(:hover,:active)) .i-d2 {animation-delay:120ms;}
html body :is(.lg-wake,:is(a,button):is(:hover,:active)) .i-d3 {animation-delay:240ms;}
html body .lg-wake :is(.i-fl,.i-fr),
html body :is(a,button):is(:hover,:active) :is(.i-fl,.i-fr) {animation:i-step 700ms ease-in-out 2;}
html body :is(.lg-wake,:is(a,button):is(:hover,:active)) .i-fr {animation-delay:350ms;}
html body .lg-wake :is(.i-l1,.i-l2,.i-l3),
html body :is(a,button):is(:hover,:active) :is(.i-l1,.i-l2,.i-l3) {transform-origin:0 50%;animation:i-line 700ms cubic-bezier(.3,.7,.3,1);}
html body :is(.lg-wake,:is(a,button):is(:hover,:active)) .i-l2 {animation-delay:90ms;}
html body :is(.lg-wake,:is(a,button):is(:hover,:active)) .i-l3 {animation-delay:180ms;}
html body .lg-wake .i-rays,
html body :is(a,button):is(:hover,:active) .i-rays {animation:i-spin 900ms var(--g-spring);}
html body button[data-theme]:is(:hover,:active) svg:has(circle) {animation:i-sun 700ms var(--g-spring);}
html body button[data-theme]:is(:hover,:active) svg:not(:has(circle)) {transform-origin:50% 50%;animation:i-moon 800ms ease-in-out;}
@media(prefers-reduced-motion:reduce) {
  html body :is(.i-d1,.i-d2,.i-d3,.i-fl,.i-fr,.i-l1,.i-l2,.i-l3,.i-rays),html body button[data-theme] svg {animation:none!important;}
}

/* 我的足迹：晚霞色的玻璃，和湖蓝的“进行聊天”一冷一暖 */
:root {
  --g-trip:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.3) 44%,rgba(255,255,255,.06) 68%,rgba(255,255,255,.4)),linear-gradient(rgba(246,221,196,.58),rgba(246,221,196,.58));
  --g-trip-hover:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.36) 44%,rgba(255,255,255,.1) 68%,rgba(255,255,255,.45)),linear-gradient(rgba(243,208,175,.7),rgba(243,208,175,.7));
  --g-trip-ink:#7a4a22;
  --g-trip-shadow:0 8px 22px -14px rgba(150,90,40,.45),inset 0 1px 0 #fff,inset 0 -10px 16px -12px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 .5px rgba(150,100,50,.25);
}
:root[data-theme="dark"] {--g-trip:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,rgba(255,255,255,.06)),linear-gradient(rgba(176,118,70,.34),rgba(176,118,70,.34));--g-trip-hover:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,rgba(255,255,255,.08)),linear-gradient(rgba(190,128,76,.44),rgba(190,128,76,.44));--g-trip-ink:#f3d2b2;--g-trip-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 18px -14px rgba(240,180,130,.3),0 0 0 .5px rgba(240,180,130,.3);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) {--g-trip:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,rgba(255,255,255,.06)),linear-gradient(rgba(176,118,70,.34),rgba(176,118,70,.34));--g-trip-hover:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,rgba(255,255,255,.08)),linear-gradient(rgba(190,128,76,.44),rgba(190,128,76,.44));--g-trip-ink:#f3d2b2;--g-trip-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 18px -14px rgba(240,180,130,.3),0 0 0 .5px rgba(240,180,130,.3);}}
html body .go.go-soft[href="/footprints"] {background:var(--g-trip);color:var(--g-trip-ink);box-shadow:var(--g-trip-shadow);}
html body .go.go-soft[href="/footprints"] svg {color:currentColor;}
@media(hover:hover) and (pointer:fine) {html body .go.go-soft[href="/footprints"]:hover {background:var(--g-trip-hover);color:var(--g-trip-ink);box-shadow:var(--g-trip-shadow);}}

/* 个人简历入口：紫藤色玻璃，和湖蓝（聊天）、晚霞（足迹）各占一色 */
:root {
  --g-cv:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.3) 44%,rgba(255,255,255,.06) 68%,rgba(255,255,255,.4)),linear-gradient(rgba(224,216,242,.62),rgba(224,216,242,.62));
  --g-cv-hover:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.36) 44%,rgba(255,255,255,.1) 68%,rgba(255,255,255,.45)),linear-gradient(rgba(213,203,238,.72),rgba(213,203,238,.72));
  --g-cv-ink:#4a3f78;
  --g-cv-shadow:0 8px 22px -14px rgba(90,70,150,.45),inset 0 1px 0 #fff,inset 0 -10px 16px -12px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 .5px rgba(100,80,160,.22);
}
:root[data-theme="dark"] {--g-cv:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,rgba(255,255,255,.06)),linear-gradient(rgba(120,100,180,.34),rgba(120,100,180,.34));--g-cv-hover:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,rgba(255,255,255,.08)),linear-gradient(rgba(130,110,195,.44),rgba(130,110,195,.44));--g-cv-ink:#ddd4fa;--g-cv-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 18px -14px rgba(190,170,250,.3),0 0 0 .5px rgba(190,170,250,.3);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) {--g-cv:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,rgba(255,255,255,.06)),linear-gradient(rgba(120,100,180,.34),rgba(120,100,180,.34));--g-cv-hover:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,rgba(255,255,255,.08)),linear-gradient(rgba(130,110,195,.44),rgba(130,110,195,.44));--g-cv-ink:#ddd4fa;--g-cv-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 18px -14px rgba(190,170,250,.3),0 0 0 .5px rgba(190,170,250,.3);}}
html body .go.go-cv[data-resume] {background:var(--g-cv);color:var(--g-cv-ink);box-shadow:var(--g-cv-shadow);}
html body .go.go-cv[data-resume] .cv-stack i {border-color:currentColor;}
@media(hover:hover) and (pointer:fine) {html body .go.go-cv[data-resume]:hover {background:var(--g-cv-hover);color:var(--g-cv-ink);box-shadow:var(--g-cv-shadow);}}

/* ===== 滑动时的景深（滚动驱动，跟着手指走，往上往下都一样）=====
   卡片从屏幕底部进来时由低处浮起、由淡变实、微微放大落定；滑到顶部快离开时轻轻退远变淡。
   只在屏幕上下边缘那一小段里起作用，中间阅读区完全静止；不在这两段里的卡片没有任何动画在跑，不占合成层。
   卡片列表要和 scroll-fx.js 的 SFX_CARDS 一致。range 先写一个所有浏览器都认的保底，再写按距离算的那版 */
@supports (animation-timeline:view()) {
@media (prefers-reduced-motion:no-preference) {
  html body :is(.moment,.qa,.fp-entry,.door,.proj,.edu,.skills article,.d-sec,.d-nav) {
    animation:sfx-in linear,sfx-out linear;animation-timeline:view(),view();
    animation-range:entry 0% entry 100%,exit 0% exit 100%;
    animation-range:cover 0% cover min(36vh,300px),cover calc(100% - min(22vh,180px)) cover 100%;
  }
  @keyframes sfx-in {from{opacity:0;translate:0 64px;scale:.93}60%{opacity:1}to{opacity:1;translate:0 0;scale:1}}
  @keyframes sfx-out {from{opacity:1;translate:0 0;scale:1}to{opacity:.2;translate:0 -20px;scale:.95}}
  /* 段落标题比内容慢半拍地漂移，滑动时有前后层次 */
  html body :is(.doors-head,.asks-h,.fp-journal-title,.col-head) {animation:sfx-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
  @keyframes sfx-drift {from{translate:0 30px}to{translate:0 -30px}}
}}

/* ===== 回到顶部：左下角一颗玻璃圆钮，外圈是阅读进度 ===== */
html body .lg-top {
  position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));z-index:55;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--text);
  background:var(--g-sheen,none),var(--g-btn-fill,var(--g-fill));-webkit-backdrop-filter:var(--g-filter);backdrop-filter:var(--g-filter);
  box-shadow:var(--g-drop),var(--g-inner);
  opacity:0;scale:.6;translate:0 14px;visibility:hidden;pointer-events:none;
  transition:opacity 260ms ease,scale 520ms var(--g-spring,cubic-bezier(.2,.9,.3,1.2)),translate 520ms var(--g-spring,cubic-bezier(.2,.9,.3,1.2)),visibility 0s linear 520ms;
}
html body .lg-top.on {opacity:1;scale:1;translate:0 0;visibility:visible;pointer-events:auto;transition-delay:0s;}
html body .lg-top:active {scale:.92;transition-duration:120ms;}
html body .lg-top svg {display:block;width:100%;height:100%;fill:none;stroke-linecap:round;}
html body .lg-top-track {stroke:color-mix(in srgb,var(--accent) 16%,transparent);stroke-width:2;}
html body .lg-top-ring {stroke:var(--accent);stroke-width:2.4;stroke-dasharray:100;stroke-dashoffset:100;rotate:-90deg;transform-origin:24px 24px;}
html body .lg-top-arrow {stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:translate 300ms var(--g-spring,ease);}
@media (hover:hover) and (pointer:fine) {html body .lg-top:hover .lg-top-arrow {translate:0 -2px;}}
@supports (animation-timeline:scroll()) {
  html body .lg-top-ring {animation:lg-read linear both;animation-timeline:scroll(root);}
  @keyframes lg-read {to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce) {html body .lg-top {transition:opacity 160ms ease,visibility 0s linear 160ms;scale:1;translate:0 0;}}
@media print {html body .lg-top {display:none;}}

/* ===== 夜里的湖：只在深色模式显示（liquid-glass.js 生成星星和倒影）===== */
html body .lg-night {position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;display:none;}
:root[data-theme="dark"] body .lg-night {display:block;}
@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) body .lg-night {display:block;}}
html body .lg-night i {position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#eaf3ff;box-shadow:0 0 6px 1px rgba(200,225,255,.45);opacity:.14;animation:lg-twinkle var(--d) ease-in-out var(--dl) infinite;}
html body .lg-night i.r {width:calc(var(--s) * 1.6);height:calc(var(--s) * 5);border-radius:50%;background:radial-gradient(ellipse at center,rgba(200,225,255,.6),transparent 70%);box-shadow:none;animation-name:lg-ripple;}
@keyframes lg-twinkle {0%,100%{opacity:.1}45%{opacity:.85}55%{opacity:.6}}
@keyframes lg-ripple {0%,100%{opacity:.06;translate:0 0;scale:1 1}50%{opacity:.3;translate:1.5px 0;scale:1.15 1.1}}
html.motion-paused body .lg-night i,html body .lg-night.hold i {animation-play-state:paused;}
@media (prefers-reduced-motion:reduce) {html body .lg-night i {animation:none;opacity:.35;} html body .lg-night i.r {opacity:.15;}}
@media print {html body .lg-night {display:none;}}

/* ===== 选中文字是湖蓝色；电脑上的滚动条是一根细细的玻璃条 ===== */
::selection {background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;}
:root[data-theme="dark"] ::selection {background:color-mix(in srgb,var(--accent) 38%,transparent);}
@media (hover:hover) and (pointer:fine) {
  html {scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent;}
  ::-webkit-scrollbar {width:10px;height:10px;}
  ::-webkit-scrollbar-track {background:transparent;}
  ::-webkit-scrollbar-thumb {border:3px solid transparent;border-radius:10px;background:color-mix(in srgb,var(--accent) 42%,transparent) padding-box;}
  ::-webkit-scrollbar-thumb:hover {background-color:color-mix(in srgb,var(--accent) 65%,transparent);}
  ::-webkit-scrollbar-corner {background:transparent;}
}


/* ───── 2026-11 第四批：液态手感 ─────
   按住：玻璃像一滴水被托起，鼓起一点、更亮，光聚在手指按下的地方；拖动时被手指牵长；松手带回弹落回。
   形状只动 scale / translate（合成器完成），光是按钮自己那层 ::after 的一团径向光。 */
html body :is(.btn,.go,.icon-btn,.opt,.c-toggle,.new-chat,.qa-share,.reel-nav button,.pet-tip-choices button)[data-lg-press][data-lg-press]:not(:disabled) {
  scale:calc(1.045 * var(--lg-sx,1)) calc(1.045 * var(--lg-sy,1));
  translate:var(--lg-tx,0px) var(--lg-ty,0px);
  transition:scale 240ms cubic-bezier(.2,.9,.25,1),translate 140ms cubic-bezier(.2,.8,.2,1),background-color 160ms ease,box-shadow 200ms ease,color 160ms ease;
  box-shadow:0 16px 30px -14px rgba(24,54,82,.42),var(--g-btn-inner),0 0 0 .5px var(--g-hair);
}
html body :is(.go:not(.go-soft):not(.go-cv),.btn.primary,button.primary)[data-lg-press][data-lg-press]:not(:disabled) {box-shadow:var(--g-primary-shadow-hover);}
html body .h-top nav .icon-btn[data-lg-press][data-lg-press] {box-shadow:none;}
html body :is(.go,.btn,.icon-btn)[data-lg-press]::after {
  inset:0;transform:none;opacity:1;transition:opacity 140ms ease;
  background:radial-gradient(circle at var(--lg-px,50%) var(--lg-py,50%),rgba(255,255,255,.72),rgba(255,255,255,.22) 34%,transparent 68%);
}
/* 松手：光慢慢退，形状由弹簧带回 */
html body :is(.go,.btn,.icon-btn):not([data-lg-press])::after {transition:opacity 520ms ease,transform 420ms var(--lg-motion);}
:root[data-theme="dark"] body :is(.go,.btn,.icon-btn)[data-lg-press]::after {background:radial-gradient(circle at var(--lg-px,50%) var(--lg-py,50%),rgba(200,225,255,.42),rgba(200,225,255,.1) 36%,transparent 70%);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body :is(.go,.btn,.icon-btn)[data-lg-press]::after {background:radial-gradient(circle at var(--lg-px,50%) var(--lg-py,50%),rgba(200,225,255,.42),rgba(200,225,255,.1) 36%,transparent 70%);}}
:root[data-theme="dark"] body :is(.btn,.go,.icon-btn,.opt,.c-toggle,.new-chat,.qa-share)[data-lg-press][data-lg-press]:not(:disabled):not(.primary) {box-shadow:0 16px 30px -14px rgba(0,0,0,.7),var(--g-btn-inner),0 0 0 .5px rgba(147,188,220,.3);}
@media(prefers-color-scheme:dark) {:root:not([data-theme="light"]) body :is(.btn,.go,.icon-btn,.opt,.c-toggle,.new-chat,.qa-share)[data-lg-press][data-lg-press]:not(:disabled):not(.primary) {box-shadow:0 16px 30px -14px rgba(0,0,0,.7),var(--g-btn-inner),0 0 0 .5px rgba(147,188,220,.3);}}

/* 看不见的循环动画暂停（liquid-glass.js 给离开屏幕的那一段加 data-lg-off） */
html body [data-lg-off] [data-lg-loop],html body [data-lg-off] [data-lg-loop]::before,html body [data-lg-off] [data-lg-loop]::after,
html body [data-lg-off][data-lg-loop],html body [data-lg-off][data-lg-loop]::before,html body [data-lg-off][data-lg-loop]::after {animation-play-state:paused!important;}

@media(prefers-reduced-motion:reduce) {
  html body [data-lg-press][data-lg-press] {scale:1;translate:none;}
}

/* 背景那两团慢慢移动的光晕：手机上不再实时做 70px 模糊（每帧都要算，还会逼着上面的毛玻璃每帧重算），
   换成本身就由浓到无、多几档过渡的渐变，看上去一样柔，只剩合成器挪位置 */
@media(hover:none),(pointer:coarse),(max-width:680px) {
  html body .aura i {filter:none;}
  html body .aura i:nth-child(1) {background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 12%,transparent) 30%,color-mix(in srgb,var(--accent) 4%,transparent) 50%,transparent 68%);}
  html body .aura i:nth-child(2) {background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 30%,color-mix(in srgb,var(--accent) 3%,transparent) 50%,transparent 68%);}
}

/* 手机上逐字浮现的标题不带模糊：每个字单独做模糊在手机上最容易掉帧，只留浮起和淡入（往回滚时同样沉回去） */
@media(hover:none),(pointer:coarse),(max-width:680px) {
  html body :is(.ln .ch,.fx-ch,.r-sec h2 .ch,.r-name .ch) {filter:none!important;}
}