.toolbar{background:var(--color-white);border-bottom:1px solid #cfcfcf;flex-shrink:0;justify-content:space-between;align-items:center;height:40px;padding:0 8px;display:flex}.toolbar-group{align-items:center;gap:2px;display:flex}.toolbar-btn{color:var(--color-black);cursor:pointer;background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;padding:4px 8px;transition:background .12s,opacity .12s;display:flex;position:relative}.toolbar-tooltip{background:var(--color-black);color:var(--color-white);font-family:var(--font-body);letter-spacing:.2px;white-space:nowrap;pointer-events:none;opacity:0;z-index:100;border-radius:2px;padding:3px 7px;font-size:10px;transition:opacity .15s;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.toolbar-btn:hover:not(:disabled) .toolbar-tooltip{opacity:1}.toolbar-btn:hover:not(:disabled) svg{color:var(--color-blue)}.toolbar-btn:disabled{opacity:.3;cursor:default}.toolbar-btn--active{color:var(--color-blue)}.toolbar-btn--active .toolbar-tooltip{background:var(--color-blue)}.toolbar-paint-wrap{position:relative}.toolbar-paint-popover{background:var(--color-white);z-index:200;white-space:nowrap;border:1px solid #d0d0d0;border-radius:4px;flex-direction:column;gap:6px;padding:6px 8px 8px;display:flex;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000021}.toolbar-paint-row{align-items:center;gap:6px;display:flex}.toolbar-paint-swatch{cursor:pointer;border:1px solid #0003;border-radius:3px;flex-shrink:0;width:22px;height:22px;padding:0;transition:border-color .1s}.toolbar-paint-swatch:hover{border-color:#00000073}.toolbar-paint-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.toolbar-paint-eyedropper{cursor:pointer;width:26px;height:22px;color:var(--color-black);background:0 0;border:1px solid #d0d0d0;border-radius:3px;justify-content:center;align-items:center;padding:0;transition:background .1s,border-color .1s;display:flex}.toolbar-paint-eyedropper:hover{background:var(--color-cream);border-color:#999}.toolbar-paint-apply-all{width:100%;font-family:var(--font-body);letter-spacing:.03em;color:var(--color-black);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #d0d0d0;border-radius:3px;padding:4px 8px;font-size:10px;font-weight:500;transition:background .1s,border-color .1s}.toolbar-paint-apply-all:hover{background:var(--color-cream);border-color:#999}.toolbar-grid-wrap{position:relative}.toolbar-grid-popover{background:var(--color-white);z-index:200;white-space:nowrap;border:1px solid #d0d0d0;border-radius:4px;flex-direction:column;gap:8px;min-width:180px;padding:10px 12px;display:flex;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000021}.toolbar-grid-row{align-items:center;gap:8px;display:flex}.toolbar-grid-row--slider{gap:6px}.toolbar-grid-row--thickness{gap:8px}.toolbar-grid-label{font-family:var(--font-body);color:var(--color-black);flex-shrink:0;width:60px;font-size:10px;font-weight:500}.toolbar-grid-number{width:52px;font-family:var(--font-body);color:var(--color-black);background:var(--color-white);text-align:center;border:1px solid #d0d0d0;border-radius:3px;padding:3px 5px;font-size:11px}.toolbar-grid-number:focus{border-color:var(--color-blue);outline:none}.toolbar-grid-swatch{flex-shrink:0;width:22px;height:22px}.toolbar-grid-slider{accent-color:var(--color-blue);cursor:pointer;flex:1;height:3px}.toolbar-grid-pct{font-family:var(--font-body);color:#666;text-align:right;flex-shrink:0;width:30px;font-size:10px}.toolbar-grid-toggle{border:1px solid #d0d0d0;border-radius:3px;display:flex;overflow:hidden}.toolbar-grid-toggle-btn{font-family:var(--font-body);color:var(--color-black);cursor:pointer;background:0 0;border:none;flex:1;padding:4px 8px;font-size:10px;font-weight:500;transition:background .1s}.toolbar-grid-toggle-btn+.toolbar-grid-toggle-btn{border-left:1px solid #d0d0d0}.toolbar-grid-toggle-btn--active{background:var(--color-blue);color:var(--color-white)}.toolbar-grid-toggle-btn:not(.toolbar-grid-toggle-btn--active):hover{background:var(--color-cream)}.toolbar-shapes-wrap{position:relative}.toolbar-shapes-popover{background:var(--color-white);z-index:200;white-space:nowrap;border:1px solid #d0d0d0;border-radius:4px;flex-direction:column;min-width:140px;padding:4px;display:flex;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000021}.toolbar-shape-btn{cursor:pointer;color:var(--color-black);font-family:var(--font-body);text-align:left;background:0 0;border:none;border-radius:3px;align-items:center;gap:8px;width:100%;padding:6px 10px;font-size:11px;font-weight:500;transition:background .1s;display:flex}.toolbar-shape-btn:hover{background:var(--color-cream)}.toolbar-view-toggle{display:flex}.toolbar-view-btn{cursor:pointer;color:#474747;background:#f0f0f0;border:1px solid #474747;justify-content:center;align-items:center;width:26px;height:22px;padding:0;transition:background .1s;display:flex}.toolbar-view-btn:first-child{border-right:none;border-radius:2px 0 0 2px}.toolbar-view-btn:last-child{border-radius:0 2px 2px 0}.toolbar-view-btn--active{color:#191919;background:#fefefe;border-color:#191919}.toolbar-view-btn:not(.toolbar-view-btn--active):hover{background:#e4e4e4}.toolbar-shape-color-popover{min-width:90px}.toolbar-shape-color-label{font-family:var(--font-body);color:#555;font-size:11px}
.tm-overlay{z-index:500;background:#00000038;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.tm{background:var(--color-white);border:1px solid #d6d6d6;border-radius:4px;flex-direction:column;width:480px;display:flex;box-shadow:0 4px 24px #0000001a}.tm-header{justify-content:center;align-items:center;padding:9px 14px;display:flex;position:relative}.tm-title{font-family:var(--font-body);letter-spacing:.02em;color:var(--color-black);font-size:11px}.tm-close{cursor:pointer;color:var(--color-black);background:0 0;border:none;border-radius:2px;align-items:center;padding:2px;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.tm-close:hover{background:var(--color-cream)}.tm-rule{background:#d9d9d9;flex-shrink:0;height:1px}.tm-toolbar{flex-shrink:0;align-items:center;gap:1px;padding:5px 10px;display:flex}.tm-toolbar--row2{border-top:1px solid #f0f0f0;gap:3px;padding-top:3px;padding-bottom:5px}.tm-font-picker{flex-shrink:0;position:relative}.tm-font-btn{color:var(--color-black);cursor:pointer;letter-spacing:.02em;white-space:nowrap;background:0 0;border:none;border-bottom:1px solid #d9d9d9;align-items:center;gap:3px;min-width:110px;padding:2px 2px 2px 0;font-size:11px;display:flex}.tm-font-btn:hover{border-bottom-color:#999}.tm-font-list{z-index:600;background:var(--color-white);border:1px solid #d6d6d6;border-radius:3px;flex-direction:column;min-width:160px;display:flex;position:absolute;top:calc(100% + 4px);left:0;overflow:hidden;box-shadow:0 4px 16px #0000001f}.tm-font-option{text-align:left;cursor:pointer;color:var(--color-black);white-space:nowrap;background:0 0;border:none;padding:7px 12px;font-size:13px;transition:background .1s}.tm-font-option:hover{background:var(--color-cream)}.tm-font-option--active{color:var(--color-blue)}.tm-sep{background:#d9d9d9;flex-shrink:0;width:1px;height:14px;margin:0 4px}.tm-fmt{cursor:pointer;color:var(--color-black);font-family:var(--font-body);background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;min-width:22px;padding:3px 5px;font-size:11px;line-height:1;transition:background .1s;display:flex}.tm-fmt:hover{background:var(--color-cream)}.tm-fmt--on{color:var(--color-blue)}.tm-size{font-family:var(--font-body);text-align:center;min-width:22px;color:var(--color-black);letter-spacing:.02em;font-size:10px}.tm-color-label{font-family:var(--font-body);color:var(--color-black);white-space:nowrap;letter-spacing:.02em;margin-left:2px;font-size:10px}.tm-detail-label{font-family:var(--font-body);color:#888;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;margin-right:2px;font-size:9px;font-weight:500}.tm-detail-value{font-family:var(--font-body);text-align:center;min-width:30px;color:var(--color-black);letter-spacing:.02em;flex-shrink:0;font-size:10px}.tm-color-swatch{cursor:pointer;border:1px solid #0000002e;border-radius:1px;flex-shrink:0;width:14px;height:14px;margin-left:5px;padding:0}.tm-color-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.tm-body{resize:none;border:1px solid #d9d9d9;border-radius:2px;outline:none;height:120px;margin:10px 18px;padding:8px 10px;line-height:1.4}.tm-body::placeholder{color:#aaa;font-family:var(--font-body);font-size:12px}.tm-body:focus{border-color:#b0b0b0}.tm-footer{justify-content:center;gap:8px;padding:8px 14px 14px;display:flex}.tm-action{font-family:var(--font-body);letter-spacing:.04em;cursor:pointer;color:#282828;background:#fcfcfc;border:.5px solid #d9d9d9;border-radius:1px;padding:5px 18px;font-size:9px;font-weight:600;transition:background .1s}.tm-action:hover{background:var(--color-cream)}
.spreads-root{background:#efefef;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.spreads-scroll{flex:1;padding-top:40px;overflow-y:auto}.spreads-grid-wrapper{margin:0 auto;padding-bottom:120px}.spreads-grid{justify-items:center;gap:36px 32px;display:grid}.spreads-card{cursor:grab;outline:none;flex-direction:column;gap:5px;transition:opacity .15s;display:flex;position:relative}.spreads-card:active{cursor:grabbing}.spreads-card:focus-visible .spreads-card-pages{outline:2px solid var(--color-blue);outline-offset:2px}.spreads-card--dragging{opacity:.35}.spreads-card--drag-over:before{content:"";background:var(--color-blue);border-radius:2px;width:3px;position:absolute;top:0;bottom:0;left:-10px}.spreads-card-label{font-family:var(--font-body);color:var(--color-black);-webkit-user-select:none;user-select:none;justify-content:space-between;padding:0 1px;font-size:11px;font-weight:600;display:flex}.spreads-card-pages{background:#fff;border:1px solid #c4c4c4;border-radius:1px;height:90px;transition:border-color .12s;display:flex;overflow:hidden}.spreads-card:hover .spreads-card-pages{border-color:#999}.spreads-card--active .spreads-card-pages,.spreads-card--active:hover .spreads-card-pages{border:2px solid var(--color-blue);transition:none}.spreads-card-page{object-fit:cover;flex:none;width:auto;height:100%;display:block}.spreads-card-page--blank{background:#fff;flex:none;width:auto;height:100%}
.layout-panel{background:var(--color-white);border-left:1px solid #cfcfcf;flex-direction:column;flex-shrink:0;width:200px;height:100%;display:flex;overflow:hidden}.panel-tabs{border-bottom:1px solid #b0b0b0;flex-shrink:0;display:flex}.panel-tab{height:37px;font-family:var(--font-body);color:#666;cursor:pointer;letter-spacing:.02em;background:#d9d9d9;border:none;border-right:1px solid #b0b0b0;flex:1;font-size:13px;font-weight:400;transition:color .12s,background .12s}.panel-tab:last-child{border-right:none}.panel-tab--active{background:var(--color-white);color:var(--color-black);z-index:1;box-shadow:0 1px 0 0 var(--color-white);font-weight:500;position:relative}.panel-tab:hover:not(.panel-tab--active){color:var(--color-black);background:#cecece}.panel-subtabs{border-bottom:1px solid #ebebeb;flex-shrink:0;gap:16px;margin-bottom:8px;padding:10px 14px 0;display:flex}.panel-subtab{font-family:var(--font-body);color:var(--color-black);cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-bottom:2px solid #0000;padding:0 0 6px;font-size:11.5px;font-weight:400;transition:color .12s,border-color .12s}.panel-subtab--active{color:var(--color-blue);border-bottom-color:var(--color-blue);font-weight:500}.panel-subtab:hover:not(.panel-subtab--active){color:#555}.panel-content-grid{flex-direction:column;flex:1;padding:8px;display:flex;overflow-y:auto}.panel-empty{font-family:var(--font-body);color:#bbb;text-align:center;margin-top:32px;font-size:11px}.layout-count-selector{flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:12px 8px;display:flex}.layout-count-btn{border:1px solid var(--color-black);width:28px;height:28px;color:var(--color-black);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:400;transition:background .15s,color .15s;display:flex}.layout-count-btn--active{background:var(--color-blue);border-color:var(--color-blue);color:var(--color-white)}.layout-count-btn:hover:not(.layout-count-btn--active){background:var(--color-cream)}.layout-all-row{flex-shrink:0;justify-content:center;padding:0 8px 10px;display:flex}.layout-all-btn{font-family:var(--font-body);color:#888;cursor:pointer;letter-spacing:.5px;background:0 0;border:none;border-radius:2px;padding:2px 8px;font-size:11px;font-weight:500;transition:color .12s}.layout-all-btn:hover{color:var(--color-black)}.layout-all-btn--active{color:var(--color-blue);font-weight:600}.layout-grid{flex:1;grid-template-columns:1fr 1fr;align-content:start;gap:8px;padding:8px;display:grid;overflow-y:auto}.layout-thumb{background:var(--color-white);border:1px solid var(--color-black);cursor:pointer;border-radius:0;width:100%;padding:0;transition:border-color .15s;display:block}.layout-thumb--selected{border:2px solid var(--color-blue)}.layout-thumb:hover:not(.layout-thumb--selected){border-color:#888}.layout-thumb-aspect{width:100%;padding-bottom:129.63%;position:relative}.layout-thumb-inner{position:absolute;inset:0}.layout-thumb-frame{background:#d2d2d2;position:absolute}.texture-grid{grid-template-columns:1fr 1fr;gap:5px;padding:4px 2px 2px;display:grid}.texture-thumb{cursor:grab;outline-offset:1px;background:#eee;border:none;border-radius:2px;outline:2px solid #0000;padding:0;transition:outline-color .12s;overflow:hidden}.texture-thumb:hover{outline-color:var(--color-blue)}.texture-thumb:active{cursor:grabbing}.texture-img{-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}
.page-strip{background:var(--color-white);border-top:1px solid #cfcfcf;flex-direction:row;flex-shrink:0;height:90px;display:flex;overflow:hidden}.page-strip-fixed{background:var(--color-white);border-right:1px solid #e0e0e0;flex-shrink:0;justify-content:center;align-items:center;padding:0 12px;display:flex}.page-strip-scroll{scrollbar-width:thin;scrollbar-color:#a0a0a0 transparent;flex-direction:row;flex:1;align-items:center;gap:8px;height:100%;padding:0 14px;display:flex;overflow:auto hidden}.page-strip-scroll::-webkit-scrollbar{height:3px}.page-strip-scroll::-webkit-scrollbar-thumb{background:#a0a0a0;border-radius:2px}.page-strip-scroll::-webkit-scrollbar-track{background:0 0}.page-strip-spread{cursor:pointer;border:1.5px solid #0000;border-radius:1px;flex-direction:row;flex-shrink:0;padding:3px;transition:border-color .15s;display:flex;position:relative}.page-strip-spread:hover:not(.page-strip-spread--active){border-color:silver}.page-strip-spread--active{border-color:var(--color-blue)}.page-strip-spread--drag-over{border-color:var(--color-blue);background:#e8f0fb}@keyframes page-strip-flash{0%{background:0 0;border-color:#0000}20%{border-color:var(--color-blue);background:#e8f0fb}60%{border-color:var(--color-blue);background:#e8f0fb}to{background:0 0;border-color:#0000}}.page-strip-spread--flash{animation:1.4s forwards page-strip-flash}.page-strip-delete{cursor:pointer;color:#fff;z-index:2;background:#191919;border:none;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;padding:0;display:flex;position:absolute;top:-6px;right:-6px}.page-strip-page-wrap{flex-direction:column;align-items:flex-start;gap:3px;display:flex}.page-strip-page-wrap--right{align-items:flex-end}.page-strip-page-rect{background:#d9d9d9;border:1px solid silver;flex-shrink:0;position:relative;overflow:hidden}.page-strip-thumb{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.page-strip-page-label{font-family:var(--font-body);color:var(--color-black);white-space:nowrap;font-size:9px;font-weight:600;line-height:1}.page-strip-page-label--special{font-weight:500}.page-strip-page-label--cover{background:var(--color-blue);color:var(--color-white);padding:1px 4px;font-weight:700}.page-strip-add{cursor:pointer;width:24px;height:24px;color:var(--color-black);background:0 0;border:1px solid silver;border-radius:50%;flex-shrink:0;justify-content:center;align-self:center;align-items:center;transition:background .12s,border-color .12s;display:flex}.page-strip-add:hover{background:var(--color-cream);border-color:var(--color-black)}
.tour-root{z-index:9000;pointer-events:all;position:fixed;inset:0}.tour-svg{width:100%;height:100%;display:block;position:absolute;inset:0}.tour-spot-rect--animated{transition:x .35s cubic-bezier(.4,0,.2,1),y .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1)}.tour-card{z-index:9001;pointer-events:all;background:#252525;border-radius:0;flex-direction:column;width:300px;height:190px;padding:18px 20px 16px;display:flex;position:fixed;box-shadow:0 6px 24px #00000073}.tour-title{font-family:var(--font-body), sans-serif;color:#fff;margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.2}.tour-desc{font-family:var(--font-body), sans-serif;color:#ffffffe0;flex:1;margin:0 0 16px;font-size:15px;font-weight:400;line-height:1.5}.tour-footer{justify-content:space-between;align-items:center;display:flex}.tour-dots{align-items:center;gap:6px;display:flex}.tour-dot{cursor:pointer;background:#ffffff59;border:none;border-radius:50%;width:8px;height:8px;padding:0;transition:background .2s}.tour-dot--active,.tour-dot--done{background:#528ed6}.tour-nav{align-items:center;gap:10px;display:flex}.tour-nav-btn{color:#fff;cursor:pointer;font-size:20px;line-height:1;font-family:var(--font-body), sans-serif;background:0 0;border:none;border-radius:4px;padding:4px 6px;transition:opacity .15s}.tour-nav-btn:hover{opacity:.7}.tour-nav-btn--gotit{color:#fff;background:#528ed6;border-radius:4px;padding:5px 12px;font-size:13px;font-weight:600}.tour-nav-btn--gotit:hover{opacity:.85}
.editor-root{background:var(--color-bg);flex-direction:column;height:100vh;display:flex;overflow:hidden}.editor-body{flex-direction:row;flex:1;min-height:0;margin-top:58px;display:flex;overflow:hidden}.editor-center{flex-direction:column;flex:1;display:flex;overflow:hidden}.editor-loading{background:var(--color-bg);height:100vh;color:var(--color-black);font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:13px;display:flex}.editor-loading-spinner{border:2px solid #ddd;border-top-color:var(--color-blue);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite editor-spin}@keyframes editor-spin{to{transform:rotate(360deg)}}