*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html.theme-light {
  --bg: #F3E9D6;
  --surface: #FCF7EC;
  --surface-hover: #FFFDF7;
  --border: #D8C5A8;
  --text: #3E352F;
  --text-secondary: #7A6F63;
  --accent: #8AA17F;
  --accent-secondary: #2C3E50;
  --positive: #6F8C65;
  --negative: #C0472B;
  --warning: #E0A732;
  --rose: #D9A0A0;
  --wood: #A9794F;
  --cream: #FFFFFF;
  --shadow: 0 18px 44px rgba(62, 53, 47, 0.14);
  --sticker-shadow: 0 6px 0 rgba(62, 53, 47, 0.08), 0 18px 30px rgba(62, 53, 47, 0.12);
}

html.theme-dark {
  --bg: #2A2620;
  --surface: #332E27;
  --surface-hover: #3D362E;
  --border: #5A4C3D;
  --text: #F3E9D6;
  --text-secondary: #CDBFA9;
  --accent: #9AAD8F;
  --accent-secondary: #DCE3D3;
  --positive: #9AAD8F;
  --negative: #D45A3E;
  --warning: #E6B84A;
  --rose: #C88C8C;
  --wood: #C79A68;
  --cream: #40382F;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  --sticker-shadow: 0 6px 0 rgba(0, 0, 0, 0.14), 0 18px 30px rgba(0, 0, 0, 0.22);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(224, 167, 50, 0.15), transparent 28rem),
    linear-gradient(90deg, rgba(62, 53, 47, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(62, 53, 47, 0.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 34px 34px, 34px 34px, auto;
  color: var(--text);
  font-family: "Nunito Sans", system-ui, sans-serif;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--text);
  line-height: 1.02;
  letter-spacing: 0;
}

h1 { font-size: clamp(3rem, 8vw, 6.9rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.8vw, 4.15rem); font-weight: 760; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 720; }
p { font-size: 1rem; color: var(--text-secondary); }
img { max-width: 100%; display: block; }
button, a { font: inherit; }

a:focus-visible, button:focus-visible {
  outline: 2px dashed var(--accent-secondary);
  outline-offset: 4px;
}

.skip-to-content {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 10000;
  padding: 10px 14px;
  background: var(--accent-secondary);
  color: var(--surface);
  border-radius: 10px;
  text-decoration: none;
}

.skip-to-content:focus { top: 16px; }

.nav-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 4px;
}

.settings-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 10;
}

.settings-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.settings-dropdown button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.settings-dropdown button:hover { background: var(--surface-hover); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stampIn {
  0% { opacity: 0; transform: rotate(-8deg) scale(1.35); }
  72% { opacity: 1; transform: rotate(-4deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

.animate { animation: fadeInUp 0.62s ease-out both; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.40s; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.page-shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; }

.app-nav {
  position: sticky;
  top: 14px;
  z-index: 30;
  margin: 14px auto 0;
  width: min(1180px, calc(100% - 32px));
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(160, 121, 79, 0.12) 0 10px, transparent 10px 20px),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
  min-width: max-content;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--negative);
  color: #fff;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.38);
}

.brand strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  color: var(--accent-secondary);
}

.brand:hover strong { color: var(--negative); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.nav-links a {
  position: relative;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.92rem;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-links a.active {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 7px 0 rgba(62,53,47,0.08);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  border-bottom: 2px dashed rgba(255,255,255,0.72);
}

.nav-links a:not(.active):hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-secondary);
}

.nav-links a:focus-visible {
  outline-offset: 6px;
}

.nav-tools {
  display: flex;
  gap: 8px;
  padding-right: 4px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-secondary);
  display: grid;
  place-items: center;
}

section { margin: 0; }

[data-route][hidden] { display: none !important; }

.module-screen {
  min-height: calc(100vh - 104px);
  padding-top: 10px;
}

.hero {
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 44px;
  padding: 36px 0 16px;
}

.eyebrow {
  width: fit-content;
  padding: 7px 12px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--negative);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-copy {
  display: grid;
  gap: 24px;
}

.hero-copy p {
  max-width: 660px;
  font-size: 1.16rem;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  font-weight: 900;
  box-shadow: 0 8px 0 rgba(62, 53, 47, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 11px 0 rgba(62, 53, 47, 0.08); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); color: #fff; border-color: color-mix(in srgb, var(--accent) 80%, black); }
.btn.secondary { background: var(--surface); color: var(--accent-secondary); }

.pattern-envelope {
  position: relative;
  min-height: 650px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.45), transparent 36%),
    var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pattern-envelope::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px dashed color-mix(in srgb, var(--accent-secondary) 22%, transparent);
  border-radius: 14px;
  pointer-events: none;
}

.envelope-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  z-index: 2;
}

.pattern-no {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  color: var(--accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stamp {
  width: 112px;
  height: 112px;
  border: 5px double var(--negative);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--negative);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: stampIn 0.5s 0.45s both;
}

.envelope-title {
  position: relative;
  z-index: 2;
  margin-top: 52px;
  max-width: 360px;
}

.envelope-title h2 { font-size: clamp(2.4rem, 4vw, 4.7rem); color: var(--accent-secondary); }

.product-polaroid {
  position: absolute;
  right: 44px;
  bottom: 42px;
  width: min(52%, 420px);
  padding: 16px 16px 56px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sticker-shadow);
  transform: rotate(2deg);
  z-index: 2;
}

.product-polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: #f8f3ea;
}

.polaroid-label {
  position: absolute;
  left: 22px;
  bottom: 15px;
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  color: #3E352F;
}

.tape {
  position: absolute;
  width: 120px;
  height: 34px;
  border: 1px solid rgba(160, 121, 79, 0.25);
  background: color-mix(in srgb, var(--warning) 46%, white);
  opacity: 0.88;
  transform: rotate(-7deg);
  z-index: 4;
}

.product-polaroid .tape { top: -16px; left: 42px; }

.metrics-strip {
  position: relative;
  z-index: 2;
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 430px;
}

.metric {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-hover) 80%, transparent);
}

.metric strong {
  display: block;
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.15rem;
}

.metric span { color: var(--text-secondary); font-size: 0.8rem; font-weight: 800; }

.section-head {
  max-width: 900px;
  margin-bottom: 28px;
  display: grid;
  gap: 12px;
}

.section-head p { font-size: 1.08rem; }

.split-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.split-card {
  min-height: 220px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 0 rgba(62,53,47,0.05);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
}

.split-card b {
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
}

.pill {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.panel {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-header {
  min-height: 64px;
  padding: 18px 22px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.panel-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  color: var(--accent-secondary);
  font-weight: 780;
}

.prep-list {
  display: grid;
  gap: 12px;
}

.prep-list-spaced { margin-top: 20px; }

.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-hover);
  font-weight: 800;
  color: var(--text);
}

.check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
}

.play {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
}

.skills-panel {
  position: relative;
  width: 100vw;
  min-height: calc(100vh - 104px);
  margin: 0 0 0 calc(50% - 50vw);
  padding: clamp(22px, 3.6vh, 38px) clamp(18px, 4vw, 54px) clamp(8px, 2vw, 20px);
  transform-origin: center top;
  animation: quiltBackFlip 0.42s ease both;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.68), transparent 22rem),
    radial-gradient(circle at 82% 24%, rgba(185,216,236,0.42), transparent 26rem),
    linear-gradient(180deg, #EAF6FE 0%, #EAF6FE 34%, #F8FBF3 66%, #F3E9D6 100%);
  isolation: isolate;
}

.skills-route-tools {
  width: min(1320px, 100%);
  margin: 0 auto 12px;
  justify-content: flex-start;
}

.skills-workbench {
  width: min(1220px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.skills-page-title {
  width: min(1220px, 100%);
  margin: clamp(2px, 0.8vh, 8px) auto clamp(14px, 2.4vh, 24px);
  color: var(--accent-secondary);
  text-align: center;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 760;
  line-height: 1;
}

.skill-family-tab {
  min-height: 52px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 24%, transparent);
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 900;
  box-shadow: 0 8px 0 rgba(62,53,47,0.04);
}

.skill-family-tab small {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-secondary);
  font-size: 0.72rem;
}

.skill-family-tab.active {
  background: var(--accent-secondary);
  color: var(--surface);
  border-color: var(--accent-secondary);
}

.skill-family-tab.active small {
  background: rgba(255,255,255,0.18);
  color: var(--surface);
}

.skill-sampler-board {
  min-height: min(590px, calc(100vh - 246px));
  display: flex;
  flex-direction: column;
}

.skill-map {
  --skill-card-height: clamp(72px, 7.4vh, 86px);
  --skill-card-width: clamp(162px, 14vw, 196px);
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(168px, 1fr) minmax(132px, 0.7fr) minmax(126px, 0.62fr);
  grid-template-areas:
    "construction finishing"
    "construction zipper"
    "hand buttonrow";
  gap: clamp(18px, 2vw, 24px);
  min-height: 0;
  margin-top: 0;
}

.skill-map.is-filtered {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(220px, 1fr);
  grid-template-areas: none;
}

.skill-family-cluster {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.2vh, 12px);
  min-height: 0;
  overflow: visible;
  padding: clamp(22px, 2.4vw, 34px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.skill-family-cluster:has(.skill-node:hover) {
  transform: translateY(-2px);
  filter: drop-shadow(0 18px 36px rgba(60,64,67,0.12));
}

.skill-map.is-filtered .skill-family-cluster {
  grid-area: auto;
  min-height: min(520px, calc(100vh - 230px));
}

.skill-map.is-filtered .piece-button,
.skill-map.is-filtered .piece-buttonhole {
  width: 100%;
  margin-left: 0;
}

.piece-construction {
  --piece-bg: #7FA99B;
  --piece-ink: #315B50;
  grid-area: construction;
}

.piece-finishing {
  --piece-bg: #D69A96;
  --piece-ink: #7F3F42;
  grid-area: finishing;
}

.piece-zipper {
  --piece-bg: #8FAABF;
  --piece-ink: #365970;
  grid-area: zipper;
}

.piece-button {
  --piece-bg: #E8D5A7;
  --piece-ink: #87692E;
  grid-area: buttonrow;
}

.piece-buttonhole {
  --piece-bg: #C4B9C9;
  --piece-ink: #6F5D78;
  grid-area: buttonrow;
  margin-left: calc(50% + clamp(4px, 0.6vw, 6px));
}

.piece-hand-stitch {
  --piece-bg: #A4B4B5;
  --piece-ink: #4E6567;
  grid-area: hand;
  grid-template-rows: auto minmax(0, 1fr);
}

.patch-shape {
  position: absolute;
  inset: -1.5%;
  z-index: 0;
  width: 103%;
  height: 103%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 10px 40px rgba(60,64,67,0.08));
}

.patch-shape-surface {
  fill: color-mix(in srgb, var(--piece-bg) 86%, transparent);
  stroke: color-mix(in srgb, var(--piece-bg) 58%, rgba(255,255,255,0.4));
  stroke-width: 0.8px;
}

.patch-stitch {
  fill: none;
  stroke: rgba(255, 248, 232, 0.88);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
  stroke-dasharray: 1.5 2.5 1.5 5;
}

.patch-stitch-b {
  opacity: 0.48;
  transform: translate(1.1px, 1.2px);
}

.skill-family-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: color-mix(in srgb, var(--piece-ink) 86%, var(--accent-secondary));
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.skill-family-name {
  display: grid;
  gap: 1px;
}

.skill-family-name b {
  font-size: clamp(0.8rem, 1vw, 0.96rem);
  line-height: 1;
}

.skill-family-title span {
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.1;
  text-transform: none;
}

.skill-family-title span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
}

.skill-swatch-list {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  grid-auto-rows: var(--skill-card-height);
  gap: clamp(8px, 1.15vh, 12px);
  min-height: 0;
}

.piece-construction .skill-swatch-list {
  grid-template-rows: repeat(3, var(--skill-card-height));
}

.piece-construction .skill-node {
  min-height: var(--skill-card-height);
  height: var(--skill-card-height);
}

.piece-finishing .skill-swatch-list,
.piece-zipper .skill-swatch-list {
  align-content: center;
}

.piece-hand-stitch .skill-swatch-list {
  align-content: center;
}

.skill-swatch-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--skill-card-width)));
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1.05vw, 12px);
  min-width: 0;
}

.piece-button,
.piece-buttonhole {
  width: calc(50% - clamp(4px, 0.6vw, 6px));
}

.piece-button .skill-swatch-row,
.piece-buttonhole .skill-swatch-row,
.piece-hand-stitch .skill-swatch-row {
  grid-template-columns: minmax(0, var(--skill-card-width));
}

.skill-family-placeholder .skill-node::before {
  content: "New crafting inspirations coming soon...";
  position: absolute;
  inset: 7px;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 2px dashed rgba(0,0,0,0.1);
  border-radius: 12px;
  background:
    repeating-linear-gradient(-18deg, rgba(62,53,47,0.045) 0 1px, transparent 1px 10px),
    rgba(255,255,255,0.18);
  color: color-mix(in srgb, var(--piece-ink) 86%, var(--text-secondary));
  font-family: "Caveat", cursive;
  font-size: clamp(0.9rem, 1.2vw, 1.18rem);
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.skill-family-placeholder .skill-node:hover::before {
  opacity: 1;
  transform: scale(1);
}

.skill-node {
  position: relative;
  width: var(--skill-card-width);
  max-width: 100%;
  min-width: 0;
  min-height: var(--skill-card-height);
  height: var(--skill-card-height);
  padding: clamp(9px, 1vw, 12px);
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.5), transparent 54%),
    color-mix(in srgb, var(--surface) 72%, var(--piece-bg));
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 2px 12px rgba(255,255,255,0.42),
    inset 0 -2px 10px rgba(62,53,47,0.045),
    0 8px 24px rgba(60,64,67,0.055);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.skill-node:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 30px rgba(60,64,67,0.12);
}

.skill-node.selected {
  box-shadow:
    inset 0 2px 12px rgba(255,255,255,0.42),
    inset 0 -2px 10px rgba(62,53,47,0.045),
    0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent),
    0 10px 28px rgba(60,64,67,0.08);
}

.skill-node.status-mastered {
  padding-right: 42px;
  background:
    radial-gradient(circle at calc(100% - 22px) 15px, rgba(255,255,255,0.54), transparent 38px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 6px, rgba(130,92,20,0.055) 6px 12px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 7px, rgba(130,92,20,0.04) 7px 14px),
    linear-gradient(145deg, #F8EEC7 0%, #E8D07A 52%, #D9B85E 100%);
  color: #4C3512;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,232,0.76),
    inset 0 0 0 3px rgba(166,120,28,0.16),
    inset 0 -4px 10px rgba(112,76,15,0.1),
    0 0 0 1px rgba(255,231,145,0.34),
    0 14px 30px rgba(198,150,45,0.16),
    0 8px 24px rgba(60,64,67,0.055);
}

.skill-node.status-mastered::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed #C6962D;
  border-radius: 10px;
  pointer-events: none;
}

.skill-node.status-mastered::before {
  content: "";
  position: absolute;
  inset: -45% -20%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.38) 48%, transparent 62%);
  transform: translateX(-62%);
  opacity: 0;
  pointer-events: none;
}

.skill-node.status-mastered:hover::before {
  animation: jacquardSheen 1.05s ease;
}

.skill-node.status-learning,
.skill-node.status-touched {
  padding-bottom: clamp(18px, 1.7vw, 22px);
  background:
    radial-gradient(circle at calc(100% - 34px) 24px, rgba(255,228,122,0.5), transparent 46px),
    linear-gradient(135deg, rgba(255,255,255,0.52), transparent 48%),
    linear-gradient(145deg,
      color-mix(in srgb, #FF6F61 20%, var(--surface)),
      color-mix(in srgb, var(--piece-bg) 44%, var(--surface)));
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,0.4),
    inset 0 -3px 8px rgba(62,53,47,0.08),
    0 0 0 1px rgba(255,111,97,0.26),
    0 0 28px rgba(255,197,61,0.24),
    0 10px 24px rgba(60,64,67,0.08);
}

.skill-node.status-reference {
  opacity: 0.92;
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,0.55) 0 1px, transparent 1.8px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.32) 0 6px, rgba(128,132,128,0.045) 6px 12px),
    linear-gradient(145deg, #F4F2ED 0%, #ECECE8 58%, #D9DAD7 100%);
  color: #6C706C;
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,0.48),
    inset 0 -3px 8px rgba(82,84,78,0.075),
    0 8px 20px rgba(60,64,67,0.045);
}

.skill-node.status-locked,
.skill-node.status-draft {
  opacity: 0.58;
  background:
    radial-gradient(circle at 24% 28%, rgba(255,255,255,0.48) 0 1px, transparent 1.8px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.3) 0 6px, rgba(128,132,128,0.05) 6px 12px),
    linear-gradient(145deg, #F4F2ED 0%, #ECECE8 58%, #D9DAD7 100%);
  color: #6C706C;
  backdrop-filter: blur(2px);
}

.skill-node.status-locked::before,
.skill-node.status-draft::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.36), rgba(255,255,255,0.06));
  pointer-events: none;
}

.skill-node-stitch {
  grid-row: 1;
  margin: 0;
}

.x-stitch {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  position: relative;
  font-family: "Silkscreen", monospace;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--negative);
}

.x-stitch.partial { color: var(--warning); }
.x-stitch.lock { color: var(--text-secondary); opacity: 0.45; }
.status-reference .x-stitch { color: #8A8E88; opacity: 0.62; }

.skill-node-stitch,
.skill-node b,
.skill-node-meta {
  position: relative;
  z-index: 1;
}

.skill-node-stitch,
.skill-node b {
  z-index: 2;
}

.skill-node b {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: break-word;
  white-space: normal;
  color: color-mix(in srgb, var(--piece-ink) 84%, var(--accent-secondary));
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(0.92rem, 1.08vw, 1.14rem);
  line-height: 1.08;
  text-wrap: balance;
}

.skill-node.status-learning b,
.skill-node.status-touched b {
  color: #1A2942;
  font-family: "Sora", "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow:
    0.5px 0.5px 0 rgba(0,0,0,0.15),
    -0.5px -0.5px 0 rgba(255,255,255,0.4);
}

.skill-node.status-mastered b {
  color: #5B3D10;
  text-shadow:
    0 1px 0 rgba(255,250,225,0.46),
    0 0 7px rgba(255,235,170,0.34);
}

.skill-node.status-reference b,
.skill-node.status-locked b,
.skill-node.status-draft b {
  color: #676C67;
}

.skill-node-meta,
.skill-node-source {
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
}

.skill-node-meta {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  padding: 0;
  background: color-mix(in srgb, var(--piece-ink) 46%, var(--surface));
  color: transparent;
  font-size: 0;
  white-space: nowrap;
}

.status-mastered .skill-node-meta {
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
  overflow: visible;
  border: 1px dashed rgba(179,125,19,0.62);
  border-radius: 9px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.92) 0 2px, transparent 2.8px),
    linear-gradient(135deg, rgba(255,255,255,0.52), transparent 46%),
    #F8E7A9;
  color: #B77710;
  font-size: 0;
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,0.7),
    inset 0 -2px 3px rgba(129,81,9,0.1),
    0 0 0 2px rgba(255,246,202,0.42),
    0 5px 10px rgba(119,78,12,0.14);
  transform: rotate(-7deg);
  isolation: isolate;
}

.status-mastered .skill-node-meta::before {
  content: "\2726";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #B77710;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.72),
    0 0 8px rgba(255,216,98,0.56);
}

.status-mastered .skill-node-meta::after {
  content: none;
}

.status-learning .skill-node-meta,
.status-touched .skill-node-meta {
  --thread-progress: 68%;
  --needle-size: 27px;
  top: auto;
  right: 10px;
  bottom: 7px;
  z-index: 1;
  width: 64px;
  height: 24px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-3deg);
  pointer-events: none;
}

.status-touched .skill-node-meta {
  --thread-progress: 42%;
}

.status-learning .skill-node-meta::before,
.status-touched .skill-node-meta::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 13px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #1A2942 0 5px, transparent 5px 8px) left / var(--thread-progress) 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(26,41,66,0.22) 0 5px, transparent 5px 8px) left / 100% 100% no-repeat;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.52),
    0 0 5px rgba(26,41,66,0.1);
}

.status-learning .skill-node-meta::after,
.status-touched .skill-node-meta::after {
  content: "\1FAA1";
  position: absolute;
  left: calc(var(--thread-progress) - (var(--needle-size) / 2));
  top: -2px;
  width: var(--needle-size);
  height: var(--needle-size);
  display: grid;
  place-items: center;
  color: #1A2942;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-size: 1.24rem;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 2px 5px rgba(26,41,66,0.18);
  filter: drop-shadow(0 2px 2px rgba(26,41,66,0.14));
  transform: rotate(26deg);
}
.status-reference .skill-node-meta,
.status-locked .skill-node-meta,
.status-draft .skill-node-meta {
  display: none;
}

.skill-node-source {
  display: none;
}

@keyframes jacquardSheen {
  0% { opacity: 0; transform: translateX(-62%); }
  24% { opacity: 0.62; }
  100% { opacity: 0; transform: translateX(62%); }
}

@media (prefers-reduced-motion: reduce) {
  .skill-node.status-mastered:hover::before {
    animation: none;
  }
}

.skill-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  place-items: center;
  padding: 22px;
}

.skill-detail-modal.open {
  display: grid;
}

.skill-detail-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(42,38,32,0.48), rgba(42,38,32,0.28)),
    rgba(42,38,32,0.16);
  backdrop-filter: blur(8px);
}

.skill-detail {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 28%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--warning) 18%, transparent) 0 86px, transparent 86px),
    repeating-linear-gradient(90deg, rgba(138,161,127,0.12) 0 28px, rgba(217,160,160,0.10) 28px 56px),
    var(--surface);
  box-shadow: 0 28px 80px rgba(42,38,32,0.34), 0 0 0 8px rgba(255,255,255,0.18);
}

