/* Accepted mobile design; includes <=1000px landscape viewports with height <=500px. */
.home-tool-description, .home-tool-arrow { display: none; }
.home-mobile-shell { display: none; }
@media (max-width: 900px), (max-width: 1000px) and (max-height: 500px) {
  html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
  body > .kv-stage, body > .site-music-widget { display: none !important; }
  .home-mobile-shell { display: block; height: 100svh; }

.home-mobile-shell {
  color-scheme: dark;
  --ink: #030207;
  --paper: #fff8ef;
  --muted: rgba(255,248,239,.68);
  --red: #ff203d;
  --violet: #a552ff;
  --line: rgba(179,84,255,.3);
  --directory-height: min(232px,calc(100svh - 90px));
  --directory-bottom: max(18px,env(safe-area-inset-bottom));
  --dock-bottom: max(clamp(46px,9svh,84px),env(safe-area-inset-bottom));
  --dock-height: 74px;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
}
.home-mobile-shell * { box-sizing: border-box; }
.home-mobile-shell { margin: 0; width: 100%; min-height: 100%; background: var(--ink); color: var(--paper); font-family: var(--sans); }
.home-mobile-shell { overflow: hidden; }
.home-mobile-shell button, .home-mobile-shell input { -webkit-tap-highlight-color: transparent; }
.home-mobile-shell button { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.home-mobile-shell button:disabled { cursor: default; }
.home-mobile-shell button:focus-visible, .home-mobile-shell input:focus-visible, .home-mobile-shell a:focus-visible { outline: 2px solid #d6a7ff; outline-offset: 4px; }
.home-mobile-shell [hidden] { display: none !important; }
.home-mobile-shell .phone { position: relative; height: 100svh; overflow: clip; isolation: isolate; background: var(--ink); }
.home-mobile-shell .stage { position: absolute; inset: 0; }
.home-mobile-shell .stage .background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63% center; }
/* Keep the accepted crop, without desktop blur/blend stacks or promoted layers. */
.home-mobile-shell .stage .figure {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  top: clamp(76px, 10svh, 115px);
  bottom: auto;
  left: 50%;
  right: auto !important;
  width: min(154vw, 660px);
  min-width: 0;
  aspect-ratio: 1788 / 2160;
  transform: translateX(-67%) rotate(-1.2deg) !important;
  transform-origin: 79% 18%;
  animation: none;
  transition: none;

  -webkit-mask-image: linear-gradient(transparent 0%, #000 5%, #000 55%, rgba(0,0,0,.85) 73%, transparent 94%);
  mask-image: linear-gradient(transparent 0%, #000 5%, #000 55%, rgba(0,0,0,.85) 73%, transparent 94%);
}
.home-mobile-shell .stage .figure > img { position: absolute; inset: 0; display: block; width: 100%; height: auto; animation: none; }
.home-mobile-shell .stage .mobile-character-image { filter: contrast(1.20) saturate(1.12) brightness(.99) sepia(.095) hue-rotate(-11deg); }
.home-mobile-shell .mobile-key-light { position: absolute; z-index: 5; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 74% 12%,rgba(238,188,255,.12),transparent 52%),linear-gradient(105deg,transparent 40%,rgba(226,168,255,.07) 66%,transparent 85%); }
.home-mobile-shell .shade { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(180deg,transparent 48%,rgba(3,2,7,.28) 64%,rgba(3,2,7,.82) 82%,#030207 100%); }
.home-mobile-shell .brand-row { position: absolute; z-index: 12; top: max(24px,env(safe-area-inset-top)); left: 26px; right: 26px; }
.home-mobile-shell .brand { display: flex; align-items: center; gap: 10px; width: fit-content; }
.home-mobile-shell .brand-rose { width: 25px; height: 33px; object-fit: contain; filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(4835%) hue-rotate(335deg) brightness(104%) contrast(103%) drop-shadow(0 0 8px rgba(255,32,61,.4)); }
.home-mobile-shell .brand-copy { display: block; }
.home-mobile-shell .brand-copy > img { width: 44px; height: 32px; object-fit: contain; }
.home-mobile-shell .brand-copy > small { display: block; margin-top: 2px; font: 6px/1.2 var(--sans); letter-spacing: .1em; color: rgba(255,248,239,.65); }
.home-mobile-shell .hero-copy { position: absolute; z-index: 12; bottom: calc(var(--dock-bottom) + var(--dock-height) + 22px); left: 24px; right: 24px; text-align: center; }
.home-mobile-shell .hero-line { font: 700 15px/1.6 var(--sans); margin: 0; color: var(--paper); text-shadow: 0 2px 12px #030207; letter-spacing: .06em; white-space: nowrap; }
.home-mobile-shell .hero-caption { margin: 8px 0 0; font: 10px/1.6 var(--sans); color: var(--muted); letter-spacing: .04em; }
.home-mobile-shell .dock { position: absolute; z-index: 40; bottom: var(--dock-bottom); left: 26px; right: 26px; height: var(--dock-height); display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 14px; padding-top: 10px; border-top: 1px solid rgba(179,84,255,.32); background: linear-gradient(180deg,rgba(3,2,7,.2),rgba(3,2,7,.65)); }
.home-mobile-shell .dock :is(button,a) { min-width: 0; min-height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 500 11px/1.2 var(--sans); letter-spacing: .04em; color: rgba(255,248,239,.76); }
.home-mobile-shell .dock :is(button,a):hover { color: #fff8ef; }
.home-mobile-shell .dock :is(button,a) > img { height: 27px; width: 32px; object-fit: contain; }
.home-mobile-shell .dock-music > .dock-pause-image { display: none; }
.home-mobile-shell.is-playing .dock-music > .dock-play-image { display: none; }
.home-mobile-shell.is-playing .dock-music > .dock-pause-image { display: block; }
.home-mobile-shell.is-playing .play-toggle > img, .home-mobile-shell.is-playing .dock-pause-image { animation: music-icon-spin 4.8s linear infinite; }
.home-mobile-shell .dock .primary-link { color: var(--paper); }
.home-mobile-shell .dock .primary-link > img { width: 43px; height: 29px; }
.home-mobile-shell .dock .dock-all > img { width: 22px; height: 29px; }
.home-mobile-shell .dock :is(button,a)[aria-expanded=true] { color: #d6b3f6; }
.home-mobile-shell .scrim { position: absolute; inset: 0; z-index: 20; background: linear-gradient(180deg,rgba(3,2,7,.06),rgba(3,2,7,.16) 28%,rgba(3,2,7,.66) 65%); cursor: default; }
.home-mobile-shell[data-panel=directory] .scrim { bottom: calc(var(--directory-height) + var(--directory-bottom)); background: rgba(3,2,7,.04); }
.home-mobile-shell[data-panel=music] .scrim { background: rgba(3,2,7,.12); }
.home-mobile-shell .sheet { position: absolute; z-index: 30; left: 16px; right: 16px; bottom: calc(var(--dock-bottom) + var(--dock-height) + 14px); max-height: calc(100% - 250px); padding: 22px 22px 0; overflow: auto; overscroll-behavior: contain; background: rgba(4,3,10,.97); border-top: 1px solid rgba(179,84,255,.48); border-bottom: 1px solid rgba(255,32,61,.25); box-shadow: 0 12px 36px rgba(0,0,0,.45); scrollbar-width: thin; scrollbar-color: #6e388c #08050e; animation: sheet-in .24s ease both; }
.home-mobile-shell .sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home-mobile-shell .eyebrow { font: 500 8px/1.4 var(--sans); color: rgba(255,248,239,.5); letter-spacing: .15em; }
.home-mobile-shell .sheet-heading h2 { font: 600 18px/1.4 var(--sans); color: var(--paper); margin: 5px 0 0; letter-spacing: .08em; }
.home-mobile-shell .close-button { width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.home-mobile-shell .close-button > img { width: 19px; height: 19px; object-fit: contain; }
.home-mobile-shell .close-button > span { font: 9px/1 var(--sans); color: var(--muted); }
.home-mobile-shell .directory {
  --menu-icon-scale: .5;
  display: flex;
  flex-direction: column;
  left: 18px;
  right: 18px;
  bottom: var(--directory-bottom);
  height: var(--directory-height);
  max-height: calc(100% - 90px);
  padding: 8px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #53485e;
  border-left: 3px solid #bb4c75;
  border-radius: 6px;
  background: #1c1822;
  box-shadow: 0 18px 38px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.035);
}
.home-mobile-shell .directory .sheet-heading { flex-shrink: 0; min-height: 32px; margin: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.home-mobile-shell .directory .sheet-heading h2 { margin: 0; font: 700 12px/1.5 var(--sans); letter-spacing: .015em; }
.home-mobile-shell .directory .close-button { flex-direction: row; gap: 8px; width: auto; min-width: 62px; min-height: 32px; }
.home-mobile-shell .directory .close-button > img { width: 13px; height: 13px; }
.home-mobile-shell .directory .close-button > span { font: 500 10px/1.5 var(--sans); color: rgba(255,248,239,.7); }
.home-mobile-shell .tool-list { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 2px; padding: 2px 4px; overflow: auto; overscroll-behavior: contain; border: 0; background: transparent; scrollbar-width: thin; scrollbar-color: #6e388c transparent; }
.home-mobile-shell .tool { display: grid; grid-template-columns: 36px minmax(0,1fr) 12px; column-gap: 10px; flex: 0 0 44px; min-width: 0; min-height: 44px; padding: 0 5px; align-items: center; text-align: left; border: 1px solid transparent; border-radius: 4px; background: transparent; box-shadow: none; }
.home-mobile-shell .tool-art { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(182,151,204,.26); border-radius: 3px; background: linear-gradient(180deg,rgba(255,255,255,.055),transparent 60%),#100c16; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.24); }
.home-mobile-shell .tool-icon { width: calc(52px * var(--menu-icon-scale)); height: calc(52px * var(--menu-icon-scale)); object-fit: contain; }
.home-mobile-shell .tool-icon-teaser { width: calc(62px * var(--menu-icon-scale)); height: calc(62px * var(--menu-icon-scale)); }
.home-mobile-shell .tool-icon-album { width: calc(56px * var(--menu-icon-scale)); height: calc(56px * var(--menu-icon-scale)); }
.home-mobile-shell .tool-icon-wallpaper { width: calc(42px * var(--menu-icon-scale)); height: calc(58px * var(--menu-icon-scale)); }
.home-mobile-shell .tool-icon-pet { width: calc(49px * var(--menu-icon-scale)); height: calc(49px * var(--menu-icon-scale)); }
.home-mobile-shell .tool-name { display: block; font: 700 12px/1.4 var(--sans); letter-spacing: 0; color: var(--paper); white-space: nowrap; }
.home-mobile-shell .tool.available { border-color: rgba(232,86,125,.65); background: linear-gradient(90deg,rgba(196,53,97,.22),rgba(165,82,255,.04)),rgba(255,255,255,.025); box-shadow: inset 3px 0 #e65a80; transition: border-color .18s ease,background .18s ease; }
.home-mobile-shell .tool.available .tool-art { border-color: rgba(232,102,141,.55); }
.home-mobile-shell .tool-arrow { width: 9px; height: 14px; object-fit: contain; justify-self: end; opacity: .72; }
.home-mobile-shell .tool.available:hover, .home-mobile-shell .tool.available:focus-visible { border-color: rgba(255,130,165,.86); background: linear-gradient(90deg,rgba(209,68,117,.31),rgba(255,255,255,.06)); }
.home-mobile-shell .upcoming .tool-name { color: #beb3c7; }
.home-mobile-shell .upcoming .tool-icon { opacity: .72; }
.home-mobile-shell .directory-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding-top: 0; border-top: 1px solid rgba(255,255,255,.08); font: 400 10px/1.5 var(--sans); color: rgba(255,248,239,.5); }
.home-mobile-shell .directory-footer p { margin: 0; }
.home-mobile-shell .directory-footer :is(button,a) { min-height: 32px; font: inherit; color: rgba(255,248,239,.6); }
.home-mobile-shell .music { left: 18px; right: 18px; padding: 8px; border: 1px solid #53485e; border-left: 3px solid #bb4c75; border-radius: 6px; background: #1c1822; box-shadow: 0 18px 38px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.035); }
.home-mobile-shell .music .sheet-heading { min-height: 32px; margin: 0 0 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.home-mobile-shell .music .sheet-heading h2 { margin: 0; font: 700 12px/1.5 var(--sans); letter-spacing: .015em; }
.home-mobile-shell .music .close-button { flex-direction: row; gap: 8px; width: auto; min-width: 62px; min-height: 32px; }
.home-mobile-shell .music .close-button > img { width: 13px; height: 13px; }
.home-mobile-shell .music .close-button > span { font: 500 10px/1.5 var(--sans); color: rgba(255,248,239,.7); }
.home-mobile-shell .now-playing { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0 0 6px; padding: 0 4px; }
.home-mobile-shell .music-art { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid rgba(182,151,204,.26); border-radius: 3px; background: #100c16; }
.home-mobile-shell .music-art > img { width: 25px; height: 30px; object-fit: contain; }
.home-mobile-shell .track-info { flex: 1; min-width: 0; }
.home-mobile-shell .track-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.home-mobile-shell .track-heading h3 { flex: 1; min-width: 0; font: 700 12px/1.5 var(--sans); margin: 0; overflow-wrap: anywhere; color: var(--paper); }
.home-mobile-shell .track-counter { flex-shrink: 0; font: 9px/1.5 var(--sans); color: rgba(255,248,239,.5); font-variant-numeric: tabular-nums; }
.home-mobile-shell .track-info > p { font: 10px/1.5 var(--sans); color: var(--muted); margin: 0; }
.home-mobile-shell .playback { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 4px; }
.home-mobile-shell .play-toggle { width: 44px; height: 44px; display: grid; place-items: center; }
.home-mobile-shell .play-toggle > img { width: 28px; height: 28px; object-fit: contain; }
.home-mobile-shell .skip-control { min-width: 72px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 10px/1.5 var(--sans); color: var(--muted); }
.home-mobile-shell .skip-control > img { width: 14px; height: 18px; object-fit: contain; }
.home-mobile-shell .previous-track-image { transform: scaleX(-1); }
.home-mobile-shell .volume-row { display: flex; align-items: center; gap: 12px; height: 36px; border-top: 1px solid rgba(255,255,255,.08); margin: 0; padding: 2px 4px 0; }
.home-mobile-shell .volume-row > label { font: 10px/1 var(--sans); color: var(--muted); }
.home-mobile-shell .volume-row > span { width: 27px; font: 9px/1 var(--sans); color: var(--muted); }
.home-mobile-shell .volume-row > input { flex: 1; min-width: 0; height: 26px; margin: 0; cursor: pointer; appearance: none; background: transparent; }
.home-mobile-shell .volume-row > input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg,#a552ff 0%,#a552ff var(--volume-percent,36%),#33203d var(--volume-percent,36%),#33203d 100%); }
.home-mobile-shell .volume-row > input::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff8ef; margin-top: -3px; }
.home-mobile-shell .volume-row > input::-moz-range-track { height: 2px; background: #33203d; }
.home-mobile-shell .volume-row > input::-moz-range-progress { height: 2px; background: #a552ff; }
.home-mobile-shell .volume-row > input::-moz-range-thumb { border: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff8ef; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes music-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 350px) {
.home-mobile-shell .brand-row, .home-mobile-shell .dock { left: 22px; right: 22px; }
.home-mobile-shell .hero-copy { left: 20px; right: 20px; }
.home-mobile-shell .hero-line { font-size: 14px; }
.home-mobile-shell .hero-caption { font-size: 9px; }
.home-mobile-shell .dock { gap: 8px; }
.home-mobile-shell .sheet { left: 11px; right: 11px; padding-left: 18px; padding-right: 18px; }
.home-mobile-shell .directory { left: 14px; right: 14px; padding-left: 10px; padding-right: 10px; }
.home-mobile-shell .music { left: 14px; right: 14px; padding: 8px; }
}
@media (max-height: 730px) {
.home-mobile-shell { --directory-bottom: max(12px,env(safe-area-inset-bottom)); --dock-height: 67px; }
.home-mobile-shell .stage .figure { top: 9svh; width: min(145vw, 660px); }
.home-mobile-shell .hero-line { font-size: 14px; }
.home-mobile-shell .hero-caption { margin-top: 6px; }
.home-mobile-shell .dock { padding-top: 7px; }
.home-mobile-shell .sheet { max-height: calc(100% - 120px); padding-top: 17px; }
.home-mobile-shell .sheet-heading { margin-bottom: 16px; }
.home-mobile-shell .directory { bottom: var(--directory-bottom); height: var(--directory-height); max-height: calc(100% - 90px); padding-top: 8px; padding-bottom: 8px; }
.home-mobile-shell .music { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.home-mobile-shell *, .home-mobile-shell *::before, .home-mobile-shell *::after { animation: none !important; transition: none !important; } }

  .home-mobile-shell a { text-decoration: none; }
  .home-mobile-shell .directory-footer a { display: inline-flex; align-items: center; }
}