:root{--ink:#111;--charcoal:#3b3b3b;--mid:#898985;--line:#d7d7d3;--light:#e8e8e6;--paper:#f7f7f5;--white:#fff;--panel:#f4f4f1;--accent:#695f4d;--top:58px;--bottom:118px;--left:260px;--right:276px;color-scheme:light}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font:12px 'DM Sans',Inter,Arial,sans-serif;color:var(--ink);background:var(--paper)}button,input,select{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}.skip-link{position:fixed;top:-50px;left:10px;z-index:99;background:#111;color:white;padding:10px}.skip-link:focus{top:5px}
.topbar{height:var(--top);display:flex;align-items:center;border-bottom:1px solid var(--line);background:var(--white);padding:0 14px;position:relative;z-index:10}.brand{display:flex;align-items:center;width:246px;gap:9px}.brand-mark{display:grid;place-items:center;background:var(--ink);color:white;width:28px;height:28px;font:500 18px Georgia}.brand div{line-height:10px}.brand strong{font-size:11px;letter-spacing:1.8px;display:block}.brand div span{font-size:8px;letter-spacing:3.2px}.brand a{font:italic 11px Georgia;color:var(--mid);text-decoration:none;margin-left:3px}.file-actions,.primary-actions{display:flex;align-items:center;gap:3px}.file-actions button,.primary-actions button{padding:8px 9px;border-radius:3px}.file-actions button:hover,.primary-actions button:hover{background:var(--paper)}.file-actions i{font-style:normal;margin-right:4px}.divider{width:1px;height:20px;background:var(--line);margin:0 5px}.primary-actions{margin-left:auto}.primary-actions .export-button{background:var(--ink);color:white;padding:9px 14px;margin-left:5px}.export-button span{margin-left:14px}
.studio{height:calc(100vh - var(--top) - var(--bottom));display:grid;grid-template-columns:var(--left) 1fr var(--right)}.left-rail{display:grid;grid-template-columns:64px 1fr;border-right:1px solid var(--line);background:var(--white);min-width:0}.rail-tabs{border-right:1px solid var(--line);padding-top:9px}.rail-tabs button{width:100%;height:58px;color:#6f6f6b;font-size:8px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.rail-tabs button span{font-size:19px}.rail-tabs button.active{color:var(--ink);background:var(--paper)}.rail-tabs button.active:before{content:"";position:absolute;left:0;height:100%;width:2px;background:var(--ink)}.rail-content{padding:17px 13px;overflow:auto}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading p,.dialog-head p{margin:0;color:var(--mid);font-size:8px;letter-spacing:1.5px}.panel-heading h2{font:500 18px Georgia;margin:3px 0 15px}.panel-heading h2 span{font:9px DM Sans;background:var(--light);padding:3px 5px;border-radius:10px}.panel-heading button{font-size:20px}.page-list{display:grid;gap:12px}.page-item{display:grid;grid-template-columns:19px 1fr;gap:7px;align-items:start;color:var(--mid);cursor:pointer}.page-item.active{color:var(--ink)}.page-item.active .mini-page{outline:2px solid var(--ink);outline-offset:2px}.mini-page{height:103px;background:white;border:1px solid var(--line);padding:7px;position:relative;overflow:hidden}.mini-page:before{content:"";display:block;background:#30302e;height:45%;margin-bottom:6px}.mini-page:after{content:"";display:block;width:60%;border-top:9px double #777}.page-item:nth-child(2) .mini-page:before{height:14%;background:#aaa}.page-item small{font-size:8px}.add-page{width:100%;border:1px dashed var(--line);padding:9px;margin-top:13px;color:var(--mid)}
.workarea{min-width:400px;position:relative;overflow:hidden}.contextbar{height:41px;display:flex;align-items:center;justify-content:space-between;background:var(--white);border-bottom:1px solid var(--line);padding:0 12px}.crumb b{color:var(--mid);padding:0 8px}.crumb em{font-style:normal;font-size:8px;color:#66816b;margin-left:9px}.view-tools{display:flex;align-items:center}.view-tools button{padding:5px 7px;color:var(--mid)}.view-tools button.active{color:var(--ink)}.view-tools span{height:16px;border-left:1px solid var(--line);margin:0 5px}.view-tools output{font-size:9px;width:35px;text-align:center}.ruler{color:#999;font-size:7px}.ruler-top{height:20px;display:flex;justify-content:space-around;border-bottom:1px solid var(--line);padding-left:25px;background:var(--panel)}.ruler-side{position:absolute;left:0;top:0;width:20px;height:100%;display:flex;flex-direction:column;justify-content:space-around;border-right:1px solid var(--line);text-align:center}.canvas-wrap{height:calc(100% - 61px);position:relative;background-color:#dededb;background-image:radial-gradient(#c4c4c0 0.6px,transparent .6px);background-size:8px 8px;overflow:auto;display:grid;place-items:center;padding:35px}.spread{display:flex;filter:drop-shadow(0 5px 11px #0002);transform:scale(.72);transform-origin:center;transition:transform .15s}.paper{background:#fff;width:390px;height:552px;position:relative;overflow:hidden;padding:27px}.paper:first-child{border-right:1px solid #bbb}.paper header,.paper footer{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;position:relative;z-index:2}.paper footer{position:absolute;left:27px;right:27px;bottom:22px;align-items:end}.paper footer b{font:500 22px Georgia}.bleed-guide,.safe-guide{position:absolute;inset:6px;border:1px solid transparent;pointer-events:none}.show-guides .bleed-guide{border-color:#886e6388}.show-guides .safe-guide{inset:20px;border-color:#68887855}.cover-photo{position:absolute;left:27px;right:27px;top:59px;height:259px;background:linear-gradient(165deg,#ddd 0 48%,#b8b8b4 49% 60%,#696966 61%);overflow:hidden;filter:grayscale(1)}.sun{width:100px;height:100px;background:#eee;border-radius:50%;position:absolute;right:28px;top:26px}.mountain{position:absolute;bottom:-30px;transform:rotate(45deg);background:#494947}.mountain.one{width:180px;height:180px;left:-20px}.mountain.two{width:140px;height:140px;right:15px;background:#777}.vertical-note{position:absolute;right:10px;top:60px;writing-mode:vertical-rl;font-size:6px;letter-spacing:1px}.cover-title{font:500 54px/0.8 Georgia;letter-spacing:-3px;position:absolute;top:342px;left:27px}.contents-page .issue{font-size:7px;letter-spacing:1.2px}.contents-page h1{font:400 43px Georgia;margin:28px 0 17px;border-bottom:1px solid;padding-bottom:12px}.content-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}.feature-art{height:175px;background:#272725;color:white;padding:12px;position:relative;overflow:hidden}.feature-art>span{font-size:6px;letter-spacing:1px}.feature-art p{font:16px Georgia;position:absolute;bottom:2px}.arch{position:absolute;width:115px;height:145px;border:18px solid #bcbcb7;border-bottom:0;border-radius:70px 70px 0 0;left:31px;top:37px}.content-grid ol{list-style:none;padding:0;margin:0}.content-grid li{display:flex;border-top:1px solid #aaa;padding:9px 0;gap:10px}.content-grid li b{font:18px Georgia}.content-grid li span{font:12px Georgia}.content-grid li small{font:6px DM Sans;color:#777}.selected-caption{position:absolute;left:199px;top:340px;width:156px;height:90px;border:1px solid #766956;padding:12px}.selected-caption>span{font-size:6px;letter-spacing:1px}.selected-caption strong{display:block;font:19px/.9 Georgia;margin-top:8px}.handle{position:absolute;width:5px;height:5px;background:white;border:1px solid #766956}.tl{top:-3px;left:-3px}.tr{top:-3px;right:-3px}.bl{bottom:-3px;left:-3px}.br{bottom:-3px;right:-3px}.canvas-hint{position:absolute;bottom:8px;color:#777;font-size:8px;background:#eee9;padding:5px 9px}
.inspector{background:var(--white);border-left:1px solid var(--line);overflow:auto}.inspector-tabs{height:41px;border-bottom:1px solid var(--line);display:flex;padding-left:12px;gap:15px}.inspector-tabs button{font-size:10px;position:relative}.inspector-tabs .active:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:2px solid}.inspector section{border-bottom:1px solid var(--line);padding:10px 13px}.section-title{display:flex;width:100%;justify-content:space-between;font-weight:600;font-size:10px;padding:2px 0 10px}.font-row{display:grid;grid-template-columns:1.4fr 1fr;gap:5px}.inspector select,.inspector input{border:1px solid var(--line);background:var(--paper);height:27px;padding:4px;width:100%;font-size:9px}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}.property-grid label{position:relative}.property-grid label>span:first-child{position:absolute;left:6px;top:8px;color:var(--mid);font-size:8px}.property-grid input{padding-left:26px}.aligns{display:block;height:27px;padding:6px 5px 5px 38px;border:1px solid var(--line);word-spacing:8px}.wide-control{border:1px solid var(--line);width:100%;margin-top:6px;text-align:left;padding:8px}.wide-control span{float:right}.appearance{display:grid;grid-template-columns:20px 1fr 58px 40px;align-items:center;gap:5px;font-size:9px}.swatch{width:19px;height:19px;background:#111;border:1px solid #aaa}.appearance code{background:var(--paper);padding:5px}.range{display:grid;grid-template-columns:50px 1fr 35px;align-items:center;margin-top:10px;font-size:9px}.range input{height:auto}.layers ul{list-style:none;padding:0;margin:0}.layers li{display:grid;grid-template-columns:16px 19px 1fr 15px;align-items:center;padding:6px 2px;border-top:1px solid #eee;font-size:9px}.layers i{font-style:normal;color:#777}.layers em{font-style:normal}.layers .locked{color:#888}.privacy{margin:11px;border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;font-size:8px}.privacy b{color:#617663;margin-bottom:3px}
.timeline{height:var(--bottom);display:flex;align-items:stretch;border-top:1px solid var(--line);background:var(--white);position:relative;z-index:11;padding:12px 12px 28px}.collapse{width:28px}.timeline-label{width:110px;padding:7px}.timeline-label b{display:block;font-size:8px;letter-spacing:1px}.timeline-label span{font-size:8px;color:var(--mid)}.thumbnails{display:flex;gap:9px}.thumb-group{display:flex;gap:3px;position:relative;padding-top:5px}.thumb-group.active:before{content:"";position:absolute;left:0;right:0;top:0;border-top:2px solid}.thumb{width:47px;height:62px;border:1px solid var(--line);background:linear-gradient(#777 0 40%,white 41%);position:relative}.thumb.light{background:linear-gradient(#fff 0 25%,#bbb 26% 54%,white 55%)}.thumb span{position:absolute;right:3px;bottom:2px;font-size:7px}.timeline-add{border:1px dashed var(--line);width:42px;height:62px;margin:5px 0 0 9px}.status{position:absolute;bottom:0;left:0;right:0;height:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;padding:0 15px;font-size:8px;color:var(--mid)}.status a{margin-left:auto;color:inherit}.status-dot{display:inline-block;width:5px;height:5px;background:#65816a;border-radius:50%;margin-right:5px}
dialog{border:0;padding:0;width:min(430px,90vw);box-shadow:0 20px 70px #0005}dialog::backdrop{background:#1119;backdrop-filter:blur(2px)}dialog form{padding:25px}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{font:28px Georgia;margin:4px 0 22px}.dialog-head button{font-size:25px}.dialog form>label{display:block;font-size:9px;margin-bottom:12px}.dialog select{width:100%;margin-top:5px;padding:10px;border:1px solid var(--line);background:var(--paper)}.checks{display:grid;gap:8px;margin:18px 0}.notice{background:var(--paper);padding:10px;font-size:9px;color:#666}.export-submit{background:#111;color:#fff;padding:12px;width:100%}.toast{position:fixed;left:50%;bottom:135px;transform:translate(-50%,20px);background:#111;color:white;padding:10px 16px;opacity:0;pointer-events:none;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
[data-theme=dark]{--ink:#f7f7f5;--charcoal:#d3d3d0;--mid:#969692;--line:#3a3a38;--light:#343432;--paper:#20201f;--white:#181817;--panel:#242423;color-scheme:dark}[data-theme=dark] .canvas-wrap{background-color:#30302e;background-image:radial-gradient(#484846 .6px,transparent .6px)}[data-theme=dark] .paper{color:#111}[data-theme=dark] .mini-page{background:#eee}.icon-button{font-size:17px!important}
button:focus-visible,input:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:2px solid #816e50;outline-offset:2px}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:1000px){:root{--left:210px;--right:230px}.brand{width:190px}.brand a,.file-actions button i{display:none}.paper{width:330px;height:467px}.spread{transform:scale(.68)}.inspector{font-size:9px}}@media(max-width:760px){:root{--top:54px;--bottom:102px}.brand{width:auto}.brand a,.brand div span,.file-actions,.primary-actions>button:not(.export-button):not(.icon-button){display:none}.primary-actions{margin-left:auto}.studio{display:block}.left-rail{display:none}.inspector{position:fixed;left:0;right:0;bottom:var(--bottom);height:48px;z-index:12;border:0;border-top:1px solid var(--line);overflow:hidden}.inspector-tabs{justify-content:center}.inspector section,.privacy{display:none}.workarea{height:100%}.contextbar{padding:0 7px}.crumb em,.crumb b,.crumb strong{display:none}.canvas-wrap{padding:15px;overflow:auto;display:flex;align-items:center}.spread{transform:scale(.54);transform-origin:left center}.timeline-label,.collapse,.status span:nth-child(2){display:none}.timeline{padding-left:8px;overflow-x:auto}.status{position:fixed;bottom:0}.thumbnails{padding-right:90px}.canvas-hint{display:none}}