:root {
  --forest-950: #102c27;
  --forest-900: #173b32;
  --forest-800: #235346;
  --forest-700: #33715d;
  --moss: #8e9b67;
  --amber: #e5a044;
  --amber-dark: #a96824;
  --paper: #f4eee2;
  --paper-deep: #e9dfcf;
  --ink: #20322d;
  --muted: #64736b;
  --line: rgba(32, 50, 45, .18);
  --white: #fffdf7;
  --danger: #9d4035;
  --success: #2b7956;
  --shadow: 0 22px 54px rgba(16, 44, 39, .13);
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  font-synthesis: none;
  line-height: 1.6;
  background: var(--paper);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 7% 38%, rgba(142, 155, 103, .12), transparent 24rem),
    var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

body::selection { background: rgba(229, 160, 68, .5); }

a { color: inherit; }

button, input { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }

button:disabled { cursor: not-allowed; opacity: .58; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--forest-950);
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

.site-header {
  width: min(1320px, calc(100% - 3rem));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--forest-900);
  text-decoration: none;
  letter-spacing: .03em;
}

.brand strong, .brand small { display: block; }

.brand strong { font-size: .95rem; letter-spacing: .07em; }

.brand small { margin-top: .05rem; color: var(--muted); font-size: .54rem; letter-spacing: .22em; }

.brand-mark {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  background: var(--forest-900);
  color: var(--amber);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; color: var(--muted); font-size: .82rem; }

.site-nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

.site-nav a:hover { color: var(--forest-900); }

.hero {
  width: min(1440px, calc(100% - 3rem));
  min-height: 610px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  overflow: hidden;
  border-radius: 2px 28px 2px 28px;
  background: var(--forest-900);
  color: var(--white);
  box-shadow: var(--shadow);
}

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.4rem, 6vw, 6rem) clamp(2rem, 6vw, 6.8rem);
  isolation: isolate;
}

.hero-copy::before {
  position: absolute;
  z-index: -1;
  content: "";
  width: 24rem;
  height: 24rem;
  left: -11rem;
  bottom: -12rem;
  border: 1px solid rgba(229, 160, 68, .3);
  border-radius: 50%;
  box-shadow: 0 0 0 1.4rem rgba(229, 160, 68, .045), 0 0 0 3rem rgba(229, 160, 68, .04);
}

