:root,
html[data-theme="cosmos"]{
  color-scheme:dark;
  --text:#eef4ff;
  --muted:#b2c2de;
  --line:#35507f;
  --btn:#0f1b35;
  --btn2:#69b8ff;
  --page-bg:#060b18;
  --page-gradient:
    radial-gradient(ellipse at 16% 12%,rgba(42,84,150,.13),transparent 38%),
    radial-gradient(ellipse at 82% 84%,rgba(57,80,165,.1),transparent 42%),
    linear-gradient(180deg,#060b18 0%,#0b1430 100%);
  --sky-dot-strong:rgba(255,255,255,.9);
  --sky-dot-soft:rgba(190,220,255,.8);
  --twinkle-low:.55;
  --twinkle-high:1;
  --meteor-color:rgba(180,225,255,.72);
  --meteor-color-soft:rgba(180,225,255,.52);
  --star-rgb:220,236,255;
  --star-opacity:1;
  --shoot-rgb:180,225,255;
  --particle-rgb:139,213,255;
  --quote-glow:rgba(140,207,255,.32);
  --author-glow:rgba(150,190,255,.2);
  --quote-zh:#9ec2ee;
  --cursor:#9cd8ff;
  --tool-text:#eaf3ff;
  --tool-border:rgba(154,203,255,.42);
  --tool-border-active:rgba(178,226,255,.78);
  --tool-bg:rgba(9,18,38,.64);
  --tool-bg-active:rgba(12,26,54,.78);
  --tool-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
  --panel-border:rgba(124,172,232,.32);
  --panel-bg:linear-gradient(180deg,rgba(7,14,31,.92),rgba(10,20,43,.86));
  --panel-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  --panel-head:#cfe1ff;
  --panel-meta:#95d9c3;
  --card-bg:rgba(14,27,55,.58);
  --card-bg-hover:rgba(20,38,75,.76);
  --card-border:rgba(129,174,231,.22);
  --card-text:#eef6ff;
  --card-muted:#aebfda;
  --tip-bg:rgba(5,12,26,.94);
  --tip-text:#eaf3ff;
  --tip-shadow:0 14px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  --theme-accent:#8bd7ff;
  --theme-accent-rgb:139,215,255;
  --primary-button-text:#04172c;
}

html[data-theme="aurora"]{
  color-scheme:dark;
  --text:#effff9;
  --muted:#a7d7cd;
  --line:#2c6f70;
  --page-bg:#031014;
  --page-gradient:
    radial-gradient(ellipse at 17% 10%,rgba(54,238,175,.18),transparent 38%),
    radial-gradient(ellipse at 84% 18%,rgba(116,88,255,.22),transparent 42%),
    radial-gradient(ellipse at 54% 96%,rgba(22,151,174,.12),transparent 46%),
    linear-gradient(160deg,#031014 0%,#06172a 56%,#0d1027 100%);
  --sky-dot-strong:rgba(222,255,244,.92);
  --sky-dot-soft:rgba(161,229,224,.76);
  --twinkle-low:.46;
  --twinkle-high:.94;
  --meteor-color:rgba(115,255,207,.7);
  --meteor-color-soft:rgba(161,138,255,.52);
  --star-rgb:207,255,241;
  --star-opacity:.92;
  --shoot-rgb:108,255,208;
  --particle-rgb:125,235,210;
  --quote-glow:rgba(82,235,190,.3);
  --author-glow:rgba(77,209,185,.2);
  --quote-zh:#98dfd0;
  --cursor:#85f0d2;
  --tool-text:#eafff9;
  --tool-border:rgba(109,221,193,.4);
  --tool-border-active:rgba(136,245,214,.76);
  --tool-bg:rgba(5,30,34,.64);
  --tool-bg-active:rgba(7,47,48,.78);
  --tool-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
  --panel-border:rgba(99,205,183,.3);
  --panel-bg:linear-gradient(180deg,rgba(4,25,31,.92),rgba(8,29,48,.86));
  --panel-shadow:0 24px 70px rgba(0,10,15,.48),inset 0 1px 0 rgba(255,255,255,.06);
  --panel-head:#d5fff3;
  --panel-meta:#8fe3cd;
  --card-bg:rgba(8,48,53,.54);
  --card-bg-hover:rgba(13,65,68,.74);
  --card-border:rgba(104,216,188,.2);
  --card-text:#f1fffb;
  --card-muted:#a4d4cb;
  --tip-bg:rgba(3,24,29,.95);
  --tip-text:#eafff8;
  --tip-shadow:0 14px 34px rgba(0,8,12,.44),inset 0 1px 0 rgba(255,255,255,.07);
  --theme-accent:#72efc5;
  --theme-accent-rgb:114,239,197;
  --primary-button-text:#05231e;
}

html[data-theme="ember"]{
  color-scheme:dark;
  --text:#fff5e9;
  --muted:#d9b8ae;
  --line:#784d58;
  --page-bg:#13080f;
  --page-gradient:
    radial-gradient(ellipse at 13% 16%,rgba(255,168,73,.18),transparent 38%),
    radial-gradient(ellipse at 86% 18%,rgba(238,74,119,.19),transparent 42%),
    radial-gradient(ellipse at 60% 100%,rgba(112,60,176,.13),transparent 48%),
    linear-gradient(160deg,#170a11 0%,#160b1a 54%,#090711 100%);
  --sky-dot-strong:rgba(255,241,218,.92);
  --sky-dot-soft:rgba(255,178,156,.72);
  --twinkle-low:.48;
  --twinkle-high:.96;
  --meteor-color:rgba(255,189,103,.72);
  --meteor-color-soft:rgba(255,114,143,.5);
  --star-rgb:255,236,211;
  --star-opacity:.94;
  --shoot-rgb:255,184,99;
  --particle-rgb:255,137,119;
  --quote-glow:rgba(255,140,92,.3);
  --author-glow:rgba(255,116,129,.2);
  --quote-zh:#eab29b;
  --cursor:#ffc17a;
  --tool-text:#fff6ec;
  --tool-border:rgba(238,153,124,.4);
  --tool-border-active:rgba(255,195,142,.76);
  --tool-bg:rgba(37,12,22,.65);
  --tool-bg-active:rgba(58,18,32,.8);
  --tool-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  --panel-border:rgba(220,122,121,.3);
  --panel-bg:linear-gradient(180deg,rgba(35,10,21,.93),rgba(27,12,34,.88));
  --panel-shadow:0 24px 70px rgba(12,0,7,.5),inset 0 1px 0 rgba(255,255,255,.06);
  --panel-head:#ffe5d4;
  --panel-meta:#f0aa83;
  --card-bg:rgba(63,23,36,.56);
  --card-bg-hover:rgba(84,29,43,.76);
  --card-border:rgba(231,132,121,.2);
  --card-text:#fff7ed;
  --card-muted:#d9b1a7;
  --tip-bg:rgba(30,8,17,.96);
  --tip-text:#fff3e7;
  --tip-shadow:0 14px 34px rgba(12,0,6,.46),inset 0 1px 0 rgba(255,255,255,.07);
  --theme-accent:#ffb06f;
  --theme-accent-rgb:255,176,111;
  --primary-button-text:#2d1407;
}

html[data-theme="dawn"]{
  color-scheme:light;
  --text:#14213d;
  --muted:#52647e;
  --line:#9eb0ca;
  --page-bg:#edf2f8;
  --page-gradient:
    radial-gradient(ellipse at 10% 8%,rgba(255,204,139,.48),transparent 38%),
    radial-gradient(ellipse at 78% 8%,rgba(182,169,255,.44),transparent 42%),
    radial-gradient(ellipse at 94% 62%,rgba(255,137,174,.2),transparent 38%),
    radial-gradient(ellipse at 42% 104%,rgba(121,184,242,.24),transparent 48%),
    linear-gradient(160deg,#fbf8f2 0%,#edf2f8 54%,#e4edf8 100%);
  --sky-dot-strong:rgba(35,63,101,.5);
  --sky-dot-soft:rgba(64,87,126,.4);
  --twinkle-low:.22;
  --twinkle-high:.56;
  --meteor-color:rgba(74,90,164,.42);
  --meteor-color-soft:rgba(142,86,145,.3);
  --star-rgb:41,68,108;
  --star-opacity:.36;
  --shoot-rgb:82,82,157;
  --particle-rgb:83,58,253;
  --quote-glow:rgba(76,104,153,.22);
  --author-glow:rgba(70,98,142,.14);
  --quote-zh:#526f99;
  --cursor:#4b57b7;
  --tool-text:#172b46;
  --tool-border:rgba(56,81,120,.25);
  --tool-border-active:rgba(83,58,253,.48);
  --tool-bg:rgba(255,255,255,.68);
  --tool-bg-active:rgba(255,255,255,.88);
  --tool-shadow:0 12px 30px rgba(34,61,99,.13),inset 0 1px 0 rgba(255,255,255,.78);
  --panel-border:rgba(66,89,126,.2);
  --panel-bg:linear-gradient(180deg,rgba(255,255,255,.94),rgba(242,247,252,.88));
  --panel-shadow:0 24px 70px rgba(42,67,101,.18),inset 0 1px 0 rgba(255,255,255,.9);
  --panel-head:#203653;
  --panel-meta:#496b77;
  --card-bg:rgba(255,255,255,.58);
  --card-bg-hover:rgba(255,255,255,.88);
  --card-border:rgba(61,88,130,.18);
  --card-text:#172b46;
  --card-muted:#5c6f87;
  --tip-bg:rgba(255,255,255,.96);
  --tip-text:#1a2e49;
  --tip-shadow:0 14px 34px rgba(42,67,101,.18),inset 0 1px 0 rgba(255,255,255,.9);
  --theme-accent:#533afd;
  --theme-accent-rgb:83,58,253;
  --primary-button-text:#ffffff;
}

html[data-theme="yunguan"]{
  color-scheme:dark;
  --text:#f4f0df;
  --muted:#a8b0a6;
  --line:rgba(232,226,202,.16);
  --page-bg:#0e1210;
  --page-gradient:
    linear-gradient(135deg,rgba(99,211,140,.12),transparent 34%),
    radial-gradient(circle at 82% 12%,rgba(229,184,109,.14),transparent 28%),
    linear-gradient(180deg,#101511 0%,#0a0d0c 100%);
  --quote-glow:rgba(99,211,140,.22);
  --author-glow:rgba(99,211,140,.16);
  --quote-zh:#a8b0a6;
  --cursor:#e5b86d;
  --tool-text:#f4f0df;
  --tool-border:rgba(99,211,140,.42);
  --tool-border-active:rgba(99,211,140,.82);
  --tool-bg:rgba(14,18,16,.76);
  --tool-bg-active:rgba(20,28,23,.9);
  --tool-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  --panel-border:rgba(99,211,140,.32);
  --panel-bg:linear-gradient(180deg,rgba(14,20,17,.95),rgba(10,14,12,.92));
  --panel-shadow:0 24px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05);
  --panel-head:#f4f0df;
  --panel-meta:#63d38c;
  --card-bg:rgba(20,26,22,.66);
  --card-bg-hover:rgba(26,38,30,.88);
  --card-border:rgba(232,226,202,.15);
  --card-text:#f4f0df;
  --card-muted:#a8b0a6;
  --tip-bg:rgba(12,18,15,.96);
  --tip-text:#f4f0df;
  --tip-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  --theme-accent:#63d38c;
  --theme-accent-rgb:99,211,140;
  --primary-button-text:#071b10;
}

html[data-theme="guihang"]{
  color-scheme:dark;
  --text:#f8f3e6;
  --muted:#b8ad9c;
  --line:rgba(229,184,109,.18);
  --page-bg:#100e0b;
  --page-gradient:
    linear-gradient(135deg,rgba(229,184,109,.14),transparent 34%),
    radial-gradient(circle at 82% 12%,rgba(99,211,140,.11),transparent 28%),
    linear-gradient(180deg,#15120e 0%,#0c0b08 100%);
  --quote-glow:rgba(229,184,109,.24);
  --author-glow:rgba(229,184,109,.16);
  --quote-zh:#b8ad9c;
  --cursor:#63d38c;
  --tool-text:#f8f3e6;
  --tool-border:rgba(229,184,109,.44);
  --tool-border-active:rgba(229,184,109,.84);
  --tool-bg:rgba(20,16,12,.78);
  --tool-bg-active:rgba(30,24,17,.92);
  --tool-shadow:0 12px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06);
  --panel-border:rgba(229,184,109,.34);
  --panel-bg:linear-gradient(180deg,rgba(22,18,13,.96),rgba(14,11,8,.92));
  --panel-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.05);
  --panel-head:#f8f3e6;
  --panel-meta:#e5b86d;
  --card-bg:rgba(28,23,17,.68);
  --card-bg-hover:rgba(38,31,22,.88);
  --card-border:rgba(229,184,109,.18);
  --card-text:#f8f3e6;
  --card-muted:#b8ad9c;
  --tip-bg:rgba(18,14,10,.96);
  --tip-text:#f8f3e6;
  --tip-shadow:0 14px 34px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06);
  --theme-accent:#e5b86d;
  --theme-accent-rgb:229,184,109;
  --primary-button-text:#1f1505;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background-color:var(--page-bg);
  background-image:var(--page-gradient);
  color:var(--text);
  overflow:hidden;
  transition:background-color .35s ease,color .3s ease;
}
canvas{position:fixed;inset:0;width:100%;height:100%}
#fx{pointer-events:none}
.sky,.sky:before,.sky:after{position:fixed;inset:0;content:"";display:block;pointer-events:none}
.sky{
  background:
    radial-gradient(2px 2px at 8% 14%,var(--sky-dot-strong),transparent 55%),
    radial-gradient(1.8px 1.8px at 22% 66%,var(--sky-dot-soft),transparent 55%),
    radial-gradient(1.6px 1.6px at 40% 28%,var(--sky-dot-soft),transparent 55%),
    radial-gradient(2.2px 2.2px at 62% 74%,var(--sky-dot-strong),transparent 55%),
    radial-gradient(1.7px 1.7px at 80% 18%,var(--sky-dot-soft),transparent 55%),
    radial-gradient(1.4px 1.4px at 92% 54%,var(--sky-dot-soft),transparent 55%);
  animation:twinkle 2.2s ease-in-out infinite alternate;
}
.sky:before,
.sky:after{display:none}
@keyframes twinkle{from{opacity:var(--twinkle-low)}to{opacity:var(--twinkle-high)}}@keyframes meteor{to{transform:translateX(140%) translateY(-120px)}}

.wrap{
  position:relative;
  z-index:3;
  width:100%;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:84px 24px 64px;
  text-align:center;
}
.quote-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(94vw,1180px);
}
.quote{
  --quote-base-size:clamp(24px,3.6vw,44px);
  font-size:var(--quote-base-size);
  line-height:1.38;
  font-weight:900;
  width:100%;
  max-width:min(94vw,1160px);
  min-height:calc(var(--quote-base-size) * 2.76);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-shadow:0 0 22px var(--quote-glow);
}
.quote[data-long="true"]{
  font-size:clamp(21px,3.05vw,37px);
}
.quote-body{
  display:block;
  width:100%;
  max-width:100%;
}
#q{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  width:100%;
}
.quote-row{
  display:block;
  min-height:1.38em;
  line-height:1.38;
  white-space:nowrap;
  text-align:center;
}
.cursor-inline{
  display:inline-block;
  width:0;
  overflow:visible;
  margin-left:2px;
  color:var(--cursor);
  font-weight:400;
  text-align:left;
  animation:blink .9s step-end infinite;
}
.quote-meta{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:clamp(18px,2.5vh,26px);
  padding-top:clamp(14px,2vh,20px);
  width:min(88vw,780px);
}
.quote-meta::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:clamp(48px,8vw,84px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--theme-accent-rgb),.55),transparent);
}
.quote-zh{
  display:block;
  min-height:1.55em;
  padding:0 12px;
  text-align:center;
  color:var(--quote-zh);
  font-size:clamp(16px,1.85vw,22px);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.04em;
  white-space:normal;
  text-wrap:balance;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease,transform .35s ease;
}
.quote-zh.show{
  opacity:.96;
  transform:translateY(0);
}
.author{
  min-height:1.4em;
  font-size:clamp(14px,1.4vw,18px);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--muted);
  text-shadow:0 0 10px var(--author-glow);
  padding:0 16px;
  text-align:center;
  opacity:0;
  transition:opacity .45s ease,filter .45s ease,transform .45s ease;
  filter:blur(1px);
  transform:translateY(2px);
}
.author.show{opacity:.92;filter:blur(0);transform:translateY(0)}
.author.fade{opacity:.15;filter:blur(1.5px)}
.cursor{display:inline-block;width:10px;color:var(--cursor);animation:blink .9s step-end infinite}@keyframes blink{50%{opacity:0}}
.fallback-typer{display:none;overflow:hidden;white-space:nowrap;border-right:2px solid var(--cursor);width:0;animation:type 8s steps(48,end) infinite,caret .9s step-end infinite}
.nojs .fallback-typer{display:inline-block}.nojs #q,.nojs #a,.nojs #c{display:none}
@keyframes type{0%{width:0}40%{width:100%}80%{width:100%}100%{width:0}}@keyframes caret{50%{border-color:transparent}}

