@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #001965; --navy-2: #0a2a8a; --sea: #005AD2; --sky: #8EC3EF; --sky-2: #cfe6fb; --coral: #E6553F;
  --glass: rgba(0, 22, 92, .72); --glass-line: rgba(255, 255, 255, .22);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy); color: #fff;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
.brand-off .brand-only { display: none !important; }
.brand-on .brand-hide { display: none !important; }

/* icons: generated white line icons used as masks so they can be tinted */
.ico { display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }
.ico.big { width: 64px; height: 64px; opacity: .9; }
.ico-close { --i: url(../img/icons/close.png); } .ico-sound-on { --i: url(../img/icons/sound-on.png); } .ico-sound-off { --i: url(../img/icons/sound-off.png); }
.ico-settings { --i: url(../img/icons/settings.png); } .ico-help { --i: url(../img/icons/help.png); } .ico-rotate { --i: url(../img/icons/rotate.png); }
.ico-zoom { --i: url(../img/icons/zoom.png); } .ico-cube { --i: url(../img/icons/cube.png); } .ico-scan { --i: url(../img/icons/scan.png); }
.ico-check { --i: url(../img/icons/check.png); } .ico-next { --i: url(../img/icons/next.png); } .ico-pulse { --i: url(../img/icons/pulse.png); }

/* buttons: generated pill / glass graphics */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; height: 58px; padding: 0 30px;
  font-weight: 650; font-size: 16px; letter-spacing: .01em; background: center / 100% 100% no-repeat; transition: transform .2s var(--ease), filter .2s; }
.btn:active { transform: scale(.96); filter: brightness(1.15); }
.btn-primary { background-image: url(../img/ui-btn-primary.webp); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.btn-secondary { background-image: url(../img/ui-btn-secondary.webp); color: var(--navy); }
.btn .ico { width: 20px; height: 20px; }
.icon-btn { flex: none; width: 46px; height: 46px; aspect-ratio: 1; display: inline-grid; place-items: center; background: url(../img/ui-btn-round.webp) center / 100% 100% no-repeat; color: var(--navy); transition: transform .2s var(--ease); }
.icon-btn:active { transform: scale(.9); }
.icon-btn .ico { width: 22px; height: 22px; }

/* ---------------- welcome ---------------- */
.screen { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; }
#welcome { overflow-x: hidden; overflow-y: auto; }
#welcome > .welcome-bg, #welcome > .welcome-glow { position: fixed; }
.welcome-bg { position: absolute; inset: -4%; background: url(../img/welcome-bg.webp) center / cover; animation: kenburns 24s ease-in-out infinite alternate; }
.welcome-glow { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 25, 101, .55) 0%, rgba(0, 25, 101, 0) 22%, rgba(0, 25, 101, .35) 40%, rgba(0, 18, 80, .9) 60%, #001352 100%); }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -2%); } }
.settings-btn { position: absolute; z-index: 2; top: calc(14px + var(--safe-t)); right: 14px; opacity: .85; }
.welcome-top { position: relative; padding: calc(26px + var(--safe-t)) 26px 0; }
.welcome-logo { width: 74px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); animation: fadeDown 1s var(--ease) both; }
.welcome-emblem { width: 58px; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); animation: fadeDown 1s var(--ease) both; }
.welcome-body { position: relative; margin-top: auto; padding: 0 28px calc(26px + var(--safe-b)); max-width: 560px; }
.eyebrow { margin: 0 0 10px; font-size: 12.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); text-shadow: 0 1px 10px rgba(0, 10, 60, .9); }
h1 { text-shadow: 0 2px 24px rgba(0, 10, 60, .6); margin: 0; font-size: clamp(38px, 11vw, 54px); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; }
.welcome-body .divider { width: 190px; margin: 16px 0 6px -6px; display: block; }
.lead { margin: 8px 0 14px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.station { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid var(--glass-line); font-size: 14px; }
.station img { width: 30px; height: 30px; }
.btn-start { width: 100%; max-width: 360px; }
.footer { margin: 18px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .55); letter-spacing: .02em; }
.anim { animation: fadeUp .9s var(--ease) both; }
.welcome-body .anim:nth-child(1) { animation-delay: .15s } .welcome-body .anim:nth-child(2) { animation-delay: .25s }
.welcome-body .anim:nth-child(3) { animation-delay: .35s } .welcome-body .anim:nth-child(4) { animation-delay: .45s }
.welcome-body .anim:nth-child(5) { animation-delay: .55s } .welcome-body .anim:nth-child(6) { animation-delay: .65s }
.welcome-body .anim:nth-child(7) { animation-delay: .75s }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } }
.screen.leaving { animation: leave .55s var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }

