:root{color-scheme:light dark;--bg: #fbfbfa;--panel: #ffffff;--text: #1c1c1a;--sub: #71716a;--line: #e6e5e0;--accent: #2f6f4e;--on-accent: #ffffff;--negative: #b1442f;--chart: #2f5fa8;--backdrop: rgb(0 0 0 / 45%);--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.375rem;--text-xl: 1.75rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--mark-size: .4375rem}@media(prefers-color-scheme:dark){:root{--bg: #17171a;--panel: #212126;--text: #ececeb;--sub: #9a9a95;--line: #33333a;--accent: #74b78f;--on-accent: #17171a;--negative: #e08a76;--chart: #7fa8dd;--backdrop: rgb(0 0 0 / 60%)}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;font-size:var(--text-md);line-height:1.5}main{max-width:32rem;margin:0 auto;padding:var(--space-lg) var(--space-lg) 3rem}h1{font-size:var(--text-md);margin:0}h2{font-size:var(--text-sm);font-weight:500;color:var(--sub);margin:var(--space-xl) 0 var(--space-sm)}.total h2{margin:0 0 var(--space-xs)}.title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-md);margin:0 0 var(--space-xs)}.title .rename{font:inherit;color:inherit;background:none;border:none;border-bottom:1px dashed var(--sub);padding:0;overflow-wrap:anywhere;text-align:left;cursor:pointer}.record-title{justify-content:center;font-size:var(--text-xl);margin:var(--space-sm) 0 var(--space-xs)}.target{text-align:center;color:var(--sub);margin:0 0 var(--space-xl)}.flow{display:flex;align-items:center;gap:var(--space-sm)}.flow select{flex:1;min-width:0}.flow .arrow{color:var(--sub);flex-shrink:0}.flow .fixed{flex:1;min-width:0;color:var(--text);font-weight:500;overflow-wrap:anywhere}header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-xl)}.note{color:var(--sub)}.error{color:var(--negative);font-size:var(--text-sm)}.sub{color:var(--sub);font-size:var(--text-sm);margin:0}.money{font-variant-numeric:tabular-nums;font-weight:500}.money-large{font-size:var(--text-xl);font-weight:600}.money-negative{color:var(--negative)}.total{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.category{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-md)}.category .head{display:block;color:inherit;text-decoration:none}.category.retired{color:var(--sub);padding:var(--space-md) var(--space-lg)}.category.retired .money{font-size:var(--text-md);font-weight:500}.category .name{display:flex;align-items:center;gap:var(--space-sm);overflow-wrap:anywhere;margin-bottom:var(--space-xs)}.category .money{font-size:var(--text-lg);font-weight:600}.category .sub{display:block}.category .sub .money{font-size:inherit;font-weight:500}.entries{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}.entries .entry{flex:1;padding:var(--space-sm);border-radius:var(--radius-md);border:1px solid var(--entry-line, var(--line));background:var(--bg);font-size:var(--text-md);font-weight:600;text-align:center;text-decoration:none}.entries .income{--entry-line: var(--accent);color:var(--accent)}.entries .expense{--entry-line: var(--negative);color:var(--negative)}.category .reorder{position:absolute;top:.4375rem;right:.4375rem;display:flex;gap:var(--space-xs)}.category:has(.reorder) .name{padding-right:4rem}.category .reorder button{color:var(--sub);background:none;border:none;border-radius:var(--radius-sm);padding:.25rem .375rem;font-size:var(--text-sm)}.chart{--plot-height: 5rem;display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg)}.chart-body{flex:1;min-width:0}.chart-plot{position:relative;height:var(--plot-height)}.chart-plot svg{position:absolute;inset:0;width:100%;height:100%}.chart-plot polyline{fill:none;stroke:var(--chart);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.4}.chart-plot line{stroke:var(--line);stroke-width:1}.chart-plot .point{position:absolute;transform:translate(-50%,50%);display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:50%;cursor:pointer}.chart-plot .point:before{content:"";width:var(--mark-size);height:var(--mark-size);background:var(--chart);border-radius:50%}.chart-plot .point.active:before{width:.6875rem;height:.6875rem}.chart-axis{display:flex;flex-direction:column;justify-content:space-between;height:var(--plot-height);font-size:var(--text-xs);color:var(--sub);white-space:nowrap}.chart-axis span:first-child{transform:translateY(-50%)}.chart-axis span:last-child{transform:translateY(50%)}.chart-months{display:flex;justify-content:space-between;margin-top:var(--space-xs);font-size:var(--text-xs);color:var(--sub)}.chart-tip{position:absolute;z-index:1;margin-block:var(--space-md);padding:var(--space-xs) var(--space-sm);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--text-xs);white-space:nowrap;pointer-events:none}.chart-tip[data-side=center]{transform:translate(-50%)}.chart-tip[data-side=end]{transform:translate(-100%)}.operation-list{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}.operation-list li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-lg);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--line)}.operation-list li:last-child{border-bottom:none}.operation-list .name{display:flex;align-items:baseline;gap:var(--space-sm);flex:1;min-width:0;font:inherit;color:inherit;background:none;border:none;border-radius:0;padding:0;text-align:left;cursor:pointer}.operation-list .name .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.operation-list .name .sub{flex-shrink:0}.operation-list .amount{display:flex;align-items:baseline;gap:var(--space-sm);white-space:nowrap}.tag{font-size:var(--text-xs);color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:0 var(--space-xs);flex-shrink:0}.dot{display:inline-block;width:var(--mark-size);height:var(--mark-size);border-radius:50%;background:var(--accent);flex-shrink:0}.chip{font-size:var(--text-xs);font-weight:400;color:var(--negative);background:none;border:1px solid var(--negative);border-radius:var(--radius-sm);padding:0 var(--space-xs)}.manage{display:flex;gap:var(--space-md);margin-top:var(--space-xl)}.manage>*{flex:1;text-align:center}.export{display:flex;justify-content:center;align-items:baseline;gap:var(--space-md);margin:var(--space-md) 0 0;font-size:var(--text-xs);color:var(--sub)}.export .link{font-size:inherit;text-decoration:underline}.backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);background:var(--backdrop)}.dialog{width:100%;max-width:20rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg)}.dialog .ask{margin:0 0 var(--space-xs);font-weight:500}.dialog label,.dialog input{margin-top:var(--space-md)}.dialog label input,.dialog .amount-input input{margin-top:0}.dialog-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg)}.dialog-actions button{flex:1}.quiet{color:var(--sub);background:var(--bg);border:1px solid var(--line)}.login{padding-top:20vh}.login h1{font-size:var(--text-xl);margin-bottom:var(--space-xl)}form{display:flex;flex-direction:column;gap:var(--space-md)}label{display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--text-sm);color:var(--sub)}.field{display:flex;flex-direction:column;gap:var(--space-xs)}label.checkbox{flex-direction:row;align-items:center;gap:var(--space-sm);font-size:var(--text-md);color:var(--text)}label.checkbox input{width:1.125rem;height:1.125rem;accent-color:var(--accent);padding:0}input,select{font:inherit;font-size:var(--text-md);color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md)}.amount-input{display:flex;gap:var(--space-sm)}.amount-input input{flex:1;min-width:0}.amount-input button{flex-shrink:0}input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button{font:inherit;font-weight:500;color:var(--on-accent);background:var(--accent);border:none;border-radius:var(--radius-md);padding:var(--space-md);cursor:pointer}button:disabled{opacity:.5;cursor:default}.link{color:var(--sub);background:none;border:none;font:inherit;font-size:var(--text-sm);text-decoration:none;padding:0;cursor:pointer}