/* Self-hosted type, cut down by scripts/subset_fonts.py to the characters the page can show. The files carry a hash in
   their names because vercel.json lets browsers keep them for a year; the script renames them and writes the names and
   the unicode-ranges here. The rules below are the page's own, as they were in estimate.html. */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(fonts/newsreader-v26-648d3057.woff2) format('woff2');
  unicode-range: U+20-7E, U+B7, U+D7, U+2013, U+2019, U+201C-201D, U+2026, U+2212;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/geist-v5-6eaa5f6c.woff2) format('woff2');
  unicode-range: U+20-7E, U+A0-AC, U+AE-FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190, U+2192, U+2212;
}
:root{
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Geist','Helvetica Neue',Arial,sans-serif;
  --paper:#fbfbfa;
  --ink:#101215;
  --muted:#686e78;
  --quiet:#686e78;
  --line:#e4e5e1;
  --sage:#5c616a;
  --surface:#ffffff;
  --soft:#f0f0ee;
  --field-line:#8c9199;
  --track:#8c9199;
  --control-edge:#8c9199;
  --focus:#245a43;
  --goalc:#245a43;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gc0:#1f7a52;--gc1:#2f5bd8;--gc2:#b87a0b;--gc3:#b0306f;--gc4:#7a45c8;--gc5:#c4491c;
}

html[data-theme=dark]{
  color-scheme:dark;
  --paper:#0a0a0a;
  --ink:#ececec;
  --muted:#b0b0ac;
  --quiet:#a2a29e;
  --line:#242424;
  --sage:#929292;
  --surface:#1c1c1c;
  --soft:#252525;
  --field-line:#777777;
  --track:#777777;
  --control-edge:#777777;
  --focus:#deded8;
  --goalc:#5fb587;
  --gc0:#5fb587;--gc1:#7da0ff;--gc2:#e0b04a;--gc3:#e56fa6;--gc4:#ad8ff2;--gc5:#f08a5d;
}

*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.5 var(--sans);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}

button,input{font:inherit;color:inherit}
button{cursor:pointer;transition:background .25s,transform .25s;border:0;background:none}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,canvas:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--goalc);
  outline-offset:4px;
}
button:disabled{cursor:wait;opacity:.55}

/* Header */
header{
  height:100px;
  margin:0 4%;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:32px;
}
.logo{font:500 40px var(--serif);letter-spacing:-.02em}

/* Mode Morphing Toggle Button (Sun/Moon) */
.mode{
  --ease:cubic-bezier(.16,1,.3,1);
  margin-left:auto;
  appearance:none;
  position:relative;
  align-self:center;
  display:grid;
  place-items:center;
  flex:none;
  width:19px;
  height:19px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mode::before{content:"";position:absolute;inset:-11px}
.mode:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:2px}
.mode svg{display:block;width:19px;height:19px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transition:transform 1.125s var(--ease)}
.mode mask *{stroke:none}
.mode .core{fill:currentColor;stroke:none;transform-origin:12px 12px;transform:scale(.64);transition:transform .875s var(--ease)}
.mode .bite{transform-origin:12px 12px;transform:translate(15px,-15px);transition:transform .94s var(--ease)}
.mode .ray{transform-origin:12px 12px;transition:transform .69s var(--ease) var(--d),opacity .44s ease var(--d)}
.mode.moon svg{transform:rotate(-28deg)}
.mode.moon .core{transform:scale(1);transition:transform .875s var(--ease) .15s}
.mode.moon .bite{transform:translate(5.16px,-1.58px);transition:transform .94s var(--ease) .15s}
.mode.moon .ray{transform:scale(.45);opacity:0;transition:transform .69s var(--ease) var(--m),opacity .5s ease var(--m)}
.mode.rise svg{transition:transform .94s var(--ease) .175s}
.mode.rise .core{transition:transform .625s cubic-bezier(.33,1,.68,1)}
.mode.rise .bite{transform:translate(11.9px,-3.64px);transition:transform .625s cubic-bezier(.33,1,.68,1)}
.mode .rays>g:nth-child(1) .ray{--m:0s;--d:.25s}
.mode .rays>g:nth-child(2) .ray{--m:.0375s;--d:.28s}
.mode .rays>g:nth-child(3) .ray{--m:.075s;--d:.31s}
.mode .rays>g:nth-child(4) .ray{--m:.1125s;--d:.345s}
.mode .rays>g:nth-child(5) .ray{--m:.15s;--d:.375s}
.mode .rays>g:nth-child(6) .ray{--m:.1875s;--d:.405s}
.mode .rays>g:nth-child(7) .ray{--m:.225s;--d:.4375s}
.mode .rays>g:nth-child(8) .ray{--m:.2625s;--d:.47s}
@media(hover:hover){.mode:not(.moon):not(.just):hover svg{transform:rotate(45deg)}}
.mode.still svg,.mode.still svg *{transition:none!important}