.eyebrow {
  margin: 0 0 .8rem;
  color: var(--amber-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero .eyebrow { color: var(--amber); }

.eyebrow-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: currentColor; vertical-align: .08em; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { letter-spacing: -.045em; line-height: 1.16; }

h1 { max-width: 10em; margin-bottom: 1.4rem; font-size: clamp(2.55rem, 5vw, 5.1rem); font-weight: 700; }

h1 em, h2 em { color: var(--amber); font-style: normal; }

.hero-lede { max-width: 34rem; margin-bottom: 2rem; color: rgba(255, 253, 247, .76); font-size: .98rem; }

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary { background: var(--amber); color: var(--forest-950); }

.button-primary:hover { background: #f1b25c; }

.button-outline { border-color: var(--line); background: transparent; color: var(--forest-900); }

.button-outline:hover { border-color: var(--forest-800); background: rgba(35, 83, 70, .07); }

.hero .button-outline { color: var(--white); border-color: rgba(255, 255, 255, .35); }

.button-quiet { min-height: 44px; border-color: rgba(35, 83, 70, .18); background: transparent; color: var(--forest-800); padding: .5rem .9rem; }

.button-quiet:hover { border-color: var(--forest-700); background: rgba(35, 83, 70, .07); }

.button-wide { min-width: 12rem; }

.local-note { color: rgba(255, 253, 247, .6); font-size: .75rem; }

.hero-example {
  width: min(100%, 27rem);
  margin-top: 3rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.example-label { margin-bottom: .4rem; color: var(--amber); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.example-values { display: flex; align-items: baseline; flex-wrap: wrap; gap: .48rem; color: rgba(255, 253, 247, .63); font-size: .82rem; }

.example-values strong { color: var(--white); font-size: 1.04rem; }

.example-result { margin-top: .4rem; color: var(--amber); font-size: .82rem; }

.example-result b { font-size: 1.05rem; }

.hero-visual { position: relative; min-height: 610px; overflow: hidden; }

.hero-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(16, 44, 39, .25), transparent 45%), linear-gradient(0deg, rgba(16, 44, 39, .35), transparent 44%); pointer-events: none; }

.hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 63% center; }

.image-caption { position: absolute; z-index: 1; right: clamp(1.4rem, 5vw, 5rem); bottom: 2.1rem; color: var(--white); text-align: right; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }

.image-caption span { display: block; margin-bottom: .35rem; color: var(--amber); font-size: .6rem; font-weight: 800; letter-spacing: .18em; }

.image-caption strong { font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: -.03em; }

.visual-stamp { position: absolute; z-index: 1; top: 2rem; right: 2rem; display: grid; width: 5rem; height: 5rem; place-items: center; border: 1px solid rgba(255, 253, 247, .7); border-radius: 50%; color: var(--white); font-size: .75rem; font-weight: 800; letter-spacing: .16em; line-height: 1.15; text-align: center; transform: rotate(9deg); }

.visual-stamp small { font-size: .48rem; letter-spacing: .12em; }

.planner-section, .results-section, .saved-section, .safety-section { width: min(1240px, calc(100% - 3rem)); margin: 0 auto; }

.planner-section { padding: 9rem 0 7rem; }

.section-heading { display: grid; grid-template-columns: .8fr 1fr 1.15fr; align-items: end; gap: 2rem; margin-bottom: 3.4rem; }

.section-heading h2, .saved-intro h2 { margin-bottom: 0; color: var(--forest-900); font-size: clamp(2.15rem, 4vw, 3.8rem); }

.section-heading > p:last-child { max-width: 25rem; margin: 0; color: var(--muted); font-size: .9rem; }

.workbench-layout { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(0, 2.1fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }

.field-note { position: relative; max-width: 18rem; margin-top: 2.2rem; padding: 2.1rem 1.6rem 1.8rem; border: 1px solid rgba(35, 83, 70, .23); background: rgba(255, 253, 247, .45); transform: rotate(-1.4deg); }

.field-note::before { position: absolute; top: -1rem; right: 1.4rem; width: 1.5rem; height: 3rem; border: 1px solid rgba(169, 104, 36, .35); border-bottom: 0; content: ""; transform: rotate(5deg); }

.note-pin { position: absolute; top: -.38rem; right: 1.95rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--amber); box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }

.note-kicker { margin-bottom: 1rem; color: var(--amber-dark); font-size: .62rem; font-weight: 800; letter-spacing: .18em; }

.field-note h3 { margin-bottom: .9rem; color: var(--forest-900); font-size: 1.55rem; }

.field-note > p:not(.note-kicker):not(.note-small) { color: var(--muted); font-size: .78rem; }

.note-rule { width: 100%; height: 1px; margin: 1.3rem 0; background: var(--line); }

.note-small { margin: 0; color: var(--muted); font-size: .7rem; }

.note-small strong { color: var(--forest-900); }

.workbench-form { min-width: 0; }

.form-section { padding: 2.2rem 0; border-top: 1px solid var(--line); }

.form-section-first { padding-top: 0; border-top: 0; }

.form-section-heading { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.5rem; }

.form-section-heading h3 { margin: 0 0 .25rem; color: var(--forest-900); font-size: 1.12rem; }

.form-section-heading p { margin: 0; color: var(--muted); font-size: .74rem; }

.step-number { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border: 1px solid var(--forest-700); border-radius: 50%; color: var(--forest-700); font-size: .65rem; font-weight: 800; letter-spacing: .04em; }

.optional-tag { display: inline-block; margin-left: .25rem; padding: .12rem .38rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .57rem; letter-spacing: .04em; vertical-align: .15em; }

.form-grid { display: grid; gap: 1rem; }

.form-grid-power { grid-template-columns: minmax(10rem, .72fr) minmax(16rem, 1.28fr); }

.form-grid-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field, .field-efficiency { display: block; min-width: 0; }

.field > span, .field legend, .field-efficiency > legend { display: block; margin-bottom: .45rem; color: var(--forest-900); font-size: .8rem; font-weight: 800; }

.field small, .field legend small { display: block; margin-top: .1rem; color: var(--muted); font-size: .54rem; font-weight: 600; letter-spacing: .13em; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.input-with-unit { position: relative; display: flex; align-items: center; }

.input-with-unit input, .save-row input { width: 100%; min-height: 49px; border: 1px solid rgba(35, 83, 70, .27); border-radius: 1px; background: rgba(255, 253, 247, .7); color: var(--forest-900); font-size: 1rem; font-weight: 700; padding: .65rem 3.2rem .65rem .8rem; }

.input-with-unit input:hover, .save-row input:hover { border-color: var(--forest-700); }

.input-with-unit input:focus, .save-row input:focus { border-color: var(--forest-700); outline: 3px solid rgba(51, 113, 93, .18); outline-offset: 0; }

.input-with-unit b { position: absolute; right: .8rem; color: var(--muted); font-size: .75rem; pointer-events: none; }

.range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .65rem; }

.range-inputs label > span { display: block; margin-bottom: .42rem; color: var(--muted); font-size: .68rem; }

.range-dash { padding-bottom: .75rem; color: var(--forest-700); font-weight: 800; }

.form-section-heading-appliances { align-items: center; }

.form-section-heading-appliances > div { flex: 1; }

.appliance-head { display: grid; grid-template-columns: minmax(9rem, 1.25fr) repeat(5, minmax(4.4rem, .66fr)) 2.2rem; gap: .55rem; margin-bottom: .45rem; padding: 0 .7rem; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.appliances-list { display: grid; gap: .55rem; }

.appliance-row { display: grid; grid-template-columns: minmax(9rem, 1.25fr) repeat(5, minmax(4.4rem, .66fr)) 2.2rem; gap: .55rem; align-items: center; padding: .65rem .7rem; border: 1px solid rgba(35, 83, 70, .15); background: rgba(255, 253, 247, .55); }

.appliance-row label { min-width: 0; }

.appliance-row label > span { display: none; color: var(--muted); font-size: .6rem; }

.appliance-row input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid rgba(35, 83, 70, .2); border-radius: 1px; background: var(--white); color: var(--forest-900); padding: .45rem .48rem; font-size: 1rem; }

.appliance-row input[type="number"] { text-align: right; }

.appliance-row input:focus { border-color: var(--forest-700); outline: 3px solid rgba(51, 113, 93, .18); outline-offset: 0; }

.remove-appliance { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.15rem; }

.remove-appliance:hover { background: rgba(157, 64, 53, .1); color: var(--danger); }

.form-footnote { display: flex; gap: .5rem; margin: .9rem 0 0; color: var(--muted); font-size: .69rem; }

.form-footnote > span { display: inline-grid; width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; place-items: center; border: 1px solid var(--muted); border-radius: 50%; font-size: .65rem; font-weight: 800; }

.form-actions { display: flex; align-items: center; gap: .75rem; padding-top: .5rem; }

.results-section { padding: 5rem 0 7.5rem; }

.results-section::before { display: block; width: 100%; height: 1px; margin-bottom: 4rem; background: var(--line); content: ""; }

.results-topline, .results-heading, .breakdown-heading, .saved-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.live-badge { display: inline-flex; align-items: center; gap: .45rem; color: var(--success); font-size: .61rem; font-weight: 800; letter-spacing: .15em; }

.live-badge span { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .25rem rgba(43, 121, 86, .13); }

.results-heading { align-items: end; margin-bottom: 1.6rem; }

.results-heading h2 { margin: 0 0 .25rem; color: var(--forest-900); font-size: clamp(2.2rem, 4vw, 3.5rem); }

.results-heading p { margin: 0; color: var(--muted); font-size: .82rem; }

.print-button { min-height: 44px; font-size: .76rem; }

.status-message, .alert-message, .validation-messages { margin-bottom: 1rem; padding: .7rem .9rem; border-left: 3px solid var(--forest-700); background: rgba(51, 113, 93, .08); color: var(--forest-900); font-size: .8rem; }

.alert-message { border-color: var(--danger); background: rgba(157, 64, 53, .09); color: var(--danger); }

.validation-messages { border-color: var(--amber-dark); background: rgba(229, 160, 68, .11); }

.validation-messages ul { margin: 0; padding-left: 1.2rem; }

.results-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(19rem, .88fr); gap: 1rem; }

.result-panel { border: 1px solid rgba(35, 83, 70, .17); background: rgba(255, 253, 247, .62); }

.primary-result { min-height: 265px; padding: clamp(1.4rem, 4vw, 2.8rem); background: var(--forest-900); color: var(--white); }

.result-label { color: var(--amber-dark); font-size: .6rem; font-weight: 800; letter-spacing: .16em; }

.primary-result .result-label { color: var(--amber); }

.runtime-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0 .65rem; }

