:root {
  color-scheme: light dark;
  background: #f4eedf;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
  background: #f4eedf;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #c25d2c;
  outline-offset: 3px;
}

.skein-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fbf7ec;
  color: #1e1812;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skein-skip:focus {
  transform: translateY(0);
}

img {
  max-width: 100%;
}

#root,
.skein-page {
  min-height: 100vh;
}

.skein-page {
  overflow-x: clip;
}

.skein-page svg {
  max-width: 100%;
}

.skein-hero-photo,
.skein-hero-photo > img,
.face-protected {
  filter: none !important;
  transform: none !important;
}

.skein-hero-photo {
  align-self: center;
}

.skein-menu-tabs {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.skein-recovery {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
  padding: clamp(28px, 8vw, 96px);
  color: #f4eedf;
  background: radial-gradient(circle at 30% 20%, #50382a 0%, #211712 58%, #120d0a 100%);
}

.skein-recovery h1,
.skein-recovery p {
  max-width: 680px;
  margin: 0;
}

.skein-recovery h1 {
  font: italic 400 clamp(42px, 8vw, 82px)/1 Georgia, "Songti SC", "STSong", serif;
}

.skein-recovery__eyebrow {
  color: #f2a36f;
  font: 600 11px/1.4 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .18em;
}

.skein-recovery__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skein-recovery__actions button,
.skein-recovery__actions a {
  min-height: 44px;
  padding: 13px 18px;
  border: 1px solid rgba(244, 238, 223, .32);
  border-radius: 999px;
  color: #f4eedf;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.skein-modal {
  overflow: auto;
  overscroll-behavior: contain;
}

.skein-modal__panel {
  margin: auto;
}

.noscript-fallback {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 20px;
  color: #1e1812;
  background: #f4eedf;
}

.noscript-fallback h1,
.noscript-fallback h2 {
  font-family: Georgia, "Songti SC", "STSong", serif;
  font-style: italic;
  font-weight: 400;
}

.noscript-fallback ul {
  padding-left: 1.25rem;
}

@media (max-width: 899px) {
  html {
    scroll-padding-top: 58px;
  }

  .skein-page--mobile {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

.cocktail-stage {
  position: relative;
  height: 460px;
  border-radius: 12px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 224, 0.1), inset 0 -60px 100px rgba(0, 0, 0, 0.16);
}
.cocktail-stage__hub { position:absolute;left:var(--hx);top:var(--hy);width:var(--hd);height:var(--hd);margin:calc(var(--hd)/-2) 0 0 calc(var(--hd)/-2);border:0;padding:0;background:transparent;cursor:pointer;transform:scale(1);transition:transform 500ms cubic-bezier(.22,.9,.24,1);z-index:2; }
.cocktail-stage__hub img { width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:var(--stage-shadow); }
.cocktail-stage.is-open .cocktail-stage__hub { transform:scale(var(--hs,.78)); }
.cocktail-stage__hub:focus-visible { outline:3px solid var(--stage-btn);outline-offset:6px;border-radius:999px; }
.cocktail-stage__ingredient { position:absolute;left:var(--x);top:var(--y);width:0;height:0;pointer-events:none;transform:translate(var(--dx),var(--dy)) scale(.38);opacity:0;transition:transform 480ms cubic-bezier(.22,.9,.24,1),opacity 300ms linear;transition-delay:calc(var(--i)*40ms); }
.cocktail-stage.is-open .cocktail-stage__ingredient { transform:translate(0,0) scale(1);opacity:1;pointer-events:auto;transition-delay:calc(120ms + var(--i)*60ms); }
.cocktail-stage__pic { position:absolute;left:-42px;top:-42px;width:84px;height:84px;display:grid;place-items:center; }
.cocktail-stage__pic img { width:100%;height:100%;object-fit:contain;display:block;filter:var(--stage-shadow);transition:transform 200ms; }
.cocktail-stage__ingredient:hover .cocktail-stage__pic img { transform:translateY(-2px) scale(1.06); }
.cocktail-stage__label { position:absolute;left:calc(var(--lw,124px)/-2);width:var(--lw,124px);top:48px;text-align:center;font:500 12px/1.25 var(--stage-ui);color:inherit;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:0;transition:opacity 250ms;transition-delay:0ms; }
.cocktail-stage__ingredient.is-up .cocktail-stage__label { top:auto;bottom:48px; }
.cocktail-stage.is-open .cocktail-stage__label { opacity:1;transition-delay:calc(360ms + var(--i)*60ms); }
.cocktail-stage__toggle { position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:500 12px/1 var(--stage-ui);padding:13px 18px;min-height:44px;border-radius:999px;border:1px solid var(--stage-btn);background:var(--stage-btn);color:var(--stage-btn-text);cursor:pointer;z-index:3;white-space:nowrap; }
.cocktail-stage.is-open .cocktail-stage__toggle { background:transparent;color:var(--stage-btn); }
.cocktail-stage__toggle:focus-visible { outline:3px solid var(--stage-btn);outline-offset:3px; }
.cocktail-stage.is-reduced * { transition:none!important; }
.cocktail-stage__detail { display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid; }
.cocktail-stage__detail>span { font:400 10px/1.5 monospace;letter-spacing:.12em; }
.cocktail-stage__detail div { font-size:13px; }
.cocktail-stage__detail div span { margin-right:10px; }
.stage-meta { font-size:11px;font-weight:500;line-height:1;padding:5px 7px;border-radius:3px; }
.sr { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
@media (prefers-reduced-motion: reduce) { .cocktail-stage * { transition:none!important; } }