/* Whole-site palette; shared identity, clock and footer remain in place. */
@import url('./fatfox/palette.css?v=20260911-ui1');
@import url('./fatfox/gimmick.css?v=20260911-ui1');
html[data-active-theme="fatfox"]{
  --color-background:var(--fatfox-background);
  --color-foreground:var(--fatfox-foreground);
  --color-accent:var(--fatfox-orange);
  --color-line:var(--fatfox-line);
  --color-line-subtle:var(--fatfox-line-subtle);
}
/* Switch ink immediately: nested inherited color transitions delayed the text.
   Keep the stage/footer visibility and opacity transitions from the main CSS. */
html[data-active-theme="fatfox"] body,html[data-active-theme="fatfox"] #soyyo{transition:background-color 2.4s ease}
html[data-active-theme="fatfox"] #soyyo,
html[data-active-theme="fatfox"] .fatfox-view,
html[data-active-theme="fatfox"] .bottom-bar{color:var(--fatfox-foreground)}
html[data-active-theme="fatfox"] .theme-stage{
  transition:visibility 0s,opacity 800ms ease,background-color 2.4s ease;
}
html[data-active-theme="fatfox"] .identity__wordmark{filter:none}
html[data-active-theme="fatfox"] #identity,html[data-active-theme="fatfox"] #clock{background:transparent}
html[data-active-theme="fatfox"] .theme-stage,html.is-theme-closing[data-closing-theme="fatfox"] .theme-stage{display:block!important}
.fatfox-view{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.fatfox-view canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.fatfox-caption{position:absolute;left:6vw;top:43%;max-width:25vw}
.fatfox-caption h2{font-size:clamp(26px,3vw,48px);font-weight:400;margin:16px 0}
.fatfox-caption p{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;line-height:2}
.fatfox-caption button{margin-top:20px;padding:12px 0;border:0;border-bottom:1px solid var(--color-line);background:transparent;color:inherit;font:inherit;cursor:pointer}
.fatfox-fallback{position:absolute;left:35%;top:14%;width:50%;height:72%;object-fit:contain}
.fatfox-status{position:absolute;bottom:90px;left:5%;right:5%;text-align:center}
@media(max-width:700px){.fatfox-caption{top:125px;left:5%;width:90%;max-width:none;text-align:center}.fatfox-caption>p:first-child{display:none}.fatfox-caption h2{font-size:26px;margin:0}.fatfox-caption p{font-size:10px;margin:6px 0}.fatfox-caption button{margin:0;padding:8px;font-size:11px}.fatfox-fallback{left:5%;width:90%;top:28%;height:55%}}
@media(prefers-reduced-motion:reduce){html[data-active-theme="fatfox"] :is(body,#soyyo,.theme-stage,.bottom-bar){transition:none}}
html[data-active-theme="fatfox"] .bottom-bar{background:rgb(32 32 32 / 94%)}

/* Context menu needs its own dark surface rather than the shared light paper. */
html[data-active-theme="fatfox"] .context-menu {
  color: var(--fatfox-foreground);
  background: rgb(32 32 32 / 98%);
  border-color: rgb(240 238 232 / 28%);
}
html[data-active-theme="fatfox"] .context-menu__item:hover,
html[data-active-theme="fatfox"] .context-menu__item:focus-visible {
  background: rgb(240 238 232 / 12%);
}
html[data-active-theme="fatfox"] .context-menu__state { opacity: .8; }
html[data-active-theme="fatfox"] .context-menu__copyright {
  opacity: .7;
  border-top-color: rgb(240 238 232 / 25%);
}

/* FAT FOX previews its dark palette in its own home-menu column. */
.theme-menu__item[data-theme="fatfox"] {
  transition: background-color 400ms ease, color 400ms ease, opacity 400ms ease;
}
.theme-menu__item[data-theme="fatfox"]::before { background-color: transparent; }
.theme-menu__item[data-theme="fatfox"]:hover,
.theme-menu__item[data-theme="fatfox"]:focus-visible {
  background-color: rgb(32 32 32 / 85%);
  color: var(--fatfox-foreground);
}
@media(prefers-reduced-motion:reduce){
  .theme-menu__item[data-theme="fatfox"]{transition:none}
}

.fatfox-caption{top:32%;max-height:calc(68dvh - 80px);overflow-y:auto;scrollbar-width:none}
.fatfox-availability{margin-top:28px;max-width:340px;color:var(--fatfox-orange)}
.fatfox-availability p{font-family:var(--font-interface);font-size:12px;letter-spacing:.015em;line-height:1.75;margin:0 0 14px}
.fatfox-availability .fatfox-availability__title{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em}
.fatfox-email{display:inline-block;color:var(--fatfox-orange);font-size:12px;padding:8px 0;border-bottom:1px solid var(--fatfox-line);text-decoration:none}
.fatfox-email:hover,.fatfox-email:focus-visible{color:var(--fatfox-foreground)}
@media(max-width:700px){
 .fatfox-view{overflow-y:auto;padding:100px 0 100px;scrollbar-width:none}
 .fatfox-view canvas{position:relative;display:block;inset:auto;height:420px;width:100%;touch-action:pan-y}
 .fatfox-caption{position:relative;top:auto;left:6%;width:88%;max-width:none;max-height:none;overflow:visible;text-align:left}
 .fatfox-availability{max-width:none;margin-top:22px}
 .fatfox-availability p{font-size:13px;margin-bottom:14px}
}

/* A vector arrow cannot be substituted with an iOS emoji. */
.fatfox-email{display:inline-flex;align-items:center;gap:.45em}
.fatfox-email svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.25;flex:none}
@media(max-width:700px){
 html[data-active-theme="fatfox"] :is(.identity,.clock)::before{
  content:'';position:absolute;inset:-.6rem -.7rem;z-index:-1;pointer-events:none;
  background:var(--fatfox-background);
  background:color-mix(in srgb,var(--fatfox-background) 82%,transparent);
  transition:background-color 2.4s ease;border-radius:.4rem;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 }
 html[data-active-theme="fatfox"] .clock::before{border-radius:50%}
}

@media(prefers-reduced-motion:reduce){html[data-active-theme="fatfox"] :is(.identity,.clock)::before{transition:none}}