/* ---------------- tutorial ---------------- */
.glass { background: rgba(0, 18, 80, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#tutorial { align-items: center; justify-content: center; text-align: center; padding: calc(30px + var(--safe-t)) 28px calc(28px + var(--safe-b)); animation: fadeIn .4s both; }
@keyframes fadeIn { from { opacity: 0; } }
.skip { position: absolute; top: calc(18px + var(--safe-t)); right: 20px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--glass-line); font-size: 14px; color: rgba(255, 255, 255, .85); }
.tut-stage { width: min(76vw, 340px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 10px; }
.tut-img { width: 100%; height: 100%; position: relative; }
.tut-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: tutIn .6s var(--ease) both; }
.tut-img img.alt { animation: tutAlt 4s ease-in-out infinite; }
.tut-img img.alt + img.alt { animation-delay: -2s; }
@keyframes tutIn { from { opacity: 0; transform: scale(.9) translateY(10px); } }
@keyframes tutAlt { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
.tut-title { margin: 6px 0 8px; font-size: 24px; font-weight: 750; letter-spacing: -.01em; }
.tut-body { margin: 0 auto 22px; max-width: 320px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); min-height: 3em; }
.tut-dots { display: flex; gap: 8px; margin-bottom: 22px; }
.tut-dots i { width: 8px; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .3); transition: all .3s var(--ease); }
.tut-dots i.on { width: 26px; background: var(--sky); }

/* ---------------- AR layers ---------------- */
#ar-root { position: fixed; inset: 0; overflow: hidden; z-index: 1; background: #000; }
/* designed background behind the organ in 3D view (covers the camera image; video is z -2) */
.viewer-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: linear-gradient(rgba(0, 18, 80, .5), rgba(0, 18, 80, .5)), url(../img/welcome-bg.webp) center / cover; }
#ar-root.viewer-on .viewer-bg { opacity: 1; }
#ar-root video { object-fit: cover; }
#ar-root canvas { touch-action: none; }
#labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaders path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; stroke-dasharray: 3 3; }
.layer { position: fixed; inset: 0; z-index: 6; pointer-events: none; }

/* scanning watermark */
#scan { display: grid; place-items: center; animation: fadeIn .5s both; }
.scan-frame { position: absolute; width: min(74vw, 60vh, 420px); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -54%); }
.scan-frame img { width: 100%; height: 100%; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .75; } }
.scan-line { position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, var(--sky), #fff, var(--sky), transparent); box-shadow: 0 0 18px 4px rgba(142, 195, 239, .55); animation: scanline 2.6s ease-in-out infinite; }
@keyframes scanline { 50% { top: 88%; } }
.scan-mark { position: absolute; width: min(46vw, 210px); top: 50%; left: 50%; transform: translate(-50%, -62%); opacity: .38; }
.scan-text { position: absolute; left: 0; right: 0; bottom: calc(110px + var(--safe-b)); text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.scan-text strong { display: block; font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.scan-text span { font-size: 14px; color: rgba(255, 255, 255, .8); }
.scan-progress { position: absolute; bottom: calc(60px + var(--safe-b)); left: 50%; transform: translateX(-50%); width: 220px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .8); }
.scan-progress .bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; margin-bottom: 6px; }
.scan-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sea), var(--sky)); transition: width .2s; }

/* HUD */
.hud { position: fixed; z-index: 8; }
#hud-top { top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--safe-t)) 12px 12px; background: linear-gradient(180deg, rgba(0, 18, 80, .55), transparent); animation: fadeDown .5s var(--ease) both; }
.chip { min-width: 0; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 6px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; }
.chip img { width: 34px; height: 34px; }
.chip-name { white-space: nowrap; }
.chip-name b { font-weight: 700; } .chip-name i { color: var(--sky); font-weight: 400; }
.chip-progress { display: inline-flex; gap: 4px; margin-left: 4px; }
.chip-progress i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .3s, transform .3s; }
.chip-progress i.on { background: var(--coral); transform: scale(1.15); }
.organ-chip:empty, .organ-chip.empty { visibility: hidden; }
.hud-logo { height: 34px; margin-left: auto; opacity: .9; }
.hud-actions { display: flex; gap: 8px; margin-left: auto; }
.hud-logo + .hud-actions { margin-left: 10px; }
#switcher { top: calc(74px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; padding: 4px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-line); }
#switcher button { padding: 9px 20px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .75); transition: all .25s; }
#switcher button.on { background: #fff; color: var(--navy); }
#hud-bottom { left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 14px; padding: 18px 12px calc(16px + var(--safe-b)); background: linear-gradient(0deg, rgba(0, 18, 80, .6), transparent); animation: fadeUp .5s var(--ease) both; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; }
.tool small { font-size: 11px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.tool.on .icon-btn { color: var(--coral); box-shadow: 0 0 0 2px var(--coral), 0 0 18px rgba(230, 85, 63, .5); border-radius: 50%; }
#hint { left: 50%; bottom: calc(112px + var(--safe-b)); transform: translateX(-50%); width: max-content; max-width: 92vw; padding: 9px 16px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-line); font-size: 12.5px; text-align: center; transition: opacity .6s; }
#hint.fade { opacity: 0; }
#toast { left: 50%; top: calc(128px + var(--safe-t)); transform: translateX(-50%); width: max-content; max-width: 90vw; padding: 10px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); font-size: 13.5px; line-height: 1.4; text-align: center; animation: fadeDown .4s var(--ease) both; }

/* hotspot labels (projected from 3D every frame) */
.hs-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px;
  background: rgba(0, 22, 92, .78); border: 1px solid rgba(142, 195, 239, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 10, 50, .35); white-space: nowrap; text-align: left; will-change: transform, opacity; transition: opacity .25s, background .2s; opacity: 0; }