/* Main Layout */
main{
  display:grid;
  grid-template-columns:310px 1fr;
  margin:0 4%;
  min-height:calc(100vh - 100px);
}
aside{
  padding:39px 33px 30px 0;
  border-right:1px solid var(--line);
}
h1{font:400 29px var(--serif);letter-spacing:-.015em;margin:0 0 9px}
.muted{color:var(--muted)}
.sub{font-size:12px;margin-bottom:35px}

/* Mode switcher (Basic / Advanced) */
.modes{
  grid-column:1/-1;
  display:inline-flex;
  position:relative;
  border:1px solid var(--control-edge);
  border-radius:999px;
  padding:3px;
  margin:0 0 26px;
  gap:2px;
}
.modes button{
  position:relative;
  z-index:1;
  flex:1;
  min-width:84px;
  border:0;
  background:none;
  border-radius:999px;
  padding:7px 16px;
  font-size:12px;
  color:var(--muted);
  transition:background .25s,color .25s;
}
.modes .pill{
  position:absolute;
  top:3px;
  bottom:3px;
  left:3px;
  width:calc((100% - 8px)/2);
  border-radius:999px;
  background:var(--ink);
  transition:transform .45s var(--ease);
}
body[data-mode=advanced] .modes .pill{transform:translateX(calc(100% + 2px))}
.modes button[aria-pressed=true]{background:none;color:var(--paper)}
body[data-mode=basic] [data-adv],body[data-mode=advanced] [data-basic]{display:none!important}

/* Form Controls & Sliders */
.control{margin-bottom:24px}
.label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:12px}
.bounds,.index,.eyebrow,.legend,.hint,.footer{font-size:11px}
.index{color:var(--quiet);font-variant-numeric:tabular-nums}
.field{
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--field-line);
  padding:0 0 10px;
  gap:8px;
  transition:border-color .2s;
}
.field:focus-within{border-color:var(--ink)}
.field span{font:22px var(--serif)}
.field input{
  width:100%;
  border:0;
  background:none;
  font:400 25px var(--serif);
  letter-spacing:-.01em;
  outline:none;
  font-variant-numeric:tabular-nums;
  appearance:textfield;
  -moz-appearance:textfield;
}
.field input:focus-visible{outline:2px solid var(--goalc);outline-offset:3px;border-radius:2px}
.field input::-webkit-inner-spin-button{appearance:none}
.field small{white-space:nowrap;color:var(--muted)}

input[type=range]{
  --fill:20%;
  appearance:none;
  width:100%;
  height:3px;
  background:linear-gradient(to right,var(--ink) var(--fill),var(--track) var(--fill));
  border-radius:10px;
  display:block;
  margin:23px 0 12px;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 4px var(--paper);
  transition:box-shadow .2s,transform .2s;
}
input[type=range]:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 6px var(--line);
  transform:scale(1.08);
}
input[type=range]::-moz-range-thumb{
  border:3px solid var(--paper);
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--ink);
}
.bounds{display:flex;justify-content:space-between;color:var(--quiet)}

.riskread{font-size:12px;color:var(--muted);margin:2px 0 10px;font-variant-numeric:tabular-nums}
.riskread strong{color:var(--ink);font-weight:500}
.riskread .swap{animation:ctl-in .4s var(--ease) backwards;display:inline-block}

