:root {
  --vision-paper:#f2ebe4;
  --vision-paper-soft:#e7ddd4;
  --vision-ivory:#fbf8f3;
  --vision-ink:#443833;
  --vision-muted:#8e7e76;
  --vision-rose:#b68e88;
  --vision-gold:#b4936f;
  --vision-line:rgba(95,70,59,.17);
  --vision-shadow:0 30px 80px rgba(72,49,42,.12);
  --safe-top:max(16px,env(safe-area-inset-top));
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
}

* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html {
  min-height:100%;
  background:#ded5ce;
}

body {
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  color:var(--vision-ink);
  background:
    radial-gradient(circle at 4% 3%,rgba(255,255,255,.98),transparent 25%),
    radial-gradient(circle at 96% 8%,rgba(229,202,203,.48),transparent 28%),
    linear-gradient(150deg,#f7f3ee,#e7ddd4 58%,#e0d4cc);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
}

button,
input {
  color:inherit;
  font:inherit;
}

button {
  border:0;
  cursor:pointer;
}

a {
  color:inherit;
}

.is-hidden {
  display:none!important;
}

.vision-ambient {
  width:340px;
  height:340px;
  position:fixed;
  z-index:0;
  border-radius:50%;
  filter:blur(90px);
  opacity:.42;
  pointer-events:none;
}

.vision-ambient-one {
  right:-120px;
  top:12vh;
  background:#e6bfc1;
}

.vision-ambient-two {
  left:-150px;
  bottom:5vh;
  background:#cfd9d8;
}

.vision-app {
  width:min(100%,1180px);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.vision-header {
  min-height:82px;
  padding:var(--safe-top) clamp(18px,4vw,48px) 12px;
  display:grid;
  grid-template-columns:110px 1fr 110px;
  align-items:center;
  border-bottom:1px solid rgba(94,70,60,.11);
}

.vision-back {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:rgba(255,255,255,.47);
  box-shadow:0 12px 30px rgba(72,49,42,.07),inset 0 1px rgba(255,255,255,.8);
  font:20px/1 Baskerville,"Times New Roman",serif;
  transition:transform .25s ease,background .25s ease;
}

.vision-back:hover,
.vision-back:focus-visible {
  transform:translateX(-3px);
  background:rgba(255,255,255,.76);
  outline:none;
}

.vision-wordmark {
  justify-self:center;
  text-align:center;
  text-decoration:none;
}

.vision-wordmark small {
  display:block;
  color:#97877e;
  font:8px/1.2 Baskerville,"Times New Roman",serif;
  letter-spacing:.31em;
}

.vision-wordmark strong {
  display:block;
  margin-top:6px;
  color:#5d4a43;
  font:400 19px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.08em;
}

.vision-wordmark i {
  color:#ae8e77;
  font-size:9px;
  font-style:normal;
}

.vision-studio-link {
  min-width:92px;
  min-height:38px;
  padding:0 14px;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.88);
  border-radius:999px;
  background:rgba(255,255,255,.47);
  box-shadow:0 11px 28px rgba(72,49,42,.06),inset 0 1px rgba(255,255,255,.8);
}

.vision-studio-link span {
  color:#76665f;
  font:8px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.2em;
}

.vision-studio-link i {
  color:#8f776b;
  font:14px/1 Baskerville,serif;
  font-style:normal;
}

.vision-intro {
  min-height:calc(100vh - 82px);
  min-height:calc(100dvh - 82px);
  padding:clamp(68px,10vh,118px) 22px 72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.vision-intro-ornament {
  width:min(360px,76vw);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:13px;
  color:#a58c7d;
}

.vision-intro-ornament i {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(135,99,82,.45));
}

.vision-intro-ornament i:last-child {
  transform:scaleX(-1);
}

.vision-intro-ornament span {
  font:17px/1 Baskerville,serif;
  transform:rotate(45deg);
}

.vision-kicker {
  margin:28px 0 0;
  color:#9b887f;
  font:8px/1.2 Baskerville,"Times New Roman",serif;
  letter-spacing:.32em;
}

.vision-intro h1 {
  margin:18px 0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#53423c;
  font:400 clamp(46px,8vw,78px)/.98 Baskerville,"Times New Roman",serif;
  letter-spacing:.03em;
}

.vision-intro h1 i {
  color:#b59076;
  font-size:.27em;
  font-style:normal;
  transform:translateY(-.35em) rotate(45deg);
}

.vision-intro h2 {
  margin:12px 0 0;
  color:#6b5850;
  font:400 clamp(24px,3.5vw,36px)/1.35 Baskerville,"Songti SC","STSong",serif;
  letter-spacing:.07em;
}

.vision-intro-copy {
  margin:20px 0 0;
  color:#8c7c74;
  font:12px/2 "Songti SC","STSong",serif;
  letter-spacing:.025em;
}

.vision-upload-frame {
  width:min(590px,100%);
  min-height:188px;
  margin-top:42px;
  padding:34px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:3px double rgba(112,81,67,.3);
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.94),transparent 44%),
    linear-gradient(145deg,rgba(255,255,255,.55),rgba(236,220,213,.58));
  box-shadow:var(--vision-shadow),inset 0 0 0 8px rgba(255,255,255,.23);
  cursor:pointer;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.vision-upload-frame:hover,
