/* Theme: override these variables in your site's CSS to match your colors and fonts. */
:root {
  --ni-paper: #f4ead7;           /* page background behind the cards */
  --ni-card: #fffaf0;            /* note cards */
  --ni-stage-1: #fffaf0;         /* picture background, center */
  --ni-stage-2: #e2cda4;         /* picture background, edge */
  --ni-ink: #2a1d14;             /* text */
  --ni-accent: #7a4a12;          /* note headings */
  --ni-btn-bg: #2a1d14;
  --ni-btn-ink: #fbe7b5;
  --ni-radius: 20px;
  --ni-title-font: 'Frank Ruhl Libre', 'David Libre', serif;
  --ni-body-font: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
}
.ni { display: block; color: var(--ni-ink); font-family: var(--ni-body-font); line-height: 1.65; }
.ni-head { text-align: center; margin-bottom: 12px; }
.ni-title { margin: 0; font: 900 clamp(28px, 6vw, 44px)/1.15 var(--ni-title-font); }
.ni-sub { opacity: .7; font-size: 15px; }
.ni-fig { position: relative; margin: 0; padding: 6px; border-radius: var(--ni-radius);
  background: radial-gradient(ellipse at 50% 40%, var(--ni-stage-1) 0%, var(--ni-stage-2) 100%);
  box-shadow: 0 10px 34px rgba(107, 74, 43, .2); }
.ni-fig svg { display: block; width: 100%; height: auto; }
.ni-nolabels .lab { display: none; }
.ni-tools { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.ni-btn { border: 0; cursor: pointer; border-radius: 18px; padding: 6px 12px; font: 500 13px var(--ni-body-font);
  background: var(--ni-btn-bg); color: var(--ni-btn-ink); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ni-btn:disabled { opacity: .5; cursor: default; }
/* tappable parts */
.ni-fig [data-part] { transition: opacity .35s, filter .35s; }
.ni-picking [data-part]:not(.ni-on) { opacity: .28; }
.ni-picking [data-part].ni-on { filter: drop-shadow(0 0 6px #fff3b0) drop-shadow(0 0 14px rgba(226,167,46,.8)); }
.ni-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 13px; background: rgba(42,29,20,.8);
  color: #fbe7b5; padding: 4px 12px; border-radius: 14px; pointer-events: none; animation: ni-pulse 2s ease-in-out infinite; }
@keyframes ni-pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
.ni-info { position: absolute; left: 12px; right: 12px; bottom: 12px; max-width: 460px; margin: 0 auto; z-index: 3;
  background: var(--ni-card); border-radius: 16px; padding: 12px 16px; box-shadow: 0 8px 26px rgba(0,0,0,.25); }
.ni-info h3 { margin: 0 0 4px; font: 900 22px var(--ni-title-font); color: var(--ni-accent); }
.ni-info p { margin: 0; font-size: 15px; }
.ni-x { position: absolute; top: 6px; left: 10px; border: 0; background: none; font-size: 22px; cursor: pointer; color: inherit; opacity: .6; }
/* dressing animation */
.ni-fig [data-step] { transition: opacity .8s ease, transform .8s ease; transform-box: fill-box; }
.ni-dressing [data-step].ni-hidden { opacity: 0; transform: translateY(-24px); }
.ni-caption { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 90%; text-align: center;
  background: rgba(42,29,20,.88); color: #fbe7b5; padding: 8px 16px; border-radius: 16px; font: 700 18px var(--ni-title-font); }
.ni-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.ni-note { background: var(--ni-card); border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(107, 74, 43, .1); }
.ni-note h3 { margin: 0 0 6px; font: 900 20px var(--ni-title-font); color: var(--ni-accent); }
.ni-note p { margin: 0; font-size: 15px; }
.ni-loading, .ni-error { padding: 40px; text-align: center; opacity: .7; }
.ni-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.ni-photo { margin: 0; background: var(--ni-card); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(107, 74, 43, .1); }
.ni-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ni-photo figcaption { padding: 6px 10px; font-size: 14px; text-align: center; }
.ni-photo small { display: block; font-size: 11px; opacity: .6; }
/* Label fonts inside the SVG follow the theme too */
.ni .lab text { font-family: var(--ni-title-font); }
.ni .lab text.s, .ni .lab text.d { font-family: var(--ni-body-font); }
@media (max-width: 600px) {
  .ni-info { position: relative; left: auto; right: auto; bottom: auto; margin: 8px 4px 4px; max-width: none; }
}
/* painted items: picture with spotlight on the tapped part */
.ni-fig svg.ni-paint { width: min(100%, 440px); margin: 0 auto; border-radius: 14px; }
.ni-fig svg.ni-paint.ni-wide { width: 100%; }
.ni-paint .ni-dim { opacity: 0; transition: opacity .3s; pointer-events: none; }
.ni-paint [data-part].ni-on .ni-dim { opacity: .64; }
.ni-paint .ni-hit { fill: transparent; }
.ni-picking svg.ni-paint [data-part]:not(.ni-on) { opacity: 1; }
.ni-picking svg.ni-paint [data-part].ni-on { filter: none; }
.ni-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.ni-link { text-decoration: none; padding: 10px 18px; font-size: 15px; }
/* parts list: tap a name and that part lights up in the picture */
.ni-parts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 10px 4px 4px; }
.ni-part { border: 1px solid rgba(42,29,20,.18); background: var(--ni-card); color: var(--ni-ink); border-radius: 14px; padding: 7px 12px;
  min-height: 40px; font: 500 15px/1.25 var(--ni-body-font); cursor: pointer; }
.ni-part.ni-on { background: var(--ni-btn-bg); color: var(--ni-btn-ink); border-color: var(--ni-btn-bg); }
.ni-tall .ni-stage { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.ni-tall .ni-stage svg.ni-paint { flex: 1 1 0; min-width: 0; width: auto; max-width: 440px; margin: 0; }
.ni-tall .ni-parts { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; width: 124px; padding: 4px 0; }
.ni-tall .ni-part { width: 100%; text-align: start; }