.runtime-value strong { font-size: clamp(3.3rem, 7vw, 6.2rem); font-weight: 500; letter-spacing: -.09em; line-height: .9; }

.runtime-value > span { color: var(--amber); font-size: 1.8rem; }

.runtime-value small { margin-left: .15rem; color: rgba(255, 253, 247, .68); font-size: .8rem; }

.primary-result > p { margin-bottom: 2rem; color: rgba(255, 253, 247, .65); font-size: .77rem; }

.primary-result > p b { color: var(--white); }

.result-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); }

.result-metrics span, .result-metrics strong { display: block; }

.result-metrics span { color: rgba(255, 253, 247, .56); font-size: .62rem; }

.result-metrics strong { margin-top: .15rem; color: var(--amber); font-size: 1rem; }

.checks-panel { padding: 1.5rem; }

.checks-panel > .result-label { display: block; margin-bottom: 1.3rem; }

.check-line { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .7rem; min-height: 4.2rem; border-top: 1px solid var(--line); }

.check-icon { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: rgba(43, 121, 86, .14); color: var(--success); font-size: .8rem; font-weight: 900; }

.check-line.is-exceeds .check-icon { background: rgba(157, 64, 53, .13); color: var(--danger); }

.check-line > div span, .check-line > div strong { display: block; }

