@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{color:#003379;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#dff3fd;font-family:DM Sans,Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}:root{--dark:#003379;--light:#96d5f6;--line-dark:#0033793d;--line-light:#96d5f647;--shadow:0 22px 54px #00235421}.page{min-height:100vh;transition:background-color .32s,color .32s}.decimal-page{color:var(--dark);background:var(--light)}.dozenal-page{color:var(--light);background:var(--dark)}.page-shell{width:min(1180px,100% - 40px);margin:0 auto;padding:11vh 0 8vh}.page-header{justify-content:space-between;align-items:end;gap:32px;margin-bottom:24px;display:flex}.eyebrow,.card-kicker,.translation-label,.insight-title{letter-spacing:.2em;text-transform:uppercase;margin:0;font-size:11px;font-weight:700}.eyebrow,.introduction,.card-kicker,.translation-label,.result-caption,.insight-title,.insight-copy{opacity:.68}h1{letter-spacing:-.07em;margin:6px 0 4px;font-family:Space Grotesk,Arial,sans-serif;font-size:clamp(42px,5vw,64px);line-height:.96}.introduction{max-width:580px;margin:12px 0 0;font-size:16px}.mode-toggle{border:1px solid;border-radius:999px;flex-shrink:0;gap:3px;padding:4px;display:flex}.mode-toggle button{color:inherit;background:0 0;border:0;border-radius:999px;padding:10px 16px;font-size:13px;transition:all .18s}.decimal-page .mode-toggle button.active{color:var(--light);background:var(--dark)}.dozenal-page .mode-toggle button.active{color:var(--dark);background:var(--light)}.converter-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;display:grid}.source-column{flex-direction:column;gap:14px;min-width:0;display:flex}.source-card,.source-helper,.result-panel,.insight-card{transition:color .26s,background-color .26s,border-color .26s,transform .26s}.decimal{color:var(--dark);background:var(--light)}.dozenal{color:var(--light);background:var(--dark)}.source-card{border:1px solid;border-radius:28px;flex-direction:column;justify-content:center;min-height:310px;padding:34px;display:flex;position:relative}.step-controls{z-index:1;gap:8px;display:flex;position:absolute;top:22px;right:22px}.step-controls button{width:34px;height:34px;color:inherit;opacity:.82;background:0 0;border:1px solid;border-radius:50%;padding:0;font-size:16px;line-height:1;transition:all .16s}.step-controls button:hover:not(:disabled){transform:translateY(-2px)}.step-controls button:disabled{cursor:not-allowed;opacity:.3}.source-input{width:100%;color:inherit;letter-spacing:-.01em;background:0 0;border:0;outline:0;margin:20px 0 14px;padding:0;font-family:Space Grotesk,Arial,sans-serif;font-size:clamp(70px,9vw,110px);line-height:.96}.source-input::placeholder{color:currentColor;opacity:.42}.source-name,.result-caption,.insight-copy{margin:0;font-size:15px}.source-helper{border:1px solid;border-radius:18px;align-items:center;min-height:48px;padding:12px 18px;display:flex}.source-helper p{opacity:.7;margin:0;font-size:12px}.examples{flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:flex}.examples span{opacity:.7}.examples button{color:inherit;background:0 0;border:1px solid;border-radius:999px;padding:6px 10px;transition:all .16s}.decimal-page .examples button:hover{background:#0033791a}.dozenal-page .examples button:hover{background:#96d5f624}.examples button:hover{transform:translateY(-2px)}.result-panel{min-height:510px;box-shadow:var(--shadow);border-radius:28px;padding:34px}.translation-label span{margin-right:7px;font-size:16px;display:inline-block}.result-heading{min-height:156px;padding:30px 0 16px}.result-number{overflow-wrap:anywhere;letter-spacing:-.01em;margin:0 0 10px;font-family:Space Grotesk,Arial,sans-serif;font-size:clamp(68px,9vw,106px);line-height:.96}.insight-list{gap:12px;display:grid}.insight-card{border:1px solid;border-radius:18px;padding:18px 20px}.result-panel.dozenal .insight-card{border-color:var(--line-light)}.result-panel.decimal .insight-card{border-color:var(--line-dark)}.formula{letter-spacing:-.05em;margin:12px 0 6px;font-family:Space Grotesk,Arial,sans-serif;font-size:24px;font-weight:600}.division-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;display:grid}.division-item{border:1px solid;border-radius:13px;flex-direction:column;gap:8px;min-width:0;padding:12px;display:flex}.result-panel.dozenal .division-item{border-color:var(--line-light)}.result-panel.decimal .division-item{border-color:var(--line-dark)}.division-item span{opacity:.62;font-size:12px}.division-item strong{overflow-wrap:anywhere;letter-spacing:-.01em;font-family:Space Grotesk,Arial,sans-serif;font-size:22px;font-weight:600}.division-item small{opacity:.62;min-height:1.2em;font-size:11px;line-height:1.2}.fraction-stack{gap:5px;margin:12px 0 8px;display:grid}.fraction-stack .formula{margin:0}.compact{padding-block:14px}.legend{flex-wrap:wrap;gap:12px;margin:0;font-size:13px;display:flex}.legend strong{margin-right:-8px;font-family:Space Grotesk,Arial,sans-serif;font-size:16px}.error-message{border:1px solid;border-radius:16px;padding:18px}@media (width<=800px){.page-shell{width:min(100% - 28px,620px);padding-top:7vh}.page-header{flex-direction:column;align-items:stretch;gap:20px}.mode-toggle{align-self:flex-start}.converter-grid{grid-template-columns:1fr}.source-card{min-height:220px}.source-input{font-size:clamp(66px,21vw,98px)}.result-panel{min-height:auto}.result-number{letter-spacing:-.01em;font-size:clamp(50px,14vw,58px)}.division-item{padding:10px}.division-item strong{font-size:19px}}