@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#102620;--cream:#eee9d5;--muted:#9baaa0;--gold:#c7b782;--ink:#222821;--rose:#a34e63;--serif:'Noto Serif TC','Songti TC',serif;--sans:'Space Grotesk','PingFang TC',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font:16px var(--sans);min-height:100vh}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #e3c77d;outline-offset:5px}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #547a65;outline-offset:1px}button{transition:background .2s,transform .2s}button:hover:not(:disabled){filter:brightness(1.12)}[hidden]{display:none!important}.ambient{pointer-events:none;position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 52% 50%,#34534750,transparent 62%),repeating-linear-gradient(95deg,#ffffff02 0 1px,transparent 1px 5px)}.topbar{max-width:1376px;margin:auto;height:100px;padding:0 5%;display:flex;align-items:center;border-bottom:1px solid #a9bda523;gap:24px}.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font:700 28px Georgia,serif;letter-spacing:3px}.brand small{display:block;font:10px var(--sans);letter-spacing:2.4px;margin-top:3px}.seal{width:35px;height:35px;border:5px solid #a9c0a3;border-radius:50%;box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 7px #a9c0a3}.top-caption{font-size:11px;letter-spacing:2.4px;margin:auto;opacity:.55}.quiet-button,.text-button,.icon-button{background:none;border:0;padding:10px 8px;font-size:14px}.quiet-button{color:#dedec9}.quiet-button span{margin-left:20px}.text-button{text-decoration:underline;text-underline-offset:5px}.eyebrow{font:11px var(--sans);letter-spacing:2.6px;color:var(--gold);margin:0 0 13px}.entry{max-width:1060px;margin:auto;min-height:calc(100vh - 180px);padding:70px 45px;display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}.cover-display{position:relative;width:100%;max-width:350px;perspective:1400px;transform:rotate(-6deg);margin:auto;filter:drop-shadow(20px 27px 18px #0008)}.cover-art{width:100%;display:block;position:relative;border:1px solid #6b7091;box-shadow:inset 8px 0 12px #0008}.cover-edge{position:absolute;inset:8px -13px -13px 12px;transform:skewY(2deg);background:repeating-linear-gradient(0deg,#c8c7b3 0 1px,#e0e0d4 1px 3px);border-right:5px solid #202e6f;border-bottom:6px solid #202e6f;box-shadow:5px 8px 0 #111946}.entry h1{font:500 clamp(30px,3.5vw,43px)/1.65 var(--serif);letter-spacing:2px;margin:20px 0}.entry h1 span{color:#c7b782}.entry-description{color:#b2bdb1;line-height:1.9;font-size:15px;margin-bottom:36px}.entry label{font-size:13px;letter-spacing:1px;display:block;margin-bottom:10px}.password-wrap{display:flex;border:1px solid #72847766;background:#ffffff04;margin-bottom:14px}.password-wrap input{min-width:0;width:100%;color:#eee9d5;border:0;background:none;padding:16px;font-size:14px}.password-wrap button{font-size:12px;background:none;border:0;color:#acb8a7;padding:12px}.primary{border:1px solid #c2b480;background:#c2b480;color:#162c25;min-height:45px;padding:12px 20px;font-size:14px;font-weight:600;display:inline-flex;justify-content:space-between;align-items:center;gap:18px}.entry .primary{width:100%}.private-note{color:#82988b;font-size:12px;margin-top:28px}.private-note span{margin-right:7px}.form-message{font-size:13px;min-height:18px;line-height:1.6;color:#b66447;margin:10px 0}.entry .form-message{color:#d3b98f}.site-footer{max-width:1240px;margin:35px auto 0;padding:20px 0 24px;border-top:1px solid #a9bda523;display:flex;justify-content:space-between;font-size:10px;color:#819588;letter-spacing:1.6px}#album-screen{max-width:1170px;padding:36px 34px 0;margin:auto}.album-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.album-heading h1{font:500 29px var(--serif);letter-spacing:2px;margin:0}.heading-star{color:#b8ab78;font-size:27px;margin-left:20px}.collection-meta{display:flex;gap:7px;align-items:center;color:#a6b0a3;font-size:14px}.collection-meta>span:first-child{font:400 40px var(--sans);color:var(--cream)}.collection-meta small{display:block;font-size:11px;margin-top:4px;letter-spacing:1px}.album-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;gap:15px}.view-tabs{display:flex;gap:26px}.view-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0;color:#8fa294;font-size:14px}.view-tabs button[aria-selected=true]{border-color:var(--gold);color:#eee9d5}.view-tabs span{font-size:10px;letter-spacing:.8px;margin-left:10px;opacity:.6}.sync-tools{display:flex;align-items:center;gap:8px}.sync-status{font-size:11px;color:#b2c0b0;white-space:nowrap}.sync-status::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#9fbf9a;margin-right:7px}.sync-status.offline::before{background:#d6ad79}.icon-button{font-size:22px;padding:5px}.sync-tools .quiet-button{border-left:1px solid #b5c3b12a;padding-left:15px;margin-left:5px}
.book{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#1e3270;border:7px solid #243574;border-top-width:5px;border-radius:4px 6px 8px 5px;box-shadow:0 20px 35px #0005,0 2px 2px #0008,0 6px 0 #afb3a1,0 9px 0 #535b50,0 13px 0 #1c2e62;min-height:584px;transition:opacity .2s,transform .3s}.book-underlay{position:absolute;inset:0;z-index:-1}.page{background-color:#e7e7d8;color:var(--ink);padding:24px 31px 20px;min-width:0;position:relative;background-image:repeating-linear-gradient(96deg,#b0ac8e04 0 1px,transparent 1px 4px);display:flex;flex-direction:column;min-height:580px}.page-left{box-shadow:inset -14px 0 25px -10px #0007;border-radius:2px 0 0 2px}.page-right{box-shadow:inset 14px 0 25px -10px #0005;border-radius:0 2px 2px 0}.page-topline{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.7px;color:#788071;padding-bottom:14px;border-bottom:1px solid #9ba18d55;margin-bottom:18px}.page-topline strong{font-size:10px;letter-spacing:1px;font-weight:500}.page-bottomline{font:10px var(--sans);color:#7d8274;letter-spacing:2px;text-align:center;margin-top:auto;padding-top:17px}.book-spine{position:absolute;left:calc(50% - 9px);width:18px;top:0;bottom:0;z-index:4;background:linear-gradient(90deg,#080f1440,#dedecd40 20%,#727e7760 50%,#0003 80%,#0001);display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}.book-spine i{width:20px;height:6px;position:relative;left:-1px;border-radius:50%;background:linear-gradient(#677a74,#e3e6d1 35%,#8b9588 60%,#252b2a);box-shadow:0 2px 2px #0006}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 13px}.pocket{position:relative;border:0;aspect-ratio:65/90;width:100%;display:block;padding:0;clip-path:polygon(0 0,100% 0,100% 88%,86% 100%,14% 100%,0 88%);background:#111311;color:#e5e7d5;overflow:hidden;box-shadow:inset 0 0 0 1px #252b25}.pocket::after{position:absolute;content:'';inset:0;background:linear-gradient(120deg,#ffffff08,transparent 25%,#ffffff03 50%,transparent 75%);pointer-events:none}.pocket.empty{background:linear-gradient(90deg,#11130f 0%,#191c16 49.5%,#10130f 50%)}.pocket.empty:hover{background:#2b3428}.pocket.empty::before{content:'';position:absolute;height:100%;width:1px;background:linear-gradient(#d4d9c077 0 25%,transparent 25% 75%,#d4d9c077 75% 100%);left:50%;top:0}.pocket-line{position:absolute;left:0;top:50%;height:1px;width:100%;background:#d4d9c070}.pocket-number{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 clamp(15px,1.8vw,24px) var(--sans);letter-spacing:2px}.pocket-number span{position:relative;background:#141712;padding:0 5px}.pocket-add{position:absolute;bottom:19%;left:0;right:0;font-size:10px;letter-spacing:1px;opacity:0;transition:opacity .2s}.pocket:hover .pocket-add,.pocket:focus-visible .pocket-add{opacity:.7}.pocket.has-card{clip-path:none;padding:4px;background:#151916;box-shadow:0 2px 4px #0003}.pocket.has-card:hover{transform:translateY(-3px)}.origin-page{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;position:relative}.origin-watermark{width:100px;height:100px;border:1px solid #a8b29d45;border-radius:50%;position:absolute;top:35px;box-shadow:0 0 0 14px #a8b29d12,0 0 0 15px #a8b29d25}.origin-page .pocket{width:147px;flex-shrink:0;z-index:1;box-shadow:0 10px 30px #1f292a25}.origin-page h2{font:600 21px var(--serif);letter-spacing:3px;margin:28px 0 11px}.origin-page p{font:12px/1.9 var(--serif);letter-spacing:1px;color:#7e8273;margin:0}.origin-page .origin-index{font:10px var(--sans);letter-spacing:3px;color:#898c7d;margin-bottom:20px}.page-controls{display:flex;max-width:480px;align-items:center;justify-content:space-between;margin:31px auto 0}.page-arrow{background:none;border:0;display:flex;gap:15px;align-items:center;color:#c0c9b9;font-size:23px;padding:7px}.page-arrow span{font-size:12px}.page-center{text-align:center}.page-center>span{font:12px var(--sans);letter-spacing:2px}.page-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}.page-dots button{width:6px;height:6px;border-radius:50%;padding:0;border:0;background:#71877666;position:relative}.page-dots button::after{content:'';position:absolute;inset:-7px}.page-dots button.active{background:#c7b782}.album-hint{font-size:12px;letter-spacing:.8px;text-align:center;color:#aab9a7;margin:26px 0}.album-hint span{margin-left:10px;color:#748d7b}
.memory-card{--accent:#a64f66;background:#101310;padding:5%;height:100%;width:100%;color:#161c18;font-family:var(--serif);display:flex;flex-direction:column;text-align:left;container-type:inline-size;box-shadow:inset 0 0 0 1px #4f5547}.memory-card[data-color=blue]{--accent:#468bb5}.memory-card[data-color=gold]{--accent:#b89a4b}.memory-card[data-color=green]{--accent:#5c9b7e}.card-header{display:grid;grid-template-columns:22% 52% 26%;background:#e4e7c7;padding:2px;border:1px solid #a5ad8c;height:11%;min-height:13px;align-items:stretch;font-size:7.5cqw;font-weight:700;line-height:1.1}.card-header>span{display:flex;align-items:center;justify-content:center;border-right:1px solid #778167;white-space:nowrap;overflow:hidden;padding:0 2px}.card-header>span:last-child{border:0;font-size:6.6cqw}.card-header .name{font-size:6.2cqw}.card-photo{height:43%;margin:4% 0;border:2px solid #d9ddbd;position:relative;overflow:hidden;background:#27372d;display:flex;align-items:center;justify-content:center}.card-photo img{width:100%;height:100%;object-fit:cover}.card-photo-placeholder{font-size:9cqw;color:#9daa94;font-family:var(--sans);letter-spacing:2px;text-align:center}.card-photo-placeholder small{display:block;font-size:5.5cqw;letter-spacing:1px;margin-top:3cqw}.card-description-wrap{flex:1;min-height:0;padding:4%;background-color:var(--accent);background-image:repeating-conic-gradient(#ffffff22 0% 25%,#00000022 0% 50%);background-size:7px 9px}.card-description{border:2px solid #171d18;background:#ecf0e4;height:100%;padding:5%;display:flex;flex-direction:column;overflow:hidden}.card-note-text{font-size:6.2cqw;line-height:1.65;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere;margin:0;flex:1}.card-date{font-size:4.4cqw;text-align:right;letter-spacing:.5px;margin-top:3px}.pocket .card-note-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.pocket .card-date{font-size:5cqw}.card-dialog{color-scheme:light;padding:0;border:1px solid #838776;background:#f0f0e3;color:#252e25;width:min(920px,calc(100% - 36px));max-height:92dvh;overflow:auto;box-shadow:0 30px 80px #0007}.card-dialog::backdrop,.confirm-dialog::backdrop,.cover-dialog::backdrop{background:#06130ede;backdrop-filter:blur(7px)}.dialog-close{position:absolute;top:11px;right:14px;background:transparent;border:0;color:inherit;font:28px var(--sans);width:36px;height:36px;z-index:4}.editor-layout{display:grid;grid-template-columns:43% 57%}.editor-preview{background:#263e34;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 35px;min-height:680px}.editor-preview .eyebrow{font-size:9px;letter-spacing:1.6px;text-align:center}.large-card{width:100%;aspect-ratio:65/90;margin:23px 0 9px;transform:rotate(-3deg);filter:drop-shadow(6px 13px 7px #0005)}.large-card .card-note-text{font-size:5.3cqw;line-height:1.7}.preview-caption{color:#b7c2ad;font:12px var(--serif);letter-spacing:3px}.editor-form{padding:37px 35px 27px;min-width:0}.editor-form>.eyebrow{color:#69785a;font-size:10px}.editor-form h2{font:600 25px var(--serif);letter-spacing:1px;margin:8px 0 22px}.editor-form label{display:block;font-size:13px;font-weight:500;line-height:1.5}.editor-form input:not([type=file]):not([type=range]),.editor-form textarea,.editor-form select{display:block;width:100%;margin-top:7px;background:#fafbf2;border:1px solid #c4ccba;border-radius:0;color:#283525;padding:10px 11px;min-width:0;font-size:14px}.editor-form textarea{resize:vertical;min-height:96px;line-height:1.6}.form-row{display:flex;gap:15px;margin:16px 0}.form-row label{min-width:0;flex:1}.form-row .wide{flex:2.8}.editor-form .photo-upload{display:flex;gap:13px;align-items:center;border:1px dashed #9aa88b;padding:15px;cursor:pointer;font-size:13px;background:#e4e8d9}.photo-upload small{font-size:10px;display:block;color:#7e8875;margin-top:3px}.photo-upload>span:last-child{margin-left:auto}.upload-icon{font-size:24px;color:#5c7458}.character-count{float:right;font:11px var(--sans);color:#849078;font-weight:400}.author-label{margin-top:14px}.editor-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.editor-actions .primary{font-size:13px;padding:12px 14px}.danger{font-size:12px;color:#98634f}.save-footnote{font-size:10px;color:#829076;text-align:right;margin-bottom:0}.photo-options{display:flex;align-items:center;gap:8px;margin-top:10px}.photo-options label{font-size:10px;white-space:nowrap}.photo-options input{width:100%;min-width:20px;accent-color:#5c7458}.photo-options button{font-size:10px;white-space:nowrap}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.photo-upload:has(+input:focus-visible){outline:2px solid #547a65;outline-offset:3px}.confirm-dialog{max-width:420px;width:calc(100% - 40px);background:#ebeddc;color:#2a372b;border:1px solid #a6b08e;padding:28px;color-scheme:light}.confirm-dialog h2{font:600 23px var(--serif)}.confirm-dialog p{font-size:14px;line-height:1.8}.confirm-dialog>div{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.secondary{border:1px solid #b4bea4;background:none;color:#475a3d;padding:10px 20px}.cover-dialog{width:min(440px,calc(100% - 40px));border:0;background:transparent;text-align:center;padding:42px 32px 20px;overflow:visible}.cover-dialog .cover-display{width:90%;max-width:280px}.cover-dialog>p{margin:37px 0 21px;font-size:12px;letter-spacing:5px}.cover-dialog .dialog-close{color:#e5e8cc;right:0;top:-10px}.cover-dialog .primary{font-size:13px}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:100;background:#dde5cd;color:#263524;padding:14px 24px;border:1px solid #a4b18c;box-shadow:0 8px 30px #0003;font-size:14px;max-width:90%;width:max-content}.console-page{background:#385768;color:#e5e7d7}.console-page .page-topline,.console-page .page-bottomline{color:#c3cdc0;border-color:#c9d6c244}.console-screen{aspect-ratio:1.2;background:#111916;border:3px solid #b7c6b1;box-shadow:0 0 0 2px #142626,inset 0 0 20px #0008;padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}.console-screen p{font:13px/1.9 var(--serif);margin:0;color:#b2c6aa}.console-screen .seal{width:65px;height:65px;border-width:8px;box-shadow:inset 0 0 0 6px #111916,inset 0 0 0 13px #a9c0a3}.console-controls{display:flex;align-items:center;justify-content:space-around;gap:12px;flex:1;margin:25px 0 8px}.console-speaker{width:22%;aspect-ratio:1;border:3px solid #a9b5a3;border-radius:50%;background:repeating-linear-gradient(0deg,#101b1b 0 2px,#34413c 2px 3px)}.console-controls>.pocket{width:30%;}.dpad{display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px);gap:4px}.dpad span{background:#c9b655;filter:drop-shadow(1px 1px #111);clip-path:polygon(50% 0,0 100%,100% 100%)}.dpad span:nth-child(1){grid-area:1/2}.dpad span:nth-child(2){grid-area:2/1;transform:rotate(-90deg)}.dpad span:nth-child(3){grid-area:2/2;clip-path:circle(48%)}.dpad span:nth-child(4){grid-area:2/3;transform:rotate(90deg)}.dpad span:nth-child(5){grid-area:3/2;transform:rotate(180deg)}.empty-last{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;color:#7d8672;font:14px/2 var(--serif)}
@media(min-width:1400px){#album-screen{padding-top:43px}.page{min-height:615px}.card-grid{gap:17px}.book{min-height:615px}}
@media(max-width:1000px){.topbar{height:82px}.site-footer{margin-inline:30px}.entry{gap:65px;padding-inline:35px}.page{padding:20px 23px;min-height:510px}.book{min-height:510px}.card-grid{gap:10px}.origin-page .pocket{width:130px}.page-topline{font-size:9px;letter-spacing:1px}.album-toolbar{margin-bottom:15px}.editor-preview{padding:35px 25px}.editor-form{padding:36px 24px 25px}.dpad{grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px)}}
@media(max-width:700px){.topbar{height:72px;padding-inline:22px}.brand{font-size:24px}.brand small{font-size:8px}.top-caption{display:none}.topbar>.quiet-button{margin-left:auto}.entry{grid-template-columns:1fr;gap:45px;padding:45px 27px 30px;max-width:430px}.entry>.cover-display{max-width:192px}.entry-copy{text-align:center}.entry h1{font-size:30px;margin-top:12px}.entry .eyebrow{font-size:9px}.entry-description{font-size:14px;margin-bottom:25px}.entry label{text-align:left}.entry form{text-align:left}.private-note{font-size:11px}.site-footer{margin:27px 22px 0;font-size:8px;letter-spacing:1px}.site-footer>span:nth-child(2){display:none}#album-screen{padding:27px 15px 0}.album-heading{padding:0 6px;margin-bottom:20px}.album-heading .eyebrow{font-size:8px;letter-spacing:1.8px}.album-heading h1{font-size:22px;letter-spacing:1px}.heading-star{display:none}.collection-meta>span:first-child{font-size:31px}.collection-meta{font-size:11px}.collection-meta small{font-size:9px}.album-toolbar{flex-wrap:wrap;gap:8px;padding:0 6px}.view-tabs{gap:23px}.view-tabs button{font-size:13px}.view-tabs span{font-size:9px;margin-left:6px}.sync-tools{margin-left:auto;gap:3px}.sync-status{font-size:10px}.sync-tools .quiet-button{font-size:11px;padding-left:10px}.book{display:flex;flex-direction:column;border-width:5px;gap:0;min-height:unset}.page{min-height:unset;padding:22px 25px}.page-left{box-shadow:inset 0 -8px 17px -10px #0008}.page-right{box-shadow:inset 0 8px 17px -10px #0006}.book-spine{display:none}.page-topline{font-size:10px;margin-bottom:20px}.origin-page{min-height:265px;display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:32px auto auto;column-gap:25px;text-align:left;align-content:center}.origin-watermark{display:none}.origin-page .pocket{grid-area:1/1/4/2;width:100%;max-width:135px;justify-self:center}.origin-page .origin-index{grid-area:1/2;margin:0;font-size:9px;letter-spacing:2px;align-self:end}.origin-page h2{grid-area:2/2;font-size:19px;margin:10px 0;align-self:center;letter-spacing:2px}.origin-page p{grid-area:3/2;font-size:11px;align-self:start}.page-left:has(.origin-page){padding-bottom:15px}.page-left:has(.origin-page) .page-bottomline{display:none}.page-right{border-top:1px solid #83876b44}.card-grid{gap:14px 12px}.pocket-number{font-size:24px}.page-bottomline{font-size:9px}.page-controls{margin:28px 6px 0}.album-hint{line-height:1.9;font-size:11px;padding:0 10px}.album-hint span{display:block;margin:0}.editor-layout{display:flex;flex-direction:column}.card-dialog{width:calc(100% - 24px);max-height:94dvh}.editor-preview{min-height:unset;padding:24px 20px 22px}.editor-preview .eyebrow{font-size:8px}.large-card{max-width:235px;margin:10px 0}.editor-preview .preview-caption{display:none}.editor-form{padding:26px 23px}.dialog-close{background:#ecf0dc;color:#243727;border-radius:50%;position:absolute}.editor-form h2{font-size:25px}.editor-actions .primary{min-height:48px}.save-footnote{font-size:10px}.console-screen{aspect-ratio:1.3}.console-controls{min-height:190px}.dpad{grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px)}.photo-options label,.photo-options button{font-size:11px}.pocket-add{font-size:9px}.pocket.has-card{padding:3px}}
.password-wrap button{flex-shrink:0;white-space:nowrap}.password-wrap input{flex:1;width:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}@media(min-width:701px) and (max-width:820px){.view-tabs span{display:none}.page{padding-inline:18px;min-height:450px}.book{min-height:450px}.card-grid{gap:8px}.origin-page .pocket{width:115px}.origin-page h2{font-size:18px}.origin-page p{font-size:11px}}