:where(.fraction-add-root) .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%;--one-part:33.333%;--two-parts:66.667%;
    }
:where(.fraction-add-root) .fraction-beaker-app *{box-sizing:border-box}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app button{font:inherit;touch-action:manipulation}
:where(.fraction-add-root) .fraction-beaker-app{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#fff}
:where(.fraction-add-root) .fraction-beaker-app main{position:relative;flex:1;min-height:0;padding:14px 86px 16px 14px;overflow:hidden}
:where(.fraction-add-root) .fraction-beaker-app .fraction{display:inline-grid;grid-template-rows:auto 4px auto;min-width:.9em;text-align:center;line-height:.82}
:where(.fraction-add-root) .fraction-beaker-app .fraction i{height:4px;margin:7px 0 6px;background:currentColor;border-radius:5px}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .stage{position:relative;width:100%;height:100%;min-height:450px}
:where(.fraction-add-root) .fraction-beaker-app .source{position:absolute;top:50%;width:clamp(160px,20vw,290px);transform:translateY(-50%);z-index:4}
:where(.fraction-add-root) .fraction-beaker-app .source.left{left:8%}
:where(.fraction-add-root) .fraction-beaker-app .source.right{right:8%}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .beaker::before,:where(.fraction-add-root) .fraction-beaker-app .beaker::after{content:"";position:absolute;top:0;width:23px;height:6px;background:#667b88;z-index:10}
:where(.fraction-add-root) .fraction-beaker-app .beaker::before{left:-6px}
:where(.fraction-add-root) .fraction-beaker-app .beaker::after{right:-6px}
:where(.fraction-add-root) .fraction-beaker-app .source.left .beaker{transform-origin:88% 8%}
:where(.fraction-add-root) .fraction-beaker-app .source.right .beaker{transform-origin:12% 8%}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="fraction"] .source.left .liquid{height:var(--left-level)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="fraction"] .source.right .liquid{height:var(--right-level)}
:where(.fraction-add-root) .fraction-beaker-app .source.right .liquid{background:linear-gradient(90deg,var(--b-deep),#f87171 55%,var(--b))}
:where(.fraction-add-root) .fraction-beaker-app .surface{position:absolute;left:-8%;top:-5px;width:116%;height:10px;border-radius:50%;background:#ffffff55;border:2px solid #ffffff80}
:where(.fraction-add-root) .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))}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .editable-number{user-select:none}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .number-input::-webkit-inner-spin-button,:where(.fraction-add-root) .fraction-beaker-app .number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:where(.fraction-add-root) .fraction-beaker-app .number-input:focus{outline:4px solid #ffdc71;outline-offset:2px;border-color:transparent}
:where(.fraction-add-root) .fraction-beaker-app .whole-input{width:1.35em}
:where(.fraction-add-root) .fraction-beaker-app .result-wrap{position:absolute;left:50%;top:50%;width:clamp(160px,20vw,290px);transform:translate(-50%,-50%);z-index:5}
:where(.fraction-add-root) .fraction-beaker-app .result-beakers{display:flex;gap:14px}
:where(.fraction-add-root) .fraction-beaker-app .result-beakers .result-beaker{flex:1 1 0%;min-width:0}
:where(.fraction-add-root) .fraction-beaker-app .over-beaker{display:none}
:where(.fraction-add-root) .fraction-beaker-app .result-wrap[data-overflow="true"]{width:clamp(280px,30vw,420px)}
:where(.fraction-add-root) .fraction-beaker-app .result-wrap[data-overflow="true"] .over-beaker{display:block}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .guide-btn{height:38px;min-width:64px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#536b79;font-weight:900;cursor:pointer}
:where(.fraction-add-root) .fraction-beaker-app .guide-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"] .standard-stage{display:none}
:where(.fraction-add-root) .fraction-beaker-app .mixed-number-stage{display:none;position:relative;width:100%;height:100%;min-height:450px}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"] .mixed-number-stage{display:block}
:where(.fraction-add-root) .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%}
:where(.fraction-add-root) .fraction-beaker-app .mixed-group{flex:1 1 0%;min-width:0;display:grid;justify-items:center;gap:12px}
:where(.fraction-add-root) .fraction-beaker-app .mixed-group .mixed-rack{width:100%}
:where(.fraction-add-root) .fraction-beaker-app .mixed-rack{display:flex;align-items:flex-end;justify-content:center;gap:clamp(7px,1vw,14px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-unit-cup{flex:0 1 auto;min-width:0;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}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .mixed-unit-cup{width:clamp(44px,4.8vw,70px);height:clamp(100px,15vh,150px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .mixed-rack{gap:clamp(6px,.8vw,11px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .one-litre-mark{font-size:clamp(14px,1.4vw,20px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-unit-cup::before,:where(.fraction-add-root) .fraction-beaker-app .mixed-unit-cup::after{content:"";position:absolute;top:0;width:13px;height:4px;background:#536b79;z-index:10}
:where(.fraction-add-root) .fraction-beaker-app .mixed-unit-cup::before{left:-4px}
:where(.fraction-add-root) .fraction-beaker-app .mixed-unit-cup::after{right:-4px}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .unit-liquid.blue{background:linear-gradient(90deg,var(--a-deep),#60a5fa 55%,var(--a))}
:where(.fraction-add-root) .fraction-beaker-app .unit-liquid.red{background:linear-gradient(90deg,var(--b-deep),#f87171 55%,var(--b))}
:where(.fraction-add-root) .fraction-beaker-app .unit-liquid.purple{background:linear-gradient(90deg,var(--mix-deep),#a78bfa 55%,var(--mix))}
:where(.fraction-add-root) .fraction-beaker-app .unit-liquid .mix-layer{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,var(--mix-deep),#a78bfa 55%,var(--mix))}
:where(.fraction-add-root) .fraction-beaker-app .unit-liquid .surface{z-index:1}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .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)}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row{position:absolute;left:50%;top:54%;width:96%;transform:translateX(-50%);opacity:1}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .mixed-rack{width:100%}
:where(.fraction-add-root) .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}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .mixed-rack{gap:clamp(8px,1.2vw,18px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .one-litre-mark{top:-22px;font-size:clamp(20px,2vw,29px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .unit-liquid{height:0}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"].playing .mixed-combine-arrow{animation:showMixedArrow .45s ease both}
:where(.fraction-add-root) .fraction-beaker-app.playing .source.left .beaker{animation:tipLeft 8s both}
:where(.fraction-add-root) .fraction-beaker-app.playing .source.right .beaker{animation:tipRight 8s both}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="fraction"].playing .source.left .liquid{animation:drainLeftFraction 8s linear both}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="fraction"].playing .source.right .liquid{animation:drainRightFraction 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 showMixedArrow{0%,2%{opacity:0;transform:translate(-50%,-10px)}8%,100%{opacity:1;transform:translate(-50%,0)}}
@keyframes moveTwoLitre{0%,12%{left:50%;transform:translate(-50%,-50%) scale(1)}20%,100%{left:19%;transform:translate(-50%,-50%) scale(.68)}}
@keyframes drainTwoLitre{0%,24%{height:var(--one-part)}38%,100%{height:0}}
@keyframes showFlowBoard{0%,14%{opacity:0}21%,100%{opacity:1}}
@keyframes fillSplitPart{0%,24%{height:0}38%,54%{height:var(--one-part)}72%,100%{height:0}}
@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){:where(.fraction-add-root) .fraction-beaker-app main{padding:10px 72px 12px 10px;overflow:auto}
:where(.fraction-add-root) .fraction-beaker-app .stage-card{min-width:720px;min-height:510px}
:where(.fraction-add-root) .fraction-beaker-app .source,:where(.fraction-add-root) .fraction-beaker-app .result-wrap{width:170px}
:where(.fraction-add-root) .fraction-beaker-app .result-wrap[data-overflow="true"]{width:280px}
:where(.fraction-add-root) .fraction-beaker-app .source.left{left:6%}
:where(.fraction-add-root) .fraction-beaker-app .source.right{right:6%}
:where(.fraction-add-root) .fraction-beaker-app .beaker{height:300px}
}
@media(max-height:680px){:where(.fraction-add-root) .fraction-beaker-app main{overflow:auto}
:where(.fraction-add-root) .fraction-beaker-app .stage-card{min-height:450px}
}
@media(prefers-reduced-motion:reduce){:where(.fraction-add-root) .fraction-beaker-app.playing *{animation-duration:.01ms!important;animation-delay:0s!important}
}
body.admin-bar :where(.fraction-add-root) .fraction-beaker-app{height:calc(100vh - 32px);height:calc(100dvh - 32px)}
body.admin-bar :where(.fraction-add-root) .fraction-beaker-app:fullscreen{height:100vh;height:100dvh}
@media(max-width:782px){body.admin-bar :where(.fraction-add-root) .fraction-beaker-app{height:calc(100vh - 46px);height:calc(100dvh - 46px)}
body.admin-bar :where(.fraction-add-root) .fraction-beaker-app:fullscreen{height:100vh;height:100dvh}
}
:where(.fraction-add-root) .fraction-beaker-app .stage-card .number-input{border-bottom:0;background:transparent;pointer-events:none;cursor:pointer;caret-color:transparent}
:where(.fraction-add-root) .fraction-beaker-app .fb-target{cursor:pointer;border-radius:14px;outline:3px dashed transparent;outline-offset:4px;transition:outline-color .15s,background-color .15s;-webkit-tap-highlight-color:transparent}
:where(.fraction-add-root) .fraction-beaker-app .fb-target:hover{outline-color:#c9d9e5}
:where(.fraction-add-root) .fraction-beaker-app .fb-target.is-selected{outline:4px solid #d4af37;background-color:#fff8df}
:where(.fraction-add-root) .fraction-beaker-app .fb-target:focus-visible{outline:4px solid #ffdc71}
:where(.fraction-add-root) .fraction-beaker-app .fb-float{position:absolute;left:16px;top:16px;z-index:40;padding:0 12px 10px;display:flex;flex-direction:column;align-items:center;background:#fff;border:2px solid #c9d9e5;border-radius:16px;box-shadow:0 8px 24px #0004;user-select:none}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-handle{width:100%;height:30px;display:flex;align-items:center;justify-content:center;gap:6px;color:#718397;font-size:14px;font-weight:900;cursor:grab;touch-action:none}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor{display:grid;grid-template-columns:auto 50px 72px 50px;grid-auto-rows:43px;align-items:center;column-gap:7px;row-gap:4px}
:where(.fraction-add-root) .fraction-beaker-app .fb-editor-label{grid-column:1;font-size:20px;font-weight:900;color:var(--navy);text-align:right;padding-right:6px;white-space:nowrap}
:where(.fraction-add-root) .fraction-beaker-app .fb-value{display:grid;place-items:center;font-size:38px;font-weight:900;line-height:1;color:var(--text)}
:where(.fraction-add-root) .fraction-beaker-app .fb-frac-line{grid-column:3;height:4px;border-radius:4px;background:var(--text);align-self:center}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor .fb-frac-line{grid-row:auto}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor:has(.fb-frac-line){grid-auto-rows:auto}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor .fb-step,:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor .fb-value{height:43px}
:where(.fraction-add-root) .fraction-beaker-app .fb-step{width:50px;height:44px;padding:0;border:0;border-radius:13px;display:grid;place-items:center;background:#e8f0f6;color:var(--navy);font:inherit;font-size:29px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 2px 5px #0002;touch-action:manipulation}
:where(.fraction-add-root) .fraction-beaker-app .fb-step.plus{background:#d4af37;color:#0f1e3a}
:where(.fraction-add-root) .fraction-beaker-app .fb-step:disabled{opacity:.28;cursor:not-allowed;box-shadow:none}
:where(.fraction-add-root) .fraction-beaker-app .fb-step:focus-visible{outline:4px solid #ffdc71;outline-offset:2px}
:where(.fraction-add-root) .fraction-beaker-app .fb-editor-label.is-whole{color:#536b79}
@media(max-width:760px),(max-height:690px){:where(.fraction-add-root) .fraction-beaker-app .fb-float{padding:0 8px 7px}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-handle{height:26px}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor{grid-template-columns:auto 42px 58px 42px;column-gap:5px}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor .fb-step,:where(.fraction-add-root) .fraction-beaker-app .fb-float-editor .fb-value{height:36px}
:where(.fraction-add-root) .fraction-beaker-app .fb-editor-label{font-size:15px}
:where(.fraction-add-root) .fraction-beaker-app .fb-value{font-size:29px}
:where(.fraction-add-root) .fraction-beaker-app .fb-step{width:42px;font-size:23px}
}
:where(.fraction-add-root) .fraction-beaker-app.paused,:where(.fraction-add-root) .fraction-beaker-app.paused *{animation-play-state:paused !important}
:where(.fraction-add-root) .fraction-beaker-app .fb-float[hidden]{display:none !important}
:where(.fraction-add-root) .fraction-beaker-app .fb-float-handle{position:relative;padding:0 30px}
:where(.fraction-add-root) .fraction-beaker-app{--m-one-part:33.333%;--m-two-parts:66.667%;--band-w:clamp(420px,62vw,820px);--band-h:clamp(50px,9vh,76px)}
@keyframes moveBand{0%,12%{left:50%;transform:translate(-50%,-50%) scale(1)}20%,100%{left:21%;transform:translate(-50%,-50%) scale(.46)}}
@keyframes showDividerLine{0%{opacity:0}6%,100%{opacity:1}}
@keyframes cutBand{0%,24%{width:var(--m-one-part)}38%,100%{width:0}}
@keyframes fillSplitBand{0%,24%{width:0}38%,54%{width:var(--m-one-part)}72%,100%{width:0}}
@keyframes fillTwoBand{0%,54%{width:0}72%,100%{width:var(--m-two-parts)}}
@media(max-width:760px){:where(.fraction-add-root) .fraction-beaker-app{--band-w:440px;--band-h:48px}
}
:where(.fraction-add-root) .fraction-beaker-app .guide-badge{position:absolute;right:-4px;top:-4px;min-width:24px;height:24px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#d4af37;color:#0f1e3a;font-size:13px;font-weight:900;line-height:1;box-shadow:0 1px 4px #0003}
:where(.fraction-add-root) .fraction-beaker-app .guide-popout{position:absolute;right:70px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;border-radius:16px;background:#fff;border:2px solid #c9d9e5;box-shadow:0 8px 24px #0004;white-space:nowrap}
:where(.fraction-add-root) .fraction-beaker-app .guide-popout[hidden]{display:none !important}
:where(.fraction-add-root) .fraction-beaker-app .guide-popout-title{font-size:13px;font-weight:900;color:#718397}
:where(.fraction-add-root) .fraction-beaker-app .guide-popout .guide-switch{position:static;transform:none;left:auto;bottom:auto}
:where(.fraction-add-root) .fraction-beaker-app .guide-popout .guide-btn{height:44px;font-size:17px}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row{transition:top .6s ease,transform .6s ease}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .mixed-unit-cup{transition:width .6s ease,height .6s ease}
:where(.fraction-add-root) .fraction-beaker-app .mixed-group-label{transition:font-size .6s ease}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row{top:38%;transform:translate(-50%,-50%)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row .mixed-unit-cup{width:clamp(64px,7.5vw,118px);height:clamp(150px,31vh,270px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row .mixed-rack{gap:clamp(8px,1.2vw,16px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row .one-litre-mark{top:-24px;font-size:clamp(18px,2vw,28px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-group-label{font-size:clamp(28px,3.2vw,46px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row{transition:opacity .45s ease .4s}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-result-row{opacity:0;visibility:hidden;transition:none}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row{top:3%}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .mixed-unit-cup{width:clamp(56px,6.5vw,104px);height:clamp(130px,24vh,250px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .one-litre-mark{top:-22px;font-size:clamp(17px,1.8vw,26px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .mixed-rack{gap:clamp(7px,1vw,14px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-group-label{font-size:clamp(28px,3vw,46px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-combine-arrow{top:44%}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row{top:49%}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .mixed-unit-cup{width:clamp(88px,10.5vw,170px);height:clamp(200px,38vh,400px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .one-litre-mark{top:-26px;font-size:clamp(22px,2.3vw,34px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row{top:42%;transform:translate(-50%,-50%)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row .mixed-unit-cup{width:clamp(78px,9.5vw,156px);height:clamp(190px,46vh,440px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row .mixed-rack{gap:clamp(10px,1.4vw,20px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-source-row .one-litre-mark{top:-28px;font-size:clamp(22px,2.4vw,36px)}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="mixed"]:not(.playing) .mixed-group-label{font-size:clamp(36px,4.3vw,64px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-number-stage{--src-cup:clamp(80px,16vh,170px);--src-font:clamp(22px,min(2.4vw,4vh),38px);--src-block:calc(26px + var(--src-cup) + 12px + var(--src-font) * 2.5 + 14px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row{top:calc(2% + 24px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-source-row .mixed-unit-cup{height:var(--src-cup);width:clamp(48px,5.5vw,90px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-group-label{font-size:var(--src-font)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-combine-arrow{top:calc(2% + var(--src-block) - 12px)}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row{top:calc(2% + var(--src-block) + 26px);bottom:2%;display:flex;align-items:flex-end}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .mixed-rack{height:100%;align-items:flex-end}
:where(.fraction-add-root) .fraction-beaker-app .mixed-result-row .mixed-unit-cup{height:calc(100% - 30px);max-height:460px}
:where(.fraction-add-root) .fraction-beaker-app[data-mode="fraction"]:not(.playing) .result-wrap{visibility:hidden}
:where(.fraction-add-root) .vtb-host .atb-toolbox{display:flex;position:fixed;right:16px;bottom:84px;width:244px;height:380px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 64px);padding:0;gap:0;align-items:stretch;flex-direction:column;background:#f5f7fc;border:2px solid #c8d3e3;border-radius:16px;box-shadow:0 6px 24px #13274240;overflow:hidden;z-index:1000;box-sizing:border-box;container-type:inline-size}
:where(.fraction-add-root) .vtb-host .atb-toolbox-head{display:flex;flex-shrink:0;height:44px;background:var(--navy,#1e3a5f);color:white;align-items:center}
:where(.fraction-add-root) .vtb-host .atb-toolbox-head button{border:0;background:transparent;color:white;height:44px;margin:0;padding:0 12px;font-family:inherit;font-size:16px;font-weight:bold;box-shadow:none;border-radius:0}
:where(.fraction-add-root) .vtb-host .atb-toolbox-grip{flex:1;text-align:left;cursor:move;touch-action:none;user-select:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox-fold{width:40px;font-size:24px!important;cursor:pointer}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));align-content:start;gap:8px;padding:10px 10px 24px;overflow:auto;min-height:0;flex:1}
:where(.fraction-add-root) .vtb-host .atb-toolbox .atb-toolbar-group{display:contents;border-radius:0;box-shadow:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:68px;min-height:48px;margin:0;padding:6px;border:1px solid #d7dfeb;border-radius:12px;background:white;color:var(--navy,#1e3a5f);box-shadow:0 2px 4px #13274212;cursor:pointer;font-family:inherit}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button:disabled{opacity:.35;cursor:default}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body .atb-tool-icon{width:26px;height:26px;flex-shrink:0}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body .atb-tool-label{font-size:13px;font-weight:bold;line-height:1.2;white-space:normal;text-align:center}
:where(.fraction-add-root) .vtb-host .atb-toolbox-resize{position:absolute;right:0;bottom:0;width:26px;height:24px;border:0;background:#e4eaf4;color:var(--navy,#1e3a5f);font-size:20px;cursor:nwse-resize;touch-action:none;padding:0;margin:0}
:where(.fraction-add-root) .vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));padding:6px 6px 24px}
:where(.fraction-add-root) .vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body button{width:44px;height:44px;min-height:44px;border-radius:50%;justify-self:center;gap:0}
:where(.fraction-add-root) .vtb-host .atb-toolbox.atb-toolbox-compact .atb-tool-label{display:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox.atb-toolbox-compact button:has(img[hidden]) .atb-tool-label{display:block;font-size:10px}
:where(.fraction-add-root) .vtb-host .atb-toolbox-closed{height:44px!important;min-height:44px}
:where(.fraction-add-root) .vtb-host .atb-toolbox-closed .atb-toolbox-body,:where(.fraction-add-root) .vtb-host .atb-toolbox-closed .atb-toolbox-resize{display:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox button:focus-visible{outline:3px solid #4d97ff;outline-offset:-3px}
:where(.fraction-add-root) .vtb-host .atb-toolbox-layouts{display:flex;flex-shrink:0;gap:4px;padding:5px;background:#e7edf6}
:where(.fraction-add-root) .vtb-host .atb-toolbox-layouts button{flex:1;min-width:0;height:32px;margin:0;padding:2px;border:1px solid #c7d2e3;border-radius:7px;background:white;color:var(--navy,#1e3a5f);font-family:inherit;font-size:12px;font-weight:bold;cursor:pointer}
:where(.fraction-add-root) .vtb-host .atb-toolbox-layouts button[aria-pressed="true"]{background:var(--gold,#d4af37);border-color:var(--gold,#d4af37)}
:where(.fraction-add-root) .vtb-host .atb-toolbox[data-layout] .atb-toolbox-body{grid-template-columns:repeat(var(--atb-tool-columns),minmax(0,1fr))}
:where(.fraction-add-root) .vtb-host .atb-toolbox-closed .atb-toolbox-layouts{display:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button{--tool-bg:#eef1f5;--tool-border:#cbd2dc;--tool-ink:#394657;--tool-active:#465568;background:var(--tool-bg);border-color:var(--tool-border);color:var(--tool-ink)}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button[data-color="blue"]{--tool-bg:#e0edff;--tool-border:#9abce9;--tool-ink:#184d91;--tool-active:#245fa8}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button[data-color="orange"]{--tool-bg:#ffead4;--tool-border:#e6b07a;--tool-ink:#8b420c;--tool-active:#a64c10}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button[data-color="green"]{--tool-bg:#dcf2e5;--tool-border:#91c7a8;--tool-ink:#1d6342;--tool-active:#24734d}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button[data-color="purple"]{--tool-bg:#ede4fb;--tool-border:#bda2df;--tool-ink:#654091;--tool-active:#7045a1}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button[data-color="navy"]{--tool-bg:#e3eaf4;--tool-border:#9eafc7;--tool-ink:#1e3a5f;--tool-active:#1e3a5f}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button:hover:not(:disabled){box-shadow:0 0 0 2px var(--tool-border)}
:where(.fraction-add-root) .vtb-host .atb-tool-icon{width:26px;height:26px;display:block;fill:currentColor}
:where(.fraction-add-root) .vtb-host .atb-toolbox-settings svg{fill:currentColor}
:where(.fraction-add-root) .vtb-host .atb-toolbox [hidden]{display:none!important}
:where(.fraction-add-root) .vtb-host .atb-toolbox-grip{font-size:15px!important;line-height:1.2!important;min-width:0;white-space:normal}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body>label,:where(.fraction-add-root) .vtb-host .atb-toolbox-body>select{grid-column:1/-1;min-width:0;margin:0;padding:6px;position:static;transform:none;background:transparent;box-shadow:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:#1e3a5f}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body select{min-width:0;max-width:100%;width:100%;height:44px;background:white;color:#1e3a5f;border:1px solid #c7d2e3;border-radius:8px;font-size:14px}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body :is(.atb-toolbar-group,nav){display:contents;position:static;transform:none;padding:0;background:none;box-shadow:none}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body button{border-radius:12px!important;font-size:14px;line-height:1.3!important}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body img.atb-tool-icon,:where(.fraction-add-root) .vtb-host .atb-toolbox-body svg.atb-tool-icon{width:26px!important;height:26px!important;fill:currentColor;stroke:none;touch-action:auto}
:where(.fraction-add-root) .vtb-host .atb-toolbox-head svg{width:24px!important;height:24px!important;fill:currentColor}
:where(.fraction-add-root) .vtb-host .atb-toolbox-compact .atb-toolbox-body button{border-radius:50%!important}
:where(.fraction-add-root) .vtb-host .atb-toolbox-body [aria-pressed=true]{background:var(--tool-active,#245fa8);color:white}
@media print{:where(.fraction-add-root) .vtb-host .atb-toolbox{display:none!important}
}
:where(.fraction-add-root) .fraction-beaker-app{background:linear-gradient(135deg,#0ea5e9,#6366f1,#8b5cf6);}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox{min-width:220px;transform:none;gap:0;pointer-events:auto;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox > .fb-float{position:static!important;transform:none!important;flex:0 0 auto;width:calc(100% - 12px);margin:6px;padding:6px;border:1px solid #bbcde3;box-shadow:none;border-radius:12px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox .fb-float-handle{height:28px;cursor:default;touch-action:auto;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox .fb-float-editor{grid-template-columns:30px 34px minmax(54px,1fr) 34px;column-gap:3px;row-gap:4px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox .fb-editor-label{font-size:13px;padding:0;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox .fb-value{font-size:28px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox .fb-step{width:34px;height:40px!important;min-height:40px;border-radius:9px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox .fb-step .atb-tool-icon{width:22px!important;height:22px!important;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox.fl-has-input.atb-toolbox-closed{height:260px!important;min-height:260px!important;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-head img{filter:brightness(0) invert(1);}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-head .atb-toolbox-grip{font-size:13px!important;padding:0 7px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-fold img,:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-resize img{width:22px;height:22px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-body button{position:relative;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-body .guide-badge{right:0;top:0;font-size:10px;min-width:18px;height:18px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox-body button[aria-pressed=true] img{filter:brightness(0) invert(1);}
:where(.fraction-add-root) .fraction-beaker-app dialog{border:0;border-radius:16px;padding:24px;max-width:calc(100vw - 32px);color:#1e3a5f;}
:where(.fraction-add-root) .fraction-beaker-app dialog::backdrop{background:#142b4d88;}
:where(.fraction-add-root) .fraction-beaker-app dialog button{min-height:44px;padding:8px 16px;margin:6px;border:1px solid #bdcde0;border-radius:10px;background:#eef4ff;color:#1e3a5f;cursor:pointer;}
:where(.fraction-add-root) .fraction-beaker-app .fb-settings-dialog button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;position:static;}
:where(.fraction-add-root) .fraction-beaker-app .fb-guide-dialog .guide-popout{position:static;display:block;width:auto;transform:none;padding:0;border:0;box-shadow:none;}
:where(.fraction-add-root) .fraction-beaker-app .fb-guide-dialog .guide-popout[hidden]{display:none;}
body.admin-bar :where(.fraction-add-root) .fraction-beaker-app{height:calc(100dvh - 32px);}
@media(max-width:782px){body.admin-bar :where(.fraction-add-root) .fraction-beaker-app{height:calc(100dvh - 46px);}
}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-body > button{min-width:0!important;max-width:100%;margin:0!important;padding:6px!important;flex:none;transform:none!important;box-sizing:border-box;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body > button{width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;aspect-ratio:1;border-radius:50%!important;justify-self:center;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-body{min-width:0;overflow-x:hidden;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-body > button .atb-tool-icon{flex:0 0 auto;max-width:26px;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox.fl-has-input.atb-toolbox-closed{height:44px!important;min-height:44px!important;}
:where(.fraction-add-root) .fraction-beaker-app .atb-toolbox.atb-toolbox-closed > .fl-tool-input{display:none!important;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,32px);gap:4px;align-items:center;height:44px;min-height:44px;padding:0 6px;box-sizing:border-box;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head .atb-toolbox-grip{width:100%;height:32px;min-width:0;margin:0;padding:0 2px;font-size:12px!important;white-space:nowrap;text-align:left;overflow:hidden;text-overflow:ellipsis;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head :is(.fb-header-play,.atb-toolbox-settings,.atb-toolbox-fold){display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;line-height:1;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head .fb-header-play{background:#f4c84d;color:#1e3a5f;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head .fb-header-play .atb-tool-label{display:none;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head :is(.atb-toolbox-settings,.atb-toolbox-fold){background:#ffffff12;color:#fff;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head :is(svg,img.atb-tool-icon){display:block;width:24px!important;height:24px!important;margin:0;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head .fb-header-play svg{fill:#1e3a5f!important;color:#1e3a5f!important;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head .fb-header-play img{filter:none;}
:where(.fraction-add-root) .fraction-beaker-app.vtb-host .atb-toolbox-head :is(.atb-toolbox-settings,.atb-toolbox-fold) svg{fill:#fff!important;color:#fff!important;}

/* 一覧に戻る：最小化しても使えるヘッダー左端 */
:where(.fraction-add-root) .atb-toolbox-head{display:grid;grid-template-columns:32px minmax(0,1fr) repeat(3,32px);gap:4px;align-items:center;padding:0 6px;}
:where(.fraction-add-root) .atb-toolbox-head .fraction-list-back{display:grid;place-items:center;width:32px;height:32px;min-width:32px;margin:0;padding:0;background:#ffffff12;border:0;border-radius:50%;color:white;cursor:pointer;}
:where(.fraction-add-root) .fraction-list-back .atb-tool-label{display:none;}
:where(.fraction-add-root) .fraction-list-back svg{width:24px!important;height:24px!important;fill:white!important;color:white!important;}

:where(.fraction-add-root) .fb-share-notice{position:absolute;top:8px;left:12px;right:12px;margin:0;padding:8px 12px;border-radius:8px;background:#fff4d7;color:#563a10;font-size:14px;z-index:5;}