@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Mono:wght@500;600&display=swap');
#quote-book{--black:#050505;--cream:#f3eadb;--orange:#c95437}
#quote-book *{box-sizing:border-box}
#quote-book{margin:0;min-height:100%;background:var(--black);color:var(--cream);font-family:"IBM Plex Mono",monospace}
#quote-book{min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#quote-book .app{width:min(100%,760px);min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px}
#quote-book .top{width:min(100%,620px);display:flex;justify-content:space-between;margin-bottom:12px;font-size:8px;letter-spacing:.16em}
#quote-book .stage{width:min(100%,620px);perspective:1500px}
#quote-book .book{width:100%;aspect-ratio:1;border-radius:28px;position:relative;transform-style:preserve-3d;overflow:hidden;box-shadow:0 25px 80px #000}
#quote-book .qb-page{position:absolute;inset:0;padding:7.5%;border-radius:28px;display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden}
#quote-book .cream{background:var(--cream);color:var(--orange)}
#quote-book .orange{background:var(--orange);color:var(--cream)}
#quote-book .qb-page:after{content:"";position:absolute;right:-15%;top:-10%;width:42%;height:42%;border:1px solid currentColor;border-radius:50%;opacity:.12}
#quote-book .meta,#quote-book .sub,#quote-book .quote,#quote-book .rule,#quote-book .foot{position:relative;z-index:2}
#quote-book .meta{display:flex;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
#quote-book .sub{margin-top:32px;font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
#quote-book .qwrap{flex:1;display:flex;align-items:center}
#quote-book .quote{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(36px,6vw,68px);line-height:1.04;letter-spacing:-.025em;margin:0;font-weight:700}
#quote-book .rule{width:70px;height:3px;background:currentColor;margin-top:20px}
#quote-book .foot{display:flex;justify-content:space-between;align-items:flex-end}
#quote-book .brand{font-size:8px;line-height:1.6;letter-spacing:.12em;font-weight:600}
#quote-book .qr{width:56px;height:56px;background:#fff;padding:3px;object-fit:contain;border-radius:2px}
#quote-book .controls{width:min(100%,620px);display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
#quote-book button{height:45px;border-radius:999px;font:600 8px "IBM Plex Mono";letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#quote-book .primary{background:var(--orange);color:var(--cream);border:1px solid var(--orange)}
#quote-book .secondary{background:transparent;color:var(--cream);border:1px solid #f3eadb99}
#quote-book .topic-row{width:min(100%,620px);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:11px}
#quote-book .topic-row label{font-size:7px;font-weight:600;letter-spacing:.14em;white-space:nowrap;opacity:.65}
#quote-book #qb-topicSelect{width:100%;height:42px;border:1px solid #f3eadb99;border-radius:999px;background:#090909;color:var(--cream);padding:0 15px;font:600 8px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;outline:none}
#quote-book #qb-topicSelect:focus{border-color:var(--orange)}
#quote-book #qb-topicSelect option{background:#111;color:var(--cream)}
#quote-book .hint{font-size:6px;letter-spacing:.12em;opacity:.5;margin-top:10px;text-transform:uppercase}
@keyframes turnOut{0%{transform:rotateY(0);transform-origin:right center}45%{transform:rotateY(-78deg)}100%{transform:rotateY(-180deg)}}
@keyframes turnIn{0%{transform:rotateY(180deg);transform-origin:right center}45%{transform:rotateY(78deg)}100%{transform:rotateY(0)}}
#quote-book .turnOut{animation:turnOut .65s cubic-bezier(.62,.02,.25,1) both}
#quote-book .turnIn{animation:turnIn .65s cubic-bezier(.62,.02,.25,1) both}
@media(max-width:600px){#quote-book .topic-row{grid-template-columns:1fr;gap:6px;margin-top:9px}
#quote-book .topic-row label{font-size:6px}
#quote-book #qb-topicSelect{height:40px;font-size:7px}
#quote-book .app{padding:12px}
#quote-book .qb-page{padding:8.5%}
#quote-book .book{border-radius:24px}
#quote-book .meta,#quote-book .sub{font-size:8px}
#quote-book .sub{margin-top:24px}
#quote-book .quote{font-size:clamp(30px,8.4vw,49px)}
#quote-book .brand{font-size:6px}
#quote-book .qr{width:48px;height:48px}
#quote-book button{height:43px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){#quote-book .turnOut,#quote-book .turnIn{animation:none}
}
#quote-book{overflow:auto!important}
#quote-book{align-items:flex-start!important}
#quote-book .app{
  min-height:auto!important;
  width:min(100%,960px)!important;
  padding:28px 16px 44px!important;
  justify-content:flex-start!important;
}
#quote-book .top,#quote-book .stage,#quote-book .controls,#quote-book .topic-row{
  width:min(92vw,700px)!important;
}
#quote-book .hint{margin-bottom:8px}
@media(min-width:761px){#quote-book .app{padding-top:32px!important}
#quote-book .top,#quote-book .stage,#quote-book .controls,#quote-book .topic-row{
    width:min(78vw,700px)!important;
  }
#quote-book .book{
    border-radius:30px!important;
    box-shadow:0 28px 90px rgba(0,0,0,.62)!important;
  }
#quote-book .qb-page{padding:7.8%!important}
#quote-book .quote{
    font-size:clamp(44px,4.9vw,70px)!important;
  }
#quote-book .meta{font-size:10px!important}
#quote-book .sub{font-size:9px!important}
#quote-book button{height:48px!important;font-size:8px!important}
#quote-book #qb-topicSelect{height:46px!important}
}
@media(min-width:1200px){#quote-book .top,#quote-book .stage,#quote-book .controls,#quote-book .topic-row{
    width:min(72vw,730px)!important;
  }
}

#quote-book{min-height:0;overflow:visible!important;width:100%;font-family:"IBM Plex Mono",monospace}
#quote-book .app{margin:auto;min-height:0!important;width:100%!important}
#quote-book .qb-page{margin:0;min-height:0;scroll-margin:0}
#quote-book .top,#quote-book .stage,#quote-book .controls,#quote-book .topic-row{width:min(100%,730px)!important}
#quote-book button{color:var(--cream)}
#quote-book .primary{color:var(--cream)}
#quote-book .foot{flex-direction:row;align-items:flex-end;gap:0;width:100%}
/* A fixed centre pivot and two completed half-turns avoid the old mid-rotation jump. */
#quote-book .book{transform-origin:center center;transform-style:flat;backface-visibility:hidden;touch-action:pan-y}
#quote-book[aria-busy="true"] .book{will-change:transform}

#quote-book .book{background:transparent}
#quote-book .qb-page{border-radius:inherit}