:root{--paper:#f8f7f4;--ink:#34342f;--muted:#9d9990;--line:#e7e3dc;--gold:#bd9354;--ease:cubic-bezier(.2,.7,.2,1)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#ded7d1;color:var(--ink)}body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:grid;place-items:center;padding:5vh 4.2vw;background:radial-gradient(ellipse at 55% 25%,#ede8e3 0,#ded7d1 65%,#d4cdc7 100%)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.35}button,input,textarea,select{outline-offset:4px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold)}button{transition:background .2s,color .2s,box-shadow .2s}button:hover:not(:disabled){color:#9d733b}button svg{pointer-events:none}input,textarea,select{min-width:0}input::placeholder,textarea::placeholder{color:#b0aaa1}[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.board{position:relative;width:min(1600px,100%);height:min(860px,86vh);min-height:600px;border:1px solid #ffffffb3;border-radius:26px;background:radial-gradient(ellipse at 50% 43%,#fffefa 0,#f8f7f4 65%,#f6f5f2 100%);box-shadow:0 26px 80px #65554a15;isolation:isolate}.topbar{position:absolute;top:30px;left:35px;right:31px;z-index:20;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--gold);border:0;background:none;padding:0}.brand svg{width:39px;height:36px}.brand span{font-family:"Songti SC","Noto Serif CJK SC",SimSun,serif;letter-spacing:.21em;font-size:18px}.top-actions{display:flex;align-items:center;gap:15px}.pill{border:1px solid #eeebe5;background:#fffdfb;border-radius:30px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;min-height:40px;font-size:12px;white-space:nowrap}.pill:hover{background:#eee7dc}.pill.primary{background:#3d4038;color:white;border-color:#3d4038}.pill.primary:hover{background:#575a4e;color:white}.pill .ico{width:15px;height:15px}#totalCount{font-size:10px;color:#aaa69d;margin-left:3px}.upload-btn{background:none;border-color:#e5e0d6}.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:8px;background:none;border:0;border-radius:50%;color:#938e84}.icon-btn:hover{background:#ebe7e0}.avatar{width:33px;height:33px;border:2px solid #fff;border-radius:50%;background:linear-gradient(175deg,#889fad 5%,#ccd0ca 48%,#ecca98 80%,#ffc371);display:grid;place-items:center;color:white;box-shadow:0 0 0 1px #e7e3db}.avatar .ico{width:13px;height:13px;opacity:0;transition:opacity .2s;fill:white;stroke-width:1.2}.avatar:hover .ico,.avatar.playing .ico{opacity:1}.avatar.playing{box-shadow:0 0 0 3px #c4a56a40}.menu{position:absolute;right:30px;top:82px;width:212px;border:1px solid #e8e3d9;border-radius:15px;background:#fffefaed;backdrop-filter:blur(16px);padding:9px;box-shadow:0 16px 35px #493e2e1c;z-index:40}.menu button{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:12px;border-radius:8px;font-size:12px}.menu button:hover{background:#eee8dd}.menu .ico{width:17px;height:17px}.collection-label{position:absolute;left:50%;top:48px;transform:translateX(-50%);color:#a49b8c;font-size:11px;letter-spacing:.15em;max-width:25%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.stage{position:absolute;left:0;right:0;top:15%;height:62%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;overflow:hidden;outline-offset:-5px;border-radius:10px}.stage:active{cursor:grabbing}.cards{position:absolute;inset:0}.photo-card{position:absolute;left:50%;top:50%;width:var(--card-w,340px);height:var(--card-h,450px);border:0;padding:6px;background:#fff;box-shadow:0 14px 30px #36322a20,0 3px 5px #36322a10;border-radius:16px;transform-origin:center;will-change:transform,opacity;cursor:inherit;overflow:hidden;display:block;touch-action:pan-y}.photo-card img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;border-radius:10px}.photo-card .card-open{position:absolute;right:18px;bottom:17px;background:#fffdf4d9;color:#554f42;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;opacity:0;transition:opacity .2s}.photo-card.current:hover .card-open,.photo-card.current:focus-visible .card-open{opacity:1}.photo-card .ico{width:15px;height:15px}.nav{position:absolute;top:48%;z-index:12;width:49px;height:49px;border-radius:50%;border:1px solid #fff9;background:#faf9f5e8;backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 3px 15px #6b62590a}.nav .ico{width:23px;height:23px}.nav:hover{background:#fff;box-shadow:0 5px 20px #6b62591a}.nav.prev{left:-24px}.nav.next{right:-24px}.photo-caption{position:absolute;top:78%;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.caption-title{background:none;border:0;font-size:12px;letter-spacing:.12em;color:#80786c;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}.meta-row{display:flex;gap:10px;align-items:center}.meta-row>i{width:1px;height:10px;background:#d9d4cb}.meta-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:7px 13px;border:1px solid #eae6de99;background:#faf9f6b3;border-radius:25px;font-size:11px}.meta-chip .ico{width:14px;height:14px}.meta-chip.mood{font-size:17px;min-width:40px;justify-content:center;padding:4px 9px}.meta-chip:hover{background:#eeebe4}.meta-row .favorite{width:29px;height:29px;padding:6px}.favorite.active,.icon-btn.liked{color:#bb8b59}.favorite.active svg,.icon-btn.liked svg{fill:#bb8b5920}.film-area{position:absolute;left:50%;bottom:5.2%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;max-width:65%;height:65px}.film{display:flex;align-items:center;gap:5px;padding:6px 8px;max-width:450px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}.film::-webkit-scrollbar{display:none}.film button{height:44px;width:47px;padding:2px;border:0;background:white;border-radius:5px;opacity:.45;flex-shrink:0;transition:opacity .3s,transform .3s,box-shadow .3s;overflow:hidden}.film button:hover{opacity:.85;transform:translateY(-2px)}.film button.active{height:57px;width:57px;opacity:1;padding:3px;box-shadow:0 2px 8px #6a5c4535;outline:1px solid #d7c6aa}.film img{width:100%;height:100%;object-fit:contain;border-radius:3px;display:block}.film-dots{font-size:19px;letter-spacing:5px;color:#b7b2a8}footer{position:absolute;bottom:23px;left:35px;right:35px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a9a296;pointer-events:none}footer>*{pointer-events:auto}#photoCounter{font-size:10px;letter-spacing:.13em}.gesture-hint{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#b5afa4}.gesture-hint span{margin:0 8px}.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;border:0;background:none;padding:7px 0;color:#8c8170}.text-btn .ico{width:14px;height:14px}footer .text-btn{font-size:10px}.empty{position:absolute;inset:20% 8% 15%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center}.empty>.ico{width:40px;height:40px;color:#bfa47b}.empty h1{font-family:"Songti SC",SimSun,serif;font-size:24px;font-weight:400;margin:5px 0}.empty p{color:#9f9587;font-size:13px;margin:0 0 14px}.drop-overlay{position:absolute;inset:10px;border:2px dashed #b79b6e;background:#f8f5ecf0;z-index:100;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#a1814c;pointer-events:none}.drop-overlay .ico{width:50px;height:50px}.drop-overlay p{font-size:20px;letter-spacing:.12em}
dialog{border:1px solid #fff;border-radius:22px;background:#faf9f6;color:var(--ink);padding:30px;box-shadow:0 25px 100px #3b302d33;max-height:calc(100dvh - 50px)}dialog::backdrop{background:#36302a40;backdrop-filter:blur(7px)}dialog[open]{animation:appear .22s ease-out}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2,dialog>h2{font-size:23px;font-family:"Songti SC","Noto Serif CJK SC",SimSun,serif;font-weight:400;margin:5px 0 0;letter-spacing:.04em}.eyebrow{font-size:10px;color:#af9a79;letter-spacing:.22em}.gallery-dialog{width:min(1080px,92vw);height:min(800px,88dvh);padding:34px;overflow-y:auto}.gallery-tools{display:flex;align-items:center;gap:12px;margin:28px 0 20px}.search{border:1px solid var(--line);border-radius:24px;display:flex;align-items:center;gap:9px;padding:10px 14px;flex:1;background:white}.search .ico{width:17px;height:17px;color:#a0998d}.search input{border:0;background:none;outline:0;width:100%;font-size:12px}.gallery-tools select{max-width:180px;border:1px solid var(--line);background:transparent;border-radius:20px;padding:11px;font-size:11px}.album-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;max-width:100%;padding-bottom:6px}.album-tabs button{border:1px solid transparent;background:none;border-radius:20px;padding:8px 14px;white-space:nowrap;font-size:12px;color:#968c7e}.album-tabs button.active{border-color:#dccdb4;background:#ede5d8;color:#8e703f}.album-tabs .n{font-size:10px;opacity:.55;margin-left:8px}.gallery-meta{display:flex;align-items:center;justify-content:space-between;margin:18px 0;font-size:11px;color:#a39a8c}.gallery-meta>div{display:flex;gap:18px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 17px}.grid-item{min-width:0;position:relative}.grid-photo{border:0;background:white;padding:5px;border-radius:10px;box-shadow:0 4px 13px #665d4710;width:100%;aspect-ratio:4/5;display:block;overflow:hidden}.grid-photo img{width:100%;height:100%;object-fit:contain;background:#f6f4ef;border-radius:6px;display:block;transition:transform .4s}.grid-photo:hover img{transform:scale(1.045)}.grid-title{font-size:12px;margin:11px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-sub{font-size:10px;color:#a79c8d;margin:0}.grid-heart{position:absolute;right:13px;top:13px;border:0;background:#faf8f0e0;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;color:#8e8372}.grid-heart .ico{width:14px;height:14px}.grid-heart.liked{color:#bd874a}.grid-heart.liked svg{fill:#bd874a40}.grid-empty{grid-column:1/-1;text-align:center;padding:70px 15px;color:#a0927e;font-size:13px;line-height:2}.edit-dialog{position:fixed;inset:18px 18px 18px auto;margin:0;width:min(430px,95vw);max-height:none;height:calc(100dvh - 36px);overflow-y:auto;padding:28px;border-radius:20px}.edit-preview{width:100%;height:185px;object-fit:cover;margin:24px 0 0;border-radius:10px}.field{display:flex;flex-direction:column;gap:9px;margin-top:21px;font-size:11px;color:#9d8d76}.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:9px;background:white;padding:12px;color:#494338;width:100%;font-size:13px;line-height:1.6}.field textarea{resize:vertical;min-height:88px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.moods{display:flex;gap:7px;flex-wrap:wrap}.moods button{font-size:20px;border:1px solid #e8e2d8;border-radius:9px;width:37px;height:37px;background:#fff}.moods button.active{border-color:#b99a68;background:#f1e4ce}.edit-actions{display:flex;gap:12px;margin-top:28px}.edit-actions>*{flex:1}.danger{color:#aa6c59}.edit-dialog .danger{margin-top:20px}.storage-hint{font-size:11px;color:#ada18e;line-height:1.9;margin:22px 0 0;border-top:1px solid var(--line);padding-top:16px}.small-dialog{width:min(460px,calc(100vw - 32px));padding:29px}.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:25px}.dialog-actions .danger{margin-right:auto}.dialog-copy,.muted{color:#938778;font-size:12px;line-height:1.9}.dialog-copy{margin-top:18px;white-space:pre-wrap}.help-lines p{display:flex;flex-direction:column;gap:7px;font-size:12px;line-height:1.85;margin:23px 0}.help-lines b{color:#83704d;font-weight:500}.help-lines span{color:#978c7d}
.viewer{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:#f4f1eaf8;padding:0;overflow:hidden}.viewer-toolbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 35px}.viewer-toolbar>div{display:flex;gap:9px}.viewer-count{font-size:11px;letter-spacing:.15em;color:#9b8e78}.viewer-main{height:calc(100dvh - 240px);min-height:150px;display:flex;justify-content:space-between;align-items:center;padding:0 30px;gap:20px}.viewer-main>.nav{position:static;flex-shrink:0}.image-area{display:flex;justify-content:center;align-items:center;min-width:0;flex:1;height:100%;overflow:hidden}.image-wrap{position:relative;flex-shrink:0;max-width:100%;max-height:100%;display:flex}.image-wrap>img{display:block;max-width:100%;max-height:calc(100dvh - 240px);width:auto;height:auto;object-fit:contain;border-radius:5px;box-shadow:0 8px 35px #3027201a}.pins{position:absolute;inset:0;pointer-events:none}.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:2px solid white;border-radius:50%;background:#b8945b;color:white;min-width:27px;height:27px;box-shadow:0 2px 8px #3c30284d;font-size:11px}.pin:hover{background:#7c6648;color:white!important}.viewer.marking .image-wrap{cursor:crosshair}.viewer.marking #annotateBtn{background:#e8ddc7;color:#9a793f}.viewer-caption{text-align:center;padding:24px 12vw 14px;height:170px;overflow:auto}.viewer-caption h2{font-size:18px;font-family:"Songti SC",SimSun,serif;font-weight:400;margin:0 0 9px;letter-spacing:.08em}.viewer-caption>p{font-size:11px;color:#9c917f;margin:6px auto;line-height:1.85;max-width:700px;white-space:pre-wrap;overflow-wrap:anywhere}.viewer-caption #viewerNote{font-size:12px;color:#7a7060}.tags{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.tags span{font-size:10px;color:#a48e6b;margin-top:8px}.annotation-hint{position:absolute;bottom:185px;left:50%;transform:translateX(-50%);background:#3b3d35e8;color:#fff;border-radius:30px;padding:12px 18px;font-size:12px;white-space:nowrap;box-shadow:0 3px 20px #0002}.annotation-hint button{background:none;color:#ebce9c;border:0;margin-left:12px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,25px);padding:13px 22px;border-radius:30px;background:#3b3d35f5;color:white;box-shadow:0 5px 20px #0002;opacity:0;pointer-events:none;transition:.25s;z-index:1000;font-size:12px;max-width:calc(100% - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.toast button{margin-left:14px;border:0;background:none;color:#efd4a1;text-decoration:underline}.busy{position:fixed;inset:0;z-index:1500;background:#f6f2e6b8;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#8d7959;font-size:13px}.spinner{width:29px;height:29px;border:2px solid #d6c7aa;border-top-color:#917643;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1700px){body{padding:6vh 5vw}}@media(max-height:780px) and (min-width:801px){body{padding:3vh 4vw}.board{height:94vh;min-height:560px}.topbar{top:22px}.stage{top:14%;height:60%}.photo-caption{top:75%;gap:8px}.film-area{bottom:5.7%;height:55px}.film button{height:37px;width:40px}.film button.active{height:48px;width:49px}footer{bottom:17px}}
@media(max-width:800px){body{padding:3vh 3.5vw}.board{height:90dvh;min-height:580px;border-radius:22px}.topbar{top:25px;left:24px;right:21px}.top-actions{gap:10px}.brand span{font-size:16px}.brand svg{width:32px}.pill{padding:10px 13px}.upload-btn span{display:none}.upload-btn{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%}.avatar{width:29px;height:29px}.collection-label{top:89px;font-size:10px;max-width:70%}.stage{top:17%;height:58%}.photo-caption{top:77%;gap:13px}.nav.prev{left:-18px}.nav.next{right:-18px}.nav{width:40px;height:40px}.film-area{max-width:80%;bottom:6%;gap:12px}.film{max-width:360px}.film button{width:40px;height:42px}.film button.active{width:50px;height:54px}.film-dots{font-size:15px;letter-spacing:2px}footer{left:24px;right:24px;bottom:21px}.gesture-hint{display:none}.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-dialog{padding:26px}.gallery-tools{flex-wrap:wrap;gap:9px}.search{flex-basis:100%}.gallery-tools select{max-width:none;flex:1}.gallery-tools .pill{font-size:11px}.viewer-main{padding:0 14px;gap:10px}.viewer-main .nav{width:33px;height:33px}.viewer-toolbar{padding:0 18px}.viewer-toolbar>div{gap:4px}.viewer-caption{padding-left:8vw;padding-right:8vw}.annotation-hint{font-size:11px;padding:12px}.edit-dialog{width:420px}}
@media(max-width:500px){body{padding:14px 13px;min-height:100dvh}.board{height:calc(100dvh - 28px);min-height:600px;border-radius:20px}.topbar{top:20px;left:18px;right:15px}.top-actions{gap:6px}.brand{gap:5px}.brand span{font-size:15px}.brand svg{width:30px}.top-actions .pill{font-size:11px;padding:8px 12px;min-height:33px}.top-actions .upload-btn{padding:0;width:32px;height:32px}.top-actions .icon-btn{width:31px}.avatar{width:26px;height:26px}.stage{top:18%;height:55%}.photo-caption{top:76%;gap:13px}.caption-title{font-size:11px}.meta-row{gap:7px}.meta-chip{font-size:10px;padding:6px 10px;max-width:180px}.meta-chip span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.meta-chip.mood{font-size:15px;min-width:32px;padding:4px 8px}.meta-row .favorite{display:none}.nav{width:35px;height:35px}.nav.prev{left:-9px}.nav.next{right:-9px}.nav .ico{width:18px;height:18px}.film-area{max-width:88%;bottom:6.5%;gap:6px}.film{max-width:290px;gap:4px}.film button{width:32px;height:36px}.film button.active{width:43px;height:49px}.film-dots{letter-spacing:1px;font-size:13px}footer{bottom:19px;left:19px;right:19px}.menu{right:14px;top:65px}.gallery-dialog{width:calc(100vw - 20px);height:calc(100dvh - 24px);max-height:none;padding:22px 17px}.dialog-head h2{font-size:20px}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}.gallery-meta{gap:9px;align-items:flex-start}.gallery-meta>div{gap:13px;flex-wrap:wrap;justify-content:flex-end}.gallery-meta .text-btn{font-size:10px;padding:0}.gallery-tools{margin-top:22px}.gallery-tools select{font-size:10px}.album-tabs button{font-size:11px;padding:8px 11px}.edit-dialog{inset:8px 8px 8px auto;height:calc(100dvh - 16px);max-width:none;width:calc(100vw - 16px);padding:25px}.viewer-toolbar{height:65px;padding:0 12px}.viewer-count{font-size:10px}.viewer-toolbar .icon-btn{width:35px;height:35px}.viewer-main{padding:0 8px;gap:0;height:calc(100dvh - 250px)}.image-wrap>img{max-height:calc(100dvh - 250px)}.viewer-main .nav{position:absolute;top:42%;z-index:4;background:#f9f6ece8;width:29px;height:29px}.viewer-main #viewerPrev{left:13px}.viewer-main #viewerNext{right:13px}.viewer-caption{height:185px;padding:26px 24px}.annotation-hint{bottom:190px;max-width:90%;text-align:center;white-space:normal;line-height:1.9;width:max-content}.empty h1{font-size:20px}.empty p{font-size:11px}.small-dialog{padding:24px}.film::-webkit-scrollbar{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Natural-ratio film frames retain the same quiet photo-strip styling. */
.film button{height:var(--film-height,44px);width:clamp(26px,calc(var(--film-height,44px) * var(--thumb-ratio,1)),86px)}
.film button.active{height:var(--film-active,57px);width:clamp(34px,calc(var(--film-active,57px) * var(--thumb-ratio,1)),100px)}
@media(max-height:780px) and (min-width:801px){.film{--film-height:37px;--film-active:48px}}
@media(max-width:800px){.film{--film-height:42px;--film-active:54px}}
@media(max-width:500px){.film{--film-height:36px;--film-active:49px}}

/* Outer-page background and the centered photo action row. */
body{isolation:isolate}
.page-background{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#ded7d1;background-repeat:no-repeat;background-position:center;background-size:cover}
.page-background::after,.background-preview::after{content:"";position:absolute;inset:0;background:#ded7d1;opacity:var(--background-softness,0);pointer-events:none}
.meta-row{justify-content:center;max-width:calc(100% - 28px)}
.meta-row .meta-chip,.meta-row>i{flex-shrink:0}
#locationChip{min-width:0;max-width:240px;flex-shrink:1}
#photoLocation{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta-row .caption-delete,.meta-row .favorite{width:32px;height:32px;padding:7px;flex-shrink:0}
.caption-delete:hover{color:#a56d59!important;background:#eee2da}
.background-preview{height:190px;position:relative;isolation:isolate;overflow:hidden;border-radius:13px;background:radial-gradient(ellipse at 55% 25%,#ede8e3,#ded7d1 65%,#d4cdc7);background-position:center;background-repeat:no-repeat;background-size:cover;display:grid;place-items:center;border:1px solid #e3ddd3}
.background-preview-board{position:relative;z-index:1;width:70%;height:65%;background:#f8f7f4;border:1px solid #fff;border-radius:12px;box-shadow:0 9px 18px #49403414;color:#bb975f;display:grid;place-items:center}
.background-preview-board span{position:absolute;left:13px;top:12px;font-size:10px;letter-spacing:.18em}
.background-preview-board>.ico{width:28px;height:28px;color:#d2c6b2}
.background-name{font-size:11px;color:#9f9281;overflow-wrap:anywhere;line-height:1.6;margin:13px 0}
.background-upload-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.range-label{display:flex;align-items:center;justify-content:space-between}
#backgroundSoftness{accent-color:#ba965d;padding:0;border:0;height:20px;background:transparent;cursor:pointer}
@media(max-width:500px){.meta-row{gap:5px;max-width:calc(100% - 20px)}.meta-row .favorite,.meta-row .caption-delete{display:inline-flex;width:30px;height:30px;padding:6px}.meta-row .meta-chip{padding-left:8px;padding-right:8px}#locationChip{max-width:130px;min-width:48px}.background-preview{height:165px}}

/* The reference rectangle leaves about 2.5% on either side. */
body{padding:2.5dvh 2.5vw;--board-size:92;--board-height:89}
.board{width:calc(var(--board-size) * 1vw);max-width:95vw;height:calc(var(--board-height) * 1dvh);min-height:600px}
.board-size-control{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:5px}
.board-size-control label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#8c8170}
.board-size-control output{font-variant-numeric:tabular-nums;color:#b08d54}
#boardSize{width:100%;margin:16px 0 8px;accent-color:#ba965d;cursor:pointer}
.board-size-presets{display:flex;gap:5px}
.menu .board-size-presets button{padding:7px 5px;justify-content:center;font-size:11px;background:#f0ece4}
.menu .board-size-presets button[aria-pressed="true"]{background:#e7dbc6;color:#8e703f}
.board-size-control p{font-size:10px;color:#aaa092;margin:12px 0 0}
.menu{max-height:calc(100dvh - 145px);overflow-y:auto}
@media(max-width:800px){.board{width:max(92vw,calc(var(--board-size) * 1vw));max-width:95vw;height:calc(var(--board-height) * 1dvh);min-height:600px}.nav.prev{left:-10px}.nav.next{right:-10px}}
@media(max-width:500px){body{padding:14px 2.5vw}.board{width:95vw;height:calc(var(--board-height) * 1dvh);min-height:600px}.menu{right:15px}}
@media(max-height:780px) and (min-width:801px){.board{min-height:560px}}

/* Persistent recovery controls remain visible until a successful write. */
.menu-storage{font-size:10px;color:#8a795e;line-height:1.7;margin:9px 12px 3px}
.storage-alert{position:fixed;inset:auto 16px 14px;z-index:2000;margin:auto;width:max-content;max-width:calc(100vw - 32px);padding:13px 18px;background:#fff8e9;border:1px solid #c6a772;border-radius:12px;box-shadow:0 5px 24px #4e3e2826;color:#665235;font-size:12px;line-height:1.7}
.storage-alert p{margin:0 0 8px}.storage-alert>div{display:flex;gap:18px;flex-wrap:wrap}.storage-alert button{border:0;background:none;padding:3px 0;color:#765b2f;text-decoration:underline;text-underline-offset:3px}.noscript-message{position:fixed;inset:40% 10%;text-align:center;padding:25px;background:#fff8e9;z-index:2500}
@media(max-width:360px){.meta-row{gap:3px}.meta-row .meta-chip{font-size:9px;padding-inline:5px}.meta-row .mood{min-width:25px}.meta-row .favorite,.meta-row .caption-delete{width:26px;padding:4px}#locationChip{min-width:30px;max-width:78px}}

@media(max-width:500px){.photo-caption{top:73%;gap:8px}.nav.prev{left:-7px}.nav.next{right:-7px}}

.stage{isolation:isolate}

.account-control .ico{opacity:1;fill:none;stroke-width:1.6;width:15px;height:15px}.auth-tabs{display:flex;gap:7px;margin-top:20px}.auth-tabs button{border:1px solid var(--line);background:#fffdfb;padding:9px 13px;border-radius:20px;font-size:12px}.auth-tabs button[aria-pressed="true"]{background:#e8ddc7;color:#79603c}.form-error{font-size:12px;color:#a25643;line-height:1.8;margin:16px 0 0;min-height:1em}.recovery-value{display:block;background:#f0ebe1;border:1px solid var(--line);border-radius:9px;padding:16px;margin:20px 0;overflow-wrap:anywhere;line-height:1.8;font-size:13px;user-select:all}.recovery-check{display:flex;align-items:center;gap:9px;margin-top:23px;font-size:12px;line-height:1.8}.account-name{font-weight:500;color:#8f744a;overflow-wrap:anywhere;margin-top:24px}.account-password{margin-top:25px;font-size:12px}.account-password summary{cursor:pointer;color:#8c7757}.cloud-ready .menu-storage{overflow-wrap:anywhere}@media(max-width:500px){.cloud-ready #autoplayBtn{display:none}.account-control{width:29px;height:29px}}

.icp-filing{font-size:11px;text-align:center;margin:12px 0;color:#746c61}.icp-filing a{color:inherit;text-decoration:none}.icp-filing a:hover{text-decoration:underline}body:has(.icp-filing:not([hidden])){align-content:center}