/* unified 4xx / 5xx error pages */
body[data-page="error"]{
  min-height:100%;
  overflow:auto;
}
body[data-page="error"],
body[data-page="error"] *{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.error-stage{
  position:relative;
  z-index:3;
  width:100%;
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:88px 24px 44px;
}
.error-card{
  position:relative;
  isolation:isolate;
  width:min(720px,100%);
  overflow:hidden;
  overflow:clip;
  padding:clamp(30px,4.4vw,48px);
  border:1px solid var(--panel-border);
  border-radius:20px;
  background:var(--panel-bg);
  box-shadow:var(--panel-shadow);
  text-align:left;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.error-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-190px;
  right:-130px;
  width:390px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--theme-accent-rgb),.22),transparent 68%);
  pointer-events:none;
}
.error-card::after{
  content:"";
  position:absolute;
  top:0;
  right:12%;
  left:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--theme-accent-rgb),.78),transparent);
  opacity:.78;
}
.error-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--panel-head);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.error-signal{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--theme-accent);
  box-shadow:0 0 0 5px rgba(var(--theme-accent-rgb),.1),0 0 18px rgba(var(--theme-accent-rgb),.48);
  animation:error-pulse 2.2s ease-in-out infinite;
}
.error-port{
  margin-left:auto;
  padding:4px 8px;
  border:1px solid var(--card-border);
  border-radius:999px;
  color:var(--panel-meta);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
}
.dragon-mark{
  position:relative;
  display:inline-grid;
  place-items:center;
  overflow:visible;
  cursor:help;
}
.dragon-mark::after{
  content:attr(data-tip);
  position:absolute;
  top:50%;
  right:calc(100% + 8px);
  bottom:auto;
  z-index:40;
  display:grid;
  place-items:center;
  min-width:34px;
  min-height:32px;
  padding:6px 9px;
  border:1px solid var(--tool-border);
  border-radius:10px;
  background:var(--tip-bg);
  color:var(--tip-text);
  box-shadow:var(--tip-shadow);
  font-family:"STKaiti","KaiTi","FangSong",serif;
  font-size:17px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(5px,-50%) scale(.92);
  transform-origin:right center;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
.dragon-mark:hover::after{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%) scale(1);
  transition-delay:0s;
}
.err-code{
  margin:22px 0 4px;
  color:var(--text);
  font-size:clamp(92px,15vw,156px);
  font-weight:300;
  font-variant-numeric:tabular-nums;
  line-height:.82;
  letter-spacing:-.075em;
  background:linear-gradient(135deg,var(--text) 20%,var(--theme-accent) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 26px var(--quote-glow));
}
.error-family{
  margin:18px 0 0;
  color:var(--panel-meta);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.error-title{
  margin:10px 0 0;
  color:var(--text);
  font-size:clamp(28px,4.2vw,40px);
  font-weight:650;
  line-height:1.18;
  letter-spacing:-.035em;
}
.err-desc{
  max-width:580px;
  margin:14px 0 0;
  color:var(--muted);
  font-size:clamp(15px,1.8vw,17px);
  line-height:1.7;
  white-space:normal;
  overflow-wrap:anywhere;
}
.err-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:126px;
  min-height:44px;
  overflow:hidden;
  padding:10px 18px;
  border:1px solid var(--card-border);
  border-radius:999px;
  background:var(--card-bg);
  color:var(--card-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.12);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.btn.primary{
  border-color:var(--theme-accent);
  background:var(--theme-accent);
  color:var(--primary-button-text);
  box-shadow:0 10px 26px rgba(var(--theme-accent-rgb),.25),inset 0 1px 0 rgba(255,255,255,.34);
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(130px 40px at var(--mx,50%) -10%,rgba(255,255,255,.38),transparent 62%);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:var(--tool-border-active);
  background:var(--card-bg-hover);
  box-shadow:0 12px 28px rgba(0,0,0,.2),0 0 0 1px rgba(var(--theme-accent-rgb),.12) inset;
}
.btn.primary:hover{background:var(--theme-accent);border-color:var(--theme-accent)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--theme-accent-rgb),.3),0 10px 24px rgba(0,0,0,.22)}
.btn-arrow{font-size:16px;line-height:1;transition:transform .18s ease}
.btn:hover .btn-arrow{transform:translateX(2px)}
.error-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--card-border);
  color:var(--card-muted);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.04em;
}
.error-foot [data-error-status]{
  color:var(--panel-meta);
  font-variant-numeric:tabular-nums;
}
@keyframes error-pulse{
  0%,100%{transform:scale(.92);opacity:.72}
  50%{transform:scale(1.08);opacity:1}
}
@media (max-width:640px){
  .error-stage{padding:68px 12px 20px}
  .error-card{padding:24px 18px 20px;border-radius:16px}
  .err-code{margin-top:20px;font-size:clamp(78px,29vw,108px)}
  .error-family{margin-top:16px}
  .error-title{font-size:clamp(25px,8vw,32px)}
  .err-desc{font-size:14px;line-height:1.65}
  .err-actions{display:grid;grid-template-columns:1fr;margin-top:24px}
  .btn{width:100%;min-height:46px}
  .error-foot{align-items:flex-start;flex-direction:column;gap:6px;margin-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .error-signal{animation:none}
  .btn,.btn::after,.btn-arrow{transition:none}
}

@media (max-width:900px){
  .wrap{padding:76px 16px 48px}
  body[data-page="home"] .quote{
    --quote-base-size:clamp(20px,5.2vw,30px);
    font-size:var(--quote-base-size);
    min-height:calc(var(--quote-base-size) * 4.14);
    padding:0 .2em;
  }
  body[data-page="home"] .quote[data-long="true"]{
    font-size:clamp(18px,4.5vw,26px);
  }
  body[data-page="home"] .quote-meta{
    margin-top:16px;
    padding-top:14px;
    gap:8px;
  }
  body[data-page="home"] .quote-zh{
    font-size:clamp(14px,4vw,18px);
    padding:0 8px;
  }
  body[data-page="home"] .author{
    font-size:clamp(13px,3.4vw,16px);
  }
}

/* home typing text as background-embedded feel: non-selectable */
body[data-page="home"] .quote,
body[data-page="home"] #q,
body[data-page="home"] .cursor,
body[data-page="home"] .quote-zh,
body[data-page="home"] .author{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* home tools: isolated overlays, unified across all 6 themes */
.site-tools{
  position:fixed;
  top:18px;
  right:clamp(22px,4.5vw,48px);
  z-index:20;
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--tool-text);
  font-size:14px;
  view-transition-name:site-tools;
}
.site-tools details{position:relative}
.site-tools summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--tool-border);
  border-radius:8px;
  background:var(--tool-bg);
  color:var(--tool-text);
  box-shadow:var(--tool-shadow);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.08em;
  transition:transform .18s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.site-tools summary::-webkit-details-marker{display:none}
