*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.fixed{position:fixed}.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.max-h-\[60vh\]{max-height:60vh}.min-h-screen{min-height:100vh}.w-28{width:7rem}.w-4{width:1rem}.w-full{width:100%}.max-w-5xl{max-width:64rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-indigo-200{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity,1))}.border-indigo-800\/50{border-color:rgba(55,48,163,.5)}.border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.border-red-500\/30{border-color:rgba(239,68,68,.3)}.border-red-500\/40{border-color:rgba(239,68,68,.4)}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.bg-indigo-950\/30{background-color:rgba(30,27,75,.3)}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-800\/80{background-color:rgba(30,41,59,.8)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.bg-slate-950\/80{background-color:rgba(2,6,23,.8)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pr-1{padding-right:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity,1))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity,1))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity,1))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity,1))}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-rose-600{--tw-text-opacity:1;color:rgb(225 29 72/var(--tw-text-opacity,1))}.text-rose-900{--tw-text-opacity:1;color:rgb(136 19 55/var(--tw-text-opacity,1))}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-15{opacity:.15}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-indigo-600\/30{--tw-shadow-color:rgba(79,70,229,.3);--tw-shadow:var(--tw-shadow-colored)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.selection\:bg-indigo-500 ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:bg-indigo-500 ::selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:text-white ::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:text-white ::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:bg-indigo-500::-moz-selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:bg-indigo-500::selection{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.selection\:text-white::-moz-selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:border-indigo-500:hover{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity,1))}.hover\:bg-indigo-500:hover{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.hover\:bg-neutral-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:bg-red-500\/10:hover{background-color:rgba(239,68,68,.1)}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.hover\:text-indigo-400:hover{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))}.dark\:border-indigo-900\/40:is(.dark *){border-color:rgba(49,46,129,.4)}.dark\:border-neutral-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity,1))}.dark\:border-neutral-700\/60:is(.dark *){border-color:rgba(64,64,64,.6)}.dark\:border-neutral-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity,1))}.dark\:bg-indigo-950\/20:is(.dark *){background-color:rgba(30,27,75,.2)}.dark\:bg-neutral-800\/60:is(.dark *){background-color:rgba(38,38,38,.6)}.dark\:bg-neutral-800\/70:is(.dark *){background-color:rgba(38,38,38,.7)}.dark\:text-amber-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.dark\:text-emerald-400:is(.dark *){--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.dark\:text-indigo-400:is(.dark *){--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.dark\:text-neutral-100:is(.dark *){--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity,1))}.dark\:text-neutral-300:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity,1))}.dark\:text-neutral-400:is(.dark *){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.dark\:text-rose-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity,1))}.dark\:hover\:bg-neutral-800\/40:hover:is(.dark *){background-color:rgba(38,38,38,.4)}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:col-span-6{grid-column:span 6/span 6}.sm\:inline{display:inline}.sm\:w-64{width:16rem}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-2{gap:.5rem}.sm\:p-6{padding:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Calcspace — shared surfaces and formula workspace. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.tab-btn:hover {
  color: var(--text-main);
  background: var(--border-card);
}
/* Calcspace workspace */
:root {
  --bg-app: #101411;
  --text-main: #eef1e9;
  --text-muted: #939c90;
  --surface-card: #191e19;
  --border-card: #30372e;
  --primary: #c9f27a;
  --primary-hover: #b4e565;
}
html.light {
  --bg-app: #f4f5ee;
  --text-main: #20291f;
  --text-muted: #677261;
  --surface-card: #fff;
  --border-card: #dce1d4;
}
* {
  box-sizing: border-box;
}
body {
  background: var(--bg-app) !important;
  color: var(--text-main) !important;
  font-family: "Segoe UI", Arial, sans-serif;
}
button,
input,
select {
  font: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 5px;
}
header {
  background: var(--bg-app) !important;
  border-color: var(--border-card) !important;
  padding: 20px 36px !important;
  position: relative !important;
}
header > div {
  max-width: 1320px !important;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-main);
  text-decoration: none;
  font-weight: 750;
  font-size: 23px;
  letter-spacing: -1px;
  line-height: 1;
}
.brand-icon {
  display: grid;
  place-items: center;
  position: relative;
  width: 36px;
  height: 39px;
  background: var(--primary);
  color: #182317;
  border-radius: 11px;
  font-size: 35px;
  font-weight: 600;
}
.brand-icon span {
  position: absolute;
  right: 3px;
  top: 2px;
  font-size: 19px;
}
.brand-dot {
  color: var(--primary);
}
.app-brand small {
  display: block;
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: 7px;
  font-weight: 500;
}
header nav {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  padding: 5px !important;
  border-radius: 12px;
  gap: 3px !important;
}
.tab-btn {
  border-radius: 8px;
  font-size: 12px;
  padding: 9px 15px;
  gap: 7px;
}
.tab-btn.active {
  background: var(--primary);
  color: #1b2916;
  box-shadow: none;
}
header button[id] {
  background: transparent !important;
  border-color: var(--border-card) !important;
  color: var(--text-muted) !important;
  border-radius: 9px !important;
}
.side-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0 16px;
  border-bottom: 1px solid var(--border-card);
}
.side-title h3 {
  font-size: 13px;
  font-weight: 500;
}
.side-title button {
  font-size: 9px;
  color: var(--text-muted);
  border: 0;
  background: none;
  cursor: pointer;
}
.recent-empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-card);
  border-radius: 10px;
  margin-top: 16px;
}
.recent-empty > span {
  font-size: 28px;
  display: block;
  color: #69765d;
  margin-bottom: 10px;
}
.recent-empty p {
  font-size: 12px;
  margin-bottom: 7px;
}
.recent-empty small {
  font-size: 10px;
  line-height: 1.8;
}
.recent-item {
  text-align: left;
  display: block;
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--border-card);
  background: none;
  cursor: pointer;
}
.recent-item span {
  font: 11px monospace;
  display: block;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-item strong {
  display: block;
  color: var(--text-main);
  font: 18px monospace;
  text-align: right;
  margin-top: 9px;
}
.quick-tools {
  margin-top: 32px;
}
.quick-tools > .section-number {
  font-size: 8px;
  margin-bottom: 13px;
}
.quick-tools button {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  width: 100%;
  background: none;
  border: 1px solid var(--border-card);
  border-radius: 11px;
  padding: 15px 12px;
  margin-top: 9px;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.2s;
}
.quick-tools button:hover {
  background: var(--surface-card);
}
.tool-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 33px;
  border-radius: 8px;
  background: #c9f27a12;
  color: var(--primary);
  font-size: 24px;
}
.quick-tools strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.quick-tools small {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 5px;
}
.quick-tools b {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-muted);
}
.app-footer {
  max-width: 1320px;
  width: 100%;
  margin: auto auto 0;
  border-top: 1px solid var(--border-card);
  padding: 22px 36px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  color: var(--text-muted);
}
.footer-divider {
  margin: 0 8px;
  opacity: 0.4;
}
.app-footer i {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 6px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 20px;
  background: var(--primary);
  color: #172317;
  border-radius: 10px;
  font-size: 13px;
  z-index: 100;
  transition: 0.2s;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.swap-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  color: var(--primary);
  font-size: 24px;
  cursor: pointer;
}
/* Shared toolkit surfaces follow the selected theme. */
main section:not(#view-calc) > div {
  background: var(--surface-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: none !important;
}
main section:not(#view-calc) [class*="bg-neutral"],
main section:not(#view-calc) [class*="bg-slate"],
main section:not(#view-calc) thead {
  background: var(--bg-app) !important;
}
main section:not(#view-calc) [class*="border-"] {
  border-color: var(--border-card);
}
main section:not(#view-calc) [class*="text-slate"],
main section:not(#view-calc) [class*="text-neutral"] {
  color: var(--text-muted);
}
main section:not(#view-calc) h2,
main section:not(#view-calc) input,
main section:not(#view-calc) select,
main section:not(#view-calc) code,
main section:not(#view-calc) td:last-child {
  color: var(--text-main) !important;
}
#ip-calc-btn,
.copy-btn.bg-indigo-600 {
  background: var(--primary) !important;
  color: #243016 !important;
  box-shadow: none;
}
input,
select {
  max-width: 100%;
  min-width: 0;
  color-scheme: dark;
}
html.light input,
html.light select {
  color-scheme: light;
}
html.light h1 em,
html.light .brand-dot,
html.light .tool-icon {
  color: #527c20;
}
section.hidden,
#download-calc-tool.hidden {
  display: none !important;
}
.badge-emerald {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-purple {
  background-color: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.badge-amber {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-blue {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-rose {
  background-color: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}
.badge-gray {
  background-color: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.badge-sky {
  background-color: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

/* A compact workspace: formula, math keys, submit, then the answer. */
header > div {
  max-width: 1200px !important;
}
main {
  max-width: 1200px !important;
  padding: 36px 36px 44px !important;
  justify-content: flex-start !important;
}
.workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.eyebrow > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
h1 {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -1.8px;
  font-weight: 500;
  margin: 0;
}
h1 em {
  margin-left: 0.15em;
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--primary);
}
.workspace-heading p {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 10px;
}
.workspace-caption {
  color: var(--text-muted);
  font: 9px monospace;
  letter-spacing: 1.3px;
  text-align: right;
}
.calculator-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}
.formula-workspace,
.workspace-side {
  min-width: 0;
}
.formula-card {
  padding: 23px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  transition: border-color 0.15s;
}
.formula-card:focus-within {
  border-color: #6b8053;
}
.formula-topline,
.formula-edit-actions,
.formula-bottomline,
.result-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.formula-topline label,
#result-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--text-muted);
}
.angle-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-app);
}
.angle-switch button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: 6px 10px;
  font: 10px monospace;
  color: var(--text-muted);
  cursor: pointer;
}
.angle-switch button[aria-pressed="true"] {
  background: var(--primary);
  color: #203215;
}
#formula-input {
  width: 100%;
  display: block;
  resize: none;
  min-height: 80px;
  max-height: 220px;
  margin-top: 18px;
  padding: 6px 0;
  color: var(--text-main);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  caret-color: var(--primary);
  font:
    28px/1.6 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: -0.7px;
  overflow-wrap: anywhere;
}
#formula-input::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
}
#formula-input:focus-visible {
  outline: none;
}
.formula-edit-actions {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-card);
}
#formula-help {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.7;
}
#formula-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: var(--text-muted);
  border: 0;
  font-size: 11px;
  padding: 8px 0 8px 12px;
  cursor: pointer;
}
#formula-clear > span {
  font-size: 19px;
}
.math-toolbox {
  margin-top: 17px;
}
.toolbox-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.toolbox-title h3 {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.3px;
}
.toolbox-title > span {
  color: var(--text-muted);
  font-size: 9px;
}
.math-key-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.math-key-row button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border-card);
  border-radius: 7px;
  background: var(--bg-app);
  color: var(--text-main);
  font:
    14px Georgia,
    serif;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.math-key-row button:hover {
  background: #c9f27a12;
  border-color: #78885a;
}
.math-key-row button:active {
  transform: translateY(1px);
}
.math-key-row.operators button {
  font: 19px monospace;
  color: var(--text-muted);
  background: transparent;
}
.more-functions {
  margin-top: 4px;
}
.more-functions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 1px;
  font-size: 10px;
  color: var(--text-muted);
  list-style: none;
  cursor: pointer;
}
.more-functions summary::-webkit-details-marker {
  display: none;
}
.more-functions summary > span {
  font-size: 17px;
}
.more-functions[open] summary > span {
  transform: rotate(45deg);
}
.more-functions .math-key-row {
  margin-top: 6px;
}
.formula-bottomline {
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid var(--border-card);
}
.formula-bottomline > span {
  color: var(--text-muted);
  font-size: 10px;
}
kbd {
  font-family: inherit;
  font-size: 9px;
  border: 1px solid var(--border-card);
  padding: 3px 5px;
  margin-right: 4px;
  border-radius: 4px;
}
.calculate-button {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  background: var(--primary);
  color: #203215;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.calculate-button:hover {
  background: var(--primary-hover);
}
.calculate-button > span {
  font-size: 19px;
  font-weight: 400;
}
.formula-result-area {
  margin-top: 20px;
  padding: 18px;
  background: #c9f27a08;
  border: 1px solid #c9f27a29;
  border-radius: 10px;
}
#formula-result {
  display: block;
  min-width: 0;
  margin-top: 14px;
  overflow-wrap: anywhere;
  color: var(--primary);
  font:
    44px/1.3 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: -1.5px;
}
.result-actions {
  display: flex;
  gap: 7px;
}
.result-actions button {
  padding: 6px 8px;
  border: 1px solid var(--border-card);
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}
.result-actions button[aria-pressed="true"] {
  color: var(--primary);
  border-color: var(--primary);
}
.result-caption {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.8;
  margin-top: 8px;
}
#formula-status {
  margin-top: 16px;
  color: #e7a197;
  font-size: 12px;
  line-height: 1.8;
}
.has-error {
  border-color: #955d54;
}
[hidden] {
  display: none !important;
}
.editor-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 17px;
}
.editor-examples > span {
  margin-right: 6px;
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: 1.2px;
}
.editor-examples button {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 8px 10px;
  font-size: 10px;
  cursor: pointer;
}
.editor-examples button span {
  color: var(--primary);
  margin-left: 5px;
}
.editor-examples button:hover {
  color: var(--text-main);
  border-color: #78885a;
}
.editor-privacy {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.8;
  margin-top: 18px;
}
.editor-privacy > span {
  color: var(--primary);
  font-size: 15px;
}
.workspace-side {
  padding: 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
}
.side-title {
  padding-top: 0;
  padding-bottom: 14px;
}
.section-number {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.3px;
}
.recent-empty {
  margin-top: 15px;
  padding: 22px 6px;
}
.recent-item strong {
  overflow-wrap: anywhere;
}
.quick-tools {
  margin-top: 25px;
}
.quick-tools button {
  background: var(--bg-app);
}
.quick-tools > .section-number {
  line-height: 1.8;
}
.history-item {
  gap: 16px;
}
.history-item > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-footer {
  max-width: 1200px;
}
html.light #formula-result,
html.light .editor-examples button span,
html.light .editor-privacy > span,
html.light .result-actions button[aria-pressed="true"] {
  color: #527c20;
}
html.light #formula-status {
  color: #a23e32;
}
html.light .formula-result-area {
  border-color: #c6d9aa;
  background: #f5f9ee;
}
@media (max-width: 1050px) {
  header {
    padding: 16px 24px !important;
  }
  .app-brand small {
    display: none;
  }
  .workspace-caption {
    display: none;
  }
  .calculator-workspace {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 22px;
  }
  .formula-card {
    padding: 20px;
  }
  .workspace-side {
    padding: 15px;
  }
}
@media (max-width: 800px) {
  .calculator-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }
  .side-title,
  .recent-history {
    grid-column: 1;
  }
  .quick-tools {
    grid-column: 2;
    grid-row: 1/3;
    margin-top: 0;
  }
}
@media (max-width: 720px) {
  header {
    padding: 16px !important;
  }
  header > div {
    flex-wrap: wrap;
  }
  header nav {
    order: 3;
    width: 100%;
    margin-top: 12px;
    justify-content: space-between;
  }
  .tab-btn {
    font-size: 11px;
    padding: 9px 10px;
  }
  main {
    padding: 25px 18px 32px !important;
  }
  .workspace-heading {
    margin-bottom: 22px;
  }
  h1 {
    font-size: 34px;
  }
  .workspace-heading p {
    font-size: 11px;
  }
  .eyebrow {
    font-size: 8px;
    margin-bottom: 10px;
  }
  .formula-card {
    padding: 16px;
    border-radius: 14px;
  }
  .formula-topline label {
    font-size: 9px;
    letter-spacing: 1px;
  }
  #formula-input {
    font-size: 23px;
    margin-top: 12px;
  }
  #formula-help {
    font-size: 9px;
    max-width: 205px;
  }
  .toolbox-title > span {
    display: none;
  }
  .math-toolbox {
    margin-top: 15px;
  }
  .math-key-row {
    gap: 5px;
  }
  .math-key-row button {
    font-size: 12px;
    border-radius: 6px;
  }
  .formula-bottomline > span {
    font-size: 9px;
  }
  .calculate-button {
    padding: 10px 12px;
    gap: 12px;
    font-size: 11px;
  }
  .formula-result-area {
    padding: 13px;
  }
  #formula-result {
    font-size: 36px;
  }
  .result-topline {
    gap: 6px;
  }
  #result-label {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .result-actions {
    gap: 5px;
  }
  .result-actions button {
    font-size: 9px;
    padding: 5px;
  }
  .editor-examples {
    gap: 6px;
  }
  .editor-examples > span {
    width: 100%;
  }
  .editor-examples button {
    font-size: 9px;
  }
  .editor-privacy {
    font-size: 8px;
  }
  .workspace-side {
    display: block;
  }
  .quick-tools {
    margin-top: 22px;
  }
  .app-footer {
    padding: 20px 18px;
    flex-direction: column;
    gap: 9px;
    line-height: 1.8;
  }
  #ip-results .flex.justify-between {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (max-width: 360px) {
  h1 {
    font-size: 30px;
  }
  .math-key-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .formula-topline {
    gap: 5px;
  }
  .result-topline {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}