@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@600;800&family=IBM+Plex+Sans:wght@400;600&family=IBM+Plex+Mono:wght@500&display=swap');
.tbx-anchors{--m:#d01e98;--c:#383838;--bg:#f4f2ee;display:flex;align-items:stretch;border:1px solid var(--c);background:var(--bg);color:var(--c);font:500 14px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0;text-transform:uppercase;height:40px;min-height:40px;box-sizing:border-box;width:100%;overflow:hidden;flex:none}
.tbx-anchors *{box-sizing:border-box}
.tbx-anchors button{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0 8px;border-right:1px solid var(--c);white-space:nowrap;flex:1 1 auto;justify-content:center;min-width:0}
.tbx-anchors button:last-child{border-right:0}
.tbx-anchors button:hover,.tbx-anchors button:focus-visible{background:var(--c);color:#fff}
.tbx-anchors button[data-k="05"]{box-shadow:inset 0 0 0 2px var(--m)}
.tbx-anchors i{display:inline-block;width:10px;height:10px;background:var(--m);flex:none}
.tbx-anchors .n{opacity:.7}.tbx-anchors .t{overflow:visible}
.tbx-anchors button.s{flex:0 0 auto}
.tbx-anchors--fixed{position:fixed;left:0;right:0;bottom:0;z-index:60}
@media(max-width:1100px){.tbx-anchors .t{display:none}.tbx-anchors button.s .t,.tbx-anchors button[data-k="05"] .t{display:inline}}
@media(max-width:600px){.tbx-anchors button{padding:0 2px;gap:3px;flex:1 1 0}.tbx-anchors i{width:8px;height:8px}.tbx-anchors button[data-k="05"] .t{display:none}.tbx-anchors button.s .t{display:none}}
.tbx-sheet{--m:#d01e98;--c:#383838;position:fixed;inset:0;z-index:1000;background:rgba(56,56,56,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.tbx-sheet[hidden]{display:none}
.tbx-card{background:#f4f2ee;color:var(--c);border:2px solid var(--c);width:min(980px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;font:400 20px/1.35 "IBM Plex Sans",system-ui,sans-serif;overflow:hidden}
.tbx-card header{display:flex;justify-content:space-between;align-items:center;background:var(--c);color:#fff;font:500 14px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;padding:0 0 0 14px;height:44px;flex:none}
.tbx-card header i{display:inline-block;width:12px;height:12px;background:var(--m);margin-right:8px;vertical-align:-1px}
.tbx-card header button{all:unset;cursor:pointer;height:44px;padding:0 16px;border-left:1px solid #fff}
.tbx-card header button:hover{background:var(--m)}
.tbx-body{padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0;overflow:hidden}
.tbx-body h2{grid-column:1/-1;margin:0;font:800 clamp(32px,5vw,64px)/1.05 "MuseoModerno",sans-serif;letter-spacing:-.04em}
.tbx-body h2 em{font-style:normal;color:var(--m)}
.tbx-lab{font:500 14px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--m);margin:0 0 6px}
.tbx-body p{margin:0}
.tbx-rows{display:flex;flex-direction:column;gap:14px}
.tbx-vis{border:1px solid var(--c);padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;font:500 14px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase}
.tbx-bar{height:28px;background:var(--c);color:#fff;display:flex;align-items:center;padding:0 8px}
.tbx-bar.m{background:var(--m)}.tbx-bar.o{background:transparent;color:var(--c);border:1px dashed var(--c)}
.tbx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--c);border-left:1px solid var(--c)}
.tbx-grid div{border-right:1px solid var(--c);border-bottom:1px solid var(--c);padding:8px;min-height:64px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;font:500 14px/1.15 "IBM Plex Sans",sans-serif;text-transform:none}
.tbx-grid b{font:800 20px/1 "MuseoModerno",sans-serif}
.tbx-grid div.p{background:var(--m);color:#fff}
.tbx-steps{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--c)}
.tbx-steps a{border:1px solid var(--c);border-left:0;padding:10px;color:var(--c);text-decoration:none;display:flex;flex-direction:column;gap:6px;font:400 14px/1.25 "IBM Plex Sans",sans-serif}
.tbx-steps a b{font:800 18px/1 "MuseoModerno",sans-serif}.tbx-steps a span.pr{font:500 14px/1 "IBM Plex Mono",monospace;color:var(--m)}
.tbx-steps a:hover{background:var(--c);color:#fff}
.tbx-links{display:flex;flex-wrap:wrap;gap:10px}
.tbx-links a{border:2px solid var(--c);padding:10px 14px;color:var(--c);text-decoration:none;font:500 14px/1 "IBM Plex Mono",monospace;text-transform:uppercase}
.tbx-links a.m{background:var(--m);border-color:var(--m);color:#fff}
.tbx-wide{grid-column:1/-1}
@media(max-width:700px){.tbx-body{grid-template-columns:1fr;padding:14px;gap:12px}.tbx-card{font-size:18px}.tbx-grid div{min-height:0;padding:6px}.tbx-grid b{font-size:16px}.tbx-steps{grid-template-columns:1fr 1fr}.tbx-steps a{padding:8px}.tbx-body h2{font-size:34px}}

.tbx-big{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--c)}.tbx-big div{padding:8px 14px;font:500 14px/1 "IBM Plex Mono",monospace;text-transform:uppercase;display:flex;flex-direction:column;gap:4px}.tbx-big b{font:800 clamp(44px,7vw,80px)/1 "MuseoModerno",sans-serif;letter-spacing:-.04em}.tbx-big div.m{background:var(--m);color:#fff}

/* 2026-10-25 flip tiles: front = number + name; pressed = formula card flips in over the grid */
.tbx-grid{position:relative;perspective:1400px}
.tbx-grid .tbx-tile{all:unset;box-sizing:border-box;cursor:pointer;border-right:1px solid var(--c);border-bottom:1px solid var(--c);min-height:64px;display:flex;color:var(--c);font:500 14px/1.15 "IBM Plex Sans",sans-serif}
.tbx-grid .tbx-tile.p{background:var(--m);color:#fff}
.tbx-grid .tbx-tile:focus-visible{outline:3px solid var(--m);outline-offset:-3px}
.tbx-grid .tbx-tile.p:focus-visible{outline-color:#383838}
.tbx-in{display:flex;flex:1}
.tbx-f{flex:1;padding:8px;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.tbx-f:after{content:"f(x) \21BB";font:500 14px/1 "IBM Plex Mono",monospace;opacity:.7;align-self:flex-end}
.tbx-bk{display:none;position:absolute;inset:0;z-index:3;background:#383838;color:#fff;box-shadow:inset 0 0 0 3px var(--m);padding:12px 16px;flex-direction:column;justify-content:center;gap:8px;backface-visibility:hidden;transform-origin:50% 50%;animation:tbxflip .5s cubic-bezier(.3,.7,.2,1)}
.tbx-tile[aria-pressed=true] .tbx-bk{display:flex}
@keyframes tbxflip{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}
@keyframes tbxfade{from{opacity:0}to{opacity:1}}
.tbx-k{font:500 14px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:#f7a8dc}
.tbx-m{font:italic 400 20px/1.5 "Cambria Math","STIX Two Math","Latin Modern Math",Georgia,serif;color:#fff}
.tbx-m sub,.tbx-m sup{font-size:15px;line-height:0}
.tbx-m .fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 3px;line-height:1.25}
.tbx-m .fr>span:first-child{border-bottom:1.5px solid currentColor;padding:0 3px 2px}
.tbx-m .fr>span:last-child{padding:2px 3px 0}
.tbx-m .op{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 2px}
.tbx-m .op>span{font-size:24px;font-style:normal}.tbx-m .op sub,.tbx-m .op sup{line-height:1}
.tbx-w{font:400 16px/1.3 "IBM Plex Sans",sans-serif;font-style:normal}
@media(max-width:700px){.tbx-grid .tbx-tile{min-height:0}.tbx-f{padding:6px}.tbx-f:after{display:none}.tbx-bk{padding:8px 10px;gap:6px}.tbx-m{font-size:17px;line-height:1.4}.tbx-m sub,.tbx-m sup{font-size:14px}.tbx-w{font-size:14px}}
@media(prefers-reduced-motion:reduce){.tbx-bk{animation:tbxfade .3s ease}}