.skill-detail::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 26%, transparent);
  border-radius: 18px;
  pointer-events: none;
}

.skill-detail::after {
  content: "";
  position: absolute;
  left: 34px;
  top: -12px;
  width: 118px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--wood) 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 42%, var(--surface));
  box-shadow: 0 8px 18px rgba(62,53,47,0.12);
  transform: rotate(-2deg);
}

.skill-detail-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 24%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--accent-secondary);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(62,53,47,0.12);
}

.skill-detail-close:hover {
  background: var(--negative);
  color: #fff;
  border-color: var(--negative);
}

#skillDetailBody {
  position: relative;
  z-index: 1;
}

.skill-detail-header {
  display: grid;
  gap: 7px;
}

.skill-detail-kicker {
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.skill-detail h3 {
  margin: 0;
  padding-right: 48px;
  color: var(--accent-secondary);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}

.skill-status-pill {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.skill-status-pill.status-mastered { background: var(--accent); color: #fff; }
.skill-status-pill.status-learning,
.skill-status-pill.status-touched { background: var(--warning); color: var(--accent-secondary); }
.skill-status-pill.status-locked,
.skill-status-pill.status-draft { background: color-mix(in srgb, var(--surface) 72%, #777); color: var(--text-secondary); }

.skill-detail-summary {
  margin: 16px 0;
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
}

.skill-detail-rows {
  display: grid;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

.skill-detail-row {
  display: grid;
  gap: 8px;
}

.skill-detail-row > span:first-child {
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.skill-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-link-chip,
.skill-manual-toggle {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--surface-hover);
  color: var(--accent-secondary);
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.skill-muted {
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 800;
}

.skill-manual-toggle {
  width: 100%;
  margin-top: 16px;
  border-color: color-mix(in srgb, var(--accent-secondary) 32%, var(--border));
}

.skill-manual-toggle[aria-pressed="true"] {
  background: var(--accent-secondary);
  color: var(--surface);
}

.skill-manual-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.skill-modal-open {
  overflow: hidden;
}

.map-project-node.focus-pulse {
  animation: mapFocusPulse 1.1s ease;
}

.studio-screen {
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  min-height: calc(100vh - 104px);
  padding: clamp(30px, 6vh, 40px) clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(252,247,236,0.72) 0 18%, transparent 18%),
    linear-gradient(90deg, rgba(62,53,47,0.035) 1px, transparent 1px),
    linear-gradient(rgba(62,53,47,0.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 34px 34px, 34px 34px, auto;
}

.studio-room {
  --studio-preview-min: 520px;
  position: relative;
  width: min(1360px, 100%);
  height: min(820px, calc(100svh - 124px));
  min-height: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "stage"
    "controls";
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
  overflow: hidden;
}

.studio-room::before {
  content: "";
  display: none;
}

.studio-room::after {
  content: "";
  display: none;
}

.studio-wall {
  position: absolute;
  inset: 0 0 118px;
  z-index: 1;
  pointer-events: none;
}

.studio-wall,
.studio-window,
.sewing-table,
.dress-form,
.woven-rug {
  display: none;
}

.atelier-moodboard {
  position: absolute;
  left: 23%;
  top: 54px;
  width: 156px;
  min-height: 126px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-hover) 84%, transparent);
  box-shadow: 0 14px 28px rgba(62,53,47,0.10);
  transform: rotate(-2deg);
}

.mood-swatch {
  min-height: 42px;
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 8px 14px rgba(62,53,47,0.10);
}

.mood-swatch.linen { background: #EADCC1; }
.mood-swatch.sage { background: var(--accent); }
.mood-swatch.rose { background: var(--rose); }
.mood-swatch.mustard { background: var(--warning); }

.wall-vanity-mirror {
  position: absolute;
  right: 24%;
  top: 58px;
  width: 126px;
  height: 156px;
  border: 10px solid color-mix(in srgb, var(--surface) 82%, white);
  border-radius: 999px 999px 42px 42px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), transparent 46%),
    color-mix(in srgb, var(--accent) 14%, #fff);
  box-shadow: inset 0 0 0 1px rgba(62,53,47,0.10), 0 16px 30px rgba(62,53,47,0.10);
}

.wall-vanity-mirror::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 88px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--wood);
}

.thread-shelf {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 230px;
  height: 78px;
  transform: translateX(-50%);
  border-bottom: 9px solid var(--wood);
}

.thread-spool {
  position: absolute;
  bottom: 8px;
  width: 28px;
  height: 48px;
  border-radius: 7px;
  border: 5px solid color-mix(in srgb, var(--surface) 85%, white);
  box-shadow: 0 8px 14px rgba(62,53,47,0.12);
}

.thread-spool:nth-child(1) { left: 34px; }
.thread-spool:nth-child(2) { left: 78px; }
.thread-spool:nth-child(3) { left: 122px; }
.thread-spool:nth-child(4) { left: 166px; }
.thread-spool.sage { background: var(--accent); }
.thread-spool.red { background: var(--negative); }
.thread-spool.mustard { background: var(--warning); }
.thread-spool.linen { background: #EADCC1; }

.wall-style-cards {
  position: absolute;
  right: 48px;
  top: 42px;
  display: flex;
  gap: 10px;
}

.wall-style-cards span {
  width: 70px;
  height: 82px;
  padding: 6px 6px 20px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, transparent 64%, rgba(169,121,79,0.18) 64%),
    radial-gradient(circle at 50% 38%, var(--rose) 0 16px, transparent 17px),
    color-mix(in srgb, var(--accent) 14%, #fff);
  box-shadow: var(--sticker-shadow);
}

.wall-style-cards span:first-child { transform: rotate(-4deg); }
.wall-style-cards span:last-child {
  transform: rotate(3deg);
  background:
    linear-gradient(180deg, transparent 64%, rgba(224,167,50,0.20) 64%),
    radial-gradient(circle at 50% 38%, #F2D0B0 0 15px, transparent 16px),
    color-mix(in srgb, var(--warning) 14%, #fff);
}

.studio-closet,
.studio-snapshot,
.studio-inventory {
  position: relative;
  z-index: 4;
}

.studio-closet {
  grid-area: closet;
  align-self: stretch;
  margin: clamp(14px, 2vw, 24px) 0 0 clamp(14px, 2vw, 24px);
  padding: 18px 12px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 12px 28px rgba(62,53,47,0.10);
  backdrop-filter: blur(12px);
}

.gender-toggle {
  min-height: 42px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.gender-toggle button {
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 900;
}

.gender-toggle button.active {
  background: var(--accent-secondary);
  color: var(--surface);
}

.closet-rail {
  height: 12px;
  margin: 0 10px 4px;
  border-radius: 999px;
  background: var(--wood);
  box-shadow: 0 12px 0 color-mix(in srgb, var(--wood) 45%, transparent);
}

.outfit-card,
.inventory-item {
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.outfit-card:hover,
.inventory-item:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
}

.outfit-card.active,
.inventory-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.outfit-card {
  min-height: 78px;
  padding: 10px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.outfit-swatch,
.inventory-icon {
  width: 52px;
  height: 52px;
  border: 4px solid #fff;
  border-radius: 14px;
  box-shadow: 0 8px 16px rgba(62,53,47,0.12);
}

.outfit-swatch.apron {
  background:
    linear-gradient(90deg, transparent 43%, rgba(255,255,255,0.52) 43% 57%, transparent 57%),
    var(--accent);
}

.outfit-swatch.gingham,
.inventory-icon.gingham {
  background:
    repeating-linear-gradient(45deg, rgba(44,62,80,0.18) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, #AFC5DA 0 10px, #fff 10px 20px);
}

.outfit-swatch.market {
  background:
    radial-gradient(circle, var(--negative) 1.5px, transparent 2px),
    linear-gradient(135deg, var(--warning), #F6E6D0 56%, var(--negative));
  background-size: 12px 12px, auto;
}

.studio-stage {
  --studio-pan-x: 0px;
  grid-area: stage;
  position: relative;
  min-height: var(--studio-preview-min);
  align-self: stretch;
  z-index: 1;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.studio-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 56%, transparent 0 38%, rgba(62,53,47,0.08) 78%),
    linear-gradient(180deg, rgba(252,247,236,0.02), transparent 36%, rgba(62,53,47,0.10)),
    url("../assets/Resources/studio_bg_day.webp") calc(50% + var(--studio-pan-x, 0px)) center / cover no-repeat,
    var(--surface);
  transition: background-position 0.42s cubic-bezier(.2,.82,.2,1), filter 0.32s ease;
}

.studio-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(62,53,47,0.17), transparent 16%, transparent 84%, rgba(62,53,47,0.14)),
    linear-gradient(180deg, rgba(252,247,236,0.10), transparent 22%, rgba(62,53,47,0.06));
}

.studio-explore-close,
.studio-explore-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.studio-explore-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  z-index: 30;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.9);
  background: rgba(62,53,47,0.14);
  box-shadow: 0 14px 32px rgba(62,53,47,0.18);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: opacity 0.22s ease, visibility 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.studio-explore-close:hover {
  background: rgba(62,53,47,0.26);
  transform: translateY(-1px);
}

.studio-explore-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
}

.studio-hotspot {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 50%;
  background: rgba(255,255,255,0.34);
  box-shadow:
    0 0 0 0 rgba(255,255,255,0.34),
    0 0 24px rgba(252,247,236,0.42);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: studioHotspotPulse 2.4s ease-in-out infinite;
}

.studio-hotspot::before,
.studio-hotspot::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.88);
}

.studio-hotspot::after {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
}

.studio-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.14);
  background: rgba(252,247,236,0.52);
  box-shadow:
    0 0 0 12px rgba(255,255,255,0.10),
    0 0 34px rgba(252,247,236,0.62);
}

.sewing-machine-hotspot {
  width: 18px;
  height: 18px;
}

@keyframes studioHotspotPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.96);
    box-shadow:
      0 0 0 0 rgba(255,255,255,0.22),
      0 0 20px rgba(252,247,236,0.34);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      0 0 0 12px rgba(255,255,255,0),
      0 0 34px rgba(252,247,236,0.58);
  }
}

.studio-showcase {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: clamp(58px, 8vw, 88px) clamp(22px, 6vw, 82px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.studio-showcase.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.studio-showcase-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 24% 40%, rgba(252,247,236,0.18), transparent 28%),
    rgba(34,29,24,0.30);
  backdrop-filter: blur(4px);
  cursor: default;
}

.studio-showcase-window {
  position: relative;
  width: min(430px, calc(100vw - 44px));
  max-height: min(680px, calc(100svh - 92px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.44);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(252,247,236,0.88) 42%, rgba(230,211,182,0.90)),
    var(--surface);
  box-shadow:
    0 26px 74px rgba(40,30,20,0.32),
    inset 0 0 0 6px rgba(255,255,255,0.24);
  color: var(--text);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.24s ease;
}

.studio-showcase.open .studio-showcase-window {
  transform: translateY(0) scale(1);
}

.studio-showcase-window::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(134,96,64,0.24);
  border-radius: 18px;
  pointer-events: none;
}

.studio-showcase-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--accent-secondary);
  background: rgba(255,255,255,0.58);
  box-shadow: 0 10px 22px rgba(62,53,47,0.14);
  cursor: pointer;
}

.studio-showcase-header {
  position: relative;
  z-index: 1;
  padding: 8px 46px 12px 4px;
}

.studio-showcase-header span {
  display: block;
  color: #9B6E55;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-showcase-header h3 {
  margin: 4px 0 6px;
  color: var(--ink);
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1.72rem, 4vw, 2.24rem);
  line-height: 0.98;
}

.studio-showcase-header p {
  max-width: 29rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
}

.studio-showcase-case {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(134,96,64,0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.50), rgba(242,226,200,0.54)),
    repeating-linear-gradient(90deg, rgba(128,91,59,0.05) 0 8px, transparent 8px 16px);
  box-shadow: inset 0 0 18px rgba(119,80,49,0.08);
}

.studio-showcase-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.68);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.88), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(252,247,236,0.62));
  box-shadow:
    0 18px 36px rgba(62,53,47,0.18),
    inset 0 -10px 24px rgba(167,119,75,0.08);
}

.studio-showcase-art {
  min-height: 246px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(126,85,52,0.16), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(236,219,190,0.44));
  overflow: hidden;
}

.studio-showcase-art img {
  width: min(96%, 324px);
  height: auto;
  max-height: 330px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(82,55,34,0.20));
}

.studio-showcase-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.studio-showcase-caption b {
  color: var(--ink);
  font-size: 0.95rem;
}

@media (max-width: 680px) {
  .studio-showcase {
    align-items: center;
    justify-items: center;
    padding: max(58px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }

  .studio-showcase-window {
    width: min(390px, calc(100vw - 28px));
    max-height: calc(100svh - 78px);
    padding: 14px;
    border-radius: 20px;
  }

  .studio-showcase-window::before {
    inset: 8px;
    border-radius: 15px;
  }

  .studio-showcase-header {
    padding: 8px 42px 10px 3px;
  }

  .studio-showcase-header h3 {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
  }

  .studio-showcase-header p {
    font-size: 0.84rem;
  }

  .studio-showcase-case {
    padding: 10px;
  }

  .studio-showcase-card {
    padding: 10px;
  }

  .studio-showcase-art {
    min-height: 214px;
  }

  .studio-showcase-art img {
    width: min(100%, 286px);
    max-height: 282px;
  }

  .studio-showcase-caption {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }
}

.studio-floating-actions {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 8;
  display: flex;
  gap: 10px;
}

.studio-floating-actions .icon-btn {
  width: 48px;
  height: 48px;
  color: var(--accent-secondary);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-hover) 86%, transparent);
  box-shadow: 0 10px 22px rgba(62,53,47,0.16);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.studio-control-deck {
  grid-area: controls;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), color-mix(in srgb, var(--surface) 92%, white)),
    var(--surface);
  box-shadow: 0 -18px 34px rgba(62,53,47,0.10);
}

.studio-category-tabs {
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(252,247,236,0.96)),
    var(--surface-hover);
}

.studio-category-tab {
  position: relative;
  min-width: 0;
  min-height: 86px;
  padding: 9px 8px 12px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 54%, transparent);
  background: transparent;
  color: #8A6653;
  cursor: pointer;
  font-weight: 800;
  text-align: center;
  transition: color 0.18s ease, background 0.18s ease;
}

.studio-category-tab:first-child {
  border-left: 0;
}

.studio-category-tab svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio-category-tab span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: currentColor;
  font-size: clamp(0.68rem, 1.2vw, 0.9rem);
  line-height: 1.1;
}

.studio-category-tab .label-short {
  display: none;
}

.studio-category-tab:hover,
.studio-category-tab.active {
  color: var(--negative);
  background: rgba(255,255,255,0.42);
}

.studio-category-tab.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--rose) 72%, var(--negative));
}

.studio-preset-drawer {
  min-height: 142px;
  max-height: 188px;
  overflow: auto;
}

.studio-preset-panel {
  padding: 16px clamp(16px, 2vw, 24px) 18px;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 12px;
}

.preset-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
}

.preset-card {
  min-width: 0;
  min-height: 76px;
  padding: 10px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-hover) 92%, white);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(62,53,47,0.08);
  cursor: pointer;
  font-weight: 900;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.preset-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
}

.preset-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), 0 8px 18px rgba(62,53,47,0.08);
}

.preset-card.muted,
.preset-card:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}

.preset-card > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.preset-avatar,
.skin-chip,
.skin-preview,
.face-chip,
.hair-chip,
.accessory-chip,
.pet-chip {
  position: relative;
  width: 54px;
  height: 54px;
  border: 4px solid #fff;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, white);
  box-shadow: 0 8px 16px rgba(62,53,47,0.12);
  overflow: hidden;
}

.preset-avatar::before,
.face-chip::before,
.hair-chip::before,
.pet-chip::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.skin-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.18);
  pointer-events: none;
}

.preset-avatar::before {
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F2D0B0;
  box-shadow: 0 24px 0 8px var(--accent);
}

.preset-avatar.male::before {
  box-shadow: 0 24px 0 10px color-mix(in srgb, var(--accent-secondary) 65%, white);
}

.skin-chip.tone-1 { background: #F2D0B0; }
.skin-chip.tone-2 { background: #8C5A36; }

.face-chip::before {
  top: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 42%, var(--accent-secondary) 0 2px, transparent 2.5px),
    radial-gradient(circle at 64% 42%, var(--accent-secondary) 0 2px, transparent 2.5px),
    radial-gradient(ellipse at 34% 64%, rgba(217,160,160,0.72) 0 5px, transparent 5.5px),
    radial-gradient(ellipse at 66% 64%, rgba(217,160,160,0.72) 0 5px, transparent 5.5px),
    #F2D0B0;
}

.face-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 31px;
  width: 14px;
  height: 7px;
  transform: translateX(-50%);
  border-bottom: 2px solid var(--negative);
  border-radius: 50%;
}

.face-chip.calm::after {
  width: 12px;
  height: 2px;
  border-bottom: 2px solid var(--accent-secondary);
}

.face-chip.bright::before,
.face-chip.cheery::before {
  background:
    radial-gradient(circle at 36% 42%, var(--accent-secondary) 0 2.5px, transparent 3px),
    radial-gradient(circle at 64% 42%, var(--accent-secondary) 0 2.5px, transparent 3px),
    radial-gradient(ellipse at 34% 64%, rgba(217,160,160,0.82) 0 5px, transparent 5.5px),
    radial-gradient(ellipse at 66% 64%, rgba(217,160,160,0.82) 0 5px, transparent 5.5px),
    #F2D0B0;
}

.hair-chip {
  background:
    radial-gradient(circle at 50% 36%, #F2D0B0 0 17px, transparent 17.5px),
    color-mix(in srgb, var(--surface) 78%, white);
}

.hair-chip::before {
  top: 7px;
  width: 40px;
  height: 23px;
  border-radius: 999px 999px 16px 16px;
  background: #6F503B;
}

.hair-chip.bun::after,
.hair-chip.waves::after,
.hair-chip.crop::after {
  content: "";
  position: absolute;
  background: #6F503B;
}

.hair-chip.bun::after {
  left: 18px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.hair-chip.waves::after {
  left: 8px;
  right: 8px;
  top: 24px;
  height: 18px;
  border-radius: 6px 6px 18px 18px;
}

.hair-chip.crop::after {
  left: 13px;
  top: 13px;
  width: 28px;
  height: 15px;
  border-radius: 999px 999px 8px 8px;
}

.outfit-swatch.locked {
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(62,53,47,0.18) 44% 56%, transparent 56%),
    color-mix(in srgb, var(--border) 56%, white);
}

.accessory-chip.tote {
  background:
    linear-gradient(180deg, transparent 0 22%, #EADCC1 22% 100%);
}

.accessory-chip.tote::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 7px;
  width: 22px;
  height: 18px;
  border: 4px solid #EADCC1;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.accessory-chip.bow {
  background:
    radial-gradient(circle at 50% 50%, var(--negative) 0 7px, transparent 7.5px),
    radial-gradient(ellipse at 32% 50%, var(--negative) 0 12px, transparent 12.5px),
    radial-gradient(ellipse at 68% 50%, var(--negative) 0 12px, transparent 12.5px),
    color-mix(in srgb, var(--surface) 72%, white);
}

.accessory-chip.pin {
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,0.6) 47% 53%, transparent 53%),
    var(--negative);
}

.accessory-chip.none {
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(62,53,47,0.24) 44% 56%, transparent 56%),
    color-mix(in srgb, var(--surface) 72%, white);
}

.pet-chip.none {
  background:
    radial-gradient(circle at 50% 50%, rgba(62,53,47,0.18) 0 8px, transparent 8.5px),
    color-mix(in srgb, var(--surface) 72%, white);
}

.pet-chip::before {
  top: 14px;
  width: 28px;
  height: 24px;
  border-radius: 50% 50% 44% 44%;
  background: #9A7B60;
}

.pet-chip.cat::after,
.pet-chip.bunny::after,
.pet-chip.dog::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 9px;
  width: 22px;
  height: 16px;
  background: #9A7B60;
  clip-path: polygon(0 100%, 18% 0, 40% 100%, 60% 100%, 82% 0, 100% 100%);
}

.pet-chip.bunny::after {
  left: 17px;
  top: 4px;
  height: 24px;
  clip-path: polygon(0 100%, 14% 0, 34% 0, 45% 100%, 55% 100%, 66% 0, 86% 0, 100% 100%);
}

.pet-chip.dog::after {
  left: 13px;
  top: 11px;
  width: 28px;
  height: 14px;
  border-radius: 999px;
  clip-path: none;
}

.studio-window {
  position: absolute;
  left: 50%;
  top: 40px;
  width: min(420px, 54%);
  height: 210px;
  transform: translateX(-50%);
  border: 12px solid color-mix(in srgb, var(--surface) 86%, white);
  border-radius: 28px 28px 18px 18px;
  background:
    linear-gradient(90deg, transparent calc(50% - 4px), rgba(62,53,47,0.16) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)),
    linear-gradient(180deg, rgba(138,161,127,0.30), rgba(224,167,50,0.22)),
    #DCE7D5;
  box-shadow: inset 0 0 0 1px rgba(62,53,47,0.10), 0 18px 34px rgba(62,53,47,0.08);
}

.sewing-table {
  position: absolute;
  right: 7%;
  bottom: 128px;
  width: 220px;
  height: 116px;
  border-radius: 16px;
  background: var(--wood);
  box-shadow: 0 18px 26px rgba(62,53,47,0.16);
}

.sewing-table::before,
.sewing-table::after {
  content: "";
  position: absolute;
  bottom: -70px;
  width: 18px;
  height: 72px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wood) 72%, #3E352F);
}

.sewing-table::before { left: 24px; }
.sewing-table::after { right: 24px; }

