:root{--paper:#eee8dd;--ink:#4b463e;--muted:#968d7f;--line:rgba(79,68,51,.18);font-family:Georgia,'Noto Serif SC','Songti SC',SimSun,serif;color:var(--ink);background:var(--paper)}
#roof-toggle{position:absolute;z-index:4;cursor:pointer;padding:0;border-radius:8px}#roof-toggle:hover{background:rgba(255,250,240,.035)}#roof-toggle:focus-visible{outline:1px solid #a59277}#roof-toggle span{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1px;white-space:nowrap;color:#99876e}#roof-toggle[aria-expanded="true"] span{display:none}#roof-toggle:hover[aria-expanded="true"] span{display:block}#back-to-curtain{position:absolute;top:15px;left:5.4%;z-index:6;padding:10px 15px;border:1px solid var(--line);border-radius:3px;background:rgba(249,244,235,.92);font-size:12px;letter-spacing:1px}#back-to-curtain kbd{font:9px Arial;border:1px solid var(--line);border-radius:3px;padding:2px 4px;margin-left:12px;color:#a18b70}.photo-return{font-size:12px;position:absolute;left:25px;top:13px;color:#887861}#photo-dialog{padding-top:48px!important}
*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 28% 24%,#f8f4eb 0,transparent 60%),var(--paper)}
.zoom-controls[hidden]{display:none}button:disabled{cursor:default;opacity:.35}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,main:focus-visible{outline:2px solid #987a54;outline-offset:5px}button{transition:color .2s,background .2s,opacity .2s}button:hover{color:#95754e}.header{position:relative;height:106px;padding:28px 5.4%;display:flex;align-items:center;justify-content:space-between;z-index:12}.brand{display:flex;gap:13px;align-items:center;text-align:left;padding:0;font-size:20px;letter-spacing:2px}.brand-mark{border:1px solid #b5a78f;font-size:19px;width:32px;height:38px;display:grid;place-items:center;letter-spacing:0}.brand small{display:block;font:8px/1.8 Arial,sans-serif;letter-spacing:2.4px;color:var(--muted);margin-top:3px}nav{display:flex;gap:52px}.city{position:relative;padding:5px 0 12px;letter-spacing:3px;font-size:16px;white-space:nowrap;flex-shrink:0}.city span{display:block;font:8px/1.8 Arial,sans-serif;letter-spacing:1.3px;margin-top:6px;color:var(--muted)}.city:after{content:"";position:absolute;bottom:1px;left:0;right:3px;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .3s}.city.active:after{transform:scaleX(1)}.import-button{font-size:13px;border:1px solid var(--line);border-radius:2px;padding:10px 15px;letter-spacing:1px}.import-button span{padding-right:4px}
#stage{height:calc(100dvh - 175px);position:relative;overflow:hidden;touch-action:none;outline:none}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#shadow{opacity:.8;filter:blur(8px);transform-origin:50% 20%}#background{transition:filter .08s;will-change:filter}#foreground{z-index:3}#vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 51% 45%,transparent 12%,rgba(66,52,36,.12) 60%,rgba(50,38,27,.42) 100%);opacity:0}.intro{position:absolute;left:6%;top:48%;pointer-events:none;transition:opacity .5s;z-index:4}.intro p{font-size:19px;letter-spacing:3px;line-height:1.8;margin:0 0 12px}.intro span{color:var(--muted);font-size:12px;letter-spacing:2px}.hint{position:absolute;bottom:61px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:#9a8d79;white-space:nowrap;pointer-events:none;z-index:4}.zoom-controls{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;border:1px solid var(--line);padding:3px 8px;border-radius:30px;z-index:5;background:rgba(247,242,233,.85);backdrop-filter:blur(12px)}.zoom-controls button{height:28px;min-width:27px;font:18px Arial}.zoom-controls #reset{font-size:21px}.zoom-controls #zoom-label{min-width:45px;font-size:10px;text-align:center;letter-spacing:1px}.divider{height:13px;width:1px;background:var(--line);margin:0 2px}.period-label{position:absolute;left:calc(50% - 280px);top:38%;z-index:5}.period-label>span{font-size:11px;letter-spacing:2px;color:#8a7c69}.period-label h1{font-size:26px;font-weight:400;letter-spacing:2px;margin:14px 0}.period-label p{font-size:11px;color:#8b7f6d;letter-spacing:1px}.period-label button{border:1px solid var(--line);border-radius:50%;width:29px;height:29px;margin:12px 8px 0 0;font-family:Arial}#photo-action{position:absolute;z-index:5;padding:8px 12px;background:rgba(251,247,239,.95);border-radius:2px;border:1px solid var(--line);font-size:11px;box-shadow:0 4px 20px #59452910;white-space:nowrap}#photo-action span{margin-left:12px}.loading{position:absolute;inset:0;display:grid;place-items:center;z-index:5;font-size:14px;letter-spacing:3px;background:var(--paper)}.loading[hidden]{display:none}footer{height:69px;margin:0 5.4%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#968a76;letter-spacing:1px;gap:15px}.footer-left{display:flex;align-items:center;gap:8px}.dot{width:4px;height:4px;background:#a58e6b;border-radius:50%}.instructions span{margin:0 12px;color:#bbaf9e}.sample{font-size:9px}.toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:#fcf8ef;color:var(--ink);border:1px solid var(--line);padding:12px 22px;font-size:12px;box-shadow:0 10px 50px #49382215;z-index:35;max-width:90%;text-align:center}.toast[hidden]{display:none}
dialog{border:1px solid #cec3b2;border-radius:4px;background:#f6f1e7;color:var(--ink);padding:38px;max-width:calc(100% - 32px);box-shadow:0 25px 100px #3c2b2433}dialog::backdrop{background:#40352b48;backdrop-filter:blur(9px)}.dialog-close{position:absolute;right:10px;top:7px;width:30px;height:30px;font:25px Arial;color:#8e806c}.eyebrow{font:9px Arial;letter-spacing:3px;color:#a18b69}#import-dialog{width:480px}#import-dialog h2{font-size:25px;font-weight:400;margin:20px 0}#import-dialog p{font-size:13px;color:#8a7f6e;line-height:2}.import-choices{display:grid;gap:10px;margin:25px 0}.import-choices button{border:1px solid #cbbca5;padding:16px 18px;font-size:13px;text-align:left}.import-choices span{float:right}.import-choices button:hover{background:#ebe2d3}.import-note{font-size:11px!important}#restore-demo{font-size:11px;text-decoration:underline;margin-top:10px;color:#a18b69}#photo-dialog{width:min(900px,90vw);padding:38px 25px 20px}.large-photo{height:min(65dvh,640px);width:100%;background-repeat:no-repeat;background-position:center;background-color:#e5ded2}.large-photo canvas{position:static;display:block;width:100%;height:100%;object-fit:contain}.photo-caption{display:flex;justify-content:space-between;margin-top:18px;font-size:12px;letter-spacing:1px;color:#94846e}.photo-caption span:last-child{font-size:10px}
@media(max-width:1050px){.intro{left:4%;top:52%}.intro p{font-size:14px;max-width:140px}.intro span{font-size:10px}.header{padding:24px 4%}nav{gap:28px}.brand{font-size:17px}.brand small{font-size:6px}.period-label{left:calc(50% - 235px)}}
@media(max-width:640px){.header{height:127px;padding:20px 6%;align-items:flex-start}.brand{font-size:17px}.brand-mark{width:27px;height:32px;font-size:16px}nav{position:absolute;top:79px;left:50%;transform:translateX(-50%);gap:35px}.city{font-size:13px;padding-bottom:7px}.city span{font-size:6px;margin-top:2px}.import-button{font-size:11px;padding:8px 10px}#stage{height:calc(100dvh - 191px)}.intro{top:auto;bottom:103px;left:0;width:100%;text-align:center}.intro p{font-size:12px;max-width:none;margin:0;letter-spacing:2px}.intro span{display:none}.hint{bottom:68px;font-size:9px;letter-spacing:1px}footer{height:64px;font-size:9px;margin:0 6%}.instructions{display:none}.sample{font-size:8px}.period-label{left:20px;top:32%;max-width:100px}.period-label h1{font-size:17px;letter-spacing:0}.period-label>span{font-size:9px;letter-spacing:0}.period-label p{font-size:9px}.period-label button{width:25px;height:25px}#import-dialog{padding:32px 24px}#import-dialog h2{font-size:22px}.large-photo{height:58dvh}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.album-tools{position:relative;z-index:12;display:flex;align-items:center;gap:16px;margin:0 5.4%;height:48px;border-top:1px solid var(--line);font:11px Arial,SimSun;color:#887963}.album-tools label{display:flex;align-items:center;gap:8px;white-space:nowrap}select,input,textarea{font:inherit;color:var(--ink);border:1px solid var(--line);background:#faf6ee;border-radius:3px;padding:6px}select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #987a54;outline-offset:2px}.album-tools select{max-width:110px}.album-tools button{padding:7px 9px;border:1px solid var(--line);border-radius:3px;white-space:nowrap}.album-tools input[type=range]{width:85px;accent-color:#947952;padding:0}.density-label output{min-width:24px;font-size:10px}#filter-summary{font-size:10px;margin-left:auto}#stage{height:calc(100dvh - 223px)}
#photo-dialog{max-height:92dvh;overflow:auto;width:min(1020px,94vw)}.photo-viewer{display:flex;gap:12px;align-items:center}.photo-viewer>button{font:32px Georgia;flex:none;width:30px;height:60px;border:1px solid var(--line);border-radius:4px}.large-photo{height:min(48dvh,480px);cursor:grab;touch-action:pan-y;position:relative;overflow:hidden;border-radius:3px}.large-photo:active{cursor:grabbing}.large-photo canvas{user-select:none;pointer-events:none}.photo-details{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:35px;border-top:1px solid var(--line);padding-top:15px;font-size:12px}.photo-details p{margin:0 0 7px}.photo-details label{display:block;margin-top:12px}.photo-details select,.photo-details input{margin-left:8px}#date-source,.carousel-help{font-size:10px;color:#9c8d77}.carousel-help{margin-top:12px!important}.mood label{margin:0 0 9px}.mood textarea{width:100%;resize:vertical;line-height:1.6}.mood button{margin-top:8px;border:1px solid var(--line);padding:7px 13px}.mood span{font-size:10px;color:#96866f;margin-left:10px}#gesture-panel{position:fixed;bottom:90px;right:26px;z-index:25;width:230px;background:#f8f3e9;border:1px solid #cabca5;padding:12px;border-radius:5px;box-shadow:0 8px 45px #68513122}#gesture-panel[hidden]{display:none}#gesture-panel video{display:block;width:100%;border-radius:3px;transform:scaleX(-1)}#gesture-panel p{font-size:11px;line-height:1.7;margin:10px 0}#gesture-panel small{font-size:10px;line-height:1.8;color:#95836b}#gesture-close{position:absolute;right:10px;top:-28px;background:#faf5eb;border:1px solid var(--line);border-radius:50%;width:25px;height:25px}
@media(max-width:1050px){.album-tools{gap:8px;font-size:10px}.album-tools input[type=range]{width:55px}.density-label output{display:none}#filter-summary{display:none}}
@media(max-width:640px){.album-tools{height:94px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px 0;margin:0 5%}.album-tools label{gap:4px}.album-tools select{max-width:90px}.album-tools button{padding:5px 7px}#stage{height:calc(100dvh - 285px)}.photo-details{grid-template-columns:1fr;gap:15px}.photo-viewer{gap:5px}.photo-viewer>button{width:23px;font-size:23px}.large-photo{height:38dvh}#photo-dialog{padding:48px 14px 18px!important}.photo-caption{font-size:10px;line-height:1.6}#gesture-panel{width:160px;right:12px;bottom:75px}.photo-details input{max-width:150px}}
#carousel-strip{display:flex;justify-content:center;gap:10px;margin-top:12px;overflow:hidden}#carousel-strip button{padding:2px;border:1px solid transparent;border-radius:3px;opacity:.5;flex-shrink:0}#carousel-strip button[aria-pressed="true"]{border-color:#a8906f;opacity:1}#carousel-strip canvas{display:block;position:static;width:60px;height:44px;border-radius:2px}.large-photo{perspective:900px}.auto-classify-option{font-size:11px;color:#8d7a60}#classification-info{display:block;font-size:10px;color:#96866f;margin-top:7px}
.large-photo{height:min(43dvh,450px)}@media(max-width:640px){.large-photo{height:35dvh}}