.fraction-beaker-app{
      --navy:#1e3a5f;--text:#26384a;--muted:#7890a2;--line:#bbcad5;
      --a:#3b82f6;--a-deep:#1d4ed8;--b:#ef4444;--b-deep:#c81e1e;
      --mix:#8b5cf6;--mix-deep:#6d28d9;--divide:#9fd7c7;--divide-deep:#61b6a1;
      --gold:#f4c84d;--danger:#c53e4b;--paper:#fff;
      --left-level:50%;--right-level:33.333%;--sum-level:83.333%;--one-part:33.333%;--two-parts:66.667%;
    }
    .fraction-beaker-app *{box-sizing:border-box}
    .fraction-beaker-app{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--text);background:#fff}
    .fraction-beaker-app button{font:inherit;touch-action:manipulation}
    .fraction-beaker-app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#fff}
    .fraction-beaker-app header{height:64px;flex:0 0 64px;padding:8px 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--navy);color:#fff;box-shadow:0 2px 10px #0003;z-index:20}
    .fraction-beaker-app h1{margin:0;font-size:20px;font-weight:900;line-height:1.2}
    .fraction-beaker-app .mode-switch{display:flex;padding:4px;border-radius:999px;background:#102b4a;box-shadow:inset 0 0 0 1px #ffffff24}
    .fraction-beaker-app .mode-btn{min-width:92px;height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#c9d8e8;font-weight:900;cursor:pointer}
    .fraction-beaker-app .mode-btn[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:0 2px 8px #0004}
    .fraction-beaker-app .icon-btn{width:44px;height:44px;justify-self:end;border:0;border-radius:50%;display:grid;place-items:center;background:#ffffff20;color:#fff;cursor:pointer}
    .fraction-beaker-app .icon-btn svg,.fraction-beaker-app .round-btn svg{width:25px;height:25px;fill:currentColor}
    .fraction-beaker-app main{position:relative;flex:1;min-height:0;padding:14px 86px 16px 14px;overflow:hidden}
    .fraction-beaker-app .fraction{display:inline-grid;grid-template-rows:auto 4px auto;min-width:.9em;text-align:center;line-height:.82}
    .fraction-beaker-app .fraction i{height:4px;margin:7px 0 6px;background:currentColor;border-radius:5px}
    .fraction-beaker-app .stage-card{position:relative;width:100%;height:100%;min-height:0;border:1px solid #d6e0e8;border-radius:18px;background:#fbfdfe;box-shadow:0 5px 18px #17324d12;overflow:hidden}
    .fraction-beaker-app .stage{position:relative;width:100%;height:100%;min-height:450px}
    .fraction-beaker-app .source{position:absolute;top:50%;width:clamp(160px,20vw,290px);transform:translateY(-50%);z-index:4}
    .fraction-beaker-app .source.left{left:8%}
    .fraction-beaker-app .source.right{right:8%}
    .fraction-beaker-app .beaker{position:relative;width:100%;height:clamp(240px,48vh,460px);border:6px solid #667b88;border-top:0;border-radius:0 0 16px 16px;background:#f7fcfd;overflow:hidden;box-shadow:inset 10px 0 0 #fff8,inset -9px 0 0 #d8edf033}
    .fraction-beaker-app .beaker::before,.fraction-beaker-app .beaker::after{content:"";position:absolute;top:0;width:23px;height:6px;background:#667b88;z-index:10}
    .fraction-beaker-app .beaker::before{left:-6px}.fraction-beaker-app .beaker::after{right:-6px}
    .fraction-beaker-app .source.left .beaker{transform-origin:88% 8%}.fraction-beaker-app .source.right .beaker{transform-origin:12% 8%}
    .fraction-beaker-app .liquid{position:absolute;left:0;right:0;bottom:0;overflow:hidden;background:linear-gradient(90deg,var(--a-deep),#60a5fa 55%,var(--a));box-shadow:inset 0 8px 0 #ffffff30}
    .fraction-beaker-app[data-mode="fraction"] .source.left .liquid{height:var(--left-level)}
    .fraction-beaker-app[data-mode="fraction"] .source.right .liquid{height:var(--right-level)}
    .fraction-beaker-app .source.right .liquid{background:linear-gradient(90deg,var(--b-deep),#f87171 55%,var(--b))}
    .fraction-beaker-app .surface{position:absolute;left:-8%;top:-5px;width:116%;height:10px;border-radius:50%;background:#ffffff55;border:2px solid #ffffff80}
    .fraction-beaker-app .guide-lines{position:absolute;inset:0;z-index:8;pointer-events:none;background:repeating-linear-gradient(to top,transparent 0,transparent calc(var(--step) - 2px),#536b7988 calc(var(--step) - 2px),#536b7988 var(--step))}
    .fraction-beaker-app .label{position:absolute;top:calc(100% + 14px);left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;font-size:clamp(30px,3.4vw,48px);font-weight:900}
    .fraction-beaker-app .editable-number{user-select:none}
    .fraction-beaker-app .number-input{width:1.55em;min-width:0;padding:0 2px;border:0;border-bottom:2px solid #9fb2c2;border-radius:5px;background:#fff;color:inherit;font:inherit;font-weight:900;text-align:center;line-height:1.05;appearance:textfield;-moz-appearance:textfield}
    .fraction-beaker-app .number-input::-webkit-inner-spin-button,.fraction-beaker-app .number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
    .fraction-beaker-app .number-input:focus{outline:4px solid #ffdc71;outline-offset:2px;border-color:transparent}
    .fraction-beaker-app .whole-input{width:1.35em}
    .fraction-beaker-app .result-wrap{position:absolute;left:50%;top:50%;width:clamp(160px,20vw,290px);transform:translate(-50%,-50%);z-index:5}
    .fraction-beaker-app .result-wrap[data-overflow="true"]::after{content:"1Lをこえています";position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:#fff1f2;color:#b42332;font-size:14px;font-weight:900;white-space:nowrap}
    .fraction-beaker-app .guide-switch{position:absolute;left:50%;bottom:calc(100% + 18px);z-index:14;transform:translateX(-50%);display:flex;padding:4px;border-radius:999px;background:#e8eef3;box-shadow:0 2px 8px #17324d20;white-space:nowrap}
    .fraction-beaker-app .guide-btn{height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#536b79;font-weight:900;cursor:pointer}
    .fraction-beaker-app .guide-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
    .fraction-beaker-app .mixed-liquid{position:absolute;left:0;right:0;bottom:0;height:0;overflow:hidden;background:#3b82f6;box-shadow:inset 0 8px 0 #ffffff30,inset 18px 0 22px #1d4ed844,inset -18px 0 22px #ffffff25}
    .fraction-beaker-app[data-mode="mixed"] .standard-stage{display:none}
    .fraction-beaker-app .mixed-number-stage{display:none;position:relative;width:100%;height:100%;min-height:450px}
    .fraction-beaker-app[data-mode="mixed"] .mixed-number-stage{display:block}
    .fraction-beaker-app .mixed-source-row{position:absolute;left:50%;top:5%;transform:translateX(-50%);display:flex;align-items:flex-start;justify-content:center;gap:clamp(38px,7vw,110px);width:94%}
    .fraction-beaker-app .mixed-group{display:grid;justify-items:center;gap:12px}
    .fraction-beaker-app .mixed-rack{display:flex;align-items:flex-end;justify-content:center;gap:clamp(7px,1vw,14px)}
    .fraction-beaker-app .mixed-unit-cup{position:relative;width:clamp(56px,6vw,92px);height:clamp(130px,20vh,195px);border:4px solid #536b79;border-top:0;border-radius:0 0 9px 9px;background:#f7fcfd;overflow:visible;box-shadow:inset 5px 0 0 #fff9,inset -5px 0 0 #d8edf044}
    .fraction-beaker-app .mixed-source-row .mixed-unit-cup{width:clamp(44px,4.8vw,70px);height:clamp(100px,15vh,150px)}
    .fraction-beaker-app .mixed-source-row .mixed-rack{gap:clamp(6px,.8vw,11px)}
    .fraction-beaker-app .mixed-source-row .one-litre-mark{font-size:clamp(14px,1.4vw,20px)}
    .fraction-beaker-app .mixed-unit-cup::before,.fraction-beaker-app .mixed-unit-cup::after{content:"";position:absolute;top:0;width:13px;height:4px;background:#536b79;z-index:10}
    .fraction-beaker-app .mixed-unit-cup::before{left:-4px}.fraction-beaker-app .mixed-unit-cup::after{right:-4px}
    .fraction-beaker-app .one-litre-mark{position:absolute;left:50%;top:-18px;z-index:12;transform:translateX(-50%);padding:0 5px;background:#fbfdfe;font-size:clamp(16px,1.7vw,24px);font-weight:900;white-space:nowrap}
    .fraction-beaker-app .unit-liquid{position:absolute;left:0;right:0;bottom:0;height:var(--level);transform-origin:bottom;overflow:hidden;box-shadow:inset 0 6px 0 #ffffff35}
    .fraction-beaker-app .unit-liquid.blue{background:linear-gradient(90deg,var(--a-deep),#60a5fa 55%,var(--a))}
    .fraction-beaker-app .unit-liquid.red{background:linear-gradient(90deg,var(--b-deep),#f87171 55%,var(--b))}
    .fraction-beaker-app .unit-liquid.purple{background:linear-gradient(90deg,var(--mix-deep),#a78bfa 55%,var(--mix))}
    .fraction-beaker-app .mixed-group-label{display:flex;align-items:center;justify-content:center;gap:7px;font-size:clamp(22px,2.4vw,36px);font-weight:900}
    .fraction-beaker-app .mixed-combine-arrow{position:absolute;left:50%;top:47%;width:18px;height:30px;border-radius:7px;background:#1689d7;opacity:0;transform:translate(-50%,-10px)}
    .fraction-beaker-app .mixed-combine-arrow::after{content:"";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:20px solid #1689d7}
    .fraction-beaker-app .mixed-result-row{position:absolute;left:50%;top:54%;transform:translateX(-50%);opacity:1}
    .fraction-beaker-app .mixed-result-row .mixed-unit-cup{width:clamp(74px,8.5vw,128px);height:clamp(180px,29vh,290px);border-width:5px;border-radius:0 0 13px 13px}
    .fraction-beaker-app .mixed-result-row .mixed-rack{gap:clamp(8px,1.2vw,18px)}
    .fraction-beaker-app .mixed-result-row .one-litre-mark{top:-22px;font-size:clamp(20px,2vw,29px)}
    .fraction-beaker-app .mixed-source-row .unit-liquid{transform:scaleY(1)}
    .fraction-beaker-app .mixed-result-row .unit-liquid{transform:scaleY(0)}
    .fraction-beaker-app[data-mode="mixed"].playing .mixed-combine-arrow{animation:showMixedArrow .45s ease both}
    .fraction-beaker-app[data-mode="mixed"].playing .mixed-source-row .unit-liquid{animation:emptyOneCup var(--duration) linear var(--delay) both}
    .fraction-beaker-app[data-mode="mixed"].playing .mixed-result-row .unit-liquid{animation:fillOneCup var(--duration) linear var(--delay) both}
    .fraction-beaker-app[data-mode="two-litre"] .standard-stage{display:none}
    .fraction-beaker-app .two-litre-stage{display:none;position:relative;width:100%;height:100%;min-height:450px}
    .fraction-beaker-app[data-mode="two-litre"] .two-litre-stage{display:block}
    .fraction-beaker-app .two-litre-cup-wrap{position:absolute;left:50%;top:50%;width:clamp(210px,22vw,310px);transform:translate(-50%,-50%);z-index:5}
    .fraction-beaker-app .two-litre-beaker{height:clamp(300px,52vh,500px)}
    .fraction-beaker-app .two-litre-beaker .liquid{height:var(--one-part);background:linear-gradient(90deg,var(--divide-deep),#bfe7dc 55%,var(--divide))}
    .fraction-beaker-app .capacity-label,.fraction-beaker-app .cup-name{position:absolute;left:50%;top:-24px;transform:translateX(-50%);z-index:12;padding:0 12px;background:#fbfdfe;font-size:clamp(25px,3vw,42px);font-weight:900;white-space:nowrap}
    .fraction-beaker-app .division-control{position:absolute;left:50%;top:32px;z-index:15;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:12px;background:#ffffffdd;box-shadow:0 2px 9px #17324d25;font-size:clamp(18px,2vw,28px);font-weight:900;white-space:nowrap}
    .fraction-beaker-app .flow-board{position:absolute;inset:2% 5% 3%;display:grid;grid-template-rows:1fr 52px 1fr;align-items:center;opacity:0}
    .fraction-beaker-app .flow-row{display:flex;align-items:center;justify-content:center;gap:clamp(46px,8vw,120px)}
    .fraction-beaker-app .flow-cup{position:relative;width:clamp(105px,11vw,155px);height:clamp(115px,17vh,165px);border:4px solid #536b79;border-top:0;border-radius:0 0 10px 10px;background:#f7fcfd;overflow:visible;box-shadow:inset 6px 0 0 #fff9,inset -6px 0 0 #d8edf044}
    .fraction-beaker-app .flow-cup::before,.fraction-beaker-app .flow-cup::after{content:"";position:absolute;top:0;width:16px;height:4px;background:#536b79;z-index:10}
    .fraction-beaker-app .flow-cup::before{left:-4px}.fraction-beaker-app .flow-cup::after{right:-4px}
    .fraction-beaker-app .flow-liquid{position:absolute;left:0;right:0;bottom:0;height:0;overflow:hidden;box-shadow:inset 0 6px 0 #ffffff35}
    .fraction-beaker-app .flow-liquid.blue{background:linear-gradient(90deg,var(--a-deep),#60a5fa 55%,var(--a))}
    .fraction-beaker-app .flow-liquid.red{background:linear-gradient(90deg,var(--b-deep),#f87171 55%,var(--b))}
    .fraction-beaker-app .flow-liquid.purple{background:linear-gradient(90deg,var(--mix-deep),#a78bfa 55%,var(--mix))}
    .fraction-beaker-app .flow-liquid.divide{background:linear-gradient(90deg,var(--divide-deep),#bfe7dc 55%,var(--divide))}
    .fraction-beaker-app .split-left .flow-liquid,.fraction-beaker-app .split-right .flow-liquid{height:0}
    .fraction-beaker-app .amount-label{position:absolute;left:50%;bottom:8%;z-index:12;transform:translateX(-50%);display:flex;align-items:center;gap:5px;font-size:clamp(22px,2.5vw,35px);font-weight:900;white-space:nowrap}
    .fraction-beaker-app .amount-label .fraction{grid-template-rows:auto 3px auto}
    .fraction-beaker-app .amount-label .fraction i{height:3px;margin:5px 0 4px}
    .fraction-beaker-app .flow-arrow{position:relative;justify-self:center;width:18px;height:30px;border-radius:7px;background:#1689d7;opacity:0;transform:translateY(-10px)}
    .fraction-beaker-app .flow-arrow::after{content:"";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:20px solid #1689d7}
    .fraction-beaker-app .bottom-row{opacity:0;transform:translateY(-12px)}

    .fraction-beaker-app[data-mode="two-litre"].playing .two-litre-cup-wrap{animation:hideTwoLitre 8s ease both}
    .fraction-beaker-app[data-mode="two-litre"].playing .flow-board{animation:showFlowBoard 8s both}
    .fraction-beaker-app[data-mode="two-litre"].playing .arrow-one{animation:showArrowOne 8s ease both}
    .fraction-beaker-app[data-mode="two-litre"].playing .split-left .flow-liquid,.fraction-beaker-app[data-mode="two-litre"].playing .split-right .flow-liquid{animation:fillSplitPart 8s linear both}
    .fraction-beaker-app[data-mode="two-litre"].playing .bottom-row{animation:showBottomRow 8s ease both}
    .fraction-beaker-app[data-mode="two-litre"].playing .result-two-thirds .flow-liquid{animation:fillTwoParts 8s linear both}
    .fraction-beaker-app .toolbar{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;flex-direction:column;gap:10px}
    .fraction-beaker-app .round-btn{width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--danger);box-shadow:0 4px 15px #0004;cursor:pointer}
    .fraction-beaker-app .round-btn.play{background:var(--gold);color:var(--navy)}
    .fraction-beaker-app .round-btn:hover,.fraction-beaker-app .icon-btn:hover{transform:translateY(-2px)}
    .fraction-beaker-app .round-btn:focus-visible,.fraction-beaker-app .icon-btn:focus-visible{outline:4px solid #ffdc71;outline-offset:3px}

    .fraction-beaker-app.playing .source.left .beaker{animation:tipLeft 8s both}
    .fraction-beaker-app.playing .source.right .beaker{animation:tipRight 8s both}
    .fraction-beaker-app[data-mode="fraction"].playing .source.left .liquid{animation:drainLeftFraction 8s linear both}
    .fraction-beaker-app[data-mode="fraction"].playing .source.right .liquid{animation:drainRightFraction 8s linear both}
    .fraction-beaker-app[data-mode="fraction"].playing .mixed-liquid{animation:fillFraction 8s linear both}
    @keyframes tipLeft{0%,28%{transform:translateX(0) rotate(0)}36%,48%{transform:translateX(clamp(75px,10vw,150px)) rotate(58deg)}56%,100%{transform:translateX(0) rotate(0)}}
    @keyframes tipRight{0%,53%{transform:translateX(0) rotate(0)}61%,73%{transform:translateX(clamp(-150px,-10vw,-75px)) rotate(-58deg)}81%,100%{transform:translateX(0) rotate(0)}}
    @keyframes drainLeftFraction{0%,31%{height:var(--left-level)}49%,100%{height:0}}
    @keyframes drainRightFraction{0%,56%{height:var(--right-level)}74%,100%{height:0}}
    @keyframes fillFraction{
      0%,34%{height:0;background-color:#3b82f6}
      51%,59%{height:var(--left-level);background-color:#3b82f6}
      76%,100%{height:var(--sum-level);background-color:#8b5cf6}
    }
    @keyframes emptyOneCup{from{transform:scaleY(1)}to{transform:scaleY(0)}}
    @keyframes fillOneCup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @keyframes showMixedArrow{0%,2%{opacity:0;transform:translate(-50%,-10px)}8%,100%{opacity:1;transform:translate(-50%,0)}}
    @keyframes hideTwoLitre{0%,17%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%,100%{opacity:0;transform:translate(-50%,-50%) scale(.88)}}
    @keyframes showFlowBoard{0%,20%{opacity:0}27%,100%{opacity:1}}
    @keyframes fillSplitPart{0%,22%{height:0}38%,100%{height:var(--one-part)}}
    @keyframes showArrowOne{0%,43%{opacity:0;transform:translateY(-10px)}50%,100%{opacity:1;transform:translateY(0)}}
    @keyframes showBottomRow{0%,49%{opacity:0;transform:translateY(-12px)}57%,100%{opacity:1;transform:translateY(0)}}
    @keyframes fillTwoParts{0%,54%{height:0}72%,100%{height:var(--two-parts)}}

    @media(max-width:760px){
      .fraction-beaker-app main{padding:10px 72px 12px 10px;overflow:auto}.fraction-beaker-app .stage-card{min-width:720px;min-height:510px}.fraction-beaker-app .source,.fraction-beaker-app .result-wrap{width:170px}.fraction-beaker-app .source.left{left:6%}.fraction-beaker-app .source.right{right:6%}.fraction-beaker-app .beaker{height:300px}.fraction-beaker-app .two-litre-cup-wrap{width:220px}.fraction-beaker-app .two-litre-beaker{height:360px}.fraction-beaker-app .flow-cup{width:110px;height:120px}
    }
    @media(max-height:680px){.fraction-beaker-app main{overflow:auto}.fraction-beaker-app .stage-card{min-height:450px}}
    @media(max-width:700px){.fraction-beaker-app header{height:58px;flex-basis:58px;padding:6px 10px}.fraction-beaker-app h1{font-size:16px}.fraction-beaker-app .mode-btn{min-width:72px;height:38px;padding:0 12px}.fraction-beaker-app .icon-btn{width:40px;height:40px}.fraction-beaker-app .toolbar{right:12px;bottom:12px}.fraction-beaker-app .round-btn{width:52px;height:52px}}
    @media(prefers-reduced-motion:reduce){.fraction-beaker-app.playing *{animation-duration:.01ms!important;animation-delay:0s!important}}
  

body.admin-bar .fraction-beaker-app{height:calc(100vh - 32px);height:calc(100dvh - 32px)}
body.admin-bar .fraction-beaker-app:fullscreen{height:100vh;height:100dvh}
@media(max-width:782px){body.admin-bar .fraction-beaker-app{height:calc(100vh - 46px);height:calc(100dvh - 46px)}body.admin-bar .fraction-beaker-app:fullscreen{height:100vh;height:100dvh}}