/* Pho 20/10 loader: CSS pixel art, no assets */
#pl{--bg:#ffc4d6;--bg2:#ffe3ec;--ink:#3a142e;--plum:#461838;--pink:#ff6fa8;--pink2:#ff8cba;--red:#e8244f;--gold:#ffd65c;--leaf:#3fa34d;--leaf2:#2b7a38;
position:fixed;inset:0;z-index:50;height:100vh;height:100dvh;overflow:hidden;
background:radial-gradient(circle at 50% 30%,var(--bg2),var(--bg) 70%);color:var(--ink);
font:600 15px/1.35 'Noto Sans','Segoe UI',Roboto,Arial,sans-serif;
-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;
transition:opacity .45s ease}
#pl *{box-sizing:border-box}
#pl.pl-out{opacity:0;pointer-events:none}
.pl-main{position:relative;z-index:1;height:100%;max-width:560px;margin:0 auto;
padding:max(16px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.pl-title{margin:0;font:900 clamp(26px,9vw,42px)/1 ui-monospace,'Courier New',monospace;letter-spacing:1px;
color:var(--red);text-shadow:3px 3px 0 var(--gold),5px 5px 0 var(--ink)}
.pl-title b{color:var(--pink)}
.pl-stage{margin:4px 0 0;font-size:13px;opacity:.8}
/* garden */
.pl-garden{position:relative;width:100%;height:clamp(110px,26vh,190px);flex:none}
.pl-row{position:absolute;left:4%;right:4%;bottom:18px;height:100%;display:flex;justify-content:space-around;align-items:flex-end}
.pl-fl{position:relative;width:28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.pl-st{width:var(--u,4px);height:0;background:var(--leaf);transition:height .5s steps(4);position:relative}
.pl-st::before,.pl-st::after{content:"";position:absolute;width:calc(var(--u,4px)*2);height:var(--u,4px);background:var(--leaf2);top:55%;opacity:0;transition:opacity .3s}
.pl-st::before{right:100%}.pl-st::after{left:100%;top:30%}
.pl-fl.pl-lf .pl-st::before,.pl-fl.pl-lf .pl-st::after{opacity:1}
.pl-hd{position:relative;width:0;height:0;transform:scale(0);transform-origin:50% 80%;transition:transform .4s steps(3)}
.pl-hd i{position:absolute;display:block;background:transparent}
.pl-sway{animation:pl-sway 2.6s ease-in-out infinite alternate}
.pl-fl:nth-child(2n) .pl-sway{animation-delay:-1.3s}
.pl-ground{position:absolute;left:0;right:0;bottom:0;height:18px;border-top:4px solid var(--leaf);
background:repeating-linear-gradient(90deg,#8a4b36 0 8px,#7a3f2d 8px 16px);box-shadow:0 -8px 0 -4px var(--leaf2) inset}
/* info */
.pl-info{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pl-pct{font:900 34px/1 ui-monospace,'Courier New',monospace;color:var(--plum)}
.pl-bar{width:100%;height:16px;border:3px solid var(--ink);background:var(--plum);box-shadow:0 0 0 3px var(--gold);overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--pink) 0 6px,var(--pink2) 6px 12px);transition:width .3s linear}
.pl-ind .pl-bar i{width:30%;animation:pl-ind 1.2s linear infinite}
.pl-start .pl-bar i{width:100%;background:repeating-linear-gradient(45deg,var(--pink) 0 6px,var(--pink2) 6px 12px);background-size:17px 17px;animation:pl-shim .6s linear infinite}
.pl-meta{width:100%;display:flex;justify-content:space-between;gap:8px;font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}
.pl-slow{margin:0;padding:4px 10px;background:var(--gold);border:2px solid var(--ink);font-size:13px}
.pl-tip{margin:4px 0 0;min-height:3.9em;font-size:14px;font-weight:500;transition:opacity .3s;max-width:34em}
.pl-tip.pl-hide{opacity:0}
.pl-cnt{margin:0;font-size:13px;color:var(--red)}
.pl-cnt.pl-bump{animation:pl-bump .25s steps(2)}
/* petals */
.pl-sky{position:absolute;inset:0;z-index:2;pointer-events:none}
.pl-p{position:absolute;top:-48px;width:48px;height:48px;margin-left:-24px;pointer-events:auto;cursor:pointer;animation:pl-fall var(--d,7s) linear forwards}
.pl-p b{position:absolute;inset:0;animation:pl-sway2 1.4s ease-in-out infinite alternate}
.pl-p b::before{content:"";position:absolute;left:14px;top:14px;width:4px;height:4px;
box-shadow:4px 0 var(--c),8px 0 var(--c),0 4px var(--c),4px 4px var(--c),8px 4px var(--c2),0 8px var(--c),4px 8px var(--c2),12px 4px var(--c)}
.pl-p.pl-pop{animation-play-state:paused;pointer-events:none}
.pl-p.pl-pop b{animation:pl-pop .35s steps(3) forwards}
.pl-p.pl-pop::after{content:"+1";position:absolute;left:12px;top:0;font:900 16px ui-monospace,monospace;color:var(--red);text-shadow:1px 1px 0 var(--gold);animation:pl-up .6s forwards}
/* error */
.pl-err{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:rgba(255,196,214,.96)}
.pl-err[hidden],.pl-slow[hidden]{display:none}
.pl-err h2{margin:0;font:900 clamp(18px,6vw,24px) ui-monospace,monospace;color:var(--red)}
.pl-err p{margin:0;max-width:30em;font-weight:500}
.pl-err small{opacity:.6;word-break:break-word;max-width:30em}
.pl-btn{font:900 17px ui-monospace,monospace;color:#fff;background:var(--red);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 26px;cursor:pointer;min-height:44px}
.pl-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.pl-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* landscape phones */
@media (orientation:landscape) and (max-height:540px){
.pl-main{max-width:820px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"top info" "gar info";align-content:center;column-gap:24px;row-gap:6px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.pl-top{grid-area:top}.pl-garden{grid-area:gar;height:clamp(80px,38vh,170px)}.pl-info{grid-area:info}
.pl-title{font-size:clamp(24px,7vh,38px)}.pl-pct{font-size:28px}.pl-tip{min-height:3.9em;font-size:13px}}
@media (max-height:380px){.pl-stage{display:none}.pl-tip{min-height:0}}
@media (max-width:340px){#pl{font-size:14px}.pl-pct{font-size:28px}.pl-meta{font-size:11px}.pl-tip{font-size:13px}}
@keyframes pl-fall{to{transform:translate3d(var(--x,0),calc(100vh + 100px),0)}}
@keyframes pl-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes pl-sway2{from{transform:translateX(-10px) rotate(-25deg)}to{transform:translateX(10px) rotate(30deg)}}
@keyframes pl-pop{50%{transform:scale(1.6);opacity:.8}to{transform:scale(2.2);opacity:0}}
@keyframes pl-up{to{transform:translateY(-22px);opacity:0}}
@keyframes pl-bump{50%{transform:scale(1.15)}}
@keyframes pl-ind{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@keyframes pl-shim{from{background-position:0 0}to{background-position:17px 0}}
@keyframes pl-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
#pl *,#pl *::before,#pl *::after{transition:none!important;animation:none!important}
.pl-p{animation:pl-fade .01s!important}
.pl-ind .pl-bar i{width:100%;opacity:.5}}
.pl-btn2{background:#fff;color:var(--red)}