/* Wspólny wygląd całej strony. Treść bez zmian. */
html body {
  background:
    radial-gradient(900px 520px at 0% -10%, rgba(228, 210, 164, .10), transparent 55%),
    radial-gradient(800px 480px at 100% 0%, rgba(80, 120, 90, .16), transparent 50%),
    #0c1410 !important;
  color: #e7eee4 !important;
}
html body :is(h1, h2, h3) {
  color: #f6f3ea !important;
  letter-spacing: -.03em;
}
html body :is(p, li) { color: #d5dece; }
html body em { color: #e4d2a4; }

html body .nm-sidebar {
  background: linear-gradient(180deg, #121c16 0%, #0c1410 100%) !important;
  border-right: 1px solid rgba(228, 210, 164, .16) !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, .18);
}
html body .nm-brand { color: #f3efe4 !important; }
html body .nm-brand-mark { color: #e4d2a4 !important; }
html body .nm-brand small,
html body .nm-nav-label,
html body .nm-sidebar-bottom { color: #b7c4b0 !important; letter-spacing: .16em; }
html body .nm-sidebar-note p { color: #d7e0d2 !important; }
html body .nm-sidebar-note em { color: #e4d2a4 !important; }

html body .home-screen { background: transparent !important; }
html body .nm-main { color: #e7eee4; }
html body .nm-topbar,
html body .nm-private,
html body .nm-breadcrumb { color: #c5d0c0 !important; letter-spacing: .08em; }

html body .nm-hero h1 {
  color: #f7f4ec !important;
  line-height: 1.02;
}
html body .nm-hero h1 em { color: #e4d2a4 !important; }
html body .nm-hero-copy > p,
html body .nm-hero-copy > p br + * {
  color: #d5dece !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
html body .nm-hero-sign { color: #e4d2a4 !important; }
html body .nm-hero-art img {
  filter: brightness(.86) saturate(.95) contrast(1.04) !important;
  border-radius: 18px;
}
html body .nm-art-stamp,
html body .nm-art-caption { color: #f3ead7 !important; }

html body :is(
  .nm-daily, .nm-mood, .nm-corner, .nm-song-card, .nm-seal, .nm-news, .nm-weekend,
  .nm-memory-strip, .nm-room-entry-copy, .nm-lights, .nm-return a,
  .card, .box, .daily-card, .memory-card, .update-card, .feel-card, .wait-card,
  .letter-paper, .listy-article, .pet-card, .envelope, .future-card, .new-note,
  .quiet-letter, .room-panel, .room-stage
) {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, .045), transparent 42%),
    #152019 !important;
  border-color: rgba(228, 210, 164, .28) !important;
  border-radius: 18px !important;
}
html body .nm-seal,
html body .nm-news,
html body .nm-room-entry-copy {
  box-shadow:
    inset 0 0 40px rgba(228, 210, 164, .06),
    0 18px 40px rgba(0, 0, 0, .18) !important;
}
html body .nm-news-kicker,
html body .nm-seal-kicker,
html body .nm-eyebrow,
html body .room-kicker,
html body .quiet-kicker { color: #e4d2a4 !important; }

html body .nm-button,
html body #homeFullPage,
html body button.lock-btn,
html body .quiet-next,
html body .jar-draw,
html body .room-picks button,
html body .room-dim {
  background: rgba(12, 20, 16, .35) !important;
  color: #f6f1e4 !important;
  border: 1px solid rgba(228, 210, 164, .62) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(228, 210, 164, .08), 0 8px 24px rgba(0, 0, 0, .18) !important;
}
html body .nm-button:hover,
html body #homeFullPage:hover,
html body button.lock-btn:hover {
  background: rgba(228, 210, 164, .14) !important;
}

html body .nm-corner h3 { color: #f6f3ea !important; font-size: 18px !important; }
html body .nm-corner p { color: #c9d4c6 !important; font-size: 14px !important; line-height: 1.45 !important; }
html body .nm-corner-meta { color: #e4d2a4 !important; font-size: 10px !important; letter-spacing: .14em !important; }
html body .nm-today-head h2,
html body .nm-today-head span,
html body .nm-today-head time { color: #f3efe4 !important; }
html body #nmMoodReply,
html body .nm-note-sign,
html body .nm-footer,
html body .nm-footer button { color: #c5d0c0 !important; }

html body #content > .chapter {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
html body #content .chapter p,
html body .listy-article p,
html body .letter-paper p,
html body .quiet-letter p {
  font-size: 17.5px !important;
  line-height: 1.85 !important;
  color: #e4ebdf !important;
}
html body #content .chapter h1,
html body #content .chapter h2,
html body .listy-article h1,
html body .listy-article h2 {
  color: #f7f4ec !important;
}

html body #lock {
  background:
    radial-gradient(700px 480px at 70% 40%, rgba(228, 210, 164, .12), transparent 60%),
    #0c1410 !important;
}
html body #lock:before {
  filter: brightness(.9) saturate(1) contrast(1.05) !important;
  opacity: .95;
}
html body #lock .lock-kicker { color: #e4d2a4 !important; letter-spacing: .22em !important; }
html body #lock .lock-title {
  color: #f7f4ec !important;
  -webkit-text-fill-color: #f7f4ec !important;
  font-size: clamp(46px, 6vw, 68px) !important;
}
html body #lock .lock-text,
html body #lock .lock-hint,
html body #lock .lock-hint-main { color: #d5dece !important; font-size: 16px !important; }
html body #lock #password {
  background: rgba(8, 14, 11, .72) !important;
  border: 1px solid rgba(228, 210, 164, .4) !important;
  border-radius: 12px !important;
  color: #f6f3ea !important;
  min-height: 48px;
}

html body .messages-shell,
html body .message-composer { background: #152019 !important; border-color: rgba(228, 210, 164, .28) !important; }
html body .msg.from-him .msg-bubble { background: #24362c !important; border-color: rgba(228, 210, 164, .25) !important; }
html body .msg.from-her .msg-bubble { background: #3a302b !important; color: #f3e6da !important; }

html body .cinema,
html body .frame,
html body .topbar { color: #e7eee4; }
html body .frame {
  border-color: rgba(228, 210, 164, .35) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28) !important;
}

html body .nm-viewcount {
  margin: 22px 0 4px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b7c4b0 !important;
}

@media (max-width: 850px) {
  html body .nm-hero-copy > p { font-size: 16px !important; }
  html body .nm-hero h1 { font-size: 42px !important; }
  html body .nm-corner p { font-size: 14px !important; }
  html body .nm-corner-meta { font-size: 10px !important; }
}
@media (max-width: 620px) {
  html body .nm-sidebar {
    background: #101814 !important;
    border-bottom: 1px solid rgba(228, 210, 164, .2) !important;
    box-shadow: none;
  }
  html body .nm-hero h1 { font-size: 40px !important; }
  html body .nm-main { padding-bottom: 78px !important; }
  html body #content .chapter p { font-size: 17px !important; }
  html body .sound-toggle {
    left: 10px !important;
    right: auto !important;
    bottom: 12px !important;
  }
  html body .quiet-toggle {
    left: auto !important;
    right: 10px !important;
    bottom: 12px !important;
  }
}

/* Światło w domku zależy od godziny. */
html body .nm-hero-art { position: relative; }
html body .nm-window-glow {
  position: absolute;
  left: 47%;
  top: 56%;
  width: 16%;
  height: 12%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 140, .95), rgba(255, 176, 70, .28) 46%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .35;
}
html[data-hour="morning"] body .nm-hero-art img {
  filter: brightness(1.14) saturate(1.1) sepia(.14) !important;
}
html[data-hour="morning"] body .nm-window-glow { opacity: .5; }
html[data-hour="day"] body .nm-hero-art img {
  filter: brightness(.98) saturate(.95) !important;
}
html[data-hour="day"] body .nm-window-glow { opacity: .28; }
html[data-hour="dusk"] body .nm-hero-art img {
  filter: brightness(.7) saturate(.82) sepia(.2) !important;
}
html[data-hour="dusk"] body .nm-window-glow { opacity: .75; }
html[data-hour="night"] body .nm-hero-art img {
  filter: brightness(.34) saturate(.5) contrast(1.08) !important;
}
html[data-hour="night"] body .nm-window-glow {
  opacity: 1;
  width: 24%;
  height: 18%;
}

/* Zbliżenie przed hasłem. */
#intro.zoom-intro {
  background: #070c09 !important;
  cursor: pointer;
  z-index: 1000001 !important;
}
#intro.zoom-intro .zoom-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}
#intro.zoom-intro .zoom-stage img {
  width: min(108vw, 860px);
  max-width: none;
  height: auto;
  transform-origin: 48% 57%;
  transform: scale(8.5);
  filter: brightness(2.2) saturate(1.35);
}
#intro.zoom-intro.is-on .zoom-stage img {
  animation: zoomPull 4.6s cubic-bezier(.45, .04, .2, 1) forwards !important;
}
#intro.zoom-intro .zoom-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 55vmin;
  height: 55vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 140, .9), rgba(255, 170, 70, .25) 42%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
#intro.zoom-intro.is-on .zoom-glow {
  animation: zoomGlow 4.6s ease forwards !important;
}
#intro.zoom-intro .zoom-line {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 12vh;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: Lora, Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 6vw, 40px);
  color: #f6f1e4;
  opacity: 0;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
#intro.zoom-intro.is-on .zoom-line {
  animation: zoomLine .9s ease 3.15s forwards !important;
}
#intro.zoom-intro .intro-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  background: transparent;
  color: #f6f1e4;
  border: 1px solid rgba(246, 241, 228, .45);
  border-radius: 999px;
  padding: 8px 14px;
  font: 13px "DM Sans", sans-serif;
}
#intro.zoom-intro.out {
  transition: opacity .7s ease !important;
  filter: none !important;
  transform: none !important;
}
@keyframes zoomPull {
  0% { transform: scale(8.5); filter: brightness(2.3) saturate(1.4); }
  22% { transform: scale(5.4); filter: brightness(1.7) saturate(1.25); }
  100% { transform: scale(1.02); filter: brightness(1) saturate(1); }
}
@keyframes zoomGlow {
  0% { opacity: 1; }
  55% { opacity: .45; }
  100% { opacity: 0; }
}
@keyframes zoomLine {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Krótki film przed hasłem. */
#intro.film-intro {
  background: #1c1418 !important;
  z-index: 1000001 !important;
  display: block !important;
}
#intro.film-intro video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1c1418;
}
#intro.film-intro.out {
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
  transition: opacity .7s ease !important;
  pointer-events: none;
}

#intro.bear-intro .bear-stage {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 20px;
}
#intro.bear-intro .hi-heart {
  position: relative;
  width: 68px;
  height: 62px;
  margin: 0 0 -6px;
  opacity: 0;
  z-index: 4;
}
#intro.bear-intro .hi-heart svg { width: 100%; height: 100%; fill: #e23d52; filter: drop-shadow(0 8px 10px rgba(226, 61, 82, .25)); }
#intro.bear-intro.is-on .hi-heart {
  animation: heartIn .4s cubic-bezier(.2, 1.4, .3, 1) 2s forwards,
    heartHop 1.15s ease 2.4s infinite !important;
}
#intro.bear-intro .bear-row {
  position: relative;
  width: min(320px, 88vw);
  height: 250px;
  margin-bottom: 8px;
  pointer-events: none;
}
#intro.bear-intro .bear {
  position: absolute;
  bottom: 0;
  width: 188px;
  height: auto;
  overflow: visible;
}
#intro.bear-intro .bear-l { left: -8px; }
#intro.bear-intro .bear-r { right: -8px; }
#intro.bear-intro.is-on .bear-l {
  animation: bearLeft 2s cubic-bezier(.22, .8, .2, 1) forwards !important;
}
#intro.bear-intro.is-on .bear-r {
  animation: bearRight 2s cubic-bezier(.22, .8, .2, 1) forwards !important;
}
#intro.bear-intro.is-on .paw {
  transform-box: fill-box;
  transform-origin: center;
  animation: pawTap .35s ease 2s both !important;
}
#intro.bear-intro .bear-pass {
  position: relative;
  left: auto;
  top: auto;
  z-index: 5;
  width: min(340px, 88vw);
  margin: 0;
  padding: 22px 20px 18px;
  border-radius: 28px;
  background: rgba(255, 252, 249, .96);
  box-shadow: 0 18px 40px rgba(190, 120, 140, .16);
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
#intro.bear-intro.is-on .bear-pass {
  animation: passIn .8s ease 3.2s forwards !important;
}
#intro.bear-intro.is-ready .bear-pass { pointer-events: auto; }
#intro.bear-intro .bear-pass p {
  margin: 0 0 14px;
  font-family: Lora, Georgia, serif;
  font-size: 28px;
  color: #5c4450 !important;
}
html body #intro.bear-intro .bear-pass input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #f0c3d0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #5c4450 !important;
  -webkit-text-fill-color: #5c4450 !important;
  caret-color: #e56b8a !important;
  box-shadow: 0 8px 18px rgba(190, 120, 140, .08) !important;
  padding: 14px 16px;
  font: 16px "DM Sans", sans-serif !important;
  letter-spacing: .4px !important;
  text-align: center;
}
html body #intro.bear-intro .bear-pass input::placeholder {
  color: #c9aeb8 !important;
  -webkit-text-fill-color: #c9aeb8 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
