:root{--page:#edf5f0;--surface:#fff;--ink:#14221d;--muted:#66746c;--line:#d8e6dd;--green:#087c48;--shadow:0 14px 32px #173a2420;--c0:#00875a;--c1:#006beb;--c2:#d52995;--c3:#bb7500;--c4:#7545df;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}
html[data-theme=dark]{--page:#091410;--surface:#11211a;--ink:#f0fff5;--muted:#a0b7a8;--line:#2b4535;--green:#56f4a2;--shadow:0 14px 32px #0005;--c0:#42ffae;--c1:#50caff;--c2:#ff64d5;--c3:#ffdd54;--c4:#bd91ff;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(ellipse at 0 0,#ffb52916,transparent 40%),radial-gradient(ellipse at 100% 12%,#34d69219,transparent 45%),var(--page)}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #24bfff;outline-offset:3px}input,select{width:100%;min-width:0;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;color:var(--ink);background:var(--surface);font-weight:750}button{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:8px 14px;color:var(--ink);background:var(--surface);font-weight:850}label{display:grid;gap:7px;min-width:0;color:var(--muted);font-size:.78rem;font-weight:850}p{line-height:1.7}h1,h2,p{margin-top:0}h2{margin-bottom:0;font-size:1.22rem}.kicker{margin-bottom:5px;color:var(--green);font-size:.67rem;font-weight:950;letter-spacing:.19em}.muted{color:var(--muted);font-size:.76rem}.site-page-header{background:var(--surface);border-color:var(--line)}.compare-brand img{display:block;width:150px;height:56px;object-fit:contain}.compare-brand .brand-dark{display:none}html[data-theme=dark] .compare-brand .brand-dark{display:block}html[data-theme=dark] .compare-brand .brand-light{display:none}.theme-toggle{justify-self:end;width:44px;padding:0;color:#ed9200;font-size:1.4rem}.compare-page{width:min(1240px,calc(100% - 32px));margin:28px auto 48px}.compare-hero{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.compare-hero h1{font-size:clamp(1.7rem,4vw,2.8rem);margin:4px 0 8px;letter-spacing:-.045em}.compare-hero h1{text-align:left}.compare-hero>div>p:last-child{margin:0;color:var(--muted);font-size:.9rem}.hero-badge{flex-shrink:0;border:1px solid #11a55e55;border-radius:20px;padding:14px 20px;color:var(--green);background:linear-gradient(120deg,#1ee28817,#ffc23b18);text-align:center;font-size:.75rem;line-height:1.7}.hero-badge b{font-size:.95rem}.panel{border:1px solid var(--line);border-radius:22px;padding:22px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:18px}.settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.save-hint{font-size:.7rem;color:var(--muted)}.quick-periods{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.quick-periods button{min-height:38px;padding:6px 18px}.quick-periods button[aria-pressed=true]{color:#fff;border-color:#089350;background:linear-gradient(120deg,#11b959,#087c48)}.settings-grid{display:grid;grid-template-columns:1.1fr 1fr 1.6fr auto;gap:12px;align-items:end}.quiet-button{color:var(--green)}.picker-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px;margin-top:15px}.picker-select-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:14px}.primary-button{border-color:#0c9759;color:#fff;background:linear-gradient(120deg,#13b45d,#087747);box-shadow:0 6px 15px #08935025}.selected-assets{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:12px}.asset-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-left:4px solid var(--series);border-radius:14px;padding:5px 5px 5px 11px;background:color-mix(in srgb,var(--series) 6%,var(--surface));font-weight:850;font-size:.84rem}.asset-chip small{display:block;color:var(--muted);font-size:.61rem;font-weight:650}.asset-chip button{min-height:38px;width:38px;border:0;padding:0;background:transparent;color:var(--muted);font-size:1.2rem}.picker summary{color:var(--green);font-size:.84rem;font-weight:850;padding:8px 0;min-height:38px}.picker #pickerMessage{min-height:1em;margin:8px 0 0}.baseline-label{display:flex;align-items:center;gap:8px;flex-shrink:0}.baseline-label select{width:150px}.chart-status{margin:0 0 12px;color:var(--muted);font-size:.78rem}.chart-legend{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.chart-legend button{display:flex;align-items:center;gap:7px;min-height:38px;padding:5px 11px;font-size:.78rem}.chart-legend button i{width:18px;height:3px;background:var(--series);box-shadow:0 0 5px var(--series)}.chart-legend button[aria-pressed=true]{border-color:var(--series)}.chart-frame{position:relative;min-height:340px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(140deg,color-mix(in srgb,var(--green) 3%,var(--surface)),var(--surface))}.chart-frame svg{display:block;width:100%;height:440px;touch-action:pan-y}.chart-grid{stroke:var(--line);stroke-width:1}.zero-line{stroke:var(--muted);stroke-dasharray:4 5;opacity:.7}.axis-label{fill:var(--muted);font-size:11px;font-weight:650}.series-line{fill:none;stroke:var(--series);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.series-line.is-muted{opacity:.23}.series-line.is-active{stroke-width:2.3}.series-dot{fill:var(--series)}html[data-theme=dark] .series-line{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--series) 45%,transparent))}.cursor-line{stroke:var(--muted);stroke-dasharray:3 4;pointer-events:none}.chart-readout{min-height:63px;margin-top:12px;border-radius:12px;padding:11px 14px;background:color-mix(in srgb,var(--green) 5%,var(--surface));color:var(--muted);font-size:.75rem;line-height:1.8}.chart-readout b{color:var(--ink)}.readout-item{display:inline-block;margin-right:15px}.chart-caption{margin:12px 0 0;color:var(--muted);font-size:.68rem;line-height:1.6}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;padding:30px;color:var(--muted);text-align:center;font-size:.9rem}.chart-empty[hidden]{display:none}.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}.result-card{border:1px solid var(--line);border-top:4px solid var(--series);border-radius:18px;padding:18px;background:var(--surface);box-shadow:var(--shadow)}.result-card h3{margin:0;font-size:1rem}.result-card .result-name{display:block;color:var(--muted);font-size:.68rem;margin-top:5px;overflow-wrap:anywhere}.result-value{display:block;font-size:1.9rem;font-weight:950;letter-spacing:-.055em;margin-top:13px;color:var(--series)}.result-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:14px 0;font-size:.7rem;line-height:1.5}.result-card dt{color:var(--muted)}.result-card dd{margin:0;text-align:right;font-weight:700}.gap-box{border-radius:12px;padding:10px;background:color-mix(in srgb,var(--series) 7%,var(--surface));font-size:.76rem;font-weight:800}.gap-box small{display:block;color:var(--muted);font-size:.64rem;font-weight:600;margin-top:5px}.history-note{color:var(--muted);font-size:.68rem;line-height:1.65;margin:12px 0 0}.retry-button{width:100%;margin-top:12px;color:var(--green)}.results-section{margin:24px 0}.compare-notes{box-shadow:none}.compare-notes summary{font-size:.85rem;font-weight:850;color:var(--green);min-height:30px}.compare-notes p{color:var(--muted);font-size:.75rem;margin:12px 0 0}
@media(max-width:680px){.compare-page{width:calc(100% - 20px);margin-top:20px}.panel{padding:16px;border-radius:18px}.compare-hero{gap:8px;margin-bottom:18px}.hero-badge{padding:10px 12px}.compare-hero>div>p:last-child{font-size:.76rem}.settings-grid{grid-template-columns:1fr 1fr}.settings-grid label:nth-child(3){grid-column:1}.settings-grid label:nth-child(3) select{font-size:.75rem}.picker-grid{grid-template-columns:1fr 1fr}.search-label{grid-column:1/-1}.quick-periods{gap:6px}.quick-periods button{flex:1;padding:6px 8px;font-size:.76rem}.baseline-label{display:grid;gap:3px;font-size:.65rem}.baseline-label select{width:124px;height:38px;font-size:.76rem}.chart-frame svg{height:340px}.results-grid{grid-template-columns:1fr 1fr}.result-card{padding:13px}.result-value{font-size:1.65rem}.result-card dl{grid-template-columns:1fr;gap:3px}.result-card dd{text-align:left;margin-bottom:5px}.save-hint{font-size:.62rem}.chart-readout{font-size:.7rem}.compare-brand img{width:118px;height:46px}.result-card .result-name{min-height:2.6em}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#chartCursor[hidden]{display:none}.settings-grid input[type=month]{min-width:0}html[data-theme=dark] .back-to-board{background:#172c21;border-color:var(--line)}html[data-theme=dark] .back-to-board::before{color:var(--green)}

/* Match the shared page-header sun/moon control. */
.header-theme-toggle {
  position: relative;
  justify-self: end;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(8,142,67,.3);
  border-radius: 12px;
  background: linear-gradient(145deg,rgba(255,255,255,.96) 16%,rgba(232,248,239,.94) 100%);
  color: #f39800;
  box-shadow:0 4px 12px rgba(7,133,62,.13),inset 0 0 4px rgba(21,186,91,.18),inset 0 0 13px rgba(21,186,91,.1),inset 0 1px 0 rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.header-theme-toggle:focus-visible { outline: 3px solid rgba(246,160,0,.5); outline-offset: 2px; }
.header-theme-icon { grid-area: 1 / 1; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s ease,transform .22s ease; }
.header-theme-sun circle { fill: currentColor; stroke: none; }
.header-theme-moon { opacity: 0; transform: rotate(-24deg) scale(.62); }
.header-theme-toggle[aria-pressed="true"] .header-theme-sun { opacity: 0; transform: rotate(28deg) scale(.62); }
.header-theme-toggle[aria-pressed="true"] .header-theme-moon { opacity: 1; transform: rotate(0) scale(1); }


html[data-theme="dark"] .header-theme-toggle{border-color:#3c4943;color:#ffd260;background:linear-gradient(145deg,#20282b,#151b1e);box-shadow:0 4px 12px rgba(0,0,0,.3)}

/* Keep Safari's native month field inside its own grid column. */
.settings-grid,.picker-grid{column-gap:16px;row-gap:16px}
.settings-grid>label,.picker-grid>label,.picker-select-row>label{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;min-width:0}
.settings-grid input,.settings-grid select,.picker input,.picker select{display:block;box-sizing:border-box;min-width:0;max-width:100%;width:100%;inline-size:100%;min-inline-size:0}
#startMonth{appearance:none;-webkit-appearance:none;overflow:hidden;text-align:left}
#startMonth::-webkit-date-and-time-value{min-width:0;text-align:left}
#startMonth::-webkit-datetime-edit{min-width:0;padding:0}
/* Green glass edges echo the TOP 10 toggle, including an inner rim. */
.settings :is(button,input,select),.picker :is(button,input,select,summary){
  border:1px solid rgba(8,142,67,.38);border-radius:12px;
  background:linear-gradient(145deg,#fff,#eef9f2);
  box-shadow:0 4px 11px rgba(7,133,62,.10),inset 0 0 0 1px rgba(21,186,91,.22),inset 0 0 3px rgba(21,186,91,.24),inset 0 0 12px rgba(21,186,91,.15),inset 0 1px 0 rgba(255,255,255,.9);
}
.settings :is(button,input,select):focus-visible,.picker :is(button,input,select,summary):focus-visible{outline:3px solid rgba(8,142,67,.25);outline-offset:3px}
.picker summary{padding:11px 13px;min-height:44px}
.settings .quick-periods button[aria-pressed=true],.picker .primary-button{color:#fff;border-color:rgba(8,142,67,.6);background:linear-gradient(120deg,#11b959,#087c48);box-shadow:0 5px 13px rgba(7,133,62,.18),inset 0 0 0 1px rgba(153,255,195,.28),inset 0 0 10px rgba(101,255,166,.17),inset 0 1px 0 rgba(255,255,255,.3)}
.picker .asset-chip{border-color:rgba(8,142,67,.3);border-left-color:var(--series);box-shadow:inset 0 0 8px rgba(21,186,91,.08)}
.picker .asset-chip button{width:32px;min-height:32px;border-radius:10px}
html[data-theme=dark] .settings :is(button,input,select),html[data-theme=dark] .picker :is(button,input,select,summary){border-color:rgba(52,203,119,.42);background:linear-gradient(145deg,#1b2521,#122019);box-shadow:0 4px 11px rgba(0,0,0,.25),inset 0 0 0 1px rgba(52,203,119,.14),inset 0 0 3px rgba(52,203,119,.22),inset 0 0 12px rgba(52,203,119,.13),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme=dark] .settings .quick-periods button[aria-pressed=true],html[data-theme=dark] .picker .primary-button{color:#fff;border-color:#24bd6d;background:linear-gradient(120deg,#11a95c,#087a42);box-shadow:0 5px 13px rgba(0,0,0,.3),inset 0 0 0 1px rgba(153,255,195,.22),inset 0 0 10px rgba(101,255,166,.12)}
@media(max-width:680px){.settings-grid,.picker-grid{column-gap:14px;row-gap:14px}}
@media(prefers-reduced-motion:reduce){.header-theme-icon{transition:none}}

/* Center Safari's month value within the 44px control. */
#startMonth{height:44px;padding-block:0;line-height:42px}
#startMonth::-webkit-date-and-time-value{display:block;height:42px;line-height:42px;margin:0}
#startMonth::-webkit-datetime-edit{padding-block:0;line-height:42px}

/* Independent collapsible panels keep the chart in view. */
.fold-heading{margin:0}
.compare-fold-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:64px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:left;box-shadow:none}
.fold-copy{display:grid;gap:5px;min-width:0}
.fold-copy .kicker{margin:0;font-size:.67rem}
.fold-title{font-size:1.22rem;font-weight:900}
.fold-summary{font-size:.74rem;line-height:1.6;font-weight:650;color:var(--muted);overflow-wrap:anywhere}
.fold-chevron{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--green);font-size:1.7rem;font-weight:900;line-height:1;transition:transform .18s ease}
.compare-fold-toggle[aria-expanded=true] .fold-chevron{transform:rotate(180deg)}
.fold-body{padding-top:16px}
.fold-body[hidden]{display:none!important}
.results-section>.fold-heading{border:1px solid var(--line);border-radius:18px;padding:10px 18px;background:var(--surface);box-shadow:var(--shadow)}
.settings .compare-fold-toggle,.picker .compare-fold-toggle{border:0;padding:0;background:transparent;box-shadow:none}
html[data-theme=dark] .settings .compare-fold-toggle,html[data-theme=dark] .picker .compare-fold-toggle{border:0;background:transparent;box-shadow:none}
@media(max-width:680px){.compare-fold-toggle{min-height:58px}.fold-title{font-size:1.12rem}.fold-summary{font-size:.69rem}.results-section>.fold-heading{padding:10px 15px}.fold-body{padding-top:14px}}
@media(prefers-reduced-motion:reduce){.fold-chevron{transition:none}}

/* Keep endpoint names in their own gutter, with leaders for crowded endpoints. */
.series-end-label{pointer-events:none}.end-label-leader{fill:none;stroke:var(--series);stroke-width:1;stroke-dasharray:2 2;stroke-linecap:round;stroke-linejoin:round;opacity:.72;vector-effect:non-scaling-stroke}.end-label-box{fill:var(--surface);stroke:var(--series);stroke-width:1.6;vector-effect:non-scaling-stroke}.end-label-name{fill:var(--ink);font-weight:850}.series-end-label.is-muted{opacity:.42}.series-end-label.is-active .end-label-box{stroke-width:2.2}

.compare-brand{padding:0;border:0;background:transparent;cursor:pointer;box-shadow:none}.compare-brand:focus-visible{outline:3px solid var(--green);outline-offset:5px;border-radius:8px}

.end-label-value{fill:var(--series);font-weight:750;font-variant-numeric:tabular-nums}