.vision-upload-frame:focus-within,
.vision-upload-frame.is-dragging {
  transform:translateY(-4px);
  border-color:rgba(147,103,77,.53);
  box-shadow:0 34px 88px rgba(72,49,42,.17),inset 0 0 0 8px rgba(255,255,255,.3);
}

.vision-upload-frame input {
  width:1px;
  height:1px;
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.vision-upload-frame::before,
.vision-upload-frame::after {
  content:"✦";
  position:absolute;
  top:50%;
  color:rgba(151,112,91,.34);
  font:20px/1 Baskerville,serif;
  transform:translateY(-50%) rotate(45deg);
}

.vision-upload-frame::before { left:28px; }
.vision-upload-frame::after { right:28px; }

.vision-upload-corners {
  position:absolute;
  inset:13px;
  border:1px solid rgba(126,91,74,.13);
  border-radius:31px;
  pointer-events:none;
}

.vision-upload-moon {
  margin-bottom:12px;
  color:#a58370;
  font:25px/1 Baskerville,serif;
}

.vision-upload-title {
  color:#5c4942;
  font:400 22px/1.2 Baskerville,"Songti SC","STSong",serif;
  letter-spacing:.12em;
}

.vision-upload-frame small {
  margin-top:9px;
  color:#8b756a;
  font:8px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.28em;
}

.vision-upload-frame em {
  margin-top:19px;
  color:#a2958e;
  font:8px/1.2 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  font-style:normal;
  letter-spacing:.06em;
}

.vision-privacy {
  margin:18px 0 0;
  color:#a1938b;
  font:7px/1.4 Baskerville,"Times New Roman",serif;
  letter-spacing:.2em;
}

.vision-principles {
  width:min(680px,100%);
  margin-top:55px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--vision-line);
  border-bottom:1px solid var(--vision-line);
}

.vision-principles span {
  min-height:72px;
  padding:17px 8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.vision-principles span:not(:last-child) {
  border-right:1px solid var(--vision-line);
}

.vision-principles b {
  color:#6f5c53;
  font:italic 11px/1 Baskerville,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:.18em;
}

.vision-principles small {
  margin-top:8px;
  color:#a08f86;
  font:8px/1 "Songti SC","STSong",serif;
  letter-spacing:.1em;
}

.vision-observing,
.vision-results {
  padding:clamp(50px,8vw,86px) clamp(18px,4vw,48px) calc(76px + var(--safe-bottom));
}

.vision-observing {
  min-height:calc(100vh - 82px);
  min-height:calc(100dvh - 82px);
}

.vision-observing-head,
.vision-results-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
}

.vision-observing-head small,
.vision-results-head small,
.vision-reading-summary small,
.vision-design-heading small,
.vision-save-panel label>span,
.vision-save-modal section>small {
  color:#9a857a;
  font:8px/1.3 Baskerville,"Times New Roman",serif;
  letter-spacing:.28em;
}

.vision-observing-head h2,
.vision-results-head h2 {
  margin:10px 0 0;
  color:#52423c;
  font:400 clamp(29px,4.8vw,46px)/1.15 Baskerville,"Songti SC","STSong",serif;
  letter-spacing:.025em;
}

.vision-observing-head button,
.vision-results-head button {
  padding:10px 2px 8px;
  flex:0 0 auto;
  border-bottom:1px solid rgba(105,76,63,.32);
  background:transparent;
  color:#806c63;
  font-size:10px;
}

