:root{--ink:#263d35;--muted:#737c71;--green:#245441;--paper:#f6f5ef;--line:#dedfd5;--red:#a5443d;--sans:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--serif:"Yu Mincho","Hiragino Mincho ProN",serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-tap-highlight-color:transparent}
body.dialog-open{overflow:hidden}
button,input,summary{touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;transition:background .16s,box-shadow .16s,transform .12s}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b97034;outline-offset:3px}
button:active{transform:translateY(2px)}
.page-shell{max-width:600px;margin:0 auto;padding:0 40px}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}
.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:3px}
.brand small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:2px;font-weight:500;margin-top:5px}
.brand-mark{width:40px;height:52px;display:grid;place-items:center;background:#fffcf1;border:1px solid #d4d6c5;border-radius:7px;box-shadow:0 4px 0 #245441;color:var(--red);font-size:29px;letter-spacing:0}
.local-badge{display:flex;align-items:center;gap:8px;color:#617568;font-size:10px;white-space:nowrap}
.local-badge>span{width:6px;height:6px;border-radius:50%;background:#60886c}
.workspace{margin:24px auto 0;max-width:460px}
.calculator{background:var(--green);border:1px solid #214936;border-radius:18px;padding:18px 20px 20px;box-shadow:0 14px 28px #203f3214,0 3px 0 #173a2d}
.calculator-top{display:flex;justify-content:flex-end;color:#edf1e5;margin-bottom:10px;min-height:15px}
.calculator-mode{font-size:10px;letter-spacing:.06em;color:#c1d0ba}
.display-panel{background:#e9eddd;border:1px solid #1c4133;border-radius:10px;padding:10px 9px 9px;box-shadow:inset 0 2px 5px #243d3515;min-height:113px}
.expression{min-height:16px;line-height:16px;font-size:10px;color:#64735c;text-align:right;overflow-wrap:anywhere}
.display{--number-font-size:55px;display:flex;width:100%;min-height:66px;align-items:center;justify-content:flex-end;padding:4px 0 5px;position:relative;font-family:var(--sans);font-variant-numeric:tabular-nums}
.numeric-display{font-size:var(--number-font-size);line-height:1.2;letter-spacing:-1px;font-weight:400;white-space:nowrap}
.display>.sr-only{left:0;top:0}
.display.error-display{justify-content:flex-start}
.error-message{display:flex;flex-direction:column;gap:3px}
.error-text{font-size:24px;color:#903d33;line-height:1.4;font-weight:600}
.error-detail{font-size:12px;color:#903d33;line-height:1.5}
.calc-note{font-size:10px;text-align:right;color:#6c775f;min-height:14px;line-height:14px;margin-top:2px;overflow-wrap:anywhere}
.keypad{--number-width:57px;--number-height:76px;--operator-width:67px;display:grid;grid-template-columns:repeat(3,var(--number-width)) var(--operator-width);gap:10px;justify-content:center;margin:20px auto 0}
.key{width:100%;height:var(--number-height);display:flex;align-items:center;justify-content:center;border:1px solid #e3e3d3;border-radius:7px;background:#f8f6ec;box-shadow:0 4px 0 #d0d3bc;font-size:30px;position:relative;user-select:none;padding:0}
.key:hover{background:#fffdf5;box-shadow:0 4px 0 #d0d3bc,0 0 0 2px #ffffff50}
.key:active,.key.is-pressed{transform:translateY(3px);box-shadow:0 1px 0 #b5c2a8;background:#e8e8d6}
.key:focus-visible{outline-color:#ffda89}
.key-utility,.key[data-value="/"]{height:44px;font-size:20px;white-space:nowrap}
.key-utility,.key-settings{background:#d7dfc9;border-color:#d7dfc9;box-shadow:0 4px 0 #aebfa0}
.clear-key{color:#96443b;font-size:17px;font-weight:600;letter-spacing:1px}
.key-utility svg,.key-settings svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.key-operator{background:#bbcfad;border-color:#bbcfad;box-shadow:0 4px 0 #88a47d;font-size:31px}
.key-operator.is-pending{box-shadow:0 4px 0 #718b65,inset 0 0 0 2px #45643b;background:#d0deb9}
.key-equals{background:#efc784;border-color:#efc784;box-shadow:0 4px 0 #b6935d;color:#3b4932;font-size:35px}
.key-equals:hover{background:#ffdda3;box-shadow:0 4px 0 #b6935d}
.key-decimal{font-size:37px;padding-bottom:14px}
.tile-face{display:inline-flex;flex-shrink:0;width:46px;height:61px;position:relative;align-items:center;justify-content:center;border-radius:5px;border:1px solid #d9d9c9;background:#fffcf1;box-shadow:0 3px 0 #c7cfb8;vertical-align:middle}
.tile-face svg{width:100%;height:100%;overflow:visible}
.key-digit .tile-face{width:calc(var(--number-width) - 8px);height:calc((var(--number-width) - 8px)*1.33);border:0;box-shadow:none;background:transparent}
.tile-assist{position:absolute;bottom:-5px;right:-1px;font-family:var(--sans);font-size:10px;line-height:12px;color:#61705e;font-weight:600;letter-spacing:0;text-align:center;min-width:10px}
.key-zero .tile-white{background:#fffdf5;border:1px solid #dddece;box-shadow:0 2px 0 #d4d9c3;width:33px;height:44px}
.key-zero .tile-white .tile-assist{right:-8px;bottom:-4px}
.display-tiles{--fit-width:34px;display:flex;gap:1px;align-items:center;min-width:0;flex-shrink:0;padding:3px 0 4px}
.display-tiles .tile-face{flex:0 0 var(--fit-width);width:var(--fit-width);height:calc(var(--fit-width)*1.38);border-radius:2px;box-shadow:0 2px 0 #c0c9ae}
.result-punctuation{flex:0 0 10px;width:10px;text-align:center;font-size:19px;line-height:1;align-self:center;letter-spacing:0}
.result-punctuation.decimal-point{flex-basis:5px;width:5px;align-self:flex-end;padding-bottom:6px;font-size:18px}
.help-panel{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.help-panel summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 2px;font-size:12px;color:#687460;min-height:44px}
.help-panel summary::-webkit-details-marker{display:none}
.help-plus{font-size:20px;font-weight:300}
.help-panel[open] .help-plus{transform:rotate(45deg)}
.help-content{padding:1px 2px 20px}
.help-content h3{font-size:13px;font-weight:600}
.help-content p{font-size:12px;line-height:1.9;color:#6d7867}
kbd{font-family:inherit;border:1px solid #d6dacd;border-radius:3px;padding:0 3px;background:#fffefa;white-space:nowrap}
.site-footer{margin:18px 0 24px;font-size:10px;color:#8a9180;letter-spacing:.08em}
.version{font-size:9px;letter-spacing:0;margin-left:6px}
.storage-warning{max-width:460px;margin:20px auto 0;color:#99532e;font-size:12px;line-height:1.7}
/* The heading stays visible while each dialog's body scrolls. */
dialog{max-width:660px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);border:1px solid #dedfd1;border-radius:18px;padding:0;background:#fffefa;color:var(--ink);box-shadow:0 25px 80px #10251d40;overflow:hidden}
dialog[open]{display:flex;flex-direction:column}
dialog:not([open]){display:none}
dialog.settings-panel{max-width:500px}
dialog::backdrop{background:#10271e88;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;padding:18px 24px 14px;border-bottom:1px solid #e4e4d9}
.dialog-heading h2{font-family:var(--serif);font-size:24px;margin:0;font-weight:600}
.close-button{width:44px;height:44px;border-radius:50%;border:1px solid #dfe3d6;background:#f2f4ec;font-size:25px;flex-shrink:0}
.close-button:hover{background:#e5eadb}
.dialog-body{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:20px 24px 24px;scrollbar-width:thin}
.display-settings{border:0;margin:0;padding:0 0 17px;border-bottom:1px solid var(--line);min-width:0}
.display-settings legend{font-size:11px;font-weight:600;color:#757e6e;margin-bottom:8px;padding:0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;min-height:46px;cursor:pointer;font-size:13px}
.toggle-row input{position:absolute;right:0;width:44px;height:44px;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch{position:relative;width:39px;height:24px;border-radius:20px;background:#d9ddd2;flex-shrink:0;transition:background .2s}
.switch:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fffef6;box-shadow:0 1px 2px #0002;transition:transform .2s}
.toggle-row input:checked+.switch{background:var(--green)}
.toggle-row input:checked+.switch:after{transform:translateX(15px)}
.toggle-row input:focus-visible+.switch{outline:3px solid #b97034;outline-offset:3px}
.mapping-section{padding-top:20px}
.subheading{display:flex;align-items:center;justify-content:space-between;gap:6px}
.subheading h3{font-size:12px;font-weight:600;margin:0}
.subheading>span{font-size:9px;color:#7d8475}
.mapping-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:16px 0 19px}
.mapping-button{border:1px solid #e3e4d8;border-radius:9px;background:#f7f7f0;display:flex;align-items:center;flex-direction:column;padding:7px 2px 10px;gap:5px;min-height:84px}
.mapping-button:hover{background:#eff3e7;border-color:#88a383}
.mapping-digit{font-size:10px;color:#737f68;font-weight:600;line-height:13px}
.mapping-button .tile-face{width:31px;height:42px;box-shadow:0 2px 0 #c7cfb8;border-radius:3px}
.bulk-setting{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bulk-setting>span{font-size:10px;color:#7a826f}
.bulk-buttons{display:flex;gap:6px}
.bulk-buttons button{border:1px solid #d9dfd0;background:transparent;font-size:12px;border-radius:6px;padding:6px 12px;min-height:44px;min-width:44px}
.bulk-buttons button:hover,.bulk-buttons button[aria-pressed="true"]{background:#e8eee0;border-color:#97ad8d;color:#32563d}
.mapping-help{font-size:10px;color:#7a826f;line-height:1.8;margin:13px 0 18px}
.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:15px}
.storage-status{margin:0;font-size:10px;color:#6e8162;line-height:1.8;max-width:70%}
.storage-status:before{content:"✓";margin-right:5px}
.storage-status.is-warning{color:#99532e}
.storage-status.is-warning:before{content:"!";font-weight:700}
.text-button{border:0;padding:2px 0;background:transparent;color:#7b8074;font-size:10px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;min-height:44px}
.text-button:hover{color:#234f3c}
#dialog-description{font-size:11px;color:#75816c;margin:0 0 20px;line-height:1.8}
.tile-group h3{display:flex;gap:9px;align-items:center;font-size:12px;margin:19px 0 9px}
.tile-group h3 small{font-size:9px;color:#858d7a;font-weight:400}
.tile-choice-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}
.tile-choice{min-height:83px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 5px;border:1px solid #e1e4d8;border-radius:7px;background:#f7f8f1;position:relative}
.tile-choice .tile-face{width:33px;height:44px}
.tile-name{font-size:9px;color:#67745e}
.tile-choice[aria-pressed="true"]{background:#e0ebd8;border:2px solid #3e6b4b;padding:7px 1px 4px}
.tile-choice[aria-pressed="true"]:after{content:"✓";position:absolute;top:-7px;right:-4px;border-radius:50%;width:17px;height:17px;background:#315d41;color:#fff;font-size:11px;display:grid;place-items:center}
.tile-choice:hover{background:#eaf0e2;border-color:#97ad87}
.dialog-note{margin:22px 0 0;font-size:10px;color:#7b8570;line-height:1.8}
.dialog-note>span{color:#315d41}
.noscript{position:fixed;inset:0;background:#f6f5ef;display:grid;place-items:center;padding:40px;font-size:20px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){
  .page-shell{max-width:500px;padding:0 20px}
  .site-header{height:76px}
  .brand{font-size:22px;gap:11px}
  .brand small{font-size:8px;letter-spacing:1.4px}
  .brand-mark{height:44px;width:34px;font-size:26px}
  .local-badge{font-size:0;gap:0}
  .local-badge>span{width:7px;height:7px;box-shadow:0 0 0 5px #e7edde}
  .workspace{margin-top:18px}
  .calculator{padding:16px 12px 18px;border-radius:17px}
  .display-panel{padding:8px 6px 8px;min-height:103px}
  .display{--number-font-size:46px;min-height:61px}
  .calculator-mode{font-size:9px}
  .keypad{--number-width:50px;--number-height:67px;--operator-width:60px;gap:9px;margin-top:19px}
  .dialog-heading{padding:14px 16px 12px}
  .dialog-heading h2{font-size:22px}
  .dialog-body{padding:18px 16px 20px}
  .tile-choice-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
}
@media(max-width:360px){
  .page-shell{padding:0 13px}
  .calculator{padding:16px 10px 17px}
  .keypad{--number-width:46px;--number-height:62px;--operator-width:54px}
  .key-digit .tile-assist{font-size:9px}
  .dialog-heading h2{font-size:20px}
  .mapping-grid,.tile-choice-grid{gap:6px}
  .bulk-buttons{gap:5px}
  .bulk-buttons button{padding:6px 9px}
  .subheading>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Public edition: keep the calculator layout; information opens separately. */
.page-shell{padding-bottom:28px}
.about-link{margin:10px 0 0;font-size:12px}
.about-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--green);text-underline-offset:3px}
.about-content{margin:28px auto 0;max-width:460px;overflow-wrap:anywhere}
.about-content h1{font-family:var(--serif);font-size:25px;margin:0 0 24px}
.about-content h2{font-size:16px;margin:28px 0 8px}
.about-content p{font-size:14px;line-height:1.9;margin:8px 0}
.about-content a{color:var(--green);text-underline-offset:3px}
.about-content .back-link{display:inline-flex;align-items:center;min-height:44px;margin-top:18px}