:root{color-scheme:light;--bg: #F7F7F5;--surface: #FFFFFF;--surface-warm: #EEF0EE;--surface-hover: #F1F2F0;--surface-active: #E9EDF2;--blank: #E9EDF2;--fg: #15191E;--fg-2: #353B42;--muted: #5B626A;--meta: #C5CAD0;--fg-inverted: #FFFFFF;--accent: #15191E;--accent-on: #FFFFFF;--accent-hover: #2A3038;--accent-subtle: #E9EDF2;--accent-border: #15191E;--interest: #B03F26;--principal: #2F5A99;--border: #D8DCDF;--border-soft: #E6E8EA;--border-strong: #15191E;--focus: #2F5A99;--ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);--success: #1E6B3E;--success-subtle: #E1F0E6;--warn: #8A5A00;--warn-subtle: #FBF0D5;--danger: #B03F26;--danger-subtle: #FBE8E3;--info: var(--principal);--info-subtle: var(--blank);--chart-principal: #3B66A8;--chart-interest: #C9542F;--chart-grid: #E6E8EA;--chart-axis: #5B626A;--font-sans: "IBM Plex Sans Thai Looped", system-ui, sans-serif;--font-display: var(--font-sans);--font-mono: "Sometype Mono", ui-monospace, monospace;--font-scale: 1;--text-xs: calc(12px * var(--font-scale));--text-sm: calc(14px * var(--font-scale));--text-base: calc(16px * var(--font-scale));--text-lg: calc(19px * var(--font-scale));--text-xl: calc(24px * var(--font-scale));--text-2xl: calc(30px * var(--font-scale));--text-sentence: calc(clamp(26px, 3.1vw, 40px) * var(--font-scale));--text-answer: calc(clamp(52px, 7vw, 104px) * var(--font-scale));--leading-body: 1.65;--h1-tracking: 0;--h2-tracking: 0;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-24: 96px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-pill: 999px;--radius-control: var(--radius-pill);--radius-card: var(--radius-md);--control-h: 48px;--btn-weight: 600;--elev-flat: none;--elev-raised: 0 1px 2px rgba(21, 25, 30, .06), 0 8px 24px rgba(21, 25, 30, .05);--elev-modal: 0 20px 48px rgba(21, 25, 30, .18);--motion-fast: .12s;--motion-base: .22s;--ease-out: cubic-bezier(.2, .7, .2, 1)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #121417;--surface: #191C20;--surface-warm: #1E2227;--surface-hover: #1D2126;--surface-active: #232830;--blank: #232830;--fg: #E8EBEE;--fg-2: #C8CDD2;--muted: #A1A9B2;--meta: #353B43;--fg-inverted: #121417;--accent: #E8EBEE;--accent-on: #121417;--accent-hover: #FFFFFF;--accent-subtle: #232830;--interest: #F08A6A;--principal: #8DB0E6;--border: #2B3038;--border-soft: #22262C;--border-strong: #E8EBEE;--focus: #8DB0E6;--danger: #F08A6A;--chart-principal: #4F7FC4;--chart-interest: #C9603F;--chart-grid: #262B32;--chart-axis: #A1A9B2;--elev-raised: 0 1px 2px rgba(0, 0, 0, .4);--elev-modal: 0 20px 48px rgba(0, 0, 0, .5)}}:root[data-theme=dark]{color-scheme:dark;--bg: #121417;--surface: #191C20;--surface-warm: #1E2227;--surface-hover: #1D2126;--surface-active: #232830;--blank: #232830;--fg: #E8EBEE;--fg-2: #C8CDD2;--muted: #A1A9B2;--meta: #353B43;--fg-inverted: #121417;--accent: #E8EBEE;--accent-on: #121417;--accent-hover: #FFFFFF;--accent-subtle: #232830;--interest: #F08A6A;--principal: #8DB0E6;--border: #2B3038;--border-soft: #22262C;--border-strong: #E8EBEE;--focus: #8DB0E6;--danger: #F08A6A;--chart-principal: #4F7FC4;--chart-interest: #C9603F;--chart-grid: #262B32;--chart-axis: #A1A9B2;--elev-raised: 0 1px 2px rgba(0, 0, 0, .4);--elev-modal: 0 20px 48px rgba(0, 0, 0, .5)}@media (prefers-reduced-motion: reduce){:root{--motion-fast: 0ms;--motion-base: 0ms}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h, 40px);padding:0 var(--btn-pad, 18px);border-radius:var(--radius-control, var(--radius-sm));border:1px solid transparent;font:var(--btn-weight, 500) var(--text-base)/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}.btn-primary{background:var(--accent);color:var(--accent-on)}.btn-secondary{background:var(--surface);color:var(--fg);border-color:var(--border)}.btn-secondary:hover{border-color:var(--border-strong)}.btn-ghost{background:transparent;color:var(--fg-2)}.btn-ghost:hover{background:var(--surface-hover);color:var(--fg)}.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}.btn[disabled]{background:var(--surface-warm);color:var(--muted);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none;opacity:.7}.btn-sm{height:calc(var(--control-h, 40px) - 8px);padding:0 12px;font-size:var(--text-sm)}.field{display:grid;gap:var(--space-2);align-content:start}.field>label,.field>.label{font-size:var(--text-sm);font-weight:500;color:var(--fg-2)}.input{height:var(--control-h, 40px);padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-control, var(--radius-sm));background:var(--surface);color:var(--fg);font:400 var(--text-base) var(--font-sans);width:100%;min-width:0}textarea.input{height:auto;min-height:96px;padding:var(--space-3);line-height:var(--leading-body);resize:vertical}.input::placeholder{color:var(--muted);opacity:1}.input:focus{outline:none;border-color:var(--focus, var(--accent));box-shadow:var(--ring-focus)}.input.is-error{border-color:var(--danger)}.help{font-size:var(--text-sm);color:var(--muted)}.error{font-size:var(--text-sm);color:var(--danger)}.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-badge, var(--radius-sm));font-size:var(--text-xs);font-weight:500;color:var(--fg-2);background:var(--surface);white-space:nowrap}.badge.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 35%,transparent);background:var(--success-subtle)}.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-subtle)}.badge.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent);background:var(--danger-subtle)}.tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--border);overflow-x:auto}.tabs>*{padding:var(--space-3) 0;font-size:var(--text-sm);font-weight:500;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;font-family:inherit}.tabs>.on,.tabs>[aria-selected=true]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--tab-rule, var(--accent))}.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-card, var(--radius-md));padding:var(--space-6);display:grid;gap:var(--space-4)}.empty{border:1px dashed var(--border-strong);border-radius:var(--radius-card, var(--radius-md));padding:var(--space-10) var(--space-8);display:grid;gap:var(--space-3);justify-items:start;color:var(--fg-2)}.empty h3{margin:0;font-size:var(--text-lg);font-weight:600;color:var(--fg)}.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.table th{text-align:left;font-weight:500;color:var(--muted);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);white-space:nowrap}.table td{padding:var(--space-3);border-bottom:1px solid var(--border-soft);vertical-align:middle}.table .num{text-align:right;font-variant-numeric:tabular-nums}:lang(th){letter-spacing:0}.num{font-variant-numeric:tabular-nums}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:transparent;border-color:var(--border-strong)}.btn-secondary:hover{background:var(--surface-hover)}.sentence{margin:0;font:500 var(--text-sentence)/1.9 var(--font-sans);color:var(--fg-2);max-width:30ch;text-wrap:pretty}.blank{display:inline-flex;align-items:baseline;gap:.08em;padding:0 .28em;margin:0 .06em;border-radius:.18em;background:var(--blank);box-shadow:inset 0 -.08em 0 var(--fg);color:var(--fg);font-weight:600;vertical-align:baseline;transition:box-shadow var(--motion-fast)}.blank:focus-within{box-shadow:inset 0 -.08em 0 var(--focus),0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}.blank input{width:var(--w, 5ch);min-width:2ch;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:left;outline:none}.blank select{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;outline:none;appearance:none}.blank .u{font-weight:500;color:var(--muted);font-size:.8em}.blank.is-error{box-shadow:inset 0 -.08em 0 var(--danger)}.sentence-error{font-size:var(--text-sm);color:var(--danger);min-height:1.5em}.answer{display:grid;gap:4px}.answer .label{font-size:var(--text-lg);color:var(--fg-2)}.answer .fig{font:700 var(--text-answer)/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg)}.answer .per{font-size:var(--text-xl);font-weight:500;color:var(--muted)}.because{font-size:var(--text-lg);line-height:1.7;color:var(--fg-2);max-width:46ch}.because .i{color:var(--interest);font-weight:600}.because .p{color:var(--fg);font-weight:600}.chart{position:relative}.chart svg{display:block;width:100%;height:auto;overflow:visible}.chart .axis{font:400 12px var(--font-sans);fill:var(--chart-axis)}.chart .label{font:600 13px var(--font-sans);fill:var(--fg-2)}.chart .tip{position:absolute;pointer-events:none;min-width:180px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--elev-modal);font-size:var(--text-sm);line-height:1.5;opacity:0;transition:opacity var(--motion-fast)}.chart .tip b{display:block}.chart .tip .r{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}.chart .tip .r span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--c, var(--chart-principal))}.key{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:var(--text-sm);color:var(--fg-2)}.key span{display:inline-flex;align-items:center;gap:8px}.key span:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c, var(--chart-principal))}.passbook{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--elev-raised);padding:22px 26px 18px}.passbook header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--fg)}.passbook header b{font-weight:600}.passbook header span{font:400 var(--text-xs) var(--font-mono);color:var(--muted)}.passbook table{width:100%;border-collapse:collapse;font:400 13.5px/1 var(--font-mono);font-variant-numeric:tabular-nums}.passbook th{padding:10px 8px 8px;text-align:right;font:500 var(--text-xs) var(--font-sans);color:var(--muted);border-bottom:1px solid var(--meta)}.passbook th:first-child,.passbook td:first-child{text-align:left}.passbook td{padding:9px 8px;text-align:right;color:var(--fg);border-bottom:1px dashed var(--meta)}.passbook td.i{color:var(--interest)}.passbook tfoot td{border-bottom:0;color:var(--muted);font-family:var(--font-sans);font-size:var(--text-xs)}.toggles{display:flex;gap:14px;font-size:var(--text-sm)}.toggles button{padding:4px 0;border:0;background:none;color:var(--muted);font:inherit;cursor:pointer}.toggles button[aria-pressed=true]{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--fg)}.toggles button:focus-visible{outline:none;box-shadow:var(--ring-focus)}*,*:before,*:after{box-sizing:border-box}html{font-size:calc(16px * var(--font-scale))}body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--text-base)/var(--leading-body) var(--font-sans);-webkit-font-smoothing:antialiased}h1,h2,h3,p,ul,ol{margin:0}a{color:inherit}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wrap{width:min(1080px,100% - 48px);margin:0 auto}header.top{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}header.top .brand img{height:36px;width:auto;display:block}header.top nav{display:flex;gap:22px;font-size:var(--text-sm)}header.top nav a{color:var(--muted);text-decoration:none;white-space:nowrap}header.top nav a:hover{color:var(--fg)}header.top nav a[aria-current]{color:var(--fg);font-weight:600}header.top .right{display:flex;align-items:center;gap:22px}.toggles button{min-height:32px}.skip{position:absolute;left:16px;top:-48px;padding:8px 12px;background:var(--accent);color:var(--accent-on);border-radius:var(--radius-sm);z-index:10}.skip:focus{top:12px}.calc{padding:56px 0 64px;display:grid;gap:36px;border-bottom:1px solid var(--border)}.calc h1{font-size:var(--text-lg);font-weight:500;color:var(--muted)}.sentence+.sentence{margin-top:4px}.sentence.small{font-size:calc(var(--text-sentence) * .62);line-height:1.9;max-width:48ch}.blank select{width:var(--w, auto);max-width:100%}.sentence .remove{margin-left:4px;padding:0 6px;border:0;background:none;color:var(--muted);font:inherit;font-size:.8em;cursor:pointer;border-radius:var(--radius-sm)}.sentence .remove:hover{color:var(--danger)}.sentence .remove:focus-visible{outline:none;box-shadow:var(--ring-focus)}.add{margin-top:8px}.result{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:24px 56px;align-items:end;transition:opacity var(--motion-base)}.result.stale{opacity:.35}.result .note{grid-column:1 / -1;font-size:var(--text-xs);color:var(--muted)}.because+.because{margin-top:8px}.loading{color:var(--muted);font-size:var(--text-sm)}section.block{padding:56px 0}section.block+section.block{padding-top:0}section.block h2{font-size:var(--text-xl);font-weight:600}.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}.chart .tip{z-index:2}.book-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}.book-tools .right{display:flex;gap:8px}.passbook{overflow-x:auto}.passbook td.p{color:var(--principal)}.formula{margin-top:40px;font-size:var(--text-sm);color:var(--muted);max-width:72ch;display:grid;gap:8px}.formula math{font-size:1.15em;color:var(--fg)}.home{padding:56px 0 72px;display:grid;gap:40px}.home h1{font:600 var(--text-sentence)/1.3 var(--font-sans);max-width:24ch}.home .lede{font-size:var(--text-lg);color:var(--fg-2);max-width:52ch}.questions{list-style:none;padding:0;display:grid;border-top:1px solid var(--border)}.questions a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:20px 0;border-bottom:1px solid var(--border);text-decoration:none}.questions a:hover .q,.questions a:focus-visible .q{box-shadow:inset 0 -.08em 0 var(--fg)}.questions a:focus-visible{outline:none;box-shadow:var(--ring-focus)}.questions .q{font:500 calc(var(--text-sentence) * .72)/1.4 var(--font-sans);color:var(--fg);justify-self:start}.questions .name{font-size:var(--text-sm);color:var(--muted);align-self:center}.questions .d{grid-column:1 / -1;font-size:var(--text-sm);color:var(--muted)}.prose{padding:56px 0 72px;display:grid;gap:28px;max-width:68ch}.prose h1{font-size:var(--text-2xl);font-weight:600}.prose h2{font-size:var(--text-xl);font-weight:600;margin-top:12px}.prose p,.prose li{color:var(--fg-2)}.prose ul{padding-left:1.2em;display:grid;gap:6px}footer.site{border-top:1px solid var(--border);padding:24px 0 40px;font-size:var(--text-sm);color:var(--muted);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}footer.site nav{display:flex;gap:18px}@media (max-width: 860px){header.top{padding:14px 0;flex-wrap:wrap;gap:12px 24px}header.top nav{order:3;flex-basis:100%;overflow-x:auto;padding-bottom:4px}.result{grid-template-columns:1fr}}@media (max-width: 560px){.wrap{width:calc(100% - 32px)}.calc{padding:32px 0 48px}.passbook{padding:16px 12px}.passbook .c-p{display:none}}@media print{header.top,footer.site,.book-tools,.chart-head .key,.add,.sentence .remove,.skip{display:none!important}body{background:#fff}.calc{padding:0 0 24px}.passbook{box-shadow:none;padding:0}section.block{padding:24px 0;break-inside:avoid-page}}