.vision-observing-grid {
  margin-top:42px;
  display:grid;
  grid-template-columns:minmax(260px,.86fr) minmax(360px,1.14fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
}

.vision-source-frame {
  width:100%;
  min-height:470px;
  margin:0;
  padding:15px;
  position:relative;
  overflow:hidden;
  border:3px double rgba(102,74,62,.24);
  border-radius:54px 54px 35px 35px;
  background:rgba(255,255,255,.44);
  box-shadow:0 29px 70px rgba(71,48,41,.12),inset 0 0 0 7px rgba(255,255,255,.24);
}

.vision-source-frame img {
  width:100%;
  height:440px;
  display:block;
  object-fit:cover;
  border-radius:40px 40px 24px 24px;
  background:#e8dfd7;
}

.vision-source-frame span {
  position:absolute;
  inset:26px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:32px 32px 18px 18px;
  pointer-events:none;
}

.vision-analysis-list {
  border-top:1px solid var(--vision-line);
}

.vision-analysis-row {
  min-height:102px;
  padding:17px 0;
  display:grid;
  grid-template-columns:42px 1fr 22px;
  gap:16px;
  align-items:center;
  border-bottom:1px solid var(--vision-line);
  opacity:.46;
  transition:opacity .35s ease,transform .35s ease,background .35s ease;
}

.vision-analysis-row>span {
  align-self:start;
  padding-top:4px;
  color:#b09a8e;
  font:italic 9px/1 Baskerville,serif;
}

.vision-analysis-row small {
  display:block;
  color:#7c675d;
  font:italic 10px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.2em;
}

.vision-analysis-row strong {
  display:block;
  margin-top:8px;
  color:#5b4b45;
  font:400 15px/1.3 "Songti SC","STSong",serif;
  letter-spacing:.03em;
}

.vision-analysis-row p {
  min-height:14px;
  margin:8px 0 0;
  color:#98867d;
  font:9px/1.5 Baskerville,"Times New Roman",serif;
  letter-spacing:.12em;
}

.vision-analysis-row>i {
  color:#b39d91;
  font:12px/1 Baskerville,serif;
  font-style:normal;
}

.vision-analysis-row.is-active {
  opacity:1;
  transform:translateX(7px);
}

.vision-analysis-row.is-active>i {
  animation:visionPulse 1s ease-in-out infinite;
}

.vision-analysis-row.is-complete {
  opacity:1;
}

.vision-analysis-row.is-complete>i {
  color:#987660;
}

.vision-translating {
  width:min(700px,100%);
  margin:54px auto 0;
  text-align:center;
  opacity:.4;
  transition:opacity .4s ease;
}

.vision-translating.is-active {
  opacity:1;
}

.vision-translating span {
  color:#79655c;
  font:9px/1.2 Baskerville,"Times New Roman",serif;
  letter-spacing:.29em;
}

.vision-translating>i {
  display:block;
  margin:17px 0;
  color:#aa876f;
  font:18px/1 Baskerville,serif;
  font-style:normal;
  animation:visionStar 1.6s ease-in-out infinite;
}

.vision-translating>div {
  height:1px;
  overflow:hidden;
  background:rgba(107,80,68,.13);
}

.vision-translating b {
  width:0;
  height:100%;
  display:block;
  background:linear-gradient(90deg,transparent,#b08b73,transparent);
}

.vision-translating.is-active b {
  animation:visionProgress 1.15s ease forwards;
}

.vision-results-head {
  padding-bottom:30px;
  border-bottom:3px double rgba(98,72,61,.19);
}

.vision-results-head p {
  max-width:630px;
  margin:13px 0 0;
  color:#8f7d74;
  font:11px/1.9 "Songti SC","STSong",serif;
}

.vision-reading-summary {
  margin-top:34px;
  padding:22px;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:26px;
  align-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:30px;
  background:rgba(255,255,255,.38);
  box-shadow:0 18px 50px rgba(72,49,42,.06);
}

.vision-reading-summary figure {
  width:150px;
  height:112px;
  margin:0;
  overflow:hidden;
  border-radius:21px;
  background:#ddd3cb;
}

.vision-reading-summary img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.vision-palette {
  margin:12px 0 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.vision-palette span {
  height:28px;
  padding:0 10px 0 5px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(105,78,66,.11);
  border-radius:999px;
  background:rgba(255,255,255,.42);
  color:#76645c;
  font:8px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.07em;
}

.vision-palette i {
  width:18px;
  height:18px;
  display:block;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(54,39,34,.12);
}

.vision-reading-summary p {
  margin:0;
  color:#7f6f67;
  font:11px/1.85 "Songti SC","STSong",serif;
}

.vision-direction-tabs {
  margin:32px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--vision-line);
  border-bottom:1px solid var(--vision-line);
}

.vision-direction-tabs button {
  min-height:90px;
  padding:15px 12px;
  position:relative;
  background:transparent;
  color:#88766e;
  transition:background .3s ease,color .3s ease;
}

.vision-direction-tabs button:not(:last-child) {
  border-right:1px solid var(--vision-line);
}

.vision-direction-tabs button small,
.vision-direction-tabs button strong {
  display:block;
}

.vision-direction-tabs button small {
  color:#a39187;
  font:italic 8px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.18em;
}

.vision-direction-tabs button strong {
  margin-top:9px;
  font:400 14px/1.25 Baskerville,"Songti SC","STSong",serif;
  letter-spacing:.04em;
}

.vision-direction-tabs button::after {
  content:"";
  width:28px;
  height:1px;
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%) scaleX(0);
  background:#85695a;
  transition:transform .3s ease;
}

.vision-direction-tabs button:hover,
.vision-direction-tabs button:focus-visible,
.vision-direction-tabs button.is-active {
  color:#51403a;
  background:rgba(255,255,255,.33);
  outline:none;
}

.vision-direction-tabs button.is-active::after {
  transform:translateX(-50%) scaleX(1);
}

.vision-design-stage {
  margin-top:28px;
  padding:34px clamp(18px,4vw,42px) 31px;
  overflow:hidden;
  border:3px double rgba(102,74,62,.23);
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 15%,rgba(255,255,255,.85),transparent 37%),
    linear-gradient(155deg,rgba(246,239,232,.9),rgba(226,212,203,.72));
  box-shadow:0 28px 70px rgba(72,49,42,.1),inset 0 0 0 8px rgba(255,255,255,.2);
}

