
.real-demo-main{max-width:1140px;padding-block:38px 75px}.real-demo-heading{padding-block:35px}.real-demo-heading h1{font-size:clamp(30px,4vw,48px);margin:13px 0 20px}.real-demo-heading p{line-height:1.8;color:#476a89;max-width:650px}.real-demo-heading small{display:block;margin-top:15px;color:#6b8296;font-size:12px}.page-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px 20px;background:#173f65;color:#fff;border-radius:17px 17px 0 0;font-size:13px}.page-toolbar label{display:flex;align-items:center;gap:12px}.page-toolbar select{border:1px solid #ffffff55;background:#fff;color:#173f65;padding:8px 10px;border-radius:10px;font:inherit}.real-page-viewport{overflow:auto;background:#d9e4ee;padding:28px 20px;overscroll-behavior:contain}.real-page{position:relative;width:100%;max-width:1061px;margin:auto;aspect-ratio:1061/1500;box-shadow:0 15px 40px #173f6530;container-type:inline-size}.real-page>img{width:100%;height:100%;display:block;pointer-events:none}.page-emoji,.page-status{position:absolute;display:block;cursor:pointer}.page-emoji input,.page-status input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.page-emoji span{position:absolute;left:22%;top:12%;width:56%;height:77%;border-radius:50%;border:2px solid transparent;pointer-events:none}.page-emoji input:checked+span{background:#53b1e62e;border-color:#16629d;box-shadow:0 0 0 3px #fff9}.page-emoji input:focus-visible+span{outline:3px solid #16629d;outline-offset:3px}.page-field{position:absolute;resize:none;border:1px dashed #215e9450;border-radius:3px;background:#ffffff28;padding:0 .35cqw;font-family:inherit;font-size:1.55cqw;line-height:1.5;color:#164f80;overflow:auto;min-height:0;box-sizing:border-box}.page-field::placeholder{color:#346e9b8c;font-size:1.25cqw}.page-field:focus{background:#ffffffde;outline:2px solid #2c81b5;border-color:transparent}.week-note{font-size:1.4cqw;line-height:1.4}.page-status span{position:absolute;inset:0;display:grid;place-items:center;color:#16629d;font-size:3.5cqw;opacity:0;pointer-events:none}.page-status input:checked+span{opacity:1;background:#b6dbf53d}.page-status input:focus-visible+span{outline:3px solid #16629d;opacity:1}.page-help{font-size:12px;color:#607d95;line-height:1.7;margin-top:15px}.demo-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin:25px 0}.demo-actions .text-link{border:0;background:none;cursor:pointer;color:#215e94}#demo-result{padding:25px;border:1px solid white;border-radius:18px;background:#ffffffa0}#demo-result h2{font-size:25px;margin-bottom:15px}#demo-result ul{padding-left:22px;line-height:2}#demo-result p{font-size:13px;line-height:1.8;color:#55748d}@media(max-width:600px){.page-toolbar{align-items:flex-start;flex-direction:column}.real-page-viewport{padding:13px 8px}.page-field{border-color:#215e9470}.page-toolbar select{font-size:12px}}

.real-page-viewport{background:radial-gradient(ellipse at 45% 20%,#e9eff5,#b9cbdc);padding:40px 35px 50px;perspective:1600px}.real-page{background:#fffefa;border-radius:1px 3px 8px 2px;box-shadow:1px 2px 0 #fff,3px 4px 0 #d9dfe3,5px 6px 0 #fff,10px 18px 20px #173c6230,22px 35px 48px #173c6226;isolation:isolate}.real-page:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(92deg,#18355012,transparent 3%,#fff4 5%,transparent 12%,transparent 92%,#1835500a);border-radius:inherit}.real-page:after{content:"";position:absolute;left:5%;right:3%;bottom:-15px;height:30px;border-radius:50%;background:#17355040;filter:blur(15px);z-index:-1}.real-page>img{border-radius:inherit}.page-emoji span{left:calc(50% - 2.07cqw);top:calc(50% - 2.07cqw);width:4.14cqw;height:4.14cqw;border:0;mix-blend-mode:multiply}.page-emoji input:checked+span{background:#8bc8ed;border:0;box-shadow:none}.page-field,.page-status{z-index:2}.page-field{scrollbar-width:thin}#pdf-status{font-size:13px;color:#436a8b;line-height:1.7;margin:15px 0}#pdf-file{font-size:13px;margin-bottom:20px}.demo-actions button:disabled{opacity:.6;cursor:wait}@media(max-width:600px){.real-page-viewport{padding:20px 12px 30px}}

#pdf-file[hidden]{display:none}

.page-zoom{display:flex;align-items:center;gap:12px}.page-zoom button{width:32px;height:32px;border:1px solid #ffffff70;border-radius:50%;background:#ffffff1c;color:white;font-size:23px;cursor:pointer}.page-zoom>span{font-size:12px;min-width:38px;text-align:center}.demo-embedded>.header,.demo-embedded>.skip-link,.demo-embedded>.footer,.demo-embedded>.partnership,.demo-embedded .real-demo-main>.text-link,.demo-embedded .support-dock{display:none!important}.demo-embedded .real-demo-main{width:100%;max-width:none;padding:0 0 25px}.demo-embedded .real-demo-heading{padding:18px 24px}.demo-embedded .real-demo-heading h1{display:none}.demo-embedded .real-demo-heading .eyebrow{display:none}.demo-embedded .real-demo-heading small{margin-top:7px}.demo-embedded .page-toolbar{border-radius:0;position:sticky;top:0;z-index:10}.demo-embedded .demo-actions,.demo-embedded .page-help,.demo-embedded #pdf-status,.demo-embedded #pdf-file,.demo-embedded #demo-result{margin-left:24px;margin-right:24px}@media(max-width:600px){.page-toolbar{flex-direction:row;flex-wrap:wrap}.page-toolbar>span{width:100%}.page-toolbar label{gap:8px;font-size:11px}.demo-embedded .real-demo-heading{padding:13px 18px;font-size:12px}}
body.demo-embedded{background:transparent!important}.demo-embedded .real-demo-heading{display:none}.demo-embedded .real-page-viewport{background:transparent;padding:22px 25px 35px}.demo-embedded .page-toolbar{background:#f1f6fbd9;color:#244f73;border:0;border-radius:24px;width:max-content;max-width:calc(100% - 28px);margin:0 auto;box-shadow:none;backdrop-filter:blur(14px);padding:8px 14px;gap:20px}.demo-embedded .page-toolbar>span{display:none}.demo-embedded .page-toolbar label{font-size:11px}.demo-embedded .page-toolbar select{border:1px solid #b9cde0;background:#ffffffa0;font-size:11px}.demo-embedded .page-zoom button{color:#215e94;background:#ffffffa0;border-color:#b9cde0}.demo-embedded .page-help,.demo-embedded #pdf-status{color:#e5eff9}.demo-embedded .demo-actions>.text-link,.demo-embedded #pdf-file{color:#e5eff9}.demo-embedded .real-page{border:0;border-radius:1px;box-shadow:0 22px 45px #06182d66}@media(max-width:600px){.demo-embedded .page-toolbar{gap:12px;flex-wrap:nowrap}.demo-embedded .page-toolbar label{font-size:0}.demo-embedded .real-page-viewport{padding:18px 10px 25px}}

/* Hide scroll rails while preserving native wheel and touch scrolling. */
html.demo-embedded-root,body.demo-embedded,.demo-embedded .real-page-viewport{scrollbar-width:none;scrollbar-gutter:auto}.demo-embedded-root::-webkit-scrollbar,.demo-embedded::-webkit-scrollbar,.demo-embedded .real-page-viewport::-webkit-scrollbar{display:none;width:0;height:0}.demo-embedded-root{overflow-y:auto}.demo-embedded .real-page-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto}.demo-embedded .real-page{margin-inline:auto}.demo-embedded .page-toolbar{position:sticky;top:0}
.real-page{cursor:zoom-in;touch-action:pan-y}.real-page.paper-panning{cursor:grabbing;user-select:none}.real-page textarea,.real-page input{cursor:auto;touch-action:auto}.real-page:has(.page-field:focus){cursor:auto}

/* A compact top action row; wheel and dragging control the paper. */
.page-toolbar .page-zoom,.page-toolbar>label{display:none!important}.page-toolbar .demo-actions{margin:0!important;gap:14px;flex-wrap:wrap}.page-toolbar{justify-content:center}.demo-embedded .page-toolbar{max-width:calc(100% - 20px);width:max-content;z-index:20;padding:8px 12px}.page-toolbar .demo-actions .button{padding:10px 16px;font-size:12px;min-height:36px}.page-toolbar .demo-actions>.text-link,.demo-embedded .page-toolbar .demo-actions>.text-link{color:#215e94;font-size:11px;line-height:1.4}.real-page{cursor:grab;touch-action:none}.real-page.paper-panning{cursor:grabbing}.page-toolbar .demo-actions .button{display:inline-flex;align-items:center;justify-content:center}.page-zoom button{display:grid;place-items:center;padding:0;line-height:1}.demo-embedded .real-page-viewport{overflow-x:auto;overflow-y:hidden}
