/* Mobile document shell. Loaded after the shared visual system, only in mobile.html. */
html[data-layout="mobile"] {
  --mobile-gutter: clamp(8px, 2.35vw, 14px);
  --mobile-nav-offset: calc(106px + env(safe-area-inset-top, 0px));
  --mobile-nav-surface: rgba(255, 253, 246, .96);
  --mobile-nav-text: #27342d;
  --mobile-nav-muted: #68736b;
  --mobile-nav-active: #173d2f;
  scroll-padding-top: var(--cc-nav-clearance, var(--mobile-nav-offset));
  scroll-behavior: auto;
  scrollbar-gutter: auto;
}
html[data-layout="mobile"] body { font-size: 14px; overflow-x: clip; }
html[data-layout="mobile"] .wrap {
  width: 100%; max-width: 680px; margin-inline: auto; padding-inline: var(--mobile-gutter);
}
html[data-layout="mobile"] .nav {
  position: fixed; inset: 0 0 auto; transform: none; width: 100%; max-height: none;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "links links";
  align-content: start; gap: 0 12px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 0 0;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 0 0 14px 14px;
  background: var(--mobile-nav-surface); color: var(--mobile-nav-text);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 3px 18px rgba(22, 31, 24, .07);
}
html[data-layout="mobile"] .nav.is-stuck {
  background: var(--mobile-nav-surface);
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
}
html[data-layout="mobile"] .nav-brand { gap: 8px; min-height: 43px; margin-left: max(16px, env(safe-area-inset-left, 0px)); }
html[data-layout="mobile"] .nav-brand .mark { width: 27px; height: 27px; }
html[data-layout="mobile"] .nav-name { font-size: 14px; letter-spacing: .04em; }
html[data-layout="mobile"] .brand-english { display: block; margin-top: 3px; font-size: 7px; letter-spacing: .10em; }
html[data-layout="mobile"] .brand-english i { display: none; }
html[data-layout="mobile"] .nav-actions { gap: 3px; margin-right: max(10px, env(safe-area-inset-right, 0px)); }
html[data-layout="mobile"] .nav-actions .icon-btn {
  width: 40px; min-width: 40px; height: 40px; border-radius: 50%; color: var(--text-2);
}
html[data-layout="mobile"] #pagesBtn { display: inline-flex; color: var(--mobile-nav-text); }
html[data-layout="mobile"] .nav-actions .icon-btn svg { width: 18px; height: 18px; }
html[data-layout="mobile"] .nav-actions #helpBtn,
html[data-layout="mobile"] .nav-actions #hudBtn,
html[data-layout="mobile"] .nav-actions .kbd { display: none; }
html[data-layout="mobile"] #navLinks {
  display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start;
  width: 100%; min-width: 0; gap: 6px; margin: 3px 0 0; padding: 5px 8px 9px; box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom;
  mask-image: none;
  -webkit-mask-image: none;
}
html[data-layout="mobile"] #navLinks::-webkit-scrollbar { display: none; }
html[data-layout="mobile"] #navLinks > a {
  position: relative; flex: 0 0 104px; min-width: 104px; height: 38px; min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 9px; border: 1px solid transparent; border-radius: 7px;
  color: var(--mobile-nav-muted); background: transparent; font-size: 12px; line-height: 1; white-space: nowrap;
}
html[data-layout="mobile"] #navLinks > a svg { flex: none; width: 15px; height: 15px; }
html[data-layout="mobile"] #navLinks > a.is-active,
html[data-layout="mobile"] #navLinks > a[aria-current] {
  color: var(--mobile-nav-active); background: color-mix(in srgb, var(--jade) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); font-weight: 650;
  box-shadow: 0 2px 6px rgba(22, 31, 24, .07);
}
html[data-layout="mobile"][data-theme="dark"] {
  --mobile-nav-surface: rgba(18, 28, 25, .97);
  --mobile-nav-text: #eff3e8;
  --mobile-nav-muted: #a7b3a8;
  --mobile-nav-active: #e6f0e0;
}
html[data-layout="mobile"][data-theme="dark"] .nav {
  border-bottom-color: rgba(220, 238, 218, .22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
}
html[data-layout="mobile"][data-theme="light"] .nav {
  border-bottom-color: rgba(74, 92, 79, .26);
  box-shadow: 0 4px 18px rgba(65, 74, 65, .13);
}
html[data-layout="mobile"][data-theme="dark"] .nav-actions .icon-btn { color: #dce8da; }
html[data-layout="mobile"][data-theme="light"] .nav-actions .icon-btn { color: #3d5147; }
html[data-layout="mobile"] #navLinks > a::after { display: none; }
html[data-layout="mobile"] .progress { top: auto; bottom: 0; height: 2px; }
html[data-layout="mobile"] .hero {
  display: block; min-height: 100svh; padding: 0; overflow: hidden; justify-content: initial;
}
html[data-layout="mobile"][data-theme="light"] .hero,
html[data-layout="mobile"][data-theme="light"] .hero-bg {
  background-color: #617568;
  background-image: linear-gradient(135deg, #789080 0%, #526a5b 52%, #35483e 100%);
}
html[data-layout="mobile"][data-theme="dark"] .hero,
html[data-layout="mobile"][data-theme="dark"] .hero-bg {
  background-color: #101820;
  background-image: linear-gradient(135deg, #172b32 0%, #121b20 52%, #090e13 100%);
}
html[data-layout="mobile"][data-theme="light"] .hero-scrim {
  background: transparent;
}
html[data-layout="mobile"][data-theme="dark"] .hero-scrim {
  background: transparent;
}
html[data-layout="mobile"] .hero-gears {
  position: absolute; z-index: 1; inset: 0; display: block; overflow: hidden; pointer-events: none;
  color: rgba(220, 235, 216, .36);
}
html[data-layout="mobile"] .hero-gear {
  position: absolute; display: block; width: min(67vw, 300px); max-width: none; height: auto; opacity: .62;
  transform-origin: 50% 50%; will-change: transform;
}
html[data-layout="mobile"] .hero-gear-a {
  top: -44%; right: -62%; width: min(175vw, 720px); opacity: .5;
  animation: mobile-gear-spin 72s linear infinite;
}
html[data-layout="mobile"] .hero-gear-b {
  bottom: 22%; left: -10%; width: min(40vw, 180px); opacity: .68;
  animation: mobile-gear-spin-reverse 42s linear infinite;
}
html[data-layout="mobile"] .hero-gear-line {
  fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
html[data-layout="mobile"][data-theme="dark"] .hero-gears { color: rgba(174, 207, 199, .25); }
@keyframes mobile-gear-spin { to { transform: rotate(360deg); } }
@keyframes mobile-gear-spin-reverse { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-layout="mobile"] .hero-gear { animation: none; }
}
html[data-layout="mobile"] .hero-stage {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  min-height: 100svh; gap: 19px;
  padding-top: calc(var(--cc-nav-clearance, var(--mobile-nav-offset)) + 18px);
  padding-bottom: 24px;
}
html[data-layout="mobile"] .hero-copy { padding: 0; min-width: 0; }
html[data-layout="mobile"] .hero-frame,
html[data-layout="mobile"] .hero-bottomline,
html[data-layout="mobile"] .enter-btn { display: none; }
html[data-layout="mobile"] .hero::after { top: 15%; right: -42%; width: 90vw; opacity: .6; }
html[data-layout="mobile"] .eyebrow {
  gap: 9px; max-width: 100%; margin: 0 0 17px; font-size: 10px; line-height: 1.6;
  letter-spacing: .015em; text-shadow: none;
}
html[data-layout="mobile"] .eyebrow > span:last-child { min-width: 0; overflow-wrap: anywhere; }
html[data-layout="mobile"] .hero-title {
  flex-direction: row; flex-wrap: nowrap; align-items: baseline; font-size: clamp(43px, 13.3vw, 76px);
  line-height: 1.16; letter-spacing: .015em; text-shadow: none;
}
html[data-layout="mobile"] .hero-title-line { white-space: nowrap; }
html[data-layout="mobile"] .hero-title-line-last { margin-top: 0; }
html[data-layout="mobile"] .hero-title-mark { margin-left: 0; }
html[data-layout="mobile"] .hero-wordmark { gap: 7px 9px; margin-top: 14px; font-size: 8px; line-height: 1.6; letter-spacing: .10em; }
html[data-layout="mobile"] .hero-wordmark span { padding-left: 9px; font-size: 7px; }
html[data-layout="mobile"] .hero-lede { margin-top: 20px; font-size: 13px; line-height: 1.9; text-shadow: none; overflow-wrap: anywhere; }
html[data-layout="mobile"] .hero-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; margin-top: 22px; }
html[data-layout="mobile"] .hero-action { min-width: 0; min-height: 46px; gap: 12px; padding: 10px 9px; font-size: 12px; border-radius: 3px; }
html[data-layout="mobile"] .hero-action-secondary { border-color: rgba(242,240,229,.24); }
html[data-layout="mobile"] .hero-chips { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0; margin-top: 21px; padding-top: 15px; }
html[data-layout="mobile"] .hero-chip {
  min-width: 0; gap: 5px; margin: 0; padding: 0 8px 0 0; border-radius: 0;
  font-size: 10px; white-space: nowrap; background: transparent;
}
html[data-layout="mobile"] .hero-chip + .hero-chip { padding-left: 10px; }
html[data-layout="mobile"] .hero-chip b { font-size: 16px; letter-spacing: -.04em; }
html[data-layout="mobile"] .like-box { gap: 9px 10px; margin-top: 18px; font-size: 11px; }
html[data-layout="mobile"] .like-btn {
  min-height: 38px; padding: 7px 10px; font-size: 11px;
  border-radius: 4px;
  border-color: rgba(210, 163, 107, .52);
  background: rgba(210, 163, 107, .12);
  color: #e2be91;
  box-shadow: 0 4px 14px rgba(18, 27, 22, .12);
}
html[data-layout="mobile"] .like-heart {
  fill: none;
  stroke: #d66b6b;
  stroke-width: 1.4;
}
html[data-layout="mobile"][data-theme="light"] .like-btn {
  border-color: rgba(133, 153, 113, .72);
  background: rgba(211, 222, 193, .38);
  color: #53664e;
}
html[data-layout="mobile"][data-theme="dark"] .like-btn {
  border-color: rgba(194, 145, 91, .56);
  background: rgba(129, 93, 57, .18);
  color: #d5ad7b;
}
html[data-layout="mobile"] .like-btn:hover:not(:disabled),
html[data-layout="mobile"] .like-btn:focus-visible:not(:disabled) {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
html[data-layout="mobile"] .like-box.is-liked .like-btn {
  border-color: #9cac87;
  background: #d7e0c5;
  color: #40513f;
  opacity: 1;
}
html[data-layout="mobile"] .like-box.is-liked .like-heart {
  fill: #d66b6b;
  stroke: #d66b6b;
}
html[data-layout="mobile"][data-theme="dark"] .like-box.is-liked .like-btn {
  border-color: #a57b4e;
  background: #5b4836;
  color: #e4c49a;
}
html[data-layout="mobile"] .like-box.is-offline .like-btn { opacity: .84; }
html[data-layout="mobile"] .like-box.is-offline.is-liked .like-btn { opacity: 1; }
html[data-layout="mobile"] .like-box.is-just-liked .like-btn {
  animation: mobile-like-success .72s cubic-bezier(.2, .8, .25, 1);
}
html[data-layout="mobile"] .like-box.is-just-liked .like-heart {
  animation: mobile-heart-beat .72s cubic-bezier(.2, .8, .25, 1);
}
html[data-layout="mobile"] .like-box.is-just-liked .like-num b {
  animation: mobile-like-count .72s ease-out;
}
@keyframes mobile-like-success {
  0% { transform: scale(1); }
  35% { transform: translateY(-2px) scale(1.06); }
  68% { transform: translateY(0) scale(.98); }
  100% { transform: scale(1); }
}
@keyframes mobile-heart-beat {
  0%, 100% { transform: scale(1) rotate(0); }
  24% { transform: scale(1.25) rotate(-7deg); }
  48% { transform: scale(.96) rotate(5deg); }
  70% { transform: scale(1.1) rotate(-3deg); }
}
@keyframes mobile-like-count {
  0% { color: inherit; }
  35% { color: #ffe0c1; }
  100% { color: inherit; }
}
html[data-layout="mobile"] .like-num { white-space: nowrap; }
html[data-layout="mobile"] .like-hint { flex-basis: 100%; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-layout="mobile"] .hero-stage > .clockwork {
  position: static !important; display: flex !important; flex-direction: row; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 8px; width: 100%; min-height: 51px;
  padding: 11px 13px; margin: 0; border-radius: 5px; background: rgba(43,52,44,.55); box-shadow: none;
}
html[data-layout="mobile"] .hero-stage > .clockwork { flex-direction: column; align-items: stretch; gap: 7px; min-height: 246px; }
html[data-layout="mobile"] .clock-head { font-size: 8px; letter-spacing: .08em; }
html[data-layout="mobile"] .clock-head > span:last-child,
html[data-layout="mobile"] .clock-footer,
html[data-layout="mobile"] .clock-note { display: none !important; }
html[data-layout="mobile"] .clock-art { display: block !important; width: min(100%, 168px); height: 168px; margin: 1px auto 0; }
html[data-layout="mobile"] .clock-svg { display: block !important; width: 100%; height: 100%; }
html[data-layout="mobile"] .clock-art-caption { display: none !important; }
html[data-layout="mobile"] .clock-read { margin: 0; padding: 0; border: 0; text-align: right; }
html[data-layout="mobile"] .clock-time { font-size: 21px; letter-spacing: .04em; }
html[data-layout="mobile"] .mobile-next {
  --turn-progress: 0;
  position: fixed; z-index: 70; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; margin: 0; visibility: hidden; opacity: 0;
  pointer-events: none; transform: translate(-50%, 10px) scale(.86);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
}
html[data-layout="mobile"].is-booting .mobile-next { visibility: hidden; }
html[data-layout="mobile"] .mobile-next.is-visible {
  /* Progress feedback must not become a new wheel/touch target mid-gesture. */
  visibility: visible; opacity: .78; pointer-events: none; transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
html[data-layout="mobile"] .mobile-next-inner { width: 100%; height: 100%; padding: 0; }
html[data-layout="mobile"] #mobileNextButton {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px;
  padding: 0; border: 1px solid color-mix(in srgb, var(--line) 34%, transparent); border-radius: 50%;
  color: var(--text); background: color-mix(in srgb, var(--bg) 42%, transparent);
  box-shadow: 0 4px 14px rgba(22, 31, 24, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  line-height: 1; transition: border-color .2s, transform .2s, background .2s;
}
html[data-layout="mobile"] .mobile-next-ring { position: absolute; inset: 3px; width: 48px; height: 48px; transform: rotate(-90deg); }
html[data-layout="mobile"] .mobile-next-ring-base,
html[data-layout="mobile"] .mobile-next-ring-fill { fill: none; stroke-width: 2; }
html[data-layout="mobile"] .mobile-next-ring-base { fill: none; stroke-width: 1.8; stroke: color-mix(in srgb, var(--line) 48%, transparent); }
html[data-layout="mobile"] .mobile-next-ring-fill {
  stroke: color-mix(in srgb, var(--accent) 76%, var(--text)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--turn-progress));
  transition: stroke-dashoffset .14s ease;
}
html[data-layout="mobile"] .mobile-next-glyph { position: relative; z-index: 1; width: 27px; height: 27px; opacity: .9; overflow: visible; }
html[data-layout="mobile"] .mobile-next-glyph .cat-yawn { transform-box: fill-box; transform-origin: center; animation: cat-yawn-breathe 2.4s ease-in-out infinite; }
html[data-layout="mobile"] .mobile-next-glyph .cat-yawn-mouth { transform-box: fill-box; transform-origin: center; animation: cat-yawn-mouth 1.35s ease-in-out infinite; }
html[data-layout="mobile"] .mobile-next.is-ready #mobileNextButton { border-color: var(--accent); transform: scale(1.05); }
html[data-layout="mobile"] .mobile-next.is-complete #mobileNextButton { background: var(--accent-soft); }
html[data-layout="mobile"] .mobile-next[data-state="end"] { display: none; }

@keyframes cat-yawn-breathe {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  18% { transform: translate(-.55px, -.15px) rotate(-1.6deg); }
  32% { transform: translate(.7px, -.55px) rotate(1.8deg); }
  48% { transform: translate(-.35px, -1px) rotate(-1deg); }
  62% { transform: translate(.45px, -.25px) rotate(1.1deg); }
  78% { transform: translate(0, .1px) rotate(0deg); }
}
@keyframes cat-yawn-mouth {
  0%, 35%, 100% { transform: scale(.78, .65); opacity: .58; }
  58%, 78% { transform: scale(1.08, 1.18); opacity: .94; }
}
html[data-layout="mobile"] .foot { min-height: 0; margin: 0; padding: 16px 0 max(17px, env(safe-area-inset-bottom, 0px)); }
html[data-layout="mobile"] .foot-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px 14px; padding-block: 0; }
html[data-layout="mobile"] .foot-signature { min-width: 0; gap: 5px; }
html[data-layout="mobile"] .foot-title { width: max-content; gap: 8px; font-size: 18px; line-height: 1.3; }
html[data-layout="mobile"] .foot-seal { width: 18px; height: 18px; font-size: 9px; }
html[data-layout="mobile"] .foot-signature p { font-size: 7px; line-height: 1.5; letter-spacing: .07em; }
html[data-layout="mobile"] .foot-links { align-items: flex-end; gap: 6px; font-size: 10px; line-height: 1.6; }
html[data-layout="mobile"] .foot-links a { display: inline-flex; align-items: center; min-height: 24px; }
html[data-layout="mobile"] .foot-legal { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
html[data-layout="mobile"] #hitCount:empty { display: none; }
html[data-layout="mobile"] .cur-dot,
html[data-layout="mobile"] .cur-ring { display: none !important; }
html[data-layout="mobile"].has-cursor * { cursor: auto !important; }
@media (max-width: 340px) {
  html[data-layout="mobile"] .hero-chips { grid-template-columns: 1fr 1fr 1.35fr; }
  html[data-layout="mobile"] .hero-chip { gap: 3px; font-size: 9px; padding-right: 4px; }
  html[data-layout="mobile"] .hero-chip + .hero-chip { padding-left: 7px; }
  html[data-layout="mobile"] .hero-chip b { font-size: 14px; }
  html[data-layout="mobile"] .like-num { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-layout="mobile"] { scroll-behavior: auto; }
  html[data-layout="mobile"] #navLinks { scroll-behavior: auto; }
  html[data-layout="mobile"] .mobile-next { transition: none; }
  html[data-layout="mobile"] .mobile-next-ring-fill { transition: none; }
  html[data-layout="mobile"] .like-box.is-just-liked .like-btn,
  html[data-layout="mobile"] .like-box.is-just-liked .like-heart,
  html[data-layout="mobile"] .like-box.is-just-liked .like-num b { animation: none; }
  html[data-layout="mobile"] .mobile-next-glyph .cat-yawn,
  html[data-layout="mobile"] .mobile-next-glyph .cat-yawn-mouth { animation: none; }
}