.vision-design-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
}

.vision-design-heading h3 {
  margin:8px 0 0;
  color:#594741;
  font:400 26px/1.2 Baskerville,"Songti SC","STSong",serif;
  letter-spacing:.07em;
}

.vision-design-heading>span {
  color:#99867c;
  font:7px/1.2 Baskerville,"Times New Roman",serif;
  letter-spacing:.22em;
}

.vision-nail-set {
  min-height:246px;
  margin-top:25px;
  padding:26px 8px 13px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:clamp(12px,4vw,42px);
  position:relative;
}

.vision-nail-set::before {
  content:"";
  width:78%;
  height:52px;
  position:absolute;
  left:11%;
  bottom:0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(90,63,53,.13),transparent 67%);
  filter:blur(12px);
}

.vision-nail {
  width:94px;
  position:relative;
  z-index:1;
  text-align:center;
  opacity:0;
  transform:translateY(24px) rotate(var(--nail-tilt,0deg));
}

.vision-nail.is-revealed {
  animation:visionNailReveal .72s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--nail-delay,0ms);
}

.vision-nail-shell {
  width:var(--nail-width,72px);
  height:var(--nail-height,184px);
  margin:0 auto;
  position:relative;
  filter:drop-shadow(0 16px 13px rgba(72,47,39,.18));
}

.vision-nail-clip {
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--nail-color,#d7b8b0);
  -webkit-mask-image:var(--nail-mask);
  mask-image:var(--nail-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

.vision-nail-texture {
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  object-fit:cover;
  opacity:var(--texture-opacity,.88);
  filter:saturate(1.02) contrast(1.02);
}

.vision-nail-effect,
.vision-nail-french,
.vision-nail-shine {
  display:block;
  position:absolute;
  pointer-events:none;
}

.vision-nail-effect {
  inset:0;
  z-index:2;
}

.vision-nail-shine {
  width:18%;
  height:74%;
  left:18%;
  top:8%;
  z-index:6;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.06));
  filter:blur(2px);
  opacity:.54;
  transform:rotate(5deg);
}

