/* A wide shared stage: dancing actor on the left, full-size story props on the right. */
main{max-width:1240px}.workspace{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px}.sanctuary{max-width:none}.scene{max-width:580px}.character-controls{display:block;max-width:220px}.character-controls .tradition{display:flex;flex-direction:row;align-items:center;gap:9px}.character-controls .tradition span{white-space:nowrap}.character-controls .tradition select{min-width:145px}
.scene.task-scene{height:380px;width:100%;max-width:580px}.scene.task-scene .arch{width:100%;height:320px;border-radius:100px 100px 24px 24px;background:linear-gradient(140deg,#eee5f2,#f4efe7)}
.scene.task-scene #character,.scene.party-mode.task-scene #character{height:310px;left:25%;bottom:12px;z-index:2;transition:none}
.scene.task-scene #taskStage,.scene.party-mode.task-scene #taskStage{inset:auto 0 10px auto;width:48%;height:290px;opacity:1;transform:none;z-index:1}
#taskStage>svg{overflow:visible}.scene.task-scene .bubble{top:6px;left:50%;width:auto;max-width:90%;z-index:4}.scene.task-scene .n1{left:12px;top:95px}.scene.task-scene .n2{right:auto;left:46%;top:110px}
.scene.task-scene:not(.dance-active) .priest-idle{display:block}.scene.task-scene:not(.dance-active) .priest-dance{display:none}.scene.task-scene:not(.dance-active) .companion-sheet{background-position:0 0}
#taskStage .laptop-source text{fill:#b8d9c5;text-anchor:start;font:13px monospace}#taskStage .laptop-passed text{fill:#b4d9bf;text-anchor:middle;font:14px monospace}.source-row{animation:code-appear 5s steps(1,end) infinite}.row-2{animation-delay:.8s}.row-3{animation-delay:1.6s}.row-4{animation-delay:2.4s}.code-caret{animation:caret-blink .8s steps(1,end) infinite}.laptop-passed{display:none}[data-phase="2"] .laptop-source{display:none}[data-phase="2"] .laptop-passed{display:block}
@keyframes code-appear{0%,10%{opacity:0}15%,100%{opacity:1}}@keyframes caret-blink{50%{opacity:0}}
@media(max-width:900px) and (min-width:761px){.workspace{gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.scene.task-scene #character,.scene.party-mode.task-scene #character{height:260px}.scene.task-scene #taskStage,.scene.party-mode.task-scene #taskStage{height:245px}.scene.task-scene{height:330px}.scene.task-scene .arch{height:280px}}
@media(max-width:760px){.workspace{grid-template-columns:1fr;gap:20px}.sanctuary{max-width:500px}.scene.task-scene,body[data-step="2"] .scene.task-scene{height:310px;max-width:500px}.scene.task-scene .arch,body[data-step="2"] .task-scene .arch{width:100%;height:250px;border-radius:65px 65px 20px 20px}.scene.task-scene #character,.scene.party-mode.task-scene #character,body[data-step="2"] .task-scene #character{height:230px;left:24%;bottom:12px}.scene.task-scene #taskStage,.scene.party-mode.task-scene #taskStage{width:47%;height:230px;right:0;bottom:0}.character-controls{max-width:230px}}
@media(max-width:380px){.scene.task-scene #character,.scene.party-mode.task-scene #character,body[data-step="2"] .task-scene #character{height:200px}.scene.task-scene #taskStage,.scene.party-mode.task-scene #taskStage{height:205px}.scene.task-scene,body[data-step="2"] .scene.task-scene{height:280px}.scene.task-scene .arch,body[data-step="2"] .task-scene .arch{height:225px}}
@media(prefers-reduced-motion:reduce){.source-row,.code-caret{animation:none!important;opacity:1}}
/* Reveal the lines in order, then restart the whole snippet together. */
.source-row.row-1{animation:source-one 8s steps(1,end) infinite;animation-delay:0}.source-row.row-2{animation:source-two 8s steps(1,end) infinite;animation-delay:0}.source-row.row-3{animation:source-three 8s steps(1,end) infinite;animation-delay:0}.source-row.row-4{animation:source-four 8s steps(1,end) infinite;animation-delay:0}
@keyframes source-one{0%,5%{opacity:0}10%,100%{opacity:1}}@keyframes source-two{0%,25%{opacity:0}30%,100%{opacity:1}}@keyframes source-three{0%,45%{opacity:0}50%,100%{opacity:1}}@keyframes source-four{0%,65%{opacity:0}70%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.source-row{animation:none!important;opacity:1}}
/* Equally legible stories for every task. */
#taskStage text{font:700 18px monospace;text-anchor:middle}.scurry{animation:scurry-run 3.6s ease-in-out infinite}.bug-second{animation-delay:-1.2s}.bug-third{animation-delay:-2.4s}.caught-bugs{display:none}[data-phase="1"] .scurry{animation-duration:2.4s}[data-phase="2"] .large-bugs{display:none}[data-phase="2"] .caught-bugs{display:block}
.suite-case rect{fill:#f1c6c9;stroke:#c07b85;transition:fill .8s,stroke .8s}.case-fail path{stroke:#b35764;stroke-width:7}.case-pass{display:none}.suite-case{transform-box:fill-box;transform-origin:center;animation:suite-shake 3s ease-in-out infinite}.case-1{animation-delay:-1s}.case-2{animation-delay:-2s}[data-phase="1"] .case-0 rect,[data-phase="2"] .suite-case rect{fill:#c8e5d0;stroke:#739b80}[data-phase="1"] .case-0 .case-fail,[data-phase="2"] .case-fail{display:none}[data-phase="1"] .case-0 .case-pass,[data-phase="2"] .case-pass{display:block}[data-phase="1"] .case-0,[data-phase="2"] .suite-case{animation:none}
.schema-chaos{animation:work-spark 3s ease-in-out infinite}.schema-clean,.scene-success{opacity:0}[data-phase="1"] .schema-chaos,[data-phase="2"] .schema-chaos{display:none}[data-phase="1"] .schema-clean,[data-phase="2"] .schema-clean,[data-phase="2"] .scene-success{opacity:1}
.large-review-lens{animation:review-search 4s ease-in-out infinite}.large-approve{display:none;transform:rotate(-8deg);transform-origin:155px 185px}[data-phase="2"] .large-review-lens{display:none}[data-phase="2"] .large-approve{display:block}#taskStage .large-approve text{fill:#4b7f5e;font-size:22px}
.big-spaghetti{transform-origin:150px 140px;animation:spaghetti-drift 4s ease-in-out infinite}.neat-code{display:none}[data-phase="2"] .big-spaghetti{display:none}[data-phase="2"] .neat-code{display:block}.big-agent{animation:agent-bounce 3s ease-in-out infinite}.agent-1{animation-delay:-1s}.agent-2{animation-delay:-2s}[data-phase="2"] .big-agent{animation-delay:0}
.quiet-ring{transform-origin:150px 135px;animation:zen-ring 6s ease-in-out infinite}.quiet-pings{animation:ping-jump 2s ease-in-out infinite}.quiet-cup{opacity:0;transition:opacity 1s}[data-phase="1"] .quiet-pings,[data-phase="2"] .quiet-pings{display:none}[data-phase="1"] .quiet-cup,[data-phase="2"] .quiet-cup{opacity:1}.tea-steam{animation:work-spark 3s ease-in-out infinite}
@keyframes scurry-run{0%,100%{transform:translate(-12px,0) rotate(-8deg)}35%{transform:translate(16px,-13px) rotate(9deg)}70%{transform:translate(-8px,12px) rotate(-5deg)}}@keyframes suite-shake{0%,85%,100%{transform:rotate(0)}90%{transform:rotate(-4deg)}95%{transform:rotate(4deg)}}@keyframes review-search{50%{transform:translate(-36px,44px)}}@keyframes spaghetti-drift{50%{transform:rotate(5deg) scale(.94)}}@keyframes agent-bounce{50%{transform:translateY(-12px) rotate(5deg)}}
/* Deployment gets the same two clear zones; candles never stand in front of the dancer. */
#releaseDialog{width:min(740px,calc(100% - 24px))}#releaseStage .scene{max-width:650px;height:330px;width:100%}#releaseStage .scene .arch{width:100%;height:290px;border-radius:90px 90px 24px 24px}#releaseStage .scene #character{left:24%;height:285px;bottom:12px;z-index:2}
#releaseStage .scene .candles{left:auto;right:1%;transform:none;width:47%;justify-content:center;gap:16px;bottom:30px;z-index:1}#releaseStage .scene .candles i{width:63px;height:144px;flex-shrink:0}#releaseStage .scene .candles i:nth-child(2){height:177px}#releaseStage .scene .candles i:before{left:calc(50% - 5px);width:10px;height:23px;top:-16px}#releaseStage .scene .candles i:after{font-size:10px;top:calc(100% + 8px)}
#releaseStage .scene .n1{left:10px;top:70px}#releaseStage .scene .n2{right:auto;left:42%;top:100px}
#releaseStage .scene[data-tradition="1"] .candles{right:28%;width:18%}#releaseStage .review-scroll{width:25%;right:1%;bottom:30px;padding:16px 12px;font-size:15px}#releaseStage .review-scroll span{font-size:11px}#releaseStage .review-scroll em{font-size:32px}
#releaseStage .zen-lamp{left:56%;bottom:58px;width:90px;height:42px}#releaseStage .zen-lamp i{left:39px}#releaseStage .zen-bell{right:3%;bottom:52px;width:100px;height:100px}#releaseStage .breath-ring{left:75%;top:65px;width:210px;height:210px}
#releaseStage .ci-console{left:auto;right:2%;bottom:45px;width:45%;justify-content:space-around;padding:18px 10px;font-size:12px}#releaseStage .ci-console i{width:22px;height:22px}#releaseStage .toast-mug{right:19%;bottom:155px}
@media(max-width:600px){#releaseDialog{padding:14px}#releaseStage .scene{height:285px}#releaseStage .scene .arch{height:245px;border-radius:65px 65px 20px 20px}#releaseStage .scene #character{height:220px;left:24%;bottom:16px}#releaseStage .scene .candles{width:48%;gap:7px;right:0;bottom:35px}#releaseStage .scene .candles i{width:42px;height:105px}#releaseStage .scene .candles i:nth-child(2){height:130px}#releaseStage .scene .candles i:after{font-size:8px;white-space:normal;width:47px;line-height:1.2}#releaseStage .review-scroll{font-size:11px;padding:10px 6px}#releaseStage .review-scroll span{font-size:9px}#releaseStage .zen-lamp{width:57px;height:30px;left:55%}#releaseStage .zen-lamp i{left:23px}#releaseStage .zen-bell{width:64px;height:64px}#releaseStage .breath-ring{width:125px;height:125px;top:110px}#releaseStage .ci-console{font-size:9px;gap:5px;padding:12px 5px}#releaseStage .ci-console i{width:17px;height:17px}#releaseStage .toast-mug{right:17%;bottom:130px}}
@media(prefers-reduced-motion:reduce){#taskStage *,#releaseStage .scene *{animation:none!important;transition:none!important}}
/* Preserve each tile's SVG placement; only its failure mark pulses. */
.suite-case{animation:none}.case-fail{animation:work-spark 3s ease-in-out infinite}