.check-line > div span { color: var(--muted); font-size: .72rem; }

.check-line > div strong { color: var(--forest-900); font-size: 1.05rem; }

.check-line em { color: var(--success); font-size: .66rem; font-style: normal; text-align: right; }

.check-line.is-exceeds em { color: var(--danger); }

.check-line.is-not-set em { color: var(--muted); }

.check-assumption { margin: 1.2rem 0 0; color: var(--muted); font-size: .67rem; }

.breakdown-panel { margin-top: 1rem; padding: 1.5rem; }

.breakdown-heading { align-items: end; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }

.breakdown-heading h3 { margin: .28rem 0 0; color: var(--forest-900); font-size: 1.4rem; }

.breakdown-unit { color: var(--muted); font-size: .68rem; }

.load-bars { display: grid; gap: .9rem; margin: 0; padding: 1.3rem 0 0; list-style: none; }

.load-bar-row { display: grid; grid-template-columns: minmax(8rem, .75fr) minmax(7rem, 2fr) minmax(4.5rem, .55fr); align-items: center; gap: .8rem; }

.load-bar-name { min-width: 0; overflow: hidden; color: var(--forest-900); font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.load-bar-track { display: block; height: .65rem; overflow: hidden; border-radius: 999px; background: var(--paper-deep); }

.load-bar-fill { display: block; width: var(--bar-size); height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--forest-700), var(--amber)); }

.load-bar-value { color: var(--muted); font-size: .73rem; text-align: right; }

.assumption-strip { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(169, 104, 36, .27); background: rgba(229, 160, 68, .09); }

.assumption-mark { display: grid; width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; place-items: center; border: 1px solid var(--amber-dark); border-radius: 50%; color: var(--amber-dark); font-size: .75rem; font-weight: 900; }

.assumption-strip p { margin: 0; color: var(--muted); font-size: .72rem; }

.saved-section { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(0, 1.5fr); gap: clamp(2rem, 7vw, 8rem); padding: 6.5rem 0 8rem; border-top: 1px solid var(--line); }

.saved-intro h2 { margin-bottom: 1.2rem; font-size: clamp(2.2rem, 4vw, 3.5rem); }

.saved-intro > p:last-child { max-width: 17rem; margin: 0; color: var(--muted); font-size: .8rem; }

.saved-workspace { min-width: 0; }

.save-box { padding: 1.4rem 1.5rem; border: 1px solid rgba(35, 83, 70, .17); background: rgba(255, 253, 247, .6); }

.save-box > label { display: block; margin-bottom: .55rem; color: var(--forest-900); font-size: .8rem; font-weight: 800; }

