@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../vendor/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../vendor/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../vendor/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../vendor/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../vendor/ibm-plex-mono-500.woff2") format("woff2"); }

:root { color-scheme:light; --paper:#fff; --panel:#fff; --ink:#171714; --muted:#77766e; --line:#d6d3c8; --soft:#f1f0eb; --accent:#e24a2b; --acid:#d7ef62; }
html[data-theme="dark"] { color-scheme:dark; --paper:#171714; --panel:#20201c; --ink:#f4f3ed; --muted:#aaa89f; --line:#424139; --soft:#292923; --accent:#ff795c; --acid:#61712c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",Arial,sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
main { min-height:100vh; padding:0 34px; }
.qcal-home { height:100vh; min-height:0; display:grid; grid-template-rows:88px minmax(0,1fr) 61px; overflow:hidden; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:600; font-size:24px; letter-spacing:-1px; }
.quokka-mark { display:block; flex:none; width:50px; height:50px; background:url('../quokka-mark.png') center/contain no-repeat; filter:grayscale(1) contrast(1.18); }
.site-header nav { display:flex; align-items:center; gap:22px; font-size:12px; font-weight:600; }
.site-header nav a,.site-header nav button { color:inherit; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; background:none; border:0; padding:6px 0; cursor:pointer; }
.site-header nav a:hover,.site-header nav button:hover { color:var(--accent); }
.quicklinks { position:relative; z-index:40; gap:17px!important; }
.quicklinks-hamburger { display:none; }
.quicklinks-panel { display:flex; align-items:center; gap:17px; }
.quicklink-home { display:none; }
.quicklinks-hamburger b { font-weight:600; }
.quicklinks-hamburger span { width:18px; display:grid; gap:3px; }
.quicklinks-hamburger i { display:block; height:1px; background:currentColor; }
.quicklink-slot { position:relative; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.quicklink-slot>a { max-width:115px; overflow:hidden; text-overflow:ellipsis; }
.site-header .quicklink-toggle { width:14px; padding:5px 1px 7px!important; color:var(--muted); font-size:13px; line-height:1; text-transform:none; letter-spacing:0; }
.site-header .quicklink-toggle:hover,.site-header .quicklink-toggle[aria-expanded="true"] { color:var(--accent); }
.quicklink-slot:after { content:""; position:absolute; top:100%; left:-4px; right:-4px; height:12px; }
.quicklink-menu { position:absolute; top:29px; right:0; z-index:60; min-width:190px; padding:5px; background:var(--panel); border:1px solid var(--ink); box-shadow:none; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-3px); transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s; }
.quicklink-slot:not(.suppress-hover):hover .quicklink-menu,.quicklink-slot:not(.suppress-hover):focus-within .quicklink-menu,.quicklink-slot.menu-open .quicklink-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
.quicklink-menu>span { display:block; padding:7px 8px 9px; border-bottom:1px solid var(--line); color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:8px; font-weight:400; text-transform:uppercase; letter-spacing:.1em; }
.site-header .quicklink-menu>button { width:100%; display:flex; align-items:center; justify-content:space-between; padding:9px 8px!important; text-align:left; text-transform:none; letter-spacing:0; font-size:11px; }
.site-header .quicklink-menu>button:hover,.site-header .quicklink-menu>button.selected { background:var(--acid); color:var(--ink); }
.quicklink-menu b { font-weight:500; }
.quicklink-menu small { color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:7px; text-transform:uppercase; }
.workspace { display:grid; grid-template-columns:minmax(240px,.92fr) minmax(280px,1.08fr) minmax(260px,1fr); min-height:calc(100vh - 149px); }
.qcal-home .workspace { min-height:0; overflow:hidden; }
.qcal-home .calculator-column,.qcal-home .reference-column { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.qcal-home .tape-column { overflow:hidden; }
.column { position:relative; min-width:0; padding:32px 30px 48px; border-right:1px solid var(--line); }
.column:first-child { padding-left:2px; }
.column:last-child { border-right:0; padding-right:2px; }
.column-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.column h1,.column h2 { margin:0; font-size:22px; letter-spacing:-.7px; font-weight:600; }
.column-title-switch { position:relative; }
.mobile-column-trigger { display:flex; align-items:center; gap:8px; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; letter-spacing:inherit; pointer-events:none; }
.mobile-column-arrow,.mobile-column-menu { display:none; }
.picker-wrap { position:relative; z-index:10; }
.section-picker { width:100%; display:flex; justify-content:space-between; align-items:center; padding:0 0 13px; background:transparent; border:0; border-bottom:2px solid var(--ink); font-size:28px; line-height:1; font-weight:500; letter-spacing:-1.2px; cursor:pointer; text-align:left; }
.section-picker:hover .picker-arrow { transform:translate(2px,2px); color:var(--accent); }
.picker-arrow { font-size:18px; transition:.15s ease; }
.picker-popover { position:absolute; top:47px; left:0; right:0; z-index:30; background:var(--panel); border:1px solid var(--ink); box-shadow:none; }
.picker-search-row { height:48px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding:0 12px; }
.picker-search-row input { width:100%; border:0; outline:0; background:transparent; font-size:14px; }
.picker-search-row kbd { font-family:"IBM Plex Mono",monospace; font-size:8px; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:3px 4px; }
.picker-results { max-height:265px; overflow:auto; padding:5px; }
.picker-results button { width:100%; border:0; background:transparent; display:flex; justify-content:space-between; align-items:center; padding:11px 9px; cursor:pointer; text-align:left; }
.picker-results button:hover,.picker-results button.active { background:var(--acid); }
.picker-results button span { display:flex; flex-direction:column; gap:2px; }
.picker-results strong { font-size:13px; font-weight:600; }
.picker-results small { font-size:10px; color:var(--muted); }
.picker-results code { font-size:9px; color:var(--muted); }
.empty-result { padding:20px 10px; margin:0; font-size:12px; line-height:1.5; }
.calculator-body { padding-top:24px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.metric-grid>span { display:flex; flex-direction:column; gap:7px; padding:13px 11px; background:var(--paper); min-width:0; }
.metric-grid small,.solution-card small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.metric-grid strong { font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.factor-table { margin-top:25px; }
.factor-row { display:grid; grid-template-columns:56px 1fr 50px 18px; align-items:center; min-height:43px; border-bottom:1px solid var(--line); font-size:13px; }
.factor-row strong { font-family:"IBM Plex Mono",monospace; font-weight:500; }
.factor-row>span:nth-child(2) { font-family:"IBM Plex Mono",monospace; }
.factor-row button { border:0; background:none; cursor:pointer; color:var(--accent); font-size:15px; }
.factor-row button:hover { color:var(--ink); }
.factor-head { min-height:29px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.factor-head>span:nth-child(2) { font-family:inherit; }
.add-number { display:flex; margin-top:13px; border-bottom:1px solid var(--ink); }
.add-number input { width:100%; padding:10px 0; background:transparent; border:0; outline:0; font-family:"IBM Plex Mono",monospace; font-size:12px; }
.add-number button { border:0; background:none; font-size:11px; font-weight:600; cursor:pointer; }
.add-number button span { color:var(--accent); margin-left:4px; }
.microcopy { margin:8px 0 0; color:var(--muted); font-size:9px; }
.equation-line { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:18px 10px; background:transparent; color:var(--ink); font-family:"IBM Plex Mono",monospace; }
.equation-line>span { font-size:13px; }
.equation-line label { display:flex; align-items:center; gap:4px; }
.equation-line input { width:38px; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--ink); outline:0; text-align:center; padding:3px; }
.quadratic-calculator { padding-top:18px; }
.quadratic-form-row { padding:12px 2px; border-bottom:1px solid var(--line); }
.quadratic-form-row>span { display:block; margin-bottom:7px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.09em; }
.quadratic-form-row>strong { display:block; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; line-height:1.45; overflow-wrap:anywhere; }
.quadratic-form-row.editable { padding:11px 2px 13px; border-bottom:1px solid var(--line); }
.quadratic-form-row.editable>span { margin:0 0 8px; padding:0; color:var(--muted); }
.quadratic-form-row .equation-line { min-height:34px; padding:0; flex-wrap:nowrap; gap:5px; overflow-x:auto; scrollbar-width:thin; }
.quadratic-form-row .quad-input { min-width:2ch; max-width:10ch; width:3ch; }
.quadratic-results-table { width:100%; margin-top:15px; border-collapse:collapse; border-top:1px solid var(--ink); table-layout:fixed; }
.quadratic-results-table caption { padding:8px 2px 6px; color:var(--muted); font-size:8px; text-align:left; text-transform:uppercase; letter-spacing:.09em; }
.quadratic-results-table th,.quadratic-results-table td { padding:9px 3px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.quadratic-results-table th { width:38%; color:var(--muted); font-size:9px; font-weight:400; }
.quadratic-results-table td { font-family:"IBM Plex Mono",monospace; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.quadratic-results-table td>strong { display:block; color:var(--accent); font-size:12px; font-weight:500; }
.quadratic-results-table td>small { display:block; margin-top:4px; color:var(--muted); font-family:"IBM Plex Sans",Arial,sans-serif; font-size:9px; }
.quadratic-sketch { margin:19px 0 0; }
.quadratic-sketch svg { display:block; width:100%; height:auto; overflow:visible; }
.quadratic-plot-frame { fill:var(--panel); stroke:var(--line); }
.quadratic-axis { stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.quadratic-axis+marker,.quadratic-sketch marker path { fill:var(--ink); }
.quadratic-axis-break { fill:none; stroke:var(--panel); stroke-width:5; stroke-linecap:square; stroke-linejoin:miter; paint-order:stroke; }
.quadratic-axis-break { stroke:var(--accent); stroke-width:1.4; }
.quadratic-curve { fill:none; stroke:var(--ink); stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.quadratic-vertex { fill:var(--accent); stroke:var(--panel); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.quadratic-sketch figcaption { margin-top:6px; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:8px; text-align:right; text-transform:uppercase; letter-spacing:.06em; }
.quadratic-sketch.empty { min-height:92px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); font-size:9px; }
.complex-calculator { padding-top:18px; }
.complex-form-row { padding:11px 2px 13px; border-bottom:1px solid var(--line); }
.complex-form-row>span { display:block; margin-bottom:8px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.09em; }
.complex-form-row .equation-line { min-height:36px; padding:0; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:thin; }
.complex-input { min-width:2ch; max-width:22ch; width:3ch; }
.euler-input-line .euler-base { display:inline-flex; align-items:flex-start; font-size:19px; line-height:1; }
.euler-input-line .euler-base sup { display:inline-flex; align-items:center; gap:2px; margin-left:1px; font-size:10px; line-height:1; }
.euler-input-line .euler-base label { display:inline-flex; }
.euler-input-line .euler-base input { font-size:10px; padding:1px; }
.complex-results sup { font-size:.72em; }
.complex-pi-toggle { position:relative; border:0; border-bottom:1px solid transparent; padding:2px 3px; background:transparent; color:var(--muted); font:inherit; cursor:pointer; }
.complex-pi-toggle[aria-pressed="false"]::after { content:""; position:absolute; left:10%; top:50%; width:80%; height:0; border-top:1px solid currentColor; transform:rotate(-55deg); transform-origin:center; pointer-events:none; }
.complex-pi-toggle[aria-pressed="true"] { color:var(--ink); border-bottom-color:currentColor; }
.complex-pi-toggle:hover { color:var(--accent); }
.complex-pi-toggle:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }
.complex-sketch { margin:19px 0 0; }
.complex-sketch svg { display:block; width:100%; height:auto; overflow:visible; }
.complex-plot-frame { fill:var(--panel); stroke:var(--line); }
.complex-grid { stroke:var(--muted); stroke-width:.65; vector-effect:non-scaling-stroke; }
.complex-axis { stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.complex-sketch marker path { fill:var(--ink); }
.complex-vector { stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; }
.complex-point { fill:var(--accent); stroke:var(--panel); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.complex-conjugate { fill:var(--panel); stroke:var(--muted); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.complex-axis-label,.complex-point-label,.complex-conjugate-label { fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:8px; }
.complex-point-label { fill:var(--accent); font-weight:500; }
.complex-sketch figcaption { margin-top:6px; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:8px; text-align:right; text-transform:uppercase; letter-spacing:.06em; }
.complex-sketch.empty { min-height:92px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); font-size:9px; }
.sequence-calculator { padding-top:18px; }
.sequence-mode { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--ink); }
.sequence-mode button { padding:9px 8px; border:0; border-right:1px solid var(--ink); background:transparent; cursor:pointer; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.sequence-mode button:last-child { border-right:0; }
.sequence-mode button.active { background:var(--ink); color:var(--paper); }
.sequence-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:17px 0 4px; }
.sequence-inputs label { min-width:0; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }
.sequence-inputs input { display:block; width:100%; margin-top:6px; padding:5px 0; border:0; border-bottom:1px solid var(--ink); outline:0; background:transparent; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:15px; }
.sequence-preview { margin-top:15px; padding:12px 3px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.sequence-preview span { display:block; margin-bottom:7px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.sequence-preview strong { display:block; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.solution-card { margin-top:18px; padding:17px; border:1px solid var(--ink); display:flex; flex-direction:column; gap:8px; }
.solution-card strong { font-family:"IBM Plex Mono",monospace; font-size:17px; }
.solution-card p { margin:0; color:var(--muted); font-size:10px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:9px; }
.percent-inputs { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:end; }
.percent-inputs label { font-size:10px; color:var(--muted); text-transform:uppercase; }
.percent-inputs input { display:block; width:100%; margin-top:7px; border:0; border-bottom:1px solid var(--ink); background:transparent; font-family:"IBM Plex Mono",monospace; font-size:20px; padding:5px 0; outline:0; }
.tape-column { display:flex; flex-direction:column; }
.column-action { border:0; padding:4px 0; background:transparent; font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:500; line-height:1; letter-spacing:.08em; text-decoration:none; cursor:pointer; }
.clear-action { color:var(--accent); }
.print-action { color:#4f9b55; }
.help-action { color:#856500; }
.column-action:hover { color:var(--ink); }
.tape-actions { display:flex; align-items:center; gap:14px; }
.tape-window { height:0; min-height:400px; flex:1; overflow:auto; padding:3px 0 20px; scrollbar-width:thin; }
.tape-entry { padding:0 0 18px; font-family:"IBM Plex Mono",monospace; }
.tape-entry>div { display:flex; gap:9px; font-size:13px; }
.prompt { color:var(--accent); font-weight:600; }
.tape-entry p { margin:7px 0 0 20px; display:flex; gap:9px; white-space:pre-line; font-size:16px; line-height:1.35; word-break:break-word; }
.tape-entry p span { color:var(--muted); }
.tape-entry p .tape-result { flex:1; color:inherit; white-space:pre-line; }
.typeset-math { font-family:inherit; font-size:1.08em; line-height:1.55; }
.typeset-math sup { font-family:inherit; font-size:.7em; vertical-align:.55em; }
.math-frac { display:inline-grid; grid-template-rows:auto auto; vertical-align:middle; margin:0 .18em; text-align:center; line-height:1.05; font-size:1.15em; }
.math-frac>span:first-child { padding:0 .3em .13em; border-bottom:1.5px solid currentColor; }
.math-frac>span:last-child { padding:.13em .3em 0; }
.math-root { display:inline-flex; align-items:flex-start; vertical-align:middle; white-space:nowrap; }
.math-root>span:first-child { font-size:1.25em; line-height:1.05; }
.math-root>span:last-child { border-top:1.5px solid currentColor; padding:.02em .12em 0 .08em; line-height:1.1; }
.tape-visual { margin:2px 0 0; width:min(100%,520px); font-family:"IBM Plex Mono",monospace; }
.tape-visual svg { display:block; width:100%; height:auto; overflow:visible; }
.tape-visual rect { fill:var(--paper); stroke:var(--line); }
.tape-visual .plot-axis { stroke:var(--ink); stroke-width:1.3; }
.tape-visual .plot-curve { fill:none; stroke:var(--ink); stroke-width:2.5; }
.tape-visual .plot-label circle { fill:var(--accent); }
.tape-visual .plot-extremum { fill:var(--accent); }
.tape-visual .plot-label text { fill:var(--ink); font:9px "IBM Plex Mono",monospace; paint-order:stroke; stroke:var(--paper); stroke-width:3px; }
.tape-visual figcaption { margin-top:5px; color:var(--muted); font-size:8px; letter-spacing:.05em; text-transform:uppercase; }
.numline .numline-set { stroke:var(--accent); stroke-width:4; }
.numline circle { stroke:var(--accent); stroke-width:2; }
.numline circle.closed { fill:var(--accent); }
.numline circle.open { fill:var(--paper); }
.tape-copy { flex:none; align-self:flex-start; margin-left:auto; padding:3px 0 3px 10px; border:0; background:transparent; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.08em; cursor:pointer; }
.tape-copy:hover,.tape-copy:focus-visible { color:var(--ink); }
.empty-tape { height:100%; display:grid; place-content:center; text-align:center; color:var(--muted); font-size:11px; }
.empty-tape span { font-size:25px; }
.terminal-form { display:flex; align-items:center; min-height:43px; padding:0 0 13px; gap:9px; border:0; border-bottom:2px solid var(--ink); background:transparent; }
.terminal-form>span { color:var(--accent); font-family:"IBM Plex Mono",monospace; font-weight:600; }
.terminal-form input { width:100%; border:0; outline:0; background:transparent; font-family:"IBM Plex Mono",monospace; font-size:12px; }
.terminal-form button { border:0; background:transparent; padding:2px 0 0 9px; font-size:18px; line-height:1; cursor:pointer; white-space:nowrap; transition:.15s ease; }
.terminal-form button:hover { color:var(--accent); transform:translate(-2px,2px); }
.tape-footer { display:flex; justify-content:space-between; padding-top:10px; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:8px; }
.tape-footer button { padding:3px 0; border:0; background:transparent; color:inherit; font-family:inherit; font-size:inherit; cursor:pointer; }
.tape-footer button:hover,.tape-footer button:focus-visible { color:var(--accent); }
.reference-sheet { padding-top:20px; }
.reference-intro { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:10px; }
.reference-intro p { max-width:185px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; text-align:right; }
.reference-intro.no-label p { width:100%; max-width:none; text-align:left; }
.identity-list { margin-top:14px; border-top:1px solid var(--ink); }
.identity-line { padding:12px 2px 11px; border-bottom:1px solid var(--line); }
.identity-line>span { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.identity-line strong { display:block; white-space:pre-line; font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:500; line-height:1.5; }
.identity-line p { margin:5px 0 0; white-space:pre-line; color:var(--muted); font-size:10px; line-height:1.45; }
.quadratic-reference .identity-line { padding-top:11px; padding-bottom:10px; }
.quadratic-reference .identity-line strong { font-size:15px; line-height:1.55; }
.qf-expression { display:inline-flex!important; align-items:center; gap:9px; font-size:15px!important; }
.qf-fraction { display:inline-grid; grid-template-rows:auto auto; text-align:center; vertical-align:middle; line-height:1.15; }
.qf-fraction>span:first-child { padding:0 7px 5px; border-bottom:1.5px solid currentColor; }
.qf-fraction>span:last-child { padding-top:4px; }
.euler-expression { display:inline-flex!important; align-items:baseline; gap:1px; }
.euler-expression sup { position:relative; top:-.35em; font-size:.7em; line-height:0; }
.reference-expression { font-family:"IBM Plex Mono",monospace; font-size:15px!important; }
.ref-radical { display:inline-flex; align-items:flex-start; vertical-align:middle; white-space:nowrap; font-family:inherit; }
.ref-radical>span:first-child { font-size:1.22em; line-height:1.03; }
.ref-radical>span:last-child { padding:.02em .1em 0 .05em; border-top:1.5px solid currentColor; line-height:1.08; }
.identity-category { margin:18px 0 0; padding:8px 2px; border-bottom:2px solid var(--ink); color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.identity-list>.identity-category:first-child { margin-top:0; }
.formula-card { padding:17px 3px; border-bottom:1px solid var(--line); }
.formula-card.accent { margin:7px -12px 0; padding:17px 14px; background:var(--acid); border-bottom:0; }
.formula-kicker { display:block; margin-bottom:10px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.formula-card strong { display:block; font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:500; letter-spacing:-.4px; }
.formula-card p { margin:7px 0 0; color:var(--muted); font-size:9px; }
.printouts button { width:100%; display:flex; justify-content:space-between; align-items:center; padding:17px 3px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; text-align:left; }
.printouts button:hover { background:var(--acid); padding-left:10px; padding-right:10px; }
.printouts button span { display:flex; flex-direction:column; gap:4px; }
.printouts button strong { font-size:14px; }
.printouts button small { color:var(--muted); font-size:9px; }
.printouts button b { font-size:10px; font-weight:500; color:var(--accent); }
.reference-freeform { display:block!important; }
.reference-cluster { display:grid; grid-template-columns:1.08fr .92fr; gap:9px; align-items:start; margin-top:16px; }
.reference-cluster .formula-card { min-height:104px; padding:14px; border:1px solid var(--line); background:var(--panel); }
.reference-cluster .formula-card:nth-of-type(3n+2) { transform:rotate(.65deg); }
.reference-cluster .formula-card.accent { margin:0; background:var(--acid); border-color:var(--ink); transform:rotate(-.75deg); box-shadow:3px 3px 0 var(--ink); }
.reference-cluster .formula-card strong { font-size:14px; }
.times-table { display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); margin-top:18px; border-left:1px solid var(--line); border-top:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:10px; }
.times-table>* { display:grid; place-items:center; aspect-ratio:1; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.times-table strong,.times-table .times-corner { background:var(--ink); color:var(--paper); font-weight:500; }
.times-table span:nth-child(14n+1) { font-weight:500; }
.table-footnote { margin:12px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }

/* Printout library */
.printouts-page { min-height:100vh; }
.printouts-header nav button { color:inherit; text-transform:uppercase; letter-spacing:.06em; background:none; border:0; padding:6px 0; cursor:pointer; font-size:12px; font-weight:600; }
.printouts-header nav button:disabled { opacity:.3; cursor:not-allowed; }
.printout-library { padding:62px 0 80px; }
.library-heading { display:grid; grid-template-columns:140px minmax(300px,680px); gap:5px 25px; align-items:start; margin-bottom:58px; }
.library-heading>span { grid-row:1/3; color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; padding-top:12px; }
.library-heading h1 { grid-column:1/-1; margin:0; font-size:clamp(42px,6vw,82px); line-height:.95; letter-spacing:-4px; font-weight:500; }
.library-heading p { grid-column:2; max-width:520px; margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.65; }
.printout-sections { display:grid; gap:52px; }
.printout-section>summary { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:16px; cursor:pointer; list-style:none; }
.printout-section>summary::-webkit-details-marker { display:none; }
.printout-section>summary>span { width:100%; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.printout-section>summary h2 { margin:0; font-size:28px; letter-spacing:-1px; }
.printout-section>summary p { max-width:430px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; text-align:right; }
.printout-section>summary>b { color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500; transform:rotate(180deg); transition:transform .15s ease; }
.printout-section:not([open])>summary>b { transform:rotate(0deg); }
.printout-cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.printout-cards>a { position:relative; min-height:225px; display:flex; flex-direction:column; justify-content:space-between; padding:20px; color:inherit; text-decoration:none; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); transition:.15s ease; }
.printout-cards>a:hover { background:var(--acid); box-shadow:inset 0 -6px 0 var(--ink); }
.card-index { align-self:flex-end; font-family:"IBM Plex Mono",monospace; font-size:9px; color:var(--muted); }
.printout-cards small { color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:8px; text-transform:uppercase; }
.printout-cards h2 { margin:9px 0 8px; font-size:23px; letter-spacing:-.8px; }
.printout-cards p { max-width:260px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.printout-cards b { font-family:"IBM Plex Mono",monospace; font-size:9px; text-transform:uppercase; font-weight:500; }
.print-preview-bar { display:flex; align-items:center; justify-content:space-between; padding:21px 0; border-bottom:1px solid var(--ink); }
.print-preview-bar>div { display:flex; flex-direction:column; gap:3px; }
.print-preview-bar span { color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:8px; text-transform:uppercase; }
.print-preview-bar strong { font-size:18px; }
.print-preview-bar button { border:0; background:transparent; padding:8px 0; color:#4f9b55; cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500; text-transform:uppercase; }
.print-preview-bar button:hover { color:var(--ink); }
.print-sheet { width:8.5in; min-height:11in; margin:34px auto 70px; padding:.55in; background:#fff; box-shadow:0 14px 44px rgba(0,0,0,.22); color:#111; color-scheme:light; }
.paper-title { padding-bottom:.24in; border-bottom:3px solid #111; }
.paper-title span { font-family:"IBM Plex Mono",monospace; font-size:8pt; text-transform:uppercase; letter-spacing:.08em; }
.paper-title h1 { margin:.08in 0 .05in; font-size:34pt; line-height:1; letter-spacing:-1.5pt; }
.paper-title p { margin:0; color:#555; font-size:10pt; }
.paper-title.compact { padding-bottom:.15in; }
.print-identity-list { display:grid; gap:0; padding-top:.18in; }
.print-identity-list .print-formula { min-height:0; padding:.12in .04in; border:0; border-bottom:1px solid #777; }
.print-identity-list .print-formula>span { margin-bottom:.06in; }
.print-identity-list .print-formula strong { font-size:18pt; line-height:1.35; }
.print-identity-list .print-formula p { margin:.05in 0 0; }
.print-formula { min-height:1.18in; padding:.17in; border:1.5px solid #111; }
.print-formula>span { display:block; margin-bottom:.12in; font-family:"IBM Plex Mono",monospace; font-size:7.5pt; text-transform:uppercase; letter-spacing:.08em; }
.print-formula strong { display:block; white-space:pre-line; font-family:"IBM Plex Mono",monospace; font-size:13.5pt; font-weight:500; }
.print-formula .qf-expression { display:inline-flex!important; font-size:18pt!important; }
.print-formula .qf-fraction>span:first-child { padding:0 .12in .06in; border-bottom:2px solid #111; }
.print-formula .qf-fraction>span:last-child { padding-top:.05in; }
.print-formula p { margin:.12in 0 0; white-space:pre-line; font-size:8.5pt; color:#555; }
.print-identity-category { margin:.16in 0 0; padding:.08in .04in; border-bottom:2px solid #111; font-family:"IBM Plex Mono",monospace; font-size:9pt; font-weight:500; letter-spacing:.08em; text-transform:uppercase; break-after:avoid; }
.print-identity-list>.print-identity-category:first-child { margin-top:0; }
.print-formula .ref-radical>span:last-child { border-top-width:2px; }
.practice-sheet-list { margin:.25in 0 0; padding-left:.28in; }
.practice-sheet-list li { padding:.11in 0 .18in .08in; font-family:"IBM Plex Mono",monospace; font-size:11pt; }
.practice-sheet-list li strong { font-weight:500; }
.practice-sheet-list li span { display:block; height:.48in; border-bottom:1px solid #999; }
.print-times-table { display:grid; grid-template-columns:repeat(13,1fr); margin-top:.25in; border-left:1.5px solid #111; border-top:1.5px solid #111; font-family:"IBM Plex Mono",monospace; font-size:12pt; }
.print-times-table>* { display:grid; place-items:center; aspect-ratio:1; border-right:1.5px solid #111; border-bottom:1.5px solid #111; }
.print-times-table strong,.print-times-table .times-corner { background:#111; color:white; }
.print-times-table .square { background:#dedede; font-weight:600; }
.graph-title { display:grid; grid-template-columns:1fr auto; align-items:end; padding-bottom:.1in; border-bottom:1.5px solid #111; }
.graph-title span { grid-column:1/-1; }
.graph-title h1 { margin:.04in 0 0; font-size:19pt; }
.graph-title p { color:#111; font-size:8pt; }
.planes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); height:9in; gap:.3in; margin-top:.14in; align-items:center; justify-items:center; }
.cartesian-plane { width:100%; aspect-ratio:1; color:#111; overflow:visible; }
.plane-grid line { stroke:#555; stroke-width:.6; vector-effect:non-scaling-stroke; }
.plane-border { fill:none; stroke:#555; stroke-width:.9; vector-effect:non-scaling-stroke; }
.plane-axis { stroke:currentColor; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.polar-grid-page { gap:.3in; }
.polar-graph { width:100%; aspect-ratio:1; color:#111; overflow:visible; }
.polar-grid circle,.polar-grid line { fill:none; stroke:#555; stroke-width:.6; vector-effect:non-scaling-stroke; }
.polar-grid line:nth-of-type(1),.polar-grid line:nth-of-type(7) { stroke:#333; stroke-width:1.1; }
.polar-border { fill:none; stroke:#333; stroke-width:1.1; vector-effect:non-scaling-stroke; }
.polar-origin { fill:#111; }
footer { min-height:61px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--ink); font-family:"IBM Plex Mono",monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
footer span:last-child { text-transform:lowercase; }
footer b { color:var(--accent); font-weight:500; }
footer a { color:inherit; text-decoration:none; }
footer a:hover { color:var(--accent); }

@media (max-width:1050px) { .printout-cards { grid-template-columns:repeat(2,1fr); } .print-sheet { max-width:100%; height:auto; } }
@media (max-width:720px) {
  main { padding:0 18px; }
  .qcal-home { height:auto; min-height:100vh; display:block; overflow:visible; }
  .site-header { height:78px; padding:0; align-items:center; }
  .brand { font-size:22px; }
  .quokka-mark { width:42px; height:42px; }
  .site-header nav { max-width:none; justify-content:flex-end; flex-wrap:nowrap; gap:0; }
  .quicklinks-hamburger { display:flex; align-items:center; gap:8px; padding:10px 0!important; }
  .quicklinks-panel { position:absolute; top:calc(100% + 1px); right:0; z-index:70; width:min(320px,calc(100vw - 36px)); max-height:calc(100vh - 96px); display:none; overflow:auto; flex-direction:column; align-items:stretch; gap:0; padding:8px; background:var(--panel); border:1px solid var(--ink); box-shadow:none; }
  .quicklinks.mobile-menu-open .quicklinks-panel { display:flex; }
  .quicklinks.mobile-menu-open .quicklinks-hamburger { color:var(--accent); }
  .quicklink-slot { width:100%; min-height:42px; flex-wrap:wrap; justify-content:space-between; border-bottom:1px solid var(--line); }
  .quicklink-slot>a { flex:1; max-width:none; padding:12px 7px!important; overflow:visible; }
  .site-header .quicklink-toggle { width:38px; padding:12px 7px!important; text-align:right; transition:transform .15s ease; }
  .quicklink-home { display:block; }
  .quicklink-slot .quicklink-menu { position:static; width:100%; min-width:0; display:none; margin:0 0 7px; box-shadow:none; opacity:0; visibility:hidden; pointer-events:none; transform:none; transition:none; }
  .quicklink-slot:not(.suppress-hover):hover .quicklink-menu,.quicklink-slot:not(.suppress-hover):focus-within .quicklink-menu { display:none; opacity:0; visibility:hidden; pointer-events:none; }
  .quicklink-slot.menu-open .quicklink-menu,.quicklink-slot.menu-open:hover .quicklink-menu,.quicklink-slot.menu-open:focus-within .quicklink-menu { display:block; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .quicklinks-panel>.quicklink-static,.quicklinks-panel>#theme-toggle { padding:13px 7px!important; border-bottom:1px solid var(--line); text-align:left; }
  .workspace,.qcal-home .workspace { display:block; overflow:visible; min-height:0; }
  .qcal-home[data-mobile-section="calculator"] .tape-column,.qcal-home[data-mobile-section="calculator"] .reference-column,.qcal-home[data-mobile-section="tape"] .calculator-column,.qcal-home[data-mobile-section="tape"] .reference-column,.qcal-home[data-mobile-section="reference"] .calculator-column,.qcal-home[data-mobile-section="reference"] .tape-column { display:none; }
  .column,.qcal-home .calculator-column,.qcal-home .reference-column,.qcal-home .tape-column { min-height:calc(100vh - 132px); padding:28px 0 35px; border-right:0; border-bottom:0; overflow:visible; }
  .mobile-column-trigger { pointer-events:auto; cursor:pointer; }
  .mobile-column-arrow { display:inline; color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:14px; transition:transform .15s ease; }
  .mobile-column-trigger[aria-expanded="true"] .mobile-column-arrow { transform:rotate(180deg); }
  .mobile-column-menu { position:absolute; top:calc(100% + 10px); left:0; z-index:45; width:190px; padding:5px; background:var(--panel); border:1px solid var(--ink); box-shadow:none; }
  .mobile-column-menu:not([hidden]) { display:block; }
  .mobile-column-menu button { width:100%; padding:11px 9px; border:0; background:transparent; color:inherit; font-size:12px; text-align:left; cursor:pointer; }
  .mobile-column-menu button:hover,.mobile-column-menu button:focus-visible,.mobile-column-menu button.selected { background:var(--acid); color:var(--ink); }
  .qcal-home .tape-column { display:flex; }
  .qcal-home[data-mobile-section="calculator"] .tape-column,.qcal-home[data-mobile-section="reference"] .tape-column { display:none; }
  .tape-window { height:390px; min-height:390px; }
  .reference-column { border-top:0; }
  .reference-sheet { display:block; }
  .reference-cluster { grid-template-columns:1fr; }
  .times-table { font-size:8px; }
  footer { min-height:54px; justify-content:center; gap:0; }
  footer span:first-child { display:none; }
  .library-heading { display:block; margin-bottom:35px; }
  .library-heading>span { display:block; margin-bottom:16px; }
  .library-heading h1 { letter-spacing:-2px; }
  .library-heading p { margin-top:15px; }
  .printout-section>summary,.printout-section>summary>span { align-items:flex-start; }
  .printout-section>summary>span { display:block; }
  .printout-section>summary p { margin-top:8px; text-align:left; }
  .printout-cards { grid-template-columns:1fr; }
  .printout-cards>a { min-height:185px; }
  .print-preview-bar { gap:20px; }
  .print-sheet { width:8.5in; transform-origin:top left; }
}
@media print { @page { size:letter portrait; margin:0; } html,body { width:8.5in; min-height:11in; background:white; color:#111; } main { padding:0; } .qcal-home { display:block; height:auto; overflow:visible; } .site-header nav,.calculator-column,.tape-column,.column-heading,.section-picker,footer { display:none!important; } .workspace { display:block; } .reference-column { padding:0; border:0; overflow:visible!important; } .reference-sheet { display:block; } .formula-card { break-inside:avoid; } .printouts-page .site-header,.printouts-page .print-preview-bar,.printouts-page .printout-library { display:none!important; } .printouts-page .print-sheet { display:block; width:8.5in; min-height:11in; margin:0; padding:.5in; box-shadow:none; break-after:avoid; } .printing-tape .qcal-home .site-header,.printing-tape .calculator-column,.printing-tape .reference-column { display:none!important; } .printing-tape .tape-column { display:flex!important; height:10in; padding:.35in 0; border:0; overflow:visible!important; } .printing-tape .tape-window { height:auto; min-height:0; overflow:visible; } .printing-tape .terminal-form,.printing-tape .tape-footer,.printing-tape .tape-copy { display:none!important; } .printing-tape .tape-visual rect,.printing-tape .numline circle.open { fill:#fff; } .printing-tape .tape-visual .plot-label text { fill:#111; stroke:#fff; } }

/* Shared Bion fonts and typography. */
@font-face {
  font-family: "Bion";
  src: url("../vendor/bion-book.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bion";
  src: url("../vendor/bion-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.column h1, .column h2,
.library-heading h1,
.identity-category,
.section-picker,
.picker-results strong,
.site-header .quicklinks button,
.site-header .quicklinks a,
.quicklink-menu > span,
.quicklink-menu b,
.mobile-column-menu button,
.mobile-column-trigger,
.print-preview-bar strong {
  font-family: "Bion", "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
}

.brand { font-family: "Bion", "IBM Plex Sans", Arial, sans-serif; font-weight: 700; }

.library-heading h1 { font-weight: 700; }

footer, footer a {
  font-family: "Bion", "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
}

/* A continuous writing rule, rather than repeated underscore glyphs. */
.graph-title .name-field { display:flex; align-items:baseline; gap:.08in; white-space:nowrap; }
.graph-title .name-line { display:inline-block; width:1.65in; height:1em; border-bottom:1px solid #111; }

/* Identity-family category titles on live references and printed sheets. */
.identity-category, .print-identity-category {
  font-family: "Bion", "IBM Plex Sans", Arial, sans-serif;
  font-weight: 700;
}

/* Short subtitles and labels use Bion; prose and equations keep their font. */
.formula-kicker, .identity-line > span,
.print-formula > span, .printout-cards small,
.paper-title > span, .print-preview-bar > div > span,
.picker-results small {
  font-family: "Bion", "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
}

/* Equations retain the site's original typography even inside a heading. */
.printout-cards p, .printout-section > summary p,
.reference-intro p, .paper-title p,
.picker-results small {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
}

h1 .typeset-math, h2 .typeset-math, h3 .typeset-math,
h1 .reference-expression, h2 .reference-expression, h3 .reference-expression {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}