#intro.bear-intro .bear-pass button {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 13px 16px;
  background: #e56b8a;
  color: #fff;
  font: 600 16px "DM Sans", sans-serif;
  box-shadow: 0 8px 18px rgba(229, 107, 138, .28);
}
#intro.bear-intro .bear-pass.is-shake {
  animation: passShake .45s ease !important;
}
@keyframes bearLeft {
  from { transform: translateX(-78vw); }
  to { transform: translateX(0); }
}
@keyframes bearRight {
  from { transform: translateX(78vw); }
  to { transform: translateX(0); }
}
@keyframes pawTap {
  0% { transform: translateY(8px); }
  45% { transform: translateY(-7px) scale(1.06); }
  100% { transform: none; }
}
@keyframes heartIn {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heartHop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}
@keyframes passIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes passShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
@media (max-width: 420px) {
  #intro.bear-intro .bear { width: 156px; }
  #intro.bear-intro .bear-row { height: 214px; width: min(280px, 92vw); }
  #intro.bear-intro .bear-pass p { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #intro.bear-intro .bear-l,
  #intro.bear-intro .bear-r,
  #intro.bear-intro .hi-heart,
  #intro.bear-intro .bear-pass {
    animation: none !important;
    opacity: 1 !important;
    transform: none;
    pointer-events: auto !important;
  }
}