.save-row { display: flex; gap: .6rem; }

.save-row input { min-height: 46px; padding-right: .8rem; font-size: 1rem; font-weight: 500; }

.save-row .button { min-width: 5.5rem; border: 0; }

.save-hint { margin: .65rem 0 0; color: var(--muted); font-size: .67rem; }

.saved-list-box { margin-top: 1.3rem; }

.saved-list-heading { align-items: baseline; margin-bottom: .7rem; }

.saved-list-heading h3 { margin: 0; color: var(--forest-900); font-size: 1.15rem; }

.saved-list-heading > span, .saved-list-heading > div + span { color: var(--muted); font-size: .68rem; }

.saved-list { display: grid; gap: .45rem; }

.saved-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }

.saved-item-name { min-width: 0; overflow: hidden; color: var(--forest-900); font-size: .8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.saved-item-date { color: var(--muted); font-size: .63rem; white-space: nowrap; }

.saved-item button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--forest-700); font-size: .7rem; font-weight: 800; padding: .55rem .7rem; }

.saved-item button:hover { background: rgba(51, 113, 93, .1); }

.saved-item button[data-action="delete"] { color: var(--danger); }

.empty-state { margin: 0; padding: 1rem 0; color: var(--muted); font-size: .76rem; }

.comparison-box { grid-column: 1 / -1; margin-top: 1rem; padding: 1.5rem; border: 1px solid rgba(35, 83, 70, .17); background: rgba(255, 253, 247, .62); }

.comparison-box .saved-list-heading { align-items: end; }

.comparison-box .result-label { display: block; margin-bottom: .2rem; }

.comparison-grid { display: grid; grid-template-columns: minmax(9rem, 1.4fr) repeat(4, minmax(5rem, 1fr)); gap: .5rem; margin-top: 1rem; font-size: .72rem; }

.comparison-grid > div { min-width: 0; padding: .7rem .5rem; border-top: 1px solid var(--line); }

.comparison-grid .comparison-label { color: var(--muted); font-size: .62rem; font-weight: 800; }

.comparison-grid .comparison-name { overflow: hidden; color: var(--forest-900); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.comparison-grid strong { display: block; color: var(--forest-900); font-size: .88rem; }

.comparison-grid small { color: var(--muted); font-size: .6rem; }

.safety-section { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; align-items: start; margin-bottom: 5rem; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.safety-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid var(--amber-dark); border-radius: 50%; color: var(--amber-dark); font-size: 1.3rem; font-weight: 800; }

.safety-section h2 { margin: 0 0 .7rem; color: var(--forest-900); font-size: clamp(1.6rem, 3vw, 2.5rem); }

.safety-section p:last-child { max-width: 49rem; margin: 0; color: var(--muted); font-size: .82rem; }

.safety-section strong { color: var(--danger); }

.site-footer { width: min(1240px, calc(100% - 3rem)); min-height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .68rem; }

.site-footer span:first-child { color: var(--forest-900); font-weight: 800; }

.site-footer a { text-decoration: none; }

.not-found-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }

.not-found-page main { max-width: 35rem; }

.not-found-page h1 { margin: 0 0 1rem; color: var(--forest-900); font-size: clamp(2.5rem, 7vw, 5rem); }

.not-found-page main > p:not(.eyebrow) { margin-bottom: 2rem; color: var(--muted); }