.sewing-machine {
  position: absolute;
  left: 28px;
  top: -48px;
  width: 118px;
  height: 76px;
  border-radius: 38px 20px 16px 16px;
  background: #fff;
  box-shadow: inset 0 -8px 0 rgba(138,161,127,0.18), 0 12px 18px rgba(62,53,47,0.12);
}

.sewing-machine::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 18px;
  width: 28px;
  height: 28px;
  border: 5px solid var(--accent-secondary);
  border-radius: 50%;
}

.fabric-rolls {
  position: absolute;
  right: 16px;
  top: 18px;
  display: grid;
  gap: 8px;
}

.fabric-rolls span {
  width: 54px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.56);
}

.fabric-rolls span:nth-child(2) { background: var(--warning); }
.fabric-rolls span:nth-child(3) { background: var(--negative); }

.dress-form {
  position: absolute;
  left: 9%;
  bottom: 152px;
  width: 82px;
  height: 168px;
  border-radius: 42px 42px 18px 18px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(62,53,47,0.10) 46% 54%, transparent 54%),
    color-mix(in srgb, var(--warning) 55%, #fff);
  border: 6px solid color-mix(in srgb, var(--surface) 70%, white);
  box-shadow: var(--sticker-shadow);
}

.dress-form::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -84px;
  width: 8px;
  height: 84px;
  transform: translateX(-50%);
  background: var(--wood);
}

.dress-form::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -92px;
  width: 72px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--wood);
}

.woven-rug {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: min(420px, 64%);
  height: 112px;
  transform: translateX(-50%) perspective(420px) rotateX(56deg);
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.42) 0 10px, transparent 10px 20px),
    var(--accent);
  box-shadow: 0 18px 26px rgba(62,53,47,0.16);
}

.avatar-doll {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 5;
  width: 250px;
  height: 430px;
  transform: translateX(-50%);
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 18px rgba(62,53,47,0.16));
}

.avatar-image-doll {
  top: 44%;
  width: clamp(250px, 20vw, 280px);
  height: clamp(500px, 61svh, 530px);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 20px rgba(62,53,47,0.18));
}

.avatar-image-doll > :not(.avatar-base-image) {
  display: none;
}

.avatar-base-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  pointer-events: none;
}

.avatar-shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 174px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(62,53,47,0.18);
}

.avatar-head,
.avatar-body,
.avatar-leg,
.avatar-arm,
.avatar-neck,
.avatar-bag,
.avatar-prop {
  position: absolute;
}

.avatar-head {
  left: 50%;
  top: 8px;
  z-index: 8;
  width: 154px;
  height: 144px;
  transform: translateX(-50%);
  border: 6px solid color-mix(in srgb, var(--surface) 86%, white);
  border-radius: 48% 48% 44% 44%;
  background: #F2D0B0;
  box-shadow: inset 0 -8px 0 rgba(160,121,79,0.12), 0 12px 20px rgba(62,53,47,0.10);
}

.avatar-hair {
  position: absolute;
  left: 8px;
  right: 8px;
  top: -8px;
  height: 52px;
  border-radius: 56px 56px 22px 22px;
  background: #6F503B;
}

.avatar-hair::before,
.avatar-hair::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 26px;
  height: 44px;
  border-radius: 999px;
  background: #6F503B;
}

.avatar-hair::before { left: -3px; transform: rotate(10deg); }
.avatar-hair::after { right: -3px; transform: rotate(-10deg); }

.avatar-eye {
  position: absolute;
  top: 70px;
  width: 12px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-secondary);
}

.avatar-eye.left { left: 48px; }
.avatar-eye.right { right: 48px; }

.avatar-cheek {
  position: absolute;
  top: 91px;
  width: 22px;
  height: 12px;
  border-radius: 50%;
  background: rgba(217,160,160,0.62);
}

.avatar-cheek.left { left: 28px; }
.avatar-cheek.right { right: 28px; }

.avatar-mouth {
  position: absolute;
  left: 50%;
  top: 96px;
  width: 24px;
  height: 12px;
  transform: translateX(-50%);
  border-bottom: 3px solid var(--accent-secondary);
  border-radius: 50%;
}

.avatar-bow {
  position: absolute;
  right: -14px;
  top: 28px;
  width: 46px;
  height: 30px;
  opacity: 0;
  transform: rotate(12deg);
}

.avatar-bow::before,
.avatar-bow::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 28px;
  border-radius: 50% 12px 50% 12px;
  background: var(--negative);
}

.avatar-bow::before { left: 0; transform: rotate(28deg); }
.avatar-bow::after { right: 0; transform: rotate(-28deg); }

.studio-room[data-gender="female"] .avatar-hair::before,
.studio-room[data-gender="female"] .avatar-hair::after {
  top: 24px;
  width: 31px;
  height: 74px;
  border-radius: 999px 999px 18px 18px;
}

.studio-room[data-gender="female"] .avatar-body {
  width: 124px;
  border-radius: 54px 54px 36px 36px;
}

.studio-room[data-gender="female"][data-look="apron"] .avatar-bow,
.studio-room[data-gender="female"][data-look="market"] .avatar-bow {
  opacity: 0.92;
  transform: rotate(12deg) scale(0.74);
}

.studio-room[data-gender="male"] .avatar-hair {
  left: 14px;
  right: 14px;
  height: 42px;
  border-radius: 48px 48px 18px 18px;
}

.studio-room[data-gender="male"] .avatar-hair::before,
.studio-room[data-gender="male"] .avatar-hair::after {
  top: 22px;
  width: 18px;
  height: 30px;
}

.studio-room[data-gender="male"] .avatar-body {
  width: 138px;
  border-radius: 42px 42px 30px 30px;
}

.studio-room[data-gender="male"] .avatar-bow {
  opacity: 0 !important;
}

.studio-room[data-gender="male"] .avatar-cheek {
  opacity: 0.38;
}

.avatar-neck {
  left: 50%;
  top: 138px;
  z-index: 4;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: #E8BE9B;
}

.avatar-body {
  left: 50%;
  top: 166px;
  z-index: 5;
  width: 128px;
  height: 150px;
  transform: translateX(-50%);
  border-radius: 48px 48px 34px 34px;
  background: var(--accent);
  box-shadow: inset 0 -10px 0 rgba(62,53,47,0.10);
  overflow: hidden;
}

.avatar-shirt {
  position: absolute;
  inset: 0;
  background: var(--accent);
}

.avatar-apron {
  position: absolute;
  left: 25px;
  right: 25px;
  top: 38px;
  bottom: 0;
  border-radius: 22px 22px 28px 28px;
  background: #EADCC1;
  border: 3px dashed rgba(62,53,47,0.18);
}

.avatar-pocket {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 44px;
  height: 32px;
  transform: translateX(-50%);
  border-radius: 8px 8px 14px 14px;
  background: rgba(255,255,255,0.58);
  border: 2px dashed rgba(62,53,47,0.18);
}

.avatar-strap {
  position: absolute;
  top: 16px;
  width: 8px;
  height: 72px;
  border-radius: 999px;
  background: #EADCC1;
}

.avatar-strap.left { left: 38px; transform: rotate(-16deg); }
.avatar-strap.right { right: 38px; transform: rotate(16deg); }

.avatar-arm {
  top: 178px;
  z-index: 4;
  width: 42px;
  height: 132px;
  border-radius: 999px;
  background: #F2D0B0;
  transform-origin: center 24px;
}

.avatar-arm.left { left: 42px; transform: rotate(15deg); }
.avatar-arm.right { right: 42px; transform: rotate(-15deg); }

.avatar-arm::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: -3px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F2D0B0;
}

.avatar-leg {
  top: 300px;
  z-index: 3;
  width: 44px;
  height: 92px;
  border-radius: 999px 999px 18px 18px;
  background: color-mix(in srgb, var(--accent-secondary) 72%, #fff);
}

.avatar-leg.left { left: 78px; }
.avatar-leg.right { right: 78px; }

.avatar-leg::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: -10px;
  width: 58px;
  height: 24px;
  border-radius: 999px;
  background: #6F503B;
}

.avatar-bag {
  right: 4px;
  top: 244px;
  z-index: 6;
  width: 58px;
  height: 70px;
  border-radius: 12px 12px 18px 18px;
  background: #EADCC1;
  border: 5px solid #fff;
  box-shadow: 0 10px 18px rgba(62,53,47,0.18);
}

.avatar-bag::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -23px;
  width: 28px;
  height: 30px;
  border: 5px solid #EADCC1;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.avatar-prop {
  left: 10px;
  top: 272px;
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,255,255,0.56) 46% 54%, transparent 54%),
    var(--negative);
  border: 4px solid #fff;
  opacity: 0;
  box-shadow: 0 10px 18px rgba(62,53,47,0.16);
}

.studio-room[data-look="gingham"] .avatar-shirt {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.58) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.58) 0 10px, transparent 10px 20px),
    #AFC5DA;
}

.studio-room[data-look="gingham"] .avatar-apron,
.studio-room[data-look="gingham"] .avatar-pocket,
.studio-room[data-look="gingham"] .avatar-strap,
.studio-room[data-look="gingham"] .avatar-bag {
  opacity: 0;
}

.studio-room[data-look="gingham"] .avatar-bow {
  opacity: 1;
}

.studio-room[data-look="market"] .avatar-shirt {
  background:
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 2px),
    var(--negative);
  background-size: 12px 12px;
}

.studio-room[data-look="market"] .avatar-apron {
  background: var(--warning);
}

.studio-room[data-look="market"] .avatar-bag {
  width: 62px;
  height: 52px;
  top: 260px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--negative) 18%, #EADCC1);
}

.studio-room[data-look="market"] .avatar-prop {
  opacity: 1;
}

.studio-room[data-pose="wave"] .avatar-arm.right {
  transform: rotate(-118deg) translateY(-8px);
}

.studio-room[data-face="bright"] .avatar-eye {
  width: 14px;
  height: 18px;
}

.studio-room[data-face="bright"] .avatar-mouth,
.studio-room[data-face="cheery"] .avatar-mouth {
  width: 32px;
  height: 15px;
  border-bottom-color: var(--negative);
}

.studio-room[data-face="calm"] .avatar-mouth {
  top: 99px;
  width: 18px;
  height: 4px;
  border-bottom-color: var(--accent-secondary);
}

.studio-room[data-face="calm"] .avatar-cheek {
  opacity: 0.36;
}

.studio-room[data-face="cheery"] .avatar-cheek {
  width: 27px;
  height: 14px;
  background: rgba(217,160,160,0.82);
}

.studio-room[data-hair="bun"] .avatar-hair {
  top: -16px;
  left: 20px;
  right: 20px;
  height: 58px;
  border-radius: 60px 60px 24px 24px;
  box-shadow: 0 -16px 0 -2px #6F503B;
}

.studio-room[data-hair="bun"] .avatar-hair::before,
.studio-room[data-hair="bun"] .avatar-hair::after {
  top: 40px;
  width: 22px;
  height: 34px;
}

.studio-room[data-hair="waves"] .avatar-hair {
  left: 2px;
  right: 2px;
  height: 60px;
  border-radius: 56px 56px 18px 18px;
}

.studio-room[data-hair="waves"] .avatar-hair::before,
.studio-room[data-hair="waves"] .avatar-hair::after {
  top: 32px;
  width: 36px;
  height: 92px;
  border-radius: 999px 999px 26px 26px;
}

.studio-room[data-hair="crop"] .avatar-hair {
  left: 18px;
  right: 18px;
  top: -4px;
  height: 42px;
  border-radius: 52px 52px 16px 16px;
}

.studio-room[data-hair="crop"] .avatar-hair::before,
.studio-room[data-hair="crop"] .avatar-hair::after {
  top: 24px;
  width: 16px;
  height: 24px;
}

.studio-room[data-accessory="none"] .avatar-bow,
.studio-room[data-accessory="none"] .avatar-bag,
.studio-room[data-accessory="none"] .avatar-prop {
  opacity: 0;
}

.studio-room[data-accessory="tote"] .avatar-bag {
  opacity: 1;
}

.studio-room[data-accessory="tote"] .avatar-prop {
  opacity: 0;
}

.studio-room[data-accessory="bow"] .avatar-bow {
  opacity: 1;
  transform: rotate(12deg) scale(0.86);
}

.studio-room[data-accessory="bow"] .avatar-prop {
  opacity: 0;
}

.studio-room[data-accessory="pin"] .avatar-bag {
  opacity: 0;
}

.studio-room[data-accessory="pin"] .avatar-prop {
  opacity: 1;
}

.studio-pet {
  position: absolute;
  left: calc(50% + 132px);
  bottom: 82px;
  z-index: 5;
  width: 76px;
  height: 58px;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 12px 10px rgba(62,53,47,0.18));
}

.studio-pet::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 48px;
  height: 40px;
  border-radius: 50% 50% 44% 44%;
  background: #8F7560;
  border: 4px solid #fff;
}

.studio-pet::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-secondary);
  box-shadow: 16px 0 0 var(--accent-secondary), 8px 12px 0 -2px var(--negative);
}

.studio-room[data-pet="cat"] .studio-pet,
.studio-room[data-pet="bunny"] .studio-pet,
.studio-room[data-pet="dog"] .studio-pet {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.studio-room[data-pet="cat"] .studio-pet::before {
  clip-path: polygon(0 100%, 0 36%, 20% 0, 36% 31%, 64% 31%, 80% 0, 100% 36%, 100% 100%);
}

.studio-room[data-pet="bunny"] .studio-pet::before {
  top: -2px;
  height: 54px;
  border-radius: 45% 45% 48% 48%;
  clip-path: polygon(10% 100%, 10% 26%, 22% 0, 36% 0, 42% 32%, 58% 32%, 64% 0, 78% 0, 90% 26%, 90% 100%);
  background: #EADCC1;
}

.studio-room[data-pet="dog"] .studio-pet::before {
  border-radius: 44% 44% 50% 50%;
  background: #B98554;
}

.studio-room[data-pet="dog"] .studio-pet {
  left: calc(50% + 126px);
}

.studio-room.snapshot-saved .studio-stage {
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--warning) 36%, transparent);
}

.studio-snapshot {
  grid-area: snapshot;
  align-self: stretch;
  margin: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0 0;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 12px 28px rgba(62,53,47,0.10);
  backdrop-filter: blur(12px);
}

.mirror-frame {
  position: relative;
  height: 236px;
  border: 10px solid color-mix(in srgb, var(--surface) 80%, white);
  border-radius: 999px 999px 36px 36px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), transparent 46%),
    color-mix(in srgb, var(--accent) 15%, #fff);
  box-shadow: inset 0 0 0 1px rgba(62,53,47,0.12);
  overflow: hidden;
}

.mirror-avatar {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 70px;
  height: 126px;
  transform: translateX(-50%);
  opacity: 0.72;
}

.mirror-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 62px;
  height: 58px;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46%;
  background: #F2D0B0;
}

.mirror-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58px;
  height: 74px;
  transform: translateX(-50%);
  border-radius: 28px 28px 18px 18px;
  background: var(--accent);
}

.studio-room[data-look="gingham"] .mirror-avatar::after {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 8px, transparent 8px 16px),
    #AFC5DA;
}

.studio-room[data-look="market"] .mirror-avatar::after { background: var(--negative); }

.snapshot-stack {
  min-height: 138px;
  display: grid;
  place-items: center;
}

.snapshot-card {
  position: relative;
  width: 124px;
  height: 144px;
  padding: 9px 9px 32px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sticker-shadow);
  transform: rotate(-2deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.snapshot-card.saved {
  transform: rotate(1deg) scale(1.04);
  box-shadow: var(--sticker-shadow), 0 0 0 4px color-mix(in srgb, var(--warning) 36%, transparent);
}

.snapshot-mini-avatar {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background:
    linear-gradient(180deg, transparent 58%, rgba(169,121,79,0.22) 58%),
    color-mix(in srgb, var(--accent) 16%, #fff);
}

.snapshot-mini-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #F2D0B0;
  box-shadow: 0 48px 0 10px var(--accent);
}

.studio-room[data-look="gingham"] .snapshot-mini-avatar::before {
  box-shadow: 0 48px 0 10px #AFC5DA;
}

.studio-room[data-look="market"] .snapshot-mini-avatar::before {
  box-shadow: 0 48px 0 10px var(--negative);
}

.snapshot-card span {
  position: absolute;
  left: 11px;
  bottom: 7px;
  color: #3E352F;
  font-family: "Caveat", cursive;
  font-size: 1rem;
}

.studio-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.studio-actions .icon-btn {
  cursor: pointer;
}

.studio-inventory {
  grid-area: inventory;
  margin: 0 clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 12px 28px rgba(62,53,47,0.10);
  backdrop-filter: blur(12px);
}

.inventory-item {
  min-height: 78px;
  padding: 10px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.inventory-item img,
.inventory-icon {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(62,53,47,0.12);
}

.inventory-item.locked {
  opacity: 0.48;
  cursor: not-allowed;
}

.community-screen {
  width: 100vw;
  min-height: calc(100vh - 104px);
  margin: 0 0 0 calc(50% - 50vw);
  padding: clamp(18px, 3vh, 24px) clamp(14px, 2.4vw, 28px) clamp(26px, 4vw, 48px);
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--warning) 16%, transparent), transparent 26rem),
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--rose) 18%, transparent), transparent 24rem),
    linear-gradient(90deg, rgba(62,53,47,0.035) 1px, transparent 1px),
    linear-gradient(rgba(62,53,47,0.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

.community-showcase {
  width: min(1536px, 100%);
  margin: 0 auto;
}

.showcase-hero {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 44px;
  text-align: center;
}

.showcase-hero h2 {
  color: var(--accent-secondary);
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.showcase-hero p {
  max-width: 560px;
  color: var(--text-secondary);
  font-weight: 800;
}

.showcase-masonry {
  columns: 3;
  column-gap: 16px;
}

.showcase-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 22px;
  break-inside: avoid;
  cursor: pointer;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.showcase-item img {
  width: 100%;
  display: block;
  transform: scale(1);
  transition: transform 0.7s ease;
}

.showcase-item:hover img {
  transform: scale(1.05);
}

.showcase-overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  opacity: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.20), transparent);
  transition: opacity 0.3s ease;
}

.showcase-overlay > span,
.showcase-likes {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.showcase-item:hover .showcase-overlay,
.showcase-item:hover .showcase-overlay > span,
.showcase-item:hover .showcase-likes {
  opacity: 1;
}

.showcase-item:hover .showcase-overlay > span,
.showcase-item:hover .showcase-likes {
  transform: translateY(0);
}

.showcase-overlay > span {
  font-weight: 800;
}

.showcase-likes {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(12px);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
}

.community-social {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.community-hero {
  min-height: clamp(150px, 20vh, 224px);
  display: grid;
  align-items: end;
  padding: clamp(22px, 4vw, 46px) 0 8px;
}

.community-hero h2 {
  max-width: 980px;
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.35rem, 5.2vw, 5.8rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: 0;
}

.community-grid {
  display: grid;
  grid-template-columns: minmax(238px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "rail main"
    "saved main";
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

.community-rail {
  grid-area: rail;
  position: sticky;
  top: 108px;
  display: grid;
  gap: 14px;
}

.community-search-box,
.community-composer,
.saved-atelier,
.community-post,
.community-empty {
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 12px, rgba(62,53,47,0.025) 12px 24px),
    color-mix(in srgb, var(--surface) 92%, white);
  box-shadow: var(--shadow);
}

.community-search-box {
  min-height: 50px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--accent-secondary);
}

.community-search-box input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  outline: none;
}

.community-search-box input::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
}

.community-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.community-filter button {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--text-secondary);
  font-weight: 900;
  cursor: pointer;
}

.community-filter button.active {
  border-style: solid;
  background: var(--accent-secondary);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 7px 0 rgba(62,53,47,0.08);
}

.saved-atelier {
  grid-area: saved;
  padding: 16px;
  border-radius: 18px;
}

.saved-atelier header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.saved-atelier header span {
  color: var(--negative);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.saved-atelier h3 {
  margin-top: 2px;
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0;
}

#communitySavedCount {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--warning);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.82rem;
}

.saved-list {
  display: grid;
  gap: 10px;
}

.saved-thread {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, white);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.saved-thread img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 12px;
}

.saved-thread b,
.saved-thread small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-thread b {
  color: var(--accent-secondary);
  font-size: 0.92rem;
}

.saved-thread small {
  margin-top: 2px;
  color: var(--text-secondary);
  font-weight: 800;
}

.saved-empty {
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 24%, transparent);
  border-radius: 14px;
  color: var(--text-secondary);
  font-weight: 800;
}

.community-main {
  grid-area: main;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.community-composer {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
}

.composer-avatar,
.maker-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 900;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.composer-avatar {
  width: 54px;
  height: 54px;
  background: var(--negative);
}

.composer-body {
  display: grid;
  gap: 12px;
}

.composer-body textarea {
  width: 100%;
  min-height: 94px;
  resize: vertical;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 26%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, white);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  line-height: 1.45;
  outline: none;
}

.composer-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.composer-controls label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.composer-controls select {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.community-post-status {
  min-height: 18px;
  color: var(--accent);
  font-weight: 900;
}

.community-feed {
  display: grid;
  gap: 16px;
}

.community-post {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 20px;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.community-post.featured {
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1fr);
}

.community-post.spotlight,
.community-post.just-posted {
  border-color: color-mix(in srgb, var(--warning) 64%, var(--border));
  box-shadow: 0 18px 36px rgba(224,167,50,0.22), var(--shadow);
  transform: translateY(-2px);
}

.post-media {
  position: relative;
  min-height: 250px;
  background: color-mix(in srgb, var(--accent-secondary) 16%, var(--surface));
}

.post-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.post-media > span {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, white);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(62,53,47,0.14);
}

