/* The Drop phone pages. Every rule below is lifted verbatim from design/Main.dc.html's <style> block
   (only the Google Fonts link is replaced by the self-hosted /assets/fonts.css). The few rules at the
   bottom replace the design canvas's device frame with a full-viewport stage. */
body{margin:0}
a{color:#3ef0ff}a:hover{color:#9ff8ff}
.ps{font-family:'Press Start 2P',monospace}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
.frame{background:#14143c;box-shadow:0 -4px 0 0 #3ef0ff,0 4px 0 0 #3ef0ff,-4px 0 0 0 #3ef0ff,4px 0 0 0 #3ef0ff,0 0 22px 2px rgba(62,240,255,.25)}
.frame-mag{background:#14143c;box-shadow:0 -4px 0 0 #ff3ea5,0 4px 0 0 #ff3ea5,-4px 0 0 0 #ff3ea5,4px 0 0 0 #ff3ea5,0 0 22px 2px rgba(255,62,165,.25)}
.frame-red{background:#2a0f22;box-shadow:0 -4px 0 0 #ff4a5a,0 4px 0 0 #ff4a5a,-4px 0 0 0 #ff4a5a,4px 0 0 0 #ff4a5a}
.px-in{width:100%;box-sizing:border-box;background:#0b0b2a;border:0;color:#eafcff;font-family:'Share Tech Mono',monospace;font-size:20px;padding:12px 14px;min-height:52px;box-shadow:0 -4px 0 0 #2f6f9e,0 4px 0 0 #2f6f9e,-4px 0 0 0 #2f6f9e,4px 0 0 0 #2f6f9e;outline:none}
.px-in:focus{box-shadow:0 -4px 0 0 #3ef0ff,0 4px 0 0 #3ef0ff,-4px 0 0 0 #3ef0ff,4px 0 0 0 #3ef0ff,0 0 16px rgba(62,240,255,.5)}
.px-in::placeholder{color:#6f7bb8}
.bad{box-shadow:0 -4px 0 0 #ff4a5a,0 4px 0 0 #ff4a5a,-4px 0 0 0 #ff4a5a,4px 0 0 0 #ff4a5a,0 0 16px rgba(255,74,90,.55);animation:blink 1s steps(2) infinite}
.btn-main{border:0;background:#ff3ea5;color:#0b0b2a;font-family:'Press Start 2P',monospace;font-size:15px;letter-spacing:1px;min-height:58px;cursor:pointer;box-shadow:0 -4px 0 0 #ff3ea5,0 5px 0 0 #a3165f,-4px 0 0 0 #ff3ea5,4px 0 0 0 #ff3ea5,0 0 26px rgba(255,62,165,.55)}
.btn-main:active{transform:translateY(4px)}
.melt{transform-origin:50% 50%;animation:melt 1.3s steps(4) forwards;pointer-events:none}
@keyframes melt{0%{transform:none;opacity:1}18%{transform:scale(1.04,.8);opacity:1}32%{transform:scale(.55,.55);opacity:1}40%{transform:scale(.25,.35);opacity:0}100%{transform:scale(.25,.35);opacity:0}}
.bigdrop{transform-origin:50% 50%;animation:bigdrop 1.3s steps(4) both;z-index:3}
@keyframes bigdrop{0%,30%{transform:scale(1.6,.35);opacity:0}36%{transform:scale(1.4,.6);opacity:1}48%{transform:scale(.88,1.18);opacity:1}58%{transform:scale(1.05,.95)}66%{transform:translateY(0) scale(1,1);opacity:1}94%{transform:translateY(71px) scale(.92,1.12);opacity:1}100%{transform:translateY(71px);opacity:0}}
.bigrip{transform-origin:center;animation:bigrip .9s steps(6) both;z-index:2}
@keyframes bigrip{0%{transform:scaleX(.1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.bigsl{animation:bigsl .8s steps(6) both;z-index:2}
.bigsr{animation:bigsr .8s steps(6) both;z-index:2}
@keyframes bigsl{0%{transform:translate(0,0);opacity:1}50%{transform:translate(-26px,-44px);opacity:1}100%{transform:translate(-40px,0);opacity:0}}
@keyframes bigsr{0%{transform:translate(0,0);opacity:1}50%{transform:translate(26px,-44px);opacity:1}100%{transform:translate(40px,0);opacity:0}}
.tank-fail .fill{background:#5a1830}.tank-fail .fill-deep{background:#3e0f22}.tank-fail .fill-top{background:#ff4a5a}.tank-fail .fill-shine,.tank-fail .fill-lead,.tank-fail .bub{display:none}
.failbtn{border:0;background:#ff4a5a;color:#0b0b2a;font-size:9px;padding:8px 8px;min-height:32px;min-width:52px;margin:-6px 0;cursor:pointer;flex-shrink:0;box-shadow:0 0 12px rgba(255,74,90,.5);animation:failp 1.6s steps(2) infinite}
.failbtn:active{transform:translateY(2px)}
@keyframes failp{0%,100%{box-shadow:0 0 6px rgba(255,74,90,.35)}50%{box-shadow:0 0 16px rgba(255,74,90,.75)}}
.btn-ghost{border:0;background:#0b0b2a;color:#e6ecff;font-family:'Press Start 2P',monospace;font-size:10px;min-height:52px;cursor:pointer;box-shadow:0 -4px 0 0 #6f7bb8,0 4px 0 0 #6f7bb8,-4px 0 0 0 #6f7bb8,4px 0 0 0 #6f7bb8}
.btn-ghost:active{transform:translateY(3px)}
.arrows{transition:opacity .3s steps(3)}
.arrows-off{opacity:0}
.arrow-d{filter:drop-shadow(0 0 6px rgba(255,62,165,.9));animation:ard 1.4s ease-in-out infinite}
@keyframes ard{0%,100%{transform:translateY(-2px)}50%{transform:translateY(6px)}}
.chev1{animation:chev 1.4s steps(2) infinite}
.chev2{animation:chev 1.4s steps(2) infinite;animation-delay:.35s}
@keyframes chev{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.arrow-d,.chev1,.chev2{animation:none}}
.dock-out{animation:dockout .3s steps(3) forwards}
@keyframes dockout{from{opacity:1}to{opacity:0}}
.prep-fill{animation:prep 1.6s steps(8) forwards;width:0}
@keyframes prep{from{width:0}to{width:100%}}
.tank{position:relative;background:#070720;box-shadow:0 -3px 0 0 #2f6f9e,0 3px 0 0 #2f6f9e,-3px 0 0 0 #2f6f9e,3px 0 0 0 #2f6f9e}
.fill{position:absolute;left:0;top:0;bottom:0;background:#1a5fa8;overflow:hidden;transition:width .3s steps(3)}
.fill-deep{position:absolute;left:0;right:0;bottom:0;height:40%;background:#12306a}
.fill-top{position:absolute;left:0;right:0;top:0;height:2px;background:#3ef0ff}
.fill-shine{position:absolute;left:0;right:0;top:4px;height:2px;background:repeating-linear-gradient(90deg,#9ff8ff 0 6px,transparent 6px 18px);animation:shinef 1.4s steps(6) infinite}
@keyframes shinef{from{background-position:0 0}to{background-position:-18px 0}}
.fill-lead{position:absolute;right:0;top:0;bottom:0;width:4px;background:#9ff8ff;animation:slosh .5s steps(2) infinite}
@keyframes slosh{0%,100%{top:0}50%{top:35%}}
.bub{position:absolute;bottom:2px;width:2px;height:2px;background:#9ff8ff;animation:bub 1.8s steps(5) infinite;opacity:0}
@keyframes bub{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-14px);opacity:0}}
.cloud{animation-name:drift;animation-timing-function:steps(340);animation-iteration-count:infinite}
@keyframes drift{from{transform:translateX(420px)}to{transform:translateX(-260px)}}
.breathe{outline:3px solid rgba(255,111,189,.9);outline-offset:8px;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{outline-color:rgba(255,111,189,.25);box-shadow:0 -4px 0 0 #ff3ea5,0 5px 0 0 #a3165f,-4px 0 0 0 #ff3ea5,4px 0 0 0 #ff3ea5,0 0 10px rgba(255,62,165,.25)}50%{outline-color:rgba(255,159,211,1);box-shadow:0 -4px 0 0 #ff3ea5,0 5px 0 0 #a3165f,-4px 0 0 0 #ff3ea5,4px 0 0 0 #ff3ea5,0 0 38px 14px rgba(255,62,165,.6)}}
.btn-cy{border:0;background:#3ef0ff;color:#0b0b2a;font-family:'Press Start 2P',monospace;font-size:13px;min-height:52px;cursor:pointer;box-shadow:0 -4px 0 0 #3ef0ff,0 5px 0 0 #1a8fd0,-4px 0 0 0 #3ef0ff,4px 0 0 0 #3ef0ff,0 0 22px rgba(62,240,255,.5)}
.btn-cy:active{transform:translateY(4px)}
.pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:110px;background:#0b0b2a;border:4px dashed #3ef0ff;color:#3ef0ff;cursor:pointer;position:relative;animation:glow 1.6s steps(2) infinite}
.pick:active{background:#14143c}
.wave{background:repeating-linear-gradient(90deg,#3ef0ff 0 8px,#12306a 8px 16px,#1a5fa8 16px 24px,#12306a 24px 32px);animation:flow 1.2s steps(4) infinite}
.wave2{background:repeating-linear-gradient(90deg,#1a5fa8 0 8px,#0e2452 8px 24px);animation:flowb 1.8s steps(4) infinite}
.bob{animation:bob 1.2s steps(2) infinite}
.tw{animation:tw 1.6s steps(2) infinite}
.drip{transform-origin:50% 0;animation:drip 3.6s infinite;opacity:0;z-index:2}
.wl2{animation:wl2 5s steps(16) infinite}
.wl2m{animation:wl2 3.2s steps(16) infinite;animation-delay:-1.1s}
.wl3{animation:wl3 2.2s steps(16) infinite}
@keyframes wl2{from{transform:translateX(0)}to{transform:translateX(-64px)}}
@keyframes wl3{from{transform:translateX(0)}to{transform:translateX(-96px)}}
.drip-rip{transform-origin:center;animation:driprip 3.6s steps(5) infinite;opacity:0;z-index:2}
.drip-sl{animation:dripsl 3.6s steps(5) infinite;opacity:0;z-index:2}
.drip-sr{animation:dripsr 3.6s steps(5) infinite;opacity:0;z-index:2}
.load{height:100%;background:repeating-linear-gradient(90deg,#7dff6b 0 11px,transparent 11px 15px);animation:load 2.4s steps(16) infinite}
.press{animation:blink 1s steps(2) infinite}
.ring{animation:ring 1.6s steps(4) infinite}
@keyframes flow{from{background-position:0 0}to{background-position:32px 0}}
@keyframes flowb{from{background-position:0 0}to{background-position:-24px 0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(62,240,255,0)}50%{box-shadow:0 0 22px rgba(62,240,255,.45)}}
@keyframes drip{0%{transform:translateY(0) scale(.6,.15);opacity:0;animation-timing-function:steps(4)}4%{opacity:1}26%{transform:translateY(0) scale(1,1);opacity:1;animation-timing-function:steps(2)}30%{transform:translateY(2px) scale(.85,1.3);opacity:1;animation-timing-function:steps(7)}50%{transform:translateY(var(--d)) scale(1,1);opacity:1}51%,100%{transform:translateY(var(--d));opacity:0}}
@keyframes driprip{0%,50%{transform:scaleX(.15);opacity:0}52%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes dripsl{0%,50%{transform:translate(0,0);opacity:0}54%{opacity:1}75%{transform:translate(-14px,-24px);opacity:1}95%{transform:translate(-22px,0);opacity:0}100%{opacity:0}}
@keyframes dripsr{0%,50%{transform:translate(0,0);opacity:0}54%{opacity:1}75%{transform:translate(14px,-24px);opacity:1}95%{transform:translate(22px,0);opacity:0}100%{opacity:0}}
@keyframes load{from{width:0}to{width:100%}}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.frame-gold{background:#1c1a3e;box-shadow:0 -4px 0 0 #ffc23e,0 4px 0 0 #ffc23e,-4px 0 0 0 #ffc23e,4px 0 0 0 #ffc23e,0 0 22px 2px rgba(255,194,62,.28);flex-shrink:0}/* flex-shrink:0 = DEVIATIONS 13 (Andrew, 2026-10-15): the RAIN MAKER plate must not collapse when the file list overflows */
.shimmer{position:absolute;top:0;bottom:0;left:-80px;width:36px;background:linear-gradient(90deg,transparent 0 8px,rgba(255,226,154,.16) 8px 28px,transparent 28px);transform:skewX(-20deg);animation:shim 4.2s steps(14) infinite;pointer-events:none}
@keyframes shim{0%{left:-80px}45%,100%{left:110%}}
.lockpulse{animation:lockp 2.4s steps(2) infinite}
@keyframes lockp{0%,100%{opacity:1}50%{opacity:.55}}
.valve-turn{transform-origin:50% 50%;animation:vturn 1.3s steps(10) .5s both,vglow 3.2s ease-in-out 1.8s infinite}
@keyframes vglow{0%,100%{filter:drop-shadow(0 0 3px var(--g))}50%{filter:drop-shadow(0 0 24px var(--g)) drop-shadow(0 0 8px var(--g))}}
@keyframes vturn{from{transform:rotate(0)}to{transform:rotate(315deg)}}
.needle{transform-origin:50% 100%;animation:needle 1.2s steps(6) 1.3s both}
@keyframes needle{from{transform:rotate(55deg)}to{transform:rotate(-70deg)}}
.stream{transform-origin:50% 0;background:repeating-linear-gradient(180deg,#3ef0ff 0 10px,#1a8fd0 10px 18px,#9ff8ff 18px 22px);animation:sflow .5s steps(4) infinite,sstop 1.4s steps(10) 1.1s both}
@keyframes sflow{from{background-position:0 0}to{background-position:0 22px}}
@keyframes sstop{0%{transform:scaleX(1);clip-path:inset(0 0 0 0)}30%{transform:scaleX(.4);clip-path:inset(0 0 0 0)}100%{transform:scaleX(.4);clip-path:inset(100% 0 0 0)}}
.foam{animation:foam .3s steps(2) infinite,gone .01s 2.5s both}
@keyframes foam{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gone{to{opacity:0;visibility:hidden}}
.lastdrip{opacity:0;transform-origin:50% 0;animation:lastdrip 1.3s both}
@keyframes lastdrip{0%{transform:translateY(0) scale(.6,.15);opacity:0;animation-timing-function:steps(3)}12%{transform:translateY(0) scale(1,1);opacity:1;animation-timing-function:steps(2)}30%{transform:translateY(2px) scale(.85,1.3);opacity:1;animation-timing-function:steps(8)}70%{transform:translateY(var(--d)) scale(1,1);opacity:1}71%,100%{transform:translateY(var(--d));opacity:0}}
.lastrip{transform-origin:center;opacity:0;animation:lastrip .7s steps(5) both}
@keyframes lastrip{0%{transform:scaleX(.15);opacity:1}100%{transform:scaleX(1);opacity:0}}
.drain{animation:drain 2.4s steps(12) 1.8s both}
@keyframes drain{from{transform:translateY(0)}to{transform:translateY(48px)}}
.lamp{animation:lamp 1s steps(2) 2.2s infinite both}
@keyframes lamp{0%,100%{background:#5a1830;box-shadow:none}50%{background:var(--lc);box-shadow:0 0 12px var(--lc)}}
.panel-in{animation:panelin .6s steps(4) 3.5s both}
@keyframes panelin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.shimmer,.lockpulse,.stream,.foam,.lamp{animation:none}.stream,.foam,.lastdrip,.lastrip{display:none}.valve-turn{animation:none;transform:rotate(315deg)}.needle{animation:none;transform:rotate(-70deg)}.drain{animation:none;transform:translateY(48px)}.panel-in{animation:none}}
.in-fall{opacity:0;animation:infall .75s both}
@keyframes infall{0%{transform:translateY(0) scale(.6,.2);opacity:0;animation-timing-function:steps(2)}10%{transform:translateY(0) scale(1,1);opacity:1;animation-timing-function:steps(9)}96%{transform:translateY(var(--d)) scale(.9,1.15);opacity:1}100%{transform:translateY(var(--d));opacity:0}}
.in-rip{opacity:0;transform-origin:center;animation:lastrip .6s steps(5) .72s both}
.rise{animation:rise .6s steps(6) .75s both}
@keyframes rise{from{transform:translateY(80px)}to{transform:translateY(0)}}
.in-pop{animation:inpop .45s steps(5) 1.2s both}
@keyframes inpop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
.in-stamp{animation:instamp .35s steps(3) 1.45s both}
@keyframes instamp{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}
.in-fade{animation:infade .35s steps(3) both}
@keyframes infade{from{opacity:0}to{opacity:1}}
.in-skip{position:fixed;inset:0;z-index:40;background:transparent;border:0;cursor:pointer}/* fixed (design: absolute): the document scrolls now, DEVIATIONS 21 */
@media (prefers-reduced-motion: reduce){.in-fall,.in-rip{display:none}.rise,.in-pop,.in-stamp,.in-fade{animation:none}}
@media (prefers-reduced-motion: reduce){.wave,.wave2,.bob,.tw,.load,.press,.ring,.pick,.bad,.breathe,.cloud,.wl2,.wl2m,.wl3,.fill-shine,.fill-lead{animation:none}.bub{animation:none;opacity:0}.melt{animation:none;opacity:.4}.bigdrop,.bigrip,.bigsl,.bigsr{animation:none;opacity:0}.drip,.drip-rip,.drip-sl,.drip-sr{animation:none;opacity:0}.load{width:70%}}

/* Production stage (replaces the design canvas's device frame): the 390px-wide page is centred on a
   #0b0b2a background and the DOCUMENT is the scroll container (Safari only collapses its toolbar when the
   document scrolls, DEVIATIONS 21). The page is at least the large viewport tall (100vh; dev() in app.js
   measures it on .vhprobe); .hdr is the design's 64 px header slot, sticky; .body is the screen's flow
   content; .pin is the bottom stack (dock, DROP IT, water), sticky at the visible bottom and offset by the
   safe area, so the content above it can always scroll clear of the button. */
html{background:#0b0b2a}
body{min-height:100vh;background:#0b0b2a;overscroll-behavior:none}
.stage{min-height:100vh;background:#0b0b2a}
.page{position:relative;margin:0 auto;width:390px;min-height:100vh;display:flex;flex-direction:column;background:#0b0b2a;color:#e6ecff;font-family:'Share Tech Mono',monospace}
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hdr{position:sticky;top:0;height:64px;flex-shrink:0;z-index:2}
.body{position:relative;flex-shrink:0}
.pin{position:sticky;bottom:0;margin-top:auto;flex-shrink:0;width:100%;z-index:2;pointer-events:none}
.water-clip{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}/* clips the water's drain/rise travel as the old fixed page did */
.vhprobe{position:fixed;top:0;left:0;width:0;height:100vh;visibility:hidden;pointer-events:none}