*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;mask-image:linear-gradient(to bottom,rgba(0,0,0,.76),transparent)}
.app{position:relative;z-index:1;display:grid;grid-template-rows:58px minmax(0,1fr) 66px;height:100dvh}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid var(--ka-line)}
footer{border-top:1px solid var(--ka-line);border-bottom:0}
.brand{display:flex;align-items:center;gap:9px}
.avatar{display:grid;place-items:center;width:36px;height:36px}
.pill{padding:8px 9px}
main{position:relative;min-height:0}
.slide{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:12px}
.slide.active{display:flex}
.frame{display:grid;align-items:center;gap:10px;width:min(1080px,100%);height:100%}
.two{grid-template-columns:1fr}
.center{place-items:center;text-align:center}
.stack{display:grid;gap:10px}
h1,h2,h3,p{margin:0}
.sub{max-width:820px}
.badge{display:inline-flex;width:max-content;max-width:100%;padding:8px 10px;border:1px solid var(--ka-line)}
.card{padding:14px;border:1px solid var(--ka-line)}
.list{display:grid;gap:8px}
.row{display:grid;grid-template-columns:33px 1fr;gap:9px;padding:9px;border:1px solid var(--ka-line);text-align:left}
.row span{display:block;margin-top:2px}
.tiles{display:grid;grid-template-columns:1fr;gap:8px}
.tile{padding:12px;border:1px solid var(--ka-line)}
.tile b{display:block;margin:3px 0}
.compare{display:grid;grid-template-columns:1fr;gap:8px}
.book-wrap{display:flex;align-items:center;justify-content:center;perspective:1100px}
.book{position:relative;display:grid;align-content:space-between;width:210px;height:252px;padding:18px 16px 15px;overflow:visible;transform:rotateY(-8deg);border:1px solid var(--ka-line)}
.book:before{content:"KIMBERLY ALI";position:absolute;top:7px;left:-20px;display:flex;align-items:center;justify-content:center;width:22px;height:238px;writing-mode:vertical-rl;transform:rotate(180deg)}
.book:after{content:"";position:absolute;top:9px;right:-13px;width:15px;height:234px}
.sticker{position:absolute;top:12px;right:12px;padding:5px 7px}
.book-sub{margin-top:8px}
.nav{display:flex;gap:7px}
.btn{padding:11px 15px;border:0;cursor:pointer}
@media(min-width:721px){.app{grid-template-rows:64px minmax(0,1fr) 76px}
.slide{padding:24px}
.frame{height:min(610px,100%);gap:22px}
.two{grid-template-columns:1.05fr .95fr}
.book{width:336px;height:438px;padding:30px 28px 26px;transform:rotateY(-18deg) rotateZ(1.2deg)}
.book:before{top:11px;left:-35px;width:37px;height:416px}
.book:after{top:16px;right:-23px;width:25px;height:402px}
.tiles{grid-template-columns:repeat(3,1fr);gap:14px}
.compare{grid-template-columns:1fr 1fr;gap:17px}}