/* A local, ephemeral practice plan. Every selector is scoped to this component. */
.phone-demo{position:relative;width:100%;max-width:400px;padding-right:52px;box-sizing:border-box;text-align:left;color:#252a2e;isolation:isolate;overflow-anchor:none}
.phone-demo .pd-handset{position:relative;padding:7px;border:2px solid #777b7b;border-radius:clamp(30px,5vw,47px);background:linear-gradient(120deg,#35383a,#0b0c0d 45%,#424647);box-shadow:0 24px 45px #16282c35,inset 0 0 0 1px #a4a7a766}
.phone-demo .pd-side{position:absolute;width:3px;background:#676b6b;border-radius:2px;z-index:-1}
.phone-demo .pd-side-left{left:-4px;top:16%;height:14%}.phone-demo .pd-side-right{right:-4px;top:26%;height:12%}
.phone-demo .pd-screen{position:relative;aspect-ratio:402/874;container-type:inline-size;overflow:hidden;border-radius:clamp(23px,4vw,38px);background:#ece6de;isolation:isolate}
.phone-demo .pd-backdrop{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none;object-fit:fill}
.phone-demo .pd-island{position:absolute;top:1.8%;left:35%;width:30%;height:3.3%;background:#08090a;border-radius:30px;pointer-events:none;z-index:3}
.phone-demo .pd-grid{position:absolute;left:0;top:27.91762%;width:100%;height:58.12357%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min-content;align-content:start;gap:3.731343cqw;padding:1.99005cqw 4.975124cqw 2.985075cqw;margin:0;background:#ece6de;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;overflow-anchor:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.phone-demo .pd-grid::-webkit-scrollbar{display:none}
.phone-demo .pd-task{position:relative;display:block;appearance:none;min-width:0;width:100%;aspect-ratio:1;align-self:start;padding:0;margin:0;border:1px solid #fcfaf480;border-radius:5.223881cqw;background:#ece6de;box-shadow:0 2px 3px #252a2e16;color:#252a2e;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform 100ms ease,opacity 280ms ease;cursor:pointer;font-family:"ZagaDo Brand",monospace;text-align:left;line-height:1.2}
.phone-demo .pd-task:focus-visible{outline:2px solid #007794;outline-offset:-3px}
.phone-demo .pd-task-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;user-select:none}
.phone-demo .pd-task-copy{display:none}
.phone-demo .pd-expanded{grid-column:1/-1;aspect-ratio:auto;min-height:43.78cqw;background:#d5cdc6;border-color:#b6aca3;border-radius:5.472637cqw;padding:3.731343cqw;display:grid;grid-template-columns:27.860697cqw minmax(0,1fr);gap:3.731343cqw;align-items:start;animation:pd-open 280ms cubic-bezier(.215,.61,.355,1)}
.phone-demo .pd-expanded .pd-task-image{width:27.860697cqw;height:27.860697cqw;border-radius:3.731343cqw}
.phone-demo .pd-expanded .pd-task-copy{display:flex;flex-direction:column;min-width:0;padding-top:1cqw;gap:2cqw}
.phone-demo .pd-task-kind{font-size:2.487562cqw;letter-spacing:.06em;color:#60666a;font-weight:600}
.phone-demo .pd-task-title{font-size:5.223881cqw;font-weight:600;line-height:1.15;overflow-wrap:anywhere}
.phone-demo .pd-task-repeat{font-size:3.23383cqw;color:#60666a;line-height:1.4}
.phone-demo .pd-progress{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;border-radius:inherit}
.phone-demo .pd-progress path{fill:none;stroke:#23bff2;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.phone-demo .pd-holding{transform:scale(.97);box-shadow:0 1px 1px #252a2e16}.phone-demo .pd-holding .pd-progress,.phone-demo .pd-completed .pd-progress{opacity:1}
.phone-demo .pd-holding .pd-progress path{animation:pd-perimeter 400ms linear forwards}
.phone-demo .pd-completed .pd-progress path{stroke-dashoffset:0}.phone-demo .pd-completed{border-color:#23bff2}
.phone-demo .pd-done-check{position:absolute;display:none;inset:0;align-items:center;justify-content:center;background:#ece6de66;color:#252a2e;font-size:14cqw;font-weight:bold;text-shadow:0 1px #fcfaf4}
.phone-demo .pd-completed .pd-done-check{display:flex}.phone-demo .pd-departing{transform:translateX(110%) scale(.8);opacity:0;transition:transform 280ms cubic-bezier(.215,.61,.355,1),opacity 280ms ease}
.phone-demo .pd-guide{position:absolute;left:4.5%;right:4.5%;bottom:73.2%;z-index:4;pointer-events:none}
.phone-demo .pd-coach{font-family:"ZagaDo Brand",monospace;font-weight:600;font-size:clamp(10px,3.23cqw,13px);line-height:1.4;color:#fcfaf4;background:#123d48;border:1.5px solid #f2aa42;border-radius:3.5cqw;padding:2.25cqw 3cqw;box-shadow:0 1.5cqw #082a33,0 2cqw 2.24cqw #27373a38;animation:pd-coach-in 240ms ease-out}
.phone-demo .pd-arrow{position:absolute;width:15.4%;height:12%;overflow:visible;z-index:5;pointer-events:none;transform:translate(-50%,-50%) rotate(90deg);filter:drop-shadow(3px 5px 2px #273b3d70);animation:pd-point 1700ms ease-in-out infinite}
.phone-demo .pd-arrow-side{fill:#aa5c19;stroke:#aa5c19;stroke-width:2.8;stroke-linejoin:round}.phone-demo .pd-arrow-face{fill:#ec9b36;stroke:#ec9b36;stroke-width:1.6;stroke-linejoin:round}
.phone-demo .pd-reset{position:absolute;right:0;top:22px;width:44px;height:44px;padding:11px;display:grid;place-items:center;background:#fcfaf4;border:1px solid #252a2e33;border-radius:50%;color:#252a2e;box-shadow:0 4px 10px #252a2e12}
.phone-demo .pd-reset:hover{background:#e0f6fc}.phone-demo .pd-reset svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.phone-demo .pd-reset:focus-visible{outline:3px solid #23bff2;outline-offset:3px}
.phone-demo .pd-caption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:space-between;margin:13px 2px 0;font:11px/1.4 Arial,Helvetica,sans-serif}.phone-demo .pd-caption-label{font-weight:700}.phone-demo .pd-status{font-variant-numeric:tabular-nums}
.phone-demo .pd-keyboard{font:10px/1.45 Arial,Helvetica,sans-serif;margin:7px 2px 0;color:inherit;opacity:.75}
.phone-demo .pd-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;justify-content:center;min-height:80cqw;font:4cqw/1.5 "ZagaDo Brand",monospace;text-align:center}.phone-demo .pd-empty>span:first-child{font-size:17cqw;color:#00819e}
@keyframes pd-perimeter{to{stroke-dashoffset:0}}@keyframes pd-point{0%,100%{transform:translate(-45%,-50%) rotate(90deg)}50%{transform:translate(-60%,-50%) rotate(90deg)}}@keyframes pd-coach-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes pd-open{from{opacity:.85}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.phone-demo .pd-arrow,.phone-demo .pd-coach,.phone-demo .pd-expanded{animation:none}.phone-demo .pd-task{transition:none}.phone-demo .pd-holding .pd-progress path{animation:pd-perimeter 400ms linear forwards!important}.phone-demo .pd-departing{transition:none}}

/* Nose near the task; raised tail and its ground shadow use app projection. */
.phone-demo .pd-arrow{width:32%;height:auto;aspect-ratio:1;transform:translate(-25.333%,-76.667%);filter:none;animation:none}

/* Stable, absolutely positioned slots mirror RudiDisclosureTaskGrid. */
.phone-demo .pd-grid{display:block;padding:0;scroll-behavior:auto}
.phone-demo .pd-layout{position:relative;width:100%;min-height:100%;overflow-anchor:none}
.phone-demo .pd-task,.phone-demo .pd-expanded{position:absolute;display:block;aspect-ratio:auto;min-height:0;padding:0;animation:none;grid-column:auto;transition:background-color 220ms cubic-bezier(.215,.61,.355,1),border-color 220ms cubic-bezier(.215,.61,.355,1),transform 100ms ease,opacity 280ms ease}
.phone-demo .pd-task-image,.phone-demo .pd-expanded .pd-task-image{position:absolute;max-width:none;object-fit:cover}
.phone-demo .pd-task-copy,.phone-demo .pd-expanded .pd-task-copy{position:absolute;display:flex;flex-direction:column;gap:2cqw;padding:0;pointer-events:none;opacity:0}
.phone-demo .pd-empty{position:absolute;inset:0;min-height:100%;padding:12px}

/* A distinct second lesson: violet bubble and cyan arrow. */
.phone-demo[data-lesson="hold"] .pd-coach{background:#553889;border-color:#66d8f5;box-shadow:0 1.5cqw #352057,0 2cqw 2.24cqw #27373a38}
.phone-demo[data-lesson="hold"] .pd-arrow-face{fill:#55cfff;stroke:#55cfff}
.phone-demo[data-lesson="hold"] .pd-arrow-side{fill:#237da8;stroke:#237da8}