*,:before,:after{box-sizing:border-box;margin:0;padding:0}button{cursor:pointer;background:0 0;border:none;font-family:inherit}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f7f4ef;--surface:#fffefb;--text:#1a1814;--text-sec:#4e4a45;--text-ter:#8c867e;--border:#d4cec6;--divider:#e8e2d9;--slot-border:#cfc9c0;--slot-bg:#f2ede6;--slot-active-border:#1a1814;--chip-bg:#ece7e0;--chip-hover:#ddd8d0;--chip-text:#3a3530;--key-bg:#fffefb;--key-press:#e8e2d9;--key-border:#e8e2d9;--key-sec:#575250;--key-c-text:#c62828;--key-c-bg:#fef0ee;--key-c-press:#fde4e0;--accent:#1a1814;--accent-text:#fffefb;--accent-press:#3a3530;--tip-bg:#1a1814e0;--tip-text:#fffefb;--font:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;--font-serif:"DM Serif Display", Georgia, "Times New Roman", serif;--ease:cubic-bezier(.25, .46, .45, .94);--r-card:12px;--r-slot:6px;--r-chip:6px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0d0c0a;--surface:#1c1a17;--text:#f2ede6;--text-sec:#b8b0a6;--text-ter:#726c64;--border:#3a3530;--divider:#2e2a24;--slot-border:#4a4540;--slot-bg:#2e2a24;--slot-active-border:#f2ede6;--chip-bg:#302c26;--chip-hover:#3a3530;--chip-text:#ada89f;--key-bg:#1c1a17;--key-press:#2e2a24;--key-border:#3a3530;--key-sec:#a09890;--key-c-text:#ff6961;--key-c-bg:#2a1210;--key-c-press:#3a1814;--accent:#f2ede6;--accent-text:#1c1a17;--accent-press:#cec9c0;--tip-bg:#f2ede6eb;--tip-text:#1a1814}}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;min-height:100dvh;font-weight:400;display:flex;overflow-x:hidden}#root{width:100%;max-width:360px;padding:0 12px max(24px, env(safe-area-inset-bottom))}.calculator{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}[data-tip]{position:relative}[data-tip]:before,[data-tip]:after{pointer-events:none;opacity:0;transition:opacity .18s var(--ease), transform .18s var(--ease);z-index:20;position:absolute;left:50%}[data-tip]:before{content:attr(data-tip);background:var(--tip-bg);color:var(--tip-text);white-space:nowrap;-webkit-backdrop-filter:blur(8px);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:400;line-height:1.4;bottom:calc(100% + 9px);transform:translate(-50%)translateY(4px)}[data-tip]:after{content:"";border:4px solid #0000;border-top-color:var(--tip-bg);bottom:calc(100% + 5px);transform:translate(-50%)translateY(4px)}[data-tip]:hover:before,[data-tip]:hover:after{opacity:1;transform:translate(-50%)translateY(0)}.display{border-bottom:1px solid var(--divider);padding:14px 16px 12px}.display-toprow{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.mode-desc{color:var(--text-sec);letter-spacing:.01em;-webkit-user-select:none;user-select:none;font-size:11px;font-weight:400}.display-toprow-right{align-items:center;gap:6px;display:flex}.today-btn{color:var(--text-sec);transition:color .15s var(--ease);border-radius:4px;margin:-8px -4px;padding:10px 8px;font-size:11px;font-weight:500}.today-btn:hover{color:var(--text)}.today-btn:active{opacity:.6}.fmt-btn{color:var(--chip-text);letter-spacing:.04em;background:var(--chip-bg);transition:background .15s var(--ease), color .15s var(--ease);border-radius:20px;padding:5px 9px;font-size:10px;font-weight:500}.fmt-btn:hover{background:var(--chip-hover);color:var(--text)}.fmt-btn:active{opacity:.7}.fields-area{flex-direction:column;gap:8px;display:flex}.field-row{align-items:center;gap:8px;display:flex}.field-label{color:var(--text-ter);text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0;width:12px;font-size:11px;font-weight:400}.field-slots{flex-wrap:nowrap;align-items:center;gap:4px;display:flex}.slot-box{border:1px solid var(--slot-border);border-radius:var(--r-slot);background:var(--slot-bg);min-width:2.4ch;height:36px;color:var(--text-ter);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);justify-content:center;align-items:center;padding:0 6px;font-size:17px;font-weight:400;display:inline-flex}.slot-box:hover:not(.active){border-color:var(--text-sec)}.slot-box.filled{background:var(--surface);color:var(--text)}.slot-box.active{border:1.5px solid var(--slot-active-border);background:var(--surface);color:var(--text)}.slot-box.slot-span{font-variant-numeric:tabular-nums;width:56px;min-width:56px}.slot-sep{color:var(--text-ter);-webkit-user-select:none;user-select:none;font-size:12px;line-height:1}.slot-group{align-items:center;gap:4px;display:inline-flex}.span-input{align-items:center;gap:6px;display:flex}.unit-btn{color:var(--chip-text);background:var(--chip-bg);border-radius:var(--r-chip);transition:background .15s var(--ease), color .15s var(--ease);align-items:center;gap:4px;margin:-6px -4px;padding:5px 9px;font-size:13px;font-weight:400;display:inline-flex;position:relative}.unit-btn:hover{background:var(--chip-hover);color:var(--text)}.unit-btn:active{opacity:.7}.unit-cycle-icon{opacity:.5;font-size:10px;line-height:1}.op-toggle{border:1px solid var(--slot-border);border-radius:var(--r-slot);width:32px;height:32px;color:var(--text-sec);box-sizing:content-box;transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);flex-shrink:0;justify-content:center;align-items:center;padding:6px;font-size:16px;font-weight:400;display:flex}.op-toggle.op-sub{color:var(--text);border-color:var(--text);background:var(--slot-bg)}.op-toggle:hover{border-color:var(--text);color:var(--text)}.op-toggle:active{opacity:.7}.add-row-btn{border:1px dashed var(--slot-border);border-radius:var(--r-slot);color:var(--text-sec);transition:border-color .15s var(--ease), color .15s var(--ease);align-self:flex-start;margin-top:2px;padding:8px 12px;font-size:12px;font-weight:400}.add-row-btn:hover{border-color:var(--text-sec);color:var(--text)}.add-row-btn:active{opacity:.7}.result-area{border-bottom:1px solid var(--divider);min-height:58px;padding:10px 16px 11px}.result-primary-row{align-items:center;gap:6px;display:flex}.result-primary-row.cycleable{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--r-slot);transition:background .15s var(--ease);margin:-2px -4px;padding:2px 4px;position:relative}.result-primary-row.cycleable:hover{background:var(--chip-bg)}.result-primary-row.cycleable:active{opacity:.75}.result-primary{font-family:var(--font-serif);color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;flex:1;font-size:40px;font-weight:400;line-height:1.15}.result-cycle-chip{color:var(--chip-text);background:var(--chip-bg);letter-spacing:.01em;transition:background .15s var(--ease);border-radius:20px;flex-shrink:0;align-items:center;gap:3px;padding:3px 7px;font-size:11px;font-weight:500;display:inline-flex}.result-primary-row.cycleable:hover .result-cycle-chip{background:var(--chip-hover)}.copy-btn{color:var(--text-sec);transition:color .15s var(--ease), background .15s var(--ease);border-radius:4px;flex-shrink:0;padding:4px 6px;font-size:15px;line-height:1}.copy-btn:hover{color:var(--text);background:var(--chip-bg)}.copy-btn:active{opacity:.6}.result-sub{color:var(--text-sec);margin-top:3px;padding-left:2px;font-size:12px;font-weight:400;line-height:1.4}.keypad{background:var(--key-border);grid-template-columns:repeat(4,1fr);gap:1px;display:grid}.key{background:var(--key-bg);height:58px;font-family:var(--font);color:var(--text);text-align:center;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background .1s var(--ease);font-weight:400;line-height:1}.key:active{background:var(--key-press)}.key-digit{font-size:19px}.key-back{color:var(--key-sec);font-size:15px}.key-clear{color:var(--key-c-text);background:var(--key-c-bg);font-size:13px;font-weight:500}.key-clear:active{background:var(--key-c-press)}.key-pm{color:var(--key-sec);font-size:22px}.key-mode{color:var(--key-sec);letter-spacing:.05em;text-transform:uppercase;font-size:13px;font-weight:500}.key-equals{background:var(--accent);color:var(--accent-text);font-size:24px}.key-equals:active{background:var(--accent-press)}.key-dim{opacity:.2;pointer-events:none}@media (width>=768px){#root{max-width:380px;padding:0 0 40px}.key{height:68px}.display{padding:16px 20px 14px}.slot-box{height:40px;font-size:18px}.result-primary{font-size:44px}}@media (width>=1024px){#root{max-width:400px;padding:0 0 48px}.key{height:64px}.display{padding:18px 22px 16px}}@media (height<=520px){.key{height:44px}.display{padding:8px 14px 6px}.display-toprow{margin-bottom:8px}.fields-area{gap:5px}.result-area{min-height:44px;padding:6px 14px}}.site-header{text-align:center;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;display:flex}.site-wordmark{letter-spacing:.14em;text-transform:uppercase;color:var(--text-ter);font-size:10px;font-weight:500}.site-tagline{font-family:var(--font-serif);color:var(--text-sec);white-space:nowrap;font-size:15px;font-style:italic;line-height:1.45}@keyframes hint-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes hint-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}.use-case-hint{text-align:center;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;display:flex}.use-case-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-ter);font-size:10px;font-weight:500}.use-case-question{white-space:nowrap;color:var(--text-sec);letter-spacing:-.01em;font-size:15px;font-weight:400;line-height:1.5;display:block}.use-case-question[data-phase=enter]{animation:.42s cubic-bezier(.22,1,.36,1) both hint-in}.use-case-question[data-phase=exit]{animation:.3s ease-in both hint-out}.use-case-question[data-phase=idle]{opacity:1;transform:none}