/* The children's screens are sized to the viewport, with every action in reach. */
:root{--green:#38725d;--green-dark:#295a49;--ink:#304e43;--paper:#fffbf2;--red:#cc3e5d}
body[data-page] #app{height:100dvh;max-width:1440px;padding:0 clamp(14px,3vw,42px);display:flex;flex-direction:column}
body[data-page] main{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-page] .site-header{height:76px;min-height:76px;margin:0;flex-wrap:nowrap;gap:16px}
body[data-page] .site-header nav{position:static;border:0;padding:0;gap:8px}
body[data-page] .brand{font-size:34px}
body[data-page] .nav-item{min-height:44px;padding:10px 16px}
body[data-page] .grownup-button{min-height:44px}
.classroom-home{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:clamp(24px,5vw,80px);flex:1;min-height:0;padding:28px 0}
.welcome-craft{min-height:0;border-radius:44% 44% 26% 26% / 30% 30% 23% 23%;background:radial-gradient(ellipse at 50% 43%,#fffdfa 10%,#f9e9e4 75%);display:flex;flex-direction:column;position:relative;padding:10px 12px 24px}
.craft-sticker{align-self:center;transform:rotate(-3deg);padding:9px 16px;background:#fffcf0;border:1px solid #ebdcc4;border-radius:9px;font-size:12px;font-weight:800;color:#8a6d54;box-shadow:0 3px 0 #e9d8c649}
.welcome-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0;padding:12px 0}
.school-badge{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.3px;color:#64745f;flex-wrap:wrap}
.school-badge .icon{width:21px;height:21px;color:#8da372}
.school-badge>span{font-size:11px}
.welcome-copy h1{font-size:clamp(46px,5.6vw,82px);line-height:1.05;letter-spacing:-3px;margin:22px 0 20px}
.welcome-copy h1 em{font-style:normal;color:#718e72}
.marian-welcome{font-size:clamp(17px,1.7vw,23px);line-height:1.55;font-weight:750}
.bring-beads{font-size:16px;color:#7b826d;line-height:1.6;margin:14px 0 24px}
.start-decade{min-height:60px;font-size:18px;padding:16px 23px;width:min(100%,390px)}
.full-choice{padding:10px 15px;min-height:50px;margin-top:12px;justify-content:flex-start;background:#edf0e2;border:1px solid #e1e7d5;width:min(100%,390px);font-size:15px}
.full-choice>span{margin-left:auto;font-size:11px;font-weight:700;color:#758169}
.welcome-note{font-size:11px;margin:17px 0 0;color:#7f8873}
.resume-link{display:flex;align-items:center;gap:8px;padding:10px 0;margin-top:7px;font-weight:800;min-height:44px;font-size:13px}
.resume-link .icon{width:18px;height:18px}

/* A handmade decade, with configurable shape and colors. */
.craft-space{flex:1;min-height:0;width:100%;container-type:size;display:grid;place-items:center}
.craft-frame{position:relative;aspect-ratio:440/520;width:min(100cqw,calc(100cqh * .84615));max-height:100%}
.pipe-cleaner{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.craft-bead{position:absolute;left:var(--x);top:var(--y);width:12%;height:8.8%;min-width:44px;min-height:44px;border-radius:28%;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(var(--turn));background:linear-gradient(110deg,#8ae3b5 0%,#43b685 20%,#209668 47%,#198360 83%,#58bc8f);box-shadow:inset 2px 3px 2px #d0ffe291,inset -2px -4px 2px #07593855,1px 5px 5px #465b3924;border:1px solid #208d6470;isolation:isolate}
button.craft-bead:active{transform:translate(-50%,-50%) rotate(var(--turn)) scale(.93)}
.pony-hole{position:absolute;top:2px;left:24%;width:52%;height:16%;border-radius:50%;background:#155c41;box-shadow:0 1px 1px #dcffeead;opacity:.75}
.bead-label{color:#fffef1;text-shadow:0 1px 1px #25493966;font-size:clamp(13px,1.5vw,21px);font-weight:900;transform:rotate(calc(-1 * var(--turn)));padding-top:4px}
.bead-label .icon{width:21px;height:21px;stroke-width:3}
.craft-bead.yellow{background:linear-gradient(110deg,#fff0a3,#eec653 45%,#dfb237 84%,#f5d86f);border-color:#d6ad3c;box-shadow:inset 2px 3px 2px #fffbd8c9,inset -2px -4px 2px #ad7c2755,1px 5px 5px #71542824}
.yellow .pony-hole{background:#ae7d2b}
.yellow .bead-label{color:#755920;text-shadow:none}
.craft-bead.cross{width:25%;height:19%;min-width:62px;min-height:65px;border-radius:18px;border:0;background:transparent;box-shadow:none}
.craft-bead.is-current{outline:4px solid #e5b952;outline-offset:5px;animation:hold-glow 2.6s ease-in-out infinite;z-index:2}
.craft-bead.cross.is-current{background:#fff1b84a;outline-width:3px}
.craft-bead.is-prayed:after{content:'';position:absolute;inset:-4px;border:1px solid #95bca780;border-radius:32%}
.craft-center{position:absolute;left:29%;top:29%;width:42%;height:26%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:1px;pointer-events:none}
.mary-companion{display:block;min-height:0}
.craft-center .mary-companion{height:85%;width:100%;filter:drop-shadow(0 3px 1px #42634c09)}
.craft-center>span{font-size:clamp(10px,1.2vw,16px);font-weight:850;white-space:nowrap;color:#516f6a}
@keyframes hold-glow{0%,100%{outline-color:#e2b14f;outline-offset:4px}50%{outline-color:#f6d483;outline-offset:8px}}

/* The prayer never needs a page or text-pane scrollbar. */
body[data-page="pray"] #app{padding:0 clamp(12px,3vw,42px) 14px}
.practice-top{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.practice-top>.text-button{font-size:13px;min-width:72px}
.practice-top>div{display:flex;flex-direction:column;align-items:center;gap:3px}
.practice-top strong{font-size:15px;font-weight:900}
.practice-top>div>span{font-size:12px;color:#6f806b;text-align:center}
.practice-top .icon-button{width:44px;height:44px;min-width:44px}
body[data-page="pray"] .journey-progress{height:5px;flex-shrink:0;margin:0 0 15px;background:#e9eadc}
.journey-progress>span{background:#83a584}
.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;flex:1;min-height:0}
.craft-board{display:flex;flex-direction:column;min-height:0;background:radial-gradient(ellipse at 50% 40%,#fffdf8,#f9eae3);border:1px solid #f2e6da;border-radius:30px;padding:20px 16px 14px}
.hold-guide{display:flex;gap:12px;align-items:center;justify-content:center;flex-shrink:0;min-height:48px}
.hold-guide h2{font-size:20px;letter-spacing:-.4px;line-height:1.25}
.hold-guide p{font-size:12px;color:#857d65;line-height:1.6;margin-top:3px}
.hand-circle{width:39px;height:39px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#fffaf3;color:#b58c6a}
.hand-circle>.icon{width:22px;height:22px}
.craft-footnote{display:flex;gap:7px;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:750;color:#9c8069;min-height:20px}
.craft-footnote .icon{width:15px;height:15px}
.practice-reader{display:flex;flex-direction:column;min-width:0;min-height:0;padding:clamp(18px,2.8vw,38px);border:1px solid #e9e6d8;border-radius:30px;background:#fffef9;box-shadow:0 5px 0 #ece6d642}
.practice-heading{flex-shrink:0}
.practice-heading h1,.practice-heading h2{font-size:clamp(26px,3vw,42px);letter-spacing:-1.2px;margin:8px 0 0}
.practice-heading .eyebrow{font-size:9px;letter-spacing:1.5px;color:#889779}
.cross-help{font-size:12px;color:#9b876d;margin-top:8px;line-height:1.4}
.recording-button .icon{width:18px;height:18px}
.practice-bottom{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-shrink:0;padding-top:14px}
.previous-prayer{display:flex;gap:8px;align-items:center;min-width:90px;min-height:48px;font-size:13px;font-weight:800;padding:0 10px}
.previous-prayer .icon{width:20px;height:20px}
.gentle-pace{font-size:11px;line-height:1.55;color:#8c927c;text-align:center;margin-left:auto}
.amen-next{font-size:16px;min-width:240px;min-height:54px}
.story-reader{justify-content:center;align-items:flex-start;gap:17px}
.story-bloom{background:#f4efd9;color:#c4a052;border-radius:20px;padding:17px}
.story-bloom>.icon{width:40px;height:40px}
.story-reader h1{font-size:clamp(27px,3vw,43px);line-height:1.15;letter-spacing:-1px}
.story-reader .story-text{font-size:clamp(16px,1.6vw,21px);line-height:1.65;margin:0}
.story-reader .story-thought{margin:0;font-size:14px;padding:14px;line-height:1.5;border-radius:15px}
.story-mary{font-size:11px;color:#8b927a}
.learn-compact{display:grid;grid-template-columns:.7fr 1fr;gap:30px;min-height:0;flex:1;padding:25px 0}
.learn-welcome{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:15px}
.learn-welcome>.mary-companion{width:130px;height:140px;flex-shrink:1}
.learn-welcome h1{font-size:42px}
.learn-welcome p{font-size:16px;color:#859077}
.learn-welcome label{font-size:12px;font-weight:800;margin-top:10px}
.learn-welcome select{width:100%;max-width:330px;min-height:48px;color:var(--ink);border:1px solid #d6e0ca;background:#f2f5e9;border-radius:12px;padding:10px;font-weight:800}

/* A short classroom welcome, including a custom intention. */
dialog[data-kind="setup"]{width:min(650px,calc(100% - 24px));padding:30px;max-height:calc(100dvh - 24px)}
dialog[data-kind="setup"] h2{font-size:31px;margin-top:13px;padding-right:10px}
dialog[data-kind="setup"]>p{font-size:14px;margin-top:9px}
dialog[data-kind="setup"] .intention-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 16px}
dialog[data-kind="setup"] .intention{min-height:104px;padding:12px 6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;border-radius:17px;font-size:13px;line-height:1.25}
.intention small{display:block;font-size:9px;font-weight:650;margin-top:5px;color:#7e8a6d}
dialog[data-kind="setup"] .intention .icon{width:27px;height:27px}
dialog[data-kind="setup"] .setup-story{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;margin:0 0 16px;padding:13px 17px;border-radius:16px;min-height:67px}
dialog[data-kind="setup"] .setup-story strong{margin-top:4px;font-size:15px}
dialog[data-kind="setup"] .setup-story>span:last-child{font-size:11px;font-weight:850;white-space:nowrap}
dialog[data-kind="setup"] .setup-story .icon{width:15px;height:15px}
dialog[data-kind="setup"]>.button{margin:0;min-height:52px}
dialog .dialog-close{right:15px;top:12px}
dialog .read-together-note{font-size:13px;padding:15px;background:#eef3e6;border-radius:14px}
.completion{padding:20px 0;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.completion-flower{margin:12px auto;height:160px;width:160px;flex-shrink:1;min-height:70px}
.completion-flower>.icon{height:100%;width:90px}
.completion-flower>.prayer-flower-art{height:100%;width:115px}
.completion h1{font-size:45px}
.completion>p{font-size:17px;line-height:1.55;margin-top:13px}
.completion-message{margin:15px auto}
.completion>.button{min-height:50px}

/* A living little garden; movement is decorative and never changes progress. */
.living-garden{flex:1;min-height:0;display:flex;flex-direction:column;padding:25px 0 10px}
.garden-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
.garden-heading h1{font-size:38px;margin:8px 0}
.garden-heading p{font-size:14px;color:#808e76}
.garden-heading>.button{min-width:150px}
.animated-meadow{position:relative;flex:1;min-height:0;border-radius:32px;overflow:hidden;background:linear-gradient(#dfeef0,#f1f2de 58%,#dfe9c1 59%,#bfd49b);isolation:isolate}
.meadow-sun{position:absolute;left:10%;top:9%;color:#e6bb5d;animation:sun-shimmer 7s ease-in-out infinite}
.meadow-sun .icon{width:75px;height:75px;fill:#ffdf85;stroke-width:1.2}
.meadow-cloud{position:absolute;top:9%;color:#fffdf1;filter:drop-shadow(0 4px 0 #cfdfde80);animation:cloud-drift 18s ease-in-out infinite alternate}
.meadow-cloud .icon{width:115px;height:75px;fill:#fffdf1;stroke-width:1}
.cloud-one{left:35%}.cloud-two{left:72%;top:16%;animation-delay:-8s;opacity:.8}
.garden-hills{position:absolute;inset:47% -15% -12%;background:#d6e3b7;border-radius:50% 80% 0 0;transform:rotate(-6deg);z-index:-1}
.garden-hills:after{content:'';position:absolute;inset:20% 0 -15% 25%;border-radius:65% 70% 0 0;background:#c7dca6;transform:rotate(14deg)}
.garden-empty{position:absolute;inset:15% 20% 13%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center}
.garden-empty img{min-height:0;width:100%;height:75%;object-fit:contain;max-width:400px;border-radius:48% 48% 43% 43%;mix-blend-mode:multiply;animation:lamb-breathe 5s ease-in-out infinite}
.garden-empty strong{font-size:22px}.garden-empty>span{font-size:13px;color:#71845f}
.butterfly{position:absolute;font-family:Georgia,serif;font-size:37px;color:#c895b1;font-weight:900;text-shadow:1px 2px #fff8;z-index:3;pointer-events:none;animation:butterfly-float 13s ease-in-out infinite}
.butterfly-one{left:23%;top:39%}.butterfly-two{left:76%;top:33%;color:#c5a257;animation-delay:-5s;animation-duration:17s}
.meadow-border{position:absolute;display:flex;align-items:flex-end;justify-content:space-around;bottom:-12px;left:0;right:0;height:22%;pointer-events:none;z-index:2}
.meadow-border>span{height:70%;width:6%;transform-origin:bottom;animation:flower-sway 4s ease-in-out infinite;animation-delay:var(--delay)}
.meadow-border>span:nth-child(3n){height:48%}.meadow-border svg{width:100%;height:100%}
.prayer-flowers{position:absolute;inset:22% 8% 12%;display:grid;grid-template-columns:repeat(var(--flowers,5),minmax(0,1fr));align-items:end;justify-items:center;gap:4px 10px}
.prayer-flowers.many-flowers{grid-template-columns:repeat(10,minmax(0,1fr));inset:21% 5% 10%}
.living-flower{height:100%;width:100%;max-height:210px;min-height:44px;min-width:44px;padding:0;transform-origin:center bottom;animation:flower-appear .8s both,flower-sway 4s ease-in-out infinite;animation-delay:var(--bloom-delay),var(--delay)}
.living-flower>svg{height:100%;width:100%;filter:drop-shadow(0 6px 3px #52774a18)}
.living-flower:hover{filter:brightness(1.07)}
.living-flower:focus-visible{outline-offset:0;border-radius:30px}
.garden-save{text-align:center;font-size:10px;color:#849272;padding-top:10px;min-height:25px}
.garden-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:6px 4px 0;font-size:12px;color:#567660;font-weight:800;flex-shrink:0}
.garden-pagination>div{display:flex;align-items:center;gap:10px}
.garden-pagination .icon-button{min-width:44px;min-height:44px}
@media(max-width:600px){.garden-pagination{font-size:10px;gap:5px}.garden-pagination>div{gap:5px}.garden-pagination .icon-button{width:44px;height:44px}.garden-save{padding-top:2px;min-height:18px}}
.flower-keepsake{height:170px;text-align:center;margin-bottom:20px;animation:flower-sway 4s ease-in-out infinite}
.flower-keepsake svg{height:100%;width:140px}
@keyframes flower-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes flower-appear{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes cloud-drift{from{translate:-10px 0}to{translate:35px 0}}
@keyframes sun-shimmer{50%{transform:rotate(12deg) scale(1.06);opacity:.8}}
@keyframes butterfly-float{0%,100%{transform:translate(0,0) rotate(-10deg) scaleX(.8)}25%{transform:translate(30px,-35px) rotate(12deg) scaleX(1)}50%{transform:translate(70px,-10px) rotate(-8deg) scaleX(.7)}75%{transform:translate(20px,10px) rotate(9deg) scaleX(1)}}
@keyframes lamb-breathe{50%{transform:translateY(-4px)}}

@media(max-width:800px){
  body[data-page] #app{padding-left:18px;padding-right:18px}
  body[data-page] .site-header{height:64px;min-height:64px}
  body[data-page] .nav-item{font-size:12px;padding:10px}
  body[data-page] .grownup-button span{display:none}
  .classroom-home{gap:24px;padding:20px 0}
  .school-badge{font-size:10px}.school-badge>span{display:none}
  .welcome-copy h1{font-size:50px;margin:15px 0}.bring-beads{font-size:14px}
  .start-decade{font-size:15px;padding:12px}.full-choice{font-size:13px}.full-choice>span{font-size:10px}
  .craft-sticker{font-size:10px;padding:8px}.practice-grid{gap:14px}
  .craft-board{padding:16px 9px 12px}.hold-guide{gap:7px}.hold-guide h2{font-size:17px}.hold-guide p{font-size:10px}
  .hand-circle{width:32px;height:32px}.craft-footnote{font-size:9px}
  .practice-reader{padding:20px}.practice-heading h1,.practice-heading h2{font-size:29px}
  .amen-next{min-width:220px}.gentle-pace{display:none}.learn-welcome h1{font-size:34px}
}
@media(max-width:600px) and (orientation:portrait){
  body[data-page] #app{padding-left:14px;padding-right:14px}
  body[data-page] .site-header{height:58px;min-height:58px;gap:8px}
  body[data-page] .brand{font-size:27px;gap:5px}.brand img{width:30px;height:30px}
  body[data-page] .nav-item span,body[data-page] .grownup-button span{display:none}
  body[data-page] .nav-item{padding:10px;border-radius:15px;min-width:42px}
  body[data-page] .site-header nav{gap:2px}.grownup-button{border-radius:15px!important;padding:9px!important}
  .classroom-home{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:7px;padding:12px 0 14px}
  .welcome-craft{border-radius:42% 42% 24% 24%;padding:0 10px;min-height:0;width:100%;max-width:420px;margin:auto;height:100%}
  .craft-sticker{display:none}.welcome-copy{align-items:center;text-align:center;padding:0}
  .welcome-copy h1{font-size:38px;letter-spacing:-1.7px;line-height:1.1;margin:9px 0 7px}.welcome-copy h1 br{display:none}.welcome-copy h1 em{margin-left:3px}
  .school-badge{font-size:10px;gap:6px}.school-badge>span{display:inline;font-size:9px}.school-badge .icon{width:15px;height:15px}
  .marian-welcome{font-size:14px;line-height:1.45}.bring-beads{display:none}
  .start-decade{min-height:51px;width:100%;font-size:16px;margin-top:15px}.full-choice{width:100%;min-height:44px;margin-top:9px;justify-content:center;font-size:13px;padding:8px 15px}.full-choice>span{margin-left:auto}
  .welcome-note{margin-top:10px;font-size:10px}.resume-link{font-size:11px;margin-top:3px;min-height:34px;padding:5px}
  body[data-page="pray"] #app{padding:0 10px 9px}
  .practice-top{min-height:53px;gap:5px}.practice-top>.text-button{min-width:36px;padding:6px}.practice-top>.text-button>span{display:none}
  .practice-top strong{font-size:13px}.practice-top>div>span{font-size:10px;line-height:1.3}.practice-top .icon-button{width:38px;height:38px;min-width:38px}
  body[data-page="pray"] .journey-progress{margin-bottom:8px;height:4px}
  .practice-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);gap:9px}
  .craft-board{border-radius:22px;padding:8px 8px 2px}
  .hold-guide{min-height:35px;gap:8px}.hold-guide h2{font-size:16px}.hold-guide p{font-size:9px;margin:0;line-height:1.3}.hand-circle{height:29px;width:29px}.hand-circle .icon{width:19px;height:19px}
  .craft-footnote{display:none}.craft-center>span{font-size:10px}.bead-label{font-size:14px}.bead-label .icon{width:17px;height:17px}
  .craft-bead{min-width:36px;min-height:36px}.craft-bead.cross{min-width:50px;min-height:50px}.craft-bead.is-current{outline-width:3px}
  .practice-reader{padding:13px 16px;border-radius:22px;box-shadow:0 2px 0 #ece6d642}
  .practice-heading .eyebrow{display:none}.practice-heading h1,.practice-heading h2{font-size:25px;letter-spacing:-.6px;margin:0}.cross-help{font-size:10px;margin:4px 0 0;line-height:1.25}.recording-button .icon{height:15px;width:15px}
  .practice-bottom{min-height:60px;padding-top:8px;gap:10px}.previous-prayer{min-height:45px;min-width:45px;padding:8px}.previous-prayer span{display:none}.amen-next{flex:1;min-width:0;min-height:46px;font-size:14px;padding:10px 12px;border-radius:14px}
  .story-reader{gap:8px}.story-bloom{display:none}.story-reader>.eyebrow{font-size:8px}.story-reader h1{font-size:25px}.story-reader .story-text{font-size:14px;line-height:1.5}.story-reader .story-thought{font-size:11px;padding:8px;line-height:1.3}.story-mary{font-size:10px}
  .learn-compact{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:18px 0;gap:18px}.learn-welcome{gap:7px}.learn-welcome>.mary-companion,.learn-welcome p{display:none}.learn-welcome h1{font-size:29px}.learn-welcome h1 br{display:none}.learn-welcome label{margin:7px 0 0;font-size:11px}.learn-welcome select{max-width:none}.learn-compact .practice-reader{padding:20px}
  dialog[data-kind="setup"]{padding:25px 18px 18px;border-radius:23px}
  dialog[data-kind="setup"]>.eyebrow{font-size:7px;letter-spacing:1px;max-width:90%}
  dialog[data-kind="setup"] h2{font-size:26px;margin-top:14px;letter-spacing:-.8px}
  dialog[data-kind="setup"]>p{font-size:12px;margin-top:8px}
  dialog[data-kind="setup"] .intention-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0 12px}
  dialog[data-kind="setup"] .intention{min-height:80px;padding:8px 6px;font-size:12px;gap:5px;flex-direction:row}
  dialog[data-kind="setup"] .intention .icon{width:24px;height:24px}.intention small{font-size:8px;margin-top:4px}
  dialog[data-kind="setup"] .setup-story{min-height:58px;padding:10px 12px;margin-bottom:12px}.setup-story .eyebrow{font-size:7px!important}.setup-story strong{font-size:13px!important}
  dialog[data-kind="setup"]>.button{font-size:14px;min-height:47px;padding:11px}
  .living-garden{padding-top:18px}.garden-heading{align-items:flex-start;gap:8px;margin-bottom:15px}.garden-heading h1{font-size:28px;letter-spacing:-1px}.garden-heading p{font-size:11px}.garden-heading .eyebrow{font-size:7px;letter-spacing:.9px}.garden-heading>.button{min-width:0;font-size:12px;padding:10px;gap:5px;min-height:44px}.garden-heading>.button>.icon{width:17px;height:17px}
  .animated-meadow{border-radius:24px}.meadow-sun .icon{width:50px;height:50px}.meadow-cloud .icon{width:75px;height:50px}.garden-empty{inset:16% 4% 20%;gap:10px}.garden-empty strong{font-size:19px}.garden-empty>span{font-size:12px}.butterfly{font-size:28px}.meadow-border{height:18%}.meadow-border>span{width:10%}
  .prayer-flowers,.prayer-flowers.many-flowers{grid-template-columns:repeat(var(--flowers,5),minmax(0,1fr));inset:22% 3% 8%;gap:0 3px}
  .prayer-flowers:not(.many-flowers){grid-template-columns:repeat(var(--small-flowers,3),minmax(0,1fr))}
  .completion h1{font-size:36px}.completion>p{font-size:14px}.completion-message{font-size:10px}.completion .eyebrow{font-size:7px}
}
@media(max-width:600px) and (max-height:700px) and (orientation:portrait){
  .practice-grid{grid-template-rows:minmax(0,1.03fr) minmax(0,1fr)}
  .practice-reader{padding:10px 13px}.practice-heading h1{font-size:23px}.hold-guide h2{font-size:14px}.hold-guide p{font-size:8px}.practice-top{min-height:47px}.practice-bottom{min-height:55px;padding-top:7px}.cross-help{font-size:9px}
  .welcome-copy h1{font-size:33px;margin:7px 0}.marian-welcome{font-size:12px}.welcome-note{display:none}.start-decade{margin-top:10px;min-height:46px}.full-choice{min-height:40px;margin-top:7px}.classroom-home{padding-top:6px;padding-bottom:12px}
  dialog[data-kind="setup"]{padding-top:21px}dialog[data-kind="setup"] .intention{min-height:68px}.story-reader .story-text{font-size:13px}.story-reader h1{font-size:23px}.story-reader .story-thought{font-size:10px}.story-reader{gap:6px}
}
@media(max-height:560px) and (orientation:landscape){
  body[data-page] .site-header{height:54px;min-height:54px}.classroom-home{padding:10px 0}.welcome-copy h1{font-size:40px;margin:10px 0}.marian-welcome{font-size:14px}.bring-beads,.welcome-note{display:none}.start-decade{min-height:46px;margin-top:14px}.full-choice{min-height:40px;margin-top:8px}.school-badge{font-size:9px}
  .practice-top{min-height:48px}.practice-top strong{font-size:12px}.practice-top>div>span{font-size:10px}.practice-grid{gap:12px}.practice-board{padding:10px}.practice-reader{padding:12px 18px}.practice-heading h1{font-size:23px}.practice-heading .eyebrow,.craft-footnote,.cross-help{display:none}.practice-bottom{min-height:55px;padding-top:8px}.amen-next{min-height:43px;font-size:13px}.hold-guide{min-height:32px}.hold-guide h2{font-size:14px}.hold-guide p{font-size:9px}.craft-board{padding:9px}.craft-bead{min-width:28px;min-height:28px}.bead-label{font-size:12px}.craft-center>span{font-size:9px}.craft-center .mary-companion{height:80%}
  .story-reader{gap:7px}.story-bloom{display:none}.story-reader h1{font-size:24px}.story-reader .story-text{font-size:14px}.story-reader .story-thought{font-size:11px;padding:10px}.story-mary{font-size:10px}
  dialog[data-kind="setup"]{padding:18px 23px}dialog[data-kind="setup"] h2{font-size:26px;margin-top:7px}dialog[data-kind="setup"]>p{display:none}dialog[data-kind="setup"] .intention-grid{margin:12px 0;gap:7px}dialog[data-kind="setup"] .intention{min-height:58px;flex-direction:row;padding:7px;font-size:11px}dialog[data-kind="setup"] .setup-story{min-height:47px;margin-bottom:10px;padding:7px 13px}dialog[data-kind="setup"]>.button{min-height:42px;padding:9px}
  .garden-heading{margin-bottom:10px}.garden-heading h1{font-size:29px}.living-garden{padding-top:12px}.garden-heading p{font-size:11px}.garden-empty{inset:4% 25% 15%}.garden-empty strong{font-size:17px}.garden-empty span{font-size:11px}.garden-empty img{height:60%}.completion-flower{height:85px;margin:5px}.completion h1{font-size:32px}.completion>p{font-size:12px}.completion-message{margin:8px}.completion>.button{min-height:40px;font-size:13px}.completion{padding:6px 0}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:600px) and (orientation:portrait){
  .practice-grid{grid-template-rows:minmax(0,1.45fr) minmax(0,1fr)}
  .craft-center>span{display:none}
  .craft-bead{min-width:40px;min-height:40px}
}
@media(max-width:600px) and (max-height:700px) and (orientation:portrait){
  .practice-grid{grid-template-rows:minmax(0,1.3fr) minmax(0,1fr)}
}
.butterfly>svg{width:38px;height:31px;overflow:visible}.butterfly-wings{transform-origin:center;animation:wing-flutter .65s ease-in-out infinite alternate}@keyframes wing-flutter{to{transform:scaleX(.65)}}
.craft-bead.green{background:linear-gradient(110deg,color-mix(in srgb,var(--bead-color),white 45%),var(--bead-color) 45%,color-mix(in srgb,var(--bead-color),black 18%) 84%,var(--bead-color));border-color:var(--bead-color)}
.craft-bead.yellow{background:linear-gradient(110deg,color-mix(in srgb,var(--father-color),white 45%),var(--father-color) 45%,color-mix(in srgb,var(--father-color),black 14%) 84%,var(--father-color));border-color:var(--father-color)}
.craft-bead .pony-hole{background:#233c36}.craft-bead.yellow .bead-label{color:#fff;text-shadow:0 1px 2px #384d3e}.craft-space[data-shape="circle"] .craft-center{top:27%;height:29%}
.admin-entry{margin:20px 0}.admin-form{display:grid;gap:18px;margin-top:20px}.admin-form fieldset{border:1px solid #dee4d5;border-radius:16px;padding:16px;min-width:0}.admin-form legend{font-weight:850;font-size:16px;padding:0 5px}.admin-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}.admin-form input:not([type=checkbox]),.admin-form select{min-height:44px;width:100%;min-width:0;padding:9px 12px;border:1px solid #cbd7c2;border-radius:10px;background:#fffef9;color:var(--ink);font:inherit}.admin-form .admin-check{flex-direction:row;align-items:center;gap:10px;margin-top:14px;font-size:13px}.admin-check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--green)}.admin-form small,.admin-resets small{display:block;font-size:11px;color:#6c7966;line-height:1.6;margin-top:10px}.admin-note{font-size:13px!important;line-height:1.6!important}.admin-resets{border-top:1px solid #dce2d1;margin:25px 0;padding-top:22px}.admin-resets>p{font-size:13px;margin:12px 0}.admin-resets .button{font-size:12px;padding:10px}.admin-resets>.text-button{display:flex;font-size:12px;margin-top:12px}.admin-form>#gate-error{font-size:13px;color:#91475b;margin:0}.admin-form>#gate-error:empty{display:none}dialog[data-kind="admin"]{width:min(640px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:30px}dialog[data-kind="admin"] h2{font-size:30px;margin-top:16px}dialog[data-kind="admin"] .button{min-height:46px}
.garden-still *,.garden-still *:before,.garden-still *:after{animation:none!important;transition:none!important}
.garden-shrine{position:absolute;left:50%;top:4%;height:52%;width:30%;transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:0}
.garden-shrine .mary-sculpture{display:block;height:calc(100% - 26px);width:100%;min-height:0;object-fit:contain;filter:drop-shadow(0 4px 3px #71906318)}.garden-shrine figcaption{font-size:12px;font-weight:850;color:#567660;background:#fffbeaeb;border:1px solid #e8dfbd;border-radius:12px;padding:4px 12px;white-space:nowrap}
.animated-meadow:has(.garden-empty) .garden-shrine{left:23%;top:10%;height:72%;width:32%}.animated-meadow .garden-empty{inset:17% 6% 18% 43%}.animated-meadow .garden-empty strong{font-size:clamp(16px,2vw,22px)}
.animated-meadow .prayer-flowers{inset:55% 7% 10%;z-index:1}.animated-meadow .prayer-flowers.many-flowers{inset:53% 4% 8%}
@media(max-width:600px){dialog[data-kind="admin"]{padding:24px 18px}.admin-fields{gap:10px}.admin-form fieldset{padding:12px}.admin-form select,.admin-form input:not([type=checkbox]){font-size:12px;padding:8px}.admin-form legend{font-size:14px}.garden-shrine{height:44%;top:5%;width:40%}.garden-shrine figcaption{font-size:10px;padding:3px 9px}.animated-meadow .prayer-flowers,.animated-meadow .prayer-flowers.many-flowers{inset:49% 3% 8%;gap:0 3px}.animated-meadow:has(.garden-empty) .garden-shrine{left:23%;height:61%;top:17%;width:38%}.animated-meadow .garden-empty{inset:23% 4% 20% 44%}.garden-empty>span{font-size:10px}dialog[data-kind="setup"] .intention{min-height:60px}dialog[data-kind="setup"] .intention-grid{margin-top:12px;margin-bottom:10px;gap:6px}dialog[data-kind="setup"] .intention small{font-size:8px}}
@media(max-width:600px) and (orientation:portrait){.animated-meadow:has(.many-flowers) .garden-shrine{height:32%;top:3%}.animated-meadow .prayer-flowers.many-flowers{grid-template-columns:repeat(6,minmax(0,1fr));inset:39% 3% 8%}}
@media(max-height:560px) and (orientation:landscape){.garden-shrine{height:83%;left:18%;width:24%;top:1%}.animated-meadow .prayer-flowers,.animated-meadow .prayer-flowers.many-flowers{inset:12% 5% 10% 33%}.animated-meadow .garden-empty{inset:5% 9% 14% 40%}dialog[data-kind="setup"]{padding:12px 20px}dialog[data-kind="setup"] .intention-grid{grid-template-columns:repeat(4,1fr)}dialog[data-kind="setup"] .intention{min-height:50px}dialog[data-kind="setup"] .setup-story{margin-bottom:8px}}
dialog[data-kind="stories"]{padding:26px;max-height:calc(100dvh - 24px)}
dialog[data-kind="stories"] h2{font-size:28px;margin-top:10px}
dialog[data-kind="stories"] .mystery-tabs{margin-top:15px}
dialog[data-kind="stories"] .mystery-tabs>button{min-height:53px;padding:8px 3px;gap:4px}
dialog[data-kind="stories"] .mystery-days{margin-top:10px;font-size:10px!important;line-height:1.4!important}
dialog[data-kind="stories"] .story-list{margin-top:10px;gap:3px}
dialog[data-kind="stories"] .story-list>button{min-height:48px;padding:5px;gap:9px}
dialog[data-kind="stories"] .story-number{height:35px;width:35px}
dialog[data-kind="stories"] .story-number>.icon{width:21px;height:21px}
dialog[data-kind="stories"] .story-list strong{font-size:12px}
dialog[data-kind="stories"] .story-list small{font-size:9px}
dialog[data-kind="stories"] .modal-note{font-size:9px;margin-top:13px}
dialog[data-kind="stories"]>.button{min-height:44px;padding:10px;font-size:13px;margin-top:12px}
@media(max-height:560px) and (orientation:landscape){
 dialog[data-kind="stories"]{padding:18px 25px}
 dialog[data-kind="stories"] h2{font-size:25px;margin-top:7px}
 dialog[data-kind="stories"] .mystery-tabs{margin-top:10px}
 dialog[data-kind="stories"] .mystery-tabs>button{min-height:36px;flex-direction:row;padding:5px}
 dialog[data-kind="stories"] .story-list{display:grid;grid-template-columns:1fr 1fr}
 dialog[data-kind="stories"] .story-list>button{min-height:41px}
 dialog[data-kind="stories"] .story-list small,dialog[data-kind="stories"] .mystery-days,dialog[data-kind="stories"]>.modal-note{display:none}
 dialog[data-kind="stories"] .story-list strong{font-size:11px}
}

/* One complete prayer, one recording, with a quiet read-along highlight. */
.whole-reading{display:flex;flex-direction:column;flex:1;min-height:0}
.prayer-copy{flex:1;min-height:0;display:flex;align-items:center;margin:18px 0}
.prayer-copy p{width:100%;margin:0;font-size:26px;font-weight:750;line-height:1.47;letter-spacing:-.25px;text-wrap:pretty;color:#304e43}
.prayer-copy [data-word-index]{border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.prayer-copy .spoken{background:#f8df96;color:#304e43;box-shadow:0 2px 0 #d8b55b}
.prayer-audio{display:flex;gap:10px;flex-shrink:0}
.prayer-audio .hear-button{flex:1;min-height:50px;box-shadow:0 3px 0 #d5dfc9;background:#ecf3e5;border:1px solid #d9e4ce;font-size:15px;border-radius:16px;padding:10px}
.prayer-audio .speed-button{width:50px;min-height:50px;border:1px solid #e3e5d8;border-radius:16px;padding:5px;background:#f8f7ee;font-size:13px;flex-shrink:0}
.practice-top>div{min-width:0;flex:1}
.practice-top>div>span,.flower-memory strong{overflow-wrap:anywhere}
.intention[data-id="custom"] small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
dialog[data-kind="custom-intention"]{width:min(520px,calc(100% - 24px));padding:32px;max-height:calc(100dvh - 24px)}
dialog[data-kind="custom-intention"] h2{font-size:30px;margin-top:14px}
dialog[data-kind="custom-intention"]>p{font-size:15px;margin:13px 0 22px}
#custom-intention-form label{display:block;font-size:14px;font-weight:800;margin-bottom:8px}
#custom-intention{display:block;width:100%;min-width:0;min-height:52px;padding:12px 14px;border:1px solid #bac9ae;border-radius:13px;background:#fffef9;color:var(--ink);font:inherit;font-size:16px}
#intention-help{display:block;font-size:11px;line-height:1.5;color:#6d7b63;margin-top:8px}
#intention-error{font-size:12px;color:#954b56;margin-top:8px}
#intention-error:empty{display:none}
dialog[data-kind="custom-intention"]>.text-button{margin-top:10px}
@media(max-width:600px){dialog[data-kind="custom-intention"]{padding:24px 20px}dialog[data-kind="custom-intention"] h2{font-size:27px}}
@media(max-height:450px) and (orientation:landscape){dialog[data-kind="custom-intention"]{padding:20px 25px}dialog[data-kind="custom-intention"]>p{margin:8px 0 12px}dialog[data-kind="custom-intention"] h2{font-size:25px;margin-top:8px}#custom-intention{min-height:44px}#custom-intention-form>.button{min-height:44px;margin-top:12px;padding:10px}}
body[data-page] .practice-grid.needs-room{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
body[data-page] .practice-grid.needs-room .craft-board{display:none}
.learn-compact.needs-room .learn-welcome h1,.learn-compact.needs-room .learn-welcome>.mary-companion,.learn-compact.needs-room .learn-welcome p{display:none}

/* Rounded pony beads: each hole follows the cord and every numeral stays upright. */
.craft-board{background:radial-gradient(ellipse at 50% 40%,#fffef7 12%,#faf0e4 77%,#f4e9df);border-color:#e9ddc8;box-shadow:inset 0 0 40px #fff9e9}
.craft-center,.craft-space[data-shape="circle"] .craft-center{left:39%;top:31%;width:22%;height:23%;gap:0}
.craft-center .mary-companion{height:100%;width:100%;filter:drop-shadow(0 0 12px #edd49a66)}
.craft-space[data-shape="circle"] .craft-center{top:27%;height:25%}
.craft-bead{width:12.5%;height:9.2%;border-radius:33%;box-shadow:inset 2px 3px 3px #ffffd999,inset -2px -3px 3px #183e3f38,0 4px 5px #4a504121}
.craft-bead .pony-hole{top:1px;left:25%;width:50%;height:15%;background:#1c493e;box-shadow:inset 0 1px 2px #0e292b99,0 1px 0 #e5fff0aa;opacity:.84}
.craft-bead .hole-exit{top:auto;bottom:1px;opacity:.28;box-shadow:none;height:9%}
.bead-label{position:relative;z-index:1;padding:0;font-size:clamp(14px,5cqw,24px);text-shadow:0 1px 2px #173d3d99}
.craft-bead.is-prayed:after{inset:-3px;border:1px solid #adba9780;border-radius:37%}
.craft-bead.is-current{outline:0;animation:none;z-index:3;box-shadow:inset 2px 3px 3px #ffffdeb3,inset -2px -3px 3px #183e3f38,0 0 0 3px #ffefb5,0 0 12px 5px #f6d373a6}
.craft-bead.cross.is-current{background:transparent;box-shadow:none;outline:0}
.bead-radiance{position:absolute;inset:-60%;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,transparent 0 25%,#ffeaaa99 38%,#ecc76c52 50%,#f4d77e00 70%);animation:golden-breath 4s ease-in-out infinite}
.cross .bead-radiance{inset:-15% -40%;background:radial-gradient(ellipse,#fff6c7cc 4%,#ffe6a07d 40%,#f4d77e00 70%)}
.bead-radiance i{position:absolute;left:23%;top:15%;height:13px;width:9px;background:#dbae43;clip-path:polygon(50% 0,65% 37%,100% 50%,65% 63%,50% 100%,35% 63%,0 50%,35% 37%);animation:golden-star 4s ease-in-out infinite}
.bead-radiance i:nth-child(2){left:81%;top:38%;height:9px;width:7px;animation-delay:-1.4s}
.bead-radiance i:nth-child(3){left:31%;top:84%;height:7px;width:5px;animation-delay:-2.7s}
@keyframes golden-breath{0%,100%{opacity:.7;scale:.94}50%{opacity:1;scale:1.1}}
@keyframes golden-star{0%,100%{opacity:.35;scale:.8}50%{opacity:1;scale:1.1}}

/* A flower is a dated keepsake, including the exact intention at completion. */
dialog[data-kind="flower"]{width:min(530px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:28px 35px;text-align:center}
dialog[data-kind="flower"] .flower-keepsake{height:105px;margin:0 0 12px}
dialog[data-kind="flower"] h2{font-size:31px;line-height:1.13;margin:12px 0 18px}
dialog[data-kind="flower"] .eyebrow{font-size:9px}
.flower-memory{display:flex;flex-direction:column;gap:7px;padding:16px;border:1px solid #e2e6d4;border-radius:19px;background:#f2f5e9}
.flower-memory>span{font-size:12px;color:#6d7b63}
.flower-memory strong{font-size:22px;line-height:1.25}
.flower-memory time{font-size:14px;color:#6c785c;font-weight:750}
.flower-memory small{font-size:11px;color:#6c785c}
dialog[data-kind="flower"]>p{font-size:13px;line-height:1.5;margin:15px 0}
dialog[data-kind="flower"]>.button{margin:0;min-height:48px;font-size:14px}
@media(max-width:600px) and (orientation:portrait){
  .practice-grid{grid-template-rows:minmax(0,.82fr) minmax(0,1.18fr)}
  .practice-grid.long-prayer{grid-template-rows:55px minmax(0,1fr)}
  .long-prayer .craft-board{padding:5px 10px;justify-content:center}
  .long-prayer .craft-space{display:none}
  .prayer-copy{margin:10px 0}
  .prayer-copy p{line-height:1.38}
  .prayer-audio{gap:8px}
  .prayer-audio .hear-button{min-height:44px;font-size:13px;border-radius:12px}
  .prayer-audio .speed-button{min-height:44px;width:44px;border-radius:12px;font-size:12px}
  .learn-compact{padding:10px 0;gap:12px}
  .learn-compact .practice-reader{padding:16px}
  .craft-bead{min-width:24px;min-height:24px}
  .craft-bead.cross{min-width:40px;min-height:44px}
  .bead-label{font-size:clamp(11px,6cqw,16px)}
  .bead-label .icon{width:15px;height:15px}
  .bead-radiance i{height:9px;width:7px}
  dialog[data-kind="flower"]{padding:23px 20px}
  dialog[data-kind="flower"] .flower-keepsake{height:85px}
  dialog[data-kind="flower"] h2{font-size:28px}
  .flower-memory strong{font-size:21px}
}
@media(max-height:560px) and (orientation:landscape){
  .practice-grid.long-prayer{grid-template-columns:1fr}
  .long-prayer .craft-board{display:none}
  .learn-compact{grid-template-columns:180px minmax(0,1fr);gap:18px;padding:10px 0}
  .learn-welcome{gap:8px}.learn-welcome>.mary-companion,.learn-welcome p{display:none}
  .learn-welcome h1{font-size:27px;line-height:1.2;letter-spacing:-.7px}
  .learn-welcome label{font-size:11px;margin:0}.learn-welcome select{font-size:11px;min-height:44px}
  .practice-heading h2{font-size:23px;margin:0}
  .prayer-copy{margin:6px 0}.prayer-copy p{line-height:1.32}
  .prayer-audio .hear-button,.prayer-audio .speed-button{min-height:40px;font-size:12px;padding:7px}
  dialog[data-kind="flower"]{padding:18px 28px}
  dialog[data-kind="flower"] .flower-keepsake{display:none}
  dialog[data-kind="flower"] h2{font-size:24px;margin:7px 0 10px}
  dialog[data-kind="flower"] h2 br{display:none}
  .flower-memory{padding:10px;gap:4px}.flower-memory strong{font-size:20px}
  dialog[data-kind="flower"]>p{margin:10px 0}
}