@charset "UTF-8";
:root{font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#264d40;background:#f6f3e8;font-synthesis:none;--ink:#264d40;--green:#477b57;--coral:#e99b7e;--muted:#6a7d69}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bb583f;outline-offset:4px}button:disabled{cursor:default}main{max-width:1120px;padding:0 40px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:83px;border-bottom:1px solid #d9ddcb;font-size:12px;font-weight:700}.back{text-decoration:none}.brand{font-size:10px;letter-spacing:.15em;color:#6a7d69}.small-button{background:transparent;border:1px solid #bfcbb4;border-radius:22px;min-height:39px;min-width:86px;font-size:12px;color:var(--ink)}.small-button[aria-pressed=true]{background:#e3ebd8}.intro{display:flex;align-items:center;justify-content:space-between;padding:43px 15px 28px 0;gap:20px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#687e64}.intro .eyebrow{margin:0 0 14px;color:#618064}h1{font-size:clamp(30px,4.8vw,51px);font-weight:800;letter-spacing:.035em;line-height:1.3;margin:0}h1 span{white-space:nowrap}.title-dot{color:#d98c70}.lead{font-size:15px;line-height:1.8;margin:15px 0 0;letter-spacing:.06em}.mobile-break{display:none}.intro-mark{width:111px;transform:rotate(9deg);position:relative}.intro-mark>span{position:absolute;top:-8px;left:32px;font:15px ui-monospace,monospace;letter-spacing:10px;color:#7a9169}.intro-mark svg{width:100%;margin-top:10px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:7px 0 20px;gap:10px}.mode-switch{display:flex;gap:4px;border:1px solid #cbd3be;padding:4px;border-radius:28px}.mode-switch button{border:0;background:transparent;min-height:39px;padding:0 19px;border-radius:24px;color:var(--muted);font-size:12px;font-weight:800}.mode-switch button[aria-pressed=true]{background:var(--ink);color:#fff9e8}.text-button{border:0;background:transparent;color:#5a725b;text-decoration:underline;text-underline-offset:5px;font-size:12px;min-height:44px;padding:0 8px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:start}.pond-panel{border:1px solid #cad6bf;border-radius:26px;background:#fffdf4;overflow:hidden}.mission{padding:23px 24px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font-size:20px;letter-spacing:.03em;margin:7px 0 8px}.mission p{font-size:12px;line-height:1.7;margin:0;color:#6b7a61}#goal-card{min-width:143px;text-align:center}.goal-label{font-size:10px;font-weight:700;color:#67795e}.goal-row{display:flex;gap:1px;margin:7px 0 1px}.goal-row svg{width:17px;height:18px}#goal-binary{font:11px ui-monospace,monospace;letter-spacing:3px}.pond{background:#deead8;position:relative;padding:19px 20px 17px;isolation:isolate}.pond:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 10% 88%,#cbdcbf 0, #cbdcbf 12%,transparent 12.5%),radial-gradient(ellipse at 90% 42%,#d0e0c7 0,#d0e0c7 17%,transparent 17.5%);opacity:.8}.row-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px}.row-label{font-size:12px;font-weight:800;letter-spacing:.03em}.row-label b{display:inline-flex;width:23px;height:23px;align-items:center;justify-content:center;background:#4d7653;border-radius:50%;color:#fffbe8;margin-right:7px;font:700 11px ui-monospace,monospace}.visitor b{background:#b8785d}.value{font:700 18px ui-monospace,monospace;border-bottom:1px solid #b6c9a7;min-width:36px;text-align:center}.frog-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;position:relative;z-index:1}.frog{position:relative;background:none;border:0;color:#355a40;padding:0;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:13px;transition:background .15s,transform .15s}.frog svg{width:100%;max-width:75px;overflow:visible;filter:drop-shadow(0 4px 0 #62846212)}.frog:not(:disabled):hover{background:#c3d6ba;transform:translateY(-3px)}.frog .weight{font:700 11px ui-monospace,monospace;padding:1px 0 5px;color:#6b8564}.frog .bit{font:700 12px ui-monospace,monospace;display:block;opacity:.75;margin-top:4px}.frog .mouth-open,.frog .tongue{display:none}.frog.open .mouth-open,.frog.open .tongue{display:block}.frog.open .mouth-closed{display:none}.frog .frog-body,.frog .eye-bump{fill:#89ae77;stroke:#527c50;stroke-width:1.3}.frog.open .frog-body,.frog.open .eye-bump{fill:#b2cf7e}.frog .cheek{fill:#dfaf8b;opacity:.7}.frog .lily{fill:#a8c49b}.frog.open .lily{fill:#8fb384}.frog .eye{fill:#fffae5}.frog .pupil,.frog .mouth-open{fill:#294e3a}.frog .tongue{fill:#e6977a}.frog .mouth-closed{stroke:#294e3a;stroke-width:2.5;stroke-linecap:round;fill:none}.frog.pop svg{animation:croak .28s ease-out}.water-line{display:flex;justify-content:space-around;color:#abc39d;font-size:24px;height:21px;margin:0 0 3px}.join-mark{font-size:18px;display:flex;justify-content:center;gap:15px;align-items:center;color:#7c9c70;margin:8px 0 19px}.join-mark span{font-size:10px;letter-spacing:.08em;color:#739168}.touch-hint{font-size:11px;text-align:center;letter-spacing:.05em;color:#67815c;margin:13px 0 0}.actionbar{display:flex;gap:12px;align-items:center;padding:20px 24px 5px}.primary{border:0;border-radius:14px;background:#284f41;color:#fff7dd;min-height:53px;flex:1;font-weight:800;font-size:16px;letter-spacing:.06em;box-shadow:0 4px 0 #193c31}.primary span{margin-left:18px;color:#bed7a0}.primary:hover{background:#38644e}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #193c31}.primary:disabled{background:#6a8163;box-shadow:none}.round-button{width:45px;height:45px;border:1px solid #c9d3bc;border-radius:50%;background:transparent;color:#3e6949;font-size:26px}.round-button:disabled{opacity:.35}.feedback{padding:18px 24px 21px;min-height:102px;display:flex;align-items:center;gap:12px;justify-content:space-between}.feedback p{margin:0}.feedback #message{font-size:14px;font-weight:800;line-height:1.7}.feedback #detail{font-size:11px;line-height:1.8;color:#78816d;margin-top:4px}.next-button{min-height:44px;background:#efb99a;color:#5d4434;border:0;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:800;white-space:nowrap}.success #message{color:#307541}.success{background:#f1f5df}.notebook{padding:22px 22px 25px;background:#eee9d9;border-radius:5px 20px 20px 5px;position:relative;box-shadow:inset 5px 0 0 #e5e0ce}.notebook-title{display:flex;justify-content:space-between;align-items:center}.notebook-title>span:last-child{color:#bf8362;font-size:26px}.notebook h2{font-size:20px;margin:8px 0 16px}.rule-lead{font-size:14px;line-height:1.9;margin:0 0 17px}.rules{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rule{display:flex;align-items:center;gap:3px;font-size:10px;border-bottom:1px solid #d8d6c3;padding-bottom:5px}.rule svg{width:24px;height:28px}.small-note{font-size:10px;line-height:1.9;color:#73806a;margin:14px 0 0}.note-divider{height:1px;background:#d5d5c0;margin:20px 0}.bit-readout{display:flex;align-items:center;gap:9px;margin-top:15px}.bit-readout code{font-size:16px;letter-spacing:2px}.bit-readout>span{font-size:12px}.bit-readout b{font-size:22px}.sum-readout{font:10px ui-monospace,monospace;line-height:1.8;color:#778269;overflow-wrap:anywhere}.experiment{font-size:12px;line-height:2;margin:0}.experiment b{display:inline-block;font-size:11px;color:#b47455;margin-bottom:3px}.sound-note{font-size:10px;color:#7c826e;line-height:1.8;margin-bottom:0}.other-game{display:flex;gap:18px;align-items:center;text-decoration:none;border-top:1px solid #d4dbc7;border-bottom:1px solid #d4dbc7;margin:32px 0 22px;padding:19px 12px}.other-game>span:first-child{background:#eec09e;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:25px}.other-game>span:last-child{margin-left:auto;font-size:24px}.other-game small{font-size:9px;letter-spacing:.07em;color:#7e8b72}.other-game strong{display:block;font-size:16px;margin-top:4px}.other-game p{font-size:11px;color:#6c7f65;margin:5px 0 0}details{font-size:11px;line-height:1.9;color:#6b7e64}summary{cursor:pointer;min-height:44px;padding:10px 0}details p{max-width:700px}footer{display:flex;justify-content:space-between;gap:20px;padding:30px 0;font-size:10px;color:#8a9580}.hide-numbers .number-detail,.hide-numbers .weight,.hide-numbers .bit{visibility:hidden}.hide-numbers #number-notes{display:none}.hide-numbers .frog{min-height:90px}.is-merging #frogs-b{animation:merge .55s ease-in-out}.is-merging .join-mark{color:#c28d62}.is-merging #frogs-a svg{animation:croak .55s ease-in-out}.is-merging .frog{pointer-events:none}[hidden]{display:none!important}
@keyframes croak{0%,100%{transform:scale(1)}35%{transform:translateY(-5px) scale(1.07,.93)}65%{transform:translateY(-2px) scale(.96,1.04)}}@keyframes merge{0%,100%{transform:translateY(0);opacity:1}48%{transform:translateY(-47px);opacity:.3}}
@media(max-width:850px){main{padding:0 24px}.layout{grid-template-columns:minmax(0,1fr)}.notebook{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;border-radius:20px;box-shadow:none}.notebook-title{grid-column:1/-1}.notebook h2{grid-column:1}.rule-lead{grid-column:1}.rules{grid-column:1}.notebook>.small-note{grid-column:1}.notebook>#number-notes{grid-column:2;grid-row:2/6}.notebook>#number-notes .note-divider{display:none}.notebook>.note-divider{grid-column:1/-1;margin:18px 0}.experiment{grid-column:1}.sound-note{grid-column:2}.frog svg{max-width:71px}.pond{padding:19px 25px}.mission{padding:22px 25px}.intro{padding-top:30px;padding-bottom:22px}}
@media(max-width:520px){main{padding:0 14px}.topbar{min-height:65px;gap:8px}.back{font-size:10px}.brand{display:none}.intro{padding:27px 0 21px}.intro-mark{width:79px;flex-shrink:0}.intro-mark>span{font-size:12px;left:22px}.intro .eyebrow{font-size:8px;letter-spacing:.15em;margin-bottom:10px}h1{font-size:30px;letter-spacing:0}h1 .title-dot{display:none}.lead{font-size:12px;line-height:1.9;margin-top:10px}.mobile-break{display:block}.toolbar{margin-top:0;gap:4px}.mode-switch{padding:3px;gap:0}.mode-switch button{font-size:10px;padding:0 12px;min-height:37px}.text-button{font-size:10px;padding:0 4px}.pond-panel{border-radius:20px}.mission{padding:18px 14px;gap:8px;align-items:start}.mission h2{font-size:16px;margin:8px 0}.mission p{font-size:10px;max-width:175px}.mission .eyebrow{font-size:9px}#goal-card{min-width:118px;padding-top:4px}.goal-row{gap:0;justify-content:center}.goal-row svg{width:15px}.goal-label{font-size:9px}#goal-binary{font-size:10px;letter-spacing:3px}.pond{padding:16px 7px}.row-heading{margin:0 7px 9px}.row-label{font-size:11px}.row-label b{width:21px;height:21px;margin-right:6px}.value{font-size:15px}.frog-row{gap:0}.frog{border-radius:8px;min-height:81px}.frog .weight{font-size:9px}.frog .bit{font-size:11px}.water-line{height:19px}.join-mark{margin:4px 0 17px;font-size:16px}.join-mark span{font-size:9px}.touch-hint{font-size:10px;margin:10px 0 0}.actionbar{padding:17px 14px 4px;gap:9px}.primary{font-size:14px;min-height:49px;border-radius:12px}.primary span{margin-left:8px}.round-button{width:41px;height:41px;flex-shrink:0}.feedback{padding:16px 14px 18px;min-height:104px;flex-wrap:wrap;gap:7px}.feedback #message{font-size:12px}.feedback #detail{font-size:10px}.next-button{margin-left:auto}.notebook{padding:18px;gap:0 21px}.notebook h2{font-size:17px;margin-top:3px}.rule-lead{font-size:12px}.rule svg{width:18px;height:24px}.rule{gap:1px;font-size:9px}.rules{gap:8px 5px}.notebook .eyebrow{font-size:8px;letter-spacing:.08em}.bit-readout{flex-wrap:wrap;gap:5px}.bit-readout code{font-size:13px;letter-spacing:1px}.bit-readout b{font-size:19px}.small-note{font-size:9px}.experiment{font-size:10px}.sound-note{font-size:9px}.other-game{margin-top:24px}footer{font-size:9px}.hide-numbers .frog{min-height:81px}}
@media(max-width:360px){main{padding:0 8px}h1{font-size:27px}.intro-mark{width:66px}.mode-switch button{padding:0 9px}.mission{flex-direction:column}#goal-card{display:flex;align-items:center;gap:10px}.goal-row{margin:0}.notebook{gap:0 15px}}
.mission{flex-wrap:wrap}.mission>div:first-child{flex:1;min-width:200px}#goal-card{min-width:245px}.goal-row svg{width:29px;height:29px}#goal-binary{letter-spacing:6px;margin-left:6px}
@media(max-width:520px){.mission{gap:12px}.mission>div:first-child{min-width:100%}.mission p{max-width:none}#goal-card{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:0 8px;min-width:100%;text-align:left}.goal-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%}.goal-row svg{width:100%;height:29px}#goal-binary{grid-column:2;text-align:center;font-size:9px;margin:1px 0 0;letter-spacing:6px}.goal-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.frog:not(:disabled):hover{transform:none}}