/* ShouYuLove: soft paper typography and hand-drawn hearts. DESIGN_VARIANCE 10 / MOTION_INTENSITY 10 / VISUAL_DENSITY 5.
   Native CSS, shared by both existing routes. No framework or remote assets.
   Radius: pill navigation/actions, 16px secondary controls, 24px cards, 32px paper/dialog surfaces.
   Layers: local controls 2, fixed tools 40, navigation 50, menus 70,
   history 80/81, modal 100, toast 120, skip link 200. */
@font-face {font-family:"HarmonyOS Local";src:local("HarmonyOS Sans SC");font-display:swap}
@font-face {font-family:"Brand Caption CN";src:url("fonts/brand-caption-cn.woff2?v=72e3a6a1d607");font-weight:400 900;font-display:swap}
@font-face {font-family:"Query CN";src:url("fonts/query-label.woff2?v=444f0157609b") format("woff2");font-weight:400 900;font-display:swap}
:root {
  --font-body:"HarmonyOS Local","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-display:var(--font-body);
  --primary:#576a82; --secondary:#576a82; --accent:#576a82;
  --bg:#fbf6f3; --fg:#35343b; --text:#35343b; --text-2:#6d646a;
  --surface:#fffdfb; --surface-2:#f4efec; --muted:#ece6e2; --border:#dfd5cf;
  --ring:#576a82; --danger:#ad443a;
  --sage:var(--primary);
  --accent-soft:#e9eef3; --accent-ink:#43566d; --control-border:#938482;
  --button-bg:#576a82; --button-text:#fffdfb; --placeholder:#76696d;
  --paper-peach:#efd0c3; --paper-sage:#dce5d2; --halo-rose:rgb(220 171 157 / .23); --halo-sage:rgb(185 203 179 / .28);
  --grad-brand:linear-gradient(135deg,#576a82,#7b8fa4);
  --grad-cta:linear-gradient(135deg,#576a82,#576a82);
  --r-sm:16px; --r-md:24px; --r-lg:24px; --r-xl:32px;
  --shadow-sm:0 3px 10px rgb(130 92 85 / .05),0 10px 24px rgb(130 92 85 / .04);
  --shadow-md:0 8px 24px rgb(130 92 85 / .08),0 24px 52px rgb(130 92 85 / .06);
  --shadow-lg:0 16px 40px rgb(130 92 85 / .10),0 36px 72px rgb(130 92 85 / .08);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
[data-theme="dark"] {
  --primary:#bdcce0; --secondary:#bdcce0; --accent:#bdcce0;
  --bg:#262328; --fg:#f2eae4; --text:#f2eae4; --text-2:#c1b3ba;
  --surface:#322d33; --surface-2:#3a3339; --muted:#443b43; --border:#57474e;
  --ring:#bdcce0; --danger:#ffb1a8;
  --accent-soft:#3a424e; --accent-ink:#cbd7e7; --control-border:#a6979b;
  --button-bg:#bdcce0; --button-text:#293441; --placeholder:#bcabb3;
  --paper-peach:#75504c; --paper-sage:#4d5c45; --halo-rose:rgb(148 101 93 / .18); --halo-sage:rgb(127 146 112 / .16);
  --grad-brand:linear-gradient(135deg,#bdcce0,#cbd7e7);
  --grad-cta:linear-gradient(135deg,#bdcce0,#bdcce0);
  --shadow-sm:0 4px 16px rgb(18 19 26 / .16);
  --shadow-md:0 8px 28px rgb(18 19 26 / .22);
  --shadow-lg:0 18px 48px rgb(18 19 26 / .32);
  color-scheme:dark;
}
html {scroll-behavior:smooth;scroll-padding-top:88px}
html {scrollbar-gutter:stable}
body {min-height:100dvh;line-height:1.65;background:var(--bg);color:var(--text);isolation:isolate}
/* The original blush/sage brand tones soften the canvas; controls share one blue-grey accent. */
body::before,body::after {content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%}
body::before {width:650px;height:650px;left:-260px;top:16%;background:radial-gradient(ellipse,var(--halo-rose),transparent 69%)}
body::after {width:760px;height:760px;right:-330px;top:-140px;background:radial-gradient(ellipse,var(--halo-sage),transparent 69%)}
body.dialog-open {overflow:hidden}
/* Keep the retained component styles from animating paint or layout properties. */
*,*::before,*::after {transition-property:transform,opacity !important}
button,a,input,textarea {-webkit-tap-highlight-color:transparent}
button,a {touch-action:manipulation}
button {white-space:nowrap}
.icon {display:inline-block;flex:none;width:20px;height:20px;fill:currentColor;stroke:none;vertical-align:middle}
:focus-visible {outline:3px solid var(--ring);outline-offset:4px;border-radius:var(--r-sm)}
::selection {background:var(--button-bg);color:var(--button-text)}
.skip-link {position:fixed;z-index:200;left:16px;top:12px;padding:10px 16px;
  background:var(--button-bg);color:var(--button-text);border-radius:12px;
  text-decoration:none;transform:translateY(-150%);transition:transform .2s var(--ease-out)}
.skip-link:focus {top:12px;transform:none}
.topbar {height:76px;max-width:1280px;margin:12px auto 0;padding:0 28px;gap:20px;
  background:transparent;border-bottom:0;backdrop-filter:none;position:relative}
.brand {gap:11px;flex:none}
.mark,.mark img {width:46px;height:46px;border-radius:16px;box-shadow:none}
.brand .name {font-size:21px;letter-spacing:0}
.brand .sub {font-family:"Brand Caption CN","Brand CN",var(--font-body);font-size:12px;letter-spacing:3px;text-align:center;margin:3px -3px 0 0;color:var(--text-2)}
.nav-right {gap:6px;flex-wrap:nowrap;background:var(--surface);padding:6px;border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-sm)}
.topbar .usecase-btn,.topbar .pill-btn,.topbar .hist-fab,.topbar .visit-stats-btn,.theme-btn {
  position:static;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:auto;min-height:42px;padding:9px 12px;margin:0;border:1px solid transparent;
  border-radius:999px;background:transparent;color:var(--text-2);box-shadow:none;
  font-size:13px;font-weight:500;line-height:1.4;text-decoration:none;
  transition:transform .22s var(--ease-out),background .22s,color .22s;
}
.topbar .usecase-btn:hover,.topbar .pill-btn:hover,.topbar .hist-fab:hover,.topbar .visit-stats-btn:hover,.theme-btn:hover {
  background:var(--accent-soft);color:var(--accent-ink);box-shadow:none;transform:translateY(-1px)
}
.topbar .usecase-btn[href],.topbar .pill-btn[href] {color:var(--accent-ink);background:var(--accent-soft)}
.topbar .visit-stats-btn {width:42px;padding:10px}
.topbar .theme-btn {width:42px;padding:10px;border-color:transparent;background:var(--surface-2)}
.topbar svg {color:inherit;width:18px;height:18px}
.main-col {width:100%;max-width:1280px;margin:0 auto;padding:0 28px 30px}
.welcome {padding:32px 0 0}
.welcome-content {min-width:0;max-width:800px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:32px}
.welcome .hero {width:100%;max-width:none;margin:0 auto;padding:0;text-align:center}
.title-composition {position:relative;isolation:isolate;width:fit-content;max-width:100%;margin:0 auto;padding:10px 0 8px}
.title-papers {position:absolute;inset:0;z-index:-1;pointer-events:none}
.title-paper {position:absolute;display:block}
.title-paper-peach {width:57%;height:70%;top:16%;left:-3%;background:var(--paper-peach);border-radius:60% 30% 36% 25%;transform:rotate(-7deg);opacity:.68}
.title-paper-sage {width:22%;height:105%;right:-3%;bottom:-5%;background:var(--paper-sage);border-radius:46% 50% 36% 48%;transform:rotate(18deg);opacity:.78}
.welcome .hero h1 {position:relative;font-family:"Brand CN",var(--font-display);font-size:clamp(40px,4.5vw,58px);
  line-height:1.45;font-weight:700;letter-spacing:1.5px;color:var(--text);background:none;animation:none}
.headline-line {display:inline-block;width:max-content;white-space:nowrap;transform:rotate(-3deg)}
.headline-line.grad {margin:0 0 0 18px;transform:rotate(2deg)}
.headline-line > span {--rest-angle:-3deg;--rest-y:0px;display:inline-block;transform-origin:50% 85%;transform:translateY(var(--rest-y)) rotate(var(--rest-angle))}
.headline-line > span:nth-child(2) {--rest-angle:3deg;--rest-y:5px}
.headline-line > span:nth-child(3) {--rest-angle:-4deg;--rest-y:-2px}
.headline-line > span:nth-child(4) {--rest-angle:5deg;--rest-y:2px}
.headline-line.grad > span:last-child {--rest-angle:-8deg;--rest-y:5px}
.welcome .hero h1 .grad {color:var(--primary);background:none}
.welcome .hero p {max-width:720px;margin:18px auto 0;color:var(--text-2);font-size:15px;line-height:1.85;animation:none}
.welcome .hero p .seg {display:inline}
.welcome .hero p br {display:initial}
.welcome .hero p .pm {display:inline}
.welcome .hero p b {color:var(--primary);font-weight:500}
.welcome .searchwrap {width:100%;max-width:none;margin:0 auto;padding:0;z-index:2;position:relative;isolation:isolate}
/* Inside searchwrap: examples at 0, query stage at 1 so its menu stays above them. */
.query-stage {position:relative;z-index:1;isolation:isolate}
.query-scenery {position:absolute;inset:0;z-index:2;pointer-events:none}
/* Decorative drawings sit at the paper's edges, clear of labels and actions. */
.query-doodle {--doodle-angle:-13deg;--doodle-rise:-7px;--doodle-turn:6deg;--doodle-x:3px;
  --doodle-ink:#ae625d;--doodle-wash:#f1bdad;
  position:absolute;width:148px;height:auto;overflow:visible;
  transform:rotate(var(--doodle-angle));transform-origin:50% 55%}
.query-doodle-heart {left:-115px;top:-37px}
.query-doodle-pair {--doodle-angle:12deg;--doodle-rise:6px;--doodle-turn:-7deg;--doodle-x:-3px;
  --doodle-ink:#637f94;--doodle-wash:#dce6e6;width:160px;right:-124px;bottom:-34px}
body:not(.vocab-page) .query-doodle-pair {left:-120px;right:auto}
.query-doodle-flower {--doodle-angle:8deg;--doodle-turn:-15deg;--doodle-rise:-4px;--doodle-x:1px;
  --doodle-ink:#af8960;width:48px;right:56px;top:-43px}
.query-doodle-spark {--doodle-angle:-10deg;--doodle-ink:#ba886e;width:44px;left:65px;bottom:-36px}
.query-doodle path {stroke-linecap:round;stroke-linejoin:round}
button.query-doodle {padding:0;border:0;background:none;box-shadow:none;line-height:0;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button.query-doodle .doodle-art {display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 65%}
.doodle-ink,.doodle-small-ink {stroke:var(--doodle-ink);stroke-width:3;fill:none}
.doodle-wash {fill:var(--doodle-wash)}
.doodle-pencil {stroke:var(--doodle-ink);stroke-width:1.6;opacity:.6}
.doodle-shine {stroke:#fff7ec;stroke-width:4;opacity:.85}
.doodle-rays {stroke:var(--doodle-ink);stroke-width:3;opacity:.75}
.doodle-small-wash {fill:#efbaa6}.doodle-small-ink {stroke:#b97467;stroke-width:2.5}
.doodle-flower-fill {fill:#f5e5be}.doodle-flower-center {fill:#eac685;stroke:var(--doodle-ink);stroke-width:2}
.doodle-beat,.doodle-mini-heart {transform-box:fill-box;transform-origin:center}
[data-theme="dark"] .query-doodle-heart {--doodle-ink:#edada3;--doodle-wash:#754d4d}
[data-theme="dark"] .query-doodle-pair {--doodle-ink:#b5ceda;--doodle-wash:#435960}
[data-theme="dark"] .query-doodle-flower,[data-theme="dark"] .query-doodle-spark {--doodle-ink:#dcbd87}
[data-theme="dark"] .doodle-small-wash {fill:#8a5e52}[data-theme="dark"] .doodle-small-ink {stroke:#edb4a1}
[data-theme="dark"] .doodle-flower-fill {fill:#655641}[data-theme="dark"] .doodle-flower-center {fill:#bc985d}
[data-theme="dark"] .doodle-shine {stroke:#f2c3b3;opacity:.65}
.searchcard {position:relative;background:var(--surface);background-image:none;padding:0;border:1px solid var(--control-border);
  border-radius:32px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),var(--shadow-lg);animation:none;
  transition:box-shadow .25s,border-color .25s}
.searchcard:focus-within {border-color:var(--ring);outline:none;box-shadow:var(--shadow-lg)}
.searchinner {border-radius:32px;background:transparent}
.query-label {display:block;margin:0;padding:26px 28px 0;font-size:16px;font-weight:600;color:var(--text)}
textarea {padding:17px 28px 20px;font-size:16px;line-height:1.95;min-height:152px;max-height:260px}
textarea::placeholder,input::placeholder {color:var(--placeholder);opacity:1}
textarea:focus-visible,input:focus-visible {outline:none}
.searchbar {display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:18px 22px 22px;flex-wrap:wrap}
.kbd-hint {font-size:11px;opacity:1;color:var(--text-2);display:none}
.column-button {min-height:36px;padding:6px 10px;gap:5px;border:1px solid var(--border);border-radius:999px;
  background:transparent;box-shadow:none;font-size:12px;font-weight:500;line-height:1.5;transition:transform .22s var(--ease-out),background .22s}
.column-button .icon {width:11px;height:11px}
.column-button:hover {border-color:var(--control-border);box-shadow:none}
.column-pop {position:absolute;left:auto;right:0;top:calc(100% + 10px);z-index:70;
  max-height:min(60vh,400px);overflow-y:auto;width:min(320px,82vw);background:var(--surface);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);padding:8px;display:none}
.column-pop.on {display:block;animation:warm-enter .18s ease both}
.column-option {display:block;width:100%;text-align:left;padding:12px;border-radius:12px}
.column-option:hover {background:var(--muted)}
.column-option .ml {font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.column-option .cur {color:var(--primary);font-size:11px;font-weight:800;margin-left:auto}
.btn {position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:5px;
  min-height:36px;min-width:88px;padding:7px 12px;border-radius:999px;
  background:var(--button-bg);color:var(--button-text);box-shadow:none;
  font-size:13px;font-weight:500;line-height:1.5;
  transition:transform .25s var(--ease-out),box-shadow .25s,opacity .2s}
.btn:hover {transform:translateY(-1px);box-shadow:none}
.btn:active {transform:translateY(1px) scale(.98)}
.btn .icon {width:14px;height:14px}
.btn:disabled {opacity:.65;transform:none;box-shadow:none;cursor:wait}
.query-examples {position:relative;z-index:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:28px;padding:0 8px}
.examples-label {font-size:12px;color:var(--text-2);margin-right:3px}
.example-btn {--note-angle:-3deg;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-2);font:inherit;font-size:12px;line-height:1.5;box-shadow:var(--shadow-sm);transform:rotate(var(--note-angle));transition:transform .45s var(--ease-out)}
.example-btn:nth-of-type(even) {--note-angle:3deg}
.example-btn .icon {width:13px;height:13px;transition:transform .3s var(--ease-out)}
.example-btn:hover {background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-5px) rotate(0)}
.example-btn:hover .icon {transform:translate(2px,-2px)}
.example-btn.is-chosen {background:var(--accent-soft);color:var(--accent-ink);border-color:var(--primary);transform:rotate(0)}
.query-tips {max-width:800px;margin:28px auto 0;text-align:center;color:var(--text-2)}
.query-tips ul {display:grid;gap:4px;margin:0;padding:0;list-style:none}
.query-tips li {font-size:14px;line-height:1.7;text-wrap:pretty}
.query-tips strong {font-weight:650}
.reverse-page .query-label {font-family:"Query CN",var(--font-body);font-size:21px;font-weight:400;line-height:1.5;letter-spacing:.5px;padding-bottom:0}
.query-entry {position:relative}
.query-entry .query-tips {position:absolute;inset:0 28px;display:flex;align-items:center;justify-content:center;max-width:none;margin:0;padding:0;text-align:center;pointer-events:none;color:var(--placeholder)}
.query-entry .query-tips li {font-size:14px;line-height:1.8}
.query-entry .query-tips strong {font-weight:400}
.query-entry textarea:focus ~ .query-tips,.query-entry textarea:not(:placeholder-shown) ~ .query-tips {visibility:hidden;opacity:0}
.claim {display:block;width:fit-content;max-width:100%;margin:34px auto 0;padding:0;
  border:0;border-radius:0;
  color:var(--text);font-size:16px;font-weight:400;line-height:1.65;letter-spacing:0;text-align:center;
  background:none;background-clip:border-box;-webkit-background-clip:border-box;animation:none}
.claim strong {font-weight:750;color:var(--accent-ink)}
.claim-subject {display:inline;font-size:16px;font-weight:600}
.progress,.notice,.understood {width:100%;max-width:800px;margin:22px auto 0;border-radius:16px}
.progress {padding:17px 20px;background:var(--surface);border:1px solid var(--border)}
.steps {gap:12px}
.step {font-size:13px;color:var(--text-2)}
.step .dot {width:8px;height:8px}
.step.active,.step.done {color:var(--primary)}
.step.active .dot {background:var(--primary);box-shadow:none;animation:none}
.step.done .dot {background:var(--primary)}
.step.active .dot::after {content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--primary)}
.steps .bar {background:var(--border)}
.notice.err,.notice.warn {background:var(--surface);border:1px solid var(--danger);color:var(--text)}
.understood {background:var(--surface);border:1px solid var(--border);padding:0}
.understood summary {padding:16px 20px}
.utable {padding:0 20px 20px}
.results {width:100%;max-width:none;margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--border)}
.rtitle {align-items:center;font-size:23px;font-weight:700;letter-spacing:0;margin-bottom:20px;line-height:1.5}
.rtitle .count {font-size:13px}
.result-heading {display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0;font:inherit}
.rtitle .acts {align-items:center;flex-wrap:wrap}
.column-control {position:relative;display:inline-flex;align-items:center;flex:none;
  font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:0}
.column-button {display:inline-flex;align-items:center;font-family:inherit;color:var(--text);white-space:nowrap}
.column-pop {width:min(200px,calc(100vw - 32px))}
.column-pop.opens-up {top:auto;bottom:calc(100% + 10px)}
.column-option {color:var(--text);line-height:1.5}
.column-option:focus-visible {outline:2px solid var(--ring);outline-offset:-2px;background:var(--muted)}
.column-option .cur,.column-option .width-note {display:none}
.column-option[aria-checked="true"] .cur {display:inline}
.column-option:disabled {cursor:not-allowed;color:var(--text-2)}
.column-option:disabled:hover {background:transparent}
.column-option:disabled .ml {font-weight:400}
.column-option:disabled .width-note {display:inline;font-size:11px;font-weight:400;margin-left:auto}
.rtitle .sbtn {min-height:36px;border-radius:10px}
.grid {display:grid;grid-template-columns:repeat(var(--result-columns,5),minmax(0,1fr));gap:14px}
.grid > .noresult {grid-column:1/-1}
html[data-theme] body .card:nth-child(n) {--cc:var(--primary);--cc-ink:var(--accent-ink);--cc-soft:var(--surface-2);
  min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease-out),border-color .2s,box-shadow .28s;
  animation:none}
html[data-theme] body .card:nth-child(n):hover {border-color:var(--control-border);box-shadow:var(--shadow-md);transform:translateY(-3px)}
html[data-theme] body .card.top {border-color:var(--primary)}
.card .imgbox {aspect-ratio:4/3;background:var(--surface-2);border-bottom:1px solid var(--border)}
.card .imgbox img {position:absolute;left:9%;top:9%;width:82%;height:82%;max-width:82%;max-height:82%;object-fit:contain}
[data-theme="dark"] .card .imgbox img,[data-theme="dark"] .sheet-img img {mix-blend-mode:screen}
.card .body {padding:12px 13px 16px}
.meanings {font-size:17px;line-height:1.4;letter-spacing:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meanings > span {display:inline-block;max-width:100%;vertical-align:top}
.desc {font-size:13px;line-height:1.6;margin-top:6px;-webkit-line-clamp:2}
.rank {top:8px;left:8px;min-width:24px;height:24px;padding:0 6px;font-size:11px;
  border:1px solid var(--border);color:var(--accent-ink);box-shadow:none}
.topflag {top:8px;right:8px;padding:3px 7px;font-size:10px;line-height:1.6;letter-spacing:0}
.card.top .rank,.topflag {background:var(--button-bg);color:var(--button-text);box-shadow:none}
.fb-btn,.fb-none {border-radius:12px;min-height:40px}
.card .cfoot {padding:2px 6px 5px;border-top:0}
.card .fb-btn {min-height:24px;padding:2px 0;border:0;border-radius:6px;background:transparent;box-shadow:none;
  font-size:10.5px;font-weight:400;line-height:1.35;color:var(--text-2)}
.card .fb-btn:hover,.card .fb-btn:focus-visible {color:var(--primary);background:transparent;transform:none;
  text-decoration:underline;text-underline-offset:3px}
.card .fb-btn.on {background:transparent;color:var(--accent-ink);font-weight:600}
.card .fb-btn span {white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
.fb-btn.on,.fb-none.on {background:var(--accent-soft);color:var(--accent-ink)}
.sbtn {min-height:40px;border-radius:12px}
.sheet-mask {z-index:100;background:rgb(30 32 41 / .48);backdrop-filter:blur(6px);padding:28px}
.sheet {border:1px solid var(--border);border-radius:32px;box-shadow:var(--shadow-lg);max-height:88dvh;
  animation:sheetin .38s var(--ease-out) both}
.sheet-close {width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.sheet-close:hover {background:var(--muted);color:var(--text)}
.sheet-hd {padding:22px 26px 18px}
.sheet-bd {padding:24px 26px;gap:24px}
.sheet-img {background:var(--surface-2);border-radius:20px}
.hist {z-index:81;background:var(--surface);box-shadow:var(--shadow-lg);border-radius:24px 0 0 24px;
  transition:transform .38s var(--ease-out),opacity .28s}
.hist-mask {z-index:80;background:rgb(30 32 41 / .38);backdrop-filter:blur(4px)}
.hist-head {padding:24px 20px 18px}
.hist-mode {color:var(--accent-ink);background:var(--accent-soft);border-color:var(--border);border-radius:12px;min-height:44px}
.hist-item {border-radius:16px;border-color:var(--border);box-shadow:none}
.hist-item .top1 {background:var(--accent-soft);color:var(--accent-ink);border-color:var(--border)}
.hist-close,.hist-clear {min-height:40px;min-width:40px}
/* Shared project-menu heading and entrance. Visit statistics use warm-theme.css. */
@keyframes statsin{from{opacity:0; transform:translateY(8px) scale(.98)}to{opacity:1; transform:none}}
.sp-hd{font-family:var(--font-display); font-weight:900; font-size:15px; margin-bottom:12px}
/* 统计弹窗中的全站每日额度。 */
.sp-quota{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:9px 12px 8px; margin-top:8px;
}
.sp-quota .sq-lbl{font-size:11px; color:var(--text-2)}
.sp-quota .sq-val{margin-left:auto; font-size:11px; color:var(--text-2)}
.sp-quota .sq-val b{font-family:var(--font-display); font-size:15px; font-weight:900; color:var(--primary)}
.sp-quota.low .sq-val b{color:var(--danger)}
.sp-quota .ql-tester{
  flex:1 0 100%; margin-top:2px; font-size:10.5px; color:var(--text-2);
}
/* ============ 右下角「其他项目」按钮 + 面板（统计面板同款风格，词汇页同款组件） ============ */
.more-btn{
  position:fixed; right:18px; bottom:68px; z-index:60;
  width:42px; height:42px; border-radius:13px;
  background:var(--surface); border:1.5px solid var(--border);
  display:grid; place-items:center; color:var(--text-2);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.more-btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--primary)}
.more-btn svg{width:18px; height:18px}
.more-pop{
  position:fixed; right:18px; bottom:118px; z-index:61;
  width:min(320px, calc(100vw - 36px));
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:16px 18px 14px; display:none;
}
.more-pop.on{display:block; animation:statsin .22s cubic-bezier(.23,1,.32,1) both}
.mp-item{
  display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; text-decoration:none; color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mp-item + .mp-item{margin-top:8px}
.mp-item:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--primary)}
.mp-ico{width:40px; height:40px; border-radius:10px; flex:none}
.mp-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.mp-txt b{font-family:var(--font-display); font-size:14px; font-weight:900; line-height:1.3}
.mp-txt span{font-size:11.5px; color:var(--text-2); line-height:1.35}
.mp-arrow{width:16px; height:16px; flex:none; color:var(--text-2)}
.mp-item:hover .mp-arrow{color:var(--primary)}
.more-btn {z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  width:44px;height:44px;color:var(--text-2);box-shadow:var(--shadow-sm)}
.more-pop {z-index:70;background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);border-color:var(--border)}
.mp-item {border-radius:12px}
.toast {z-index:120;background:var(--button-bg);color:var(--button-text);border-radius:14px}
.noresult {padding:48px 24px;border-style:solid}
.skel {min-width:0;border-radius:18px;background:var(--surface)}
.skel .a {position:relative;overflow:hidden;background:var(--muted);animation:none}
.skel .a::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(250 250 250 / .38),transparent);transform:translateX(-100%)}
footer {max-width:1224px;margin:42px auto 0;padding:26px 0 32px;border-top:1px solid var(--border);
  text-align:center;line-height:1.9;letter-spacing:0;color:var(--text-2)}
footer .paper-note {display:block;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--text-2);font-weight:400;font-size:12px}
footer .dev {opacity:1;font-size:11px}
footer b {font-weight:500}
.vocab-page .searchcard {padding:0}
.vocab-page .hero h1 {font-size:clamp(38px,4.2vw,52px)}
.vocab-page .title-paper-peach {width:70%;height:70%;top:18%;left:-2%}
.vocab-page .title-paper-sage {width:24%;height:115%;left:42%;bottom:-12%}
.vocab-page .hero p {max-width:40em}
.vocab-page .searchrow {padding:18px 26px 28px;gap:14px}
.vocab-page .query-label {padding:26px 26px 0}
.vocab-page .searchrow input {padding:6px 0;min-height:48px;font-size:20px;color:var(--text);background:transparent}
.vocab-page .clear-btn {width:44px;height:44px;border-radius:12px}
.vocab-results-head {display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:30px 0 18px}
.vocab-page .stat {flex:1 1 230px;min-height:28px;margin:0;padding:0;font-size:14px;color:var(--text-2);text-align:left}
.vocab-results-head .column-control {margin-left:auto}
.vocab-results-head:not(:has(+ .grid > .card)) .column-control {display:none}
.vocab-page .empty {display:flex;align-items:center;gap:20px;padding:32px 0;text-align:left;font-size:14px;line-height:1.95;color:var(--text-2);border-top:1px solid var(--border)}
.vocab-page .empty .big {width:64px;height:64px;flex:none;display:grid;place-items:center;margin:0;
  background:var(--accent-soft);border-radius:22px;color:var(--accent-ink);transform:rotate(-7deg)}
.vocab-page .empty .big svg {width:28px;height:28px}
.vocab-page .main-col {padding-bottom:0}
@media (max-width:1024px) {
  .topbar {padding:0 24px}
  .welcome-content {gap:28px}
  .welcome .hero p {font-size:14px}
  .query-doodle-heart {width:88px;left:-6px;top:-55px}
  .query-doodle-pair {width:100px;right:-12px;bottom:-21px}
  body:not(.vocab-page) .query-doodle-pair {left:-12px}
  .query-doodle-flower {width:32px;right:20px;top:-25px}
  .query-doodle-spark {width:31px;left:26px;bottom:-30px}
  .vocab-page .query-doodle-pair {width:76px;top:-49px;bottom:auto;right:-3px}
  .vocab-page .query-doodle-flower {width:24px;top:auto;bottom:-26px;left:12px;right:auto}
  .kbd-hint {display:none}
  footer {margin-left:28px;margin-right:28px}
}
@media (max-width:1023px) {
  .grid {grid-template-columns:repeat(var(--result-columns,4),minmax(0,1fr));gap:12px}
}
@media (max-width:767px) {
  .topbar {height:68px;margin-top:6px;padding:0 16px;gap:8px}.nav-right {gap:0;padding:4px;border-radius:999px}
  .brand {gap:7px}.brand .name {font-size:17px}.brand .sub {font-size:10px;margin-top:1px}
  .mark,.mark img {width:36px;height:36px;border-radius:12px}
  .topbar .btxt {display:none}.topbar .usecase-btn,.topbar .hist-fab,.topbar .visit-stats-btn,.topbar .theme-btn {width:36px;min-height:40px;padding:9px}
  .vocab-page .topbar .btxt {display:inline}.topbar .pill-btn {padding:9px 10px}
  .main-col {padding:0 20px 20px}
  .welcome,.vocab-page .welcome {padding-top:32px}
  .welcome-content,.vocab-page .welcome-content {display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding:0}
  .welcome .hero {padding-bottom:0}
  .title-composition {padding:6px 0 4px}
  .welcome .hero h1 {font-size:clamp(27px,6.7vw,37px);letter-spacing:.4px;line-height:1.5}
  .headline-line,.headline-line.grad {display:inline;margin:0;transform:none}.headline-line.grad {margin-left:8px}
  .headline-line > span {--rest-angle:-2deg;--rest-y:0px}.headline-line > span:nth-child(2) {--rest-angle:2deg;--rest-y:2px}.headline-line > span:nth-child(3) {--rest-y:-1px}.headline-line > span:nth-child(4) {--rest-angle:3deg;--rest-y:1px}
  .headline-line.grad > span:last-child {--rest-angle:-5deg;--rest-y:2px}
  .title-paper-peach {width:58%;height:64%;top:21%;left:-2%}.title-paper-sage {width:22%;height:120%;right:-3%;bottom:-8%}
  .welcome .hero p {font-size:14px;line-height:1.9;max-width:100%;margin:15px auto 0}
  .welcome .hero p .seg {display:block}.welcome .hero p .pm {display:inline}
  .welcome .hero p br {display:none}
  .searchcard,.searchinner {border-radius:26px}
  .welcome .searchwrap,.vocab-page .welcome .searchwrap {margin-top:0}
  .query-doodle {--doodle-rise:-5px;--doodle-x:1px}
  .query-doodle-heart {width:76px;left:-4px;top:-49px}
  .query-doodle-pair {--doodle-rise:4px;width:82px;right:-10px;bottom:-16px}
  body:not(.vocab-page) .query-doodle-pair {left:-10px}
  .query-doodle-flower {width:28px;right:12px;top:-21px}
  .query-doodle-spark {display:none}
  .query-label {padding:21px 20px 0;font-size:14px}
  .reverse-page .query-label {font-size:18px;padding-top:20px}
  .query-entry .query-tips {inset:0 20px}
  .query-entry .query-tips li {font-size:12px;line-height:1.8}
  textarea {padding:14px 20px 16px;font-size:16px;min-height:126px}
  .searchbar {position:relative;padding:12px 18px 16px;gap:8px;flex-wrap:nowrap}
  .btn {flex:none;width:auto;min-width:84px;min-height:34px;padding:6px 11px;font-size:13px;gap:5px;box-shadow:none}
  .query-examples {gap:6px;padding:0;margin-top:24px}.examples-label {font-size:11px;margin-right:0}.example-btn {gap:4px;font-size:11px;padding:7px 8px;border-radius:10px}
  .example-btn.desktop-example {display:none}
  .query-tips {margin-top:18px;padding-inline:0}.query-tips ul {gap:3px}.query-tips li {font-size:12px;line-height:1.6;text-wrap:pretty}
  .claim {width:100%;margin:24px auto 0;font-size:14px;line-height:1.8}
  .claim-subject {display:block;margin-top:2px;font-size:15px}
  .progress {padding:15px}.steps {gap:8px}.step {font-size:12px}.elapsed {font-size:11px}
  .results {margin-top:25px;padding-top:22px}.rtitle {font-size:22px;gap:8px}
  .rtitle .acts {width:auto;margin-left:auto}.rtitle .sbtn {font-size:12px;padding:8px 10px}
  .rtitle .count {font-size:12px}.grid {gap:10px}
  .card .body {padding:10px 10px 12px}.meanings {font-size:15px}.desc {font-size:12px;line-height:1.55}
  .card .cfoot {padding:2px 5px 5px}
  .sheet-mask {padding:0;align-items:flex-end}.sheet {width:100%;max-height:92dvh;border-radius:24px 24px 0 0}
  .sheet-hd {padding:18px 20px 14px}.sheet-bd {padding:18px 20px;gap:18px}.sheet-ft {padding:0 20px 24px}
  .hist {border-radius:20px 0 0 20px;max-width:calc(100vw - 24px)}
  .more-btn {right:16px}.more-pop {right:16px;max-width:calc(100vw - 32px)}
  footer {margin:26px 20px 0;padding:22px 0 88px;font-size:12px}
  footer .dev .nw {white-space:normal;display:block}.pn-full,footer .sep {display:none}
  .vocab-page .hero h1 {font-size:38px}.vocab-page .title-paper-peach {width:52%;height:64%}.vocab-page .title-paper-sage {width:19%;height:110%;left:auto;right:45%;bottom:-5%}
  .vocab-page .searchrow {padding:14px 20px 22px}.vocab-page .query-label {padding:21px 20px 0}
  .vocab-page .empty {gap:14px;padding:24px 0 8px;font-size:13px}.vocab-page .empty .big {width:50px;height:58px;border-radius:18px}.vocab-results-head {margin:25px 0 12px}
}
@media (max-width:639px) {
  .grid {grid-template-columns:repeat(var(--result-columns,3),minmax(0,1fr))}
}
@media (max-width:479px) {
  .grid {grid-template-columns:repeat(var(--result-columns,2),minmax(0,1fr))}
  .rtitle .result-heading {width:100%}
}
@media (max-width:359px) {
  .topbar {padding:0 10px}.brand .name {font-size:15px}.brand .sub {letter-spacing:2px}
  .topbar .usecase-btn,.topbar .hist-fab,.topbar .visit-stats-btn,.topbar .theme-btn {width:32px;min-height:38px;padding:7px}
  .nav-right {gap:0}.main-col {padding-left:16px;padding-right:16px}
  .welcome .hero h1 {font-size:26px}.searchbar {padding:12px 16px 16px}.query-label {padding-left:20px}
  .query-examples .examples-label {flex-basis:100%;text-align:center}
  .query-examples .example-btn {padding-inline:6px}
}
@keyframes warm-enter {from {opacity:0;transform:translateY(12px)}to {opacity:1;transform:translateY(0)}}
@keyframes warm-letter {0% {opacity:0;transform:perspective(600px) translateY(68px) rotateX(42deg) rotate(calc(var(--rest-angle) * -5)) scale(.72)}60% {opacity:1;transform:translateY(-12px) rotate(calc(var(--rest-angle) * 1.5)) scale(1.035)}80% {transform:translateY(4px) rotate(var(--rest-angle)) scale(.99)}100% {opacity:1;transform:translateY(var(--rest-y)) rotate(var(--rest-angle))}}
@keyframes paper-open {0% {opacity:0;transform:perspective(900px) translateY(54px) rotateX(12deg) rotate(4deg) scale(.91)}64% {opacity:1;transform:translateY(-8px) rotate(-.8deg) scale(1.012)}82% {transform:translateY(3px) rotate(.2deg) scale(.996)}100% {opacity:1;transform:none}}
@keyframes query-doodle-bob {from {transform:translate(0,0) rotate(var(--doodle-angle))}to {transform:translate(var(--doodle-x),var(--doodle-rise)) rotate(calc(var(--doodle-angle) + var(--doodle-turn)))}}
@keyframes query-heartbeat {0%,45%,100% {transform:scale(1)}54% {transform:scale(1.065)}62% {transform:scale(.99)}71% {transform:scale(1.035)}80% {transform:scale(1)}}
@keyframes query-ink-twinkle {from {opacity:.55;transform:rotate(var(--doodle-angle)) scale(.92)}to {opacity:1;transform:rotate(calc(var(--doodle-angle) + 8deg)) scale(1.04)}}
@keyframes title-paper-in {from {opacity:0;transform:translate(-30px,24px) rotate(-16deg) scale(.75)}to {opacity:1}}
@keyframes paper-scroll {to {transform:translateY(52px) rotate(7deg);opacity:.45}}
@keyframes soft-pop {0% {transform:translateY(0) scale(1)}45% {transform:translateY(-4px) scale(1.04)}75% {transform:translateY(-2px) scale(.99)}100% {transform:translateY(-3px) scale(1)}}
@keyframes theme-out {to {opacity:0}}
@keyframes theme-in {from {opacity:0;transform:scale(1.015)}to {opacity:1;transform:none}}
@keyframes warm-shimmer {to {transform:translateX(100%)}}
@keyframes warm-stage {0%,100% {opacity:.4;transform:scale(.9)}50% {opacity:1;transform:scale(1.5)}}
@media (prefers-reduced-motion:no-preference) {
  .brand {animation:warm-enter .55s var(--ease-out) backwards}
  .nav-right > * {animation:warm-enter .55s .08s var(--ease-out) backwards}
  .nav-right > :nth-child(2) {animation-delay:.13s}.nav-right > :nth-child(3) {animation-delay:.18s}.nav-right > :nth-child(4) {animation-delay:.23s}
  .welcome .hero {animation:none}
  .headline-line > span {animation:warm-letter 1.05s calc(var(--letter)*55ms) var(--ease-out) backwards}
  .title-paper {animation:title-paper-in 1s .04s var(--ease-out) backwards}
  .welcome .hero p {animation:warm-enter .8s .3s var(--ease-out) backwards}
  .welcome .searchcard {animation:paper-open 1s .12s var(--ease-out) backwards}
  .query-doodle {animation:query-doodle-bob 3.8s ease-in-out infinite alternate}
  .query-doodle-pair {animation-duration:4.6s;animation-delay:-1.8s;animation-direction:alternate-reverse}
  .query-doodle-flower {animation-duration:3s;animation-delay:-.6s}
  .query-doodle-spark {animation:query-ink-twinkle 2.2s ease-in-out infinite alternate}
  .doodle-beat {animation:query-heartbeat 4.8s ease-in-out infinite}
  .query-doodle-pair .doodle-beat {animation-delay:-2.4s}
  .doodle-mini-heart {animation:query-heartbeat 4.8s -.8s ease-in-out infinite}
  .query-examples {animation:warm-enter .75s .48s var(--ease-out) backwards}
  .example-btn:hover {animation:soft-pop .45s var(--ease-out)}
  .vocab-page .empty {animation:warm-enter .7s .18s var(--ease-out) backwards}
  .card.reveal-pending {opacity:0}
  .skel .a::after {animation:warm-shimmer 1.5s var(--ease-in-out) infinite}
  .step.active .dot::after {animation:warm-stage 1.5s ease-in-out infinite}
  button:active,.usecase-btn:active,.pill-btn:active {transform:translateY(1px) scale(.97)}
  .searchwrap.is-searching .doodle-beat {animation-duration:2.4s}
  .sheet-mask.on,.sheet-mask.on .sheet {animation:none}
  ::view-transition-old(root) {animation:theme-out .45s ease both}
  ::view-transition-new(root) {animation:theme-in .65s var(--ease-out) both}
  @supports (animation-timeline:view()) {
    .title-papers {animation:paper-scroll linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .skel .a::after {display:none}
  .card.reveal-pending {opacity:1}
}
.motion-paused *,.motion-paused *::before,.motion-paused *::after {animation-play-state:paused !important}
.query-scenery.is-outside * {animation-play-state:paused}
@media (prefers-reduced-transparency:reduce) {
  .sheet-mask,.hist-mask {backdrop-filter:none;background:rgb(30 32 41 / .75)}
}

/* Header visit statistics: existing counters, shared by both query pages. */
.topbar .visit-stats-btn[aria-expanded="true"] {background:var(--accent-soft);color:var(--accent-ink)}
.more-btn {bottom:18px}
.more-pop {bottom:72px}
.visit-stats-dialog {inset:0;margin:auto;width:min(490px,calc(100vw - 28px));max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);
  padding:26px;border:1px solid var(--border);border-radius:28px;background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-lg);overflow:auto;overscroll-behavior:contain;text-align:left}
.visit-stats-dialog[open] {animation:statsin .22s var(--ease-out) both}
.visit-stats-dialog::backdrop {background:rgb(35 32 37 / .32);backdrop-filter:blur(5px)}
.sp-header {display:flex;align-items:center;gap:12px;margin-bottom:24px}
.sp-icon {display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink)}
.sp-icon svg {width:22px;height:22px}
.sp-header h2 {font-family:var(--font-display);font-size:20px;line-height:1.4;font-weight:700}
.sp-header p {margin-top:3px;font-size:12px;line-height:1.5;color:var(--text-2)}
.sp-close {display:grid;place-items:center;width:40px;height:40px;flex:none;margin-left:auto;
  padding:10px;border:0;border-radius:50%;background:var(--surface-2);color:var(--text-2)}
.sp-close:hover {background:var(--accent-soft);color:var(--accent-ink)}
.sp-close svg {width:18px;height:18px}
.sp-nums {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 0;border-radius:18px;background:var(--surface-2)}
.sp-num {min-width:0;padding:0 10px;text-align:center}
.sp-num + .sp-num {border-left:1px solid var(--border)}
.sp-num span {display:block;color:var(--text-2);font-size:12px}
.sp-num b {display:block;margin:5px 0 1px;font-size:clamp(20px,5vw,28px);font-weight:700;line-height:1.35;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;letter-spacing:-.5px}
.sp-num:first-child b {color:var(--accent-ink)}
.sp-num small {font-size:11px;color:var(--text-2)}
.sp-visitors {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 2px 0;color:var(--text-2);font-size:12px}
.sp-visitors b,.sp-queries b {font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sp-chart-heading {display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:24px 0 14px}
.sp-chart-heading h3 {font-size:13px;font-weight:600}
.sp-chart-heading > span {font-size:11px;color:var(--text-2)}
.sp-chart {display:flex;align-items:flex-end;gap:10px;min-height:102px}
.sp-col {flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.sp-col b {font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere;text-align:center}
.sp-track {width:100%;height:64px;display:flex;align-items:flex-end;border-bottom:1px solid var(--border)}
.sp-bar {width:100%;max-width:40px;margin:0 auto;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--secondary) 45%,var(--muted))}
.sp-col.today .sp-bar {background:var(--primary)}
.sp-col span {font-size:10px;color:var(--text-2);white-space:nowrap}
.sp-col.today span {color:var(--accent-ink);font-weight:600}
.sp-queries {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-2)}
.visit-stats-dialog .sp-quota {margin-top:12px;background:transparent;padding:10px 12px}
.sp-update {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:11px;color:var(--text-2)}
#statsRefresh {flex:none;padding:8px 10px;border:0;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font:inherit;font-size:12px}
#statsRefresh:hover {background:var(--muted)}
#statsRefresh:disabled {opacity:.6;cursor:wait}
#spStatus {font-size:12px;line-height:1.6;color:var(--danger)}
#spStatus:not(:empty) {margin-top:10px}
.visit-stats-dialog .sp-note {margin-top:10px;font-size:10px;line-height:1.8;color:var(--text-2)}
@media (max-width:479px) {
  .visit-stats-dialog {padding:20px;border-radius:24px}
  .sp-header {gap:10px;margin-bottom:20px}.sp-header h2 {font-size:18px}.sp-header p {font-size:11px}
  .sp-nums {padding:15px 0}.sp-num {padding:0 5px}.sp-num span {font-size:11px}
  .sp-chart {gap:7px}.sp-col b {font-size:10px}
}
@media (max-width:359px) {
  .topbar {gap:5px}.brand {gap:5px}.mark,.mark img {width:32px;height:32px}
  .visit-stats-dialog {padding:18px}.sp-header {gap:8px}.sp-icon {width:36px;height:36px;border-radius:12px}
  .sp-header p {font-size:10px}.sp-close {width:34px;height:34px;padding:8px}
}