html{background:#333;font-family:sans-serif;color:#eee}a{color:#eee}.desk{padding:10%;overflow:hidden;background:repeating-linear-gradient(100deg,#faddab,#faddab 1.5%,#e7b870,#e7b870,#faddab 3%);margin:1rem 0}.wrap{--HEIGHT: 400;--WIDTH: 300;aspect-ratio:calc(1 / var(--HEIGHT) * var(--WIDTH) * 2);container-type:size;--scale-px: calc(100cqw / var(--WIDTH) * .5);position:relative}.item-layer{position:absolute;height:calc(var(--scale-px, 1px) * var(--HEIGHT));width:calc(var(--scale-px, 1px) * var(--WIDTH));left:0;top:0;pointer-events:none}.item{height:calc(var(--scale-px, 1px) * var(--HEIGHT));width:calc(var(--scale-px, 1px) * var(--WIDTH));background:#4f4fbb;color:#fff;box-sizing:border-box;padding:calc(100% / var(--HEIGHT) * 32);pointer-events:all}.layer-flip-back .item,.layer-under .item{background:#e7e7e7;color:#333}.sample-book2 .item-layer,.sample-book4 .item-layer,.sample-book6 .item-layer{left:calc(var(--scale-px, 1px) * var(--WIDTH))}.layer-flip-front .item{font-size:calc(var(--scale-px, 1px) * 32);line-height:1.5}.layer-under .item,.layer-flip-back .item{display:flex;align-items:stretch;justify-content:stretch}.text-placeholder{flex:1 1 auto;background:repeating-linear-gradient(180deg,transparent,transparent 3.5%,#ccc 3.5%,#ccc 6.5%,transparent 6.5%,transparent 10%)}.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,auto));gap:1rem}