.fastener-icon{width:36px;height:36px;vertical-align:middle;flex:none}.binding-variants{display:flex;flex-wrap:wrap;gap:8px}.binding-variants .btn{display:flex;align-items:center;gap:5px}.binding-variants [aria-pressed=true],.binding-tabs [aria-pressed=true]{background:#ddd3a0;outline:1px solid #96885c}.binding-colors{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.binding-colors button{width:28px;height:28px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px #30291c55}.binding-colors [aria-pressed=true]{outline:2px solid #514d40;outline-offset:2px}.binding-body{overflow:auto;padding:16px 22px}.binding-preview{height:300px;display:grid;place-items:center;padding:40px;box-sizing:border-box;background:#b9aa8b12;border-radius:16px;margin:12px 0 35px}.binding-preview>.fastened-stack{width:145px;height:184px}.fastened-stack{perspective:800px;touch-action:none;user-select:none;-webkit-user-select:none}.bound-paper{position:absolute;inset:0;cursor:grab;filter:drop-shadow(1px 3px 2px #30271944);transition:transform .55s ease;transform-style:preserve-3d;touch-action:none}.bound-paper img{display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}.bound-paper.moving{transition:none;cursor:grabbing}.bound-paper.turned{filter:drop-shadow(1px 2px 3px #30271933)}.binding-pin{position:absolute;z-index:35;width:9%;min-width:16px;aspect-ratio:1;padding:0!important;border:0!important;background:none!important;filter:drop-shadow(1px 2px 1px #30271f55);transition:transform .45s ease;cursor:pointer;transform:translate(-50%,-50%)}.binding-pin svg{width:100%;height:100%}.staple .binding-pin{width:16%}.clip .binding-pin{width:14%}.binding-controls{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;white-space:nowrap;z-index:40;background:#fffcf0eb;border-radius:20px;padding:3px 6px;box-shadow:0 2px 6px #463a2422;font-size:12px}.binding-controls button{border:0;border-radius:12px;min-width:28px;height:28px;background:#e8e3d6;padding:2px 7px;cursor:pointer}.binding-controls button:disabled{opacity:.35}.binding-item{display:flex;align-items:center;gap:8px;border-bottom:1px solid #a69b7433;padding:6px}.binding-item img{width:35px;height:40px;object-fit:contain}.binding-item span{flex:1;min-width:0}.binding-item button{border:0;background:#e8e3d6;border-radius:50%;width:32px;height:32px}.binding-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 8px}.binding-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:12px}.binding-choice{padding:6px;border:1px solid #c4bba344;border-radius:8px;background:#f7f1e2;min-width:0}.binding-choice img{width:100%;height:78px;object-fit:contain}.binding-choice small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.binding-choice:disabled{opacity:.45}.binding-anchor label{display:flex;align-items:center;gap:12px;margin:8px 0}.binding-anchor input{flex:1;min-width:0}.binding-body input[type=search],.binding-body select{max-width:100%;margin:4px}.binding-mask footer{gap:8px}.binding-mask footer small{flex:1}.binding-mask footer button{flex:none}@media(prefers-reduced-motion:reduce){.bound-paper,.binding-pin{transition:none}}
.bound-paper>img{backface-visibility:hidden}.bound-paper>.bound-back{position:absolute;inset:0;transform:rotateY(180deg);filter:brightness(0) invert(.96)}.staple .bound-paper>.bound-back{transform:rotateX(180deg)}.binding-scene-plane{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:fill}.binding-preview .binding-controls{font-size:12px}
.binding-preview{height:430px;display:flex;justify-content:center;align-items:flex-end;padding:160px 40px 70px;overflow:hidden}.binding-preview .bound-paper{filter:none}.binding-preview .bound-paper>img{filter:drop-shadow(1px 3px 2px #30271944)}.binding-preview .bound-paper>.bound-back{filter:brightness(0) invert(.96) drop-shadow(1px 3px 2px #30271944)}
.bound-paper,.bound-paper.turned{filter:none}.bound-paper>img{filter:drop-shadow(1px 3px 2px #30271944)}.bound-paper>.bound-back{filter:brightness(0) invert(.96) drop-shadow(1px 3px 2px #30271944)}

/* Isolate each sheet so rotation never changes the physical stack order. */
.fastened-stack{transform-style:flat}
.binding-preview .binding-pin{touch-action:none;cursor:move;min-width:28px}
.binding-select-jump{display:block;width:100%;margin-bottom:12px}
.binding-tabs{scroll-margin-top:12px}
@media(max-width:620px){
 .binding-body{padding:12px 14px}
 .binding-preview{height:280px;padding:90px 25px 55px;margin-bottom:15px}
 .binding-preview>.fastened-stack{width:100px;height:127px}
 .binding-variants{gap:5px}.binding-variants .btn{padding:6px 9px;font-size:13px}
 .binding-colors{gap:8px;margin:10px 0}
 .binding-mask footer small{font-size:11px}
}
/* Material selection precedes hardware placement. */
.binding-body{flex:1;min-height:0}.binding-steps{display:flex;gap:8px}.binding-steps button{flex:1}.binding-steps [aria-pressed=true]{background:#ddd3a0}
.binding-material-step[hidden],.binding-place-step[hidden],.binding-anchor[hidden]{display:none!important}
.binding-hint{margin:4px 0 12px}.binding-pin-list{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.binding-pin-list [aria-pressed=true]{outline:2px solid #9d8759}
.binding-mask .binding-preview{height:320px;padding:35px 35px 45px;align-items:center;overflow:visible;margin:12px 0}
.binding-mask .binding-preview>.fastened-stack{width:180px;height:228px;cursor:crosshair}
.binding-mask .binding-preview .bound-paper{pointer-events:none}
.binding-pin.selected{outline:1px dashed #6c634d;outline-offset:4px;border-radius:8px}
.staple-fixed{position:absolute;left:0;top:0;width:100%;overflow:hidden}
.paper-fold{position:absolute;left:0;width:100%;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.25,.65,.3,1)}
.fold-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fold-face>img{position:absolute;left:0;max-height:none!important}
.fold-back{transform:rotateX(180deg);filter:brightness(0) invert(.96)}
.paper-fold>.fold-face::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#382c2010,transparent 25%,#fff8 75%,#46382410);opacity:0;transition:opacity .5s}
.moving .paper-fold>.fold-face::after{opacity:.45}
.staple-crease{position:absolute;left:0;width:100%;height:2px;background:linear-gradient(#4d3d282b,#fff9);pointer-events:none}
.moving .paper-fold{transition:none}
.binding-action{position:absolute;z-index:50;pointer-events:none;transform:translate(-50%,-50%);width:55px;height:45px;border-radius:14px;background:linear-gradient(135deg,#a8b5aa,#536c5d);box-shadow:2px 6px 9px #35271744;animation:binding-press .75s ease both}
.binding-action.staple::before{content:'';position:absolute;left:0;right:0;top:0;height:13px;border-radius:14px;background:linear-gradient(#c0cfc4,#718976);transform-origin:left center;animation:stapler-lever .75s ease both}
.binding-action.eyelet{width:36px;height:65px;border-radius:8px 8px 3px 3px;background:linear-gradient(90deg,#667170,#e0e4dc,#788381)}
.binding-action.brad{width:30px;height:25px;border-radius:45%;background:radial-gradient(ellipse at 35% 25%,#ffe8ce,#d6ad89)}
.binding-action.clip{display:none}
.placing-clip{animation:clip-slide .7s ease both}.placing-brad{animation:brad-set .75s ease both}.placing-eyelet{animation:eyelet-set .75s ease both}
@keyframes binding-press{0%{opacity:0;transform:translate(-50%,-160%) rotate(-9deg)}30%{opacity:1;transform:translate(-50%,-65%)}50%{opacity:1;transform:translate(-50%,-45%) scaleY(.88)}70%{opacity:1;transform:translate(-50%,-65%)}100%{opacity:0;transform:translate(-50%,-140%)}}
@keyframes stapler-lever{0%,100%{transform:rotate(-22deg)}45%,60%{transform:rotate(0)}}
@keyframes clip-slide{0%{opacity:0;transform:translate(-50%,-150%) rotate(-20deg)}70%{opacity:1;transform:translate(-50%,-45%) rotate(3deg)}100%{transform:translate(-50%,-50%)}}
@keyframes brad-set{0%,25%{opacity:0;transform:translate(-50%,-90%) scale(1.25)}55%{opacity:1;transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes eyelet-set{0%,35%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}60%{opacity:1;transform:translate(-50%,-50%) scale(.85)}100%{transform:translate(-50%,-50%) scale(1)}}
@media(max-width:620px){.binding-mask .binding-preview{height:260px;padding:20px}.binding-mask .binding-preview>.fastened-stack{width:155px;height:196px}.binding-mask .binding-place-center{width:100%}}
@media(prefers-reduced-motion:reduce){.paper-fold,.paper-fold>.fold-face::after{transition:none}.binding-action,.placing-clip,.placing-brad,.placing-eyelet{animation:none}.binding-action{display:none}}
@media(max-width:620px){.binding-place-step .binding-variants{flex-wrap:nowrap;overflow-x:auto;padding:3px 0}.binding-place-step .binding-variants .btn{flex:none}.binding-place-step .binding-colors{gap:7px}.binding-place-step .binding-hint{font-size:13px;line-height:1.5}}
/* Selection keeps a live stack; placement and trying the mechanism are separate modes. */
.binding-mask .binding-select-preview{height:155px;padding:12px 35px;margin:0 0 18px}
.binding-mask .binding-select-preview>.fastened-stack{width:85px;height:108px}
.binding-preview.trial .bound-paper{pointer-events:auto;cursor:grab}
.binding-preview.trial .bound-paper.turned{pointer-events:none}
.binding-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin:12px 0}
.binding-actions>.btn{flex:1;min-width:0;width:auto!important;padding:9px 8px;font-size:14px}
.binding-action.brad{background:none;box-shadow:none;border-radius:0;width:45px;height:45px}
.binding-action.brad svg{width:100%;height:100%}
.binding-action.eyelet{width:52px;height:45px;border:3px solid #f8e6d0;border-radius:22px 22px 12px 12px;background:linear-gradient(135deg,#ebbdc1,#c87f9b);box-shadow:2px 5px 7px #70504433}
.eyelet-press-heart{display:block;text-align:center;font:28px/38px sans-serif;color:#fff7e1}
.eyelet .bound-paper>img{filter:none}
.binding-preview.trial{padding-top:100px;min-height:360px}
/* Fixed papers can be returned by dragging down; the finished flap lies flat. */
.binding-preview.trial.staple .bound-paper.turned,.binding-preview.trial .staple .bound-paper.turned{pointer-events:auto}
.fold-back.paper-pattern-back{filter:none}
.binding-preview .bound-paper>.bound-back.paper-pattern-back,.bound-paper>.bound-back.paper-pattern-back{filter:drop-shadow(1px 3px 2px #30271944)}
.binding-pin-list[hidden]{display:none!important}
.binding-move-grip{position:absolute;left:calc(12px / var(--z,1));top:calc(12px / var(--z,1));width:36px;height:36px;padding:7px;transform:scale(calc(1 / var(--z,1)));transform-origin:top left;border:1px solid #c4b998;border-radius:50%;background:#fff9e7;color:#514d40;box-shadow:0 2px 5px #57472c33;touch-action:none;z-index:60;cursor:move}
.binding-move-grip .ic{width:20px;height:20px}
/* Keep the folding hierarchy in 3D; filters on its parent flatten the two faces. */
.staple .bound-paper,.staple .bound-paper.turned{filter:none;transform-style:preserve-3d}
.staple .fold-face:not(.fold-back){transform:translateZ(.05px)}
.staple .fold-back{transform:rotateX(180deg) translateZ(.05px)}
.pgv-pg.on:has(.photo-mechanism){overflow:visible;z-index:5}

/* Live tools protrude beyond the sheet; ordinary layer crops are applied by placeNode. */
.page:has(.photo-mechanism),.page:has(.photo-mechanism) .layers{overflow:visible}
/* Removed clips open a light-table view: no sheet hides another sheet. */
.clip-spread-dialog{box-sizing:border-box;width:min(1080px,96vw);max-height:94dvh;padding:24px;border:1px solid #d8cdb8;border-radius:24px;background:#f8f3e8;color:#4b493c;overflow:auto;overscroll-behavior:contain}.clip-spread-dialog::backdrop{background:#373328ad;backdrop-filter:blur(5px)}.clip-spread-dialog header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.clip-spread-dialog h2{font-size:23px;margin:0}.spread-clips{display:flex;gap:12px;flex-wrap:wrap}.spread-clips button{background:#eee5d0;border:1px dashed #b5a58b;border-radius:12px;padding:6px;cursor:pointer}.spread-clips .fastener-icon{width:40px;height:40px}.spread-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.spread-papers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;align-items:start}.spread-papers figure{min-width:0;margin:0;padding:16px;background:#eee7d7;border-radius:12px}.spread-papers img{display:block;width:100%!important;height:320px!important;object-fit:contain;filter:drop-shadow(2px 4px 3px #30271933)}.spread-papers figcaption{margin-top:12px;font-size:14px;overflow-wrap:anywhere}.binding-pin{touch-action:none}.spread-actions .btn{background:#e8dfc9;color:#494535}@media(max-width:600px){.clip-spread-dialog{padding:18px}.spread-papers{grid-template-columns:1fr}.spread-papers img{height:42dvh!important}.spread-clips button{padding:3px}.spread-actions .btn{font-size:14px;padding:10px}.clip-spread-dialog h2{font-size:20px}}