:root{--ink:#28352c;--muted:#8d948d;--paper:#fffef9;--wash:#faf9f5;--line:#e7e5dc;--sage:#e7ebdf;--shadow:#37403724;--serif:Georgia,'Times New Roman',serif;--hand:'Segoe Print','Bradley Hand',cursive;--sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{color:var(--ink);background:var(--wash);font-family:var(--sans);font-size:14px}button,input,textarea{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}button:focus-visible,.scrap-item:focus-visible{outline:2px solid #66745f;outline-offset:3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.app-header{height:56px;display:flex;align-items:center;padding:0 22px 0 28px;position:relative;z-index:100;background:#fdfcf9}.brand{font:600 26px/1 var(--serif);letter-spacing:-.7px}.toolbar{position:absolute;left:50%;top:4px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px 7px;background:#fff;border:1px solid #e5e3dd;border-radius:12px;box-shadow:0 5px 18px #2630260b}.toolbar button{width:38px;height:34px;display:grid;place-items:center;border-radius:8px;color:#647067}.toolbar button:hover,.toolbar button.active{background:var(--sage);color:#344234}.toolbar button:disabled{opacity:.24;cursor:default}.toolbar .divider{height:25px;width:1px;background:#e2e1dc;margin:0 4px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:13px}.header-actions>span{font-size:10px;color:#969b95;display:flex;align-items:center;gap:6px}.header-actions>span i{width:5px;height:5px;background:#75856d;border-radius:50%}.save-button{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;border:1px solid #dddbd3;border-radius:10px;background:#fff;box-shadow:0 3px 10px #333b3310}.save-button svg{width:17px}
.workspace{position:relative;height:calc(100dvh - 56px);padding:0 24px 14px}.book-shell{position:relative;width:100%;height:100%;max-width:1900px;margin:auto}.book{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;border:1px solid #9b9e94;border-radius:10px 10px 8px 8px;background:#e9e7dd;box-shadow:0 3px 0 #d6d4ca,0 5px 0 #f7f5ed,0 7px 0 #c9c8c0,0 12px 24px #343a3427;overflow:hidden;perspective:1800px}.page{position:relative;min-width:0;background:var(--paper);overflow:hidden}.page:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:30;opacity:.18;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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.18' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}.page:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:29;background:radial-gradient(ellipse at 50% 50%,transparent 72%,#b7b09d10 100%)}.left-page{border-radius:9px 0 0 7px;box-shadow:inset -55px 0 50px -53px #625f5248,inset 7px 0 12px -9px #2d342b55}.right-page{border-radius:0 9px 7px 0;box-shadow:inset 55px 0 50px -53px #625f5250,inset -7px 0 12px -9px #2d342b55}.gutter{position:absolute;z-index:35;top:0;bottom:0;left:50%;width:8px;transform:translateX(-50%);background:linear-gradient(90deg,#57504414,#2e30291f 44%,#fffdf488 53%,#625d4e12);box-shadow:0 0 26px 4px #514b3d24;pointer-events:none}.page-canvas{position:absolute;inset:2.5% 3%;z-index:5}.page-number{position:absolute;z-index:40;bottom:3.2%;left:0;right:0;text-align:center;font:10px/1 var(--serif);color:#a5a79d}.corner-nav{position:absolute;z-index:55;top:50%;transform:translateY(-50%);width:38px;height:54px;border-radius:8px;background:#fffefaeb;border:1px solid #e6e4dc;display:grid;place-items:center;box-shadow:0 3px 14px #333a3310}.corner-nav:disabled{opacity:0;pointer-events:none}.corner-nav.prev{left:14px}.corner-nav.next{right:14px}.edge-tabs{position:absolute;z-index:60;right:-8px;top:78px;display:flex;flex-direction:column;gap:7px}.edge-tabs button{width:40px;height:44px;border:1px solid #d8d8d0;border-right:0;border-radius:7px 0 0 7px;background:#f4f2e9;display:grid;place-items:center;color:#687168;box-shadow:-2px 3px 9px #353a3510}.edge-tabs button:nth-child(2){background:#e9e4c7}.edge-tabs button:nth-child(3){background:#eadde2}.edge-tabs button:nth-child(4){background:#dbe7df}.edge-tabs button.active{width:47px;transform:translateX(-1px);box-shadow:-4px 4px 12px #353a3518}
.panel{position:absolute;z-index:80;right:58px;top:16px;bottom:28px;width:310px;padding:24px;background:#fffefaf5;border:1px solid #dfddd4;border-radius:12px;box-shadow:0 18px 50px #2930292b;backdrop-filter:blur(18px);transform:translateX(30px);opacity:0;pointer-events:none;transition:.25s ease}.panel.open{transform:none;opacity:1;pointer-events:auto}.panel-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:25px}.panel-head small{font-size:8px;letter-spacing:2px;color:#9ca095}.panel-head h2{font:400 26px/1 var(--serif);margin:7px 0 0}.panel-head button{font:300 25px/1 var(--sans);color:#8e948b}.panel-section{margin-bottom:24px}.panel-section h3{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#949990;margin:0 0 12px}.panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.panel-grid button{aspect-ratio:1;border:1px solid #e6e4db;border-radius:8px;background:#fbfaf5;font-size:29px}.panel-grid button:hover{background:#f0f1e8}.panel-action{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #deddd5;border-radius:8px;background:#fff;font-size:12px;margin-top:8px}.panel-action:hover{background:#f0f1e8}.spread-list{display:grid;gap:8px}.spread-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.spread-row>button:first-child{height:58px;border:1px solid #deddd5;border-radius:6px;background:linear-gradient(90deg,#fffef8 49.5%,#dedbcf 50%,#fffef8 50.5%);font:12px var(--serif)}.spread-row.active>button:first-child{outline:2px solid #7c8874;outline-offset:2px}.spread-row .delete{font-size:18px;color:#9b7c73}.photo-drop{border:1px dashed #cfd2c6;border-radius:9px;padding:30px 12px;text-align:center;background:#f7f7f1}.photo-drop svg{width:28px;height:28px}.photo-drop strong{display:block;font:18px var(--serif);margin:12px 0 5px}.photo-drop span{font-size:10px;color:#949a91}.tape-grid button{height:54px!important;aspect-ratio:auto!important}.tape-sample{display:block;height:22px;transform:rotate(-5deg);background:#dccd9c88}.hint{position:absolute;z-index:45;bottom:22px;left:50%;transform:translateX(-50%);font-size:9px;color:#9da098;background:#fffefaad;padding:6px 10px;border-radius:20px;opacity:0;transition:opacity .2s}.hint.show{opacity:1}.toast{position:fixed;z-index:200;left:50%;bottom:24px;transform:translate(-50%,15px);opacity:0;background:#344036;color:#fff;padding:10px 15px;border-radius:8px;font-size:11px;transition:.22s}.toast.show{transform:translate(-50%,0);opacity:1}
.scrap-item{position:absolute;user-select:none;touch-action:none;cursor:grab;transform-origin:center;z-index:5}.scrap-item.selected{outline:1px solid #6f7d68;outline-offset:3px}.scrap-item.photo{padding:9px 9px 30px;background:#fff;box-shadow:2px 7px 16px #33382f38}.scrap-item.photo img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.scrap-item.text{min-width:90px;min-height:32px;padding:5px;white-space:pre-wrap;font:clamp(18px,2.1vw,30px)/1.25 var(--hand);color:#4b554b}.scrap-item.sticker{font-size:clamp(38px,4.4vw,66px);filter:drop-shadow(1px 3px 2px #3d423823)}.scrap-item.tape{height:27px;background:repeating-linear-gradient(90deg,#d8c99a99 0 4px,#e2d5aa99 4px 7px);clip-path:polygon(1% 2%,99% 0,100% 94%,96% 100%,0 95%);opacity:.8;mix-blend-mode:multiply}.resize-handle{position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;border:1px solid #6f7d68;border-radius:2px;background:#fff;cursor:nwse-resize}.delete-handle{position:absolute;right:-11px;top:-12px;width:22px;height:22px;border:1px solid #dedbd2;border-radius:50%;background:#fff;font-size:16px;line-height:18px;color:#8a6c62}.turning-leaf{position:absolute;z-index:50;top:0;bottom:0;left:50%;right:0;transform-origin:left center;background:var(--paper);pointer-events:none;opacity:0}.book.turn-next .turning-leaf{opacity:1;animation:turnNext .62s cubic-bezier(.5,.05,.2,1)}.book.turn-prev .turning-leaf{left:0;right:50%;transform-origin:right center;opacity:1;animation:turnPrev .62s cubic-bezier(.5,.05,.2,1)}
@keyframes turnNext{0%{transform:rotateY(0);box-shadow:-2px 0 4px #34382f18}50%{box-shadow:-28px 6px 35px #34382f42}100%{transform:rotateY(-180deg);box-shadow:-2px 0 4px transparent}}@keyframes turnPrev{0%{transform:rotateY(0);box-shadow:2px 0 4px #34382f18}50%{box-shadow:28px 6px 35px #34382f42}100%{transform:rotateY(180deg);box-shadow:2px 0 4px transparent}}
.profile-button{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid #cfd0c8;border-radius:50%;background:#fff}.profile-button svg{width:18px}.profile-button #profile-dot{position:absolute;right:1px;bottom:0;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#a8aaa2}.profile-button.signed-in #profile-dot{background:#52634e}
.book-shell:after{content:'';position:absolute;z-index:-1;left:1.2%;right:1.2%;bottom:-5px;height:18px;border-radius:50%;background:#34382f2b;filter:blur(12px)}.book{border-color:#858a80;border-radius:12px 12px 9px 9px;box-shadow:0 2px 0 #faf8ef,0 4px 0 #d1cec2,0 6px 0 #f7f4e9,0 8px 0 #bdbcb3,0 14px 30px #343a342d}.gutter{width:9px;box-shadow:0 0 28px 5px #514b3d29}.gutter:after{content:'';position:absolute;inset:5% 3px;background:repeating-linear-gradient(to bottom,transparent 0 9%,#746e6029 9.2% 9.45%,transparent 9.7% 18%)}
.edge-tabs{top:70px}.edge-tabs button{border-radius:5px 0 0 5px}.edge-tabs button:nth-child(2){background:#eee6ad}.edge-tabs button:nth-child(3){background:#edcfdb}.edge-tabs button:nth-child(4){background:#d6e3bd}.edge-tabs button:nth-child(5){margin-top:2px;background:#f8f7f1;border-style:dashed}
.scrap-item.sticky{padding:13px 12px;background:#eee6ad;box-shadow:2px 5px 9px #4d4b3f2d;font:clamp(13px,1.25vw,19px)/1.35 var(--hand);white-space:pre-wrap;color:#525246}.scrap-item.sticky:after{content:'';position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 13px 13px;border-color:transparent transparent #c9c38f transparent}.sticky-editor{width:100%;min-height:145px;resize:vertical;border:1px solid #d8d5ca;border-radius:8px;background:#fffef8;padding:12px;line-height:1.5;outline:0}.sticky-editor:focus{border-color:#7a8873}.sticky-swatches{display:flex;gap:8px;margin:12px 0}.sticky-swatches button{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d4d2c9}.sticky-swatches button.active{box-shadow:0 0 0 2px #61705c}
.account-dialog{width:min(430px,calc(100vw - 32px));border:1px solid #dcd9cf;border-radius:15px;padding:34px;background:#fffefb;color:var(--ink);box-shadow:0 24px 80px #26302642}.account-dialog::backdrop{background:#f7f5eeaa;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:14px;top:12px;font-size:24px;color:#8d928a}.account-dialog h2{font:400 30px/1.1 var(--serif);margin:0 0 8px}.account-dialog p{font-size:12px;line-height:1.55;color:#777e76}.auth-form{display:grid;gap:11px;margin-top:22px}.auth-form label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#868d84}.auth-form input{height:44px;border:1px solid #d8d7cf;border-radius:8px;background:#fff;padding:0 12px;outline:0}.auth-form input:focus{border-color:#697664;box-shadow:0 0 0 3px #e7ebdf}.auth-form button{height:44px;border-radius:8px;background:#354138;color:#fff}.auth-form button.secondary{background:#f1f1e9;color:#485148}.auth-form small{color:#858b83;line-height:1.5}.auth-code{font:600 23px/1 var(--serif);letter-spacing:.25em;text-align:center}.avatar-preview{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#dfe6d8;font:24px var(--serif);margin:4px 0 12px}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.header-actions{gap:11px}.header-actions>span{position:relative;width:24px;height:26px}.header-actions>span svg{width:19px;color:#778074}.header-actions>span i{position:absolute;right:1px;bottom:2px;width:3px;height:3px}.header-actions>span[data-status=error] i{background:#ae7868}.header-actions>span[data-status=saving] i{background:#c6b374}.save-button{height:43px;gap:10px;color:#626b5b;padding:0 15px;font-size:14px}.save-button .chevron{width:14px;height:14px}.save-button[aria-expanded=true]{background:#e8e9e1;border-color:#c1c5b7}.save-wrap{position:relative}.save-menu{position:absolute;top:54px;right:0;width:340px;max-width:calc(100vw - 24px);padding:8px;background:#fffffd;border:1px solid #d9d9d1;border-radius:10px;box-shadow:0 8px 28px #34382f18}.save-menu[hidden]{display:none}.save-menu button{display:flex;width:100%;align-items:center;gap:15px;text-align:left;padding:16px 12px;color:#53634c;border-radius:7px;font-size:14px}.save-menu button+button{border-top:1px solid #eeeee7}.save-menu button:hover{background:#f4f5ee}.save-menu button svg{width:20px;flex-shrink:0}.save-menu small{display:block;margin-top:5px;color:#8a927e;font-size:11px}.account-dialog{width:min(450px,calc(100vw - 28px));padding:29px 26px 27px;background:#fff;border:1px solid #444;border-radius:11px;color:#222;box-shadow:0 20px 70px #252c251c}.account-dialog::backdrop{background:#2b302b25;backdrop-filter:blur(2px)}.dialog-close{top:22px;right:24px;color:#202520;font-size:25px}.account-dialog h2{font:400 32px/1.2 Georgia,serif;margin:0 0 24px}.account-dialog p{font-size:14px;color:#222;line-height:1.55;margin:0 0 17px}.auth-form{margin-top:16px;gap:14px}.auth-form label{display:block;font-size:18px;text-transform:none;letter-spacing:0;color:#171b17}.auth-input-wrap{display:flex;align-items:center;gap:12px;border:1px solid #383d37;border-radius:5px;padding:0 13px;margin-top:13px;height:49px}.auth-input-wrap:focus-within{outline:2px solid #4b5049;outline-offset:3px}.auth-input-wrap svg{color:#858a83;width:20px;flex-shrink:0}.auth-form .auth-input-wrap input{width:100%;height:100%;border:0;padding:0;border-radius:0;background:transparent;font-size:16px;box-shadow:none}.auth-form .auth-input-wrap input:focus{box-shadow:none}.auth-form button{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;color:#292e28;border:1px solid #383d37;border-radius:5px;padding:0 17px;width:fit-content;min-height:44px;font-size:14px}.auth-form button:disabled{color:#8d908a;border-color:#b6b8b1;cursor:default}.auth-form button:hover:not(:disabled){background:#f4f5ef}.account-dialog .auth-footer{font-size:12px;margin:24px 0 0}.form-error:empty{display:none}.account-dialog .form-error{font-size:12px;color:#9c5041;margin:0}.account-symbol svg{width:28px;height:28px;margin-bottom:24px}.account-badge{display:flex;align-items:center;gap:17px;padding:18px;border:1px solid #d8d9d3;border-radius:10px;margin:0 0 17px;font-size:14px;line-height:1.6}.account-badge strong{display:block;overflow-wrap:anywhere}.account-badge+ p{color:#777;line-height:1.7}.account-badge~.auth-form button{width:100%}.profile-details{margin:12px 0;color:#7a8174;font-size:12px}.profile-details input{width:100%;border:1px solid #d6d9ce;border-radius:5px;height:40px;padding:9px;margin-top:12px}.profile-details button{margin-top:8px;border:1px solid #d6d9ce;border-radius:5px;padding:9px}.text-button{font-size:12px;text-decoration:underline;color:#727b6a;margin-top:16px;padding:0}#print-book{display:none}
@media print{@page{size:A4 portrait;margin:0}html,body{height:auto!important;overflow:visible!important;background:white}body>*{display:none!important}body>#print-book{display:block!important}.print-page{display:block;position:relative;width:210mm;height:297mm;background:#fffef9;break-after:page;overflow:hidden}.print-page:last-child{break-after:auto}.print-page .scrap-item{outline:none!important}.print-page .scrap-item button{display:none!important}.print-page .scrap-item.text{font-size:24px}.print-page .scrap-item.sticky{font-size:18px}.print-page .scrap-item.sticker{font-size:52px}}
@media(max-width:900px){.app-header{padding:0 12px}.brand{font-size:20px}.header-actions>span,.save-button span{display:none}.save-button{width:40px;padding:0;justify-content:center}.toolbar{top:6px}.toolbar button{width:34px}.workspace{padding:0 9px 9px}.edge-tabs{right:-3px}.panel{right:48px}.book{border-radius:7px}.corner-nav{background:transparent;border:0;box-shadow:none}.corner-nav.prev{left:2px}.corner-nav.next{right:2px}}
@media(max-width:650px){.brand{font-size:0}.brand:after{content:'VT';font:600 19px var(--serif)}.toolbar{left:8px;transform:none}.toolbar button{width:31px}.toolbar .divider{margin:0}.header-actions{display:none}.workspace{padding:0}.book{border-left:0;border-right:0;border-radius:0}.panel{left:10px;right:10px;top:64px;bottom:10px;width:auto}.edge-tabs{top:60px}.scrap-item.text{font-size:20px}.hint{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:650px){.app-header{height:102px;align-items:flex-start;padding-top:8px}.brand{font-size:22px;margin-top:8px}.brand:after{content:none}.header-actions{display:flex}.header-actions>span{display:flex}.save-button{width:auto;padding:0 12px}.save-button span{display:inline}.toolbar{top:55px;left:50%;transform:translateX(-50%)}.workspace{height:calc(100dvh - 102px)}.save-menu{top:47px}.account-dialog{padding:26px 24px}.account-dialog h2{font-size:30px}}