*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:#e9e6e0;-webkit-user-select:none;user-select:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- mesa ---------- */
#table{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:#000}
#table.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
body[data-tool=tear] #table{cursor:crosshair}
body[data-tool=flip] .face{cursor:ew-resize}
body[data-tool=glue] #table{cursor:copy}
body[data-tool=rotate] #table{cursor:alias}
body[data-tool=edit] #table{cursor:default}
body[data-tool=edit] .el{cursor:move}

/* ---------- recorte com fibra ---------- */
.cn,.cn-l{position:absolute;inset:0}
.cn{pointer-events:none}
.cn>*{pointer-events:auto}
.fiberfill{background:#f3f0e9 var(--tex-fiber)}

/* ---------- folhas soltas ---------- */
.sheet{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6)) drop-shadow(0 5px 12px rgba(0,0,0,.4))}
.sheet.lift{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.sheet.settle{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sheet.selected{filter:drop-shadow(0 0 1.5px #4da3ff) drop-shadow(0 0 5px #4da3ff)}
.sheet.tucked{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

.ph{position:absolute;inset:0}
.ph.f-cream{background:#f1ecdf}
.ph.f-white{background:#f7f6f2}
.ph img{position:absolute;display:block;object-fit:cover;left:var(--b,0px);top:var(--b,0px);width:calc(100% - 2*var(--b,0px));height:calc(100% - 2*var(--b,0px))}
.phgloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 30%,transparent 75%,rgba(0,0,0,.05))}
.crs{position:absolute;inset:0;pointer-events:none;background-image:var(--tex-crease);background-size:512px 512px;opacity:var(--crease,0)}
.paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.paper{position:absolute;inset:0}
.pp-plain{background:#f4f2ec}
.pp-kraft{background:#b08f62 var(--tex-fiber)}
.pp-cream{background:#ece3cf var(--tex-fiber)}
.pp-news{background:#d6d3ca var(--tex-grain)}
.pp-black{background:#1b1b1b var(--tex-grain)}
.pp-red{background:#d92a1c var(--tex-grain)}
.pp-vellum{background:rgba(236,236,230,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pp-grid{background-color:#f4f2ea;background-image:linear-gradient(rgba(60,110,160,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,160,.35) 1px,transparent 1px);background-size:12px 12px}

/* ---------- revistas ---------- */
.mag{position:absolute;left:0;top:0;perspective:2600px;pointer-events:none}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;pointer-events:none}
.face{position:absolute;inset:0;pointer-events:none;z-index:2}
.face.back{transform:scaleX(-1);visibility:hidden}
.leaf.flipped .face.back{visibility:visible}
.leaf.flipped .face.front{visibility:hidden}
.att{position:absolute;inset:0;pointer-events:none}
.att.front{z-index:3}
.att.back{transform:scaleX(-1);z-index:1}
.leaf.flipped .att.front{z-index:1}
.leaf.flipped .att.back{z-index:3}
.fin{position:absolute;inset:0;background:var(--paper)}
.pc{position:absolute;inset:0;overflow:hidden;container-type:size}
.tex{position:absolute;inset:0;pointer-events:none;background-image:var(--tex);opacity:var(--texop,0);mix-blend-mode:multiply}
.shade{position:absolute;inset:0;pointer-events:none}
.face.front .shade{background:
  linear-gradient(to right,rgba(0,0,0,calc(var(--gut)*.95)) 0,rgba(0,0,0,calc(var(--gut)*.35)) 3%,rgba(0,0,0,0) 13%),
  linear-gradient(to right,transparent 5%,rgba(255,255,255,calc(var(--gloss)*.55)) 9.5%,rgba(255,255,255,calc(var(--gloss)*.1)) 15%,transparent 24%,transparent 76%,rgba(255,255,255,calc(var(--gloss)*.14)) 93%,transparent)}
.face.back .shade{background:
  linear-gradient(to left,rgba(0,0,0,calc(var(--gut)*.95)) 0,rgba(0,0,0,calc(var(--gut)*.35)) 3%,rgba(0,0,0,0) 13%),
  linear-gradient(to left,transparent 5%,rgba(255,255,255,calc(var(--gloss)*.55)) 9.5%,rgba(255,255,255,calc(var(--gloss)*.1)) 15%,transparent 24%,transparent 76%,rgba(255,255,255,calc(var(--gloss)*.14)) 93%,transparent)}
.shade.flat{background:linear-gradient(120deg,rgba(255,255,255,calc(var(--gloss)*.2)),transparent 40%)}
.p-newsprint .shade::after{content:'';position:absolute;left:0;right:0;top:50%;height:8px;transform:translateY(-50%);background:linear-gradient(to bottom,transparent,rgba(0,0,0,.08) 45%,rgba(255,255,255,.3) 56%,transparent)}
.p-binder .fin{border-radius:3px;overflow:hidden}
.p-binder .face.front .shade::after,.p-binder .face.back .shade::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.22) 44%,transparent 52%)}

.blk{position:absolute;top:1px;bottom:1px;pointer-events:none;background:repeating-linear-gradient(to right,#ecebe6 0 1px,#a7a49e 1px 2px)}
.blk.l{right:100%}.blk.r{left:100%}
.msh{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;box-shadow:0 10px 34px rgba(0,0,0,.7)}
.msh.l{left:0}.msh.r{left:50%}
.mag.at-front .msh.l,.mag.at-front .blk.l,.mag.at-back .msh.r,.mag.at-back .blk.r{display:none}
.board{position:absolute;top:-12px;bottom:-12px;background:var(--board);pointer-events:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 30px rgba(0,0,0,.35)}
.board.l{left:-14px;right:50%;border-radius:8px 0 0 8px}
.board.r{left:50%;right:-14px;border-radius:0 8px 8px 0}
.mag.at-front .board.l,.mag.at-back .board.r{display:none}
.ring{position:absolute;left:50%;width:30px;height:10px;margin:-5px 0 0 -15px;border-radius:50%;border:2.5px solid #d4d4d4;border-bottom-color:#7c7c7c;border-left-color:#aaa;z-index:3000;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.mag.closed .ring{display:none}

/* ---------- elementos de página ---------- */
.el{position:absolute}
.el.image img{width:100%;height:100%;display:block;object-fit:cover;filter:var(--imgf,none);mix-blend-mode:var(--blend,normal)}
.el.text{white-space:pre-wrap;overflow-wrap:break-word}
.el.text .t{display:block;outline:none}
.el.glued{left:0;top:0;pointer-events:none}
.el.slot{display:none}
body.studio .el.slot{display:block;background:repeating-linear-gradient(45deg,rgba(120,120,120,.22) 0 8px,rgba(120,120,120,.1) 8px 16px);outline:1px dashed rgba(90,90,90,.7);outline-offset:-1px}
body.studio .el.slot::before{content:'+';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:300 26px Inter,sans-serif;color:#666}
.el.selected{outline:1.5px solid #4da3ff}
.hnd{position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;background:#fff;border:1.5px solid #4da3ff;border-radius:50%;cursor:nwse-resize}
.face.selpage::after{content:'';position:absolute;inset:0;border:2px dashed rgba(77,163,255,.95);pointer-events:none}
[contenteditable=true]{-webkit-user-select:text;user-select:text;cursor:text;background:rgba(77,163,255,.12)}

/* ---------- interface ---------- */
#guide{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:none;z-index:40}
#guide.on{display:block}
#hint{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8d8a84;transition:opacity 1.2s;pointer-events:none}
#hint.off,body.studio #hint{opacity:0}
#toast{position:fixed;left:50%;top:22px;transform:translate(-50%,-12px);background:#f2efe9;color:#111;font-size:12.5px;padding:9px 16px;border-radius:99px;opacity:0;transition:.25s;pointer-events:none;z-index:60}
#toast.on{opacity:1;transform:translate(-50%,0)}

#toolbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:rgba(24,24,24,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #2c2c2c;border-radius:16px;z-index:50}
body.studio #toolbar{left:calc(50% - 160px)}
#toolbar button{position:relative;width:40px;height:40px;border:0;border-radius:11px;background:transparent;color:#cfccc6;display:grid;place-items:center;cursor:pointer}
#toolbar button svg{width:20px;height:20px}
#toolbar button:hover{background:#2e2e2e;color:#fff}
#toolbar button.on{background:#f2efe9;color:#111}
#toolbar .sep{width:1px;height:22px;background:#3a3a3a;margin:0 4px}
#toolbar button::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#f2efe9;color:#111;font-size:11.5px;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
#toolbar button:hover::after{opacity:1}
.studio-only{display:none!important}
body.studio .studio-only{display:grid!important}
body.studio .visitor-only{display:none!important}

#studio{position:fixed;top:12px;right:12px;bottom:12px;width:308px;overflow-y:auto;background:rgba(20,20,20,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #2c2c2c;border-radius:16px;padding:14px;font-size:12px;z-index:50;scrollbar-width:thin;scrollbar-color:#444 transparent}
#studio header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
#studio header b{font-size:15px;font-weight:600}
#studio header span{color:#77746e;font-size:10.5px}
#studio section{border-top:1px solid #2a2a2a;padding:12px 0 6px}
#studio h4{margin:0 0 8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a968f;font-weight:500}
#studio label{display:flex;justify-content:space-between;align-items:center;color:#9a968f;margin:10px 0 5px;font-size:11px}
#studio .row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
#studio .row>*{flex:1;min-width:0}
#studio .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#studio button{background-color:#262626;border:1px solid #343434;border-radius:8px;padding:7px 8px;cursor:pointer;color:#e9e6e0;display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
#studio button:not(.paperbtn):hover{background-color:#333}#studio button:hover{border-color:#8a8a8a}
#studio button.danger{color:#ff8d82}
#studio button.link{background:none;border:0;padding:0;color:#7fb6ff;font-size:10.5px;flex:none}
#studio input:not([type]),#studio select,#studio textarea{background:#191919;border:1px solid #343434;border-radius:8px;padding:7px 8px;width:100%;outline:none;-webkit-user-select:text;user-select:text}
#studio textarea{resize:vertical;display:block}
#studio input:focus,#studio select:focus,#studio textarea:focus{border-color:#4da3ff}
#studio input[type=range]{width:100%;accent-color:#e9e6e0;margin:0 0 4px}
#studio .chk{margin:0;gap:6px;justify-content:flex-start;color:#e9e6e0}
#studio .sw{width:14px;height:18px;border-radius:2px;flex:none;border:1px solid rgba(255,255,255,.15)}
#studio .papers{display:flex;gap:6px;flex-wrap:wrap}
#studio .paperbtn{width:32px;height:32px;padding:0;border-radius:6px;border:1px solid #444;flex:none}
#studio .paperbtn.pp-kraft{background:#b08f62 var(--tex-fiber)}#studio .paperbtn.pp-cream{background:#ece3cf var(--tex-fiber)}#studio .paperbtn.pp-news{background:#d6d3ca var(--tex-grain)}#studio .paperbtn.pp-black{background:#1b1b1b var(--tex-grain)}#studio .paperbtn.pp-red{background:#d92a1c var(--tex-grain)}#studio .paperbtn.pp-vellum{background:rgba(236,236,230,.5)}#studio .paperbtn.pp-grid{background-color:#f4f2ea;background-image:linear-gradient(rgba(60,110,160,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,160,.35) 1px,transparent 1px);background-size:8px 8px}
#studio .nav span{text-align:center;flex:3}
#studio .nav small{color:#77746e}
#studio .nav button{flex:none;width:36px}
#studio .layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#studio .layouts button{flex-direction:column;padding:8px 4px 6px;gap:5px}
#studio .layouts em{font-style:normal;font-size:10px;color:#9a968f}
.lt{position:relative;width:24px;height:32px;background:#f2efe9;display:block;border-radius:1px}
.lt.wide{width:48px;background:linear-gradient(to right,#f2efe9 49%,#999 49%,#999 51%,#f2efe9 51%)}
.lt i{position:absolute;background:#7c7a75}
#studio .hint{color:#8d8a84;line-height:1.5;font-size:11.5px;margin:10px 0}
#studio code{background:#262626;padding:1px 4px;border-radius:4px;font-size:11px}
.cp-sv{position:relative;height:120px;border-radius:8px;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--h,0) 100% 50%)}
.cp-sv i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
#studio input.cp-h{-webkit-appearance:none;appearance:none;height:12px;border-radius:6px;margin:10px 0 8px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-h::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #333;cursor:pointer}
.cp-row{display:flex;gap:8px;align-items:center}
#studio input.cp-hex{width:82px;flex:none;font-family:'Space Mono',monospace;font-size:11px}
.cp-sw{display:flex;gap:4px;flex-wrap:wrap}
.cp-sw b{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer}

.owner-only{display:none!important}
body.owner .owner-only{display:grid!important}
body:not(.owner) #toolbar .sep.owner-only{display:none!important}
body.owner #toolbar .sep.owner-only{display:block!important}

/* ================= base clara ================= */
html,body{background:#fff}
#table{background:transparent;z-index:1}
#masthead{position:fixed;top:0;left:0;right:0;padding:22px 16px 0;text-align:center;pointer-events:none;z-index:0;color:#111}
#masthead h1{margin:0;font:400 clamp(44px,7vw,92px)/1 'Instrument Serif','Times New Roman',serif;letter-spacing:.05em}
#masthead h1 span{display:inline-block;opacity:0;transform:translateY(.5em) rotate(10deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .7s}
#masthead.in h1 span{opacity:1;transform:none}
#masthead.mess h1 span{transform:translate(var(--mx),var(--my)) rotate(var(--mr))}
#masthead p{margin:8px 0 0;min-height:1.3em;font:italic 400 clamp(15px,1.5vw,21px)/1.3 'Instrument Serif','Times New Roman',serif;color:#3a3a3a;letter-spacing:.02em}
#masthead .dots{display:inline-block;width:9ch;text-align:left}
body.studio #masthead{right:320px}
.sheet{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3)) drop-shadow(0 5px 12px rgba(0,0,0,.16))}
.sheet.lift{filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 16px 26px rgba(0,0,0,.25))}
.sheet.tucked{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.sheet.selected{filter:drop-shadow(0 0 1.5px #4da3ff) drop-shadow(0 0 5px #4da3ff)}
.msh{box-shadow:0 1px 3px rgba(0,0,0,.28),0 10px 30px rgba(0,0,0,.2)}
#hint{color:#9a9a9a}
#toast{background:#111;color:#fff}
#toolbar{background:rgba(255,255,255,.92);border:1px solid #e3e3e3;box-shadow:0 6px 24px rgba(0,0,0,.08)}
#toolbar button{color:#333}
#toolbar button:hover{background:#efefef;color:#000}
#toolbar button.on{background:#111;color:#fff}
#toolbar button:disabled{opacity:.28;cursor:default;background:transparent}
#toolbar .sep{background:#dcdcdc}
#toolbar button::after{background:#111;color:#fff}

/* ================= refinamento ================= */
#masthead{padding-top:26px;will-change:transform}
#masthead h1{font-size:clamp(40px,5.6vw,78px);letter-spacing:.08em}
#masthead p{margin-top:10px;font-size:clamp(14px,1.25vw,18px);color:#555}
#hint{bottom:78px;font-size:10px;letter-spacing:.24em;color:#a8a8a8}
#toolbar{bottom:18px;padding:4px;gap:2px;border-radius:13px;border-color:#ececec;box-shadow:0 2px 14px rgba(0,0,0,.06)}
#toolbar button{width:36px;height:36px;border-radius:9px;color:#444}
#toolbar button svg{width:18px;height:18px;stroke-width:1.5}
#toolbar .sep{height:18px;margin:0 3px;background:#e6e6e6}
.msh{box-shadow:0 1px 2px rgba(0,0,0,.22),0 14px 40px rgba(0,0,0,.14)}
#hint{white-space:nowrap}

/* ================= fontes do título ================= */
/* GC Godthem é uma fonte paga: usa a instalada no computador ou o arquivo em fonts/, senão cai na Fredoka */
@font-face{font-family:'GC Godthem';font-weight:100 900;font-display:swap;src:local('GC Godthem Semi Bold'),local('GCGodthem-SemiBold'),url('fonts/GCGodthem-SemiBold.otf') format('opentype')}
#masthead{padding-top:18px}
#masthead h1{font:600 clamp(64px,11vw,176px)/.95 'GC Godthem','Fredoka',sans-serif;letter-spacing:-.035em}
#masthead p{display:inline-block;position:relative;margin:6px 0 0;font:400 clamp(16px,1.7vw,26px)/1.2 'Arial Narrow','Archivo Narrow',Arial,sans-serif;font-style:normal;letter-spacing:0;color:#111}
#masthead .dots{position:absolute;left:100%;top:0;width:auto;white-space:nowrap}
#masthead p{margin-top:.9em}

/* título: entra desfocado e vai ganhando nitidez, letra a letra */
#masthead h1 span{opacity:0;transform:none;filter:blur(.3em);transition:filter 2.2s cubic-bezier(.25,.6,.2,1),opacity 1.3s ease-out}
#masthead.in h1 span{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){#masthead h1 span{transition:none;filter:none;opacity:1}}

/* estúdio: campo numérico ao lado dos controles deslizantes */
#studio .numrow input[type=range]{flex:1;margin:0}
#studio .numrow input[type=number]{flex:none;width:64px;background:#191919;border:1px solid #343434;border-radius:8px;padding:6px 6px;color:inherit;font:inherit;outline:none;-webkit-user-select:text;user-select:text}
#studio .numrow input[type=number]:focus{border-color:#4da3ff}

/* ================= menu vertical à esquerda ================= */
#toolbar{left:14px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}
body.studio #toolbar{left:14px}
#toolbar .sep{width:18px;height:1px;margin:3px 0}
#toolbar button::after{bottom:auto;top:50%;left:calc(100% + 10px);transform:translateY(-50%)}
#hint{bottom:20px}
body[data-tool=punch] #table{cursor:crosshair}
#shapes{position:absolute;left:calc(100% + 8px);top:0;display:none;gap:2px;padding:4px;background:rgba(255,255,255,.96);border:1px solid #ececec;border-radius:13px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
body[data-tool=punch] #shapes{display:flex}
#shapes button::after{left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%)}
@media (max-height:640px){#toolbar button{width:30px;height:30px}#toolbar button svg{width:16px;height:16px}#toolbar .sep{margin:1px 0}}

/* ================= mesa fixa e guias ================= */
.tablerect{position:absolute;pointer-events:none;display:none;border:2px dashed rgba(0,0,0,.16);border-radius:6px}
.tablerect i{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed rgba(0,0,0,.1)}
body.studio .tablerect{display:block}
#snap{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:41}
#snap line{stroke:#ff2d8a;stroke-width:1}
#snap line.c{stroke-width:1.5;stroke-dasharray:5 4}
#snap line.g{stroke:#ff2d8a;stroke-width:2}
#studio button:disabled{opacity:.4;cursor:default}

/* ================= recortes da biblioteca ================= */
.cut{position:absolute;inset:0}
.cut img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
#lib{position:fixed;inset:0;z-index:45;pointer-events:none}
.lib-it{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:grab;pointer-events:auto;will-change:transform;touch-action:none}
.lib-it img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.18));transition:transform .18s}
#lib.open .lib-it img{filter:drop-shadow(0 4px 9px rgba(0,0,0,.2))}
#lib.open .lib-it:hover img{transform:scale(1.14) rotate(-2deg)}

/* ================= mesa fixa: nada passa por cima do título ================= */
#table{top:var(--mast,0px);cursor:default}
body.zoomed #table{cursor:grab}
body.zoomed #table.panning{cursor:grabbing}
body[data-tool=tear] #table,body[data-tool=punch] #table{cursor:crosshair}
body[data-tool=glue] #table{cursor:copy}
body[data-tool=rotate] #table{cursor:alias}

/* ================= coluna da esquerda: ferramentas + impressora ================= */
#side{position:fixed;left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:10px;z-index:50}
#side #toolbar{position:relative;left:auto;top:auto;transform:none}
#pressbar{display:flex;flex-direction:column;gap:2px;padding:4px;background:rgba(255,255,255,.92);border:1px solid #ececec;border-radius:13px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
#pressbar button{width:62px;padding:8px 2px 7px;border:0;border-radius:9px;background:transparent;color:#444;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
#pressbar button svg{width:19px;height:19px;stroke-width:1.5}
#pressbar button span{font:400 9px/1.15 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-align:center}
#pressbar button:hover{background:#efefef;color:#000}
#pressbar button.on{background:#111;color:#fff}
body.picking #table{cursor:copy}
@media (max-height:720px){#toolbar button{width:30px;height:30px}#toolbar button svg{width:16px;height:16px}#toolbar .sep{margin:1px 0}#pressbar button{padding:5px 2px}}

/* ================= impressora digital e coleção ================= */
.ovl{position:fixed;inset:0;z-index:80;color:#111;-webkit-user-select:none;user-select:none}
.ovl[hidden]{display:none}
.ovl h2{margin:0;font:600 34px/1 'GC Godthem','Fredoka',sans-serif;letter-spacing:-.03em}
.pr-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;color:#111;cursor:pointer}
.pr-x:hover{background:#f0f0f0}
.pr-scale{position:absolute;left:0;top:0;transform-origin:0 0}
#press{display:grid;place-items:center;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#press[hidden]{display:none}
.pr-card{position:relative;width:min(640px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;background:#fff;border:1px solid #ececec;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.13);padding:26px 28px 22px;text-align:center}
.pr-sub{margin:8px 0 0;font:400 15px/1.2 'Arial Narrow','Archivo Narrow',Arial,sans-serif;color:#666}
.pr-slot{position:relative;z-index:2;height:12px;width:min(92%,600px);margin:20px auto 0;border-radius:7px;background:#111;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.pr-stage{overflow:hidden;display:flex;justify-content:center;padding:0 0 26px;margin-top:-4px}
.pr-mag{position:relative;flex:none;cursor:pointer;animation:prOut 1.2s cubic-bezier(.2,.8,.2,1) both}
.printing .pr-mag{animation:prIn .8s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes prOut{from{transform:translateY(-104%)}to{transform:none}}
@keyframes prIn{to{transform:translateY(-110%)}}
.pr-card label{display:block;margin:2px 0 8px;font:400 12px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#111}
.pr-card textarea{display:block;width:100%;resize:none;border:1px solid #111;border-radius:12px;padding:11px 14px;background:#fff;outline:none;font:400 18px/1.25 'Arial Narrow','Archivo Narrow',Arial,sans-serif;color:#111;-webkit-user-select:text;user-select:text}
.pr-card textarea:focus{box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.pr-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:14px}
.pr-actions button{border:0;border-radius:99px;padding:10px 18px;cursor:pointer;font:400 14px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.pr-actions svg{width:17px;height:17px}
.pr-cancel{background:transparent;color:#666}.pr-cancel:hover{color:#000}
.pr-go{background:#111;color:#fff}.pr-go:hover{background:#000}
#gallery{background:#fff;overflow:auto;padding:34px 24px 70px;text-align:center}
#gallery h2{font-size:clamp(40px,6.5vw,92px)}
#gallery header p{margin:12px 0 0;font:400 clamp(15px,1.5vw,20px)/1.2 'Arial Narrow','Archivo Narrow',Arial,sans-serif}
#gallery .pr-x{position:fixed;right:18px;top:16px}
#gallery footer{margin-top:50px;font:400 12px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#aaa}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:48px 26px;max-width:1180px;margin:46px auto 0;justify-items:center;align-items:end}
.gl-card{margin:0;cursor:pointer}
.gl-mag{position:relative;margin:0 auto;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.gl-card:hover .gl-mag{transform:translateY(-7px) rotate(-1.5deg)}
.gl-note{margin:16px auto 4px;max-width:230px;overflow-wrap:anywhere;white-space:pre-wrap;font:400 18px/1.2 'Arial Narrow','Archivo Narrow',Arial,sans-serif}
.gl-note.none{color:#bbb}
#gallery time{font:400 11px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#999}
.gl-del{display:block;margin:8px auto 0;border:0;background:none;color:#c0392b;font-size:11px;cursor:pointer;text-decoration:underline}
.gl-empty{grid-column:1/-1;margin:60px 0;font:400 20px/1.4 'Arial Narrow','Archivo Narrow',Arial,sans-serif;color:#888}
#gallery.viewing .gl-grid,#gallery.viewing header p,#gallery.viewing footer{display:none}
.gl-view{margin-top:22px}
.gl-big{position:relative;margin:22px auto 6px;cursor:pointer}
.gl-view .gl-note{max-width:560px;font-size:22px}
.gl-back{border:1px solid #111;border-radius:99px;background:#fff;padding:9px 16px;cursor:pointer;font:400 13px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#111}
.gl-back:hover{background:#111;color:#fff}
.gl-tip{margin:14px 0 0;font:400 11px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#aaa}
/* revista fechada fica centralizada dentro da impressora e da coleção */
.pr-mag,.gl-big{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.pr-mag:has(.mag.at-front),.gl-big:has(.mag.at-front){translate:-25% 0}
.pr-mag:has(.mag.at-back),.gl-big:has(.mag.at-back){translate:25% 0}

/* setinhas de "há mais mesa" */
body::before,body::after{content:'';position:fixed;left:50%;width:9px;height:9px;margin-left:-5px;border:solid #b5b5b5;border-width:0 1.5px 1.5px 0;z-index:44;pointer-events:none;opacity:0;transition:opacity .3s}
body::after{bottom:44px;transform:rotate(45deg)}
body::before{top:calc(var(--mast,0px) + 16px);transform:rotate(-135deg)}
body.more-down::after,body.more-up::before{opacity:1}

/* seleção múltipla */
.multi{filter:drop-shadow(0 0 1.5px #4da3ff) drop-shadow(0 0 6px #4da3ff)!important}
#marquee{position:fixed;z-index:42;pointer-events:none;border:1px solid #4da3ff;background:rgba(77,163,255,.1);border-radius:2px}
/* nome da gaveta, de lado, quase transparente */
.lib-label{position:absolute;left:0;top:0;white-space:nowrap;writing-mode:vertical-rl;font:400 10px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.22);pointer-events:none}
/* dica fixa e discreta no rodapé */
#hint,#hint.off{opacity:1;bottom:16px;font:400 9px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.3em;color:#c2c2c2;z-index:2}
body.studio #hint{opacity:0}
/* subtítulo alinhado ao "o" do título */
#masthead p{display:block;width:max-content;margin-left:var(--subx,50%);text-align:left}

/* subtítulo como assinatura: colado no título, terminando junto com o logo */
#masthead p{margin-top:calc(clamp(64px,11vw,176px) * -.07);font-size:max(12px,calc(clamp(64px,11vw,176px) * .135));letter-spacing:.01em;white-space:nowrap}
#masthead .dots{position:static;display:inline-block;width:2.2em;text-align:left}

/* frase de lado junto ao menu da esquerda, no mesmo tom da gaveta de recortes */
#toolbar .side-label{position:absolute;left:calc(100% + 13px);top:50%;transform:translateY(-50%) rotate(180deg);white-space:nowrap;writing-mode:vertical-rl;font:400 10px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.22);pointer-events:none;transition:opacity .2s}
body[data-tool=punch] #toolbar .side-label{opacity:0}

/* × para tirar da mesa um recorte da gaveta */
#cutx{position:fixed;z-index:43;width:24px;height:24px;padding:0;border:1px solid #e3e3e3;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 2px 8px rgba(0,0,0,.14);color:#111;font:400 17px/1 Arial,sans-serif;cursor:pointer;display:grid;place-items:center}
#cutx[hidden]{display:none}
#cutx:hover{background:#111;color:#fff;border-color:#111}

#gallery footer p{margin:0 0 12px}
#gallery footer .gl-come{font-size:clamp(15px,1.5vw,20px);letter-spacing:0;text-transform:none;color:#111}

/* ================= leveza ================= */
.lib-it{width:100px;height:100px;transform-origin:50% 50%}
.sheet.lift,.mag.lift{will-change:transform}
#toolbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)}

/* ================= celular ================= */
.mag.settle{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.lib-zone{display:none}
body.mob .lib-zone{display:block;position:absolute;right:0;top:18%;bottom:22%;width:54px;pointer-events:auto;touch-action:none}
body.mob #lib.open .lib-zone{width:150px}
body.mob .lib-label{font-size:8px;letter-spacing:.24em}
body.mob #side{left:0;right:0;top:auto;bottom:8px;transform:none;align-items:center;flex-direction:column-reverse;gap:6px;padding:0 8px;pointer-events:none}
body.mob #side>*{pointer-events:auto}
body.mob #side #toolbar{flex-direction:row;max-width:100%;overflow-x:auto;scrollbar-width:none;gap:1px}
body.mob #side #toolbar::-webkit-scrollbar{display:none}
body.mob #toolbar button{flex:none;width:38px;height:38px}
body.mob #toolbar .sep{flex:none;width:1px;height:18px;margin:0 3px}
body.mob #toolbar button::after,body.mob #toolbar .side-label{display:none}
body.mob #shapes{position:fixed;left:50%;top:auto!important;bottom:112px;transform:translateX(-50%)}
body.mob #pressbar{flex-direction:row;gap:2px;padding:3px}
body.mob #pressbar button{width:auto;flex-direction:row;gap:7px;padding:7px 11px}
body.mob #pressbar button svg{width:16px;height:16px}
body.mob #pressbar button span{white-space:nowrap;font-size:9px}
body.mob #hint{display:none}
body.mob::after{bottom:122px}
body.mob #cutx{width:30px;height:30px;font-size:20px}
body.mob #toast{top:auto;bottom:126px;max-width:calc(100vw - 32px);text-align:center}

/* folha do miolo que só guarda recortes: as páginas não são desenhadas, os recortes sim */
.leaf.ghost>.face{display:none}

/* aviso de boas-vindas no celular */
#mobnote{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:28px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .45s;cursor:pointer;touch-action:none}
#mobnote.out{opacity:0;pointer-events:none}
.mn-box{max-width:330px;text-align:center;color:#111;font:400 19px/1.3 'Arial Narrow','Archivo Narrow',Arial,sans-serif;animation:mnIn .9s cubic-bezier(.2,.8,.2,1) both}
.mn-box p{margin:0 0 14px}
.mn-t{font:600 46px/1 'GC Godthem','Fredoka',sans-serif!important;letter-spacing:-.03em;margin-bottom:18px!important}
.mn-go{margin-top:26px!important;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#888}
@keyframes mnIn{from{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}

/* seta de giro nas pontas dos recortes */
body.rot-hover #table,body.rot-hover #table *,body.rotating,body.rotating *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 13a7 7 0 0 1 12.2-4.7' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M20 13a7 7 0 0 1-12.2 4.7' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M18.6 4.6v4h-4M7.4 21.4v-4h4' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M6 13a7 7 0 0 1 12.2-4.7' stroke='%23111' stroke-width='1.6'/%3E%3Cpath d='M20 13a7 7 0 0 1-12.2 4.7' stroke='%23111' stroke-width='1.6'/%3E%3Cpath d='M18.6 4.6v4h-4M7.4 21.4v-4h4' stroke='%23111' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 13 13, alias!important}

/* ---------- aprovação da coleção (Estúdio) ---------- */
#moder{background:#fff;overflow:auto;padding:34px 24px 70px;text-align:center;z-index:90}
#moder h2{font-size:clamp(34px,5vw,64px)}
#moder header p{margin:10px 0 0;font:400 16px/1.2 'Arial Narrow','Archivo Narrow',Arial,sans-serif;color:#666}
#moder .pr-x{position:fixed;right:18px;top:16px}
#moder h3{margin:46px 0 0;font:400 12px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#999}
#moder .gl-grid{margin-top:26px}
#moder time{font:400 11px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#999}
.md-login{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:end;margin:26px auto 0;font:400 12px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#888}
.md-login label{display:flex;flex-direction:column;gap:6px;text-align:left}
.md-login input{width:240px;max-width:70vw;padding:9px 10px;border:1px solid #ccc;border-radius:6px;font:400 15px/1 Arial,sans-serif;letter-spacing:0;text-transform:none;color:#111}
.md-login button,.md-acts button{border:1px solid #111;border-radius:99px;background:#fff;padding:9px 16px;cursor:pointer;font:400 13px/1 'Arial Narrow','Archivo Narrow',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#111}
.md-login button:hover,.md-acts button:hover{background:#111;color:#fff}
.md-msg{margin:22px 0 0;font:400 17px/1.3 'Arial Narrow','Archivo Narrow',Arial,sans-serif}
.md-acts{display:flex;gap:6px;justify-content:center;margin-top:10px}
.md-acts button{padding:7px 11px;font-size:11px}
.md-acts .md-approve{background:#111;color:#fff}
.md-acts .md-delete{border-color:#c0392b;color:#c0392b}
.md-acts .md-delete:hover{background:#c0392b;color:#fff}
.md-acts button:disabled{opacity:.4;pointer-events:none}
#moder.viewing .md-list,#moder.viewing .md-login,#moder.viewing .md-msg,#moder.viewing header p{display:none}