.post-copy {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(16px, 2vw, 24px);
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.maker-avatar {
  width: 42px;
  height: 42px;
  font-size: 0.78rem;
}

.maker-avatar.sage { background: var(--accent); }
.maker-avatar.rust { background: var(--negative); }
.maker-avatar.gold { background: var(--warning); color: var(--accent-secondary); }
.maker-avatar.blue { background: var(--accent-secondary); }

.post-author b,
.post-author small {
  display: block;
}

.post-author b {
  color: var(--accent-secondary);
  font-weight: 900;
}

.post-author small {
  color: var(--text-secondary);
  font-weight: 800;
}

.post-copy h3 {
  color: var(--text);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 2.1vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.post-copy p {
  color: var(--text-secondary);
  font-weight: 760;
  line-height: 1.55;
}

.post-tags,
.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.post-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-secondary);
  font-weight: 900;
  font-size: 0.82rem;
}

.post-actions {
  padding-top: 4px;
}

.post-actions button,
.post-comment {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, white);
  color: var(--text-secondary);
  font-weight: 900;
}

.post-actions button {
  cursor: pointer;
}

.post-actions button[aria-pressed="true"],
.post-actions button.active {
  border-color: color-mix(in srgb, var(--negative) 44%, var(--border));
  background: color-mix(in srgb, var(--negative) 14%, var(--surface));
  color: var(--negative);
}

.post-actions button svg {
  flex: 0 0 auto;
}

.post-comment {
  border-style: dashed;
}

.community-empty {
  padding: 18px;
  border-radius: 16px;
  color: var(--text-secondary);
  font-weight: 900;
  text-align: center;
}

.store-screen {
  width: 100vw;
  min-height: calc(100vh - 104px);
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0 clamp(18px, 3vw, 34px) clamp(26px, 4vw, 48px);
  transition: background 0.36s ease;
}

.store-screen[data-store-tab="pattern"] {
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--warning) 22%, transparent), transparent 26rem),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 24rem),
    linear-gradient(90deg, rgba(62,53,47,0.035) 1px, transparent 1px),
    linear-gradient(rgba(62,53,47,0.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

.store-screen[data-store-tab="fabric"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.88), transparent 25rem),
    radial-gradient(circle at 82% 18%, rgba(170,179,171,0.18), transparent 26rem),
    linear-gradient(90deg, rgba(36,52,66,0.026) 1px, transparent 1px),
    linear-gradient(rgba(36,52,66,0.022) 1px, transparent 1px),
    #F7F7F3;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

.store-studio {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.store-tabbar {
  position: sticky;
  top: 89px;
  z-index: 24;
  display: grid;
  justify-items: center;
  margin-bottom: clamp(24px, 4vw, 42px);
  padding: 0 0 14px;
  pointer-events: none;
}

.store-tabbar::before {
  content: "";
  position: absolute;
  inset: -8px 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 64%,
    transparent 100%
  );
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.store-tabs {
  --toggle-gap: 5px;
  --toggle-pad: 6px;
  position: relative;
  display: flex;
  gap: var(--toggle-gap);
  isolation: isolate;
  overflow: hidden;
  padding: var(--toggle-pad);
  border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(160,121,79,0.10) 0 8px, transparent 8px 16px),
    color-mix(in srgb, var(--surface) 64%, transparent);
  box-shadow: 0 18px 42px rgba(62,53,47,0.12);
  backdrop-filter: blur(20px) saturate(180%);
  pointer-events: auto;
}

.store-tabs::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--toggle-pad);
  bottom: var(--toggle-pad);
  left: var(--toggle-pad);
  width: calc((100% - (var(--toggle-pad) * 2) - var(--toggle-gap)) / 2);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(246,230,198,0.72)),
    var(--surface-hover);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.62),
    0 9px 24px rgba(62,53,47,0.14);
  transition: transform 0.34s cubic-bezier(.2,.82,.2,1), background 0.34s ease;
}

.store-tabs::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 20px;
  right: 20px;
  top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--accent-secondary) 24%, transparent);
  pointer-events: none;
}

.store-screen[data-store-tab="fabric"] .store-tabs::before {
  transform: translateX(calc(100% + var(--toggle-gap)));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(222,228,224,0.76)),
    #FFFFFF;
}

.store-tabs button {
  position: relative;
  z-index: 2;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  transition: color 0.24s ease, transform 0.24s ease;
}

.store-tabs button.active {
  color: var(--accent-secondary);
  transform: translateY(-1px);
}

.store-screen[data-store-tab="fabric"] .store-tabs button.active {
  color: #243442;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.store-card {
  position: relative;
  min-height: 456px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.32), transparent 38%),
    color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow: 0 18px 42px rgba(62,53,47,0.10);
  backdrop-filter: blur(20px) saturate(170%);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}

.store-card.store-card-highlight {
  border-color: color-mix(in srgb, var(--negative) 72%, white);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--negative) 18%, transparent),
    0 28px 64px rgba(62,53,47,0.20);
  transform: translateY(-6px);
}

.store-card.store-card-highlight .pattern-preview {
  border-color: color-mix(in srgb, var(--negative) 38%, transparent);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.44),
    0 0 28px color-mix(in srgb, var(--negative) 18%, transparent);
}

.store-page[hidden] {
  display: none !important;
}

.store-page:not([hidden]) .store-card {
  animation: storeStateWipe 0.38s ease both;
}

.pattern-card {
  border-color: color-mix(in srgb, var(--wood) 30%, var(--surface));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), transparent 42%),
    color-mix(in srgb, var(--warning) 9%, var(--surface) 76%);
}

.fabric-card {
  border-color: rgba(210,214,210,0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(244,244,239,0.68)),
    #FFFFFF;
  box-shadow: 0 18px 42px rgba(36,52,66,0.10);
}

.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(62,53,47,0.16);
}

.pattern-preview,
.fabric-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 10%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--warning) 18%, transparent), transparent 15rem),
    color-mix(in srgb, var(--surface-hover) 78%, var(--bg));
}

.pattern-preview {
  display: grid;
  place-items: center;
  perspective: 1000px;
  background:
    linear-gradient(rgba(120,104,80,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,104,80,0.055) 1px, transparent 1px),
    radial-gradient(circle at 35% 32%, color-mix(in srgb, var(--warning) 16%, transparent), transparent 13rem),
    color-mix(in srgb, var(--surface-hover) 86%, var(--warning));
  background-size: 24px 24px, 24px 24px, auto, auto;
}

.fabric-preview {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.74), transparent 44%),
    #FFFFFF;
  border-color: rgba(210,214,210,0.9);
}

.pattern-preview img,
.fabric-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pattern-preview img {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.86);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}

.pattern-card:hover .pattern-preview img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.basic-tee-preview {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(rgba(120,104,80,0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,104,80,0.052) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(246,241,231,0.48)),
    color-mix(in srgb, var(--surface-hover) 88%, var(--warning));
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.tee-preview-pane {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(120,104,80,0.16);
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  display: grid;
  place-items: center;
}

.tee-preview-clo {
  background:
    radial-gradient(circle at 48% 12%, rgba(255,255,255,0.82), transparent 8.5rem),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(232,226,214,0.54));
}

.tee-preview-pattern {
  background: rgba(255,255,255,0.92);
}

.basic-tee-preview .tee-preview-pane img,
.pattern-card:hover .basic-tee-preview .tee-preview-pane img {
  position: static;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: contain;
  filter: none;
  transform: none;
}

.tee-preview-clo img {
  padding: 9px 0 0;
}

.tee-preview-pattern img {
  padding: 7px;
}

.pattern-draft {
  position: absolute;
  inset: 22px;
  z-index: 1;
  transform-style: preserve-3d;
  transition: transform 0.72s ease, opacity 0.72s ease;
}

.pattern-card:hover .pattern-draft {
  opacity: 0;
  transform: rotateX(60deg) rotateZ(42deg) translateZ(-42px);
}

.draft-box,
.draft-curve {
  position: absolute;
  border: 2px dashed color-mix(in srgb, var(--accent-secondary) 34%, transparent);
}

.draft-box {
  inset: 12px;
  border-radius: 10px;
}

.draft-box.wide {
  top: 42px;
  bottom: 42px;
}

.draft-curve {
  left: 25%;
  top: 24%;
  width: 50%;
  height: 52%;
  border-radius: 999px;
}

.draft-curve.tall {
  left: 34%;
  width: 32%;
  height: 64%;
}

.fabric-preview img {
  filter: saturate(0.96) contrast(1.02);
  transition: filter 0.62s ease, transform 0.62s ease;
}

.fabric-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.42), transparent);
  transition: opacity 0.22s ease;
}

.fabric-card:hover .fabric-preview img {
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.04);
}

.fabric-card:hover .fabric-preview::after {
  opacity: 1;
}

.store-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px;
}

.store-card h3 {
  margin-bottom: 4px;
  color: var(--accent-secondary);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.14;
}

.store-card p {
  display: -webkit-box;
  line-clamp: 2;
  min-height: 44px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 800;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.store-get {
  position: relative;
  width: 100%;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
  color: var(--accent-secondary);
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.store-get:hover {
  border-color: var(--negative);
  box-shadow: 0 0 18px color-mix(in srgb, var(--negative) 18%, transparent);
}

.pattern-card .store-get {
  border-color: color-mix(in srgb, var(--wood) 34%, var(--border));
  background: color-mix(in srgb, var(--surface-hover) 84%, var(--warning));
}

.fabric-card .store-get {
  border-color: rgba(122,133,126,0.38);
  background: rgba(255,255,255,0.72);
  color: #243442;
}

.fabric-card .store-get:hover {
  border-color: #6F7E72;
  box-shadow: 0 0 18px rgba(111,126,114,0.18);
}

.store-get.loading,
.store-get:disabled {
  cursor: default;
}

.store-get.acquired {
  border-color: color-mix(in srgb, var(--positive) 36%, transparent);
  background: color-mix(in srgb, var(--positive) 14%, var(--surface));
  color: var(--positive);
}

.store-spinner {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 2px solid color-mix(in srgb, var(--text-secondary) 28%, transparent);
  border-top-color: var(--accent-secondary);
  border-radius: 50%;
  animation: storeSpin 0.72s linear infinite;
}

@keyframes storeSpin {
  to { transform: rotate(360deg); }
}

@keyframes storeStateWipe {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 24px);
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 24px);
    transform: translateX(0);
  }
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.token {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 0 rgba(62,53,47,0.04);
}

.token-chip {
  width: 100%;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(62,53,47,0.12);
}

.token-chip.kraft { background: #F3E9D6; }
.token-chip.sage { background: #8AA17F; }
.token-chip.barn-red { background: #C0472B; }
.token-chip.mustard { background: #E0A732; }

.checklist {
  columns: 2;
  column-gap: 28px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.checklist li {
  break-inside: avoid;
  margin: 0 0 12px 20px;
  color: var(--text);
  font-weight: 700;
}

.learning-shell {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin: 84px 0 84px calc(50% - 50vw);
  overflow: hidden;
  border-top: none;
  border-bottom: none;
  background: var(--bg);
  isolation: isolate;
}

.learning-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--surface);
}

.learning-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  background:
    radial-gradient(circle at 28% 22%, rgba(224,167,50,0.24), transparent 18rem),
    var(--surface);
  background-size: auto;
}

.learning-map-fallback.visible { display: block; }

.quilt-binding {
  display: none;
}

.binding-edge {
  position: absolute;
  display: block;
  border: 1px solid color-mix(in srgb, var(--wood) 30%, transparent);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.20) 0 14px, rgba(62,53,47,0.035) 14px 28px),
    color-mix(in srgb, var(--wood) 24%, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 12px 32px rgba(62,53,47,0.08);
}

.binding-edge.top,
.binding-edge.bottom {
  left: 0;
  right: 0;
  height: 18px;
}

.binding-edge.left,
.binding-edge.right {
  top: 0;
  bottom: 0;
  width: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.20) 0 14px, rgba(62,53,47,0.035) 14px 28px),
    color-mix(in srgb, var(--wood) 24%, var(--surface));
}

.binding-edge.top { top: 0; border-radius: 22px 22px 6px 6px; }
.binding-edge.bottom { bottom: 0; border-radius: 6px 6px 22px 22px; }
.binding-edge.left { left: 0; border-radius: 22px 6px 6px 22px; }
.binding-edge.right { right: 0; border-radius: 6px 22px 22px 6px; }

.learning-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: none;
  opacity: 0;
}

.map-hud,
.map-node-layer,
.map-bottom-action {
  position: relative;
  z-index: 5;
}

.map-hud {
  z-index: 8;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: clamp(58px, 7vh, 88px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.map-title-panel {
  max-width: 560px;
  padding: 0 20px 18px;
  border: none;
  border-radius: 0 0 18px 18px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.map-title-panel h2 {
  margin-top: 6px;
  font-size: clamp(2.1rem, 4.5vw, 4.4rem);
  color: var(--accent-secondary);
}

.map-title-panel p { max-width: 500px; }

.map-route-tools {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.learning-star-tools {
  --star-size: 58px;
  width: fit-content;
  min-height: calc(var(--star-size) + 4px);
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  isolation: isolate;
}

.skills-route-tools.learning-star-tools {
  --star-size: 48px;
  position: relative;
  z-index: 70;
  width: min(1320px, 100%);
  margin: 0 auto clamp(0px, 0.6vh, 6px);
  align-items: flex-start;
}

.learning-star-toggle {
  position: relative;
  z-index: 4;
  width: var(--star-size);
  height: var(--star-size);
  flex: 0 0 var(--star-size);
  border: 0;
  background: transparent;
  color: #fff8df;
  cursor: pointer;
  filter: drop-shadow(0 10px 16px rgba(62, 53, 47, 0.18));
}

.learning-star-toggle::before,
.learning-star-toggle::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 3%, 61% 35%, 95% 35%, 67% 55%, 78% 90%, 50% 69%, 22% 90%, 33% 55%, 5% 35%, 39% 35%);
  transition: transform 0.28s ease, filter 0.28s ease;
  animation: learningStarFloat 3.2s ease-in-out infinite;
}

.learning-star-toggle::before {
  inset: 0;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.64), transparent 24%),
    linear-gradient(145deg, #FFE07A 0%, #F2BA38 48%, #C98E20 100%);
}

.learning-star-toggle::after {
  inset: 8px;
  background:
    repeating-linear-gradient(55deg, rgba(255,255,255,0.32) 0 3px, transparent 3px 7px),
    color-mix(in srgb, var(--warning) 82%, white);
  opacity: 0.8;
}

.learning-star-toggle span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.42rem;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(126, 79, 12, 0.24);
  animation: learningStarFloat 3.2s ease-in-out infinite;
}

.learning-star-tools[data-tools-open="true"] .learning-star-toggle::before,
.learning-star-tools[data-tools-open="true"] .learning-star-toggle::after {
  transform: rotate(15deg) scale(1.03);
  filter: saturate(1.08);
}

.learning-tool-ribbon {
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 0;
  min-height: 52px;
  margin-left: -12px;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-16px) scaleX(0.72);
  transform-origin: left center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
  transition:
    max-width 0.34s cubic-bezier(.22,.8,.24,1),
    padding 0.34s cubic-bezier(.22,.8,.24,1),
    opacity 0.2s ease,
    transform 0.34s cubic-bezier(.22,.8,.24,1),
    visibility 0.2s ease;
}

.learning-star-tools[data-tools-open="true"] .learning-tool-ribbon {
  max-width: min(390px, calc(100vw - 92px));
  padding: 6px 10px 6px 20px;
  visibility: visible;
  opacity: 1;
  transform: translateX(0) scaleX(1);
  pointer-events: auto;
}

.learning-star-tools .map-switch,
.learning-star-tools .outline-toggle {
  flex: 0 0 auto;
}

.learning-star-tools .outline-toggle {
  width: 42px;
  padding: 0;
}

@keyframes learningStarFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .learning-star-toggle span,
  .learning-star-toggle::before,
  .learning-star-toggle::after,
  .learning-tool-ribbon,
  .level-card-cta,
  .level-card-cta::after {
    animation: none;
    transition: none;
  }
}

.map-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 10px 24px rgba(62, 53, 47, 0.10);
  backdrop-filter: blur(12px);
}

.map-switch button,
.outline-toggle {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--text-secondary);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.outline-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-switch button.active {
  background: var(--accent-secondary);
  color: var(--surface);
}

.outline-toggle {
  border: 1px solid var(--border);
  color: var(--accent-secondary);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 10px 24px rgba(62, 53, 47, 0.10);
  backdrop-filter: blur(12px);
}

.course-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(380px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  display: none;
}

.course-popover.open { display: grid; gap: 10px; }

.skills-route-tools .course-popover {
  position: static;
  flex: 0 0 min(380px, 100%);
  width: min(380px, 100%);
  max-width: 100%;
  margin: 10px 0 0 0;
  z-index: 80;
}

.course-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-hover);
  color: var(--text);
  font-weight: 800;
}

.course-row span:first-child {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.course-row small {
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
}

.map-node-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-route-thread {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  filter: url(#threadShadow);
}

.route-mobile { display: none; }

.route-sashing {
  fill: none;
  stroke: color-mix(in srgb, var(--surface) 88%, var(--wood));
  stroke-width: 17;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.88;
}

.route-sashing-mobile { display: none; }

.route-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.route-path-underlay {
  stroke: color-mix(in srgb, var(--border) 54%, var(--surface));
  stroke-width: 9;
  opacity: 0.62;
}

.route-path-complete {
  stroke: var(--accent);
  stroke-width: 5.4;
  stroke-dasharray: 1 7;
}

.route-path-current {
  stroke: var(--warning);
  stroke-width: 6.4;
  stroke-dasharray: 2 9;
  animation: routeStitchMarch 3.6s linear infinite;
}

.route-path-locked {
  stroke: color-mix(in srgb, var(--text-secondary) 38%, var(--surface));
  stroke-width: 4.4;
  stroke-dasharray: 1 11;
  opacity: 0.5;
}

.route-focus-halo {
  fill: color-mix(in srgb, var(--warning) 18%, transparent);
  stroke: color-mix(in srgb, var(--warning) 48%, transparent);
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
}

.route-knot {
  fill: var(--surface);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.route-knot.complete { stroke: var(--accent); }
.route-knot.current { fill: var(--warning); stroke: var(--surface); }
.route-knot.locked { stroke: color-mix(in srgb, var(--text-secondary) 50%, var(--surface)); opacity: 0.7; }

.map-project-node {
  position: absolute;
  pointer-events: auto;
  z-index: 3;
  --fabric: color-mix(in srgb, var(--surface) 86%, transparent);
  --fabric-ink: var(--accent-secondary);
  --fabric-thread: var(--border);
  width: 176px;
  padding: 12px;
  border: none;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.38), transparent 34%),
    color-mix(in srgb, var(--fabric) 86%, transparent);
  box-shadow: var(--sticker-shadow);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%) rotate(var(--r));
  color: var(--text);
}

.map-project-node.fabric-wood {
  --fabric: color-mix(in srgb, var(--wood) 38%, var(--surface));
  --fabric-ink: #6E5136;
  --fabric-thread: color-mix(in srgb, var(--wood) 44%, var(--surface));
}

.map-project-node.fabric-denim {
  --fabric: color-mix(in srgb, var(--accent-secondary) 24%, var(--surface));
  --fabric-ink: var(--accent-secondary);
  --fabric-thread: color-mix(in srgb, var(--accent-secondary) 36%, var(--surface));
}

.map-project-node.fabric-cream {
  --fabric: color-mix(in srgb, var(--surface-hover) 90%, var(--warning));
  --fabric-ink: var(--accent-secondary);
  --fabric-thread: color-mix(in srgb, var(--border) 78%, var(--surface));
}

.map-project-node.fabric-rose {
  --fabric: color-mix(in srgb, var(--rose) 34%, var(--surface));
  --fabric-ink: #7F4747;
  --fabric-thread: color-mix(in srgb, var(--rose) 48%, var(--surface));
}

.map-project-node button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 8px;
}

.pattern-ghost {
  display: none;
  width: 100%;
  aspect-ratio: 1 / 0.78;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  position: relative;
  overflow: hidden;
}

.pattern-ghost::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 68%;
  transform: translate(-50%, -50%);
  border: none;
  background: color-mix(in srgb, var(--fabric) 28%, transparent);
}

.map-project-node.shape-bag .pattern-ghost::before {
  width: 54%;
  height: 52%;
  border-radius: 5px 5px 13px 13px;
}

.map-project-node.shape-bag .pattern-ghost::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 32%;
  height: 24%;
  transform: translateX(-50%);
  border: none;
  background: transparent;
}

.map-project-node.shape-trousers .pattern-ghost::before {
  width: 52%;
  height: 70%;
  clip-path: polygon(20% 0, 80% 0, 74% 100%, 54% 100%, 50% 34%, 46% 100%, 26% 100%);
}

.map-project-node.shape-skirt .pattern-ghost::before {
  width: 60%;
  height: 68%;
  clip-path: polygon(32% 0, 68% 0, 90% 100%, 10% 100%);
}

.map-project-node.shape-dress .pattern-ghost::before {
  width: 64%;
  height: 72%;
  clip-path: polygon(35% 0, 65% 0, 74% 30%, 92% 100%, 8% 100%, 26% 30%);
}

.map-project-node.shape-top .pattern-ghost::before {
  width: 68%;
  height: 60%;
  clip-path: polygon(24% 10%, 39% 0, 61% 0, 76% 10%, 100% 35%, 84% 55%, 76% 42%, 76% 100%, 24% 100%, 24% 42%, 16% 55%, 0 35%);
}

.map-project-node img {
  width: 100%;
  aspect-ratio: 1 / 0.78;
  object-fit: cover;
  border-radius: 10px;
  border: 5px solid #fff;
  background: #fff;
}

.map-project-node.status-locked {
  opacity: 0.78;
  border: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.44), transparent 36%),
    color-mix(in srgb, var(--surface) 68%, transparent);
  box-shadow: 0 5px 0 rgba(62,53,47,0.035), 0 18px 34px rgba(62,53,47,0.08);
  filter: saturate(0.72);
}

