/* Independent reference-aligned DOM shell. The existing renderer and storage are untouched. */
@font-face { font-family: "Inconsolata"; src: url("./fonts/Inconsolata-variable.ttf") format("truetype"); font-style: normal; font-weight: 200 900; font-stretch: 50% 200%; font-display: swap; }
body.artist-shell-enabled #overlay { display: none !important; }
body.artist-shell-enabled #hud { display: none !important; }
#artistShell.ys-shell {
  all: initial;
  --ys-container-width: 100%;
  --ys-mono: "Inconsolata", "Consolas", "Liberation Mono", "Microsoft YaHei", monospace;
  --ys-pink: #ec4899;
  --ys-line: #fff;
  display: block;
  position: fixed;
  inset: 0;
  z-index: 5;
  isolation: isolate;
  pointer-events: none;
  color: #fff;
  font: 400 16px/24px var(--ys-mono);
  letter-spacing: normal;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
#artistShell.ys-shell *,
#artistShell.ys-shell *::before,
#artistShell.ys-shell *::after { box-sizing: border-box; }
#artistShell.ys-shell :where(h1, h2, p, dl, dt, dd, label, fieldset, legend) { all: unset; display: block; font: inherit; color: inherit; box-sizing: border-box; }
#artistShell.ys-shell :where(button, a, select) { all: unset; box-sizing: border-box; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
#artistShell.ys-shell :where(button, a, select, input):focus-visible { outline: 2px solid var(--ys-pink); outline-offset: 4px; }
#artistShell.ys-shell h1:focus { outline: none; }
#artistShell.ys-shell :where(button, select):disabled { opacity: .5; cursor: not-allowed; }
#artistShell.ys-shell[hidden],
#artistShell.ys-shell [hidden] { display: none !important; }
#artistShell.ys-shell .ys-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#artistShell.ys-shell .ys-container { width: 100%; max-width: var(--ys-container-width); margin-inline: auto; padding-inline: 16px; }
#artistShell.ys-shell .ys-frame { position: relative; height: 100%; }
#artistShell.ys-shell .ys-header { position: absolute; top: 8px; right: 16px; left: 16px; display: flex; justify-content: flex-end; align-items: flex-start; z-index: 4; pointer-events: none; }
#artistShell.ys-shell .ys-nav-wrap { display: flex; align-items: center; gap: 32px; background: transparent; }
#artistShell.ys-shell .ys-nav { display: flex; align-items: center; gap: 32px; }
#artistShell.ys-shell .ys-nav-link { display: block; font-size: 16px; line-height: 24px; border-bottom: 1px solid transparent; }
/* Keep the four measured desktop label-width slots; Contact remains a legacy compact-menu route.
   The two header icons expose Instagram and the existing local Contact page. */
#artistShell.ys-shell .ys-nav-link[href="#/"] { width: 32px; }
#artistShell.ys-shell .ys-nav-link[href="#/works"] { width: 40px; }
#artistShell.ys-shell .ys-nav-link[href="#/about"] { width: 48px; }
#artistShell.ys-shell .ys-nav-link[href="#/support"] { width: 48px; }
#artistShell.ys-shell .ys-nav-link[href="#/contact"] { display: none; }
#artistShell.ys-shell .ys-nav-link:hover { color: var(--ys-pink); }
#artistShell.ys-shell .ys-menu-button { display: none; }
#artistShell.ys-shell .ys-icon-strip { display: flex; align-items: center; gap: 16px; }
#artistShell.ys-shell .ys-icon { display: flex; align-items: center; justify-content: center; position: relative; width: 16px; height: 24px; }
#artistShell.ys-shell .ys-icon svg { display: block; width: 16px; height: 16px; }
#artistShell.ys-shell .ys-icon:hover { color: var(--ys-pink); }

/* Keep the reference container; only the complete entry dock moves inward/upward.
   Bounded viewport offsets fade back to the edge on narrow windows. */
#artistShell.ys-shell .ys-home-layer { position: absolute; inset: 0 16px; pointer-events: none; }
#artistShell.ys-shell .ys-home-dock {
  --ys-home-left: max(clamp(16px, calc(20vw - 128px), 320px), env(safe-area-inset-left, 0px));
  --ys-home-bottom: max(clamp(16px, 15dvh, 200px), calc(16px + env(safe-area-inset-bottom, 0px)));
  position: absolute; left: var(--ys-home-left); right: auto; bottom: var(--ys-home-bottom);
  width: 326px; max-width: calc(100% - var(--ys-home-left) - max(16px, env(safe-area-inset-right, 0px))); pointer-events: none;
}
/* The later Works stylesheet still owns visible-player clearance/scrolling.
   Its existing bottom and height formulas consume this more-specific floor. */
