@font-face{font-family:SB Text;src:url('assets/fonts/sb-text.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:SB Text;src:url('assets/fonts/sb-text-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:SB Text;src:url('assets/fonts/sb-text-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:SB Display;src:url('assets/fonts/sb-display-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--paper:#f6f8f3;--ink:#183c2b;--muted:#65776c;--green:#21a038;--line:#d4dfd3;--dark:#10251b;--ease:cubic-bezier(.16,1,.3,1);font-family:SB Text,sans-serif;font-size:16px;color:var(--ink);color-scheme:light;background:var(--paper);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper)}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;cursor:pointer;transition:background-color .2s,transform .2s var(--ease)}
button:disabled{cursor:wait}button:active{transform:scale(.98)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:4px}
[hidden]{display:none!important}h1,h2,p{margin:0}
h1[tabindex="-1"]:focus{outline:none}
h1,h2{font-family:SB Display,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.12}
p{line-height:1.3}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#experience{position:relative;isolation:isolate;container-type:size;width:100%;max-width:430px;height:var(--app-height,100dvh);margin:0 auto;background:var(--paper);overflow:hidden;--inset:clamp(16px,6cqw,24px);--bottom:max(18px,env(safe-area-inset-bottom));--header:calc(clamp(84px,13cqh,110px) + env(safe-area-inset-top))}
#stage{position:relative;z-index:2;height:100%;min-height:0}
.brand{position:absolute;z-index:6;left:var(--inset);top:calc(clamp(16px,3cqh,28px) + env(safe-area-inset-top));width:min(290px,calc(100% - 96px));height:auto;aspect-ratio:290/44;border-radius:18px;overflow:hidden;background:#fff;transition:opacity .3s,visibility .3s}
.brand img{display:block;width:100%;height:auto}
.round{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff}
.close{position:absolute;z-index:6;right:var(--inset);top:calc(clamp(16px,3cqh,28px) + env(safe-area-inset-top));transition:opacity .3s,visibility .3s}
.primary{display:flex;flex:none;align-items:center;justify-content:center;min-height:clamp(48px,6.6cqh,56px);padding:12px 18px;border-radius:28px;background:var(--ink);color:#fff;font-weight:600;font-size:16px;line-height:1.2;text-align:center;width:100%}
.primary:hover{background:#24563d}.secondary{background:#fff;color:var(--ink)}.secondary:hover{background:#eaf0e7}
.text-button{background:transparent;font-weight:600;padding:12px 10px;min-height:44px}
/* Every museum screen uses the available viewport, including Safari's visible bars. */
.page{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;padding:var(--header) var(--inset) var(--bottom);gap:clamp(12px,2.3cqh,20px)}
.page-heading{position:relative;z-index:1;flex:none}
.page-heading h1{font-size:clamp(27px,4.5cqh,36px)}
.page-heading p{color:var(--muted);font-size:clamp(14px,2.1cqh,16px);margin-top:clamp(8px,1.4cqh,12px)}
.collection-light{position:absolute;z-index:-1;inset:18% -35% 0;background:url('assets/qr/img3.svg') center/cover no-repeat;mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent);pointer-events:none}
.album{display:grid;flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.6cqh,14px) 18px}
.album-item{--sticker-angle:-5deg;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:4px;min-width:0;min-height:0;padding:0;background:transparent}
.album-item:nth-child(even){--sticker-angle:6deg}
.sticker{position:relative;display:block;width:100%;height:100%;min-height:0;max-width:170px}
.sticker>img{display:block;width:100%;height:100%;object-fit:contain;opacity:.18;filter:grayscale(1);transform:scale(.92)}
.album-item.opened .sticker>img{opacity:1;filter:none;transform:rotate(var(--sticker-angle)) scale(.94)}
.item-name{font-size:clamp(13px,1.9cqh,14px);font-weight:600;text-align:center;line-height:1.18;color:var(--muted)}
.opened .item-name{color:var(--ink)}
.check{position:absolute;right:0;bottom:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:white}
.check svg{width:16px;height:16px}
.just-opened .check{animation:mark-in .3s var(--ease)}
.collection-progress{flex:none;height:68px;min-height:0}
.count{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;color:var(--muted)}
.dots{display:flex;gap:10px}.dots img{display:block}
.collection-progress>p{margin-top:8px;color:var(--muted);font-size:clamp(12px,1.9cqh,14px);line-height:1.3}
.collection-progress h2{font-size:20px}
.collection-arrival{position:absolute;z-index:7;object-fit:contain;pointer-events:none;transform-origin:center;will-change:transform,opacity}
/* Loading remains byte-driven; technical byte counters are absent from the UI. */
.loading{position:relative;display:flex;flex-direction:column;height:100%;padding:var(--header) var(--inset) calc(var(--bottom) + 22px)}
.loading h1{position:relative;z-index:1;flex:none;font-size:clamp(32px,5.2cqh,42px);line-height:1.2}
.loading .intro{position:relative;z-index:1;font-size:17px;color:var(--muted);margin-top:clamp(12px,2cqh,18px)}
.loading-art{position:absolute;left:0;top:36%;width:100%;height:51%;object-fit:cover}
.loading-art-edges{position:absolute;left:0;top:36%;width:100%;height:51%;background:linear-gradient(180deg,var(--paper),transparent 20%,transparent 77%,var(--paper));pointer-events:none}
.loading-progress{position:relative;z-index:1;margin-top:auto}
.loading-label{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:14px;font-weight:600;margin-bottom:14px}
.track{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.track>span{display:block;height:100%;width:100%;background:var(--green);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.track.indeterminate>span{width:30%;animation:indeterminate 1.5s ease-in-out infinite}
.camera,.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--dark)}
.scanner{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;padding:var(--header) var(--inset) var(--bottom);color:#fff;background:#10251b40;gap:12px}
.scanner:before{content:'';position:absolute;inset:0;background:linear-gradient(#10251b33,#10251b00 55%,#10251b33);pointer-events:none}
.scan-heading{position:relative;flex:none;width:100%}
.scan-heading h1{font-size:clamp(24px,4cqh,30px);line-height:1.15}
.scan-heading p{font-size:clamp(14px,2.1cqh,16px);margin-top:10px}
.scan-frame{position:relative;flex:none;--scan-size:min(266px,62cqw,31cqh);width:var(--scan-size);height:var(--scan-size);margin:auto}
.scan-frame i{position:absolute;width:36px;height:36px;border-color:#fff;border-style:solid;border-width:0;border-radius:2px}
.scan-frame i:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px}.scan-frame i:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px}.scan-frame i:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}.scan-frame i:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}
.scan-line{position:absolute;top:0;left:7%;right:7%;height:2px;background:#fff;box-shadow:0 3px 12px #fff5;opacity:.8;animation:scan 2.3s ease-in-out infinite alternate;animation-play-state:paused}
#experience[data-scanning="true"] .scan-line{animation-play-state:running}
.scan-bottom{position:relative;flex:none;width:100%}
.scan-notice{padding:12px 14px;background:var(--paper);border-radius:16px;color:var(--ink);font-size:14px;line-height:1.3;margin-bottom:12px}
.scan-notice strong{display:block;font-weight:600;margin-bottom:4px}
.camera-state{position:absolute;z-index:1;top:52%;left:var(--inset);right:var(--inset);transform:translateY(-50%);padding:24px;background:var(--paper);border-radius:24px;color:var(--ink);text-align:center}
.camera-state h2{font-size:26px}.camera-state p{font-size:16px;color:var(--muted);margin:14px 0 20px;line-height:1.4}.camera-state .primary{font-size:15px}.camera-state .spinner{margin:0 auto 20px}
.video-view{height:100%;color:#fff}
.video-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#10251b55,transparent 26%,transparent 52%,#0c100de0)}
.reveal{position:absolute;inset:0;width:100%;height:100%;background:transparent;color:#fff}
.video-controls{position:absolute;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));transition:opacity .3s,visibility .3s;pointer-events:auto}
.story-caption{font-size:11px;margin-bottom:4px}
.video-controls h1{font-size:clamp(22px,5cqh,32px);margin-bottom:8px}
.seek{display:block;width:100%;height:20px;margin:0 0 8px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#fff var(--position,0%),#ffffff4d var(--position,0%))}
.seek::-moz-range-track{height:3px;background:#ffffff4d}.seek::-moz-range-progress{height:3px;background:#fff}
.seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:#fff;margin-top:-3px}
.seek::-moz-range-thumb{width:9px;height:9px;border:0;background:#fff;border-radius:50%}
.transport{display:flex;align-items:center;gap:12px;height:44px}.icon-button{background:transparent;display:grid;place-items:center;width:44px;height:44px;padding:10px;color:inherit;border-radius:50%}.icon-button:hover{background:#ffffff26}
.time{font-size:12px;flex:1;font-variant-numeric:tabular-nums}
.hud-hidden .video-controls,.hud-hidden .brand,.hud-hidden .close{opacity:0;visibility:hidden;pointer-events:none}
.big-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:#fffc;color:var(--ink);display:grid;place-items:center}.big-play:active{transform:translate(-50%,-50%) scale(.98)}
.buffering{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);padding:16px;border-radius:50%;background:#10251b88}
.spinner{display:block;width:28px;height:28px;border:2px solid #65776c44;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}
.video-message{font-size:14px;line-height:1.35;margin-bottom:12px}
.complete-view{position:relative;display:flex;flex-direction:column;height:100%;padding-top:clamp(150px,31cqh,280px);background:#10251b33}
.complete-card{position:relative;display:flex;flex:1;min-height:0;flex-direction:column;gap:clamp(10px,2.1cqh,18px);padding:clamp(16px,2.8cqh,24px) var(--inset) var(--bottom);border-radius:32px 32px 0 0;background:#fff}
.complete-label{color:#167b2c;font-size:11px;font-weight:600}
.complete-card h1{font-size:clamp(28px,4.5cqh,36px)}
.era{font-size:13px;font-weight:600;color:var(--muted)}
.description{font-size:clamp(15px,2.2cqh,17px);line-height:1.3}
.complete-card .primary{margin-top:auto}
.error-page{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:var(--header) var(--inset) var(--bottom);height:100%}
.error-page h1{font-size:clamp(28px,4.4cqh,34px)}.error-page p{font-size:16px;color:var(--muted);line-height:1.4}.error-page .error-art{width:min(160px,23cqh);height:min(160px,23cqh);object-fit:contain;align-self:center}.error-actions{display:flex;flex:none;flex-direction:column;gap:8px;margin-top:8px}
body.cinema-active #experience{position:fixed;inset:0;width:100%;max-width:none;height:var(--app-height,100dvh);margin:0;border-radius:0;box-shadow:none;background:var(--dark)}
body.cinema-active .film{object-fit:contain;background:var(--dark)}
body.cinema-active .brand{top:calc(16px + env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left))}
body.cinema-active .close{top:calc(16px + env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right))}
.rotate-view{height:100%;display:flex;padding:calc(76px + env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));color:#fff;background:var(--dark)}
.rotate-content{width:100%;max-width:420px;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.rotate-symbol{position:relative;flex:none;width:180px;height:180px;margin-bottom:24px;color:#fff}
.rotate-phone{position:absolute;left:55px;top:32px;transform-origin:center;animation:phone-turn 3.2s var(--ease) infinite}
.rotate-picture{opacity:.14}.rotate-arrow{position:absolute;inset:0;color:#93c8a1;animation:turn-arrow 3.2s var(--ease) infinite}
.rotate-view h1{font-size:32px}.rotate-view h1+p{margin-top:12px;font-size:17px;line-height:1.4;color:#d9e6dd}.rotate-detail{margin-top:20px;font-size:14px;line-height:1.4;color:#b4c9bb}
.rotate-fullscreen{width:min(260px,100%);margin-top:24px;background:#fff;color:var(--ink)}.rotate-fullscreen:hover{background:#eaf0e7}.rotate-help{margin-top:16px;font-size:13px;line-height:1.4;color:#b4c9bb}
[data-screen="rotate-back"] .rotate-phone{animation-name:phone-return}
[data-screen="rotate-back"] .rotate-arrow{transform:scaleX(-1)}
.motion-paused .rotate-phone,.motion-paused .rotate-arrow,.motion-paused .scan-line{animation-play-state:paused!important}
@keyframes phone-turn{0%,12%{transform:rotate(0);opacity:1}48%,77%{transform:rotate(90deg);opacity:1}88%{transform:rotate(90deg);opacity:0}89%{transform:rotate(0);opacity:0}100%{transform:rotate(0);opacity:1}}
@keyframes phone-return{0%,12%{transform:rotate(90deg);opacity:1}48%,77%{transform:rotate(0);opacity:1}88%{transform:rotate(0);opacity:0}89%{transform:rotate(90deg);opacity:0}100%{transform:rotate(90deg);opacity:1}}
@keyframes turn-arrow{0%,10%{opacity:.25}38%,70%{opacity:1}88%,100%{opacity:.25}}
@keyframes mark-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scan{from{transform:translateY(12px);opacity:.55}to{transform:translateY(calc(var(--scan-size) - 14px));opacity:1}}
@keyframes indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(440%)}}
@media(min-width:600px){body{display:grid;place-items:center}#experience{height:min(844px,calc(var(--app-height,100dvh) - 48px));border-radius:28px;box-shadow:0 14px 36px #183c2b18}}
@container(height < 620px){
  .page{gap:10px}.page-heading h1{font-size:27px}.page-heading p{margin-top:8px;font-size:14px}.album{gap:8px 14px}.item-name{font-size:13px}.collection-progress>p{margin-top:6px;font-size:12px}
  .complete-view{padding-top:25cqh}.complete-card{gap:10px;padding-top:16px}.complete-card h1{font-size:28px}.era{font-size:12px}.description{font-size:15px;line-height:1.25}
  .camera-state{padding:18px}.camera-state h2{font-size:24px}.camera-state p{font-size:14px;margin:10px 0 14px}
  .rotate-symbol{width:140px;height:140px;margin-bottom:12px}.rotate-arrow{width:140px;height:140px}.rotate-phone{width:56px;height:93px;left:42px;top:25px}.rotate-view h1{font-size:28px}.rotate-view h1+p{font-size:16px;margin-top:10px}.rotate-detail{margin-top:12px;font-size:13px}.rotate-fullscreen{margin-top:16px;min-height:48px}.rotate-help{margin-top:12px;font-size:12px}
}
@media(orientation:landscape) and (max-height:450px){
  [data-screen="rotate-back"] .rotate-content{max-width:660px;display:grid;grid-template-columns:150px 1fr;column-gap:32px;text-align:left}
  [data-screen="rotate-back"] .rotate-symbol{grid-row:1/3;margin:0}
  [data-screen="rotate-back"] .rotate-view h1{align-self:end}
  [data-screen="rotate-back"] .rotate-view h1+p{align-self:start}
  body.cinema-active .brand{top:calc(10px + env(safe-area-inset-top));width:min(240px,calc(100% - 100px))}
  body.cinema-active .close{top:calc(10px + env(safe-area-inset-top))}
  .story-caption{display:none}.video-controls h1{font-size:22px;margin-bottom:4px}.video-controls{bottom:max(6px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}