.map-project-node.status-locked img {
  display: none;
}

.map-project-node.status-locked .pattern-ghost {
  display: block;
}

.map-project-node b {
  display: block;
  color: var(--fabric-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.08;
}

.map-project-node small {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
}

.map-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.map-skill-chip {
  width: auto;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 20%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface-hover) 86%, transparent);
  color: var(--accent-secondary);
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.map-skill-chip.status-mastered { background: var(--accent); color: #fff; }
.map-skill-chip.status-learning,
.map-skill-chip.status-touched { background: var(--warning); color: var(--accent-secondary); }
.map-skill-chip.status-locked { opacity: 0.64; }

.map-project-node .map-skill-chip {
  width: auto;
  display: inline-flex;
  gap: 0;
  text-align: center;
}

.map-project-node.current .map-skill-chips {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 8px);
  justify-content: center;
  margin-top: 0;
}

.map-project-node.project-01 { left: 17%; top: 68%; --r: -2deg; }
.map-project-node.current {
  left: 50%;
  top: 48%;
  width: min(320px, 28vw);
  min-width: 246px;
  padding: 16px;
  border: 2px solid color-mix(in srgb, var(--fabric-ink) 48%, white);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.46), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 18px, rgba(62,53,47,0.035) 18px 36px),
    color-mix(in srgb, var(--fabric) 92%, transparent);
  --r: 1deg;
  animation: currentNodePulse 2.6s ease-in-out infinite;
}
.map-project-node.project-03 { left: 72%; top: 68%; --r: 2deg; opacity: 0.78; }
.map-project-node.project-04 { left: 84%; top: 43%; --r: -1deg; opacity: 0.72; }
.map-project-node.project-05 { left: 67%; top: 23%; --r: 2deg; opacity: 0.68; }
.map-project-node.project-06 { left: 38%; top: 23%; --r: -2deg; opacity: 0.68; }
.map-project-node.project-07 { left: 19%; top: 42%; --r: 1deg; opacity: 0.64; }

.node-state {
  position: absolute;
  top: -11px;
  right: 14px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--warning);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(62,53,47,0.14);
}

.node-state.complete { background: var(--accent); color: #fff; }
.node-state.current,
.node-state.ready {
  background: var(--warning);
  color: var(--accent-secondary);
}
.node-state.upload { background: var(--negative); color: #fff; }
.node-state.locked {
  border: 1px dashed color-mix(in srgb, var(--text-secondary) 38%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, #777);
  color: var(--text-secondary);
  box-shadow: 0 7px 16px rgba(62,53,47,0.09);
}

.map-avatar {
  position: absolute;
  z-index: 4;
  left: calc(50% + 132px);
  top: calc(48% + 84px);
  width: 72px;
  height: 92px;
  border-radius: 34px 34px 20px 20px;
  background: var(--warning);
  border: 5px solid var(--surface);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}

.map-avatar::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F2D0B0;
  box-shadow: 0 38px 0 10px var(--accent);
}

.map-avatar::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 56px;
  width: 72px;
  height: 18px;
  border-bottom: 2px dashed color-mix(in srgb, var(--negative) 72%, var(--surface));
  border-radius: 50%;
  transform: rotate(-18deg);
}

.quilt-signature {
  position: absolute;
  z-index: 4;
  right: clamp(46px, 7vw, 108px);
  bottom: clamp(132px, 16vh, 184px);
  min-width: 176px;
  padding: 8px 14px;
  border: 1px dashed color-mix(in srgb, var(--negative) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: color-mix(in srgb, var(--negative) 78%, var(--accent-secondary));
  font-family: "Caveat", cursive;
  font-size: 1.28rem;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.62);
  box-shadow: 0 10px 24px rgba(62,53,47,0.08);
  transform: rotate(-2deg);
  pointer-events: none;
}

.map-bottom-action {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 42px);
  width: min(1040px, calc(100% - 36px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: none;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.current-project-summary {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.current-project-summary img {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  border: 5px solid #fff;
  background: #fff;
}

.current-project-summary b {
  display: block;
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.06;
}

.current-project-summary p {
  margin-top: 3px;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
}

.task-screen {
  position: fixed;
  inset: 0;
  z-index: 11000;
  width: 100vw;
  margin: 0;
  display: none;
  overflow: auto;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(62,53,47,0.035) 1px, transparent 1px),
    linear-gradient(rgba(62,53,47,0.025) 1px, transparent 1px),
    var(--bg);
  background-size: 34px 34px, 34px 34px, auto;
}

.task-screen.open { display: block; }
body.task-open { overflow: hidden; }

.task-workbench {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px;
}

.task-topbar,
.task-bottombar {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 10px 28px rgba(62,53,47,0.10);
  backdrop-filter: blur(12px);
}

.task-topbar {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px;
}

.task-close {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.task-heading {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.task-heading b {
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
  line-height: 1.06;
}

.task-heading span {
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
}

.task-progress-track {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-hover);
  border: 1px dashed var(--border);
}

.task-progress-fill {
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 10px, transparent 10px 20px),
    var(--accent);
  transition: width 0.22s ease;
}

.task-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.32fr) minmax(0, 0.68fr);
  gap: 16px;
}

.task-left,
.task-video-panel {
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.task-left {
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.mini-section-title {
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-tile {
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-hover);
  display: grid;
  gap: 8px;
  align-content: center;
  color: var(--text);
  font-weight: 800;
}

.tool-tile svg { color: var(--accent-secondary); }

.task-rescue {
  border: 1px solid color-mix(in srgb, var(--negative) 42%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--negative) 9%, var(--surface));
  overflow: hidden;
}

.task-rescue button {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 0;
  background: transparent;
  color: var(--negative);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
}

.rescue-detail {
  display: none;
  padding: 0 14px 14px;
  color: var(--text-secondary);
}

.task-rescue.open .rescue-detail { display: grid; gap: 9px; }

.rescue-detail ol {
  margin-left: 18px;
  color: var(--text);
  font-weight: 700;
}

.task-video-panel {
  padding: 16px;
  display: grid;
  grid-template-rows: minmax(360px, 1fr) auto;
  gap: 14px;
}

.task-video-stage {
  position: relative;
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 38%),
    radial-gradient(circle at 50% 42%, rgba(224,167,50,0.20), transparent 18rem),
    #20262A;
  display: grid;
  place-items: center;
  color: #fff;
}

.task-video-stage::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px dashed rgba(255,255,255,0.20);
  border-radius: 10px;
}

.video-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: min(520px, calc(100% - 36px));
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.34);
  color: rgba(255,255,255,0.84);
  font-weight: 800;
}

.video-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.video-meter-track {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-secondary) 15%, var(--surface));
  overflow: hidden;
}

.video-meter-fill {
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: var(--warning);
  transition: width 0.24s ease;
}

.task-bottombar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  flex-wrap: wrap;
}

.task-button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.task-bottombar .btn[disabled],
.task-bottombar button[disabled] {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}

.prep-sheet {
  display: none;
  position: fixed;
  inset: 18px;
  z-index: 11100;
  place-items: center;
  background: color-mix(in srgb, #2A2620 44%, transparent);
  backdrop-filter: blur(6px);
}

.prep-sheet.open { display: grid; }

.prep-envelope {
  width: min(720px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow);
}

.prep-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

@keyframes currentNodePulse {
  0%, 100% { box-shadow: var(--sticker-shadow), 0 0 0 0 color-mix(in srgb, var(--warning) 34%, transparent); }
  50% { box-shadow: var(--sticker-shadow), 0 0 0 14px color-mix(in srgb, var(--warning) 0%, transparent); }
}

@keyframes routeStitchMarch {
  to { stroke-dashoffset: -44; }
}

@keyframes seamStitchDraw {
  0% { stroke-dasharray: 0 80; stroke-dashoffset: 18; }
  58% { stroke-dasharray: 22 58; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 2 9; stroke-dashoffset: -22; }
}

.route-path-current.seam-draw {
  animation: seamStitchDraw 1.15s ease-out both, routeStitchMarch 3.6s linear 1.15s infinite;
}

@keyframes mapFocusPulse {
  0%, 100% { box-shadow: var(--sticker-shadow), 0 0 0 0 color-mix(in srgb, var(--negative) 0%, transparent); }
  45% { box-shadow: var(--sticker-shadow), 0 0 0 16px color-mix(in srgb, var(--negative) 28%, transparent); }
}

@keyframes quiltBackFlip {
  from { opacity: 0; transform: perspective(900px) rotateY(-7deg) translateY(10px); }
  to { opacity: 1; transform: perspective(900px) rotateY(0deg) translateY(0); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1060px) {
  .hero { grid-template-columns: 1fr; }
  .pattern-envelope { min-height: 760px; }
  .product-polaroid { width: min(74%, 420px); }
  .showcase-masonry { columns: 2; }
  .community-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    grid-template-areas:
      "rail saved"
      "main main";
  }
  .community-rail {
    position: static;
  }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills-workbench { grid-template-columns: minmax(0, 1fr); }
  .token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-nav { width: min(100% - 24px, 1180px); }
  .nav-links { overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .map-hud { display: grid; padding-top: 64px; }
  .map-route-tools { justify-content: flex-start; position: relative; }
  .map-project-node { width: 148px; }
  .map-project-node.project-01 { left: 16%; top: 66%; }
  .map-project-node.current { width: min(292px, 42vw); left: 52%; top: 49%; }
  .map-project-node.project-03 { left: 80%; top: 66%; }
  .map-project-node.project-04 { left: 86%; top: 43%; }
  .map-project-node.project-05 { left: 68%; top: 25%; }
  .map-project-node.project-06 { left: 36%; top: 25%; }
  .map-project-node.project-07 { left: 17%; top: 43%; }
  .task-body { grid-template-columns: 1fr; }
  .task-video-panel { grid-template-rows: minmax(320px, 56vh) auto; }
  .studio-room {
    height: min(780px, calc(100svh - 114px));
    min-height: 640px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "stage"
      "controls";
  }
  .studio-preset-drawer { max-height: 172px; }
}

@media (max-width: 680px) {
  .page-shell { width: min(100% - 20px, 1440px); }
  section { margin: 58px 0; }
  .app-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    border-radius: 22px;
    align-items: center;
    gap: 8px;
  }
  .nav-links {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
    border-radius: 18px;
  }
  .nav-links a {
    flex: 1 0 auto;
    min-height: 38px;
    padding: 8px 11px;
    text-align: center;
    font-size: 0.82rem;
  }
  .nav-tools { display: none; }
  .hero { min-height: auto; }
  .pattern-envelope { min-height: 660px; padding: 20px; }
  .stamp { width: 86px; height: 86px; font-size: 0.84rem; }
  .metrics-strip { grid-template-columns: 1fr; }
  .product-polaroid { right: 24px; bottom: 24px; width: calc(100% - 48px); }
  .split-table { grid-template-columns: repeat(7, 72vw); }
  .community-screen {
    margin-top: 58px;
    margin-bottom: 58px;
    padding: 140px 10px 18px;
  }
  .community-hero {
    min-height: 0;
    padding: 12px 0 6px;
  }
  .community-hero h2 {
    font-size: clamp(2.1rem, 12vw, 3.6rem);
  }
  .community-rail,
  .community-composer,
  .community-post,
  .community-post.featured {
    grid-template-columns: 1fr;
  }
  .community-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .community-rail { order: 1; }
  .community-main { display: contents; }
  .community-composer { order: 2; }
  .saved-atelier { order: 3; }
  .community-feed { order: 4; }
  .community-empty { order: 5; }
  .community-composer,
  .saved-atelier,
  .community-feed,
  .community-empty {
    width: 100%;
  }
  .community-search,
  .community-filter,
  .saved-atelier {
    grid-column: auto;
    grid-row: auto;
  }
  .composer-controls {
    grid-template-columns: 1fr;
  }
  .post-media {
    min-height: 232px;
  }
  .showcase-masonry { columns: 1; }
  .showcase-overlay {
    padding: 18px;
    opacity: 1;
  }
  .showcase-overlay > span,
  .showcase-likes {
    opacity: 1;
    transform: none;
  }
  .token-grid { grid-template-columns: 1fr; }
  .store-screen {
    margin-top: 58px;
    margin-bottom: 58px;
    padding: 140px 10px 18px;
  }
  .store-grid { grid-template-columns: 1fr; gap: 16px; }
  .store-tabbar {
    top: 130px;
    margin-bottom: 22px;
  }
  .store-tabs { width: 100%; }
  .store-tabs button { flex: 1; justify-content: center; padding: 9px 12px; }
  .store-card { min-height: auto; border-radius: 18px; }
  .pattern-preview,
  .fabric-preview { border-radius: 14px; }
  .checklist { columns: 1; }
  .skills-panel {
    margin-top: 18px;
    margin-bottom: 58px;
    padding: 18px 10px 18px;
  }
  .skills-route-tools { width: 100%; }
  .skills-workbench { grid-template-columns: 1fr; }
  .skills-page-title {
    margin-top: 8px;
    margin-bottom: 18px;
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .skill-sampler-board { min-height: auto; }
  .skill-map,
  .skill-map.is-filtered {
    --skill-card-height: clamp(74px, 16vw, 86px);
    --skill-card-width: clamp(142px, calc((100vw - 62px) / 2), 186px);
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "construction"
      "finishing"
      "zipper"
      "button"
      "buttonhole"
      "hand";
    gap: 12px;
  }
  .skill-family-cluster,
  .skill-map.is-filtered .skill-family-cluster {
    min-height: auto;
    padding: 13px;
  }
  .piece-hand-stitch {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .skill-swatch-list {
    align-content: start;
    grid-auto-rows: auto;
    gap: 9px;
  }
  .piece-construction .skill-swatch-list {
    grid-template-rows: none;
  }
  .skill-swatch-row {
    grid-auto-rows: var(--skill-card-height);
  }
  .piece-construction .skill-swatch-row,
  .piece-finishing .skill-swatch-row,
  .piece-zipper .skill-swatch-row {
    grid-template-columns: repeat(2, minmax(0, var(--skill-card-width)));
    justify-content: center;
  }
  .piece-button .skill-swatch-row,
  .piece-buttonhole .skill-swatch-row,
  .piece-hand-stitch .skill-swatch-row {
    grid-template-columns: minmax(0, var(--skill-card-width));
    justify-content: center;
  }
  .piece-button,
  .piece-buttonhole {
    width: 100%;
  }
  .piece-button {
    grid-area: button;
  }
  .piece-buttonhole {
    grid-area: buttonhole;
  }
  .piece-buttonhole {
    margin-left: 0;
  }
  .skill-node {
    min-height: var(--skill-card-height);
    height: var(--skill-card-height);
    width: var(--skill-card-width);
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
  }
  .skill-node-stitch { grid-row: 1; }
  .skill-node b { font-size: 0.86rem; }
  .skill-detail-modal { padding: 14px; }
  .skill-detail { padding: 20px; border-radius: 20px; }
  .skill-detail h3 { font-size: 1.72rem; }
  .studio-screen {
    width: 100%;
    margin-top: 58px;
    margin-bottom: 58px;
    margin-left: 0;
    padding: 10px 10px 10px;
  }
  .studio-room {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(520px, 62vh) auto auto auto;
    grid-template-areas:
      "stage"
      "closet"
      "snapshot"
      "inventory";
    border-radius: 18px;
  }
  .studio-room::before { bottom: 302px; }
  .studio-wall { inset: 0 0 302px; }
  .atelier-moodboard {
    left: 18px;
    top: 26px;
    width: 96px;
    min-height: 92px;
    padding: 9px;
    gap: 7px;
  }
  .mood-swatch { min-height: 30px; border-width: 3px; }
  .wall-vanity-mirror {
    right: 18px;
    top: 26px;
    width: 82px;
    height: 104px;
    border-width: 7px;
  }
  .wall-vanity-mirror::after {
    bottom: -22px;
    width: 58px;
    height: 8px;
  }
  .thread-shelf { top: 22px; width: 176px; }
  .thread-spool:nth-child(1) { left: 18px; }
  .thread-spool:nth-child(2) { left: 58px; }
  .thread-spool:nth-child(3) { left: 98px; }
  .thread-spool:nth-child(4) { left: 138px; }
  .wall-style-cards { display: none; }
  .studio-stage { min-height: 520px; }
  .studio-window {
    top: 94px;
    width: calc(100% - 58px);
    height: 152px;
  }
  .sewing-table {
    right: -8px;
    bottom: 96px;
    width: 150px;
    height: 82px;
  }
  .sewing-machine {
    left: 20px;
    top: -34px;
    width: 82px;
    height: 54px;
  }
  .fabric-rolls { display: none; }
  .dress-form {
    left: 14px;
    bottom: 126px;
    width: 58px;
    height: 124px;
  }
  .woven-rug { width: 82%; bottom: 34px; height: 88px; }
  .avatar-doll {
    bottom: 72px;
    transform: translateX(-50%) scale(0.82);
  }
  .studio-closet,
  .studio-snapshot,
  .studio-inventory {
    margin: 0 10px;
  }
  .studio-closet {
    grid-template-columns: repeat(3, minmax(132px, 1fr));
    overflow-x: auto;
    padding: 12px;
  }
  .gender-toggle {
    position: sticky;
    left: 0;
    grid-column: 1 / -1;
    width: min(210px, 100%);
  }
  .closet-rail { display: none; }
  .outfit-card {
    grid-template-columns: 44px 1fr;
    min-width: 132px;
    min-height: 64px;
  }
  .outfit-swatch { width: 44px; height: 44px; }
  .studio-snapshot {
    grid-template-columns: 132px 1fr auto;
    align-items: center;
    padding: 10px;
  }
  .mirror-frame { height: 144px; border-width: 8px; }
  .snapshot-stack { min-height: 114px; }
  .snapshot-card {
    width: 102px;
    height: 118px;
  }
  .studio-actions {
    display: grid;
    gap: 8px;
  }
  .studio-inventory {
    grid-template-columns: repeat(4, minmax(104px, 1fr));
    overflow-x: auto;
    margin-bottom: 10px;
  }
  .inventory-item {
    min-width: 104px;
    grid-template-columns: 44px 1fr;
  }
  .inventory-item img,
  .inventory-icon {
    width: 44px;
    height: 44px;
  }
  .studio-room {
    height: clamp(520px, calc(100svh - 200px), 680px);
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 70fr) minmax(210px, 30fr);
    grid-template-areas:
      "stage"
      "controls";
    border-radius: 18px;
  }
  .studio-stage {
    min-height: 0;
  }
  .studio-stage::before {
    background-position: center;
  }
  .avatar-doll {
    bottom: 52px;
    transform: translateX(-50%) scale(0.78);
  }
  .studio-pet {
    left: calc(50% + 96px);
    bottom: 56px;
    transform: translateY(8px) scale(0.78);
  }
  .studio-room[data-pet="cat"] .studio-pet,
  .studio-room[data-pet="bunny"] .studio-pet,
  .studio-room[data-pet="dog"] .studio-pet {
    transform: translateY(0) scale(0.78);
  }
  .studio-floating-actions {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }
  .studio-floating-actions .icon-btn {
    width: 42px;
    height: 42px;
  }
  .studio-control-deck {
    min-height: 0;
  }
  .studio-category-tabs {
    min-height: 74px;
    grid-template-columns: repeat(6, minmax(54px, 1fr));
  }
  .studio-category-tab {
    min-height: 74px;
    padding: 7px 4px 10px;
    gap: 4px;
  }
  .studio-category-tab svg {
    width: 25px;
    height: 25px;
  }
  .studio-category-tab span {
    font-size: 0.66rem;
  }
  .studio-category-tab .label-full {
    display: none;
  }
  .studio-category-tab .label-short {
    display: inline;
  }
  .studio-preset-drawer {
    min-height: 0;
    max-height: none;
    overflow: auto;
  }
  .studio-preset-panel {
    padding: 10px;
  }
  .preset-grid,
  .preset-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .preset-card {
    min-height: 62px;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    font-size: 0.82rem;
  }
  .preset-avatar,
  .skin-chip,
  .skin-preview,
  .face-chip,
  .hair-chip,
  .accessory-chip,
  .pet-chip,
  .preset-card .outfit-swatch {
    width: 44px;
    height: 44px;
    border-width: 3px;
    border-radius: 12px;
  }
  .learning-shell { min-height: 100svh; margin-top: 58px; margin-bottom: 58px; }
  .quilt-binding { inset: 116px 12px 106px; border-radius: 24px; }
  .binding-edge.top,
  .binding-edge.bottom { height: 12px; }
  .binding-edge.left,
  .binding-edge.right { width: 12px; }
  .map-hud { width: min(100% - 24px, 1280px); padding-top: 76px; }
  .map-title-panel { padding: 0 14px 14px; border: none; border-radius: 0 0 14px 14px; background: transparent; box-shadow: none; backdrop-filter: none; }
  .map-title-panel h2 { font-size: 2.2rem; }
  .map-switch button, .outline-toggle { min-height: 38px; padding: 8px 11px; font-size: 0.84rem; }
  .route-desktop { display: none; }
  .route-mobile { display: block; }
  .route-sashing-desktop { display: none; }
  .route-sashing-mobile { display: block; }
  .map-route-thread { top: 22px; height: calc(100% - 22px); }
  .route-sashing { stroke-width: 13; opacity: 0.82; }
  .route-path-underlay { stroke-width: 8; opacity: 0.72; }
  .route-path-complete,
  .route-path-current { stroke-width: 6; }
  .route-path-locked { stroke-width: 4.5; opacity: 0.45; }
  .route-focus-halo {
    fill: color-mix(in srgb, var(--warning) 20%, transparent);
    stroke-width: 0.55;
  }
  .map-project-node { width: 104px; padding: 7px; border-radius: 12px; }
  .pattern-ghost { border-radius: 8px; }
  .map-project-node img { border-width: 3px; border-radius: 8px; }
  .map-project-node b { font-size: 0.78rem; line-height: 1.04; }
  .map-project-node small { display: none; }
  .map-skill-chips { display: none; }
  .node-state {
    top: -8px;
    right: 8px;
    min-height: 22px;
    padding: 4px 7px;
    font-size: 0.58rem;
  }
  .map-project-node.project-01 { left: 24%; top: 30%; width: 96px; opacity: 0.96; }
  .map-project-node.current {
    width: min(178px, 48vw);
    min-width: 0;
    left: 50%;
    top: 43%;
    padding: 10px;
  }
  .map-project-node.project-03 { left: 74%; top: 62%; width: 98px; opacity: 0.84; }
  .map-project-node.project-04 { left: 39%; top: 78%; width: 88px; opacity: 0.42; }
  .map-project-node.project-05 { left: 69%; top: 93%; width: 86px; opacity: 0.26; }
  .map-project-node.project-06 { left: 36%; top: 99%; width: 82px; opacity: 0.22; }
  .map-project-node.project-07 { left: 18%; top: 53%; width: 84px; opacity: 0.34; }
  .map-avatar { left: calc(50% + 66px); top: calc(43% + 64px); width: 58px; height: 74px; }
  .map-avatar::before { left: 13px; width: 24px; height: 24px; box-shadow: 0 30px 0 8px var(--accent); }
  .map-avatar::after { left: -14px; top: 44px; width: 56px; }
  .quilt-signature {
    right: 18px;
    bottom: 212px;
    min-width: 132px;
    padding: 6px 10px;
    font-size: 1rem;
  }
  .map-bottom-action {
    grid-template-columns: 1fr;
    bottom: 14px;
    width: calc(100% - 20px);
    padding: 12px;
  }
  .current-project-summary { grid-template-columns: 58px 1fr; }
  .current-project-summary img { width: 58px; height: 58px; border-width: 4px; }
  .current-project-summary b { font-size: 1.12rem; }
  .map-bottom-action .btn { width: 100%; }
  .task-workbench { padding: 10px; }
  .task-topbar { grid-template-columns: auto 1fr; }
  .task-topbar .pill { grid-column: 1 / -1; width: fit-content; }
  .task-heading b { font-size: 1.28rem; line-height: 1.1; }
  .task-left { padding: 12px; }
  .tool-grid { grid-template-columns: 1fr; }
  .task-video-panel { padding: 10px; grid-template-rows: minmax(280px, 48vh) auto; }
  .task-video-stage { min-height: 280px; }
  .task-bottombar .btn { flex: 1 1 160px; }
  .prep-sheet { inset: 10px; }
}

@media (max-width: 375px) {
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  .brand strong { font-size: 1.05rem; }
  .map-project-node { width: 88px; padding: 6px; }
  .map-project-node b { font-size: 0.72rem; }
  .map-project-node.project-01 { left: 24%; top: 30%; width: 84px; }
  .map-project-node.current { width: 150px; left: 50%; top: 43%; }
  .map-project-node.project-03 { left: 75%; top: 62%; width: 84px; }
  .map-project-node.project-04 { left: 39%; top: 78%; width: 80px; }
  .map-project-node.project-05 { left: 69%; top: 93%; width: 78px; }
  .map-project-node.project-06 { left: 36%; top: 99%; width: 76px; }
  .map-project-node.project-07 { left: 18%; top: 53%; width: 78px; }
  .map-avatar { left: calc(50% + 58px); top: calc(43% + 58px); width: 52px; height: 66px; }
  .map-title-panel p { display: none; }
  .current-project-summary p { font-size: 0.78rem; }
  .task-heading b { font-size: 1.18rem; }
  .studio-room {
    height: clamp(500px, calc(100svh - 190px), 640px);
    min-height: 0;
    grid-template-rows: minmax(0, 70fr) minmax(204px, 30fr);
    grid-template-areas:
      "stage"
      "controls";
  }
  .studio-stage { min-height: 0; }
  .avatar-doll {
    bottom: 48px;
    transform: translateX(-50%) scale(0.72);
  }
  .preset-grid,
  .preset-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .preset-card {
    font-size: 0.76rem;
  }
}

/* Immersive Studio Scene */
body[data-active-route="studio"] {
  overflow: hidden;
  overflow-x: hidden;
  background: var(--bg);
}

html:has(body[data-active-route="studio"]) {
  overflow: hidden;
}

body[data-active-route="studio"] .app-nav {
  position: fixed;
  top: clamp(12px, 2vh, 22px);
  left: 50%;
  z-index: 80;
  width: min(1120px, calc(100vw - 36px));
  min-height: 58px;
  margin: 0;
  padding: 8px 10px;
  animation: none;
  transform: translateX(-50%);
  border-color: rgba(216,197,168,0.52);
  background:
    repeating-linear-gradient(90deg, rgba(160,121,79,0.07) 0 10px, transparent 10px 20px),
    rgba(252,247,236,0.58);
  box-shadow: 0 14px 34px rgba(62,53,47,0.12);
  backdrop-filter: blur(16px);
}

body[data-active-route="studio"] .nav-links {
  border-color: rgba(216,197,168,0.52);
  background: rgba(255,255,255,0.28);
}

body[data-active-route="studio"] .nav-links a.active {
  background: rgba(138,161,127,0.84);
}

.studio-screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #F3E9D6;
}

.studio-room {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.studio-stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  overflow: hidden;
}

.studio-stage::before {
  background:
    radial-gradient(circle at 50% 52%, transparent 0 34%, rgba(62,53,47,0.10) 76%),
    linear-gradient(180deg, rgba(252,247,236,0.04), transparent 28%, rgba(62,53,47,0.12)),
    url("../assets/Resources/studio_bg_day.webp") calc(50% + var(--studio-pan-x, 0px)) center / cover no-repeat,
    var(--surface);
}

.studio-stage::after {
  background:
    linear-gradient(180deg, rgba(243,233,214,0.22), transparent 18%, transparent 72%, rgba(62,53,47,0.18)),
    linear-gradient(90deg, rgba(62,53,47,0.18), transparent 17%, transparent 83%, rgba(62,53,47,0.16));
}

.avatar-doll {
  top: 52%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(1.04);
}

.avatar-image-doll {
  top: 44%;
}

.studio-pet {
  left: calc(50% + 160px);
  top: calc(52% + 150px);
  bottom: auto;
}

.studio-room[data-pet="cat"] .studio-pet,
.studio-room[data-pet="bunny"] .studio-pet,
.studio-room[data-pet="dog"] .studio-pet {
  transform: translateY(0) scale(1);
}

.studio-floating-actions {
  right: clamp(20px, 3vw, 42px);
  bottom: calc(clamp(88px, 11svh, 112px) + max(14px, env(safe-area-inset-bottom)));
  z-index: 18;
}

.studio-floating-actions .icon-btn {
  background: rgba(252,247,236,0.72);
  border-color: rgba(216,197,168,0.62);
  box-shadow: 0 14px 26px rgba(62,53,47,0.18);
  backdrop-filter: blur(14px);
}

.studio-control-deck {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 70;
  width: min(980px, calc(100vw - 32px));
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.studio-category-tabs,
.studio-preset-drawer {
  pointer-events: auto;
}

.studio-category-tabs {
  width: 100%;
  min-height: 64px;
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  overflow: hidden;
  border: 1px solid rgba(216,197,168,0.62);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(252,247,236,0.68)),
    rgba(252,247,236,0.62);
  box-shadow: 0 16px 34px rgba(62,53,47,0.18);
  backdrop-filter: blur(16px);
}

.studio-category-tab {
  min-height: 64px;
  padding: 6px 8px 8px;
  border-left-color: rgba(216,197,168,0.54);
}

.studio-category-tab svg {
  width: 25px;
  height: 25px;
}

.studio-category-tab span {
  font-size: 0.74rem;
}

.studio-category-tab.active {
  background: rgba(255,255,255,0.34);
}

.studio-category-tab.expanded {
  color: var(--negative);
  background: rgba(255,255,255,0.52);
}

.studio-preset-drawer {
  align-self: center;
  width: fit-content;
  max-width: min(860px, 100%);
  max-height: min(48svh, 360px);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(216,197,168,0.64);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.66), rgba(252,247,236,0.58)),
    rgba(252,247,236,0.48);
  box-shadow: 0 18px 42px rgba(62,53,47,0.18);
  backdrop-filter: blur(18px);
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  scrollbar-width: thin;
  transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.24s ease, visibility 0.18s ease;
}

