/* ===== Detailed hero answer sheet ===== */
#demo{height:650px}
.dsheet{left:2%;top:54px;width:84%;height:470px;background:#fffdf7;transform:rotate(-2.5deg);padding:0}
.dsheet::before{background:repeating-linear-gradient(transparent 0 33px,#e3e9fb 33px 34px);background-position:0 8px}
.dsheet::after{left:44px;background:#f4b5b5;width:2px}
.dsheet *{box-sizing:border-box}
.dtop{position:absolute;left:56px;right:16px;top:12px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;z-index:3;font-size:.62rem;font-weight:800;letter-spacing:.12em;color:#7b86ad}
.dtop b{color:#0b1238;font-size:.74rem;letter-spacing:.04em}
.dtop .r{text-align:right}
.dq{position:absolute;left:56px;right:104px;top:48px;z-index:3;font-weight:800;font-size:.84rem;line-height:1.3;color:#0b1238}
.dq small{display:block;color:#8b94b8;font-weight:700;letter-spacing:.12em;font-size:.58rem;margin-bottom:2px}
.dln{position:absolute;left:56px;right:16px;z-index:3;display:flex;align-items:center;gap:8px}
.dln .t{flex:1;font-family:'Caveat',cursive;font-size:1.22rem;line-height:1.05;color:#1f2f86;position:relative;padding-right:4px}
.dln .t::before{content:"";position:absolute;left:-4px;right:-2px;top:50%;height:78%;transform:translateY(-50%) scaleX(0);transform-origin:left;border-radius:7px;background:rgba(15,183,166,.28);transition:transform .5s ease .1s;z-index:-1}
.dln.on .t::before{transform:translateY(-50%) scaleX(1)}
.dln.part .t::before{background:rgba(245,154,31,.32)}
.dln.bad .t::before{background:rgba(255,107,107,.3)}
.dln .pt{flex:none;width:34px;text-align:right;font-family:'Caveat',cursive;font-weight:700;font-size:1.2rem;opacity:0;transition:opacity .35s}
.dln.on .pt{opacity:1}
.dln .ck{flex:none;width:26px;height:26px;opacity:0;transform:scale(.3) rotate(-20deg);transition:all .45s cubic-bezier(.3,1.6,.4,1)}
.dln.on .ck{opacity:1;transform:none}
.ddiag{position:absolute;left:60px;top:226px;width:150px;height:92px;z-index:3}
.ddiag path,.ddiag line,.ddiag circle,.ddiag polygon{fill:none;stroke:#1f2f86;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s ease}
.ddiag text{font-family:'Caveat',cursive;font-size:15px;fill:#1f2f86;opacity:0;transition:opacity .4s .9s}
#demo.scanning .ddiag path,#demo.scanning .ddiag line,#demo.scanning .ddiag circle,#demo.scanning .ddiag polygon,#demo.done .ddiag path,#demo.done .ddiag line,#demo.done .ddiag circle,#demo.done .ddiag polygon{stroke-dashoffset:0}
#demo.scanning .ddiag text,#demo.done .ddiag text{opacity:1}
.ddiag .lbl{position:absolute}
.dcap{position:absolute;left:218px;right:14px;top:226px;z-index:3;font-family:'Caveat',cursive;font-size:.98rem;line-height:1.02;color:#6b76a0;opacity:0;transition:opacity .4s .8s}
#demo.scanning .dcap,#demo.done .dcap{opacity:1}
.dnote{position:absolute;left:56px;right:16px;top:336px;z-index:3;font-family:'Caveat',cursive;font-size:1.12rem;line-height:1.08;color:#d63a47;padding:7px 12px 8px;border-radius:12px;border:2px dashed #ee8b93;background:#fff4f4;opacity:0;transform:translateY(-6px) rotate(-.6deg);transition:all .5s}
.dnote.on{opacity:1;transform:rotate(-.6deg)}
.dnote.n2{top:396px;right:196px;border-color:#7fd6cc;background:#f0fbf9;color:#0a8e80}
.dscore{right:12px;top:6px;font-size:1.9rem;z-index:6}
.dstamp{right:10px;bottom:14px;z-index:6;transform-origin:center;padding:6px 12px}
.dside{position:absolute;right:12px;top:98px;width:78px;z-index:3;font-family:'Caveat',cursive;font-size:1rem;line-height:1.05;color:#b05a00;text-align:center;opacity:0;transition:opacity .4s}
.dside.on{opacity:1}
@media(max-width:640px){#demo{height:660px}.dsheet{width:92%;left:0;height:490px}.dln .t{font-size:1.08rem}.dq{font-size:.76rem;right:88px}.ddiag{left:56px;width:130px}.dcap{left:196px;font-size:.95rem}.dnote{font-size:1rem}.dnote.n2{top:410px}.drep{top:112px}}