/* Savings Goals in Aside */
.goals{margin:0 0 32px}
.ghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ghead .label{margin:0}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;align-self:center}
.grow2{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) 96px 20px;
  gap:10px;
  align-items:center;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.grow2 input{
  border:0;
  border-bottom:1px solid transparent;
  background:none;
  font:inherit;
  font-size:13px;
  outline:none;
  width:100%;
  padding:4px 0;
}
.grow2 input:focus{border-color:var(--field-line)}
.grow2 .amt{display:flex;align-items:center;justify-content:flex-end;gap:2px;color:var(--muted);font-size:13px}
.grow2 .amt i{font-style:normal}
.grow2 .ga{width:78px;text-align:right;font-variant-numeric:tabular-nums}
.gx{color:var(--muted);font-size:17px;line-height:1;padding:0}
.gx:hover{color:var(--ink)}

.composer{display:grid;gap:12px;margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:10px}
.composer:not([hidden]){animation:ctl-in .4s var(--ease)}
.composer input{border:0;border-bottom:1px solid var(--field-line);background:none;font:inherit;font-size:14px;outline:none;width:100%;min-width:0;padding:6px 0}
.composer input:focus{border-color:var(--ink)}
.cprice{display:flex;align-items:center;gap:6px;color:var(--muted)}
.cact{display:flex;gap:8px;align-items:center}
.cadd{background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 14px;font-size:12px}
.ccancel{color:var(--muted);font-size:12px;padding:7px 8px}
.addline{
  display:block;
  width:100%;
  text-align:left;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--ink);
  opacity:.45;
  transition:opacity .25s;
}
.addline:hover,.addline:focus-visible{opacity:.9}
.goals #goallist:empty+.composer[hidden]+.addline{border-top:1px solid var(--line)}

/* Advanced settings details */
.advanced{border-top:1px solid var(--line);padding-top:20px}
.advanced summary{cursor:pointer;font-size:12px}
.advanced .inside{padding-top:22px;animation:reveal .4s var(--ease)}
.advanced p{font-size:11px;line-height:1.7;color:var(--muted)}
.advanced a{color:inherit}

/* Toggle row for inflation-adjusted contributions */
.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.toggle-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  cursor:pointer;
  user-select:none;
}
.toggle-label span{font-size:12px;color:var(--ink)}
.toggle-label small{font-size:11px;line-height:1.4;color:var(--muted)}
.switch-toggle{
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  width:38px;
  height:22px;
  background:var(--line);
  border:1px solid var(--control-edge);
  border-radius:999px;
  outline:none;
  cursor:pointer;
  transition:background .2s,border-color .2s;
  flex-shrink:0;
  margin:0;
}
.switch-toggle:checked{background:var(--ink);border-color:var(--ink)}
.switch-toggle:before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:var(--paper);
  border-radius:50%;
  transition:transform .2s var(--ease);
}
.switch-toggle:checked:before{transform:translateX(16px);background:var(--paper)}
.switch-toggle:focus-visible{outline:2px solid var(--goalc);outline-offset:3px}

/* Content Area */
.content{
  padding:36px 0 24px 40px;
  min-width:0;
  position:sticky;
  top:0;
  align-self:start;
}
.eyebrow{letter-spacing:2.4px;color:var(--muted);text-transform:uppercase}
.content>.enter>.eyebrow{margin-top:8px}

.hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  margin:14px 0 18px;
}
.hero .primary{flex:1 1 auto;min-width:0}
.total{
  font:350 clamp(50px,6.3vw,100px)/1.06 var(--serif);
  letter-spacing:-.035em;
  white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
  transition:opacity .25s;
}

