.sub{--sub-red:#b5173b;--sub-on-red:#fff;--sub-rose:#e8a3b2;padding:clamp(var(--s-4), 3vw, var(--s-6));border:var(--border) solid var(--line);border-radius:var(--r-object);background:var(--paper);gap:var(--s-5);display:grid}:root[data-theme=dark] .sub{--sub-red:#ff7a93;--sub-on-red:#111226;--sub-rose:#4a2236}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .sub{--sub-red:#ff7a93;--sub-on-red:#111226;--sub-rose:#4a2236}}.sub-top{gap:var(--s-5);grid-template-columns:minmax(0,1fr);grid-template-areas:"head""add";display:grid}.sub-head{grid-area:head;min-width:0}.sub-head__num{font-family:var(--font-display);letter-spacing:-.04em;overflow-wrap:anywhere;font-size:clamp(3.4rem,9vw,5.5rem);font-weight:800;line-height:.95}.sub-head__label{margin-top:var(--s-2);color:var(--ink-2);font-weight:500}.sub-head__saving{margin-top:var(--s-3);color:var(--sub-red);font-weight:700}.sub-head__window{margin-top:var(--s-2);color:var(--ink-2)}.sub-add{gap:var(--s-3);grid-area:add;min-width:0;display:grid}.sub-add__title{font-size:var(--step-0);font-weight:700}.sub-fields{gap:var(--s-3);grid-template-columns:minmax(0,1fr) 7.5rem;display:grid}.sub-fields label,.sub-when label:not(.sub-check),.sub-use,.sub-setting label{gap:var(--s-1);font-weight:500;font-size:var(--step--1);display:grid}.sub-billed{gap:var(--s-2);border:0;flex-wrap:wrap;margin:0;padding:0;display:flex}.sub-billed legend{width:100%;margin-bottom:var(--s-2);font-weight:500;font-size:var(--step--1);padding:0}.sub-chip{min-height:2.75rem;padding:0 var(--s-3);border:2px solid var(--line);border-radius:var(--r-control);background:var(--paper);color:var(--ink);cursor:pointer;align-items:center;font-weight:500;display:inline-flex;position:relative}.sub-chip__input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.sub-chip:has(input:checked){background:var(--ink);color:var(--on-ink)}.sub-chip:has(input:focus-visible),.sub-seg__item:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:3px}.sub-other{align-items:center;gap:var(--s-2);grid-template-columns:auto 5rem minmax(0,8rem);font-weight:500;display:grid}.sub-when{align-items:end;gap:var(--s-3) var(--s-5);flex-wrap:wrap;display:flex}.sub-when .field{width:auto;min-width:10.5rem}.sub-check{align-items:center;gap:var(--s-2);cursor:pointer;min-height:2.75rem;font-weight:500;display:inline-flex}.sub-check input{width:1.4rem;height:1.4rem;accent-color:var(--ink)}.sub-error{color:var(--danger);font-weight:600}.sub-hint{color:var(--ink-2);font-size:var(--step--1)}.sub-add__submit{justify-self:start}.sub-main{gap:var(--s-4);align-content:start;min-width:0;display:grid}.sub-main.is-loading{min-height:8rem}.sub-main h2:focus{outline:none}.sub-list__title{font-size:var(--step-1);font-weight:700}.sub-empty{color:var(--ink-2);max-width:var(--measure)}.sub-colheads{display:none}.sub-list{margin:0;padding:0;list-style:none;display:grid}.sub-row{column-gap:var(--s-3);row-gap:var(--s-2);padding:var(--s-4) 0;border-top:2px solid var(--rule);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name yearly""bar bar""billed billed""use use""actions actions";display:grid}.sub-row:last-child{border-bottom:2px solid var(--rule)}.sub-row__name{overflow-wrap:anywhere;grid-area:name;min-width:0;font-weight:700}.sub-row__yearly{text-align:right;grid-area:yearly;line-height:1.1}.sub-row__amount{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);transition:text-decoration-color var(--t-state) var(--ease);text-decoration:line-through 2px #0000;display:block}.sub-row.is-cancel .sub-row__amount{text-decoration-color:var(--sub-red)}.sub-row__unit{color:var(--ink-2);font-size:var(--step--1);font-weight:500;display:block}.sub-row__bar{border:1.5px solid var(--line);border-radius:999px;grid-area:bar;height:10px;display:block;overflow:hidden}.sub-row__fill{background:var(--sub-rose);height:100%;transition:background-color var(--t-state) var(--ease);border-radius:999px;display:block}.sub-row.is-cancel .sub-row__fill{background:var(--sub-red)}.sub-row.is-new .sub-row__fill{animation:sub-grow var(--t-state) var(--ease)}@keyframes sub-grow{0%{transform-origin:0;transform:scaleX(0)}}.sub-row__billed{color:var(--ink-2);font-size:var(--step--1);grid-area:billed;font-weight:500}.sub-row__use{color:var(--ink-2);font-size:var(--step--1);grid-area:use;font-weight:500}.sub-row__use:empty{display:none}.sub-row__actions{align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;grid-area:actions;display:flex}.sub-seg{border:2px solid var(--line);border-radius:var(--r-control);box-shadow:var(--lift);background:var(--paper);margin:0;padding:0;display:inline-flex}.sub-seg__item{min-height:2.5rem;padding:0 var(--s-4);border-radius:var(--r-control);cursor:pointer;transition:background-color var(--t-state) var(--ease);align-items:center;font-weight:700;display:inline-flex;position:relative}.sub-seg__input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.sub-seg__item--keep:has(input:checked){background:var(--ink);color:var(--on-ink)}.sub-seg__item--cancel:has(input:checked){background:var(--sub-red);color:var(--sub-on-red)}.sub-cancelled summary,.sub-hide summary{cursor:pointer;align-items:center;min-height:2.75rem;font-weight:700;display:flex}.sub-cancelled ul{border-top:2px solid var(--rule);padding:0;list-style:none}.sub-cancelled li{align-items:center;gap:0 var(--s-3);padding:var(--s-2) 0;border-bottom:2px solid var(--rule);grid-template-columns:minmax(0,1fr) auto;display:grid}.sub-cancelled__name{overflow-wrap:anywhere;font-weight:700}.sub-cancelled__date{color:var(--ink-2);font-size:var(--step--1);grid-column:1}.sub-cancelled__actions{grid-area:1/2/span 2;display:flex}.sub-hide ul{padding-left:var(--s-5);gap:var(--s-2);max-width:var(--measure);display:grid}.sub-hide a{color:var(--ink);text-underline-offset:.2em}.sub-foot{justify-content:flex-end;display:flex}.sub-edit,.sub-settings{gap:var(--s-3);display:grid}.sub-edit__actions{gap:var(--s-3);flex-wrap:wrap;display:flex}.sub-setting{gap:var(--s-2);display:grid}.sub-confirm{gap:var(--s-3);padding:var(--s-3) var(--s-4);border:2px dashed var(--line);border-radius:var(--r-input);font-weight:500;display:grid}.sub-confirm__actions{gap:var(--s-2);flex-wrap:wrap;display:flex}@media (width>=52rem){.sub-top{gap:clamp(var(--s-5), 4vw, var(--s-7));grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"add head";align-items:start}.sub-head{text-align:right}.sub-head__num{padding-bottom:var(--s-3)}.sub-head__num:after{content:"";height:8px;margin-top:var(--s-3);background:linear-gradient(var(--ink) 0 2.5px, transparent 2.5px 5.5px, var(--ink) 5.5px 8px);display:block}.sub-head__num[aria-hidden=true]:after{display:none}}@media (width>=70rem){.sub-colheads,.sub-row{column-gap:var(--s-4);grid-template-columns:minmax(0,1fr) 13rem 10rem 8rem 14rem}.sub-colheads{padding-bottom:var(--s-2);color:var(--ink-2);font-size:var(--step--1);font-weight:500;display:grid}.sub-colheads span:nth-child(4){text-align:right}.sub-row{grid-template-areas:"name billed use yearly actions""bar billed use yearly actions";align-items:start}.sub-row__actions{align-self:center}}@media (prefers-reduced-motion:reduce){.sub-row__fill,.sub-row__amount,.sub-seg__item{transition:none;animation:none}}