[hidden] { display: none !important; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .hero-copy { padding-right: 2.3rem; }
  .hero-visual { min-height: 610px; }
  .section-heading { grid-template-columns: .7fr 1fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .workbench-layout { gap: 2.5rem; }
  .appliance-head, .appliance-row { grid-template-columns: minmax(8rem, 1.2fr) repeat(5, minmax(3.75rem, .65fr)) 2.1rem; gap: .4rem; }
  .appliance-row input { font-size: 1rem; }
}

@media (max-width: 760px) {
  .site-header, .hero, .planner-section, .results-section, .saved-section, .safety-section, .site-footer { width: min(100% - 2rem, 620px); }
  .site-header { min-height: 68px; }
  .site-nav { gap: .8rem; font-size: .72rem; }
  .hero { display: flex; flex-direction: column; border-radius: 2px 20px 2px 20px; }
  .hero-copy { min-height: auto; padding: 3.4rem 2rem 2.4rem; }
  h1 { font-size: clamp(2.55rem, 12vw, 4.5rem); }
  .hero-example { margin-top: 2.2rem; }
  .hero-visual { min-height: 23rem; }
  .hero-visual img { object-position: 62% center; }
  .visual-stamp { top: 1.2rem; right: 1.2rem; transform: scale(.8) rotate(9deg); transform-origin: top right; }
  .planner-section { padding-top: 5.5rem; }
  .section-heading { display: block; margin-bottom: 2.7rem; }
  .section-heading h2 { margin-bottom: 1.1rem; }
  .section-heading > p:last-child { max-width: 32rem; }
  .workbench-layout { display: flex; flex-direction: column; gap: 2.4rem; }
  .field-note { max-width: none; width: 100%; margin-top: 0; transform: rotate(-.5deg); }
  .form-grid-power, .form-grid-limits { grid-template-columns: 1fr; }
  .appliance-head { display: none; }
  .appliance-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 2.75rem; gap: .65rem; padding: .8rem; }
  .appliance-row label:first-child { grid-column: 1 / -1; }
  .appliance-row label > span { display: block; margin-bottom: .25rem; }
  .appliance-row label:nth-child(2), .appliance-row label:nth-child(3), .appliance-row label:nth-child(4), .appliance-row label:nth-child(5), .appliance-row label:nth-child(6) { grid-column: span 1; }
  .appliance-row .remove-appliance { grid-column: 3; grid-row: 2; align-self: end; }
  .results-section { padding-top: 4rem; }
  .results-section::before { margin-bottom: 3rem; }
  .results-heading { align-items: flex-start; flex-direction: column; }
  .results-grid { grid-template-columns: 1fr; }
  .primary-result { min-height: 0; }
  .saved-section { display: block; padding-top: 5rem; }
  .saved-intro { margin-bottom: 2.2rem; }
  .saved-intro > p:last-child { max-width: 32rem; }
  .comparison-box { margin-top: 2rem; overflow: hidden; }
  .comparison-grid { min-width: 31rem; }
  .comparison-box { overflow-x: auto; }
  .safety-section { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .site-footer { min-height: 100px; flex-wrap: wrap; align-content: center; }
}

@media (max-width: 440px) {
  .site-header, .hero, .planner-section, .results-section, .saved-section, .safety-section, .site-footer { width: calc(100% - 1.25rem); }
  .site-header { gap: .5rem; }
  .brand strong { font-size: .78rem; }
  .brand small { font-size: .44rem; }
  .brand-mark { width: 1.8rem; height: 1.8rem; font-size: 1.2rem; }
  .site-nav { gap: .5rem; font-size: .64rem; }
  .hero-copy { padding: 2.8rem 1.25rem 2rem; }
  .hero-lede { font-size: .86rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 18rem; }
  .image-caption { right: 1.1rem; bottom: 1.1rem; }
  .image-caption strong { font-size: .95rem; }
  .form-section-heading-appliances { align-items: flex-start; flex-wrap: wrap; }
  .form-section-heading-appliances .add-appliance { margin-left: 2.9rem; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .button-wide { width: 100%; }
  .save-row { align-items: stretch; flex-direction: column; }
  .save-row .button { width: 100%; }
  .saved-item { grid-template-columns: minmax(0, 1fr) auto; }
  .saved-item-date { display: none; }
  .load-bar-row { grid-template-columns: minmax(6rem, .75fr) minmax(5rem, 1.2fr) minmax(4.4rem, .55fr); gap: .45rem; }
  .load-bar-name, .load-bar-value { font-size: .68rem; }
  .safety-section { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  :root { background: white; }
  body { background: white; color: #111; }
  .site-header, .hero, .field-note, .form-actions, .saved-section, .site-footer, .print-button, .safety-section, .skip-link, .results-topline .live-badge { display: none !important; }
  .planner-section { display: none; }
  .results-section { width: 100%; padding: 1rem 0; }
  .results-section::before { display: none; }
  .result-panel, .assumption-strip { break-inside: avoid; border-color: #bbb; }
  .primary-result { background: #173b32 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .breakdown-panel { margin-top: 1rem; }
  .check-assumption { color: #333; }
}