#book .size-chooser{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:clamp(24px,4vw,54px);align-items:stretch}
#book .size-options-label{margin:0 0 14px;font-size:13px;font-weight:750;letter-spacing:.01em}
#book .size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#book .size-card{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:118px;padding:17px 20px;border:1.5px solid #dcd7df;border-radius:17px;background:#fff;box-shadow:none;text-align:left;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
#book .size-card b{font-size:20px;letter-spacing:-.035em;line-height:1.2}
#book .size-card em{font-size:11px;font-weight:500;color:#625d67}
#book .size-card small{font-size:11px;font-weight:750;color:#312b35}
#book .size-card:hover{border-color:#8f72bd}
#book .size-card.selected{border:2px solid #7c55b3;background:#f4effc;box-shadow:0 3px 0 #b79adb}
#book .size-card:focus-visible{outline:3px solid #8565b7;outline-offset:3px}
#book .size-card{position:relative}
#book .size-shape{position:absolute;right:16px;top:16px;display:block;border:2px solid #8b77a1;border-radius:2px 4px 4px 2px;background:#eee6f8;box-shadow:-3px 3px 0 #d9cde7,0 4px 7px #3b2d3f1f;transform:rotate(-4deg);pointer-events:none}
#book .size-shape::before{content:'';position:absolute;inset:2px auto 2px 2px;width:2px;background:#a897ba}
#book .size-shape-8x6{width:32px;height:24px}
#book .size-shape-8x8{width:32px;height:32px}
#book .size-shape-12x8{width:44px;height:29px}
#book .size-shape-11x11{width:39px;height:39px}
#book .size-card.selected .size-shape{border-color:#7149a4;background:#e4d5f7;box-shadow:-3px 3px 0 #b99ad7,0 4px 7px #3b2d3f1f}
#book .size-reference{margin:0;height:331px;padding:20px 18px 15px;border:1px solid #e5e0e7;border-radius:20px;background:linear-gradient(145deg,#f6f2f8,#faf9fb);min-width:0}
#book .size-reference-stage{position:relative;display:grid;place-items:center;height:264px;min-height:0;padding:31px 68px 35px 22px}
#book .size-reference-book{position:relative;width:auto;height:auto;max-width:100%;max-height:230px;aspect-ratio:var(--reference-ratio);background:#e9dfdb;box-shadow:-7px 8px 0 #d7cec8,0 15px 23px #3b2d3f30;border:5px solid #fff;border-radius:3px 8px 8px 3px;overflow:hidden}
#book .size-reference-book img{display:block;width:100%;height:100%;object-fit:cover}
#book .size-reference-book::after{content:'';position:absolute;inset:0 auto 0 0;width:10px;background:linear-gradient(90deg,#372e3b55,transparent)}
#book .size-reference[data-orientation="portrait"] .size-reference-book{height:214px}
#book .size-reference[data-orientation="square"] .size-reference-book{height:194px}
#book .size-reference[data-orientation="landscape"] .size-reference-book{height:165px}
#book .size-reference-width{position:absolute;left:30px;right:68px;top:4px;display:flex;align-items:center;gap:8px;color:#4f4755;font-size:10px;font-weight:700;white-space:nowrap}
#book .size-reference-width::before,#book .size-reference-width::after{content:'';height:1px;flex:1;background:#8f8596}
#book .size-reference-height{position:absolute;right:0;top:26px;bottom:28px;display:flex;align-items:center;justify-content:center;width:60px;writing-mode:vertical-rl;color:#4f4755;font-size:10px;font-weight:700;white-space:nowrap}
#book .size-reference-height::before,#book .size-reference-height::after{content:'';width:1px;flex:1;background:#8f8596;margin:8px 0}
#book .size-reference figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;min-height:30px;border-top:1px solid #e6dfe9;padding-top:12px}
#book .size-reference figcaption strong{font-size:13px}
#book .size-reference figcaption span{color:#756c79;font-size:10px;text-align:right}
#book .size-reference .size-reference-book{width:var(--reference-width,144px);height:auto;max-height:none}
@media(max-width:767px){
  #book .size-chooser{grid-template-columns:1fr;gap:18px}
  #book .panel-heading{margin-bottom:20px}
  #book .size-options-label{font-size:11px;margin-bottom:10px}
  #book .size-grid{gap:9px}
  #book .size-card{min-height:82px;padding:11px 13px;border-radius:13px}
  #book .size-shape{right:12px;top:12px}
  #book .size-card b{font-size:16px}
  #book .size-card em,#book .size-card small{font-size:9px}
  #book .size-reference{height:292px;padding:11px 13px 12px;border-radius:16px}
  #book .size-reference-stage{height:224px;min-height:0;padding:25px 60px 23px 20px}
  #book .size-reference .size-reference-book{width:var(--reference-width-mobile,128px)}
  #book .size-reference[data-orientation="portrait"] .size-reference-book{height:154px}
  #book .size-reference[data-orientation="square"] .size-reference-book{height:139px}
  #book .size-reference[data-orientation="landscape"] .size-reference-book{height:118px}
  #book .size-reference-width{left:20px;right:60px;top:1px;font-size:9px}
  #book .size-reference-height{width:54px;top:19px;bottom:18px;font-size:9px}
  #book .size-reference figcaption{min-height:43px;padding-top:9px}
  #book .size-reference figcaption span{max-width:190px;font-size:8px}
}

/* Match the editor and its page overview to the chosen physical format. */
#pages .page-thumb-canvas,#pages .layout-mini,#pages .background-mini,#pages .frame-mini{aspect-ratio:var(--album-page-ratio,1/1)!important}
.book-pages-dialog .book-page-face,.book-pages-dialog .book-inside-cover{aspect-ratio:var(--album-page-ratio,1/1)}
@media(min-width:768px){
  body.studio-immersive #pages .spread{width:min(100%,calc((100dvh - 220px) * var(--album-spread-width-over-height,2)))!important;aspect-ratio:var(--album-spread-ratio,2/1)!important}
  body.studio-immersive #pages .album-page{aspect-ratio:var(--album-page-ratio,1/1)!important}
}
@media(max-width:767px){
  #pages .spread,body.studio-immersive #pages .spread{aspect-ratio:var(--album-page-ratio,1/1)!important;height:auto!important;max-height:none!important}
  #pages .album-page,body.studio-immersive #pages .album-page{aspect-ratio:var(--album-page-ratio,1/1)!important}
  body.studio-immersive #pages .spread{width:min(calc(100vw - 28px),calc((100dvh - 245px) * var(--album-width-over-height,1)))!important}
}
#book .size-reference .size-reference-book{height:auto!important}