#artistShell.ys-shell[data-page="home"]:has(.ys-music-player:not([hidden])) .ys-home-layer .ys-home-dock {
  --ys-home-player-bottom: max(var(--ys-home-bottom), var(--ys-player-space));
}
#artistShell.ys-shell .ys-entry { background: transparent; margin-bottom: 8px; pointer-events: auto; }
#artistShell.ys-shell .ys-play-frame { position: relative; isolation: isolate; border: 0; padding: 8px; background: transparent; overflow: visible; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* The buffer is deliberately much larger than PLAY. Its transparent feather, not a box, ends the drawing. */
#artistShell.ys-shell .ys-play-aura { position: fixed; left: -140px; top: -130px; width: calc(100% + 280px); height: 360px; pointer-events: none; z-index: -1; opacity: .46; transition: opacity 360ms ease; }
#artistShell.ys-shell .ys-play-frame[data-play-pressed="true"] .ys-play-aura,
#artistShell.ys-shell .ys-play-frame[data-play-active="true"] .ys-play-aura,
#artistShell.ys-shell .ys-play-frame:hover .ys-play-aura,
#artistShell.ys-shell .ys-play-frame:focus-within .ys-play-aura { opacity: .94; }
#artistShell.ys-shell .ys-entry-copy { position: relative; width: fit-content; max-width: calc(100% / 1.1); pointer-events: none; transform-origin: left center; transition: transform 180ms cubic-bezier(.16,1,.3,1); }
/* Scale the text carrier, never its ambient canvas or the outer interaction frame. */
#artistShell.ys-shell .ys-play-frame[data-play-ready="true"][data-play-pressed="true"] .ys-entry-copy,
#artistShell.ys-shell .ys-play-frame[data-play-ready="true"]:is(:hover, :focus-within, [data-play-active="true"]) .ys-entry-copy { transform: scale(1.1); }
/* Entry events arm one short burst; remaining hovered only keeps the approved scale. */
#artistShell.ys-shell .ys-play-frame[data-play-ready="true"][data-play-glitch="true"] .ys-entry-copy { --ys-glitch-color: ys-entry-color 280ms steps(1, end) 1; --ys-glitch-a: ys-entry-tear-a 280ms steps(1, end) 1; --ys-glitch-b: ys-entry-tear-b 280ms steps(1, end) 1; }
#artistShell.ys-shell .ys-play-label { display: flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; pointer-events: auto; font-size: 24px; line-height: 32px; letter-spacing: 2.4px; opacity: .84; text-shadow: 0 1px 5px #291620; transition: opacity 160ms ease; }
#artistShell.ys-shell .ys-play-type { display: inline-block; pointer-events: none; }
#artistShell.ys-shell .ys-play-frame[data-play-pressed="true"] .ys-play-label,
#artistShell.ys-shell .ys-play-frame[data-play-active="true"] .ys-play-label,
#artistShell.ys-shell .ys-play-frame[data-play-ready="true"]:hover .ys-play-label,
#artistShell.ys-shell .ys-play-frame[data-play-ready="true"]:focus-within .ys-play-label { opacity: 1; }
#artistShell.ys-shell .ys-play-label:focus-visible { outline: none; text-decoration: underline; text-decoration-color: #d6b7c8; text-underline-offset: 7px; }
#artistShell.ys-shell .ys-play-label::after { content: ""; display: inline-block; pointer-events: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
#artistShell.ys-shell .ys-entry-hint { font-size: 14px; line-height: 20px; letter-spacing: normal; text-shadow: 0 1px 5px #291620; }
#artistShell.ys-shell .ys-entry-loading { display: grid; gap: 6px; width: 100%; max-width: 280px; padding-block: 2px; font-size: 14px; line-height: 20px; text-shadow: 0 1px 5px #291620; }
#artistShell.ys-shell .ys-loading-track { position: relative; width: 100%; height: 4px; overflow: hidden; }
#artistShell.ys-shell .ys-loading-fill { position: absolute; inset: 0; display: block; background: #e9b5dc; transform: scaleX(0); transform-origin: left center; transition: transform 600ms cubic-bezier(.2,.65,.3,1); will-change: transform; pointer-events: none; }
#artistShell.ys-shell .ys-loading-track[data-indeterminate="true"] .ys-loading-fill { visibility: hidden; transition: none; }
#artistShell.ys-shell .ys-loading-progress { appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 0; overflow: hidden; background: #75606f; color: #e9b5dc; accent-color: #e9b5dc; }
#artistShell.ys-shell .ys-loading-progress::-webkit-progress-bar { background: #75606f; }
#artistShell.ys-shell .ys-loading-progress::-webkit-progress-value { background: transparent; }
#artistShell.ys-shell .ys-loading-progress::-moz-progress-bar { background: transparent; }
/* An unmeasured phase is visibly unknown, never a timer-driven percentage. */
#artistShell.ys-shell .ys-loading-progress:not([value]) { background: repeating-linear-gradient(110deg, #e9b5dc 0 5px, #75606f 5px 10px); }
#artistShell.ys-shell .ys-loading-progress:not([value])::-webkit-progress-bar { background: transparent; }
#artistShell.ys-shell .ys-glitch-text { display: inline-block; position: relative; max-width: 100%; vertical-align: top; pointer-events: none; }
#artistShell.ys-shell .ys-glitch-ink { animation: var(--ys-glitch-color, none); }
#artistShell.ys-shell .ys-glitch-echo { position: absolute; inset: 0; pointer-events: none; opacity: 0; text-shadow: none; }
#artistShell.ys-shell .ys-glitch-echo::before { content: attr(data-glitch-echo); display: block; }
#artistShell.ys-shell .ys-glitch-echo-a { color: #ff37c7; animation: var(--ys-glitch-a, none); }
#artistShell.ys-shell .ys-glitch-echo-b { color: #baff3a; animation: var(--ys-glitch-b, none); }
/* One chromatic gesture, neutral again before its finite end; the ink never blanks. */
@keyframes ys-entry-color {
  0%, 82%, 100% { color: inherit; text-shadow: none; }
  8%, 30% { color: #fff; text-shadow: -2px 0 #ff37c7, 2px 0 #baff3a; }
  48% { color: #baff3a; text-shadow: 1px 0 #ff37c7; }
  66% { color: #fff; text-shadow: 2px 0 #29eaff, -2px 0 #ff37c7; }
}
@keyframes ys-entry-tear-a {
  0%, 82%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  8% { opacity: .95; transform: translateX(-3px); clip-path: inset(12% 0 64%); }
  30% { opacity: .95; transform: translateX(3px); clip-path: inset(43% 0 29%); }
  48% { opacity: .8; transform: translateX(-2px); clip-path: inset(73% 0 8%); }
  66% { opacity: .95; transform: translateX(3px); clip-path: inset(29% 0 39%); }
}
@keyframes ys-entry-tear-b {
  0%, 82%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  8%, 30% { opacity: .9; transform: translateX(2px); clip-path: inset(56% 0 17%); }
  48% { opacity: .9; color: #29eaff; transform: translateX(-3px); clip-path: inset(63% 0 10%); }
  66% { opacity: .9; color: #baff3a; transform: translateX(2px); clip-path: inset(9% 0 68%); }
}

#artistShell.ys-shell .ys-display-controls { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 16px; pointer-events: auto; }
#artistShell.ys-shell .ys-fullscreen-choice { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 16px; line-height: 24px; cursor: pointer; }
#artistShell.ys-shell input[type="checkbox"] { all: revert; box-sizing: border-box; width: 16px; height: 16px; margin: 0; accent-color: var(--ys-pink); cursor: pointer; flex: 0 0 auto; pointer-events: auto; }

#artistShell.ys-shell .ys-error,
#artistShell.ys-shell .ys-entry-notice,
#artistShell.ys-shell .ys-dock-notice { font-size: 12px; line-height: 18px; margin-top: 8px; overflow-wrap: anywhere; color: #fff; background: rgba(0,0,0,.45); padding: 4px; }

#artistShell.ys-shell .ys-pause { position: absolute; top: 8px; right: 16px; font-size: 12px; line-height: 24px; text-decoration: underline; }
#artistShell.ys-shell[data-phase="playing"] .ys-nav-wrap { visibility: hidden; }
/* Text routes retain the same world behind a transparent scrolling leaf. */
#artistShell.ys-shell .ys-content { position: absolute; top: 64px; right: 16px; bottom: 72px; left: 16px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #ccc transparent; background: rgba(0,0,0,.38); pointer-events: auto; }
#artistShell.ys-shell .ys-page-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px dashed var(--ys-line); }
#artistShell.ys-shell .ys-return { color: #e9b5dc; font-size: 14px; text-decoration: underline; }
#artistShell.ys-shell .ys-page-mark { font-size: 12px; }
#artistShell.ys-shell .ys-content-inner { padding: 32px; }
#artistShell.ys-shell .ys-page { max-width: 960px; margin-inline: auto; }
#artistShell.ys-shell .ys-eyebrow { font-size: 12px; line-height: 18px; color: #ded5dc; }
#artistShell.ys-shell .ys-page-title { font-size: 24px; line-height: 32px; margin: 8px 0 24px; overflow-wrap: anywhere; }
#artistShell.ys-shell .ys-page p { margin-bottom: 20px; line-height: 1.75; }
#artistShell.ys-shell .ys-page .ys-note { font-size: 14px; color: #ded5dc; }
#artistShell.ys-shell .ys-artist-profile { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(24px, 4vw, 48px); }
#artistShell.ys-shell .ys-artist-photo { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
#artistShell.ys-shell .ys-artist-copy { min-width: 0; overflow-wrap: anywhere; }
#artistShell.ys-shell .ys-page .ys-artist-tools { font-size: 13px; line-height: 1.5; color: #ded5dc; }
#artistShell.ys-shell .ys-link,
#artistShell.ys-shell .ys-text-cta,
#artistShell.ys-shell .ys-email { display: inline-block; color: #e9b5dc; text-decoration: underline; text-underline-offset: 3px; }
#artistShell.ys-shell .ys-page > .ys-link { display: block; width: fit-content; margin-block: 12px; }
#artistShell.ys-shell .ys-inline-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
#artistShell.ys-shell .ys-email { max-width: 100%; font-size: 20px; line-height: 32px; overflow-wrap: anywhere; margin: 8px 0 24px; }
#artistShell.ys-shell .ys-about-contact { margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--ys-line); }
#artistShell.ys-shell .ys-about-contact h2 { font-size: 18px; line-height: 26px; margin-bottom: 12px; }
#artistShell.ys-shell .ys-contact-links { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
#artistShell.ys-shell .ys-contact-links .ys-email { margin: 0; font-size: 16px; line-height: 24px; }
#artistShell.ys-shell .ys-contact-instagram { display: inline-flex; align-items: center; gap: .4em; font-size: 16px; line-height: 24px; }
#artistShell.ys-shell .ys-contact-instagram svg { width: 1em; height: 1em; flex: 0 0 auto; }
#artistShell.ys-shell .ys-support-status { color: #fff; font-weight: 700; }

#artistShell.ys-shell .ys-missing-address { overflow-wrap: anywhere; font-size: 14px; }
#artistShell.ys-shell .ys-work { display: block; margin-block: 24px; border: 1px dashed var(--ys-line); }
#artistShell.ys-shell .ys-work-cover { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: transparent; }
#artistShell.ys-shell .ys-work-index,
#artistShell.ys-shell .ys-work-caption { font-size: 12px; line-height: 18px; }
#artistShell.ys-shell .ys-work-lettering { font-size: 24px; line-height: 32px; }
#artistShell.ys-shell .ys-work-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 12px 16px; background: rgba(0,0,0,.25); font-size: 14px; }
#artistShell.ys-shell .ys-work-facts { display: grid; grid-template-columns: 64px 1fr; gap: 8px 16px; margin-bottom: 24px; }
#artistShell.ys-shell .ys-controls { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 16px 24px; margin: 24px 0; }
#artistShell.ys-shell kbd { font: inherit; font-size: 14px; }
#artistShell.ys-shell .ys-setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 64px; padding: 12px 0; border-bottom: 1px dashed var(--ys-line); }
#artistShell.ys-shell .ys-button { display: inline-block; padding: 8px 12px; border: 1px dashed var(--ys-line); font-size: 14px; line-height: 20px; }
#artistShell.ys-shell .ys-button:hover:not(:disabled) { border-style: solid; color: var(--ys-pink); }
#artistShell.ys-shell .ys-sound-choice { display: flex; align-items: center; gap: 8px; cursor: pointer; pointer-events: auto; font-size: 14px; }
#artistShell.ys-shell .ys-settings-message { font-size: 14px; min-height: 24px; margin-top: 16px; }
#artistShell.ys-shell .ys-content-footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(237,182,204,.28); }
#artistShell.ys-shell .ys-works-donate { display: flex; justify-content: center; margin-top: 40px; }
#artistShell.ys-shell[data-page="works"] .ys-content-footer .ys-works-home { margin-top: 0; }
#artistShell.ys-shell .ys-content-donate { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 28px; color: #f5d4e3; background: rgba(28,18,25,.86); border: 1px solid rgba(237,182,204,.65); font-size: 18px; line-height: 24px; }
#artistShell.ys-shell .ys-content-donate:hover { color: #241820; background: #edb6cc; }
/* Actual reference container breakpoints, not guessed screen percentages. */
@media (min-width: 576px) { #artistShell.ys-shell { --ys-container-width: 576px; } }
@media (min-width: 640px) { #artistShell.ys-shell { --ys-container-width: 640px; } }
@media (min-width: 768px) { #artistShell.ys-shell { --ys-container-width: 768px; } }
@media (min-width: 1024px) { #artistShell.ys-shell { --ys-container-width: 1024px; } }
@media (min-width: 1280px) { #artistShell.ys-shell { --ys-container-width: 1280px; } }
@media (min-width: 1536px) { #artistShell.ys-shell { --ys-container-width: 1536px; } }
/* Small-window/touch additions: not unobserved mobile screenshot parity. */
@media (max-width: 1023px) {
  #artistShell.ys-shell .ys-home-dock { --ys-home-bottom: max(72px, clamp(16px, 15dvh, 200px), calc(56px + env(safe-area-inset-bottom, 0px))); }
}
@media (max-width: 720px) {
  #artistShell.ys-shell .ys-header { top: max(8px, env(safe-area-inset-top)); }
  #artistShell.ys-shell .ys-menu-button { display: block; font-size: 24px; line-height: 44px; width: 44px; text-align: center; }
  #artistShell.ys-shell .ys-nav-wrap { display: none; position: absolute; top: 48px; right: 0; max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; background: rgba(0,0,0,.88); padding: 16px; }
  #artistShell.ys-shell[data-menu-open="true"] .ys-nav-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  #artistShell.ys-shell .ys-nav { flex-direction: column; align-items: stretch; gap: 0; }
  #artistShell.ys-shell .ys-nav-link { display: block; min-height: 44px; line-height: 44px; padding-inline: 8px; }
  #artistShell.ys-shell .ys-nav-link[href] { display: block; width: auto; }
  #artistShell.ys-shell .ys-icon-strip { gap: 8px; }
  #artistShell.ys-shell .ys-icon { width: 44px; height: 44px; }

  #artistShell.ys-shell .ys-home-layer { inset-inline: 0; }
  #artistShell.ys-shell .ys-play-label { min-height: 44px; }
  #artistShell.ys-shell .ys-display-controls { gap: 12px; flex-wrap: wrap; }
  #artistShell.ys-shell .ys-fullscreen-choice { min-height: 44px; }

  #artistShell.ys-shell .ys-content { top: 64px; bottom: 16px; }
  #artistShell.ys-shell .ys-content-inner { padding: 24px 16px; }
  #artistShell.ys-shell .ys-artist-profile { grid-template-columns: minmax(0, 1fr); }
  #artistShell.ys-shell .ys-artist-photo { max-width: 420px; }
  #artistShell.ys-shell .ys-page-mark { display: none; }
  #artistShell.ys-shell .ys-controls { gap: 12px 16px; }
  #artistShell.ys-shell .ys-pause { top: auto; bottom: 8px; line-height: 44px; }
  #artistShell.ys-shell[data-phase="playing"] .ys-nav-wrap { visibility: visible; }
}
@media (max-width: 390px) {
  #artistShell.ys-shell .ys-home-dock { width: calc(100% - 32px); }
  #artistShell.ys-shell .ys-display-controls { gap: 4px 12px; }
  #artistShell.ys-shell .ys-entry-audio,
  #artistShell.ys-shell .ys-entry-hint { font-size: 12px; }
  #artistShell.ys-shell .ys-email { font-size: 18px; }
}
@media (max-height: 540px) {
  #artistShell.ys-shell .ys-home-dock { max-height: max(0px, calc(100dvh - 64px - env(safe-area-inset-top, 0px) - var(--ys-home-bottom))); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #artistShell.ys-shell .ys-entry-copy { transform: none !important; }
  #artistShell.ys-shell .ys-glitch-echo { display: none !important; }
  #artistShell.ys-shell *,
  #artistShell.ys-shell *::before,
  #artistShell.ys-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}