.studio-room:not([data-drawer-open="true"]) .studio-preset-drawer {
  max-height: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  overflow: hidden;
}

.studio-preset-panel {
  padding: 12px;
}

.preset-grid,
.preset-grid.compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: none;
  gap: 10px;
}

.preset-card {
  flex: 0 0 clamp(118px, 13vw, 136px);
  min-height: 116px;
  padding: 10px 8px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  border-radius: 18px;
}

.preset-card > span:last-child {
  font-size: 0.86rem;
  line-height: 1.12;
}

.preset-avatar,
.skin-chip,
.skin-preview,
.face-chip,
.hair-chip,
.accessory-chip,
.pet-chip,
.preset-card .outfit-swatch {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

body.studio-photo-mode .app-nav,
body.studio-photo-mode .studio-control-deck,
body.studio-photo-mode .studio-floating-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.studio-photo-mode .studio-stage::after {
  background:
    linear-gradient(180deg, rgba(243,233,214,0.08), transparent 22%, rgba(62,53,47,0.10)),
    linear-gradient(90deg, rgba(62,53,47,0.10), transparent 18%, transparent 82%, rgba(62,53,47,0.10));
}

body.studio-photo-mode .studio-stage.can-pan {
  cursor: grab;
}

body.studio-photo-mode .studio-stage.is-panning {
  cursor: grabbing;
}

body.studio-photo-mode .studio-stage::before {
  filter: saturate(1.04) contrast(1.02);
}

body.studio-photo-mode .studio-explore-close,
body.studio-photo-mode .studio-explore-layer {
  opacity: 1;
  visibility: visible;
}

body.studio-photo-mode .studio-explore-close {
  pointer-events: auto;
}

body.studio-photo-mode .studio-explore-layer {
  pointer-events: none;
}

body.studio-photo-mode .studio-hotspot {
  pointer-events: auto;
}

@media (max-width: 680px) {
  body[data-active-route="studio"] .app-nav {
    top: 14px;
    width: calc(100vw - 24px);
    min-height: 74px;
    padding: 8px;
    border-radius: 22px;
    background:
      repeating-linear-gradient(90deg, rgba(160,121,79,0.06) 0 10px, transparent 10px 20px),
      rgba(252,247,236,0.50);
  }

  body[data-active-route="studio"] .brand {
    gap: 8px;
  }

  body[data-active-route="studio"] .brand strong {
    font-size: 1.08rem;
  }

  body[data-active-route="studio"] .nav-links {
    min-width: 0;
    padding: 3px;
    gap: 2px;
    background: rgba(255,255,255,0.24);
  }

  body[data-active-route="studio"] .nav-links a {
    min-height: 32px;
    padding: 6px 7px;
    font-size: 0.76rem;
  }

  .studio-screen {
    width: 100vw;
    margin: 0;
    padding: 0;
  }

  .studio-room {
    height: 100svh;
    border-radius: 0;
  }

  .studio-stage::before {
    background-position: calc(50% + var(--studio-pan-x, 0px)) 50%;
  }

  .avatar-doll {
    top: 51%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.82);
  }

  .avatar-image-doll {
    top: 49%;
  }

  .studio-pet {
    left: calc(50% + 102px);
    top: calc(51% + 118px);
    bottom: auto;
  }

  .studio-room[data-pet="cat"] .studio-pet,
  .studio-room[data-pet="bunny"] .studio-pet,
  .studio-room[data-pet="dog"] .studio-pet {
    transform: translateY(0) scale(0.8);
  }

  .studio-floating-actions {
    right: 18px;
    bottom: calc(104px + max(10px, env(safe-area-inset-bottom)));
  }

  .studio-floating-actions .icon-btn {
    width: 42px;
    height: 42px;
  }

  .studio-control-deck {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    gap: 6px;
  }

  .studio-category-tabs {
    min-height: 64px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-radius: 18px;
  }

  .studio-category-tab {
    min-height: 64px;
    padding: 6px 3px 8px;
  }

  .studio-category-tab svg {
    width: 22px;
    height: 22px;
  }

  .studio-category-tab span {
    font-size: 0.62rem;
  }

  .studio-category-tab .label-full {
    display: none;
  }

  .studio-category-tab .label-short {
    display: inline;
  }

  .studio-preset-drawer {
    max-width: 100%;
    max-height: min(42svh, 320px);
    border-radius: 20px;
  }

  .studio-preset-panel {
    padding: 9px;
  }

  .preset-grid,
  .preset-grid.compact {
    gap: 8px;
  }

  .preset-card {
    flex-basis: clamp(70px, 20vw, 82px);
    min-height: 86px;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 7px 5px;
    border-radius: 14px;
    font-size: 0.7rem;
    text-align: center;
  }

  .preset-avatar,
  .skin-chip,
  .skin-preview,
  .face-chip,
  .hair-chip,
  .accessory-chip,
  .pet-chip,
  .preset-card .outfit-swatch {
    width: 42px;
    height: 42px;
    border-width: 3px;
    border-radius: 12px;
  }
}

@media (max-width: 375px) {
  .avatar-doll {
    top: 51%;
    transform: translate(-50%, -50%) scale(0.74);
  }

  .avatar-image-doll {
    top: 49%;
  }

  .studio-category-tab span {
    font-size: 0.58rem;
  }

  .preset-card {
    font-size: 0.74rem;
  }
}

/* Scroll Quilt Journey */
body[data-active-route="learning"] {
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(252,247,236,0.98) 0%, rgba(252,247,236,0.92) 58%, rgba(252,247,236,0.98) 100%),
    radial-gradient(ellipse at 92% 0%, rgba(255,255,255,0.82), rgba(252,247,236,0.74) 28%, transparent 58%),
    radial-gradient(circle at 18% 4%, rgba(255,255,255,0.76), transparent 18rem),
    radial-gradient(circle at 76% 12%, rgba(255,240,202,0.62), transparent 22rem),
    radial-gradient(circle at 42% 32%, rgba(255,255,255,0.34), transparent 28rem),
    linear-gradient(180deg,
      #FCF7EC 0%,
      #FAEFD4 24%,
      #F7E6C4 52%,
      #F5E2B9 100%);
  background-size: auto;
}

html:has(body[data-active-route="learning"]) {
  overflow-x: hidden;
  background: #FCF7EC;
}

html:has(body[data-active-route="learning"]:not(.learning-skills-view)) {
  overflow: hidden;
}

html:has(body.learning-skills-view) {
  background: #EAF6FE;
}

body.learning-skills-view {
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.42), transparent 28rem),
    #EAF6FE;
}

.learning-shell {
  --journey-stage-offset: 88px;
  --journey-star-fixed-left: 39px;
  --journey-star-fixed-top: 89px;
  width: 100vw;
  min-height: calc(100svh - var(--journey-stage-offset));
  height: calc(100svh - var(--journey-stage-offset));
  margin: 0 0 0 calc(50% - 50vw);
  padding-top: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      #FCF7EC 0%,
      #FBF2DC 12%,
      #FAEACB 28%,
      #F7E3BD 52%,
      #F5E2B9 100%);
  background-size: auto;
  isolation: isolate;
  scroll-snap-type: none;
}

.learning-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(255,255,255,0.54), rgba(252,247,236,0.42) 26%, transparent 52%),
    linear-gradient(90deg, rgba(252,247,236,0.44), transparent 14%, transparent 82%, rgba(252,247,236,0.48)),
    linear-gradient(180deg, rgba(252,247,236,0.94) 0%, rgba(252,247,236,0.68) 11%, rgba(250,234,203,0.32) 26%, transparent 44%);
  background-size: auto, auto, auto;
  opacity: 0.76;
}

.learning-map-canvas,
.learning-map-fallback,
.learning-map-fallback.visible {
  display: none;
}

.learning-shell .quilt-binding,
.learning-shell .scene-seam,
.learning-shell .scene-next-peek,
.learning-shell .scroll-quilt-track .map-avatar,
.learning-shell .quilt-signature {
  display: none !important;
}

.learning-shell .quilt-binding {
  display: none;
  position: absolute;
  inset: 0 clamp(12px, 2.2vw, 34px) 24px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.54;
}

.learning-shell .binding-edge.top,
.learning-shell .binding-edge.bottom {
  height: 14px;
  border-color: rgba(255,255,255,0.10);
  background:
    linear-gradient(90deg, rgba(252,247,236,0.08), rgba(252,247,236,0.04), rgba(252,247,236,0.08)),
    rgba(252,247,236,0.04);
}

.learning-shell .binding-edge.top {
  opacity: 0.08;
}

.learning-shell .binding-edge.bottom {
  display: none;
}

.learning-shell .binding-edge.left,
.learning-shell .binding-edge.right {
  display: none;
  width: 14px;
  border-color: rgba(255,255,255,0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(117,170,224,0.14), rgba(11,25,58,0.16)),
    rgba(255,255,255,0.14);
}

.learning-shell .map-hud {
  position: fixed;
  top: var(--journey-star-fixed-top);
  left: var(--journey-star-fixed-left);
  z-index: 24;
  width: max-content;
  margin: 0;
  padding-top: clamp(30px, 6vh, 40px);
  gap: 0;
  justify-content: flex-start;
  pointer-events: none;
}

.learning-shell .map-hud.animate {
  animation: none;
  opacity: 1;
  transform: none;
}

.learning-shell .map-title-panel {
  display: none;
  width: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.learning-shell .map-route-tools {
  margin-left: 0;
  pointer-events: auto;
}

.learning-shell .map-route-tools.learning-star-tools {
  position: relative;
  z-index: 72;
  margin-left: 0;
}

.learning-shell .course-popover {
  z-index: 40;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, white), var(--surface));
}

.scroll-quilt-layer {
  --journey-bottom-air: 0px;
  position: relative;
  inset: auto;
  z-index: 5;
  min-height: 100%;
  height: 100%;
  padding: 0;
  pointer-events: auto;
}

.scroll-quilt-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.scroll-quilt-track::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 48.5%, rgba(255,255,255,0.22) 48.5% 51.5%, transparent 51.5%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(62,53,47,0.04) 46%, rgba(31,29,42,0.12) 100%);
  opacity: 0.34;
}

.quilt-scene {
  --scene-bottom-solid: #10243D;
  --scene-bottom-fade: rgba(16,36,61,0.66);
  --scene-bottom-glow: rgba(215,226,206,0.22);
  position: absolute;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(116px, 14vh, 156px) clamp(42px, 6vw, 92px) clamp(56px, 8vh, 86px);
  display: grid;
  align-items: center;
  isolation: isolate;
  scroll-snap-align: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    visibility 0.42s ease,
    transform 0.58s cubic-bezier(.2,.76,.22,1);
  background:
    linear-gradient(90deg, rgba(31,29,42,0.22), transparent 18%, transparent 82%, rgba(31,29,42,0.18)),
    linear-gradient(180deg, rgba(255,255,255,0.28), transparent 18%, transparent 68%, var(--scene-bottom-fade)),
    var(--scene-bg) center / cover no-repeat,
    var(--scene-bottom-solid);
}

.quilt-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.quilt-scene.is-past {
  transform: translateY(-2.5vh) scale(1.02);
}

.quilt-scene.is-future {
  transform: translateY(2.5vh) scale(1.02);
}

.quilt-scene.scene-01 {
  --scene-bg: url("../assets/background/scene-01-beach.png");
  --scene-bottom-solid: #A8B7A9;
  --scene-bottom-fade: rgba(99,128,121,0.48);
  --scene-bottom-glow: rgba(250,232,190,0.34);
}

.quilt-scene.scene-02 {
  --scene-bg: url("../assets/background/scene-02-seaside-market.png");
  --scene-bottom-solid: #6F8F89;
  --scene-bottom-fade: rgba(70,101,96,0.52);
  --scene-bottom-glow: rgba(255,228,181,0.28);
}

.quilt-scene.scene-03 {
  --scene-bg: url("../assets/background/scene-03-meadow.png");
  --scene-bottom-solid: #6E8E62;
  --scene-bottom-fade: rgba(77,108,72,0.54);
  --scene-bottom-glow: rgba(221,234,182,0.30);
}

.quilt-scene.scene-04 {
  --scene-bg: url("../assets/background/scene-04-flower-field.png");
  --scene-bottom-solid: #7F8F70;
  --scene-bottom-fade: rgba(93,109,74,0.54);
  --scene-bottom-glow: rgba(243,219,199,0.30);
}

.quilt-scene.scene-05 {
  --scene-bg: url("../assets/background/scene-05-forest-creek.png");
  --scene-bottom-solid: #375B54;
  --scene-bottom-fade: rgba(35,70,64,0.62);
  --scene-bottom-glow: rgba(195,222,185,0.24);
}

.quilt-scene.scene-06 {
  --scene-bg: url("../assets/background/scene-06-treehouse.png");
  --scene-bottom-solid: #243F3A;
  --scene-bottom-fade: rgba(22,48,44,0.66);
  --scene-bottom-glow: rgba(186,209,170,0.22);
}

.quilt-scene.scene-07 {
  --scene-bg: url("../assets/background/scene-07-cloud-sky.png");
  --scene-bottom-solid: #EAF6FE;
  --scene-bottom-fade: rgba(232,244,255,0.86);
  --scene-bottom-glow: rgba(255,255,255,0.46);
}

.quilt-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #FCF7EC 0, rgba(252,247,236,0.85) 7vh, rgba(245,226,185,0.35) 16vh, transparent 22vh),
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 20%, transparent 56%, var(--scene-bottom-glow) 78%, var(--scene-bottom-fade) 100%),
    radial-gradient(ellipse at 50% 47%, rgba(255,255,255,0.16), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 20%, transparent 72%, rgba(255,255,255,0.12));
  mix-blend-mode: normal;
  opacity: 0.86;
}

