:root{font-family:Inter,"Hiragino Kaku Gothic ProN","Noto Sans JP",YuGothic,"Meiryo",sans-serif;color:#393044;background:#f9f7fb;--ink:#393044;--muted:#92879a;--pink:#eb539c;--pink2:#fbedf5;--line:#eae3ed;--lav:#f1e9f8;--paper:#fffafc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f8a9cd;outline-offset:2px}button{border:0}b,strong{font-weight:800}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.045em}i,em{font-style:normal;color:var(--pink)}.app-shell{display:grid;grid-template-columns:234px minmax(0,1fr);min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:30px 17px 24px;position:sticky;top:0;height:100dvh;background:#fff;display:flex;flex-direction:column}.brand{background:transparent;display:flex;align-items:center;text-align:left;gap:10px;color:#43384a;padding:8px 5px}.brand-icon{display:grid;place-items:center;width:37px;height:37px;color:white;background:var(--pink);border-radius:12px;font-size:23px;box-shadow:0 6px 13px #ed5a9e47}.brand b{font-size:17px;letter-spacing:-.7px;white-space:nowrap}.brand i{font-style:normal}.brand small{display:block;color:#ba9cb2;letter-spacing:2px;font-size:8px;margin-top:4px}.nav-caption{margin:72px 9px 13px;font-size:10px;font-weight:800;letter-spacing:2.3px;color:#b3a1b7}.side-link{display:flex;align-items:center;gap:13px;width:100%;border-radius:12px;background:transparent;text-align:left;padding:13px 14px;color:#716879;font-size:13px;font-weight:700;margin:3px 0}.side-link span{font-size:19px}.side-link:hover,.side-link.active{background:#fbedf5;color:#e64b9b}.sidebar-bottom{margin-top:auto;font-size:10px;line-height:1.9;color:#827888;padding:20px 8px}.sidebar-bottom small{margin-left:13px}.status-dot{display:inline-block;width:8px;height:8px;background:#46c79a;border-radius:50%;margin-right:5px}.main{min-width:0;padding:0 clamp(22px,4.8vw,72px) 70px;max-width:1670px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line);color:#a79eaf;font-size:10px;font-weight:800;letter-spacing:2.1px}.breadcrumb span{color:#e5cbdc;margin:0 9px}.topbar-right{color:#cfbad0}.view{min-width:0}.eyebrow{display:block;font-size:11px;color:#e653a0;font-weight:900;letter-spacing:2.5px;margin-bottom:12px}.hero{min-height:325px;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:45px 55px;margin:34px 0 43px;border:1px solid #f4e6f1;border-radius:23px;background:linear-gradient(118deg,#fff 0%,#fffcfe 45%,#fceaf5 100%);overflow:hidden;position:relative}.hero h1{font-size:clamp(27px,2.9vw,45px);line-height:1.45;margin:12px 0 12px}.hero p{font-size:13px;line-height:2.2;color:#887e91;margin-bottom:22px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:12px;padding:13px 18px;font-weight:800;font-size:12px;transition:.15s ease;white-space:nowrap}.btn:hover:not(:disabled){transform:translateY(-2px)}.primary{color:white;background:var(--pink);box-shadow:0 7px 14px #e7509250}.secondary{color:#c7418c;background:#fce9f3}.ghost{color:#75677c;background:#f6f2f7}.danger{background:#fdf0f2;color:#c84061}.hero-illustration{position:relative;min-width:230px;height:245px;display:grid;place-items:center;perspective:800px}.illus-book{position:relative;display:flex;align-items:center;justify-content:space-between;flex-direction:column;padding:37px 20px 20px;width:168px;height:235px;border-radius:7px 17px 17px 7px;transform:rotate(-11deg) rotateY(-12deg);background:linear-gradient(130deg,#f4acd0,#f6bada 58%,#d77cb9);box-shadow:8px 10px 0 #e8c7d6,22px 29px 30px #b676a741;border-left:10px solid #de8bbb;color:white}.illus-book:after{content:"";position:absolute;inset:13px;border:1px solid #fff9;border-radius:6px 9px 9px 6px;pointer-events:none}.illus-star{font-size:30px}.illus-title{font-family:Georgia,serif;font-size:24px;font-weight:bold;line-height:1.04;text-align:center;letter-spacing:2px}.illus-foot{font-family:Georgia,serif;font-size:10px;font-style:italic}.float-star{position:absolute;color:#ef76ae;font-size:35px}.s1{right:5%;top:5%}.s2{left:-3%;bottom:10%}.section-header{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:22px}.section-header h2{font-size:25px;margin:0}.section-header .eyebrow{margin-bottom:7px}.count{display:inline-grid;place-items:center;background:#fbedf5;color:#e45798;border-radius:12px;min-width:30px;height:29px;vertical-align:middle;font-size:15px;margin-left:5px}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:25px 20px}.album-tile{text-align:left;background:none;padding:0;color:var(--ink);min-width:0}.album-cover{height:240px;border-radius:7px 17px 17px 7px;display:flex;position:relative;justify-content:center;align-items:center;flex-direction:column;border-left:12px solid #0002;box-shadow:inset 0 0 0 1px #fff6,5px 8px 0 #f0eaf1,9px 12px 23px #5a3a6135;transition:transform .26s,box-shadow .26s;overflow:hidden;text-align:center;padding:24px;color:#fff;transform-origin:left center}.album-tile:hover .album-cover{transform:rotateY(-12deg) translateY(-5px);box-shadow:inset 0 0 0 1px #fff6,5px 8px 0 #f0eaf1,12px 17px 24px #5a3a614a}.album-cover:before{content:"";position:absolute;inset:14px;border:1px solid #fff8;border-radius:4px 10px 10px 4px}.album-cover:after{content:"";position:absolute;width:130px;height:130px;background:#fff2;border-radius:50%;top:-30px;right:-30px}.cover-icon{font-size:40px;margin-bottom:25px;text-shadow:1px 2px 4px #0001}.cover-title{font-family:Georgia,"Yu Mincho",serif;line-height:1.3;font-size:21px;font-weight:bold;word-break:break-word;max-width:100%;z-index:1}.cover-caption{font-family:Georgia,serif;letter-spacing:2px;font-style:italic;font-size:9px;margin-top:24px;opacity:.88}.album-info{margin:19px 4px 0}.album-info strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.album-info small{display:block;margin-top:7px;font-size:11px;color:#aaa0ac}.empty-state{border:2px dashed #e8d9e9;padding:44px 18px;border-radius:20px;text-align:center;background:#fff}.empty-emoji{font-size:42px;color:#e858a1}.empty-state h3{margin:8px}.empty-state p{color:#93899a;font-size:13px}.feature-note{color:#b4a3b3;font-size:11px;margin-top:38px;line-height:1.9}.book-header{display:flex;gap:15px;justify-content:space-between;align-items:end;padding-top:30px}.back-link{background:none;padding:0;color:#86768b;font-size:12px;font-weight:700;margin-bottom:24px}.back-link:hover{color:var(--pink)}.book-header h1{font-size:clamp(29px,3vw,44px);margin:0 0 8px;line-height:1.2}.book-header p{font-size:12px;color:#a098a6;margin-bottom:0}.book-top-actions{display:flex;gap:9px;flex-wrap:wrap}.book-toolbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:31px;padding:12px 0}.page-count{font-size:11px;font-weight:900;letter-spacing:2px;color:#bb9cb4}.toolbar-buttons{display:flex;gap:8px;flex-wrap:wrap}.tool-btn{border-radius:10px;background:#fff;border:1px solid #eae1ea;padding:11px 14px;font-size:11px;color:#715d79;font-weight:800}.tool-btn:hover{background:#fcedf6;border-color:#f5bed8}.deco-btn{background:#fff0f8;color:#e14c97}.workspace{display:flex;gap:24px;align-items:start;margin:37px auto 15px}.book-stage{width:100%;max-width:1080px;flex:1;min-width:0;perspective:1600px}.book-pages{display:grid;grid-template-columns:1fr 1fr;padding:12px;border:1px solid #e8dce8;border-radius:11px;background:linear-gradient(90deg,#ded4df 0%,#faf7f8 1.2%,#fff 48%,#e3d7e4 50%,#fff 52%,#faf8fa 98.8%,#ded4df 100%);box-shadow:0 20px 28px #62446d25,0 2px 0 1px #fff inset;transform-style:preserve-3d;min-height:500px;position:relative}.book-pages:after{content:"";height:calc(100% - 23px);width:16px;position:absolute;left:calc(50% - 8px);top:11px;background:linear-gradient(90deg,#b9abb73d,#fff5,#b9abb740);border-radius:10px;pointer-events:none;z-index:5}.page-sheet{position:relative;min-width:0;padding:15px;background:#fff;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 8px #a991a015;aspect-ratio:.79;display:flex;flex-direction:column;transform-origin:0 50%;transition:background-color .2s}.page-sheet.right{box-shadow:inset 8px 0 12px #b9a9b723;transform-origin:0 50%}.page-sheet.left{box-shadow:inset -8px 0 12px #b9a9b723;transform-origin:100% 50%}.page-sheet.empty-future{background:linear-gradient(135deg,#fff,#faf4fa)}.page-sheet[data-paper="rose"]{--paper-bg:#fff2f7;background-color:#fff2f7}.page-sheet[data-paper="lilac"]{--paper-bg:#f4efff;background-color:#f4efff}.page-sheet[data-paper="cream"]{--paper-bg:#fff8e9;background-color:#fff8e9}.page-sheet[data-paper="mint"]{--paper-bg:#edfbf6;background-color:#edfbf6}.page-sheet[data-paper="sky"]{--paper-bg:#eff7ff;background-color:#eff7ff}.page-sheet[data-paper="white"]{--paper-bg:#fff;background-color:#fff}.page-sheet[data-pattern="dots"]{background-image:radial-gradient(#ddafca55 1.2px,transparent 1.2px);background-size:18px 18px}.page-sheet[data-pattern="grid"]{background-image:linear-gradient(#bc9eb122 1px,transparent 1px),linear-gradient(90deg,#bc9eb122 1px,transparent 1px);background-size:22px 22px}.page-sheet[data-pattern="stripes"]{background-image:repeating-linear-gradient(45deg,transparent 0 11px,#dcbac42c 11px 13px)}.page-heading{text-align:center;font-size:11px;font-weight:800;letter-spacing:1px;min-height:22px;color:#a27e97;position:relative;z-index:2;line-height:1.7}.page-surface{position:relative;min-height:0;flex:1;display:flex;flex-direction:column}.pocket-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.7vw,18px);padding:12px 10px 17px;min-height:0;flex:1;position:relative;z-index:1}.pocket{min-width:0;min-height:0;border:1px solid #b99bb242;background:#fff7;border-radius:12px;box-shadow:0 3px 4px #af98b318,inset 0 0 0 4px #fff6;position:relative;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;transition:.13s;border-style:solid}.pocket:hover{border-color:#e76ea9;background:#fff9}.pocket:focus-visible{z-index:4}.pocket:before{content:"";height:7px;position:absolute;top:-1px;left:10%;right:10%;border-bottom:1px solid #e0cdda77;border-radius:0 0 50% 50%;z-index:3}.pocket.empty{border:1.5px dashed #d9bcd2a0;background:#ffffff45;box-shadow:none;flex-direction:column;gap:8px;color:#bda0b6}.pocket.empty .plus{display:grid;place-items:center;background:#fff7;color:#dd8bb1;border-radius:50%;width:29px;height:29px;font-size:19px}.pocket.empty small{font-size:10px}.pocket img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px;box-shadow:0 3px 9px #4c2c4538;background:#f7f2f3}.pocket.drag-over{background:#ffd6ea;border:2px dashed #ee56a3}.pocket-number{position:absolute;bottom:9px;right:10px;background:#fffafaeb;color:#a17d92;border-radius:8px;padding:2px 5px;font-size:9px;z-index:3}.page-foot{text-align:center;font-size:9px;color:#bca6b7;letter-spacing:2px;font-weight:900;position:relative;z-index:2}.stickers-layer{position:absolute;inset:0;pointer-events:none;z-index:4}.sticker-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:36px;min-height:36px;max-width:80%;font-size:29px;line-height:1.2;cursor:grab;pointer-events:auto;touch-action:none;user-select:none;text-shadow:0 2px 3px #ffffff9e}.sticker-node.text-sticker{font-family:Georgia,"Yu Mincho",serif;color:#d45f9e;font-size:15px;font-weight:900;background:#fffbfeee;padding:4px 8px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.sticker-delete{position:absolute;top:-7px;right:-9px;border-radius:50%;width:19px;height:19px;font-weight:900;font-size:12px;background:#fff;color:#b66b93;box-shadow:0 1px 4px #0002;opacity:0}.sticker-node:hover .sticker-delete,.sticker-node:focus-within .sticker-delete{opacity:1}.page-sheet.is-decorating{outline:2px dashed #ef82b5;outline-offset:-6px}.page-sheet.is-decorating .page-surface{cursor:crosshair}.book-pages.page-turn-next{animation:flipNext .33s ease}.book-pages.page-turn-prev{animation:flipPrev .33s ease}@keyframes flipNext{0%{filter:brightness(1);transform:rotateY(0)}50%{filter:brightness(.88);transform:rotateY(-8deg)}100%{filter:brightness(1);transform:rotateY(0)}}@keyframes flipPrev{0%{filter:brightness(1);transform:rotateY(0)}50%{filter:brightness(.88);transform:rotateY(8deg)}100%{filter:brightness(1);transform:rotateY(0)}}.book-stage.opening{animation:openBook .7s ease both;transform-origin:left center}@keyframes openBook{0%{opacity:0;transform:rotateY(-78deg) scale(.85)}55%{opacity:1;transform:rotateY(10deg) scale(.98)}100%{opacity:1;transform:rotateY(0) scale(1)}}.decor-panel{width:280px;flex:0 0 280px;padding:22px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 19px #5c3f6011}.panel-head{display:flex;align-items:center;justify-content:space-between}.panel-head h3{font-size:15px}.field-label{display:block;font-size:12px;font-weight:800;color:#77697c;margin:18px 0 8px}.field-label input,.field-label select,.field-label textarea,.sticker-text-row input{display:block;width:100%;border:1px solid #e9dfeb;border-radius:11px;padding:12px 13px;margin-top:8px;font-size:13px;background:white;color:var(--ink);min-width:0}.swatch-row,.emojis-row,.sticker-choices,.pattern-row{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #e7dce6}.swatch.selected{box-shadow:0 0 0 2px #e55d9e}.emoji-choice,.pattern-option{min-width:38px;height:39px;border-radius:10px;border:1px solid #e9dfea;background:white;font-size:22px}.emoji-choice.selected,.pattern-option.selected{background:#fce6f3;border-color:#ec7fb4}.pattern-option{font-size:10px;font-weight:800;color:#96718c}.sticker-text-row{display:flex;gap:7px}.sticker-text-row input{margin:0}.sticker-text-row .btn{padding:10px}.help{font-size:12px;color:#9a8a9c;line-height:1.9}.page-bottom{display:flex;justify-content:center;align-items:center;gap:38px;margin:14px auto}.page-turn{padding:12px 18px;border-radius:11px;background:white;border:1px solid var(--line);font-size:12px;font-weight:800;color:#67536e}.page-turn:hover:not(:disabled){color:var(--pink);background:#fff2f8}.page-bottom span{font-size:12px;font-weight:800;color:#a48ea4}.book-hint{text-align:center;font-size:11px;color:#9c8c9e;line-height:1.9}.icon-button{background:#f7f3f8;color:#857589;display:grid;place-items:center;border-radius:50%;width:32px;height:32px;font-size:22px}dialog{border:0;border-radius:19px;box-shadow:0 24px 90px #3c264b44;padding:0;width:min(440px,calc(100vw - 25px));max-height:min(90dvh,900px);overflow:auto;background:#fff;color:var(--ink)}dialog::backdrop{background:#291f33a1;backdrop-filter:blur(5px)}.modal-inner{padding:27px}.modal-inner.wide{max-width:100%;width:auto}.modal-top{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:17px}.modal-top h2{font-size:23px;margin:0}.modal-top .eyebrow{font-size:9px;margin-bottom:8px}.modal-inner p{line-height:1.9;font-size:12px;color:#8e7e94}.dialog-actions{display:flex;justify-content:end;gap:10px;margin-top:25px}.photo-modal-preview{display:flex;align-items:center;justify-content:center;background:#f8f1f7;border-radius:12px;padding:12px;min-height:175px;max-height:290px;overflow:hidden}.photo-modal-preview img{object-fit:contain;max-height:260px;max-width:100%;border-radius:8px}.photo-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.photo-actions .btn{padding:10px;font-size:11px}.tray-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;max-height:48vh;overflow:auto}.tray-item{background:#f9f3f8;padding:8px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:7px}.tray-item img{width:80px;height:116px;object-fit:contain;background:white;border-radius:7px}.tray-item small{font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}.tray-item button{background:#e95b9f;color:white;padding:8px;font-size:10px;border-radius:9px;font-weight:800}.backup-actions{display:flex;flex-direction:column;gap:12px}.backup-actions #backup-ready{display:grid;gap:8px}.backup-actions #backup-ready[hidden]{display:none}.backup-actions small{color:#9a8f9d;font-size:11px}.import-btn{position:relative}.small-note{border-top:1px solid var(--line);padding-top:15px;margin-top:22px}#toast{position:fixed;bottom:25px;right:25px;background:#32243b;color:white;border-radius:13px;padding:13px 18px;z-index:99;font-size:12px;box-shadow:0 7px 20px #38243a2c;opacity:0;transform:translateY(15px);pointer-events:none;transition:.22s}#toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1240px){.main{padding-left:25px;padding-right:25px}.decor-panel{width:245px;flex-basis:245px}.pocket-grid{gap:8px;padding:9px 6px}.page-sheet{padding:10px}.book-pages{min-height:400px}}
@media(max-width:1000px){.sidebar{width:185px}.app-shell{grid-template-columns:185px minmax(0,1fr)}.brand b{font-size:13px}.brand small{font-size:7px}.book-header{align-items:start;flex-direction:column}.workspace{flex-direction:column}.decor-panel{width:100%;flex-basis:auto}.book-stage{max-width:760px;width:100%}.book-pages{min-height:450px}.page-sheet{padding:13px}}
@media(max-width:700px){.app-shell{display:block}.sidebar{position:relative;height:auto;width:100%;padding:12px 17px;display:flex;flex-direction:row;align-items:center;gap:8px;border-right:none;border-bottom:1px solid var(--line)}.sidebar .nav-caption,.sidebar-bottom,.side-link{display:none}.brand{padding:0}.brand-icon{width:35px;height:35px}.brand b{font-size:16px}.brand small{font-size:7px}.main{padding:0 16px 55px}.topbar{padding:17px 0;font-size:9px}.topbar-right{display:none}.hero{padding:27px 22px;margin:22px 0 34px;min-height:260px}.hero h1{font-size:28px}.hero p{font-size:12px}.hero-illustration{min-width:70px;height:160px;width:80px}.illus-book{transform:rotate(-12deg) scale(.62);flex-shrink:0}.float-star{display:none}.section-header h2{font-size:21px}.section-header .btn{font-size:10px;padding:11px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}.album-cover{height:220px}.book-header{padding-top:22px}.book-top-actions{width:100%}.book-top-actions .btn{flex:1}.book-header h1{font-size:31px}.book-toolbar{flex-direction:column;align-items:start;margin-top:22px}.toolbar-buttons{width:100%}.toolbar-buttons .tool-btn{flex:1;padding:12px 6px;font-size:10px}.workspace{margin:22px 0 10px}.book-stage{max-width:460px;margin:auto}.book-pages{grid-template-columns:1fr;min-height:unset;max-width:460px;padding:10px;background:#fff;border:1px solid #e6d9e4}.book-pages:after{display:none}.page-sheet{aspect-ratio:.78;padding:13px}.page-sheet.right{display:none}.pocket-grid{padding:11px;gap:12px}.pocket.empty .plus{width:32px;height:32px}.page-heading{font-size:12px}.page-bottom{justify-content:space-between;gap:8px}.page-turn{padding:12px 14px}.sticker-delete{opacity:.85}.modal-inner{padding:20px}#toast{left:18px;right:18px;bottom:18px;text-align:center}.book-hint{font-size:10px}}
@media(max-width:390px){.hero{padding:23px 17px}.hero h1{font-size:24px}.hero-illustration{display:none}.album-cover{height:187px}.cover-title{font-size:17px}.page-sheet{padding:8px}.pocket-grid{padding:8px;gap:8px}.tool-btn{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Give the physical book a page-height all the way to its lower edge. */
@media(min-width:701px){.book-pages{min-height:0}.page-sheet{aspect-ratio:auto;min-height:465px}.book-stage{position:relative}}
@media(max-width:700px){.book-pages{min-height:0}.page-sheet{aspect-ratio:.78;min-height:0}}
.book-stage{position:relative;isolation:isolate}
.book-stage.opening::before{content:'✦  MY PHOTOBOOK  ✦';position:absolute;inset:12px 50% 12px 12px;display:grid;place-items:center;background:linear-gradient(125deg,#e8b1d0,#d98ab7);color:white;letter-spacing:2px;font-size:17px;font-family:Georgia,serif;font-weight:900;border:1px solid #fff8;border-left:12px solid #bd7eaa;border-radius:5px 12px 12px 5px;box-shadow:6px 6px 10px #3b213b30;z-index:9;pointer-events:none;transform-origin:left center;backface-visibility:hidden;animation:coverUnfold .73s ease forwards}
@keyframes coverUnfold{0%{transform:rotateY(0);opacity:1}75%{transform:rotateY(-155deg);opacity:.9}100%{transform:rotateY(-180deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.book-stage.opening::before{display:none}}

/* V3: a real-looking display shelf and pull-out book animation */
.bookshelf-scene{position:relative;overflow:hidden;border-radius:23px;padding:32px 24px 20px;background:radial-gradient(circle at 50% -30%,#fff1e0 2%,transparent 65%),linear-gradient(115deg,#fbf2ec,#f2e0d6 53%,#faeee7);border:1px solid #ebd9d2;box-shadow:inset 0 1px 12px #fff7,0 13px 32px #855b6830}
.shelf-ornament{text-align:center;font:italic 15px Georgia,serif;letter-spacing:3px;color:#af8c80;margin:0 0 15px}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:0 12px;grid-auto-rows:304px;min-height:292px;padding:0 4px 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 268px,#c99d7c 268px,#f7d3a9 274px,#a67654 288px,#755246 297px,transparent 301px,transparent 304px)}
.album-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:275px;padding:8px 6px 18px;perspective:650px;transform-style:preserve-3d;transition:filter .2s ease}
.album-tile::before{content:"";position:absolute;bottom:19px;width:86%;height:10px;background:#442b3260;filter:blur(8px);border-radius:50%;pointer-events:none}
.album-tile .album-cover{height:205px;min-height:0;width:83%;max-width:174px;flex:0 0 auto;border-left:10px solid #0003;border-radius:6px 12px 12px 6px;box-shadow:inset -8px 0 9px #fff2,4px 1px 0 #fff9,9px 5px 0 #795f70bb,12px 12px 14px #3921314a;transform:rotateY(-14deg);transition:transform .32s cubic-bezier(.17,.73,.25,1),box-shadow .3s;z-index:1}
.album-tile:nth-child(3n+2) .album-cover{transform:rotateY(8deg) rotateZ(1.5deg)}
.album-tile:nth-child(5n+3) .album-cover{transform:rotateY(-5deg) rotateZ(-1.4deg)}
.album-tile:hover .album-cover,.album-tile:focus-visible .album-cover{transform:translateY(-22px) translateZ(30px) rotateY(-20deg);box-shadow:inset -8px 0 9px #fff2,5px 5px 0 #fff9,14px 14px 22px #3921315a}
.album-tile.book-is-picked .album-cover{visibility:hidden}
.album-tile .cover-title{font-size:clamp(12px,1.4vw,18px);letter-spacing:-.015em;overflow-wrap:anywhere}
.album-tile .cover-icon{font-size:30px;margin-bottom:16px}
.album-tile .cover-caption{font-size:7px;letter-spacing:1px;margin-top:17px}
.album-tile .album-info{width:100%;position:relative;z-index:1;margin:12px 0 0;text-align:center}
.album-tile .album-info strong{font-size:11px;color:#594657}
.album-tile .album-info small{font-size:9px;color:#86717d;margin-top:5px}
.shelf-flight-shade{position:fixed;inset:0;z-index:110;pointer-events:none;background:#20162636;animation:shelfAmbient .74s both;perspective:1100px}
.shelf-flight-shade .flight-book{position:fixed;max-width:none;margin:0;min-height:0;transform-style:preserve-3d;box-shadow:12px 18px 32px #35203675,20px 1px 0 #f5e5ed;border-radius:7px 16px 16px 7px;overflow:hidden}
.shelf-flight-shade .flight-book .cover-title{font-size:18px}
@keyframes shelfAmbient{0%{background:#20162600}45%{background:#2016264a}100%{background:#2016263f}}

/* Separate closed cover and interior: the user can always return to the cover. */
.cover-screen{position:relative;min-height:545px;padding:30px 15px 35px;text-align:center}
.cover-screen[hidden],#book-content[hidden]{display:none!important}
.cover-stage{position:relative;max-width:760px;min-height:390px;margin:auto;display:flex;align-items:center;justify-content:center;perspective:1400px}
.cover-spotlight{position:absolute;top:9px;left:0;right:0;font:italic 14px Georgia,serif;letter-spacing:2px;color:#bfa5ba}
.cover-stage::before{content:"";position:absolute;left:50%;top:24px;transform:translateX(-50%);width:min(90%,530px);height:350px;background:radial-gradient(ellipse at center,#f4c8de 0%,#f5d9e736 55%,transparent 75%);pointer-events:none}
.cover-screen-book{z-index:1;border:0;background:transparent;cursor:pointer;perspective:1200px;display:block;filter:drop-shadow(15px 22px 17px #86648059)}
.cover-screen-book .album-cover{height:310px;width:220px;max-width:none;transform:rotateY(-17deg) rotateZ(-3deg);border-left:15px solid #0003;box-shadow:9px 8px 0 #ffeaf1,17px 15px 0 #92728a,27px 23px 24px #4b32465a;transition:transform .5s cubic-bezier(.16,.83,.22,1),filter .4s}
.cover-screen-book:hover .album-cover{transform:rotateY(-32deg) rotateZ(-2deg) translateY(-7px)}
.cover-screen-book .cover-title{font-size:25px}
.cover-screen-book .cover-icon{font-size:48px}
.cover-screen-caption{position:absolute;bottom:1px;left:0;right:0;color:#b0a1b0;font-size:10px;letter-spacing:2px;font-weight:800}
.cover-screen-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.cover-open-btn{min-width:200px;padding:15px 22px;font-size:14px}
.cover-screen-help{font-size:11px;color:#ac9caa;margin:20px 0}
#to-cover{background:#f7e8f4;color:#c64b99;border-color:#efc6dc}

/* Spatial 3D page turning: two sides of a hinged sheet plus the page it reveals. */
.book-pages.is-turning{pointer-events:none}
.page-flip-overlay{position:absolute;inset:0;z-index:13;pointer-events:none;transform-style:preserve-3d;perspective:2000px;overflow:visible}
.turn-underlay,.turn-flap{position:absolute;box-sizing:border-box;pointer-events:none}
.turn-underlay{z-index:1;overflow:hidden}
.turn-underlay>.page-sheet{height:100%!important;min-height:0!important;aspect-ratio:auto!important;width:100%;border-radius:4px}
.turn-flap{z-index:3;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(5px 4px 4px #62466442)}
.turn-flap.flip-forward{transform-origin:0% 50%}
.turn-flap.flip-backward{transform-origin:100% 50%}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transform-style:preserve-3d;background:#fff}
.turn-face>.page-sheet{width:100%;height:100%!important;min-height:0!important;aspect-ratio:auto!important;border-radius:4px}
.turn-front{transform:rotateY(0deg)}
.turn-back{transform:rotateY(180deg)}
.turn-face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#15081720,transparent 22%,transparent 74%,#2c132b22);mix-blend-mode:multiply}
.turn-flap.flip-backward .turn-face:after{background:linear-gradient(90deg,#2c132b20,transparent 20%,transparent 75%,#1f0e2027)}
.page-sheet .page-foot{pointer-events:none}
.book-stage.opening::before{background:linear-gradient(125deg,var(--opening-color,#ed9fca),#f2c6de);content:'✦  MY PHOTOBOOK  ✦';animation:coverUnfold .78s cubic-bezier(.55,.02,.3,1) forwards}
.book-stage.closing::before{content:'✦  MY PHOTOBOOK  ✦';position:absolute;inset:12px 50% 12px 12px;display:grid;place-items:center;background:linear-gradient(125deg,var(--opening-color,#e9add1),#f4c9df);color:#fff;font:900 15px Georgia,serif;letter-spacing:1px;border-left:12px solid #bd7eaa;border-radius:5px 12px 12px 5px;box-shadow:8px 9px 13px #3b213b3d;pointer-events:none;z-index:10;transform-origin:left center;backface-visibility:hidden;animation:coverClose .74s ease both}
@keyframes coverClose{0%{transform:rotateY(-180deg);opacity:.1}20%{opacity:1}100%{transform:rotateY(0);opacity:1}}
@media(max-width:1000px){.album-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}.bookshelf-scene{padding:25px 15px 20px}}
@media(max-width:700px){
 .bookshelf-scene{padding:20px 7px 8px;border-radius:15px}.shelf-ornament{font-size:11px;letter-spacing:1.5px}
 .album-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:270px;gap:0 6px;padding:0 5px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 236px,#c99d7c 236px,#f6cda6 243px,#ad7d5b 255px,#795447 263px,transparent 266px,transparent 270px)}
 .album-tile{height:244px;padding:0 3px 12px}.album-tile .album-cover{width:80%;height:184px;max-width:155px}
 .album-tile .cover-title{font-size:14px}.album-tile .album-info{margin-top:8px}
 .album-tile .album-info strong{font-size:10px}.album-tile .album-info small{font-size:8px}
 .cover-screen{padding:18px 2px 16px;min-height:465px}.cover-stage{min-height:340px}
 .cover-screen-book .album-cover{height:270px;width:194px}.cover-screen-book .cover-title{font-size:22px}
 .cover-screen-actions{gap:8px}.cover-screen-actions .btn{font-size:11px}
 .page-flip-overlay{perspective:1400px}
 .turn-flap.flip-mobile.flip-backward{transform-origin:0% 50%}
 .turn-face:after{background:linear-gradient(90deg,#1a0b172d,transparent 42%,#33223715)}
 .toolbar-buttons .tool-btn{flex:1 1 42%;min-width:0}
 .book-stage.closing::before,.book-stage.opening::before{inset:10px 10px 10px 10px}
}
@media(max-width:390px){.album-grid{grid-auto-rows:248px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 215px,#c99d7c 215px,#f6cda6 222px,#ad7d5b 234px,#795447 241px,transparent 244px,transparent 248px)}.album-tile{height:221px}.album-tile .album-cover{height:166px}.cover-screen-book .album-cover{height:255px;width:184px}}
@media(prefers-reduced-motion:reduce){.shelf-flight-shade{display:none}.book-stage.closing::before,.book-stage.opening::before{display:none}}

/* Mobile access to the backup dialog (desktop navigation is hidden on phones). */
.mobile-backup{display:none;background:#fff1f8;border:1px solid #f3d6e9;color:#b34d8b;border-radius:10px;font-size:11px;padding:9px 11px;font-weight:800}
.book-stage.opening::before,.book-stage.closing::before{content:attr(data-cover-title);font-family:Georgia,"Yu Mincho",serif;text-align:center;white-space:normal;overflow-wrap:anywhere;padding:14px}
@media(max-width:700px){.mobile-backup{display:block;margin-left:auto}.topbar{gap:6px}.breadcrumb{letter-spacing:1.1px;font-size:9px}}

/* V4: a flexible sheet, built of hinged strips rather than a rigid card. */
.page-curl-overlay{position:absolute;inset:0;z-index:20;pointer-events:none;perspective:2900px;transform-style:preserve-3d;isolation:isolate;overflow:visible}
.curl-underlay{position:absolute;z-index:1;overflow:hidden;box-shadow:inset 0 4px 17px #4c35541c}
.curl-underlay>.page-sheet{width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:auto!important;border-radius:3px}
.curl-sheet{position:absolute;z-index:3;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.curl-strip{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.curl-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat;background:white;box-shadow:inset 0 1px 2px #98839a16}
.curl-face>.page-sheet{width:100%!important;min-height:0!important;aspect-ratio:auto!important;max-width:none!important;box-shadow:none!important;transform:none!important;pointer-events:none}
.curl-front{transform:translateZ(.12px)}
.curl-back{transform:rotateY(180deg) translateZ(.12px)}
.curl-front::after,.curl-back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(32,17,35,.25),rgba(32,17,35,.04) 45%,rgba(255,255,255,.19) 94%);opacity:var(--curl-darkness,0);mix-blend-mode:multiply}
.curl-strip:first-child .curl-front{box-shadow:inset 5px 0 9px #45334a18}
.curl-strip:last-child .curl-front{box-shadow:inset -2px 0 4px #45334a29}
.curl-spine-shadow{position:absolute;z-index:2;top:0;width:20px;opacity:0;background:radial-gradient(ellipse at center,rgba(46,24,51,.55),rgba(46,24,51,0) 72%);filter:blur(5px);transform-origin:center center;pointer-events:none}
.book-pages.is-turning{pointer-events:none}

/* V4: overlapping horizontal photo-card gallery. */
.shelf-gallery-entry{margin:0 0 22px;padding:15px 22px;border:1px solid #f0deeb;background:linear-gradient(105deg,#fff,#fff4fa);border-radius:17px;display:flex;justify-content:space-between;align-items:center;gap:14px;box-shadow:0 5px 22px #9f6e8d0c}
.shelf-gallery-entry>span{font:700 12px/1.7 inherit;color:#976b89}
.shelf-gallery-entry .btn{white-space:nowrap}
.shelf-gallery-entry #shelf-photo-total{display:inline-flex;justify-content:center;align-items:center;min-width:23px;height:23px;margin-left:7px;background:#f5cce4;border-radius:50%;color:#a33879}
.gallery-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:40px 0 24px}
.gallery-header h1{font-size:clamp(29px,4vw,48px);letter-spacing:-.055em;line-height:1.3;margin:0 0 12px}
.gallery-header em{font-family:Georgia,'Yu Mincho',serif;color:#d65d9b;font-weight:500}
.gallery-header p{font-size:13px;color:#928295;line-height:1.9;margin:0}
.gallery-counter{display:flex;justify-content:space-between;align-items:center;padding:0 8px 13px;color:#b895ab;font-size:10px;letter-spacing:2.2px;font-weight:900}
.gallery-counter strong{font:800 15px/1.4 Inter,sans-serif;letter-spacing:1px;color:#9a648f}
.gallery-scene{position:relative;isolation:isolate;overflow:hidden;perspective:1500px;height:min(610px,64vw);min-height:435px;max-height:600px;display:flex;align-items:center;justify-content:center;border:1px solid #f3e7ef;border-radius:26px;background:radial-gradient(ellipse at 50% 40%,#fffafc 0,#fff3f9 42%,#f9e6f1 100%);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gallery-scene::before{content:"✧  LITTLE POCA MUSEUM  ✧";position:absolute;top:26px;left:0;right:0;text-align:center;letter-spacing:4px;color:#cbacc1;font:italic 12px/1.3 Georgia,serif;z-index:0}
.gallery-scene::after{content:"";position:absolute;left:10%;right:10%;bottom:11%;height:36px;background:radial-gradient(ellipse,#aa7c9d37,transparent 72%);filter:blur(9px);z-index:0;pointer-events:none}
.gallery-ambient{position:absolute;left:50%;top:50%;width:360px;height:430px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#eed3e8 0,transparent 72%);filter:blur(24px);pointer-events:none}
.gallery-stack{position:absolute;inset:0;transform-style:preserve-3d;--gallery-step:158px}
.gallery-card{position:absolute;left:50%;top:50%;height:min(440px,47vw);width:min(295px,31vw);min-width:190px;min-height:300px;padding:9px;border-radius:17px;overflow:hidden;background:white;border:1px solid #f7ecf2;box-shadow:0 18px 35px #67465f34,0 3px 10px #673c5721;cursor:pointer;transform-style:preserve-3d;transition:transform 590ms cubic-bezier(.23,.82,.25,1),opacity 590ms ease,box-shadow 300ms ease;will-change:transform;display:block}
.gallery-card.focused{box-shadow:0 30px 58px #6c3c644b,0 0 0 2px #f1c2df;cursor:zoom-in}
.gallery-card:focus-visible{outline:3px solid #d74699;outline-offset:5px}
.gallery-card img{width:100%;height:100%;display:block;object-fit:contain;border-radius:10px;background:linear-gradient(145deg,#fff5fb,#f8f0fa);pointer-events:none}
.gallery-card-num{position:absolute;right:17px;bottom:17px;min-width:30px;padding:5px 6px;text-align:center;border-radius:12px;color:#b15289;background:#fffef5ea;box-shadow:0 2px 8px #3332;font-size:10px;font-weight:900;letter-spacing:1px}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:40;display:grid;place-items:center;width:49px;height:49px;border:1px solid #e9c8da;border-radius:50%;background:#ffffffde;box-shadow:0 3px 18px #76466124;color:#a14d80;font:400 38px/1 Georgia,serif;cursor:pointer;backdrop-filter:blur(5px)}
.gallery-arrow.previous{left:18px}.gallery-arrow.next{right:18px}
.gallery-arrow:hover:not(:disabled){background:#fff;color:#d74796;transform:translateY(-50%) scale(1.08)}
.gallery-arrow:disabled{opacity:.3;cursor:default}
.gallery-caption{text-align:center;min-height:89px;padding:18px 10px 5px}
.gallery-name{font-size:clamp(17px,2vw,24px);font-weight:850;color:#574258;overflow-wrap:anywhere}
.gallery-location{margin-top:8px;font-size:12px;color:#a48da1}
.gallery-footer{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin:14px 0 22px}
.gallery-guide{color:#b5a2b3;font-size:11px;letter-spacing:.03em}
.gallery-empty{min-height:460px;border-radius:20px;background:#fff9fc;border:1px dashed #efcade;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px}
.gallery-empty[hidden]{display:none}
.gallery-empty-mark{font-size:80px;color:#d9abc6}.gallery-empty h2{margin:0;font-size:21px}.gallery-empty p{font-size:12px;color:#a58b9e}
@media(max-width:900px){.gallery-stack{--gallery-step:128px}.gallery-scene{height:560px}}
@media(max-width:700px){
 .shelf-gallery-entry{padding:12px;flex-wrap:wrap;gap:8px}.shelf-gallery-entry>span{font-size:10px}.shelf-gallery-entry .btn{width:100%}
 .gallery-header{margin:25px 0 18px;align-items:flex-start}.gallery-header h1{font-size:29px}.gallery-header p{font-size:11px}.gallery-header .btn{padding:10px 12px;font-size:11px;white-space:nowrap}
 .gallery-scene{min-height:440px;height:clamp(430px,115vw,540px);max-height:none;border-radius:18px}
 .gallery-stack{--gallery-step:87px}
 .gallery-card{height:clamp(268px,75vw,365px);width:clamp(174px,50vw,248px);min-height:0;min-width:0;padding:6px;border-radius:13px}
 .gallery-arrow{height:35px;width:35px;font-size:30px}.gallery-arrow.previous{left:6px}.gallery-arrow.next{right:6px}
 .gallery-counter{padding-left:2px;padding-right:2px}.gallery-scene::before{font-size:10px;letter-spacing:2px;top:16px}
 .gallery-name{font-size:18px}.gallery-location{font-size:11px}.gallery-footer{gap:13px;margin:3px 0 16px}.gallery-guide{font-size:10px}
}
@media(max-width:380px){.gallery-stack{--gallery-step:76px}.gallery-scene{height:423px;min-height:423px}.gallery-card{height:270px;width:178px}}
@media(prefers-reduced-motion:reduce){.gallery-card{transition:none}}

/* v5: compositor-first, small DOM footprint; no repaint-heavy per-frame gradients. */
.curl-strip{backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout style paint;}
.curl-face::after{opacity:.22!important;mix-blend-mode:normal!important;}
.curl-spine-shadow{filter:none;background:radial-gradient(ellipse at 50% 50%,#40274450,transparent 77%);will-change:transform,opacity;}
.curl-sheet{contain:layout style;}
.gallery-card{transition:none!important;transform-style:flat;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint style;will-change:transform,opacity;box-shadow:0 13px 26px #67465f26,0 2px 7px #673c5718;}
.gallery-card.focused{box-shadow:0 13px 26px #67465f26,0 2px 7px #673c5718;outline:2px solid #f1c2df;outline-offset:-2px;}
.gallery-scene{transform:translateZ(0)}
@media (prefers-reduced-motion:reduce){.gallery-card{will-change:auto}.curl-strip{will-change:auto}}

/* v5 refined: one hardware-composited sheet with real front/back and a soft paper edge. */
.page-flip-v5{perspective:1850px}
.fluent-flip{transform-origin:0 50%;transform-style:preserve-3d;will-change:transform;backface-visibility:visible}
.fluent-flip .flip-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;transform-style:flat;border-radius:2px;box-shadow:inset 0 0 3px #92748820}
.fluent-flip .flip-face>.page-sheet{width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;aspect-ratio:auto!important;box-shadow:none!important;pointer-events:none;transform:none!important}
.fluent-flip .flip-front{transform:translateZ(.3px)}
.fluent-flip .flip-back{transform:rotateY(180deg) translateZ(.3px)}
.fluent-flip .flip-face::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#00000013 0%,transparent 24%,transparent 86%,#ffffff16 100%)}