:root{--ink:#18344e;--muted:#73808f;--line:#dce1e8;--paper:#fbfcfe;--blue:#204e77;--accent:#9b5f98;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.3}button:focus-visible,a:focus-visible,#viewport:focus-visible{outline:3px solid #a65b9a;outline-offset:5px}button{border:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.masthead{height:88px;padding:0 4%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:32px}.brand{display:flex;align-items:center;flex:0 0 auto;color:var(--ink);text-decoration:none}.brand-logo{display:block;width:200px;height:auto}.edition{display:flex;align-items:center;gap:12px;border-left:1px solid var(--line);padding-left:32px}.edition span{font-size:12px;letter-spacing:2px;color:var(--muted)}.edition strong{font-size:21px;font-weight:500}.header-note{margin-left:auto;font-size:14px;color:#697889}.studio{position:relative;min-height:450px;height:calc(100svh - 328px);max-height:900px;background:radial-gradient(ellipse at 53% 35%,#fbfbfc 0,#eff0f4 55%,#e7e9ef 100%);overflow:hidden}.stage-heading{position:absolute;z-index:2;left:4%;top:28px;right:4%;display:flex;justify-content:space-between;pointer-events:none;font-size:12px;letter-spacing:2px;color:#74808f}.stage-detail{letter-spacing:.3px;font-size:12px;color:#8a94a1}#viewport{position:absolute;inset:0;cursor:grab;touch-action:pan-y}#viewport:active{cursor:grabbing}#viewport canvas{display:block;width:100%;height:100%;outline:none}.views{position:absolute;left:4%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:3}.views-label{font-size:12px;letter-spacing:2px;color:#8b95a1;margin-bottom:13px;padding-left:10px}.view{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;font-size:14px;padding:13px 13px 13px 10px;border-radius:6px;color:#798595;transition:background .2s,color .2s}.view span{font-size:12px;letter-spacing:1px;color:#99a0ab}.view:hover{background:#ffffff80;color:var(--ink)}.view.active{background:#ffffffd9;color:var(--ink);box-shadow:0 3px 18px #1b334908}.view.active span{color:var(--accent)}.icon-button{display:flex;align-items:center;justify-content:center;background:#ffffffcb;border:1px solid #d7dce5;border-radius:50%;width:44px;height:44px;transition:background .2s}.icon-button:hover{background:#fff}.enlarge{position:absolute;right:4%;bottom:30px;z-index:3;width:auto;gap:10px;border-radius:30px;padding:0 17px;font-size:12px}.enlarge svg{width:17px;height:17px}.studio-bottom{position:absolute;left:4%;right:4%;bottom:34px;pointer-events:none;display:flex;gap:40px;align-items:center;font-size:12px;color:#7b8593;letter-spacing:.4px;padding-right:165px}.studio-bottom>span:first-child{min-width:130px}.gesture-hint{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.gesture-hint svg{width:18px;height:18px;margin-right:2px;opacity:.75}.gesture-hint i{height:3px;width:3px;border-radius:50%;background:#a3a9b2;margin:0 5px}.pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4% 17px}.page-info{display:flex;gap:25px;align-items:center}#page-number{font-size:22px;letter-spacing:-1px;font-variant-numeric:tabular-nums;padding-right:25px;border-right:1px solid var(--line)}#page-number span{font-size:13px;letter-spacing:0;color:#8b97a5}h1{font-size:23px;font-weight:500;letter-spacing:-.6px;margin:0 0 4px}.page-info p{font-size:12px;color:var(--muted);margin:0;letter-spacing:.2px}.page-controls{display:flex;gap:10px}.nav-button{min-height:43px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:20px;border-radius:5px;font-size:13px;background:transparent;transition:background .2s}.nav-button svg{height:20px;width:20px}.previous{border:1px solid var(--line);background:#fff}.previous:hover:not(:disabled){background:#f0f3f7}.next{background:var(--ink);color:#fff;border:1px solid var(--ink)}.next:hover:not(:disabled){background:#2b5375}.filmstrip{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;margin:0 4%;padding:5px 1px 13px;scrollbar-width:thin;scrollbar-color:#cbd2dc transparent}.thumbnail{width:87px;flex:0 0 87px;background:transparent;padding:0;text-align:left}.thumbnail-image{display:flex;width:87px;height:66px;align-items:center;justify-content:center;background:#e7eaf0;border-radius:3px;border:2px solid transparent;padding:3px;transition:border-color .2s;overflow:hidden}.thumbnail img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 1px 3px #132d4930}.thumbnail .thumb-label{display:block;font-size:12px;color:#7f8b99;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumbnail .thumb-label span{font-size:12px;color:#a1a9b2;padding-right:4px;font-variant-numeric:tabular-nums}.thumbnail:hover .thumbnail-image{border-color:#9aaebf}.thumbnail.active .thumbnail-image{border-color:var(--blue);background:#dfe6f0}.thumbnail.active .thumb-label{color:var(--ink)}.footer{padding:14px 4%;display:flex;justify-content:space-between;border-top:1px solid #e8ebf0;font-size:12px;color:#8995a3;letter-spacing:.5px}.footer-dot{margin:0 10px;opacity:.4}kbd{font-family:inherit;border:1px solid #dce1e7;border-radius:3px;padding:1px 4px;margin-left:3px}.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:17px;align-items:center;justify-content:center;background:#f0f1f5;font-size:13px;z-index:4;transition:opacity .25s}.loading.done{opacity:0;pointer-events:none}.spinner{width:22px;height:22px;border:2px solid #d3dae5;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#fallback{position:absolute;left:23%;top:15%;width:60%;height:70%;object-fit:contain;filter:drop-shadow(8px 22px 15px #18344e40)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{width:min(1280px,94vw);height:94svh;max-width:none;max-height:none;padding:0;background:#f6f7fa;border:0;border-radius:10px;color:var(--ink);box-shadow:0 30px 100px #0b1b3560}dialog::backdrop{background:#10283ace;backdrop-filter:blur(7px)}.dialog-header{height:86px;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-bottom:1px solid var(--line)}.dialog-label{font-size:12px;letter-spacing:2px;color:var(--muted)}.dialog-header h2{font-size:22px;font-weight:500;margin:6px 0 0}.art-scroll{height:calc(100% - 157px);overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px}.art-scroll img{display:block;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 6px 30px #17304718;cursor:zoom-in}.art-scroll.zoomed{display:block}.art-scroll.zoomed img{max-width:none;max-height:none;width:160%;cursor:zoom-out}.dialog-footer{height:71px;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}#dialog-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(min-width:1600px){.thumbnail{width:calc((100vw - 8vw - 180px)/16);flex-basis:calc((100vw - 8vw - 180px)/16)}.thumbnail-image{width:100%}.studio{height:calc(100svh - 328px)}}
@media(max-width:900px){.brand-logo{width:180px}.views{left:3%;gap:3px}.view{font-size:12px;gap:7px;padding:12px 9px}.view span{font-size:12px}.stage-heading{left:4%;right:4%}.gesture-hint{font-size:12px;gap:5px}.studio-bottom{gap:10px}.studio-bottom>span:first-child{min-width:110px}.header-note{font-size:12px}}
@media(max-width:600px){.brand-logo{width:152px}.masthead{height:70px;padding:0 5%;gap:18px}.edition{gap:8px;padding-left:18px}.edition span{font-size:12px;letter-spacing:1px}.edition strong{font-size:18px}.header-note{display:none}.studio{height:calc(100svh - 316px);min-height:400px}.stage-heading{left:5%;right:5%;top:21px;font-size:12px;letter-spacing:1.3px}.stage-detail{font-size:12px;letter-spacing:0}.views{top:54px;left:5%;right:5%;transform:none;flex-direction:row;gap:3px;justify-content:space-between}.views-label{display:none}.view{font-size:12px;padding:9px 6px;gap:5px;border-radius:4px}.view span{font-size:12px}.enlarge{right:5%;bottom:19px;border-radius:50%;width:38px;height:38px;padding:0}.enlarge span{display:none}.studio-bottom{left:5%;right:5%;bottom:29px;padding-right:45px;gap:10px;font-size:12px}.studio-bottom>span:first-child{min-width:0}.gesture-hint{justify-content:flex-end;font-size:12px;gap:4px}.gesture-hint svg,.gesture-hint i{display:none}.pagination{padding:18px 5% 12px;gap:8px}.page-info{gap:12px}#page-number{font-size:18px;padding-right:12px}#page-number span{font-size:12px}h1{font-size:17px;letter-spacing:-.3px}.page-info p{font-size:12px;max-width:145px}.page-controls{gap:7px}.nav-button{padding:0 11px;min-height:38px;gap:8px}.page-controls .nav-button span{display:none}.page-controls .nav-button svg{width:19px}.filmstrip{margin:0 5%;gap:10px;padding-bottom:12px}.thumbnail{width:75px;flex-basis:75px}.thumbnail-image{width:75px;height:57px}.thumbnail .thumb-label{font-size:12px}.footer{padding:12px 5%;font-size:12px}.keyboard-hint{display:none}.footer-dot{margin:0 5px}dialog{width:96vw;height:94svh;border-radius:6px}.dialog-header{height:77px;padding:15px}.dialog-header h2{font-size:18px}.art-scroll{padding:10px;height:calc(100% - 142px)}.dialog-footer{padding:10px 15px;height:65px}.dialog-footer .nav-button{font-size:12px}#fallback{left:8%;width:84%;top:26%;height:55%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:600px){.studio-bottom>span:first-child{display:none}.gesture-hint{justify-content:center;font-size:12px;gap:6px}.gesture-hint i{display:block;flex:0 0 3px;margin:0 1px}.view{gap:4px;padding:9px 6px}.view span{font-size:10px}.stage-heading{font-size:11px}.stage-detail{font-size:10px}.page-info p{font-size:11px}.thumb-label span{display:none}.footer{font-size:10px}.edition span{font-size:10px}.thumbnail .thumb-label{font-size:11px}}
@media(max-width:360px){.brand-logo{width:128px}.view span{display:none}.view{padding:9px 6px}.stage-detail{display:none}.page-info{gap:8px}#page-number{padding-right:8px}.page-info p{display:none}.gesture-hint{font-size:11px}}

/* Product tabs share the same studio and navigation controls. */
.product-tabs{display:flex;gap:4px;padding:4px;background:#e9edf3;border:1px solid #dce2eb;border-radius:8px;margin-left:auto}
.product-tab{background:transparent;border-radius:5px;min-height:38px;padding:0 20px;font-size:14px;color:#708094;transition:background .2s,color .2s}
.product-tab:hover{color:var(--ink);background:#ffffff70}.product-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px #20334b10}
.masthead .header-note{margin-left:0}
html[data-product="caderno"] .thumbnail{width:116px;flex-basis:116px}
html[data-product="caderno"] .thumbnail-image{width:116px;height:80px;background:#e9edf3}
html[data-product="caderno"] .thumbnail.active .thumbnail-image{background:#dfe6f0}
html[data-product="caderno"] .thumbnail .thumb-label{font-size:12px}
@media(max-width:1120px){.header-note{display:none}.masthead{gap:24px}.edition{padding-left:24px}.product-tab{padding:0 17px}}
@media(max-width:760px) and (min-width:601px){.brand-logo{width:145px}.masthead{gap:14px}.edition{gap:8px;padding-left:14px}.edition span{font-size:10px;letter-spacing:1px}.edition strong{font-size:18px}.product-tab{padding:0 12px;font-size:13px}}
@media(max-width:600px){.masthead{height:118px;padding:12px 5%;gap:10px 18px;flex-wrap:wrap;justify-content:space-between}.edition{margin-left:auto;padding-left:18px}.product-tabs{order:3;width:100%;margin:0;padding:3px;display:grid;grid-template-columns:1fr 1fr}.product-tab{min-height:32px;font-size:13px}.studio{height:calc(100svh - 364px)}html[data-product="caderno"] .thumbnail{width:100px;flex-basis:100px}html[data-product="caderno"] .thumbnail-image{width:100px;height:70px}html[data-product="caderno"] .thumbnail .thumb-label{font-size:11px}html[data-product="caderno"] .page-info h1{font-size:16px}html[data-product="caderno"] .page-info p{max-width:165px;font-size:10px}}

html[data-product="caderno"] .studio{height:calc(100svh - 346px)}
@media(max-width:600px){html[data-product="caderno"] .studio{height:calc(100svh - 377px)}}