.site-tools summary:hover,
.site-tools details[open] > summary{
  transform:translateY(-1px);
  border-color:var(--tool-border-active);
  background:var(--tool-bg-active);
}
.site-tools summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(var(--theme-accent-rgb),.32),var(--tool-shadow);
}
.nav-mark{
  width:14px;
  height:14px;
  border:1px solid var(--theme-accent);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(var(--theme-accent-rgb),.1),inset 0 0 8px rgba(var(--theme-accent-rgb),.42);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.theme-orb{
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.94) 0 8%,transparent 10%),
    conic-gradient(from 215deg,var(--theme-accent),#8a78ff,#ff86ac,#f0b86a,var(--theme-accent));
  box-shadow:0 0 0 4px rgba(var(--theme-accent-rgb),.1),0 0 12px rgba(var(--theme-accent-rgb),.26);
  transition:box-shadow .25s ease;
}
.nav-panel,
.theme-panel{
  position:absolute;
  top:48px;
  right:0;
  max-height:calc(100vh - 92px);
  padding:14px;
  border:1px solid var(--panel-border);
  border-radius:10px;
  background:var(--panel-bg);
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.nav-panel{
  width:min(360px,calc(100vw - 32px));
  overflow:visible;
}
.theme-panel{
  width:min(308px,calc(100vw - 32px));
  overflow:auto;
}
.nav-head,
.theme-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 11px;
  border-bottom:1px solid var(--card-border);
  margin-bottom:8px;
  color:var(--panel-head);
}
.nav-head strong,
.theme-head strong{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.nav-head span,
.theme-head span{font-size:12px;color:var(--panel-meta);font-weight:600}
.theme-section-title{
  margin:12px 0 6px;
  padding:0 2px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--panel-meta);
  text-transform:uppercase;
  opacity:.9;
}
.theme-section-title:first-of-type{margin-top:2px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-option{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:66px;
  padding:9px 24px 9px 9px;
  border:1px solid var(--card-border);
  border-radius:10px;
  background:var(--card-bg);
  color:var(--card-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.theme-option:hover{transform:translateY(-2px);border-color:var(--tool-border-active);background:var(--card-bg-hover)}
.theme-option:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(var(--theme-accent-rgb),.38)}
.theme-option[aria-pressed="true"]{
  border-color:var(--theme-accent);
  background:var(--card-bg-hover);
  box-shadow:inset 0 0 0 1px rgba(var(--theme-accent-rgb),.18),0 8px 20px rgba(0,0,0,.14);
}
.theme-swatch{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 12px rgba(0,0,0,.2);
}
.theme-swatch--cosmos{background:radial-gradient(circle at 30% 25%,#bfeaff 0 4%,transparent 6%),radial-gradient(circle at 65% 68%,#8be0b0 0 4%,transparent 6%),linear-gradient(145deg,#071021,#142854)}
.theme-swatch--aurora{background:radial-gradient(circle at 30% 30%,rgba(91,255,201,.9),transparent 38%),radial-gradient(circle at 78% 32%,rgba(137,102,255,.88),transparent 42%),#061b27}
.theme-swatch--ember{background:radial-gradient(circle at 27% 30%,rgba(255,189,98,.92),transparent 38%),radial-gradient(circle at 78% 68%,rgba(238,74,119,.84),transparent 43%),#1a0a19}
.theme-swatch--dawn{border-color:rgba(57,77,112,.16);background:radial-gradient(circle at 25% 20%,rgba(255,190,110,.72),transparent 38%),radial-gradient(circle at 76% 25%,rgba(157,139,255,.7),transparent 42%),linear-gradient(145deg,#fffaf2,#dceafa)}
.theme-swatch--yunguan{
  border-color:rgba(99,211,140,.45);
  background:
    radial-gradient(circle at 30% 25%,rgba(99,211,140,.95) 0 12%,transparent 36%),
    radial-gradient(circle at 75% 70%,rgba(229,184,109,.9) 0 10%,transparent 38%),
    linear-gradient(145deg,#0e1210,#142019);
}
.theme-swatch--guihang{
  border-color:rgba(229,184,109,.45);
  background:
    radial-gradient(circle at 30% 25%,rgba(229,184,109,.95) 0 12%,transparent 36%),
    radial-gradient(circle at 75% 70%,rgba(99,211,140,.9) 0 10%,transparent 38%),
    linear-gradient(145deg,#100e0b,#211910);
}
.theme-copy{display:block;min-width:0}
.theme-copy b{display:block;margin-bottom:4px;font-size:13px;line-height:1.05;color:var(--card-text)}
.theme-copy small{display:block;color:var(--card-muted);font-size:10px;line-height:1.25;white-space:nowrap}
.theme-check{
  position:absolute;
  top:7px;
  right:7px;
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--theme-accent);
  color:var(--primary-button-text);
  font-size:10px;
  font-weight:900;
  opacity:0;
  transform:scale(.72);
  transition:opacity .18s ease,transform .18s ease,background-color .2s ease,color .2s ease;
}
.theme-option[aria-pressed="true"] .theme-check{opacity:1;transform:scale(1)}
.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nav-grid a{
  --accent:#7dd3fc;
  position:relative;
  min-height:64px;
  padding:10px 10px 9px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--card-bg);
  color:var(--card-text);
  text-decoration:none;
  overflow:visible;
  isolation:isolate;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.nav-grid a::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--accent);
  opacity:.9;
}
.nav-grid a:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 58%,var(--card-text) 16%);
  background:var(--card-bg-hover);
}
.nav-grid .nav-tip{
  position:absolute;
  left:auto;
  right:calc(100% + 14px);
  top:50%;
  bottom:auto;
  width:248px;
  max-width:calc(100vw - 64px);
  padding:8px 10px;
  border:1px solid var(--tool-border);
  border-radius:8px;
  background:var(--tip-bg);
  color:var(--tip-text);
  box-shadow:var(--tip-shadow);
  backdrop-filter:blur(12px);
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(6px,-50%) scale(.98);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
  z-index:30;
}
.nav-grid a:nth-child(even) .nav-tip{
  left:auto;
  right:calc(200% + 22px);
}
.nav-grid a:hover .nav-tip,
.nav-grid a:focus-visible .nav-tip{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%) scale(1);
  transition-delay:0s;
}
.nav-grid b{
  display:block;
  margin-bottom:5px;
  font-size:13px;
  line-height:1.1;
}
.nav-grid span{
  display:block;
  color:var(--card-muted);
  font-size:12px;
  line-height:1.28;
}
.nav-grid a:nth-child(2n){--accent:#f0b86a}
.nav-grid a:nth-child(3n){--accent:#8be0b0}
.nav-grid a:nth-child(4n){--accent:#cf9cff}
.nav-grid a:nth-child(5n){--accent:#ff8ba7}

@media (max-width:640px){
  .site-tools{top:12px;right:12px;gap:7px}
  .site-tools summary{min-height:36px;padding:0 11px;font-size:13px}
  .nav-panel,
  .theme-panel{
    position:fixed;
    top:56px;
    right:12px;
    width:calc(100vw - 24px);
    max-height:calc(100vh - 68px);
    padding:12px;
    overflow:auto;
  }
  .nav-grid{grid-template-columns:1fr}
  .nav-grid a{min-height:56px}
  .nav-grid .nav-tip{display:none}
  .theme-option{min-height:64px}
  .dragon-mark{cursor:default}
  .dragon-mark::after{display:none}
}

@media (hover:none), (pointer:coarse){
  .nav-grid .nav-tip{display:none}
  .dragon-mark{cursor:default}
  .dragon-mark::after{display:none}
}

@media (max-width:350px){
  .theme-grid{grid-template-columns:1fr}
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.38s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion:reduce){
  .sky,
  .sky:before,
  .sky:after{animation:none}
  .site-tools summary,
  .theme-option,
  .theme-check,
  .dragon-mark::after{transition:none}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* === Dual Skin View Separation === */
.dragon-view{
  position:relative;
  min-height:100dvh;
  display:grid;
  place-items:center;
}
.zcc-view{
  display:none !important;
}
html[data-skin="zcc"] .dragon-view{
  display:none !important;
}
html[data-skin="zcc"] .zcc-view{
  display:block !important;
}