.hs-label.left { flex-direction: row-reverse; padding: 6px 6px 6px 12px; text-align: right; }
.hs-label:active { background: var(--sea); }
.hs-dot { width: 18px; height: 18px; border-radius: 50%; background: url(../img/ui-hotspot.webp) center / 140% no-repeat; flex: none; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.25); } }
.hs-text { display: flex; flex-direction: column; line-height: 1.15; }
.hs-text i { font-size: 13px; font-weight: 650; font-style: italic; }
.hs-text small { font-size: 10.5px; color: var(--sky-2); opacity: .9; }
.hs-check { display: none; width: 16px; height: 16px; background: var(--coral); -webkit-mask: url(../img/icons/check.png) center / contain no-repeat; mask: url(../img/icons/check.png) center / contain no-repeat; }
.hs-label.visited .hs-check { display: block; }
.hs-label.visited { border-color: rgba(230, 85, 63, .7); }
.hs-label.back .hs-text small { display: none; }

/* overlays / modal (fixed to the camera, independent of the marker) */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(0, 10, 50, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadeIn .3s both; }
.overlay.closing { animation: fadeOut .3s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.card { position: relative; width: min(100%, 430px); max-height: 86vh; overflow: auto; padding: 26px 24px 22px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(10, 42, 138, .94), rgba(0, 20, 84, .96)); border: 1px solid var(--glass-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15); }
.info-card { animation: cardIn .45s var(--ease) both; }
.overlay.closing .card { animation: cardOut .3s forwards; }
@keyframes cardIn { from { opacity: 0; transform: scale(.6) translate(var(--fx, 0), var(--fy, 0)); } }
@keyframes cardOut { to { opacity: 0; transform: scale(.85); } }
.card .close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; }
.m-organ { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.m-organ img { width: 24px; height: 24px; }
.card h2 { margin: 10px 44px 2px 0; font-size: 28px; line-height: 1.1; font-weight: 750; font-style: italic; letter-spacing: -.01em; }
.m-hu { margin: 0; font-size: 16px; color: var(--sky-2); }
.card .divider { width: 170px; margin: 12px 0 8px -6px; display: block; }
.m-text { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.m-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.m-actions .btn { min-width: 0; width: 100%; height: 54px; }
.done-card { text-align: center; animation: cardIn .5s var(--ease) both; }
.done-card h2 { font-style: normal; margin: 14px 0 8px; font-size: 24px; }
.done-card p { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.done-badge { width: 84px; height: 84px; margin: 4px auto 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--coral), #b8361f); box-shadow: 0 0 0 8px rgba(230, 85, 63, .2), 0 0 40px rgba(230, 85, 63, .6); animation: pop .7s var(--ease) .1s both; }
.done-badge .ico { width: 44px; height: 44px; }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } }

/* settings sheet */
.sheet-wrap { place-items: end center; padding: 0; z-index: 40; }
.sheet { width: min(100%, 520px); border-radius: 26px 26px 0 0; padding: 24px 22px calc(22px + var(--safe-b)); animation: sheetIn .4s var(--ease) both; max-height: 92vh; }
@keyframes sheetIn { from { transform: translateY(100%); } }
.sheet h2 { font-style: normal; margin: 0 0 14px; font-size: 22px; }
.row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 2px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 15px; text-align: left; cursor: pointer; }
.row small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 50px; height: 30px; flex: none; border-radius: 30px; background: rgba(255, 255, 255, .2); transition: background .25s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.row input:checked + .switch { background: var(--sea); }
.row input:checked + .switch::after { transform: translateX(20px); }
.row.link { color: var(--sky-2); }
.credits { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.credits summary { padding: 12px 2px; cursor: pointer; border-top: 1px solid rgba(255, 255, 255, .12); }
.credits ul { margin: 0; padding-left: 18px; line-height: 1.6; }

/* camera error */
#camerror { align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px; }
#camerror h2 { margin: 6px 0 0; } #camerror p { max-width: 340px; line-height: 1.55; color: rgba(255, 255, 255, .85); margin: 0 0 10px; }

/* celebration sparks */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 25; mix-blend-mode: screen; }
.spark { position: absolute; width: 46px; height: 46px; background: url(../img/fx-spark.png) center / contain no-repeat; animation: spark 1.3s var(--ease) forwards; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--s)) rotate(180deg); opacity: 0; } }
.tap-ripple { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; background: url(../img/fx-ring.png) center / contain no-repeat; animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }

@media (max-width: 420px) { .chip-name i { display: none; } .hud-logo { height: 28px; } }
@media (max-height: 720px) { h1 { font-size: 36px; } .lead { font-size: 14px; line-height: 1.45; } .welcome-logo { width: 56px; } .welcome-body .divider { margin: 10px 0 2px -6px; } .footer { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (min-width: 900px) { .welcome-body { margin-left: 8vw; margin-bottom: 4vh; } }