/* Animated app surfaces use the existing Pip component and original Den art. */
.demo-station{position:absolute;right:1%;top:1.5%;bottom:1.5%;width:31%;background:#fff;border:1px solid #e0e8f1;border-top:.5cqw solid #12a65a;border-radius:2cqw;box-shadow:0 1.4cqw 3cqw #0c1c2e35;overflow:hidden;color:#0c1c2e;font-family:Nunito,system-ui,sans-serif;transform:translateX(110%);opacity:0}.demo-station-scroll{padding:1.3cqw}.station-tags{display:flex;gap:.3cqw;align-items:center}.station-tags span{padding:.25cqw .55cqw;border-radius:2cqw;font-size:.68cqw;font-weight:900;color:#16884f;background:#e5f6eb}.station-tags span:nth-child(2){color:#174c9b;background:#e8effc}.station-tags i{margin-left:auto;background:#e7eef6;border-radius:50%;width:2.3cqw;height:2.3cqw;display:grid;place-items:center;font-style:normal;font-size:1.4cqw}.demo-station h3{font-size:1.65cqw;font-weight:1000;margin:.35cqw 0 .7cqw}.station-definition{font-size:1cqw;line-height:1.5;color:#46586c;margin:0 0 .8cqw}.station-examples p{background:#eef3f9;padding:.55cqw .8cqw;border-radius:.8cqw;font-size:.95cqw;font-weight:700;margin:.4cqw 0}.station-check{border-top:1px solid #e0e8f1;margin-top:1cqw;padding-top:.9cqw}.station-eyebrow{display:flex;justify-content:space-between;font-size:.8cqw;font-weight:900;color:#8b9daf;letter-spacing:.04em}.station-eyebrow b{background:#fff3d0;color:#8b6000;padding:0 .5cqw;border-radius:2cqw}.station-question{font-size:1.08cqw;line-height:1.4;margin:.6cqw 0 .7cqw;font-weight:900}.station-options>div{display:flex;align-items:center;gap:.7cqw;min-height:3.2cqw;border:.15cqw solid #e0e8f1;border-radius:1cqw;padding:.6cqw;margin:.45cqw 0;font-size:1cqw;font-weight:700}.station-options b{background:#eef3f9;border-radius:.5cqw;padding:.35cqw .6cqw;font-size:.85cqw}.station-options span{flex:1}.station-options i{display:none;font-style:normal}.station-options .correct{border-color:#12a65a;background:#e5f6eb}.station-options .correct b{color:white;background:#12a65a}.station-options .correct i{display:block;color:#12a65a}.station-feedback{background:#e5f6eb;border:1px solid #b7e8cd;color:#087b3d;border-radius:1cqw;padding:.7cqw .9cqw;font-size:1cqw;font-weight:800;margin-top:.7cqw}.station-another,.station-next{text-align:center;border-radius:1cqw;padding:.9cqw;font-size:1.08cqw;font-weight:900;color:white;margin-top:.8cqw;background:#087b3d;box-shadow:0 .3cqw 0 #086a35}.station-next{background:#1978ed;box-shadow:0 .3cqw 0 #1359b5}
.demo-days{isolation:isolate}.demo-days:before{content:"";position:absolute;inset:-.3cqw -.8cqw -.3cqw -.2cqw;background:#fff;z-index:-1}
.tablet-display{container-type:inline-size}.demo-layer{position:absolute;inset:0;overflow:hidden;font-family:Nunito,system-ui,sans-serif;color:#0c1c2e}.demo-layer *,.demo-spag *{box-sizing:border-box}.demo-layer pip-mascot,.demo-spag pip-mascot{display:block!important;width:100%!important;height:100%!important}
.demo-den{position:absolute;left:.8%;top:20.8%;width:34.7%;height:48.1%;background:url('/app-shots/tablets/observatory.webp') center/cover;overflow:hidden}.demo-den-pip{position:absolute;width:27%;height:27%;left:36.5%;bottom:6%}.demo-star{position:absolute;color:#fff4b2;font-size:2cqw}.star-one{left:29%;top:20%}.star-two{right:22%;top:12%}
.demo-goal{position:absolute;left:37%;top:21.5%;width:26%;height:34%;background:#fff;text-align:center}.demo-goal>svg{height:81%;width:90%;display:block;margin:0 auto}.demo-goal-number{position:absolute;top:25%;left:0;width:100%}.demo-goal-number b{display:block;font-size:4.2cqw;font-weight:1000;line-height:1.15}.demo-goal-number span{display:block;font-size:.85cqw;font-weight:900;letter-spacing:.12em;margin-top:.5cqw}.demo-xp{display:block;font-size:1.65cqw;line-height:1.6}.demo-goal-message{font-size:.92cqw;color:#516377;font-weight:800}.demo-days{position:absolute;left:37.4%;top:68%;width:25%;height:5%;background:white;display:flex;justify-content:space-between;text-align:center}.demo-days>div{width:10%}.demo-day{display:flex;width:1.65cqw;height:1.65cqw;border:1px solid #dfe7f1;border-radius:50%;align-items:center;justify-content:center;margin:auto;background:#f6f8fc}.demo-day svg{width:65%;height:70%;opacity:0}.demo-day.lit{border-color:#1680ff;background:#fff5df}.demo-day.lit svg{opacity:1}.demo-days b{display:block;font-size:.7cqw;color:#596b80;margin-top:.2cqw}
.demo-journey{position:absolute;left:65.3%;top:21.5%;width:34.4%;height:73.5%;background:#fff;overflow:hidden}.demo-route{position:absolute;inset:0;width:100%;height:100%}.demo-stop{position:absolute;transform:translate(-50%,-24%);width:45%;text-align:center;line-height:1.2}.demo-node{display:flex;align-items:center;justify-content:center;width:4.15cqw;height:4.15cqw;margin:0 auto .7cqw;border:.25cqw solid var(--stop-color);border-radius:50%;background:#fff;color:var(--stop-color);font-size:2.2cqw;font-weight:1000}.demo-node.done{color:#fff;background:#4cb8b1;border-color:#71c9c2}.demo-stop b{display:block;font-size:.9cqw;font-weight:1000}.demo-stop small{display:block;color:var(--stop-color);font-size:.8cqw;font-weight:900;margin-top:.35cqw}.demo-traveller{position:absolute;width:22%;height:17%;transform:translate(-50%,-85%);z-index:2}.demo-reward{position:absolute;bottom:1%;left:10%;right:10%;padding:1cqw .3cqw;border-radius:1cqw;background:#e5f8ed;color:#07874a;font-size:1.1cqw;font-weight:900;text-align:center}
.demo-card-focus{position:absolute;left:1%;top:40%;width:48.5%;height:10.2%;border:.3cqw solid #187cf0;border-radius:1.7cqw;background:#1577e608;box-shadow:0 0 0 .6cqw #1577e615}.demo-tap{position:absolute;width:5cqw;height:5cqw;border-radius:50%;border:.3cqw solid #1978ed;background:#1978ed22;opacity:0}.practice-tap{left:23%;top:42%}
.demo-lesson{position:absolute;inset:0;background:#f8fafc;padding:3cqw 4cqw;opacity:0}.demo-lesson-header{display:flex;gap:2cqw;align-items:center}.demo-lesson-header>span{font-size:2.3cqw;color:#526579}.demo-lesson-header>div{height:.7cqw;background:#e1e8f1;flex:1;border-radius:1cqw;overflow:hidden}.demo-lesson-header i{display:block;height:100%;background:#187df1}.demo-lesson-header>b{font-size:.8cqw;background:#e1eafe;color:#3471dc;padding:.5cqw 1cqw;border-radius:.6cqw}.demo-lesson-meta{display:flex;justify-content:space-between;margin:1.5cqw 0 4cqw;font-size:1cqw;font-weight:800;color:#7a8da3}.demo-lesson h4{font-size:1.65cqw;margin:0 0 1cqw;color:#506477}.demo-lesson h3{font-size:2.6cqw;margin:0 0 1.5cqw;font-weight:1000}.demo-hint{display:flex;align-items:center;gap:1.2cqw}.demo-hint>div{width:7cqw;height:7cqw;flex-shrink:0}.demo-hint p{margin:0;background:#e6f0ff;border:1px solid #cbdfff;border-radius:1cqw;padding:1.2cqw;font-size:1.45cqw;font-weight:800;flex:1}.demo-machine{display:flex;align-items:center;justify-content:center;gap:1.2cqw;background:#fff;border:.15cqw solid #e0e8f1;border-radius:1.8cqw;margin:2cqw 0;padding:3cqw 1cqw}.demo-machine b{display:flex;align-items:center;justify-content:center;width:7cqw;height:7cqw;background:#f9fbff;border:.18cqw solid #bdcbd9;border-radius:1cqw;font-size:2cqw}.demo-machine small{font-size:1cqw;color:#899bac;font-weight:900}.demo-machine>span{color:#8b9eb3;font-size:2cqw}.demo-machine .correct{background:#def7e9;border-color:#12ab63;color:#087c46}.demo-answers{display:flex;justify-content:center;gap:1.2cqw}.demo-answers span{display:flex;align-items:center;justify-content:center;width:7cqw;height:5cqw;border-radius:1cqw;border:.18cqw solid #dfe7f2;background:#fff;font-size:1.8cqw;font-weight:900}.demo-answers span.selected{background:#e0edff;border-color:#187cf0;color:#116ada}.demo-check{margin:2cqw auto 0;padding:1.4cqw;text-align:center;background:#bdccda;color:white;border-radius:1.2cqw;font-size:1.5cqw;font-weight:900}.demo-check.selected{background:#187cf0}.demo-feedback{margin-top:1.5cqw;padding:1.3cqw 2cqw;background:#e4f8ec;border-radius:1cqw;color:#087343;opacity:0;font-size:1.5cqw}.demo-feedback p{margin:.4cqw 0 0;font-size:1.2cqw}.lesson-tap{left:58%;top:61%}
.demo-spag{position:absolute;left:0;top:50%;width:100%;aspect-ratio:3548/1816;transform:translateY(-50%);font-family:Nunito,system-ui,sans-serif}.demo-spag-mask{position:absolute;left:2.7%;top:14.3%;width:3.5%;height:6%;background:#eef3f9}.demo-spag-route{position:absolute;inset:0;width:100%;height:100%}.demo-map-pip{position:absolute;width:8%;height:16%;transform:translate(-50%,-90%)}.demo-map-tip{position:absolute;left:57%;top:3%;width:39%;padding:1.3cqw 1.5cqw;border-radius:1.2cqw;background:#fff;border:1px solid #dce6f1;box-shadow:0 6px 15px #263b5010;color:#0c1c2e}.demo-map-tip span{display:block;color:#668397;letter-spacing:.1em;font-size:.65cqw;font-weight:900}.demo-map-tip strong{display:block;font-size:1.65cqw;margin:.4cqw 0}.demo-map-tip p{font-size:1cqw;color:#526879;margin:0}