.vision-nail-clip::after {
  content:"";
  position:absolute;
  inset:2px;
  z-index:7;
  pointer-events:none;
  box-shadow:inset 5px 2px 10px rgba(255,255,255,.38),inset -5px -3px 11px rgba(65,43,37,.13);
  -webkit-mask-image:var(--nail-mask);
  mask-image:var(--nail-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

.vision-nail-lines {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  z-index:3;
  overflow:visible;
}

.vision-nail-lines path,
.vision-nail-lines line {
  fill:none;
  stroke:var(--nail-accent,#ead8bb);
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 .6px .4px rgba(69,45,36,.24));
}

.vision-nail-clip[data-pattern="line"] .vision-nail-effect {
  background:linear-gradient(64deg,transparent 43%,var(--nail-accent) 44%,var(--nail-accent) 46%,transparent 47%);
  opacity:.9;
}

.vision-nail-clip[data-pattern="quilt"] .vision-nail-effect {
  background:
    repeating-linear-gradient(43deg,transparent 0 19px,var(--nail-accent) 20px 21px,transparent 22px 38px),
    repeating-linear-gradient(-43deg,transparent 0 19px,var(--nail-accent) 20px 21px,transparent 22px 38px);
  opacity:.74;
}

.vision-nail-clip[data-pattern="dots"] .vision-nail-effect {
  background-image:radial-gradient(circle,var(--nail-accent) 0 2.4px,transparent 2.8px);
  background-size:25px 28px;
  background-position:7px 4px;
  opacity:.88;
}

.vision-nail-clip[data-pattern="aura"] .vision-nail-effect {
  background:radial-gradient(ellipse at 52% 45%,var(--nail-accent) 0,rgba(255,255,255,.34) 27%,transparent 61%);
  opacity:.83;
}

.vision-nail-clip[data-pattern="chrome"] .vision-nail-effect {
  background:linear-gradient(112deg,rgba(255,255,255,.08) 8%,rgba(255,255,255,.88) 30%,var(--nail-accent) 47%,rgba(255,255,255,.82) 64%,rgba(55,43,43,.12) 87%);
  mix-blend-mode:screen;
  opacity:.72;
}

.vision-nail-clip[data-pattern="cat"] .vision-nail-effect {
  width:38%;
  height:148%;
  inset:-24% auto auto 31%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),var(--nail-accent),rgba(255,255,255,.74),transparent);
  filter:blur(5px);
  opacity:.78;
  transform:rotate(-18deg);
}

.vision-nail-clip[data-pattern="petal"] .vision-nail-effect {
  background:
    radial-gradient(ellipse at 40% 39%,transparent 0 15%,var(--nail-accent) 16% 17%,transparent 18%),
    radial-gradient(ellipse at 61% 48%,transparent 0 16%,var(--nail-accent) 17% 18%,transparent 19%),
    radial-gradient(ellipse at 46% 63%,transparent 0 17%,var(--nail-accent) 18% 19%,transparent 20%);
  opacity:.83;
}

