/* One Night: a calm, hands-on product story. */
#one-night {
  --story-accent: #e8b9f4;
  background: #0c0b0e;
  isolation: isolate;
}
#one-night::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 82% 57%, #27182e80, transparent 48%);
  pointer-events: none;
}
#one-night .night-recap-head { max-width: 1060px; }
#one-night .night-recap-head > p:last-child { max-width: 740px; color: #b1acb6; }
#one-night .night-journey { grid-template-columns: minmax(260px, .62fr) minmax(0, 1.55fr); gap: 38px; align-items: center; margin-top: 70px; }
#one-night .night-journey-sidebar { min-width: 0; }
#one-night .night-journey-invitation { margin: 0 0 22px 18px; color: #f6f1f8; font-size: 16px; font-weight: 650; letter-spacing: -.025em; }
#one-night .night-journey-invitation span { display: block; margin-top: 7px; color: #aaa3b0; font-size: 12px; font-weight: 400; letter-spacing: 0; }
#one-night .night-journey-steps { display: grid; gap: 5px; margin: 0; padding: 0 0 0 12px; overflow: visible; }
#one-night .journey-track { top: 20px; bottom: 20px; width: 1px; background: #39323e; }
#one-night .journey-track b { background: #d3b3e9; box-shadow: 0 0 12px #c397e850; }
#one-night .night-journey-steps > button { grid-template-columns: 24px 32px 1fr; gap: 10px; min-height: 79px; padding: 13px 12px; border-radius: 16px; color: #bab3c0; background: transparent; box-shadow: none; }
#one-night .night-journey-steps > button:hover { background: #ffffff08; transform: translateX(3px); color: #fff; }
#one-night .night-journey-steps > button.is-selected { background: #ffffff0b; border-color: #ffffff17; color: #fff; }
#one-night .night-journey-steps > button > span { font-family: inherit; font-size: 11px; font-weight: 600; color: #857a8e; }
#one-night .night-journey-steps > button > i { width: 32px; height: 32px; border: 0; border-radius: 10px; color: #c8b9d0; background: #ffffff08; font-size: 17px; }
#one-night .night-journey-steps > button.is-selected > i { transform: none; box-shadow: none; background: #e1c6ee; color: #271333; }
#one-night .night-journey-steps button div b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
#one-night .night-journey-steps button div p { margin-top: 5px; color: #a39aa9; font-size: 11px; line-height: 1.45; }
#one-night .night-journey-controls { display: flex; gap: 9px; margin: 22px 0 0 12px; }
#one-night .night-journey-play { flex: 1; min-height: 45px; margin: 0; gap: 10px; background: #e9e0ef; border-color: #e9e0ef; color: #221a28; font-size: 12px; }
#one-night .night-journey-play b { font-weight: 650; }
#one-night .night-journey-play i { width: 20px; height: 20px; color: currentColor; background: none; font-size: 11px; animation: none; }
#one-night .night-journey-play:hover { background: #fff; transform: translateY(-1px); }
#one-night .night-journey-replay { flex: 0 0 45px; min-height: 45px; border: 1px solid #ffffff22; border-radius: 50%; background: transparent; color: #ded3e6; font-size: 22px; cursor: pointer; transition: background .25s, transform .35s; }
#one-night .night-journey-replay:hover { transform: rotate(-35deg); background: #ffffff0c; }
#one-night .night-demo-note { margin: 12px 0 0 18px; font-size: 10px; color: #8f8796; }
#one-night .night-journey-stage { position: relative; top: auto; height: 668px; min-height: 0; border: 1px solid #ffffff16; border-radius: 30px; background: #17131d; overflow: hidden; box-shadow: 0 35px 90px #0003, inset 0 1px 0 #ffffff09; }
#one-night .night-stage-topline { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 25px 30px; color: #c8bdcf; font-size: 11px; pointer-events: none; }
#one-night .night-stage-topline > span:first-child { display: flex; align-items: center; gap: 8px; }
#one-night .night-stage-topline > span:last-child { font-size: 8px; letter-spacing: .14em; color: #887a96; }
#one-night .night-stage-topline i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #d4afea; box-shadow: 0 0 12px #c391df70; }
#one-night .journey-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: 1fr; align-items: center; gap: 24px; padding: 80px 30px 64px; background: radial-gradient(ellipse at 80% 45%, #59376333, transparent 64%), #17131d; filter: none; transform: translateY(18px); opacity: 0; visibility: hidden; transition: opacity .55s ease, transform .8s cubic-bezier(.2,.75,.2,1), visibility 0s .6s; }
#one-night .journey-panel.is-active { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
#one-night .journey-panel .journey-copy { order: 0; align-self: center; padding: 0; background: none; }
#one-night .journey-copy > span { color: #d6bcdf; font-size: 10px; font-weight: 600; letter-spacing: .07em; line-height: 1.6; }
#one-night .journey-copy > h3 { margin: 23px 0 0; font-family: Neiko, Georgia, serif; font-size: clamp(33px, 3.1vw, 46px); line-height: 1.03; font-weight: 400; letter-spacing: -.04em; color: #faf7fc; text-wrap: balance; }
#one-night .journey-copy > p { margin: 23px 0 0; max-width: 30em; color: #c0b6c8; font-size: 15px; line-height: 1.65; }
#one-night .journey-copy > b { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 24px; padding: 0; border-radius: 0; background: none; color: #ceb7df; font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.5; text-transform: none; }
#one-night .journey-copy > b i { font-style: normal; color: #d8b3f0; font-size: 14px; }
#one-night .journey-scene { position: relative; order: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; height: 100%; padding: 8px 0; isolation: isolate; }
#one-night .journey-scene-orbit { position: absolute; z-index: -1; left: -15%; right: -15%; top: 22%; height: 60%; border: 1px solid #c193e126; border-radius: 50%; transform: rotate(-25deg); }
#one-night .journey-scene-orbit::before { content: ""; position: absolute; inset: 10px -20px; border: 1px solid #c193e110; border-radius: 50%; }
#one-night .journey-device { position: relative; display: block; width: auto; max-width: 100%; height: auto; max-height: 464px; margin: 0; padding: 5px; border: 1px solid #94889e; border-radius: 28px; background: linear-gradient(145deg,#9c969e,#29262e 25%,#6b666d 60%,#161318); box-shadow: 0 0 0 2px #0008, 0 22px 48px #0008; cursor: zoom-in; overflow: hidden; transition: transform .65s cubic-bezier(.2,.75,.2,1), box-shadow .65s; }
#one-night .journey-device img { display: block; width: auto; height: auto; max-width: 100%; max-height: 450px; margin: 0; object-fit: contain; border-radius: 22px; background: #16121b; }
#one-night .journey-device:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px #0008, 0 28px 54px #0009; }
#one-night .journey-expand-mark { position: absolute; bottom: 16px; right: 14px; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #100d17d9; color: #fff; border: 1px solid #ffffff55; font-size: 19px; box-shadow: 0 2px 9px #0003; }
#one-night .journey-scene-note { position: relative; display: block; margin-top: 20px; color: #b6a5c0; text-align: center; font-size: 10px; line-height: 1.5; }
#one-night .journey-poll-visual { display: grid; align-content: center; gap: 12px; width: 100%; padding: 27px 20px; border: 1px solid #ffffff26; border-radius: 24px; background: linear-gradient(145deg,#382442,#1d1824); box-shadow: 0 24px 50px #0003; }
#one-night .journey-poll-people { display: flex; margin-bottom: 10px; padding-left: 7px; }
#one-night .journey-poll-people i { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -7px; border: 2px solid #35243e; border-radius: 50%; background: #e0c6e9; color: #46304f; font-style: normal; font-size: 10px; font-weight: 650; }
#one-night .journey-poll-people i:nth-child(2) { background: #f2cfb9; }
#one-night .journey-poll-people i:nth-child(3) { background: #b9dad4; }
#one-night .journey-poll-people i:last-child { background: #fff; }
#one-night .journey-poll-visual > span { color: #cdb7d9; font-size: 9px; }
#one-night .journey-poll-visual h4 { margin: 4px 0 10px; color: #fff; font-size: clamp(23px, 2.3vw, 32px); font-weight: 550; letter-spacing: -.04em; line-height: 1.1; }
#one-night .journey-poll-visual > button { min-height: 66px; padding: 12px; gap: 8px; border: 1px solid #ffffff28; border-radius: 12px; background: #ffffff06; cursor: pointer; }
#one-night .journey-poll-visual > button:hover { border-color: #dab2ef; }
#one-night .journey-poll-visual > button[aria-pressed="true"] { border-color: #e4b9ff; box-shadow: 0 0 0 1px #e4b9ff; }
#one-night .journey-poll-visual > button i { transition: width .8s cubic-bezier(.2,.75,.2,1); background: linear-gradient(90deg,#ab6acb50,#d3a6e825); }
#one-night .journey-poll-visual > button b { color: #f5eff9; font-size: 12px; font-weight: 550; line-height: 1.45; }
#one-night .journey-poll-visual > button em { color: #e5c4f7; font-size: 12px; }
#one-night .journey-poll-visual > small { min-height: 30px; color: #bcabc7; font-size: 11px; line-height: 1.5; }
#one-night .journey-scene-details { justify-content: flex-start; padding-top: 12px; }
#one-night .journey-scene-details .journey-device { align-self: flex-end; max-width: 88%; }
#one-night .journey-scene-details .journey-device img { max-height: 385px; }
#one-night .journey-nutrition-card { position: relative; z-index: 1; align-self: flex-start; width: min(220px, 93%); margin-top: -73px; padding: 8px; border: 1px solid #ffffff90; border-radius: 16px; background: #f3ebf6; color: #4a3557; box-shadow: 0 16px 40px #0006; cursor: zoom-in; transform: rotate(-4deg); transition: transform .6s; }
#one-night .journey-nutrition-card:hover { transform: rotate(0); }
#one-night .journey-nutrition-card > span { display: flex; justify-content: space-between; padding: 4px 3px 9px; font-size: 8px; font-weight: 650; letter-spacing: .08em; }
#one-night .journey-nutrition-card > span i { font-size: 12px; font-style: normal; }
#one-night .journey-nutrition-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
#one-night .journey-pin-button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 23px; padding: 11px 14px; border: 1px solid #dab8ed70; border-radius: 99px; background: #dab8ed14; color: #ebd6f6; cursor: pointer; font-size: 11px; transition: background .3s, border-color .3s; }
#one-night .journey-pin-button i { font-size: 15px; font-style: normal; }
#one-night .journey-pin-button[aria-pressed="true"] { background: #d3eadc; border-color: #d3eadc; color: #264634; }
#one-night .journey-capture.is-pinned .journey-snap-device { transform: rotate(-4deg) translateY(-5px); box-shadow: 0 0 0 2px #0008, 0 26px 50px #0008, 0 0 60px #bd8bd325; }
#one-night .night-stage-counter { left: 30px !important; right: 30px !important; bottom: 23px !important; gap: 13px; color: #c8b7d5; }
#one-night .night-stage-counter > span { color: #bbaaC7 !important; font-family: inherit; font-size: 10px !important; }
#one-night .night-stage-counter > i { width: 78px; height: 2px; background: #ffffff15; }
#one-night .night-stage-counter > i b { background: #d5b0e9; }
#one-night .night-stage-counter > .night-stage-hint { margin-left: auto; font-size: 9px !important; color: #a694b2 !important; }
#one-night .journey-panel:focus-visible { outline: 2px solid #d3b3e9; outline-offset: -5px; }
@media (min-width: 1500px) {
  #one-night .night-journey { grid-template-columns: 305px 1fr; gap: 42px; }
  #one-night .journey-panel { gap: 33px; padding-inline: 36px; }
  #one-night .journey-copy > h3 { font-size: 47px; }
}
@media (max-width: 1100px) {
  #one-night .night-journey { grid-template-columns: 245px minmax(0, 1fr); gap: 23px; }
  #one-night .night-journey-steps > button { grid-template-columns: 20px 1fr; gap: 8px; }
  #one-night .night-journey-steps > button > i { display: none; }
  #one-night .journey-panel { gap: 17px; padding-inline: 23px; }
  #one-night .journey-copy > h3 { font-size: 35px; }
  #one-night .journey-copy > p { font-size: 14px; }
  #one-night .journey-poll-visual { padding: 22px 14px; }
}
@media (max-width: 900px) {
  #one-night .night-journey { grid-template-columns: 1fr; gap: 27px; }
  #one-night .night-journey-invitation { margin-left: 0; }
  #one-night .night-journey-invitation span { display: inline; margin-left: 8px; }
  #one-night .night-journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; gap: 8px; }
  #one-night .journey-track { display: none; }
  #one-night .night-journey-steps > button { display: flex; flex: auto; min-height: 62px; padding: 12px; gap: 8px; border: 1px solid #ffffff12; scroll-snap-align: none; }
  #one-night .night-journey-steps button div b { font-size: 12px; }
  #one-night .night-journey-steps button div p { display: none; }
  #one-night .night-journey-controls { display: flex; width: 255px; margin: 20px 0 0; }
  #one-night .night-demo-note { margin: 9px 0 0; }
  #one-night .night-journey-stage { height: 635px; }
  #one-night .journey-panel { padding-inline: 35px; gap: 35px; }
  #one-night .journey-copy > h3 { font-size: 43px; }
  #one-night .journey-copy > p { font-size: 16px; }
  #one-night .journey-poll-visual { padding: 26px 22px; }
}
@media (max-width: 600px) {
  #one-night .night-journey { margin-top: 40px; }
  #one-night .night-journey-invitation { font-size: 14px; }
  #one-night .night-journey-invitation span { display: block; margin: 7px 0 0; }
  #one-night .night-journey-steps { gap: 6px; }
  #one-night .night-journey-steps > button { display: grid; grid-template-columns: 1fr; gap: 7px; align-content: center; min-height: 73px; padding: 10px; border-radius: 13px; }
  #one-night .night-journey-steps > button > span { font-size: 9px; }
  #one-night .night-journey-steps button div b { font-size: 11px; line-height: 1.3; }
  #one-night .night-journey-stage { height: 820px; border-radius: 24px; }
  #one-night .night-stage-topline { padding: 22px; font-size: 10px; }
  #one-night .night-stage-topline > span:last-child { display: none; }
  #one-night .journey-panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 422px minmax(0, 1fr); gap: 16px; align-items: start; padding: 57px 22px 63px; }
  #one-night .journey-panel .journey-copy { order: 1; align-self: start; text-align: left; }
  #one-night .journey-scene { order: 0; padding: 0; }
  #one-night .journey-device { border-radius: 24px; }
  #one-night .journey-device img { max-height: 366px; border-radius: 19px; }
  #one-night .journey-copy > span { font-size: 9px; }
  #one-night .journey-copy > h3 { margin-top: 13px; font-size: 35px; line-height: 1.02; }
  #one-night .journey-copy > h3 br { display: none; }
  #one-night .journey-copy > p { margin-top: 14px; font-size: 14px; line-height: 1.6; }
  #one-night .journey-copy > b { margin-top: 14px; font-size: 10px; }
  #one-night .journey-scene-note { margin-top: 14px; font-size: 9px; }
  #one-night .journey-poll-visual { max-width: 300px; padding: 26px; }
  #one-night .journey-poll-visual h4 { font-size: 33px; }
  #one-night .journey-poll-visual > button { min-height: 62px; }
  #one-night .journey-poll-visual > button b { font-size: 13px; }
  #one-night .journey-scene-details { width: 235px; max-width: 100%; justify-self: center; }
  #one-night .journey-scene-details .journey-device img { max-height: 333px; }
  #one-night .journey-nutrition-card { width: 180px; margin-top: -77px; }
  #one-night .journey-pin-button { margin-top: 14px; }
  #one-night .night-stage-counter { left: 22px !important; right: 22px !important; }
  #one-night .night-stage-counter > .night-stage-hint { font-size: 8px !important; }
}
@media (max-width: 360px) {
  #one-night .night-journey-stage { height: 840px; }
  #one-night .journey-panel { padding-inline: 17px; grid-template-rows: 410px minmax(0, 1fr); }
  #one-night .journey-copy > h3 { font-size: 31px; }
  #one-night .journey-poll-visual { padding: 21px; }
  #one-night .night-stage-counter > .night-stage-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #one-night *, #one-night *::before { animation: none !important; transition: none !important; }
  #one-night .journey-device:hover, #one-night .journey-capture.is-pinned .journey-snap-device { transform: none; }
}