/* Terminal distribution curve & range bar */
.rangebar{max-width:620px;margin-top:36px;animation:reveal 1s var(--ease) .25s backwards}
.dist{position:relative;height:84px;border-bottom:1px solid var(--line);color:var(--ink)}
.dist svg{display:block;width:100%;height:100%;overflow:visible}
.dist .d0{fill:currentColor;opacity:.07}
.dist .d1{fill:currentColor;opacity:.2}
.dist .dl{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.55;vector-effect:non-scaling-stroke}
.dist .ml{stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.dist .gl{stroke-width:1.3;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;fill:none}
.dist .mlab,.dist .glab{
  position:absolute;
  top:-17px;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.rangebar .ends{
  position:relative;
  display:block;
  height:50px;
  margin-top:0;
  font-variant-numeric:tabular-nums;
}
.rangebar .ends>span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  text-align:center!important;
  padding:14px 0 0;
  white-space:nowrap;
}
.rangebar .ends>span:before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  height:9px;
  border-left:1px solid var(--muted);
}
.rangebar small{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rangebar b{font-weight:400;font-size:19px;letter-spacing:-.3px}

/* Side Column: Goals Output & Context */
.side{
  flex:0 0 min(340px,34%);
  display:flex;
  flex-direction:column;
  gap:0;
}
.goalsout{width:100%;animation:reveal 1s var(--ease) .35s backwards}
.goalsout .gh{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.goalsout .grow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.goalsout .grow:last-child{border-bottom:1px solid var(--line)}
.goalsout.none{display:none}
.goalsout.many .grow{padding:7px 0}
.goalsout.many .grow strong{font-size:clamp(24px,2.2vw,30px)}
.grow .gname{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:13px}
.grow .gname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .gname small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.grow strong{font:350 clamp(30px,3vw,44px)/1 var(--serif);letter-spacing:-.03em;color:var(--c);font-variant-numeric:lining-nums tabular-nums}
.gempty{font-size:13px;color:var(--muted);padding:8px 0 16px;border-top:1px solid var(--line)}

.context{
  display:flex;
  flex-direction:column;
  font-size:13px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.context span{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:10px 0;
  border-top:1px solid var(--line);
  animation:reveal .8s var(--ease) backwards;
  animation-delay:calc(.55s + var(--r,0)*.09s);
}
.context span:first-child{border-top:0}
.goalsout.none~.context span:first-child{border-top:1px solid var(--line)}
.context span:nth-child(2){--r:1}
.context span:nth-child(3){--r:2}
.context i{font-style:normal;color:var(--muted)}
.context b{color:var(--ink);font-weight:450}

/* Busy state styling */
.content[aria-busy=true] .total,
.content[aria-busy=true] .rangebar,
.content[aria-busy=true] .context,
.content[aria-busy=true] .goalsout{opacity:.6}
.content[aria-busy=true] .dist svg{animation:shimmer 1.2s ease-in-out infinite}
@keyframes shimmer{50%{opacity:.4}}

/* Chart Section */
.chart-head{display:flex;justify-content:space-between;align-items:center;margin-top:42px;margin-bottom:14px}
.legend{display:flex;gap:21px;color:var(--muted);flex-wrap:wrap;row-gap:8px}
.legend span{display:flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.legend .dot.sage{border-radius:0;width:12px;height:0;border-top:2px dashed var(--sage);background:none}
.band-key{width:13px;height:8px;background:color-mix(in srgb,var(--sage) 25%,transparent);border:1px dotted var(--sage);border-radius:2px}
.chart-wrap{height:clamp(290px,43vh,530px);position:relative}
canvas{width:100%;height:100%;display:block;touch-action:pan-y}

/* Tooltip */
.tooltip{
  position:absolute;
  pointer-events:none;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px 12px;
  min-width:0;
  opacity:0;
  transition:opacity .2s;
  font-size:11px;
  z-index:2;
}
.tooltip.visible{opacity:1}
.tooltip .ttyear{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.tooltip .ttval{font:400 28px/1.05 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.tooltip .ttsub{font-size:11px;color:var(--muted);margin:3px 0 12px}
.tooltip .ttrow{display:flex;justify-content:space-between;gap:14px;margin:0;padding:7px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.tooltip .ttrow b{font-weight:450;color:var(--ink);font-variant-numeric:tabular-nums}
.tooltip .sw{margin-right:8px;vertical-align:middle}

/* Toolbar & Footer */
.toolbar{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:12px;
  gap:16px;
}
.simulation-tools{
  position:relative;
  display:flex;
  align-items:center;
  margin-left:auto;
}
.simulation-tools #rerun{
  display:flex;
  gap:7px;
  align-items:center;
  border:1px solid var(--control-edge);
  border-radius:5px;
  padding:10px 13px;
  font-size:12px;
  background:var(--surface);
}
.simulation-tools #rerun:hover{background:var(--soft)}
.simulation-tools svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.simulation-tools #rerun:hover svg{transform:rotate(45deg)}
.content[aria-busy=true] .simulation-tools svg{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.progress-track{height:2px;background:transparent;overflow:hidden;opacity:0;transition:opacity .4s ease .15s}
.content[aria-busy=true] .progress-track{opacity:1;transition-delay:0s}
#run-progress{height:100%;width:0;background:var(--ink);transition:none}

.footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--quiet);
  line-height:1.6;
  padding-top:17px;
}
#run-status{font-variant-numeric:tabular-nums}

/* Animations */
.enter{animation:reveal 1s var(--ease) both}
.delay1{animation-delay:.1s}
.delay2{animation-delay:.2s}
.delay3{animation-delay:.3s}
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ctl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#controls .control,details.advanced{animation:ctl-in .55s var(--ease) backwards;animation-delay:calc(.12s + var(--k,0)*.055s)}

/* Responsive adjustments */
@media(min-width:1600px){
  main,header{max-width:1550px;margin-left:auto;margin-right:auto}
  .content{padding-left:60px}
  aside{padding-right:45px}
  main{grid-template-columns:340px 1fr}
}
@media(min-width:701px){
  html,body{height:100%}
  body{display:flex;flex-direction:column;overflow:hidden}
  header,main{width:92%}
  header{flex:none}
  main{flex:1 1 auto;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}
  aside{overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:none}
  aside::-webkit-scrollbar{display:none}
  .content{position:static;align-self:stretch;display:flex;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:18px}
  .content::-webkit-scrollbar{display:none}
  .content>*{flex:none}
  .content>.chart-wrap{flex:1 1 200px;height:auto;min-height:200px}
}
@media(min-width:701px) and (max-height:860px){
  .total{font-size:clamp(44px,7.6vh,80px)}
  .content{padding-top:20px}
  .hero{margin:10px 0 8px}
  .rangebar{margin-top:24px}.dist{height:62px}.rangebar .ends{height:44px}.rangebar b{font-size:17px}
  .goalsout .grow{padding:8px 0}.grow strong{font-size:clamp(26px,2.6vw,36px)}
  .context span{padding:7px 0}
  .chart-head{margin-top:12px}.toolbar{padding:10px 0;margin-top:6px}.footer{margin-top:8px}
}
@media(max-width:1100px){
  header{height:80px;gap:36px}
  main{grid-template-columns:250px 1fr}
  aside{padding-right:25px}
  .content{padding-left:25px}
  .total{font-size:72px}
  .chart-head{margin-top:30px}
}
@media(max-width:850px){
  header{gap:20px}
  .hero{flex-direction:column;align-items:flex-start;gap:22px}
  .side{flex:none;width:100%}
  .hero .primary{flex:none;width:100%}
  .rangebar{max-width:none}
  .pc{display:none}
}
@media(max-width:700px){
  header{margin:0 6%;height:78px;gap:18px}
  .logo{font-size:34px}
  main{display:flex;flex-direction:column;margin:0 6%}
  .content{padding:28px 0 20px;order:0;position:static}
  aside{
    order:1;
    border-right:0;
    border-top:1px solid var(--line);
    padding:30px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:26px;
  }
  aside h1,aside>.sub,.advanced{grid-column:1/-1}
  .total{font-size:clamp(51px,12vw,78px)}
  .chart-wrap{height:300px}
  .chart-head{margin-top:29px}
  .footer{font-size:9px}
  .footer span:last-child{display:none}
  .field input{font-size:22px}
  .control{margin-bottom:28px}
  .advanced .inside{max-width:320px}
  .legend{gap:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}