.vision-nail-french {
  width:142%;
  height:37%;
  left:-21%;
  bottom:-6%;
  z-index:4;
  border-radius:50% 50% 0 0/36% 36% 0 0;
  background:var(--nail-accent,#f6eee3);
  box-shadow:0 -1px 0 rgba(255,255,255,.5);
}

.vision-nail-decoration {
  width:var(--decor-size,34%);
  height:var(--decor-size,34%);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  position:absolute;
  left:var(--decor-x,50%);
  top:var(--decor-y,44%);
  z-index:5;
  transform:translate(-50%,-50%) rotate(var(--decor-rotation,0deg));
  filter:drop-shadow(0 4px 4px rgba(54,38,32,.27));
}

.vision-nail-decoration img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.vision-nail-decoration.is-chain {
  width:70%;
  height:10%;
  aspect-ratio:auto;
  border-bottom:2px dotted #cfb074;
  border-radius:50%;
  filter:drop-shadow(0 1px 1px rgba(70,45,32,.35));
}

.vision-nail>small {
  display:block;
  margin-top:11px;
  color:#8f7b71;
  font:7px/1.2 "Songti SC","STSong",serif;
  letter-spacing:.08em;
}

.vision-nail-notes {
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(102,74,62,.15);
}

.vision-nail-notes article {
  min-height:88px;
  padding:16px 10px 10px;
  text-align:center;
}

.vision-nail-notes article:not(:last-child) {
  border-right:1px solid rgba(102,74,62,.12);
}

.vision-nail-notes small,
.vision-nail-notes strong {
  display:block;
}

.vision-nail-notes small {
  color:#a18c81;
  font:italic 7px/1 Baskerville,serif;
  letter-spacing:.13em;
}

.vision-nail-notes strong {
  margin-top:8px;
  color:#68564e;
  font:400 10px/1.55 "Songti SC","STSong",serif;
}

.vision-save-panel {
  margin-top:30px;
  padding:30px;
  border:1px solid rgba(255,255,255,.73);
  border-radius:32px;
  background:rgba(255,255,255,.38);
  box-shadow:0 20px 55px rgba(72,49,42,.07);
}

.vision-save-panel label {
  display:grid;
  grid-template-columns:190px 1fr;
  align-items:center;
  gap:20px;
}

.vision-save-panel input {
  width:100%;
  height:48px;
  padding:0 3px;
  border:0;
  border-bottom:1px solid rgba(102,74,62,.24);
  border-radius:0;
  outline:none;
  background:transparent;
  color:#594741;
  font:400 20px/1 Baskerville,"Songti SC","STSong",serif;
}

.vision-save-panel input:focus {
  border-bottom-color:#96735e;
}

.vision-action-grid {
  margin-top:27px;
  display:grid;
  grid-template-columns:1fr 1.25fr 1.25fr;
  gap:11px;
}

.vision-action-grid button {
  min-height:54px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:999px;
  transition:transform .25s ease,box-shadow .25s ease;
}

.vision-action-grid button:hover,
.vision-action-grid button:focus-visible {
  transform:translateY(-2px);
  outline:none;
}

.vision-action-grid span {
  font-size:11px;
}

.vision-action-grid i {
  font:14px/1 Baskerville,serif;
  font-style:normal;
}

.vision-action-secondary {
  border:1px solid rgba(106,78,66,.16);
  background:rgba(255,255,255,.43);
  color:#6e5b53;
}

.vision-action-primary {
  background:#5f4d46;
  color:#fbf7f2;
  box-shadow:0 14px 32px rgba(65,45,38,.19);
}

.vision-save-panel>p {
  margin:16px 0 0;
  color:#9a8a82;
  font-size:8px;
  line-height:1.7;
  text-align:center;
}

.vision-share-card {
  width:900px;
  min-height:1120px;
  padding:66px 68px 55px;
  position:fixed;
  left:-12000px;
  top:0;
  z-index:-1;
  overflow:hidden;
  color:#473933;
  background:
    radial-gradient(circle at 84% 11%,rgba(255,255,255,.98),transparent 30%),
    radial-gradient(circle at 9% 89%,rgba(218,194,185,.48),transparent 30%),
    linear-gradient(145deg,#f8f3ec,#e9ddd4);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}

.vision-share-card::before {
  content:"";
  position:absolute;
  inset:26px;
  border:4px double rgba(108,77,63,.34);
  border-radius:52px;
  pointer-events:none;
}

.vision-share-card::after {
  content:"✦";
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%) rotate(45deg);
  color:#a47e66;
  background:#f6efe8;
  font:22px/1 Baskerville,serif;
}

.vision-share-card>header,
.vision-share-card>footer,
.vision-share-card>h2,
.vision-share-story,
.vision-share-palette {
  position:relative;
  z-index:1;
}

.vision-share-card>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:22px;
  border-bottom:1px solid rgba(100,73,61,.19);
}

.vision-share-card>header span {
  font:400 20px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.12em;
}

.vision-share-card>header small {
  color:#917d73;
  font:9px/1 Baskerville,serif;
  letter-spacing:.23em;
}

.vision-share-card>h2 {
  margin:47px 0 37px;
  font:400 55px/.96 Baskerville,"Times New Roman",serif;
  letter-spacing:-.025em;
}

.vision-share-story {
  min-height:410px;
  display:grid;
  grid-template-columns:285px 46px 1fr;
  align-items:center;
  gap:18px;
}

.vision-share-story>figure {
  width:285px;
  height:380px;
  margin:0;
  padding:11px;
  overflow:hidden;
  border:3px double rgba(103,75,62,.28);
  border-radius:40px 40px 30px 30px;
  background:rgba(255,255,255,.44);
  box-shadow:0 24px 55px rgba(68,45,38,.13);
}

.vision-share-story>figure img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:28px 28px 19px 19px;
}

.vision-share-story>i {
  color:#9c7e6c;
  font:25px/1 Baskerville,serif;
  font-style:normal;
}

