.frog-page{--cyan:#c2e899;background:radial-gradient(ellipse at 15% 0%,#41685c66,transparent 65%),#17363f;color:#eef3df}.frog-page .arcade{max-width:1110px;padding-top:24px}.frog-page .wordmark{letter-spacing:.12em;font-size:28px}.frog-page .wordmark small{font-size:8px;letter-spacing:.32em;color:#acc9bd}.frog-page .quiet{background:#31575a;border-color:#65837e;color:#e3ede3}.frog-page .best-label{color:#aecabe}.frog-page .best-label b{color:#e2edcf}.crossing-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:start}.frog-page .cockpit{border-color:#77958b;background:#2b555b;box-shadow:0 25px 65px #0b242e55}.frog-page .stage{height:auto;min-height:0;aspect-ratio:13/14;background:#4a9397}.frog-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 21px 13px;background:linear-gradient(110deg,#31565a,#24484e)}.frog-page .eyebrow{font-size:9px;color:#bad0bd;letter-spacing:.12em}.frog-page .score{font-size:27px;color:#eef5d1}.timebox{color:#e5e9c9;text-align:center;min-width:65px}.timebox>span:nth-child(2){font:500 25px ui-monospace,monospace;display:inline-block;margin-top:3px}.timebox small{font-size:8px;letter-spacing:.05em;margin-left:4px;color:#a7c4b6}.timebox.urgent{color:#ffc5a3}.frog-page .livesbox{min-width:110px}.frog-page .livesbox b{color:#e9efcc}.frog-page .lives{margin-top:9px;gap:5px}.frog-page .lives span{width:13px;height:13px;border-radius:44% 44% 40% 40%;clip-path:polygon(0 0,35% 0,50% 22%,65% 0,100% 0,100% 100%,0 100%);background:#c2e693;filter:none}.frog-page .lives span.lost{background:#56766d}.time-track{height:3px;background:#1d3c43}.time-track>div{height:100%;width:100%;transform-origin:left;background:#b8dc91}.time-track.urgent>div{background:#f1ae8e}.crossing-status{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;background:#315a5d;border-top:1px solid #8ba79c55;color:#d2e5cd;font-size:9px;letter-spacing:.08em;gap:10px}.crossing-status>span:last-child{color:#abc7b3;font-size:8px;white-space:nowrap}.crossing-status b{font-size:12px;color:#edf1c3;margin-left:7px;font-weight:500}.frog-page .control-strip{font-size:10px;background:#26494f;color:#c2d6c9;border-color:#65857b55;gap:12px 18px;padding:14px 15px}.frog-page kbd{background:#3a6061;border-color:#6a8b7d;color:#e9efce}.frog-page .veil{background:#163c4b63;backdrop-filter:blur(3px);padding:19px}.frog-page .launch-panel{background:linear-gradient(140deg,#376064f5,#21474ff5);border-color:#92af99;max-width:425px;padding:27px 26px 23px;box-shadow:0 20px 75px #15363b66}.frog-page .overline{font-size:8px;letter-spacing:.2em;color:#d1e7b0;margin-bottom:18px}.frog-emblem{width:60px;height:45px;margin:0 auto 20px;background:linear-gradient(#c2e997,#8ebf79);border-radius:44% 44% 43% 43%;position:relative;box-shadow:0 8px 0 -3px #173d4766;transform:rotate(-6deg)}.frog-emblem i{position:absolute;top:-5px;width:23px;height:23px;background:#dcedb8;border:4px solid #aedb8b;border-radius:50%}.frog-emblem i:first-child{left:1px}.frog-emblem i:nth-child(2){right:1px}.frog-emblem i:after{content:"";position:absolute;width:7px;height:9px;top:2px;left:6px;border-radius:50%;background:#2c5250}.frog-emblem span{position:absolute;bottom:5px;left:23px;font-size:24px;line-height:18px;color:#365e47}.frog-page .launch-panel h1{font-size:34px;letter-spacing:-.04em;color:#f2f0d5}.frog-page .launch-panel p{font-size:13px;line-height:1.65;color:#c2d9cf;margin:14px 0 18px}.frog-promise{font-size:7px;letter-spacing:.06em;color:#bad5b8;margin:20px 0 22px;display:flex;justify-content:center;gap:9px}.frog-promise span{color:#dbdba9}.frog-page .launch{background:linear-gradient(110deg,#d3edac,#b4d990);color:#284c43;min-height:49px;font-size:12px;border-radius:7px;box-shadow:none}.frog-page .start-controls{font-size:9px;margin-top:18px}.frog-page .start-controls kbd{font-size:9px}.frog-page .sound-note{font-size:9px;color:#adcbc0;margin-top:15px}.frog-page .touch-tip{font-size:10px!important;margin-top:17px!important}.frog-page .restart{color:#d1dfc4}.frog-page .result{margin:21px 0}.frog-page .result span{color:#b8d1c1}.frog-page .result b{font-size:26px;color:#edf2d0}.frog-page .launch-panel:has(.result:not([hidden])) .frog-emblem{display:none}.frog-page .notice{top:46%;z-index:2;font-size:10px;background:#214c50f0;color:#eef2c7;border-color:#b4c694;padding:10px 14px;letter-spacing:.04em;max-width:88%;width:max-content}.crossing-guide{display:flex;flex-direction:column;gap:17px}.frog-page .guide-card{border:1px solid #73938566;background:linear-gradient(140deg,#3c625e,#2b5055);padding:24px;border-radius:14px}.frog-page .guide-kicker{display:block;font-size:8px;color:#bfd1a7;letter-spacing:.12em;margin-bottom:18px;line-height:1.6}.frog-page .guide-card h2{font-size:36px;line-height:1.08;letter-spacing:-.04em;font-weight:600;margin:0 0 19px;color:#ebefce}.frog-page .guide-card p{font-size:11px;color:#bfd2c6;line-height:1.8;margin:0 0 16px}.crossing-steps{padding:0;margin:24px 0;list-style:none;display:grid;gap:16px}.crossing-steps li{display:flex;align-items:flex-start;gap:13px;font-size:11px;color:#c8dbcc;line-height:1.65}.crossing-steps b{color:#dce8b8;font:500 10px ui-monospace,monospace;line-height:1.8}.goal-note{font-size:7px;letter-spacing:.07em;color:#d3dfad;border-top:1px solid #8ba48944;padding-top:17px;line-height:1.6}.frog-page .tips-card{padding:22px}.frog-page .tips-card p{font-size:10px;margin-bottom:16px}.frog-page .tips-card b{color:#e1e7c8;font-weight:600}.frog-page .tips-card .guide-note{border-top:1px solid #90a78b44;padding-top:16px;margin-bottom:0;color:#adc9bd}.creek-caption{padding:15px 4px;text-align:center;color:#a5c2b3}.creek-caption>span{font:8px ui-monospace,monospace;letter-spacing:.2em}.creek-caption b{display:block;font:italic 24px Georgia,serif;line-height:1.25;letter-spacing:-.02em;margin:15px 0;color:#b9cdb7}.creek-caption small{font-size:6px;letter-spacing:.13em}.frog-page .frog-touch{background:#2b5358;border-color:#78968a66;padding:10px 17px;gap:18px;align-items:center;justify-content:center}.frog-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,43px);gap:5px}.frog-page .frog-pad button{min-height:43px;font-size:25px;line-height:1;border:1px solid #8faf93;border-radius:7px;background:#416d6a;color:#e8edc3;touch-action:none;user-select:none}.frog-pad button[data-control=up]{grid-column:2}.frog-pad button[data-control=left]{grid-column:1;grid-row:2}.frog-pad button[data-control=down]{grid-column:2;grid-row:2}.frog-pad button[data-control=right]{grid-column:3;grid-row:2}.frog-page .frog-pad button.pressed{background:#c3e2a0;color:#325748}.frog-touch p{font-size:7px;letter-spacing:.08em;color:#d4e4b8;margin:0;line-height:1.5}.frog-touch p span{display:block;color:#acc7bc;font-size:9px;line-height:1.7;letter-spacing:0;margin-top:7px}
@media(max-width:940px){.crossing-layout{grid-template-columns:minmax(0,1fr) 210px;gap:18px}.frog-page .guide-card{padding:20px}.frog-page .guide-card h2{font-size:32px}.frog-page .score{font-size:24px}.frog-hud{padding:14px 15px}.frog-page .arcade{padding:20px}.frog-page .lives{gap:4px}.frog-page .livesbox{min-width:98px}.frog-page .lives span{width:12px}}
@media(max-width:760px){.crossing-layout{display:block}.crossing-guide{display:none}.frog-page .arcade{max-width:700px;padding:15px 12px 20px}.frog-page .wordmark{font-size:25px}.frog-page .masthead{margin-bottom:15px}.frog-page .stage{min-height:330px}.frog-page .launch-panel{max-width:410px}.frog-page .launch-panel h1{font-size:31px}}
@media(max-width:440px){.frog-page .masthead{gap:12px;margin-bottom:13px}.frog-page .wordmark small{display:inline-block;margin:0 0 0 12px;max-width:80px;line-height:1.5;font-size:7px}.frog-page .top-actions{width:100%;justify-content:flex-end}.frog-page .arcade-link{margin-right:auto}.frog-page .wordmark{font-size:24px}.frog-hud{padding:12px 14px 10px;gap:8px}.frog-page .eyebrow{font-size:8px}.frog-page .score{font-size:22px}.timebox>span:nth-child(2){font-size:23px}.frog-page .livesbox{min-width:89px}.frog-page .livesbox b{margin-left:6px}.frog-page .lives{gap:3px}.frog-page .lives span{width:12px;height:12px}.frog-page .launch-panel{padding:21px 19px 18px}.frog-page .launch-panel h1{font-size:29px}.frog-page .overline{margin-bottom:15px;font-size:7px}.frog-emblem{margin-bottom:16px;width:56px;height:42px}.frog-page .launch-panel p{font-size:12px;margin:12px 0 15px}.frog-promise{font-size:6px;margin:16px 0 18px;gap:7px}.frog-page .sound-note{font-size:8px;margin-top:12px}.frog-page .touch-tip{font-size:9px!important;margin-top:13px!important}.frog-page .veil{padding:15px}.frog-page .crossing-status{font-size:8px;padding:11px 13px}.frog-page .crossing-status>span:last-child{font-size:7px}.frog-page .frog-touch{gap:19px;padding:9px 12px}}
.frog-page .veil{overflow-y:auto;align-items:flex-start}.frog-page .launch-panel{margin-block:auto}
@media(max-width:440px){.frog-page .frog-emblem,.frog-page .frog-promise,.frog-page .sound-note{display:none}.frog-page .overline{margin-bottom:12px}.frog-page .touch-tip{margin-bottom:0!important}.frog-page .result{margin:15px 0}.frog-page .launch-panel:has(.result:not([hidden])) .overline{display:none}}
@media(max-width:350px){.frog-pad{grid-template-columns:repeat(3,47px);gap:4px}.frog-page .frog-touch{gap:13px}.frog-touch p{font-size:6px}.frog-touch p span{font-size:8px}.frog-page .launch-panel h1{font-size:26px}.frog-page .livesbox{min-width:78px}.frog-page .lives span{width:10px}.frog-page .score{font-size:20px}}
.frog-page .frog-promise{display:none}.difficulty-picker{border:0;padding:0;margin:20px 0 17px;min-width:0}.difficulty-picker legend{width:100%;padding:0;margin-bottom:10px;color:#d3e3b5;font-size:8px;letter-spacing:.13em}.difficulty-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.difficulty-options label{position:relative;cursor:pointer;min-width:0}.difficulty-options input{position:absolute;left:8px;top:8px;width:1px;height:1px;opacity:0}.difficulty-options label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:61px;padding:10px 4px;border:1px solid #78988a;border-radius:8px;background:#22484e;color:#d4e4d0;transition:background .15s,border-color .15s}.difficulty-options b{font-size:12px;font-weight:650;letter-spacing:-.02em}.difficulty-options small{font-size:6px;letter-spacing:.08em;color:#a8c7b5}.difficulty-options input:checked+span{background:#c5e39f;border-color:#e1f1bb;color:#264c41;box-shadow:0 0 0 1px #d4eab966}.difficulty-options input:checked+span small{color:#476a4c}.difficulty-options input:focus-visible+span{outline:2px solid #f2f2c5;outline-offset:3px}.frog-page .difficulty-picker p{font-size:10px;line-height:1.5;color:#bcd4c4;margin:10px 2px 0;min-height:30px}.difficulty-badge{color:#e1eabc;padding:4px 7px;border:1px solid #96b08c66;border-radius:4px;font-size:7px;white-space:nowrap}.frog-page .launch-panel h1{font-size:32px}.frog-page .frog-emblem{margin-bottom:16px}.frog-page .launch-panel:has(.difficulty-picker:not([hidden])) .overline{margin-bottom:12px}
@media(max-width:760px){.frog-page .frog-emblem{display:none}.frog-page .launch-panel{padding:22px}.difficulty-picker{margin-top:17px}.frog-page .difficulty-picker p{font-size:9px}.difficulty-options b{font-size:11px}.difficulty-options label>span{min-height:56px}}
@media(max-width:440px){.frog-page .launch-panel{padding:18px 16px}.frog-page .launch-panel h1{font-size:27px}.frog-page .launch-panel p{font-size:11px;margin:10px 0 13px}.frog-page .launch-panel:has(.difficulty-picker:not([hidden])) .overline{display:none}.difficulty-picker{margin:15px 0}.difficulty-options{gap:5px}.difficulty-options b{font-size:10px}.difficulty-options small{font-size:5.5px}.difficulty-options label>span{min-height:53px}.frog-page .difficulty-picker p{font-size:8px;line-height:1.5;margin:9px 0 0;min-height:36px}.difficulty-badge{font-size:6px;padding:4px 5px}.frog-page .touch-tip{font-size:8px!important}.frog-page .start-controls{font-size:8px;margin-top:13px}.frog-page .launch-panel:has(.result:not([hidden])) #overlay-copy{display:none}.frog-page .result{gap:30px;margin:12px 0}.frog-page .result b{font-size:23px}}