.quilt-scene.scene-01::after {
  background:
    linear-gradient(180deg, #FCF7EC 0, rgba(252,247,236,0.85) 10vh, rgba(245,226,185,0.35) 24vh, transparent 32vh),
    linear-gradient(180deg, transparent 48%, var(--scene-bottom-glow) 78%, var(--scene-bottom-fade) 100%),
    radial-gradient(ellipse at 50% 15%, rgba(255,255,255,0.38), transparent 46%),
    radial-gradient(ellipse at 50% 47%, rgba(255,255,255,0.16), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 20%, transparent 72%, rgba(255,255,255,0.18));
  mix-blend-mode: normal;
  opacity: 1;
}

.quilt-scene.scene-07::after {
  background:
    linear-gradient(180deg, #FCF7EC 0, rgba(252,247,236,0.85) 7vh, rgba(245,226,185,0.35) 16vh, transparent 22vh),
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 18%, transparent 56%, rgba(235,246,255,0.34) 70%, rgba(232,244,255,0.84) 86%, #EAF6FE 100%),
    radial-gradient(ellipse at 50% 88%, rgba(255,255,255,0.46), transparent 44%),
    radial-gradient(ellipse at 50% 47%, rgba(255,255,255,0.16), transparent 46%);
  mix-blend-mode: normal;
  opacity: 1;
}

.quilt-scene::before {
  content: none;
  position: absolute;
  inset: clamp(58px, 9vh, 104px) clamp(20px, 4vw, 72px) clamp(92px, 13vh, 142px);
  z-index: 0;
  border: 1px dashed rgba(255,255,255,0.36);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(252,247,236,0.30), transparent 18%, transparent 82%, rgba(252,247,236,0.24)),
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 32%, transparent 74%, rgba(62,53,47,0.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  transform: none;
  opacity: 0.86;
}

.quilt-scene:nth-child(odd) {
  justify-items: center;
  --scene-rotate: -0.7deg;
}

.quilt-scene:nth-child(even) {
  justify-items: center;
  --scene-rotate: 0.8deg;
}

.quilt-scene:nth-child(odd) .map-project-node {
  margin-left: 0;
  --r: -1.2deg;
}

.quilt-scene:nth-child(even) .map-project-node {
  margin-right: 0;
  --r: 1.1deg;
}

.quilt-scene.scene-03 .map-project-node,
.quilt-scene.scene-07 .map-project-node {
  --r: 1.8deg;
}

.quilt-scene.scene-04 .map-project-node,
.quilt-scene.scene-06 .map-project-node {
  --r: -1.5deg;
}

.scene-seam {
  position: absolute;
  top: clamp(-128px, -15vh, -92px);
  left: 50%;
  z-index: 1;
  width: clamp(42px, 6vw, 72px);
  height: clamp(238px, 31vh, 286px);
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
  color: color-mix(in srgb, var(--text-secondary) 42%, var(--surface));
  filter: drop-shadow(0 7px 10px rgba(31, 62, 104, 0.12));
}

.scene-star {
  fill: currentColor;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0.58;
}

.quilt-scene.seam-complete .scene-seam {
  color: var(--accent);
}

.quilt-scene.seam-current .scene-seam {
  color: var(--warning);
}

.quilt-scene.seam-locked .scene-seam {
  color: color-mix(in srgb, var(--text-secondary) 38%, var(--surface));
}

.quilt-scene:first-child .scene-seam {
  top: clamp(38px, 6vh, 72px);
  height: clamp(124px, 16vh, 156px);
}

.quilt-scene.seam-current .scene-star {
  opacity: 0.9;
  animation: starTrailPulse 1.8s ease-in-out infinite;
}

.quilt-scene.seam-current .scene-star:nth-child(2) { animation-delay: 0.12s; }
.quilt-scene.seam-current .scene-star:nth-child(3) { animation-delay: 0.24s; }
.quilt-scene.seam-current .scene-star:nth-child(4) { animation-delay: 0.36s; }
.quilt-scene.seam-current .scene-star:nth-child(5) { animation-delay: 0.48s; }
.quilt-scene.seam-current .scene-star:nth-child(6) { animation-delay: 0.60s; }
.quilt-scene.seam-current .scene-star:nth-child(7) { animation-delay: 0.72s; }

@keyframes starTrailPulse {
  0%, 100% { opacity: 0.58; transform: scale(0.92); }
  45% { opacity: 1; transform: scale(1.18); }
}

.quilt-scene.is-active .scene-star {
  opacity: 1;
}

.scroll-quilt-track .map-project-node,
.scroll-quilt-track .map-project-node.current,
.scroll-quilt-track .map-project-node.project-01,
.scroll-quilt-track .map-project-node.project-03,
.scroll-quilt-track .map-project-node.project-04,
.scroll-quilt-track .map-project-node.project-05,
.scroll-quilt-track .map-project-node.project-06,
.scroll-quilt-track .map-project-node.project-07 {
  position: relative;
  left: auto;
  top: auto;
  z-index: 4;
  width: clamp(420px, 58vw, 760px);
  min-width: 0;
  padding: clamp(14px, 1.8vw, 22px);
  padding-bottom: clamp(70px, 7.5vw, 88px);
  border-radius: 22px;
  opacity: 1;
  transform: rotate(var(--r, 0deg)) scale(0.92);
  transition: transform 0.34s ease, opacity 0.34s ease, filter 0.34s ease;
}

.scroll-quilt-track .map-project-node.current {
  border: 2px solid color-mix(in srgb, var(--warning) 54%, white);
}

.scroll-quilt-track .map-project-node.status-locked {
  opacity: 0.88;
}

.quilt-scene.is-active .map-project-node,
.quilt-scene:focus-within .map-project-node {
  opacity: 1;
  filter: none;
  transform: rotate(var(--r, 0deg)) scale(1);
}

.quilt-scene:not(.is-active) .map-project-node {
  opacity: 1;
  filter: none;
}

.quilt-scene.is-past:not(.is-active) .map-project-node {
  opacity: 1;
  filter: none;
}

.scroll-quilt-track .map-project-node button {
  gap: 12px;
}

.scroll-quilt-track .map-project-node img,
.scroll-quilt-track .pattern-ghost {
  aspect-ratio: 1 / 0.64;
  border-radius: 16px;
}

.scroll-quilt-track .map-project-node img {
  border-width: 7px;
  box-shadow: 0 16px 28px rgba(62,53,47,0.13);
}

.scroll-quilt-track .pattern-ghost {
  border: 1px dashed color-mix(in srgb, var(--text-secondary) 44%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 14%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--text-secondary) 10%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--surface) 74%, transparent);
  background-size: 22px 22px, 22px 22px, auto;
}

.scroll-quilt-track .map-project-node.status-locked .pattern-ghost::before {
  background: color-mix(in srgb, var(--fabric) 38%, transparent);
  border: 1px dashed color-mix(in srgb, var(--fabric-ink) 38%, transparent);
}

.scroll-quilt-track .map-project-node b {
  font-size: clamp(1.5rem, 2.6vw, 2.55rem);
}

.scroll-quilt-track .map-project-node small {
  margin-top: 6px;
  font-size: clamp(0.82rem, 1.1vw, 1rem);
}

.level-card-cta {
  position: absolute;
  right: clamp(18px, 2.2vw, 28px);
  bottom: clamp(18px, 2vw, 24px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: clamp(186px, 22vw, 260px);
  min-height: 46px;
  max-width: min(250px, calc(100% - 36px));
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: color-mix(in srgb, var(--text-secondary) 84%, var(--text));
  box-shadow: 0 10px 0 rgba(62,53,47,0.05), 0 18px 26px rgba(62,53,47,0.10);
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
  isolation: isolate;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.level-card-cta.is-primary {
  border-color: color-mix(in srgb, var(--accent) 74%, var(--surface));
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.24), transparent 36%),
    var(--accent);
  color: #fff;
  animation: levelCtaPulse 2.4s ease-in-out infinite;
}

.level-card-cta.is-primary::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -62%;
  z-index: 0;
  width: 52%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
  transform: skewX(-18deg);
  animation: levelCtaShine 3.1s ease-in-out infinite;
}

.level-card-cta:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 0 rgba(62,53,47,0.06), 0 22px 30px rgba(62,53,47,0.14);
  filter: saturate(1.04);
}

.level-card-cta:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  box-shadow: none;
}

@keyframes levelCtaPulse {
  0%, 100% {
    box-shadow:
      0 10px 0 rgba(62,53,47,0.06),
      0 18px 26px rgba(62,53,47,0.12),
      0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent);
  }
  48% {
    box-shadow:
      0 11px 0 rgba(62,53,47,0.06),
      0 24px 34px rgba(62,53,47,0.18),
      0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

@keyframes levelCtaShine {
  0%, 42% { left: -62%; opacity: 0; }
  56% { opacity: 0.88; }
  78%, 100% { left: 116%; opacity: 0; }
}

.scroll-quilt-track .map-project-node.current .map-skill-chips {
  position: static;
  inset: auto;
  justify-content: flex-start;
  margin-top: 12px;
}

.scroll-quilt-track .map-skill-chip {
  min-height: 30px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.scene-next-peek {
  position: absolute;
  bottom: clamp(34px, 7vh, 74px);
  z-index: 2;
  width: clamp(190px, 23vw, 310px);
  aspect-ratio: 1 / 0.64;
  border: 1px dashed color-mix(in srgb, var(--text-secondary) 34%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 10%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--text-secondary) 8%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--peek-fabric, var(--surface)) 66%, transparent);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: 0 14px 26px rgba(62,53,47,0.08);
  opacity: 0.58;
  transform: translateY(38%) rotate(2deg);
  pointer-events: none;
}

.quilt-scene:nth-child(odd) .scene-next-peek {
  right: clamp(28px, 9vw, 140px);
}

.quilt-scene:nth-child(even) .scene-next-peek {
  left: clamp(28px, 9vw, 140px);
  transform: translateY(38%) rotate(-2deg);
}

.scene-next-peek.fabric-wood { --peek-fabric: color-mix(in srgb, var(--wood) 34%, var(--surface)); }
.scene-next-peek.fabric-denim { --peek-fabric: color-mix(in srgb, var(--accent-secondary) 22%, var(--surface)); }
.scene-next-peek.fabric-cream { --peek-fabric: color-mix(in srgb, var(--surface-hover) 88%, var(--warning)); }
.scene-next-peek.fabric-rose { --peek-fabric: color-mix(in srgb, var(--rose) 30%, var(--surface)); }

.scene-next-peek::after {
  content: "";
  position: absolute;
  inset: 24% 32%;
  background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
}

.scene-next-peek.shape-bag::after {
  inset: 31% 33% 22%;
  border-radius: 5px 5px 13px 13px;
}

.scene-next-peek.shape-trousers::after {
  inset: 19% 34% 17%;
  clip-path: polygon(20% 0, 80% 0, 74% 100%, 54% 100%, 50% 34%, 46% 100%, 26% 100%);
}

.scene-next-peek.shape-skirt::after {
  inset: 18% 30% 15%;
  clip-path: polygon(32% 0, 68% 0, 90% 100%, 10% 100%);
}

.scene-next-peek.shape-dress::after {
  inset: 16% 28% 12%;
  clip-path: polygon(35% 0, 65% 0, 74% 30%, 92% 100%, 8% 100%, 26% 30%);
}

.scene-next-peek.shape-top::after {
  inset: 24% 26% 18%;
  clip-path: polygon(24% 10%, 39% 0, 61% 0, 76% 10%, 100% 35%, 84% 55%, 76% 42%, 76% 100%, 24% 100%, 24% 42%, 16% 55%, 0 35%);
}

.scroll-quilt-track .map-avatar {
  left: auto;
  top: auto;
  right: clamp(74px, 13vw, 180px);
  bottom: clamp(150px, 20vh, 230px);
  width: 76px;
  height: 96px;
  transform: rotate(-4deg);
}

.quilt-rail {
  position: fixed;
  top: 50%;
  right: clamp(14px, 2.6vw, 42px);
  z-index: 30;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  padding: 10px 8px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 14px 28px rgba(62,53,47,0.12);
  backdrop-filter: blur(14px);
}

.quilt-rail button {
  width: 17px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 28%, transparent);
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 5px, rgba(62,53,47,0.035) 5px 10px),
    var(--surface-hover);
  cursor: pointer;
  transform: rotate(-3deg);
}

.quilt-rail button:nth-child(even) {
  transform: rotate(3deg);
}

.quilt-rail button.status-complete {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--surface));
}

.quilt-rail button.status-current {
  background: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 78%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 18%, transparent);
}

.quilt-rail button.status-locked {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 12%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--surface) 70%, transparent);
  background-size: 6px 6px, auto;
  opacity: 0.7;
}

.quilt-rail button.active {
  background: var(--negative);
  border-color: color-mix(in srgb, var(--negative) 76%, var(--surface));
  opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--negative) 18%, transparent);
}

.quilt-rail button.status-current.active {
  background: var(--warning);
  border-color: var(--negative);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--surface) 86%, transparent),
    0 0 0 7px color-mix(in srgb, var(--negative) 22%, transparent);
}

.quilt-rail button.status-complete.active {
  background: var(--accent);
  border-color: var(--negative);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--surface) 86%, transparent),
    0 0 0 7px color-mix(in srgb, var(--negative) 22%, transparent);
}

.quilt-signature {
  position: fixed;
  right: clamp(54px, 8vw, 128px);
  bottom: 142px;
  z-index: 14;
}

.map-bottom-action,
.bottom-status-dock {
  display: none !important;
}

.current-project-summary {
  min-width: 0;
}

.current-project-summary div {
  min-width: 0;
}

.current-project-summary b,
.current-project-summary p {
  overflow-wrap: anywhere;
}

@media (max-width: 1060px) {
  .learning-shell .map-hud {
    display: flex;
    top: 89px;
    padding-top: clamp(30px, 6vh, 40px);
  }

  .quilt-scene {
    padding-inline: 28px;
  }

  .scroll-quilt-track .map-project-node,
  .scroll-quilt-track .map-project-node.current,
  .scroll-quilt-track .map-project-node.project-01,
  .scroll-quilt-track .map-project-node.project-03,
  .scroll-quilt-track .map-project-node.project-04,
  .scroll-quilt-track .map-project-node.project-05,
  .scroll-quilt-track .map-project-node.project-06,
  .scroll-quilt-track .map-project-node.project-07 {
    width: clamp(360px, 64vw, 640px);
  }
}

@media (max-width: 768px) {
  .learning-shell {
    --journey-stage-offset: 78px;
    --journey-star-fixed-left: 31px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .learning-shell .quilt-binding {
    inset: 0 8px 96px;
    opacity: 0.42;
  }

  .learning-shell .map-hud {
    top: 89px;
    width: calc(100% - 24px);
    justify-content: flex-start;
  }

  .learning-shell .map-route-tools {
    gap: 7px;
  }

  .learning-star-tools {
    --star-size: 52px;
  }

  .learning-star-tools[data-tools-open="true"] .learning-tool-ribbon {
    max-width: calc(100vw - 86px);
    padding-right: 8px;
  }

  .skills-route-tools .course-popover {
    flex-basis: 100%;
  }

  .learning-shell .map-switch button,
  .learning-shell .outline-toggle {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.8rem;
  }

  .scroll-quilt-layer {
    --journey-bottom-air: 150px;
    padding-bottom: 0;
  }

  .scroll-quilt-track {
    margin-top: -18px;
    padding: 0;
  }

  .quilt-scene {
    min-height: calc(100svh + var(--journey-bottom-air));
    padding: 66px 12px calc(136px + var(--journey-bottom-air));
    justify-items: center;
  }

  .quilt-scene::before {
    content: none;
    inset: 64px 12px 134px;
    border-radius: 20px;
  }

  .quilt-scene:nth-child(odd),
  .quilt-scene:nth-child(even) {
    justify-items: center;
  }

  .quilt-scene:nth-child(odd) .map-project-node,
  .quilt-scene:nth-child(even) .map-project-node {
    margin: 0;
  }

  .scroll-quilt-track .map-project-node,
  .scroll-quilt-track .map-project-node.current,
  .scroll-quilt-track .map-project-node.project-01,
  .scroll-quilt-track .map-project-node.project-03,
  .scroll-quilt-track .map-project-node.project-04,
  .scroll-quilt-track .map-project-node.project-05,
  .scroll-quilt-track .map-project-node.project-06,
  .scroll-quilt-track .map-project-node.project-07 {
    width: min(88vw, 390px);
    padding: 12px;
    padding-bottom: 66px;
    border-radius: 16px;
  }

  .level-card-cta {
    right: 14px;
    bottom: 14px;
    min-height: 40px;
    max-width: calc(100% - 28px);
    padding: 0 15px;
    border-radius: 12px;
    font-size: 0.76rem;
  }

  .scroll-quilt-track .map-project-node img,
  .scroll-quilt-track .pattern-ghost {
    aspect-ratio: 1 / 0.72;
    border-radius: 12px;
  }

  .scroll-quilt-track .map-project-node img {
    border-width: 5px;
  }

  .scroll-quilt-track .map-project-node b {
    font-size: 1.28rem;
  }

  .scroll-quilt-track .map-project-node small {
    display: block;
    font-size: 0.76rem;
  }

  .scroll-quilt-track .map-skill-chips {
    display: none;
  }

  .scene-seam {
    top: clamp(-96px, -13vh, -70px);
    width: 42px;
    height: clamp(188px, 26vh, 226px);
  }

  .scene-star {
    font-size: 12px;
  }

  .scene-next-peek {
    width: 132px;
    bottom: 92px;
    opacity: 0.48;
  }

  .quilt-scene:nth-child(odd) .scene-next-peek,
  .quilt-scene:nth-child(even) .scene-next-peek {
    left: auto;
    right: 22px;
  }

  .scroll-quilt-track .map-avatar {
    right: 18px;
    bottom: 134px;
    width: 52px;
    height: 66px;
  }

  .scroll-quilt-track .map-avatar::before {
    left: 12px;
    top: 8px;
    width: 22px;
    height: 22px;
    box-shadow: 0 28px 0 7px var(--accent);
  }

  .scroll-quilt-track .map-avatar::after {
    left: -13px;
    top: 42px;
    width: 54px;
  }

  .quilt-rail {
    right: 7px;
    gap: 7px;
    padding: 8px 6px;
  }

  .quilt-rail button {
    width: 11px;
    height: 14px;
    border-radius: 4px;
  }

  .quilt-signature {
    display: none;
  }

  .map-bottom-action {
    grid-template-columns: 1fr;
    width: calc(100% - 20px);
    bottom: 10px;
    padding: 10px;
    gap: 10px;
  }

  .current-project-summary {
    grid-template-columns: 54px 1fr;
    gap: 10px;
  }

  .current-project-summary img {
    width: 54px;
    height: 54px;
    border-width: 4px;
    border-radius: 12px;
  }

  .current-project-summary b {
    font-size: 1.02rem;
  }

  .current-project-summary p {
    font-size: 0.74rem;
    line-height: 1.28;
  }

  .map-bottom-action .btn {
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 680px) {
  .learning-shell .map-hud {
    top: 130px;
    padding-top: 10px;
  }
}

@media (max-width: 375px) {
  .learning-star-tools {
    --star-size: 48px;
  }

  .learning-star-toggle span {
    font-size: 1.22rem;
  }

  .skill-map,
  .skill-map.is-filtered {
    --skill-card-width: min(100%, 196px);
  }

  .piece-construction .skill-swatch-row,
  .piece-finishing .skill-swatch-row,
  .piece-zipper .skill-swatch-row {
    grid-template-columns: minmax(0, var(--skill-card-width));
  }

  .scroll-quilt-track .map-project-node,
  .scroll-quilt-track .map-project-node.current,
  .scroll-quilt-track .map-project-node.project-01,
  .scroll-quilt-track .map-project-node.project-03,
  .scroll-quilt-track .map-project-node.project-04,
  .scroll-quilt-track .map-project-node.project-05,
  .scroll-quilt-track .map-project-node.project-06,
  .scroll-quilt-track .map-project-node.project-07 {
    width: min(88vw, 330px);
  }

  .scroll-quilt-track .map-project-node b {
    font-size: 1.08rem;
  }

  .current-project-summary p {
    font-size: 0.7rem;
  }
}

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .page-shell {
    width: 100%;
    max-width: 100%;
    padding-inline: 10px;
  }

  section,
  .module-screen,
  .learning-shell,
  .studio-screen,
  .community-screen,
  .store-screen {
    margin: 0;
  }

  .hero {
    padding-top: 12px;
  }

  .learning-shell,
  .community-screen,
  .store-screen,
  .task-screen {
    width: 100%;
    max-width: 100%;
  }

  .learning-shell {
    margin-bottom: 0;
  }

  .community-screen,
  .store-screen {
    padding: 10px 10px 18px;
  }

  .store-screen {
    padding-top: 0;
  }

  .showcase-hero,
  .skills-route-tools {
    margin-top: 0;
  }

  .skills-panel {
    margin-top: 12px;
  }

  body[data-active-route="studio"] .app-nav {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
  }

  .studio-screen,
  .studio-room {
    width: 100%;
    max-width: 100%;
  }

  .studio-control-deck {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* Community v2: Pinterest pace, Ravelry filtering, light co-op signals */
.community-social {
  position: relative;
  gap: 14px;
}

.community-screen.reveal {
  transform: none;
}

.community-hero {
  min-height: clamp(74px, 9vh, 118px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 2px;
}

.community-hero > div {
  min-width: 0;
}

.community-hero p {
  max-width: 680px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-weight: 820;
  line-height: 1.45;
}

.community-saved-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--negative) 38%, var(--border));
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.88), transparent 32%),
    color-mix(in srgb, var(--surface) 86%, white);
  color: var(--negative);
  box-shadow: 0 14px 30px rgba(62,53,47,0.14);
  cursor: pointer;
}