.vision-share-nails {
  min-height:370px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:8px;
}

.vision-share-nails .vision-nail {
  width:68px;
  opacity:1;
  transform:rotate(var(--nail-tilt,0deg));
}

.vision-share-nails .vision-nail-shell {
  width:var(--share-nail-width,52px);
  height:var(--share-nail-height,146px);
}

.vision-share-nails .vision-nail>small {
  display:none;
}

.vision-share-palette {
  margin-top:36px;
  display:flex;
  gap:9px;
}

.vision-share-palette span {
  width:48px;
  height:48px;
  display:block;
  border:4px solid rgba(255,255,255,.6);
  border-radius:50%;
  box-shadow:0 4px 12px rgba(66,44,37,.13);
}

.vision-share-card>footer {
  margin-top:34px;
  padding-top:26px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  border-top:1px solid rgba(100,73,61,.19);
}

.vision-share-card>footer strong,
.vision-share-card>footer span {
  display:block;
}

.vision-share-card>footer strong {
  font:400 24px/1.2 Baskerville,"Songti SC","STSong",serif;
}

.vision-share-card>footer span {
  margin-top:9px;
  color:#907d73;
  font:9px/1 Baskerville,serif;
  letter-spacing:.19em;
}

.vision-share-card>footer p {
  margin:0;
  color:#756159;
  font:italic 13px/1 Baskerville,"Times New Roman",serif;
  letter-spacing:.06em;
}

.vision-save-modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:calc(var(--safe-top) + 14px) 18px calc(var(--safe-bottom) + 14px);
}

