.no-js-only{display:inline-flex}.js-ready .no-js-only{display:none!important}
.ux-activity-badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}.ux-activity-badges span{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.035em;text-transform:uppercase}.ux-progression{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;padding-top:16px;border-top:1px solid var(--line)}.ux-progression>div{background:var(--pale);border-radius:10px;padding:12px}.ux-progression strong{display:block;font-size:9px;letter-spacing:.08em;color:var(--blue);margin-bottom:5px}.ux-progression p{font-size:12px;line-height:1.55;margin:0}.ux-demo-shell{margin:14px 0 8px}
.ux-demo-button{font-size:11px;padding:0;font-weight:900;color:var(--blue)}
.ux-demo-tutorial{margin-top:10px;border:1.5px solid var(--ink);border-radius:14px;background:#fff;overflow:hidden;box-shadow:4px 4px 0 var(--yellow)}
.ux-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;background:var(--pale);border-bottom:1px solid var(--line)}
.ux-demo-heading>div{display:flex;flex-direction:column;gap:3px}
.ux-demo-heading span{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--blue)}
.ux-demo-heading strong{font-size:15px}
.ux-demo-close{font-size:10px}
.ux-demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ux-demo-step{min-width:0;border-right:1px solid var(--line);background:#fff}
.ux-demo-step:last-child{border-right:0}
.ux-demo-copy{padding:13px 14px 16px}
.ux-demo-step-label{display:block;font-size:8px;font-weight:900;letter-spacing:.08em;color:var(--blue);margin-bottom:5px}
.ux-demo-copy h4{font-size:15px;line-height:1.25;margin:0 0 6px}
.ux-demo-copy p{font-size:11px;line-height:1.55;margin:0;color:#111}
.ux-demo-controls{display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.ux-demo-controls span{font-size:10px;font-weight:900}
.ux-demo-controls .button{font-size:10px;min-height:38px;padding:8px 12px}
.ux-scene{height:165px;background:#fffdf3;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ux-scene>span{position:absolute;display:none;box-sizing:border-box}
.ux-scene-floor{display:block!important;left:0;right:0;bottom:0;height:30px;background:#eef2ff;border-top:1px solid #c9d0e0}
.ux-scene-dog{width:76px;height:58px;background:#d69b61;border:3px solid var(--ink);border-radius:48% 48% 42% 42%;z-index:5}
.ux-scene-dog:before,.ux-scene-dog:after{content:"";position:absolute}
.ux-scene-dog:before{width:22px;height:34px;background:#b97843;border:3px solid var(--ink);border-radius:50% 50% 20% 20%;left:-10px;top:-10px;box-shadow:64px 0 0 #b97843}
.ux-scene-dog:after{width:24px;height:18px;background:#17191d;border-radius:50%;right:-12px;top:24px}
.ux-scene-hand{width:88px;height:30px;background:#f2c29f;border:3px solid var(--ink);border-radius:18px;z-index:4}
.ux-scene-hand:after{content:"";position:absolute;width:30px;height:42px;background:#f2c29f;border:3px solid var(--ink);border-bottom:0;border-radius:16px 16px 0 0;right:-4px;top:-26px}
.ux-scene-towel{width:145px;height:82px;background:#cfd7f6;border:3px solid var(--ink);border-radius:8px;z-index:2}
.ux-scene-fold{width:74px;height:78px;background:#aebbec;border:3px solid var(--ink);border-radius:8px;z-index:3}
.ux-scene-cup{width:58px;height:70px;background:#fff;border:3px solid var(--ink);border-radius:7px 7px 18px 18px;z-index:3}
.ux-scene-food{width:16px;height:16px;background:var(--yellow);border:2px solid var(--ink);border-radius:50%;z-index:4}
.ux-scene-tray{width:160px;height:92px;border:3px solid var(--ink);border-radius:12px;background:radial-gradient(circle at 25% 30%,#fff 0 13px,#222 14px 16px,transparent 17px),radial-gradient(circle at 50% 30%,#fff 0 13px,#222 14px 16px,transparent 17px),radial-gradient(circle at 75% 30%,#fff 0 13px,#222 14px 16px,transparent 17px),radial-gradient(circle at 25% 70%,#fff 0 13px,#222 14px 16px,transparent 17px),radial-gradient(circle at 50% 70%,#fff 0 13px,#222 14px 16px,transparent 17px),radial-gradient(circle at 75% 70%,#fff 0 13px,#222 14px 16px,transparent 17px),#c8c8c8;z-index:2}
.ux-scene-ball{width:34px;height:34px;border-radius:50%;background:var(--blue);border:3px solid var(--ink);z-index:4}
.ux-scene-block{width:52px;height:68px;background:#fff;border:3px solid var(--ink);border-radius:6px;z-index:3}
.ux-scene-arrow{font-size:40px;font-weight:900;color:var(--blue);z-index:6}
.ux-scene-note{font-size:11px;font-weight:900;color:var(--blue);z-index:6}
.ux-scene--towel-1 .ux-scene-towel{display:block;left:50%;top:40px;transform:translateX(-50%)}
.ux-scene--towel-1 .ux-scene-food-a{display:block;left:43%;top:68px}
.ux-scene--towel-1 .ux-scene-food-b{display:block;left:51%;top:87px}
.ux-scene--towel-1 .ux-scene-food-c{display:block;left:58%;top:60px}
.ux-scene--towel-2 .ux-scene-towel{display:block;left:50%;top:40px;transform:translateX(-50%)}
.ux-scene--towel-2 .ux-scene-fold{display:block;left:50%;top:42px}
.ux-scene--towel-2 .ux-scene-food-a{display:block;left:49%;top:78px}
.ux-scene--towel-2 .ux-scene-arrow{display:block;left:68%;top:55px;transform:rotate(180deg)}
.ux-scene--towel-3 .ux-scene-dog{display:block;left:23px;bottom:25px}
.ux-scene--towel-3 .ux-scene-towel{display:block;left:48%;top:57px;transform:translateX(-30%) rotate(-8deg)}
.ux-scene--towel-3 .ux-scene-food-a{display:block;left:63%;top:96px}
.ux-scene--touch-1 .ux-scene-dog{display:block;left:28px;bottom:28px}
.ux-scene--touch-1 .ux-scene-hand-a{display:block;right:30px;top:67px}
.ux-scene--touch-2 .ux-scene-dog{display:block;left:60px;bottom:28px}
.ux-scene--touch-2 .ux-scene-hand-a{display:block;right:42px;top:67px}
.ux-scene--touch-2 .ux-scene-arrow{display:block;left:47%;top:64px}
.ux-scene--touch-3 .ux-scene-dog{display:block;left:92px;bottom:28px}
.ux-scene--touch-3 .ux-scene-hand-a{display:block;left:155px;top:67px}
.ux-scene--touch-3 .ux-scene-hand-b{display:block;right:18px;top:85px;transform:scale(.75)}
.ux-scene--touch-3 .ux-scene-food-a{display:block;right:26px;top:77px}
.ux-scene--cups-1 .ux-scene-food-a{display:block;left:43%;bottom:37px}
.ux-scene--cups-1 .ux-scene-cup-a{display:block;left:58%;bottom:30px}
.ux-scene--cups-2 .ux-scene-dog{display:block;left:28px;bottom:28px;transform:scale(.82)}
.ux-scene--cups-2 .ux-scene-cup-a{display:block;left:58%;bottom:30px}
.ux-scene--cups-2 .ux-scene-food-a{display:block;left:65%;bottom:34px;z-index:2}
.ux-scene--cups-3 .ux-scene-dog{display:block;left:38px;bottom:28px;transform:scale(.82)}
.ux-scene--cups-3 .ux-scene-cup-a{display:block;left:58%;bottom:68px}
.ux-scene--cups-3 .ux-scene-food-a{display:block;left:65%;bottom:34px}
.ux-scene--cups-3 .ux-scene-arrow{display:block;left:67%;top:54px;transform:rotate(-90deg)}
.ux-scene--muffin-1 .ux-scene-tray{display:block;left:50%;top:40px;transform:translateX(-50%)}
.ux-scene--muffin-1 .ux-scene-food-a{display:block;left:43%;top:66px}
.ux-scene--muffin-1 .ux-scene-food-b{display:block;left:51%;top:96px}
.ux-scene--muffin-1 .ux-scene-food-c{display:block;left:58%;top:66px}
.ux-scene--muffin-2 .ux-scene-tray{display:block;left:50%;top:40px;transform:translateX(-50%)}
.ux-scene--muffin-2 .ux-scene-ball-a{display:block;left:42%;top:55px}
.ux-scene--muffin-2 .ux-scene-ball-b{display:block;left:55%;top:86px}
.ux-scene--muffin-2 .ux-scene-food-a{display:block;left:60%;top:62px}
.ux-scene--muffin-3 .ux-scene-dog{display:block;left:20px;bottom:26px;transform:scale(.82)}
.ux-scene--muffin-3 .ux-scene-tray{display:block;left:58%;top:47px;transform:translateX(-50%) scale(.9)}
.ux-scene--muffin-3 .ux-scene-ball-a{display:block;left:62%;top:50px}
.ux-scene--muffin-3 .ux-scene-arrow{display:block;left:55%;top:46px}
.ux-scene--route-1 .ux-scene-block-a{display:block;left:31%;bottom:30px}
.ux-scene--route-1 .ux-scene-block-b{display:block;right:31%;bottom:30px}
.ux-scene--route-1 .ux-scene-arrow{display:block;left:47%;top:65px}
.ux-scene--route-2 .ux-scene-dog{display:block;left:24px;bottom:28px;transform:scale(.75)}
.ux-scene--route-2 .ux-scene-block-a{display:block;left:41%;bottom:30px}
.ux-scene--route-2 .ux-scene-block-b{display:block;right:18%;bottom:30px}
.ux-scene--route-2 .ux-scene-arrow{display:block;left:34%;top:60px;transform:rotate(-12deg)}
.ux-scene--route-3 .ux-scene-dog{display:block;left:50%;bottom:30px;transform:translateX(-50%) scale(.8)}
.ux-scene--route-3 .ux-scene-block-a{display:block;left:20%;bottom:28px}
.ux-scene--route-3 .ux-scene-block-b{display:block;right:20%;bottom:28px}
.ux-scene--route-3 .ux-scene-note{display:block;right:16px;top:16px}
.ux-scene--route-3 .ux-scene-note:after{content:"4 PAWS DOWN";display:block;padding:6px 8px;border:1px solid var(--blue);border-radius:999px;background:#fff}
@media(max-width:760px){.ux-demo-steps{display:block}.ux-demo-step{display:none;border-right:0}.ux-demo-step.is-current{display:block}.ux-demo-controls{display:flex}.ux-scene{height:190px}.ux-demo-copy h4{font-size:17px}.ux-demo-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ux-demo-tutorial{scroll-behavior:auto}}
.ux-week-export-controls{display:flex;align-items:end;gap:18px;flex-wrap:wrap;margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--pale)}.ux-week-export-controls label{font-size:11px;font-weight:900}.ux-week-export-controls input{display:block;margin-top:6px;min-height:42px;border:1px solid #9da5b4;border-radius:8px;padding:8px;background:#fff}.ux-week-export-controls p{font-size:11px;line-height:1.5;max-width:420px;margin:0}.ux-nojs-planner{border:1.5px solid var(--ink);border-radius:16px;padding:24px;background:#fff;margin-top:18px}.ux-nojs-planner h3{font-size:25px}.ux-nojs-planner>form>label{display:block;font-size:12px;font-weight:900;margin:18px 0}.ux-nojs-planner input,.ux-nojs-planner select{width:100%;min-height:42px;border:1px solid #9da5b4;border-radius:7px;padding:8px;background:#fff}.ux-nojs-planner fieldset{border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0}.ux-nojs-planner fieldset label{display:block;font-size:11px;font-weight:800;margin:8px 0}.ux-nojs-week-preview{margin:18px 0;border-top:1px solid var(--line)}.ux-nojs-week-preview>div{display:grid;grid-template-columns:110px 1fr 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.ux-nojs-week-preview span,.ux-nojs-week-preview small{font-size:12px}.ux-nojs-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.ux-nojs-actions button,.ux-nojs-planner>p button{border:1px solid var(--ink);background:var(--yellow);font-weight:900;border-radius:8px;padding:10px 14px}
.ux-sitter-extra{border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px;margin-top:20px}.ux-sitter-extra h3{font-size:22px;margin:4px 0 14px}.ux-sitter-extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ux-sitter-extra label{display:block;font-size:12px;font-weight:800;margin-top:12px}.ux-sitter-extra select,.ux-sitter-extra textarea{display:block;width:100%;margin-top:6px;border:1px solid #9da5b4;border-radius:8px;background:#fff;padding:10px;min-height:44px}.ux-sitter-extra textarea{resize:vertical}.ux-sitter-extra-note{font-size:11px;line-height:1.5;margin:12px 0 0}.ux-sitter-preview-extra{padding:22px 0;border-bottom:1px solid var(--line)}.ux-sitter-preview-extra h3{font-size:19px;margin-bottom:14px}.ux-sitter-preview-extra h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 5px;color:var(--blue)}.ux-sitter-preview-extra p{white-space:pre-wrap;font-size:13px;line-height:1.55;margin:0}
@media(max-width:760px){.ux-progression{grid-template-columns:1fr}.ux-sitter-extra-grid{grid-template-columns:1fr}.ux-nojs-week-preview>div{grid-template-columns:1fr;gap:4px}.planner-toolbar>div{display:flex;flex-direction:column;width:100%;gap:8px}.planner-toolbar .button{width:100%}.ux-week-export-controls{align-items:stretch;flex-direction:column}.ux-week-export-controls input{width:100%}}
@media(prefers-reduced-motion:reduce){.ux-demo.is-playing *{animation:none!important}}
@media print{.ux-week-export-controls,.ux-demo-shell,.ux-sitter-extra{display:none!important}.ux-nojs-planner form,.ux-nojs-actions{display:none!important}.ux-nojs-week-preview{display:block!important}}
.ux-demo-tutorial--image{max-width:440px}
.ux-demo-image-link{display:block;padding:10px;background:#fff;text-decoration:none}
.ux-demo-image{display:block;width:100%;height:auto;max-width:420px;margin:0 auto;border-radius:10px}
.ux-demo-image-note{margin:0;padding:0 14px 14px;font-size:11px;line-height:1.5;text-align:center;color:var(--ink)}
@media(max-width:760px){.ux-demo-tutorial--image{max-width:none}.ux-demo-image-link{padding:8px}.ux-demo-image-note{font-size:12px}}
