.load-page { --load-ink: #20352d; --load-line: #cfd9d1; --load-copper: #a2682c; --load-mist: #edf2eb; --load-cream: #fffdf7; }
.load-page .site-header.page-shell { padding-top: 18px; padding-bottom: 12px; }
.load-page .brand { display: inline-flex; align-items: center; gap: 7px; font-size: 1.12rem; }
.load-page .brand-symbol { display: inline-flex; width: 27px; height: 27px; }
.load-page .brand-symbol svg { width: 100%; height: 100%; }
.load-page .brand-pro { color: var(--green); font-size: .61em; margin-left: 2px; letter-spacing: .05em; vertical-align: .12em; }
.load-main { padding-top: 0; }
.load-crumb { margin: 0 0 15px; color: #576b60; font-size: .85rem; }
.load-crumb a { text-underline-offset: 3px; }
.load-crumb span { padding: 0 7px; color: #85968a; }
.load-tool { background: var(--load-cream); border: 1px solid var(--load-line); border-top: 5px solid var(--load-ink); box-shadow: 0 14px 35px rgba(32,53,45,.07); }
.load-heading { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; padding: 26px 30px 20px; border-bottom: 1px solid var(--load-line); }
.load-heading h1 { margin: 0 0 6px; color: var(--load-ink); font-size: clamp(1.8rem, 3.1vw, 2.65rem); letter-spacing: -.045em; line-height: 1.13; }
.load-heading p { max-width: 68ch; margin: 0; color: #51645a; line-height: 1.55; }
.load-heading-note { flex: none; border: 1px solid #c6d7ca; padding: 7px 10px; color: #315c44; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.load-workspace { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(310px,.9fr); }
.load-form { padding: 26px 30px 28px; }
.load-form fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; padding: 0; margin: 0 0 24px; border: 0; }
.load-form legend { width: 100%; padding: 0 0 12px; margin-bottom: 2px; border-bottom: 1px solid var(--load-line); color: var(--load-ink); font-size: 1.08rem; font-weight: 790; letter-spacing: -.02em; }
.load-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #294236; font-size: .91rem; font-weight: 680; }
.load-form label span { color: #5d6d62; font-size: .78rem; font-weight: 500; }
.load-form input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #aabcaf; border-radius: 4px; background: #fff; color: #1e3328; font-size: 1.07rem; font-variant-numeric: tabular-nums; }
.load-form input:focus-visible, .load-result button:focus-visible, .load-skip:focus-visible { outline: 3px solid #d59c53; outline-offset: 2px; }
.load-form input::placeholder { color: #6d7b72; font-size: .85rem; }
.load-form small { display: block; color: #57695e; font-size: .77rem; line-height: 1.42; font-weight: 400; }
.load-space-helper { margin: -7px 0 21px; border-top: 1px solid var(--load-line); border-bottom: 1px solid var(--load-line); }
.load-space-helper summary { min-height: 44px; padding: 11px 0 8px; cursor: pointer; color: #31523d; font-size: .91rem; font-weight: 760; }
.load-space-helper summary:focus-visible, .load-space-button:focus-visible { outline: 3px solid #d59c53; outline-offset: 2px; }
.load-space-helper > p { max-width: 68ch; margin: 4px 0 11px; color: #57695e; font-size: .82rem; line-height: 1.5; }
.load-space-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.load-space-formula { padding: 10px 12px; border-left: 3px solid var(--load-copper); background: #f4f4ed; color: #425448 !important; font-variant-numeric: tabular-nums; }
.load-space-button { min-height: 44px; padding: 9px 13px; border: 1px solid #557564; border-radius: 3px; background: #fff; color: #244a35; font-weight: 740; cursor: pointer; }
#load-space-status { min-height: 1.25em; margin: 9px 0 13px; }
.load-quick-weight { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 14px; align-items: baseline; margin: -5px 0 24px; padding: 10px 0 12px; border-top: 1px solid var(--load-line); border-bottom: 2px solid var(--load-copper); color: var(--load-ink); }
.load-quick-weight span { font-size: .86rem; font-weight: 720; }
.load-quick-weight strong { font-size: clamp(1.55rem,2.6vw,2rem); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.load-quick-weight small { grid-column: 1 / -1; max-width: 66ch; }
.load-form-note { margin: 0; padding: 12px 15px; border-left: 3px solid var(--load-copper); background: #fcf3e5; color: #5a4b37; font-size: .83rem; }
.load-result { min-width: 0; padding: 26px 29px 24px; border-left: 1px solid var(--load-line); background: var(--load-mist); }
.load-result-kicker { margin: 0 0 8px; color: #366049; font-size: .77rem; font-weight: 760; }
.load-result h2 { margin: 0 0 5px; color: #244030; font-size: 1.27rem; line-height: 1.24; letter-spacing: -.02em; }
.load-trip-count { display: flex; align-items: baseline; gap: 9px; padding-bottom: 5px; border-bottom: 2px solid #aac0b0; color: #20523b; }
.load-trip-count strong { font-size: clamp(3.3rem,6vw,5.1rem); line-height: 1.04; font-variant-numeric: tabular-nums; letter-spacing: -.075em; }
.load-trip-count span { font-size: 1rem; font-weight: 740; }
#load-status { min-height: 2.5em; margin: 13px 0 21px; color: #425b4a; font-size: .88rem; }
.load-limit-list { display: grid; gap: 14px; }
.load-limit-list > div { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; padding-bottom: 10px; border-bottom: 1px solid #c6d3c6; font-size: .83rem; }
.load-limit-list span { color: #465d4c; }
.load-limit-list strong { color: #1f3e2c; font-variant-numeric: tabular-nums; }
.load-limit-list i { grid-column: 1/-1; display: block; width: var(--bar-width,0%); min-height: 5px; background: var(--load-copper); }
.load-limit-list > div:nth-child(2) i { background: #2d694d; }
.load-result dl { margin: 17px 0; }
.load-result dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .86rem; }
.load-result dt { color: #49614f; }
.load-result dd { margin: 0; text-align: right; color: #234632; font-weight: 770; font-variant-numeric: tabular-nums; }
.load-result button { width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 4px; background: #245840; color: #fff; font-weight: 750; }
.load-result button:not(:disabled):hover { background: #194832; }
.load-result button:disabled { background: #738a79; color: #fff; cursor: not-allowed; }
#load-copy-status { min-height: 1.25em; margin: 7px 0 0; color: #2e5a3e; font-size: .78rem; }
.load-result-caution { margin: 16px 0 0; padding: 12px 13px; border: 1px solid #e2c397; background: #fff8eb; color: #544b3d; font-size: .78rem; line-height: 1.53; }
.load-skip { position: absolute; left: -9999px; top: 4px; z-index: 9; padding: 8px; background: #fff; }
.load-skip:focus-visible { left: 12px; }
.load-figure { max-width: 900px; margin: 32px auto 42px; }
.load-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--load-line); }
.load-figure figcaption { margin-top: 8px; color: #647266; font-size: .8rem; }
.load-section { max-width: 900px; margin: 0 auto 36px; padding-top: 22px; border-top: 1px solid var(--load-line); }
.load-section h2 { margin: 0 0 12px; color: #244133; font-size: clamp(1.35rem,2.5vw,1.8rem); letter-spacing: -.035em; }
.load-section p { max-width: 75ch; color: #465a4d; line-height: 1.65; }
.load-formula { padding: 16px 20px; border-left: 4px solid #2c6a4e; background: #edf3ec; font-variant-numeric: tabular-nums; }
.load-explain-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
.load-explain-grid article { border-top: 1px solid #dbe2d9; }
.load-explain-grid h3 { margin-bottom: 4px; color: #2c523b; font-size: 1rem; }
.load-explain-grid p { margin-top: 4px; font-size: .9rem; }
.load-source { font-size: .81rem; }
.load-faq details { border-top: 1px solid #d6dfd5; padding: 11px 0; }
.load-faq summary { cursor: pointer; color: #244534; font-weight: 720; }
.load-faq summary:focus-visible { outline: 3px solid #d59c53; outline-offset: 3px; }
.load-faq details p { margin-bottom: 2px; font-size: .9rem; }
.load-next { background: #e9f0e8; padding: 22px 24px; border-top: 4px solid #47765b; }
.load-next p { margin-bottom: 0; }
@media (max-width: 800px) { .load-workspace { grid-template-columns: 1fr; } .load-result { border-left: 0; border-top: 1px solid var(--load-line); } }
@media (max-width: 580px) { .load-page .site-header.page-shell { position: static; flex-wrap: wrap; gap: 7px; padding-top: 9px; } .load-page .site-nav { display: flex; flex-wrap: wrap; gap: 2px 15px; } .load-page .site-nav a { min-height: 44px; padding: 3px 0; font-size: .75rem; } .load-heading { display: block; padding: 21px 18px 16px; } .load-heading-note { display: inline-block; margin-top: 13px; } .load-form { padding: 20px 18px; } .load-form fieldset { grid-template-columns: 1fr; gap: 14px; } .load-space-inputs { grid-template-columns: 1fr; } .load-quick-weight { grid-template-columns: 1fr; } .load-result { padding: 21px 18px; } .load-explain-grid { grid-template-columns: 1fr; } .load-figure { margin: 23px 0 30px; } }