.vision-save-backdrop {
  position:absolute;
  inset:0;
  background:rgba(53,42,38,.42);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

.vision-save-modal>section {
  width:min(480px,100%);
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  padding:28px;
  position:relative;
  z-index:1;
  overflow:auto;
  text-align:center;
  border:3px double rgba(105,77,64,.3);
  border-radius:35px;
  background:linear-gradient(155deg,#faf6f1,#e9ddd5);
  box-shadow:0 35px 100px rgba(46,31,27,.3),inset 0 0 0 7px rgba(255,255,255,.25);
}

.vision-save-close {
  width:34px;
  height:34px;
  position:absolute;
  right:17px;
  top:16px;
  border-radius:50%;
  background:rgba(255,255,255,.54);
  color:#75635b;
  font-size:19px;
}

.vision-save-modal h2 {
  margin:11px 0 21px;
  font:400 26px/1.2 Baskerville,"Songti SC","STSong",serif;
}

.vision-save-modal figure {
  margin:0;
  padding:8px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:rgba(255,255,255,.4);
  box-shadow:0 19px 45px rgba(70,47,40,.11);
}

.vision-save-modal figure img {
  width:100%;
  max-height:48vh;
  display:block;
  object-fit:contain;
  border-radius:17px;
}

.vision-save-modal section>div {
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.vision-save-modal section>div button {
  min-height:48px;
  padding:0 15px;
  border-radius:999px;
  font-size:10px;
}

.vision-modal-primary {
  background:#5f4d46;
  color:#fffaf5;
}

.vision-modal-secondary {
  border:1px solid rgba(103,75,63,.17);
  background:rgba(255,255,255,.47);
}

.vision-save-modal section>p {
  margin:15px auto 0;
  color:#95847b;
  font-size:8px;
  line-height:1.7;
}

.vision-toast {
  max-width:min(420px,calc(100% - 32px));
  padding:11px 18px;
  position:fixed;
  left:50%;
  bottom:calc(20px + var(--safe-bottom));
  z-index:150;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(73,58,52,.9);
  color:#fffaf5;
  box-shadow:0 15px 40px rgba(46,31,27,.22);
  font-size:10px;
  line-height:1.4;
  text-align:center;
  opacity:0;
  transform:translate(-50%,18px);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}

.vision-toast.is-visible {
  opacity:1;
  transform:translate(-50%,0);
}

@keyframes visionPulse {
  50% { opacity:.3; transform:scale(.72); }
}

@keyframes visionStar {
  0%,100% { opacity:.45; transform:scale(.82) rotate(0deg); }
  50% { opacity:1; transform:scale(1.13) rotate(45deg); }
}

@keyframes visionProgress {
  from { width:0; }
  to { width:100%; }
}

@keyframes visionNailReveal {
  from { opacity:0; transform:translateY(25px) rotate(var(--nail-tilt,0deg)); }
  to { opacity:1; transform:translateY(0) rotate(var(--nail-tilt,0deg)); }
}

@media (max-width:760px) {
  .vision-header {
    grid-template-columns:54px 1fr 72px;
    padding-inline:15px;
  }

  .vision-studio-link {
    min-width:68px;
    padding-inline:10px;
  }

  .vision-studio-link span {
    display:none;
  }

  .vision-observing-grid {
    grid-template-columns:1fr;
  }

  .vision-source-frame {
    min-height:330px;
  }

  .vision-source-frame img {
    height:300px;
  }

  .vision-results-head {
    align-items:start;
  }

  .vision-nail-set {
    min-height:215px;
    gap:clamp(4px,2.6vw,18px);
  }

  .vision-nail {
    width:68px;
  }

  .vision-nail-shell {
    width:var(--mobile-nail-width,56px);
    height:var(--mobile-nail-height,150px);
  }

  .vision-nail-notes strong {
    font-size:9px;
  }

  .vision-action-grid {
    grid-template-columns:1fr 1fr;
  }

  .vision-action-primary {
    grid-column:1/-1;
  }
}

@media (max-width:560px) {
  .vision-intro {
    padding-top:58px;
  }

  .vision-intro-copy br {
    display:none;
  }

  .vision-upload-frame {
    min-height:174px;
    margin-top:34px;
    border-radius:36px;
  }

  .vision-principles {
    grid-template-columns:repeat(2,1fr);
  }

  .vision-principles span:nth-child(2) {
    border-right:0;
  }

  .vision-principles span:nth-child(-n+2) {
    border-bottom:1px solid var(--vision-line);
  }

  .vision-reading-summary {
    grid-template-columns:94px 1fr;
    gap:17px;
    padding:16px;
  }

  .vision-reading-summary figure {
    width:94px;
    height:112px;
  }

  .vision-direction-tabs button {
    min-height:94px;
    padding-inline:7px;
  }

  .vision-direction-tabs button small {
    font-size:6px;
  }

  .vision-direction-tabs button strong {
    font-size:11px;
  }

  .vision-design-stage {
    padding:27px 11px 22px;
    border-radius:34px;
  }

  .vision-design-heading {
    padding:0 8px;
  }

  .vision-design-heading h3 {
    font-size:22px;
  }

  .vision-design-heading>span {
    max-width:100px;
    text-align:right;
  }

  .vision-nail-set {
    min-height:184px;
    padding-inline:0;
  }

  .vision-nail {
    width:20%;
  }

  .vision-nail-shell {
    width:var(--small-nail-width,45px);
    height:var(--small-nail-height,124px);
  }

  .vision-nail>small {
    font-size:6px;
  }

  .vision-nail-decoration {
    min-width:14px;
  }

  .vision-nail-notes {
    grid-template-columns:1fr;
    margin:13px 8px 0;
  }

  .vision-nail-notes article {
    min-height:0;
    padding:11px 2px;
    display:grid;
    grid-template-columns:70px 1fr;
    gap:13px;
    text-align:left;
  }

  .vision-nail-notes article:not(:last-child) {
    border-right:0;
    border-bottom:1px solid rgba(102,74,62,.11);
  }

  .vision-nail-notes strong {
    margin-top:0;
  }

  .vision-save-panel {
    padding:23px 17px;
  }

  .vision-save-panel label {
    grid-template-columns:1fr;
    gap:7px;
  }

  .vision-action-grid {
    grid-template-columns:1fr;
  }

  .vision-action-primary {
    grid-column:auto;
  }

  .vision-save-modal>section {
    padding:25px 16px 20px;
    border-radius:29px;
  }

  .vision-save-modal section>div {
    grid-template-columns:1fr;
  }
}

@media (max-width:390px) {
  .vision-wordmark strong {
    font-size:17px;
  }

  .vision-intro h1 {
    font-size:43px;
  }

  .vision-intro h2 {
    font-size:22px;
  }

  .vision-intro-copy {
    font-size:11px;
  }

  .vision-observing,
  .vision-results {
    padding-inline:13px;
  }

  .vision-nail-shell {
    width:var(--tiny-nail-width,39px);
    height:var(--tiny-nail-height,112px);
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .vision-nail {
    opacity:1;
    transform:rotate(var(--nail-tilt,0deg));
  }
}