.community-saved-toggle b {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--surface) 92%, white);
  border-radius: 999px;
  background: var(--warning);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.7rem;
  line-height: 1;
}

.community-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "rail"
    "main";
  gap: 14px;
}

.community-rail {
  grid-area: rail;
  position: sticky;
  top: 92px;
  z-index: 24;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  box-shadow: 0 14px 30px rgba(62,53,47,0.10);
  backdrop-filter: blur(16px);
}

.community-search-box {
  min-height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, white);
  box-shadow: none;
}

.community-drawer {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-module {
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.52), transparent 38%),
    color-mix(in srgb, var(--surface) 88%, white);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.community-module::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 18%, transparent);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.community-module:hover,
.community-module:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-secondary) 36%, var(--border));
  box-shadow: 0 12px 24px rgba(62,53,47,0.11), inset 0 0 0 1px rgba(255,255,255,0.44);
}

.community-module.active {
  border-color: color-mix(in srgb, var(--negative) 44%, var(--border));
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), transparent 40%),
    color-mix(in srgb, var(--warning) 18%, var(--surface));
  box-shadow: 0 14px 30px rgba(62,53,47,0.14), inset 0 0 0 1px rgba(255,255,255,0.55);
}

.community-module.active::after {
  opacity: 1;
}

.module-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 76%, white);
  color: var(--accent-secondary);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 8px 16px rgba(62,53,47,0.10);
}

.module-icon.live {
  color: var(--positive);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}

.module-icon.discussions {
  color: var(--negative);
  background: color-mix(in srgb, var(--negative) 13%, var(--surface));
}

.module-icon.makes {
  color: var(--accent-secondary);
  background: color-mix(in srgb, var(--warning) 24%, var(--surface));
}

.module-icon.materials {
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--surface)) 0 50%, color-mix(in srgb, var(--negative) 14%, var(--surface)) 50% 100%);
}

.community-module > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.community-module b,
.community-module small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-module b {
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
}

.community-module small {
  color: var(--text-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.community-filter {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.community-filter::-webkit-scrollbar {
  display: none;
}

.community-filter button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 13px;
  background: color-mix(in srgb, var(--surface) 82%, white);
  white-space: nowrap;
}

.saved-popover {
  position: fixed;
  top: 92px;
  right: max(20px, calc((100vw - 1280px) / 2 + 20px));
  z-index: 95;
  width: min(360px, calc(100vw - 32px));
  max-height: min(68svh, 560px);
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.saved-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.saved-popover header button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 82%, white);
  color: var(--accent-secondary);
  cursor: pointer;
}

.saved-thread-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-secondary);
  font-size: 0.68rem;
  font-weight: 900;
}

.saved-thread-icon.live {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
}

.community-main {
  grid-area: main;
  display: grid;
  gap: clamp(18px, 3vw, 34px);
  min-width: 0;
}

.community-composer {
  display: none;
}

.community-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

[data-community-section][hidden],
[data-community-module-panel][hidden],
[data-community-feed][hidden],
.community-feed[hidden],
.showcase-masonry[hidden],
#communityLegacyFeed,
[data-community-post][hidden] {
  display: none !important;
}

.community-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px;
}

.community-section-head h3 {
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.community-section-head span {
  flex: 0 0 auto;
  color: var(--negative);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.community-live-strip {
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.community-live-strip::-webkit-scrollbar {
  display: none;
}

.community-live-strip .team-card {
  flex: 0 0 clamp(340px, 30vw, 370px);
  width: clamp(340px, 30vw, 370px);
  min-height: 300px;
  height: 300px;
  scroll-snap-align: start;
}

.community-discussion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.discussion-card {
  min-height: 100%;
}

.discussion-card .thread-copy {
  min-height: 274px;
}

.community-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 246px), 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  align-items: start;
  gap: 16px;
}

.community-masonry .photo-card {
  grid-template-columns: 1fr;
}

.community-masonry .post-media {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.material-masonry .post-media {
  aspect-ratio: 1 / 1;
}

.material-card .post-copy {
  gap: 10px;
}

.community-live-strip .community-post,
.community-discussion-grid .community-post,
.community-masonry .community-post {
  grid-column: span 1;
}

.community-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 286px), 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  align-items: start;
  gap: 16px;
}

.community-post {
  grid-column: span 1;
  align-self: start;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 22px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 12px, rgba(62,53,47,0.02) 12px 24px),
    color-mix(in srgb, var(--surface) 92%, white);
}

.community-post.featured {
  grid-column: span 2;
}

.photo-card.featured {
  grid-template-columns: minmax(0, 1.05fr) minmax(250px, 0.85fr);
}

.photo-card .post-media {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.photo-card.featured .post-media {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.photo-card .post-media img {
  min-height: 0;
}

.photo-card .post-copy {
  min-height: 0;
}

.photo-card:not(.featured) .post-copy {
  gap: 10px;
  padding: 18px;
}

.photo-card:not(.featured) .post-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 1.22rem;
  line-height: 1.16;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.photo-card:not(.featured) .post-copy p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.photo-card:not(.featured) .post-author small {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card:not(.featured) .post-tags {
  flex-wrap: nowrap;
  overflow: hidden;
}

.photo-card:not(.featured) .post-tags span {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 0.72rem;
}

.photo-card:not(.featured) .post-actions {
  gap: 5px;
}

.photo-card:not(.featured) .post-actions button,
.photo-card:not(.featured) .post-comment {
  min-height: 32px;
  padding: 6px 7px;
  font-size: 0.72rem;
}

.community-feed.community-masonry {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 246px), 1fr));
}

.community-masonry.material-masonry .post-media {
  aspect-ratio: 1 / 1;
}

.discussion-card .thread-copy h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.discussion-card .thread-copy p {
  font-size: 0.92rem;
}

.thread-card,
.live-card {
  align-content: stretch;
}

.thread-copy,
.live-copy {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: clamp(18px, 2.3vw, 28px);
}

.team-card .live-copy {
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.team-card .live-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.team-card .post-actions {
  align-self: end;
}

.thread-card {
  border-left: 5px dashed color-mix(in srgb, var(--accent) 74%, var(--border));
}

.thread-kicker,
.live-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.thread-copy h3,
.live-copy h3 {
  color: var(--text);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.45rem, 2.2vw, 2.28rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.thread-copy p,
.live-copy p {
  color: var(--text-secondary);
  font-weight: 780;
  line-height: 1.52;
}

.live-card {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 9rem),
    color-mix(in srgb, var(--surface) 90%, white);
}

.live-kicker i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent);
  animation: livePulse 1.6s ease-out infinite;
}

.team-stack {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.team-stack span,
.team-stack b {
  width: 38px;
  height: 38px;
  margin-right: -9px;
  display: grid;
  place-items: center;
  border: 3px solid color-mix(in srgb, var(--surface) 92%, white);
  border-radius: 50%;
  background: var(--accent-secondary);
  color: #fff;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.72rem;
}

.team-stack b {
  background: var(--warning);
  color: var(--accent-secondary);
}

.community-create {
  position: fixed;
  right: max(22px, calc((100vw - 1280px) / 2 + 22px));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 96;
  display: grid;
  justify-items: end;
  gap: 12px;
}

.community-fab {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, var(--border));
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,0.88), transparent 32%),
    var(--accent-secondary);
  color: #fff;
  box-shadow: 0 18px 34px rgba(62,53,47,0.22);
  cursor: pointer;
}

.community-fab::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px dashed color-mix(in srgb, var(--accent-secondary) 42%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.community-fab:hover::before,
.community-fab:focus-visible::before,
.community-create.open .community-fab::before {
  opacity: 1;
  transform: scale(1);
  animation: stitchSpin 8s linear infinite;
}

.community-fab span {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 2.1rem;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.community-create.open .community-fab span {
  transform: translateY(-1px) rotate(45deg);
}

.community-create-menu {
  width: min(330px, calc(100vw - 32px));
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow: 0 20px 42px rgba(62,53,47,0.22);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.community-create.open .community-create-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.community-create-menu button {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, white);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.create-icon {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--accent-secondary);
}

.community-create-menu b,
.community-create-menu small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.community-create-menu b {
  font-weight: 900;
}

.community-create-menu small {
  color: var(--text-secondary);
  font-weight: 780;
}

.community-create-menu .community-post-status {
  min-height: 18px;
  margin: 0 4px;
}

@keyframes stitchSpin {
  to { transform: scale(1) rotate(360deg); }
}

@keyframes livePulse {
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

.landing-thread {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100svh;
  pointer-events: none;
  overflow: hidden;
}

.landing-thread svg {
  width: min(760px, 118vw);
  height: 100%;
  opacity: 0.68;
}

.landing-thread path {
  fill: none;
  stroke-linecap: round;
}

.landing-thread-shadow {
  stroke: rgba(62, 53, 47, 0.1);
  stroke-width: 8;
}

.landing-thread-line {
  stroke: var(--negative);
  stroke-width: 3;
  stroke-dasharray: 9 12;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--negative) 32%, transparent));
  animation: landingThreadDrift 20s linear infinite;
}

@keyframes landingThreadDrift {
  to { stroke-dashoffset: -210; }
}

body[data-active-route="landing"] .page-shell {
  position: relative;
  z-index: 1;
}

.landing-hero {
  min-height: calc(100svh - 96px);
  padding: clamp(34px, 5vh, 76px) 0 clamp(42px, 7vh, 86px);
}

.journey-hero {
  grid-template-columns: minmax(340px, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(26px, 4.6vw, 72px);
  align-items: center;
}

.landing-hero-copy {
  justify-items: start;
  gap: 22px;
}

.landing-hero h1 {
  max-width: 760px;
  font-size: clamp(4.2rem, 10vw, 8.9rem);
  line-height: 0.88;
}

.journey-hero h1 {
  max-width: 620px;
  font-size: clamp(4rem, 8.8vw, 8.4rem);
}

.landing-hero h1 span {
  display: block;
  color: var(--negative);
  font-style: italic;
  font-weight: 500;
}

.landing-hero .hero-copy p {
  max-width: 620px;
  font-size: clamp(1.08rem, 1.7vw, 1.38rem);
}

.journey-map-frame {
  position: relative;
  align-self: center;
  margin-bottom: clamp(58px, 8vh, 88px);
  padding: clamp(13px, 1.5vw, 20px);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.56), transparent 38%),
    repeating-linear-gradient(90deg, rgba(160, 121, 79, 0.1) 0 9px, transparent 9px 18px),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow);
  transform: rotate(0.7deg);
}

.journey-map-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 118px;
  height: 34px;
  border: 1px solid rgba(160, 121, 79, 0.24);
  background: color-mix(in srgb, var(--warning) 42%, white);
  opacity: 0.88;
  pointer-events: none;
}

.journey-map-frame::before {
  top: -12px;
  left: clamp(30px, 8vw, 110px);
  transform: rotate(-6deg);
}

.journey-map-topline,
.journey-map-frame figcaption {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Sora", system-ui, sans-serif;
  color: var(--accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.journey-map-topline {
  padding: 2px 4px 12px;
  font-size: 0.76rem;
  font-weight: 900;
}

.journey-map-topline b {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-hover) 82%, transparent);
  color: var(--negative);
}

.journey-map-image-wrap {
  position: relative;
  overflow: hidden;
  border: 2px dashed color-mix(in srgb, var(--accent-secondary) 22%, transparent);
  border-radius: 14px;
  background: #f8f3ea;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.34);
}

.journey-map-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 30% 74%, rgba(62,53,47,0.12)),
    radial-gradient(circle at 14% 8%, rgba(255,255,255,0.18), transparent 22rem);
  pointer-events: none;
}

.journey-map-image-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.journey-map-frame figcaption {
  padding: 12px 4px 2px;
  font-size: 0.68rem;
  font-weight: 900;
  color: var(--text-secondary);
}

.journey-project-pin {
  position: absolute;
  right: 18px;
  bottom: -18px;
  z-index: 6;
  width: min(232px, 30%);
  min-width: 206px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.68), transparent 42%),
    repeating-linear-gradient(0deg, rgba(160, 121, 79, 0.048) 0 1px, transparent 1px 10px),
    color-mix(in srgb, var(--surface) 96%, white);
  box-shadow: 0 7px 0 rgba(62, 53, 47, 0.07), 0 18px 34px rgba(62, 53, 47, 0.18);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: center;
  transform: rotate(-2deg);
}

.journey-project-pin::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 42%;
  width: 78px;
  height: 22px;
  border: 1px solid rgba(160, 121, 79, 0.24);
  background: color-mix(in srgb, var(--warning) 42%, white);
  opacity: 0.92;
  transform: translateX(-50%) rotate(4deg);
}

.journey-project-pin::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 18%, transparent);
  border-radius: 8px;
  pointer-events: none;
}

.journey-project-pin-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
}

.journey-project-pin-copy span,
.journey-project-pin-copy small {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journey-project-pin-copy span {
  color: var(--negative);
}

.journey-project-pin-copy b {
  color: var(--accent-secondary);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.06rem, 1.35vw, 1.34rem);
  line-height: 0.96;
}

.journey-project-pin img {
  position: relative;
  z-index: 2;
  width: 64px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 8px;
  background: #fff;
}

.landing-hero .pattern-envelope {
  align-self: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.52), transparent 36%),
    repeating-linear-gradient(0deg, rgba(160, 121, 79, 0.055) 0 1px, transparent 1px 13px),
    var(--surface);
}

.landing-hero .envelope-title {
  max-width: min(330px, 48%);
}

.landing-hero .metrics-strip {
  max-width: 340px;
}

.landing-hero .product-polaroid {
  right: 30px;
  bottom: 34px;
  width: min(42%, 340px);
}

.landing-feature-stage,
.landing-final-stage {
  min-height: 100svh;
  padding: clamp(74px, 9vh, 118px) 0;
  display: grid;
  align-content: center;
}

.landing-feature-stage {
  padding-top: clamp(178px, 20vh, 232px);
}

.landing-section-head {
  margin: 0 auto 32px;
  justify-items: center;
  text-align: center;
}

.landing-feature-grid {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.landing-feature-card {
  min-height: 520px;
  padding: 34px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), transparent 38%),
    color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 18px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.landing-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(62, 53, 47, 0.16);
}

.landing-feature-card h3 {
  font-size: clamp(2.15rem, 3.5vw, 3.4rem);
  color: var(--accent-secondary);
}

.landing-feature-card p {
  max-width: 430px;
  font-size: 1.02rem;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--negative) 12%, transparent);
  color: var(--negative);
}

.feature-icon svg {
  width: 26px;
  height: 26px;
}

.sage-icon {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.mini-quilt {
  align-self: end;
  min-height: 178px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent-secondary) 20%, transparent);
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
}

.mini-quilt span {
  min-height: 74px;
  border: 1px solid rgba(62, 53, 47, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.32) 25%, transparent 25% 50%, rgba(255,255,255,0.32) 50% 75%, transparent 75%),
    color-mix(in srgb, var(--accent) 28%, var(--surface));
  background-size: 24px 24px, auto;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22);
}

.mini-quilt span:nth-child(2),
.mini-quilt span:nth-child(5) {
  background-color: color-mix(in srgb, var(--warning) 34%, var(--surface));
}

.mini-quilt span:nth-child(3),
.mini-quilt span:nth-child(4) {
  background-color: color-mix(in srgb, var(--negative) 22%, var(--surface));
}

.studio-preview-strip {
  align-self: end;
  display: grid;
  grid-template-columns: 1.08fr 0.96fr 0.96fr;
  gap: 10px;
  align-items: end;
}

.studio-preview-strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-hover) 86%, white);
  box-shadow: var(--sticker-shadow);
}

.studio-preview-strip img:first-child {
  padding: 8px;
  object-fit: contain;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.5), transparent 46%),
    color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.studio-preview-strip img:nth-child(2) { transform: translateY(26px) rotate(-2deg); }
.studio-preview-strip img:nth-child(3) { transform: translateY(8px) rotate(2deg); }

.feature-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--negative);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 900;
  text-decoration: none;
}

.feature-link span {
  transition: transform 0.18s ease;
}

.feature-link:hover span {
  transform: translateX(4px);
}

.sage-link { color: var(--positive); }

.landing-final-stage {
  justify-items: center;
  text-align: center;
}

.landing-final-copy {
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  gap: 18px;
}

.landing-final-copy p {
  max-width: 620px;
  font-size: 1.1rem;
}

.landing-final-stage .hero-actions {
  justify-content: center;
  margin-top: 6px;
}

.landing-final-proof {
  width: min(780px, 100%);
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.landing-final-proof span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--accent-secondary);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 1060px) {
  .journey-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-hero {
    text-align: center;
  }

  .landing-hero-copy {
    justify-items: center;
  }

  .landing-hero .hero-actions {
    justify-content: center;
  }

  .journey-map-frame {
    width: min(760px, 100%);
    margin: 0 auto clamp(68px, 9vh, 96px);
    transform: none;
  }

  .journey-project-pin {
    right: 18px;
    bottom: -18px;
    width: min(232px, 42%);
  }

  .landing-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(640px, 100%);
  }

  .landing-feature-card {
    min-height: 0;
  }

  .landing-thread svg {
    width: 140vw;
    opacity: 0.5;
  }

  .community-rail {
    grid-template-columns: 1fr;
    position: static;
  }

  .community-feed {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  .community-discussion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-post,
  .thread-card,
  .live-card {
    grid-column: span 1;
  }

  .community-post.featured {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .landing-thread svg {
    width: 180vw;
  }

  .landing-hero {
    min-height: auto;
    gap: 28px;
    padding: 24px 0 62px;
  }

  .landing-hero h1 {
    font-size: clamp(3.35rem, 17vw, 5.2rem);
  }

  .journey-map-frame {
    margin-bottom: 0;
    padding: 10px;
    border-radius: 16px;
  }

  .journey-map-frame::before {
    width: 82px;
    height: 26px;
  }

  .journey-map-topline {
    align-items: flex-start;
    font-size: 0.62rem;
  }

  .journey-map-topline b {
    min-height: 28px;
    padding: 5px 8px;
  }

  .journey-map-image-wrap {
    border-radius: 11px;
  }

  .journey-map-frame figcaption {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
    gap: 7px;
    font-size: 0.58rem;
  }

  .journey-project-pin {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(295px, 96%);
    min-width: 0;
    margin: 14px 0 2px auto;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    padding: 10px;
    transform: rotate(-1deg);
  }

  .journey-project-pin::before {
    display: none;
  }

  .journey-project-pin-copy span,
  .journey-project-pin-copy small {
    font-size: 0.54rem;
  }

  .journey-project-pin-copy b {
    font-size: clamp(1.1rem, 6vw, 1.34rem);
  }

  .journey-project-pin img {
    width: 70px;
  }

  .landing-hero .pattern-envelope {
    min-height: 0;
    padding-bottom: 22px;
  }

  .landing-hero .envelope-title {
    max-width: 100%;
    margin-top: 34px;
  }

  .landing-hero .metrics-strip {
    max-width: 100%;
  }

  .landing-hero .product-polaroid {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 28px auto 0;
    transform: rotate(1deg);
  }

  .landing-feature-stage,
  .landing-final-stage {
    min-height: auto;
    padding: 74px 0;
  }

  .landing-feature-card {
    padding: 22px;
    border-radius: 16px;
    gap: 14px;
  }

  .landing-feature-card h3 {
    font-size: clamp(2rem, 10vw, 2.9rem);
  }

  .mini-quilt {
    min-height: 132px;
    gap: 7px;
  }

  .mini-quilt span {
    min-height: 52px;
  }

  .studio-preview-strip {
    gap: 8px;
  }

  .landing-final-copy {
    gap: 16px;
  }

  .landing-final-proof {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .community-screen {
    margin: 0;
    padding: clamp(16px, 2.8vh, 24px) 10px calc(96px + env(safe-area-inset-bottom));
  }

  .community-social {
    gap: 12px;
  }

  .community-hero {
    min-height: 0;
    align-items: start;
    padding: 10px 0 2px;
  }

  .community-hero h2 {
    font-size: clamp(2rem, 10vw, 3.4rem);
  }

  .community-hero p {
    font-size: 0.9rem;
  }

  .community-saved-toggle {
    width: 46px;
    height: 46px;
  }

  .community-rail {
    gap: 8px;
    padding: 7px;
    border-radius: 18px;
  }

  .community-search-box {
    min-height: 42px;
  }

  .community-drawer {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .community-drawer::-webkit-scrollbar {
    display: none;
  }

  .community-module {
    min-height: 74px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    padding: 8px 6px;
    text-align: center;
  }

  .community-module::after {
    inset: 5px;
    border-radius: 11px;
  }

  .module-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .module-icon svg {
    width: 21px;
    height: 21px;
  }

  .community-module > span:last-child {
    justify-items: center;
    gap: 1px;
  }

  .community-module b {
    max-width: 100%;
    font-size: 0.72rem;
  }

  .community-module small {
    max-width: 100%;
    font-size: 0.58rem;
  }

  .community-feed {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 8px;
    gap: 12px;
  }

  .community-post,
  .community-post.featured,
  .thread-card,
  .live-card {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .community-main {
    gap: 24px;
  }

  .community-section-head {
    align-items: start;
  }

  .community-section-head h3 {
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }

  .community-live-strip .team-card {
    flex: 0 0 min(318px, 84vw);
    width: min(318px, 84vw);
    min-height: 300px;
    height: 300px;
  }

  .community-discussion-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .photo-card .post-media,
  .photo-card.featured .post-media {
    min-height: 0;
    aspect-ratio: 5 / 4;
  }

  .saved-popover {
    top: 112px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: min(62svh, 520px);
  }

  .community-create {
    left: 50%;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    justify-items: center;
  }

  .community-create-menu {
    width: min(338px, calc(100vw - 22px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  body { background: #fff !important; color: #000 !important; }
  .app-nav { display: none !important; }
  .panel, .pattern-envelope, .sampler, .studio-room, .checklist { box-shadow: none; break-inside: avoid; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}