:root {
  --ink: #111a24;
  --ink-soft: #1b2733;
  --paper: #f4f1e8;
  --paper-strong: #fffdf7;
  --line: #d8d4c8;
  --muted: #6f746f;
  --lime: #d8ff63;
  --lime-dark: #9fc82d;
  --coral: #ff7a62;
  --sky: #6ed9e6;
  --kill: #ff735f;
  --loss: #6a9fff;
  --build: #84bf4b;
  --shadow: 0 18px 50px rgba(17, 26, 36, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
}
button, input, select { font: inherit; }
button { color: inherit; }
.page-shell { overflow: hidden; }
[hidden] { display: none !important; }

.app-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(160px, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 82px;
  padding: 10px max(4vw, 24px);
  border-bottom: 1px solid #2b3742;
  color: white;
  background: #0d151e;
}
.app-brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  width: max-content;
  color: white;
  text-decoration: none;
}
.app-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(216,255,99,.45);
  border-radius: 13px;
  color: var(--lime);
  background: rgba(216,255,99,.08);
  font-family: serif;
  font-size: 22px;
  font-weight: 900;
}
.app-brand strong, .app-brand small { display: block; }
.app-brand strong { font-size: 15px; letter-spacing: .04em; }
.app-brand small { margin-top: 4px; color: #71808a; font: 700 8px/1 Arial, sans-serif; letter-spacing: .14em; }
.tool-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.tool-tab {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  color: #82909a;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: color .2s, background .2s, box-shadow .2s;
}
.tool-tab span { margin-right: 7px; color: #53616b; font: 800 9px/1 Arial, sans-serif; }
.tool-tab:hover { color: white; }
.tool-tab.is-active { color: var(--ink); background: var(--lime); box-shadow: 0 6px 18px rgba(216,255,99,.12); }
.tool-tab.is-active span { color: #66820d; }
.save-indicator {
  justify-self: end;
  color: #788690;
  font-size: 10px;
  font-weight: 700;
}
.save-indicator i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #77bd45;
  box-shadow: 0 0 0 4px rgba(119,189,69,.08);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
  min-height: 560px;
  padding: 88px max(6vw, 28px) 100px;
  color: white;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero::before {
  content: "10×";
  position: absolute;
  right: -0.05em;
  top: -0.18em;
  color: rgba(255, 255, 255, 0.025);
  font: 900 clamp(220px, 29vw, 440px)/1 Arial, sans-serif;
  letter-spacing: -0.09em;
  pointer-events: none;
}
.hero-copy, .formula-card { position: relative; z-index: 1; }
.eyebrow, .section-kicker, .formula-label {
  margin: 0 0 16px;
  font: 700 12px/1.2 Arial, sans-serif;
  letter-spacing: .16em;
}
.eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--lime);
}
.eyebrow span { display: inline-block; width: 34px; height: 2px; background: currentColor; }
.hero h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.065em;
}
.hero h1 em { color: var(--lime); font-style: normal; white-space: nowrap; }
.hero-lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: #c8d0d5;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.9;
}
.formula-card {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
}
.formula-label { color: #91a0aa; }
.formula-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.formula-row div { min-width: 0; }
.formula-row strong, .formula-row span { display: block; }
.formula-row strong { margin-bottom: 5px; font-size: clamp(18px, 2vw, 24px); }
.formula-row span {
  color: var(--lime);
  font: 700 clamp(22px, 2.6vw, 32px)/1.2 Arial, sans-serif;
  white-space: nowrap;
}
.formula-row b { color: #697984; font-size: 20px; }
.formula-answer {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 20px;
  font-weight: 800;
}
.formula-answer span { color: var(--lime); font: 800 30px/1 Arial, sans-serif; }
.formula-answer b { font-size: 20px; }
.mode-toggle {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(216,255,99,.35);
  border-radius: 13px;
  color: white;
  background: rgba(216,255,99,.07);
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s, transform .2s;
}
.mode-toggle:hover { border-color: var(--lime); background: rgba(216,255,99,.12); transform: translateY(-1px); }
.mode-toggle-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--lime);
  font-size: 19px;
}
.mode-toggle small, .mode-toggle strong { display: block; }
.mode-toggle small { margin-bottom: 4px; color: #8e9ba3; font-size: 9px; letter-spacing: .12em; }
.mode-toggle strong { font-size: 13px; }
.mode-toggle.is-build-mode { border-color: rgba(110,217,230,.55); background: rgba(110,217,230,.08); }
.mode-toggle.is-build-mode .mode-toggle-icon { background: var(--sky); }
html[data-contribution-mode="build"] .formula-row span,
html[data-contribution-mode="build"] .formula-answer span { color: var(--sky); }

main { position: relative; }
.section-block, .roadmap-section, .threshold-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.section-block { padding: 104px 0; }
.section-heading {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 42px;
}
.step-number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 700 15px/1 Arial, sans-serif;
}
.section-kicker { margin-bottom: 9px; color: var(--coral); }
.section-heading h2, .roadmap-heading h2, .threshold-intro h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.section-heading p:last-child, .roadmap-heading > p, .threshold-intro > p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.8;
}
.current-grid, .allocation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 24px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.input-panel { padding: 10px 34px; }
.metric-input {
  --metric: var(--kill);
  display: grid;
  grid-template-columns: 44px minmax(94px, .8fr) minmax(190px, 1.35fr);
  gap: 14px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.metric-input.metric-loss, .metric-loss { --metric: var(--loss); }
.metric-input.metric-build, .metric-build { --metric: var(--build); }
.metric-kill { --metric: var(--kill); }
.metric-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--metric) 26%, white);
  font: 800 13px/1 Arial, sans-serif;
}
.metric-input label { font-weight: 800; }
.metric-input label span { color: var(--muted); font-size: 12px; font-weight: 500; }
.metric-input small {
  grid-column: 2 / -1;
  margin-top: -8px;
  color: var(--muted);
  font-size: 11px;
}
.number-field, .percent-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  transition: border-color .2s, box-shadow .2s;
}
.number-field:focus-within, .percent-field:focus-within {
  border-color: var(--metric, var(--ink));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric, var(--ink)) 16%, transparent);
}
.number-field input, .percent-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 800;
}
.number-field input { padding: 14px 8px 14px 16px; font-size: 20px; }
.number-field > span, .percent-field > span {
  padding-right: 13px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.input-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 24px;
}
.button, .text-button, .origin-button, .target-button { border: 0; cursor: pointer; }
.button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}
.button-secondary { background: var(--ink); color: white; }
.button-secondary:hover { background: #293845; }
.text-button {
  padding: 8px 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.status-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  color: white;
  border-color: var(--ink);
  background-color: var(--ink);
  background-image: radial-gradient(circle at 85% 5%, rgba(216,255,99,.16), transparent 36%);
}
.status-card::after {
  content: "×";
  position: absolute;
  right: -14px;
  bottom: -80px;
  color: rgba(255,255,255,.035);
  font: 900 250px/1 Arial, sans-serif;
  pointer-events: none;
}
.status-topline, .contribution-total, .progress-copy, .progress-scale, .result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-topline { color: #a9b4bb; font-size: 12px; font-weight: 700; }
.status-badge {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: var(--lime);
  background: rgba(255,255,255,.06);
  font-size: 11px;
}
.multiplier-display { display: flex; gap: 9px; align-items: flex-end; margin: 24px 0; }
.multiplier-display strong {
  font: 900 clamp(90px, 12vw, 150px)/.78 Arial, sans-serif;
  letter-spacing: -.08em;
}
.multiplier-display span { padding-bottom: 8px; color: var(--lime); font-size: 26px; font-weight: 900; }
.contribution-total {
  position: relative;
  z-index: 1;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.contribution-total span { color: #a9b4bb; font-size: 12px; }
.contribution-total strong { font: 800 24px/1 Arial, sans-serif; }
.progress-area { position: relative; z-index: 1; margin-top: 30px; }
.progress-copy { margin-bottom: 12px; font-size: 12px; }
.progress-copy span { color: #a9b4bb; }
.progress-copy strong { color: var(--lime); }
.progress-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
}
.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
  transition: width .35s ease;
}
.progress-scale { margin-top: 8px; color: #77858f; font: 600 10px/1 Arial, sans-serif; }

.roadmap-section {
  width: auto;
  max-width: none;
  padding: 86px max(6vw, 24px) 94px;
  color: white;
  background: var(--ink-soft);
}
.roadmap-heading {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: space-between;
  width: min(1320px, 100%);
  margin: 0 auto 36px;
}
.roadmap-heading-side { width: min(620px, 100%); }
.roadmap-heading-side > p { margin: 0 0 13px; color: #9eabb2; }
.roadmap-build-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; }
.roadmap-build-level { display: flex; gap: 8px; align-items: center; min-height: 38px; padding: 0 7px 0 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #93a1aa; background: rgba(255,255,255,.045); font-size: 9px; font-weight: 800; white-space: nowrap; }
.roadmap-build-level select { min-height: 28px; padding: 0 25px 0 8px; border: 0; border-radius: 7px; outline: 0; color: white; background: #26333d; font-family: inherit; font-size: 10px; font-weight: 800; }
.roadmap-build-level select:focus-visible { box-shadow: 0 0 0 2px var(--sky); }
.roadmap-build-decree { position: relative; display: flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #a2afb6; background: rgba(255,255,255,.045); cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.roadmap-build-decree input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.roadmap-build-decree span { display: flex; gap: 6px; align-items: baseline; }
.roadmap-build-decree b { color: inherit; font-size: 10px; }
.roadmap-build-decree small { color: #74838c; font-size: 8px; font-weight: 800; }
.roadmap-build-decree.is-active { border-color: rgba(216,255,99,.65); color: var(--lime); background: rgba(216,255,99,.1); box-shadow: inset 0 0 0 1px rgba(216,255,99,.08); }
.roadmap-build-decree.is-active small { color: #b7cf6c; }
.roadmap-build-decree:focus-within { outline: 2px solid var(--sky); outline-offset: 2px; }
.roadmap-build-effective { display: grid; place-items: center; min-width: 72px; padding: 0 10px; border-radius: 10px; color: var(--sky); background: rgba(110,217,230,.09); font: 900 10px/1 Arial, sans-serif; white-space: nowrap; }
.roadmap-table {
  overflow: hidden;
  width: min(1320px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
}
.roadmap-header, .roadmap-row {
  display: grid;
  grid-template-columns: .6fr 1fr 1fr 1fr 1fr 1.45fr;
  align-items: center;
}
.roadmap-header {
  min-height: 48px;
  color: #86949d;
  background: rgba(255,255,255,.035);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.roadmap-header span, .roadmap-row > div { padding: 0 20px; }
.roadmap-header .roadmap-build-cost-header { line-height: 1.35; }
.roadmap-build-cost-header small { display: block; margin-top: 2px; color: #64747e; font-size: 7px; letter-spacing: .02em; }
.roadmap-row {
  position: relative;
  min-height: 84px;
  border-top: 1px solid rgba(255,255,255,.09);
  transition: background .2s;
}
.roadmap-row:hover { background: rgba(255,255,255,.035); }
.roadmap-row.is-next { background: rgba(216,255,99,.065); }
.roadmap-row.is-next::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--lime);
}
.roadmap-target { display: flex; gap: 8px; align-items: center; }
.roadmap-target strong { font: 900 25px/1 Arial, sans-serif; }
.next-tag {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--lime);
  font-size: 8px;
  font-weight: 900;
}
.roadmap-threshold { color: #9eabb2; font: 700 14px/1.2 Arial, sans-serif; }
.roadmap-value {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}
.roadmap-value::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--metric);
}
.roadmap-value-main {
  display: flex;
  grid-column: 2;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  white-space: nowrap;
}
.roadmap-value strong { font: 800 17px/1.1 Arial, sans-serif; }
.roadmap-value small { color: #788790; font-size: 10px; }
.roadmap-total {
  grid-column: 2;
  margin-top: 5px;
  color: #687781;
  font: 600 9px/1.2 Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
}
.roadmap-total b { color: #a9b5bc; font-weight: 700; }
.roadmap-build-cost { display: grid; gap: 6px; align-content: center; min-width: 0; }
.roadmap-build-count { display: flex; gap: 4px; align-items: baseline; white-space: nowrap; }
.roadmap-build-count strong { color: var(--lime); font: 900 18px/1 Arial, sans-serif; }
.roadmap-build-count small { color: #a9b5bc; font-size: 9px; font-weight: 800; }
.roadmap-build-material { display: flex; gap: 10px; flex-wrap: wrap; color: #89979f; font-size: 8px; line-height: 1.2; }
.roadmap-build-material b { font-weight: 800; white-space: nowrap; }
.roadmap-empty { padding: 44px 24px; color: #acb6bc; text-align: center; }
.roadmap-empty strong, .roadmap-empty span { display: block; }
.roadmap-empty strong { margin-bottom: 9px; color: var(--lime); font-size: 22px; }

.allocation-section { padding-top: 110px; }
.allocation-controls { padding: 32px; }
.control-group + .control-group { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--line); }
.control-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.control-index {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: white;
  background: var(--ink);
  font: 800 12px/1 Arial, sans-serif;
}
.control-heading strong, .control-heading small { display: block; }
.control-heading strong { font-size: 14px; }
.control-heading small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.target-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.target-button {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  font: 800 13px/1 Arial, sans-serif;
  transition: .18s ease;
}
.target-button:hover { border-color: var(--ink); }
.target-button.is-active {
  color: var(--ink);
  border-color: var(--lime-dark);
  background: var(--lime);
  box-shadow: 0 5px 15px rgba(159,200,45,.2);
}
.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  border-radius: 13px;
  background: #e9e6dc;
}
.origin-button {
  height: 40px;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}
.origin-button.is-active { color: var(--ink); background: white; box-shadow: 0 3px 10px rgba(17,26,36,.08); }
.allocation-heading { align-items: flex-start; }
.allocation-total {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: #ece9df;
  font-size: 10px;
}
.allocation-total b { color: var(--ink); font-size: 12px; }
.allocation-bar {
  display: flex;
  overflow: hidden;
  height: 10px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: var(--line);
}
.allocation-bar span { display: block; height: 100%; transition: width .25s ease; }
.bar-kill { background: var(--kill); }
.bar-loss { background: var(--loss); }
.bar-build { background: var(--build); }
.slider-list { display: grid; gap: 18px; }
.slider-row {
  display: grid;
  grid-template-columns: 62px 1fr 76px;
  gap: 12px;
  align-items: center;
}
.slider-row label { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 800; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--metric); }
.slider-row > input[type="range"] { width: 100%; accent-color: var(--metric); cursor: pointer; }
.percent-field input { padding: 9px 4px 9px 10px; font-size: 13px; }

.allocation-results {
  overflow: hidden;
  padding: 32px;
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.result-summary { gap: 20px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
.result-summary > div:first-child span, .result-summary > div:first-child strong,
.remaining-contribution span, .remaining-contribution strong { display: block; }
.result-summary > div:first-child span, .remaining-contribution span {
  margin-bottom: 7px;
  color: #8f9da6;
  font-size: 10px;
}
.result-summary > div:first-child strong { font-size: 19px; }
.remaining-contribution { text-align: right; }
.remaining-contribution strong { color: var(--lime); font: 800 22px/1 Arial, sans-serif; }
.mix-results { display: grid; gap: 10px; margin-top: 22px; }
.mix-result {
  --metric: var(--kill);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 20px;
  align-items: end;
  padding: 18px;
  border-left: 3px solid var(--metric);
  border-radius: 6px 14px 14px 6px;
  background: rgba(255,255,255,.055);
}
.mix-result.metric-loss { --metric: var(--loss); }
.mix-result.metric-build { --metric: var(--build); }
.mix-label { grid-column: 1 / -1; margin-bottom: 5px; color: #94a2aa; font-size: 10px; }
.mix-label b { color: var(--metric); }
.mix-result > strong { font: 800 26px/1.05 Arial, sans-serif; }
.mix-result > small { grid-column: 1; color: #94a2aa; font-size: 10px; }
.contribution-chip {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  padding: 6px 9px;
  border-radius: 999px;
  color: #bcc6cb;
  background: rgba(255,255,255,.07);
  font-size: 9px;
}
.result-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; color: #8f9da6; }
.result-note > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #687680;
  border-radius: 50%;
  font: 700 10px/1 Georgia, serif;
}
.result-note p { margin: 2px 0 0; font-size: 10px; line-height: 1.7; }
.result-note.is-achieved { color: var(--lime); }

.threshold-section {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
  padding: 0 0 112px;
}
.threshold-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.threshold-item {
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.36);
}
.threshold-item span, .threshold-item strong { display: block; }
.threshold-item span { margin-bottom: 10px; color: var(--muted); font: 700 11px/1 Arial, sans-serif; }
.threshold-item strong { font: 800 clamp(14px, 1.4vw, 18px)/1 Arial, sans-serif; }
footer {
  display: flex;
  justify-content: space-between;
  padding: 26px max(6vw, 24px);
  color: #8c999f;
  background: var(--ink);
  font-size: 10px;
}
footer p { margin: 0; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.charge-tool { min-height: calc(100vh - 82px); background: var(--paper); }
.charge-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(42px, 8vw, 120px);
  align-items: center;
  min-height: 430px;
  padding: 72px max(7vw, 28px) 78px;
  overflow: hidden;
  color: white;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 15% 18%, rgba(255,122,98,.12), transparent 30%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.charge-hero::after {
  content: "40%";
  position: absolute;
  right: -.04em;
  bottom: -.25em;
  color: rgba(255,255,255,.025);
  font: 900 clamp(180px, 27vw, 400px)/1 Arial, sans-serif;
  letter-spacing: -.09em;
  pointer-events: none;
}
.charge-hero > * { position: relative; z-index: 1; }
.charge-hero h1 {
  margin: 0;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.06em;
}
.charge-hero h1 em { color: var(--coral); font-style: normal; }
.charge-hero > div > p:last-child {
  max-width: 650px;
  margin: 24px 0 0;
  color: #b7c0c6;
  font-size: 15px;
  line-height: 1.9;
}
.charge-rule-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 24px;
  align-items: center;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
}
.charge-rule-label {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  color: #84929b;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .16em;
}
.charge-rule-card > strong { color: var(--coral); font: 900 clamp(70px, 8vw, 112px)/.8 Arial, sans-serif; letter-spacing: -.07em; }
.charge-rule-card > strong small { font-size: .34em; }
.charge-rule-card p { margin: 0; color: #abb6bc; font-size: 12px; line-height: 1.8; }
.charge-rule-card p b { color: white; font-size: 16px; }
.charge-content { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 92px 0 110px; }
.charge-section-heading {
  display: flex;
  gap: 30px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 38px;
}
.charge-section-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; }
.charge-reset-button { flex: 0 0 auto; }
.charge-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.power-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}
.power-panel-header {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 120px;
  padding: 25px 28px;
  color: white;
  background: var(--ink);
}
.enemy-panel { --power-accent: var(--coral); }
.ally-panel { --power-accent: var(--sky); }
.power-side-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--power-accent) 50%, transparent);
  border-radius: 15px;
  color: var(--power-accent);
  background: color-mix(in srgb, var(--power-accent) 10%, transparent);
  font-size: 17px;
  font-weight: 900;
}
.power-panel-header p { margin: 0 0 6px; color: var(--power-accent); font: 800 9px/1 Arial, sans-serif; letter-spacing: .15em; }
.power-panel-header h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.power-panel-header small { display: block; margin-top: 6px; color: #83919a; font-size: 10px; line-height: 1.5; }
.power-formula {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #edeae1;
  font-size: 10px;
  font-weight: 700;
}
.power-formula b { padding: 5px 8px; border-radius: 7px; color: var(--ink); background: var(--power-accent); font: 800 12px/1 Arial, sans-serif; }
.power-list { padding: 5px 28px 12px; }
.power-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px minmax(115px, .72fr);
  gap: 10px;
  align-items: center;
  min-height: 82px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.power-row:last-child { border-bottom: 0; }
.power-number { color: var(--power-accent); font: 800 10px/1 Arial, sans-serif; }
.power-row > label { display: none; }
.power-input-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}
.power-input-wrap:focus-within { border-color: var(--power-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--power-accent) 14%, transparent); }
.power-input-wrap input {
  width: 100%;
  min-width: 0;
  padding: 12px 5px 12px 13px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: 800 16px/1 Arial, sans-serif;
}
.power-input-wrap span { padding-right: 10px; color: #9aa09d; font-size: 8px; }
.power-arrow { color: #b6b4ac; font-size: 16px; text-align: center; }
.power-result { min-width: 0; }
.power-result small, .power-result strong { display: block; }
.power-result small { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.power-result strong { overflow: hidden; color: var(--ink); font: 800 clamp(15px, 1.5vw, 20px)/1 Arial, sans-serif; text-overflow: ellipsis; }
.charge-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.4);
}
.charge-note span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #a3aaa5;
  border-radius: 50%;
  font: 700 11px/1 Georgia, serif;
}
.charge-note p { margin: 1px 0 0; font-size: 10px; line-height: 1.8; }

.skill-tool { min-height: calc(100vh - 82px); background: var(--paper); }
.skill-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(42px, 8vw, 120px);
  align-items: center;
  min-height: 450px;
  padding: 72px max(7vw, 28px) 78px;
  overflow: hidden;
  color: white;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 84% 20%, rgba(110,217,230,.13), transparent 28%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.skill-hero::after {
  content: "30";
  position: absolute;
  right: -.02em;
  bottom: -.3em;
  color: rgba(255,255,255,.025);
  font: 900 clamp(220px, 31vw, 450px)/1 Arial, sans-serif;
  letter-spacing: -.1em;
  pointer-events: none;
}
.skill-hero > * { position: relative; z-index: 1; }
.skill-hero h1 {
  margin: 0;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.06em;
}
.skill-hero h1 em { color: var(--sky); font-style: normal; }
.skill-hero > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: #b7c0c6;
  font-size: 15px;
  line-height: 1.9;
}
.skill-hero-caution { display: block; margin-top: 7px; color: #ff9a86; font-size: 12px; font-weight: 800; line-height: 1.6; }
.skill-milestone-card {
  padding: 30px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
}
.skill-rule-label {
  display: block;
  margin-bottom: 24px;
  color: #84929b;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .16em;
}
.milestone-pair { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 22px; align-items: center; }
.milestone-pair i { width: 1px; height: 64px; background: rgba(255,255,255,.13); }
.milestone-pair div { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.milestone-pair strong { color: var(--sky); font: 900 clamp(58px, 7vw, 88px)/.8 Arial, sans-serif; letter-spacing: -.07em; }
.milestone-pair div:last-child strong { color: var(--lime); }
.milestone-pair span { padding-bottom: 3px; color: #9da9b0; font-size: 10px; line-height: 1.5; }
.skill-milestone-card > p { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: #8f9ca4; font-size: 10px; }
.skill-milestone-card > p b { color: white; font-size: 12px; }
.skill-content { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 92px 0 110px; }
.skill-overview { margin-bottom: 104px; }
.skill-section-heading { display: flex; gap: 30px; align-items: flex-end; justify-content: space-between; margin-bottom: 38px; }
.skill-section-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; }
.skill-section-heading > div:first-child > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.skill-overview-actions { display: flex; gap: 20px; align-items: center; flex: 0 0 auto; }
.skill-summary-grid { display: grid; grid-template-columns: 1.2fr 1.35fr repeat(3, .9fr); gap: 14px; margin-bottom: 24px; }
.skill-summary-card {
  position: relative;
  min-height: 145px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper-strong);
  box-shadow: 0 10px 30px rgba(17,26,36,.06);
}
.skill-summary-card span, .skill-summary-card strong, .skill-summary-card small { display: block; }
.skill-summary-card > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.skill-summary-card > strong { margin-top: 22px; font: 900 clamp(30px, 4vw, 45px)/.8 Arial, sans-serif; letter-spacing: -.04em; }
.skill-summary-card > small { position: absolute; right: 22px; bottom: 24px; color: #9da29e; font-size: 10px; }
.skill-summary-card.is-primary { color: white; border-color: var(--ink); background: var(--ink); }
.skill-summary-card.is-primary::after { content: "FRAG"; position: absolute; right: -8px; bottom: -9px; color: rgba(255,255,255,.035); font: 900 54px/1 Arial, sans-serif; }
.skill-summary-card.is-primary > span { color: #98a5ad; }
.skill-summary-card.is-primary > strong { color: var(--lime); }
.skill-summary-card.is-primary > small { color: #80909a; }
.skill-summary-card.is-silver { color: white; border-color: #67747b; background: linear-gradient(145deg, #69757b, #3e4a51); }
.skill-summary-card.is-silver::after { content: "SILVER"; position: absolute; right: -7px; bottom: -8px; color: rgba(255,255,255,.045); font: 900 44px/1 Arial, sans-serif; }
.skill-summary-card.is-silver > span { color: #d7dddf; }
.skill-summary-card.is-silver > strong { color: #f2f4f4; font-size: clamp(24px, 3vw, 36px); }
.skill-summary-card.is-silver > small { color: #c5cdcf; }
.skill-priority-resources { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 2fr); min-height: 118px; margin-bottom: 24px; overflow: hidden; border-color: #deb7aa; border-radius: 20px; box-shadow: none; }
.skill-priority-resources > header { display: flex; gap: 13px; align-items: center; padding: 20px 24px; color: white; background: linear-gradient(135deg, #cf5b47, #a94336); }
.skill-priority-resources > header > span { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; color: #fff1a9; background: rgba(255,255,255,.09); font-size: 20px; }
.skill-priority-resources > header p { margin: 0 0 6px; color: #ffd3c7; font: 800 8px/1 Arial, sans-serif; letter-spacing: .15em; }
.skill-priority-resources > header h3 { margin: 0; font-size: 14px; line-height: 1.35; }
.skill-priority-resource-stats { display: grid; grid-template-columns: .85fr 1fr 1.25fr; background: #fffaf7; }
.skill-priority-resource-stats article { position: relative; min-width: 0; padding: 20px 22px; border-left: 1px solid #ead8d1; }
.skill-priority-resource-stats span, .skill-priority-resource-stats strong, .skill-priority-resource-stats small { display: block; }
.skill-priority-resource-stats span { color: #98776e; font-size: 9px; font-weight: 800; }
.skill-priority-resource-stats strong { overflow: hidden; margin-top: 14px; color: var(--ink); font: 900 clamp(24px, 3vw, 34px)/.9 Arial, sans-serif; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.skill-priority-resource-stats small { position: absolute; right: 20px; bottom: 18px; color: #aa8d85; font-size: 8px; }
.skill-priority-resource-stats small b { color: #c55242; font-size: 11px; }
.skill-priority-resource-stats article:nth-child(2) strong { color: #c55242; }
.skill-priority-resource-stats article:nth-child(3) strong { font-size: clamp(21px, 2.5vw, 30px); }
.skill-priority-resource-list { grid-column: 1 / -1; padding: 14px 18px 17px; border-top: 1px solid #ead8d1; background: #fffdfb; }
.skill-priority-list-label { margin-bottom: 10px; color: #98776e; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.skill-priority-list-items { display: flex; gap: 7px; flex-wrap: wrap; }
.skill-priority-list-items article { display: grid; flex: 0 0 clamp(240px, calc(var(--plan-count) * 89px + 22px), 100%); grid-template-columns: minmax(38px, 1fr) auto auto; gap: 7px 9px; align-items: center; min-width: 0; max-width: 100%; padding: 10px 11px; border: 1px solid #eadfd9; border-radius: 9px; background: #fff8f4; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.skill-priority-list-items article.is-fragments-covered { border-color: #38a760; background: linear-gradient(145deg, #effff3, #d8f5df); box-shadow: 0 0 0 2px rgba(56, 167, 96, .17), 0 6px 16px rgba(35, 116, 65, .12); }
.skill-priority-list-items article.is-fragments-covered > strong,
.skill-priority-list-items article.is-fragments-covered > .skill-priority-remaining { color: #16703a; }
.skill-priority-list-items strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.skill-priority-list-items b { color: #c55242; font: 900 16px/1 Arial, sans-serif; white-space: nowrap; }
.skill-priority-list-items b small { margin-left: 3px; color: #a78b83; font: 800 7px/1 sans-serif; }
.skill-priority-owned { display: inline-flex; gap: 3px; align-items: center; color: #90776f; font-size: 8px; font-weight: 900; white-space: nowrap; }
.skill-priority-owned input { width: 58px; height: 27px; padding: 0 5px; border: 1px solid #dccbc4; border-radius: 6px; outline: 0; color: var(--ink); background: white; font: 800 11px/1 Arial, sans-serif; text-align: right; }
.skill-priority-owned input:focus { border-color: #c55242; box-shadow: 0 0 0 2px rgba(197, 82, 66, .12); }
.skill-priority-owned em { color: #a78b83; font-size: 7px; font-style: normal; }
.skill-priority-remaining { display: inline-flex; gap: 3px; align-items: baseline; }
.skill-priority-list-items .skill-priority-remaining small { margin: 0; }
.skill-priority-plan-list { display: flex; grid-column: 1 / -1; gap: 5px; min-width: 0; }
.skill-priority-plan { display: inline-flex; flex: 0 0 84px; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 8px; border: 1px solid #e5c7bd; border-radius: 7px; color: inherit; background: white; cursor: pointer; font-family: inherit; text-align: left; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.skill-priority-plan.is-fragments-covered { border-color: #38a760; background: #ddf7e4; box-shadow: 0 0 0 2px rgba(56, 167, 96, .16); }
.skill-priority-plan.is-fragments-covered > strong,
.skill-priority-plan.is-fragments-covered > small,
.skill-priority-plan.is-fragments-covered > b { color: #16703a; }
.skill-priority-plan:hover { border-color: #d45e45; box-shadow: 0 4px 10px rgba(197, 82, 66, .12); transform: translateY(-1px); }
.skill-priority-plan:focus-visible { outline: 2px solid #d45e45; outline-offset: 2px; }
.skill-priority-plan > strong { max-width: 100%; color: var(--ink); font-size: 9px; line-height: 1.15; }
.skill-priority-plan > small { color: #8f776f; font-size: 8px; font-weight: 800; line-height: 1.15; }
.skill-priority-plan > b { color: #c55242; font: 900 10px/1.15 Arial, sans-serif; }
.skill-priority-tao { grid-column: 1 / -1; color: #665751; font-size: 10px; font-weight: 700; line-height: 1.65; }
.skill-priority-tao em { display: inline-block; margin-right: 6px; padding: 3px 6px; border-radius: 5px; color: white; background: #927168; font-size: 8px; font-style: normal; font-weight: 900; vertical-align: 1px; }
.skill-priority-list-empty { margin: 0; padding: 4px; color: #9b847d; font-size: 9px; text-align: center; }
.skill-priority-return { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; gap: 9px; align-items: center; min-height: 46px; padding: 0 17px 0 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: white; background: #b94b3b; box-shadow: 0 10px 28px rgba(65, 27, 21, .28); text-decoration: none; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.skill-priority-return span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff1a9; background: rgba(255,255,255,.12); font-size: 14px; }
.skill-priority-return strong { font-size: 11px; letter-spacing: .02em; }
.skill-priority-return:hover { background: #a63f32; box-shadow: 0 13px 32px rgba(65, 27, 21, .34); transform: translateY(-2px); }
.skill-priority-return:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.skill-balance-summary { margin-bottom: 24px; overflow: hidden; border-radius: 20px; box-shadow: none; }
.skill-balance-head { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 17px 24px; color: white; background: var(--ink); }
.skill-balance-head p { margin: 0 0 5px; color: var(--sky); font: 800 9px/1 Arial, sans-serif; letter-spacing: .15em; }
.skill-balance-head h3 { margin: 0; font-size: 17px; }
.skill-balance-head > span { color: #95a2aa; font-size: 10px; font-weight: 800; }
.skill-balance-head > span b { margin: 0 3px 0 6px; color: var(--lime); font: 900 22px/1 Arial, sans-serif; }
.skill-balance-groups { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.skill-balance-group { min-width: 0; padding: 18px 20px 19px; border-right: 1px solid var(--line); }
.skill-balance-group:last-child { border-right: 0; }
.skill-balance-group h4 { margin: 0 0 13px; color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.skill-balance-items { display: flex; gap: 8px; }
.skill-balance-items article { flex: 1; min-width: 0; padding: 10px; border: 1px solid #e0ddd4; border-radius: 10px; background: #f8f7f2; }
.skill-balance-items article > div { display: flex; gap: 5px; align-items: baseline; justify-content: space-between; }
.skill-balance-items span { overflow: hidden; color: #59686f; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.skill-balance-items strong { color: var(--ink); font: 900 19px/1 Arial, sans-serif; }
.skill-balance-items strong small { margin-left: 2px; color: #899399; font: 800 7px/1 sans-serif; }
.skill-balance-items i { display: block; height: 4px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #e1e5e3; }
.skill-balance-items i b { display: block; width: var(--share); height: 100%; border-radius: inherit; background: #d45e45; }
.skill-balance-group:nth-child(2) .skill-balance-items i b { background: #42a9b5; }
.skill-balance-group:nth-child(3) .skill-balance-items i b { background: #8dbc45; }
.skill-balance-note { margin: 0; padding: 10px 20px; border-top: 1px solid var(--line); color: #899399; background: #fbfaf6; font-size: 8px; text-align: right; }
.resource-breakdown { overflow: hidden; border-radius: 20px; box-shadow: none; }
.resource-breakdown > header { display: flex; align-items: center; justify-content: space-between; min-height: 88px; padding: 20px 28px; color: white; background: var(--ink); }
.resource-breakdown > header p { margin: 0 0 5px; color: var(--sky); font: 800 9px/1 Arial, sans-serif; letter-spacing: .15em; }
.resource-breakdown > header h3 { margin: 0; font-size: 17px; }
.resource-breakdown > header > span { color: #86949c; font-size: 9px; }
.resource-breakdown-list { display: grid; grid-template-columns: repeat(2, 1fr); }
.resource-breakdown-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 5px 12px; align-items: center; min-height: 86px; padding: 14px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.resource-breakdown-row:nth-child(2n) { border-right: 0; }
.resource-type { grid-row: 1 / span 2; padding: 6px 8px; border-radius: 7px; color: #486270; background: #dff4f6; font-size: 8px; font-weight: 800; text-align: center; }
.resource-breakdown-row > strong { font-size: 13px; }
.resource-breakdown-row > strong small { margin-left: 6px; color: #7d8a8f; font-size: 8px; }
.resource-plans { grid-column: 2; color: var(--muted); font-size: 9px; }
.resource-totals { display: grid; grid-column: 3; grid-row: 1 / span 2; gap: 7px; min-width: 148px; text-align: right; }
.resource-totals b { font: 900 18px/1 Arial, sans-serif; }
.resource-totals b + b { color: #647278; font-size: 14px; }
.resource-totals b small { margin-left: 4px; color: var(--muted); font-size: 8px; }
.resource-breakdown-empty { grid-column: 1 / -1; padding: 34px 24px; color: var(--muted); font-size: 11px; text-align: center; }
.silver-reference { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 18px 22px; border: 1px solid #d8d4c8; border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.45); }
.silver-reference-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; background: #899299; font-size: 11px; font-weight: 900; }
.silver-reference strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.silver-reference p { margin: 0; font-size: 9px; line-height: 1.7; }
.character-heading { align-items: flex-start; }
.character-list { display: grid; gap: 14px; }
.character-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper-strong); box-shadow: 0 10px 32px rgba(17,26,36,.06); }
.character-card[open] { border-color: #aeb9b7; box-shadow: var(--shadow); }
.character-card > summary { display: grid; grid-template-columns: 45px minmax(160px, .75fr) minmax(260px, 1.35fr) 135px 180px auto 22px; gap: 16px; align-items: center; min-height: 96px; padding: 17px 22px; cursor: pointer; list-style: none; }
.character-card > summary::-webkit-details-marker { display: none; }
.character-index { color: #8c989f; font: 900 12px/1 Arial, sans-serif; }
.character-summary-name strong, .character-summary-name small { display: block; }
.character-summary-name strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.character-summary-name small { margin-top: 6px; color: var(--muted); font-size: 9px; }
.character-priority-list { display: flex; gap: 6px; min-width: 0; overflow-x: auto; padding: 3px 0; scrollbar-width: thin; }
.character-priority-chip { display: inline-flex; flex: 0 0 auto; flex-direction: column; gap: 2px; align-items: flex-start; justify-content: center; min-width: 70px; min-height: 56px; padding: 5px 9px; border: 1px solid #e3c5b8; border-radius: 9px; color: #6f493d; background: #fff5ee; cursor: pointer; font-family: inherit; text-align: left; white-space: nowrap; transition: border-color .15s, box-shadow .15s, transform .15s; }
.character-priority-chip:hover { border-color: #d45e45; box-shadow: 0 4px 12px rgba(197,82,66,.12); transform: translateY(-1px); }
.character-priority-chip:focus-visible { outline: 2px solid #d45e45; outline-offset: 2px; }
.character-priority-chip strong { color: var(--ink); font-size: 10px; line-height: 1.15; }
.character-priority-chip small { color: #8f776f; font-size: 8px; font-weight: 800; line-height: 1.15; }
.character-priority-chip b { color: #c55242; font: 900 10px/1.15 Arial, sans-serif; }
.character-summary-stat { padding-left: 16px; border-left: 1px solid var(--line); }
.character-summary-stat span, .character-summary-stat strong { display: block; }
.character-summary-stat span { margin-bottom: 7px; color: var(--muted); font-size: 8px; }
.character-summary-stat strong { font: 900 21px/1 Arial, sans-serif; }
.character-summary-stat strong small { margin-left: 3px; color: var(--muted); font-size: 8px; }
.character-summary-stat em { display: block; margin-top: 7px; color: #67767d; font-size: 8px; font-style: normal; font-weight: 800; }
.character-summary-stat.is-milestone strong { color: #1095a3; }
.character-remove { padding: 7px 0; border: 0; border-bottom: 1px solid #b8b4aa; color: #848984; background: transparent; cursor: pointer; font-size: 9px; }
.character-remove:hover { color: #c55242; border-color: #c55242; }
.character-chevron { width: 10px; height: 10px; border-right: 2px solid #8e989e; border-bottom: 2px solid #8e989e; transform: rotate(45deg); transition: transform .2s; }
.character-card[open] .character-chevron { transform: rotate(225deg); }
.character-card-body { padding: 28px; border-top: 1px solid var(--line); background: #f8f6ef; }
.character-profile-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 12px; }
.character-profile-grid label > span { display: block; margin: 0 0 7px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .03em; }
.character-profile-grid input, .character-profile-grid select, .skill-select-field select, .level-select-field select { width: 100%; min-width: 0; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: white; font-size: 12px; font-weight: 700; }
.character-profile-grid input:focus, .character-profile-grid select:focus, .skill-select-field select:focus, .level-select-field select:focus { border-color: #57b8c3; box-shadow: 0 0 0 3px rgba(110,217,230,.16); }
.character-skill-heading { display: flex; align-items: end; justify-content: space-between; margin: 30px 0 13px; }
.character-skill-heading strong, .character-skill-heading small { display: block; }
.character-skill-heading strong { font-size: 13px; }
.character-skill-heading small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.character-skill-heading button { padding: 9px 12px; border: 1px solid var(--ink); border-radius: 9px; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.character-skill-heading button:hover { color: white; background: var(--ink); }
.character-skill-heading button.is-open { color: white; background: var(--ink); }
.skill-quick-picker { margin-bottom: 16px; padding: 22px; border: 1px solid #9bcbd0; border-radius: 15px; background: #edf8f7; box-shadow: inset 0 0 0 3px rgba(110,217,230,.08); }
.skill-quick-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.skill-quick-picker-head strong, .skill-quick-picker-head small { display: block; }
.skill-quick-picker-head strong { font-size: 14px; }
.skill-quick-picker-head small { margin-top: 4px; color: #687b7c; font-size: 9px; }
.skill-quick-picker-head > span { padding: 8px 12px; border-radius: 999px; color: #486769; background: white; font-size: 9px; font-weight: 800; }
.skill-quick-picker-head > span b { margin-right: 2px; color: #168d98; font-size: 14px; }
.skill-quick-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skill-quick-group { min-width: 0; padding: 16px; border: 1px solid rgba(87,154,160,.2); border-radius: 13px; background: rgba(255,255,255,.62); }
.skill-quick-group h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; color: #4f6e70; font-size: 11px; }
.skill-quick-group h4 > small { padding: 4px 7px; border-radius: 999px; color: #718385; background: #e4efee; font-size: 8px; font-weight: 800; }
.skill-quick-group h4 > small b { margin-right: 2px; color: #188c96; font-size: 11px; }
.skill-quick-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.skill-quick-item { display: inline-flex; align-items: stretch; min-height: 42px; overflow: hidden; border: 1px solid #c5d9d8; border-radius: 10px; background: white; transition: border-color .15s, background .15s, transform .15s; }
.skill-quick-item:hover { border-color: #3ca8b2; transform: translateY(-1px); }
.skill-quick-button { display: inline-flex; gap: 7px; align-items: center; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 0; color: #34494a; background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; transition: background .15s; }
.skill-quick-button > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: white; background: #3ca8b2; font: 900 12px/1 Arial, sans-serif; }
.skill-quick-button > small { color: #859493; font-size: 8px; font-weight: 700; }
.skill-quick-button:hover { background: #f7ffff; }
.skill-quick-cap-button { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; padding: 3px 5px; border: 0; border-left: 1px solid #cfe1df; color: #167f88; background: #effafa; cursor: pointer; line-height: 1; }
.skill-quick-cap-button b { font-size: 8px; }
.skill-quick-cap-button small { margin-top: 3px; color: #668688; font-size: 7px; font-weight: 800; }
.skill-quick-cap-button:hover { color: white; background: #259da8; }
.skill-quick-cap-button:hover small { color: white; }
.skill-quick-item.is-selected { border-color: #b9c9c5; background: #e5e8e4; opacity: .88; }
.skill-quick-button.is-selected { color: #526361; background: #e5e8e4; cursor: pointer; }
.skill-quick-button.is-selected > span { background: #82908e; }
.skill-quick-button.is-selected > small { color: #71807e; }
.skill-quick-button.is-selected:hover { color: #8b4138; border-color: #d89589; background: #fff1ed; }
.skill-quick-button.is-selected:hover > span { background: var(--coral); }
.skill-quick-item.is-selected:hover { border-color: #d89589; }
.skill-plan-list { display: grid; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.skill-plan-row { display: grid; grid-template-columns: minmax(185px, 1.25fr) 142px 16px 142px minmax(285px, 1fr) 28px; gap: 8px; align-items: center; min-width: 850px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.skill-plan-row.is-ineligible { border-color: #e2aa9f; background: #fff9f6; }
.skill-plan-row.is-jump-target { border-color: #d45e45; box-shadow: 0 0 0 3px rgba(212,94,69,.18); animation: skill-jump-pulse .7s ease-out 2; }
@keyframes skill-jump-pulse {
  0% { background: #fff0e9; }
  100% { background: white; }
}
.skill-select-field, .level-select-field { display: flex; gap: 7px; align-items: center; min-width: 0; }
.skill-select-field > label, .level-select-field > label { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.skill-select-static {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 36px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f5f3ec;
}
.skill-select-static strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.skill-select-static span { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: #486270; background: #dff4f6; font-size: 8px; font-weight: 800; }
.skill-priority-toggle { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #d6d2c8; border-radius: 7px; color: #a5aaa6; background: white; cursor: pointer; font-size: 15px; line-height: 1; }
.skill-priority-toggle:hover { color: #d36a51; border-color: #dda995; background: #fff8f3; }
.skill-priority-toggle.is-selected { color: #fff; border-color: #d45e45; background: #d45e45; }
.level-select-field { padding: 3px 5px; border-radius: 9px; }
.level-select-field select { height: 36px; padding: 0 8px; }
.level-select-field.is-level-25 { background: rgba(110,217,230,.16); box-shadow: inset 0 0 0 1px rgba(58,158,169,.25); }
.level-select-field.is-level-30 { background: rgba(216,255,99,.24); box-shadow: inset 0 0 0 1px rgba(159,200,45,.35); }
.level-select-field.is-level-25 select, .level-select-field.is-level-30 select { border-color: transparent; }
.level-select-field .level-achieved { color: #148995; font-weight: 800; }
.level-select-field .level-target { color: #718b1d; font-weight: 800; }
.skill-level-arrow { align-self: center; color: #adb2ae; text-align: center; }
.skill-row-resource { display: grid; grid-template-columns: .85fr 1.15fr; align-self: stretch; align-items: center; padding: 4px 10px; border-radius: 9px; color: white; background: var(--ink); }
.skill-row-resource > div { display: flex; gap: 7px; align-items: center; min-width: 0; }
.skill-row-resource > div + div { margin-left: 9px; padding-left: 9px; border-left: 1px solid rgba(255,255,255,.12); }
.skill-row-resource span { flex: 0 0 auto; color: #8e9ca5; font-size: 8px; white-space: nowrap; }
.skill-row-resource strong { overflow: hidden; color: var(--lime); font: 900 16px/1 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.skill-row-resource .skill-row-silver strong { color: #f2f5f4; font-size: 13px; }
.skill-row-remove { align-self: center; width: 28px; height: 28px; padding: 0; border: 1px solid #d4d0c5; border-radius: 50%; color: #858b87; background: transparent; cursor: pointer; }
.skill-row-remove:hover { color: white; border-color: var(--coral); background: var(--coral); }
.skill-plan-empty, .no-characters { padding: 30px 20px; border: 1px dashed #cbc7bd; border-radius: 13px; color: var(--muted); text-align: center; }
.skill-plan-empty strong, .skill-plan-empty span, .no-characters strong, .no-characters span { display: block; }
.skill-plan-empty strong, .no-characters strong { margin-bottom: 7px; color: var(--ink); font-size: 12px; }
.skill-plan-empty span, .no-characters span { font-size: 9px; }
.add-character-wide { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; min-height: 64px; margin-top: 14px; border: 1px dashed #aeb0a9; border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.35); cursor: pointer; font-size: 11px; font-weight: 800; }
.add-character-wide span { font-size: 18px; }
.add-character-wide:hover { color: var(--ink); border-color: var(--ink); background: white; }
.skill-data-note { display: grid; grid-template-columns: 260px 1fr; gap: 30px 54px; margin-top: 100px; padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.42); }
.skill-data-note h2 { margin: 0; font-size: 22px; }
.skill-data-note > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.skill-source-links { display: flex; grid-column: 2; gap: 10px; flex-wrap: wrap; }
.skill-source-links a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 9px; font-weight: 800; text-decoration: none; }
.skill-source-links a:hover { border-color: #58aeb7; color: #167d87; }

/* 史書チェック */
.chronicle-tool { min-height: calc(100vh - 82px); background: #f1eee5; }
.chronicle-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(42px, 8vw, 120px);
  align-items: center;
  min-height: 420px;
  padding: 68px max(7vw, 28px) 74px;
  overflow: hidden;
  color: white;
  background-color: var(--ink);
  background-image: radial-gradient(circle at 78% 32%, rgba(216,255,99,.11), transparent 30%), linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.chronicle-hero::after { content: "史"; position: absolute; right: -.03em; bottom: -.34em; color: rgba(255,255,255,.025); font: 900 clamp(260px, 34vw, 500px)/1 serif; pointer-events: none; }
.chronicle-hero > * { position: relative; z-index: 1; }
.chronicle-hero h1 { margin: 0; font-size: clamp(48px, 6vw, 82px); line-height: 1.04; letter-spacing: -.06em; }
.chronicle-hero h1 em { color: var(--lime); font-style: normal; }
.chronicle-hero-copy > p:last-child { max-width: 670px; margin: 24px 0 0; color: #b7c0c6; font-size: 14px; line-height: 1.9; }
.chronicle-progress-card { padding: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.chronicle-progress-card > p:first-child { margin: 0; color: #93a0a8; font: 900 9px/1 Arial, sans-serif; letter-spacing: .2em; }
.chronicle-progress-card > div:nth-child(2) { display: flex; align-items: baseline; margin: 17px 0 14px; }
.chronicle-progress-card strong { color: var(--lime); font: 900 92px/.82 Arial, sans-serif; letter-spacing: -.08em; }
.chronicle-progress-card > div:nth-child(2) span { margin-left: 10px; color: #87949d; font: 900 22px/1 Arial, sans-serif; }
.chronicle-progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.chronicle-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--lime)); transition: width .3s ease; }
.chronicle-progress-count { margin: 13px 0 0 !important; color: #8f9ca4; font-size: 11px; }
.chronicle-progress-count b { color: white; font-size: 16px; }
.chronicle-content { width: min(1280px, calc(100% - 56px)); margin: 0 auto; padding: 72px 0 100px; }
.chronicle-overview { display: flex; gap: 30px; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.chronicle-overview h2 { margin: 7px 0 8px; font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -.045em; }
.chronicle-overview > div:first-child > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.chronicle-actions { display: flex; gap: 9px; align-items: center; flex: 0 0 auto; }
.chronicle-filter, .chronicle-reset { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-strong); font-size: 10px; font-weight: 800; }
.chronicle-filter { display: inline-flex; gap: 8px; align-items: center; padding: 0 13px; cursor: pointer; }
.chronicle-filter input { width: 15px; height: 15px; margin: 0; accent-color: #178f99; }
.chronicle-reset { padding: 0 14px; color: #a95544; cursor: pointer; }
.chronicle-reset:hover { color: white; border-color: #c65e49; background: #c65e49; }
.chronicle-checklist { display: grid; gap: 13px; }
.chronicle-group { overflow: hidden; border: 1px solid #d4d0c4; border-radius: 18px; background: rgba(255,255,255,.62); box-shadow: 0 8px 26px rgba(17,26,36,.035); }
.chronicle-group[open] { background: var(--paper-strong); box-shadow: 0 16px 38px rgba(17,26,36,.07); }
.chronicle-group > summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto 15px; gap: 12px; align-items: center; min-height: 78px; padding: 13px 20px; cursor: pointer; list-style: none; }
.chronicle-group > summary::-webkit-details-marker { display: none; }
.chronicle-group > summary:hover { background: rgba(216,255,99,.09); }
.chronicle-group-index { color: #a0a7a2; font: 900 11px/1 Arial, sans-serif; letter-spacing: .08em; }
.chronicle-group-title strong, .chronicle-group-title small { display: block; }
.chronicle-group-title strong { font-size: 17px; }
.chronicle-group-title small { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chronicle-incomplete-badge, .chronicle-unknown-count { padding: 6px 8px; border-radius: 7px; font-size: 8px; font-style: normal; font-weight: 900; white-space: nowrap; }
.chronicle-incomplete-badge { color: #9b5c23; background: #fff0d7; }
.chronicle-unknown-count { color: #93613a; background: #f5e9dc; }
.chronicle-group-progress { grid-column: 5; min-width: 58px; color: #89918c; font: 800 11px/1 Arial, sans-serif; text-align: right; }
.chronicle-group-progress b { color: #168e98; font-size: 17px; }
.chronicle-group.is-complete .chronicle-group-progress b { color: #6d9624; }
.chronicle-group-arrow { grid-column: 6; width: 10px; height: 10px; border-right: 2px solid #98a09b; border-bottom: 2px solid #98a09b; transform: rotate(45deg) translate(-2px, 2px); transition: transform .2s; }
.chronicle-group[open] .chronicle-group-arrow { transform: rotate(225deg) translate(-2px, 2px); }
.chronicle-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border-top: 1px solid #e0dcd1; background: #e3dfd4; }
.chronicle-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 64px; padding: 10px 15px; background: #fffdf8; cursor: pointer; transition: opacity .18s, background .18s; }
.chronicle-item:hover { background: #f7faec; }
.chronicle-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chronicle-checkmark { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #b5b9b4; border-radius: 6px; background: white; }
.chronicle-item input:focus-visible + .chronicle-checkmark { outline: 3px solid rgba(110,217,230,.35); outline-offset: 2px; }
.chronicle-item.is-complete .chronicle-checkmark { border-color: #178f99; background: #178f99; }
.chronicle-item.is-complete .chronicle-checkmark::after { content: ""; width: 8px; height: 4px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translate(1px, -1px); }
.chronicle-item-copy strong, .chronicle-item-copy small { display: block; }
.chronicle-item-copy strong { font-size: 12px; }
.chronicle-item-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.chronicle-item.is-complete .chronicle-item-copy strong { color: #718078; text-decoration: line-through; text-decoration-thickness: 1px; }
.chronicle-item.is-complete .chronicle-item-copy small { color: #a1a7a2; }
.chronicle-unknown-tag { padding: 5px 7px; border-radius: 6px; color: #9b602d; background: #fff0dc; font-size: 7px; font-style: normal; font-weight: 900; white-space: nowrap; }
.chronicle-checklist.is-hiding-completed .chronicle-item.is-complete { display: none; }
.chronicle-checklist.is-hiding-completed .chronicle-group.is-complete .chronicle-items::after { content: "この区分はすべて達成済み"; grid-column: 1 / -1; padding: 24px; color: #6d9624; background: #f7faec; font-size: 10px; font-weight: 900; text-align: center; }
.chronicle-empty { margin: 0; padding: 30px 20px; border-top: 1px solid #e0dcd1; color: #93613a; background: #fff8ed; font-size: 11px; font-weight: 800; text-align: center; }
.chronicle-source-note { display: grid; grid-template-columns: 250px 1fr; gap: 24px 48px; margin-top: 70px; padding: 32px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.48); }
.chronicle-source-note h2 { margin: 7px 0 0; font-size: 20px; }
.chronicle-source-note > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.chronicle-source-links { display: flex; grid-column: 2; gap: 9px; flex-wrap: wrap; }
.chronicle-source-links a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 9px; font-weight: 800; text-decoration: none; }
.chronicle-source-links a:hover { border-color: #9fbd3e; color: #66820d; }

@media (max-width: 1100px) and (min-width: 921px) {
  .app-header { grid-template-columns: 1fr auto; }
  .tool-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .tool-tab { flex: 1; }
  .save-indicator { grid-column: 2; grid-row: 1; }
}

@media (max-width: 920px) {
  .app-header { grid-template-columns: 1fr auto; }
  .tool-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .tool-tab { flex: 1; }
  .save-indicator { grid-column: 2; grid-row: 1; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 68px; }
  .formula-card { max-width: 680px; }
  .current-grid, .allocation-grid { grid-template-columns: 1fr; }
  .status-card { min-height: 440px; }
  .roadmap-table { overflow-x: auto; }
  .roadmap-header, .roadmap-row { min-width: 1040px; }
  .threshold-section { grid-template-columns: 1fr; gap: 30px; }
  .charge-hero { grid-template-columns: 1fr; }
  .charge-rule-card { max-width: 620px; }
  .charge-columns { grid-template-columns: 1fr; }
  .skill-hero { grid-template-columns: 1fr; }
  .skill-milestone-card { max-width: 680px; }
  .skill-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .character-card > summary { grid-template-columns: 42px minmax(150px, .75fr) minmax(180px, 1fr) 125px 155px auto 20px; gap: 11px; }
  .character-profile-grid { grid-template-columns: repeat(2, 1fr); }
  .skill-data-note { grid-template-columns: 210px 1fr; }
  .chronicle-hero { grid-template-columns: 1fr; min-height: auto; }
  .chronicle-progress-card { max-width: 680px; }
}

@media (max-width: 620px) {
  .app-header { gap: 10px; padding: 10px 16px 12px; }
  .app-brand strong { font-size: 13px; }
  .app-brand small, .save-indicator { display: none; }
  .app-brand-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
  .tool-tabs { gap: 3px; padding: 4px; }
  .tool-tab { min-height: 50px; padding: 5px 7px; font-size: 10px; line-height: 1.25; white-space: normal; }
  .tool-tab span { display: none; }
  .hero { gap: 42px; padding: 54px 20px 64px; }
  .hero h1 { font-size: clamp(40px, 12.2vw, 50px); }
  .formula-card { padding: 24px 20px; }
  .formula-row { grid-template-columns: 1fr; gap: 13px; }
  .formula-row b { display: none; }
  .formula-row div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .formula-row strong { margin: 0; }
  .section-block, .threshold-section { width: min(100% - 32px, 1180px); }
  .section-block { padding: 74px 0; }
  .section-heading { gap: 14px; margin-bottom: 30px; }
  .step-number { width: 42px; height: 42px; }
  .section-heading h2, .roadmap-heading h2, .threshold-intro h2 { font-size: 32px; }
  .section-heading p:last-child { font-size: 13px; }
  .input-panel, .status-card, .allocation-controls, .allocation-results { padding: 22px; border-radius: 18px; }
  .input-panel { padding-top: 4px; padding-bottom: 4px; }
  .metric-input { grid-template-columns: 38px 1fr; gap: 10px; }
  .metric-input .number-field { grid-column: 1 / -1; }
  .metric-input small { grid-column: 1 / -1; margin-top: -2px; }
  .input-actions { flex-wrap: wrap; }
  .status-card { min-height: 410px; }
  .roadmap-section { padding: 66px 16px 72px; }
  .roadmap-heading { display: block; }
  .roadmap-heading-side { margin-top: 18px; }
  .roadmap-heading-side > p { font-size: 13px; }
  .roadmap-build-controls { justify-content: flex-start; }
  .target-picker { grid-template-columns: repeat(5, 1fr); }
  .allocation-heading { flex-wrap: wrap; }
  .allocation-total { width: 100%; margin: 4px 0 0 42px; }
  .slider-row { grid-template-columns: 56px 1fr 68px; gap: 7px; }
  .result-summary { align-items: flex-end; }
  .result-summary > div:first-child strong { font-size: 16px; }
  .remaining-contribution strong { font-size: 18px; }
  .mix-result { grid-template-columns: 1fr; }
  .contribution-chip { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 7px; }
  .threshold-list { grid-template-columns: repeat(2, 1fr); }
  footer { display: block; line-height: 1.7; }
  footer p + p { margin-top: 7px; }
  .charge-hero { gap: 38px; min-height: auto; padding: 54px 20px 62px; }
  .charge-hero h1 { font-size: 48px; }
  .charge-hero > div > p:last-child { font-size: 13px; }
  .charge-rule-card { grid-template-columns: auto 1fr; padding: 24px 20px; border-radius: 19px; }
  .charge-rule-card > strong { font-size: 72px; }
  .charge-content { width: calc(100% - 32px); padding: 70px 0 78px; }
  .charge-section-heading { display: block; }
  .charge-section-heading h2 { font-size: 32px; }
  .charge-reset-button { margin-top: 20px; }
  .power-panel { border-radius: 18px; }
  .power-panel-header { min-height: 112px; padding: 22px 18px; }
  .power-panel-header h2 { font-size: 16px; }
  .power-formula { flex-wrap: wrap; padding: 13px 18px; }
  .power-list { padding: 4px 16px 10px; }
  .power-row { grid-template-columns: 24px minmax(0, 1fr) 14px minmax(92px, .72fr); gap: 7px; min-height: 76px; }
  .power-input-wrap input { padding-left: 9px; font-size: 14px; }
  .power-input-wrap span { display: none; }
  .power-result strong { font-size: 14px; }
  .skill-hero { gap: 38px; min-height: auto; padding: 54px 20px 62px; }
  .skill-hero h1 { font-size: 46px; }
  .skill-hero > div > p:last-child { font-size: 13px; }
  .skill-milestone-card { padding: 24px 20px; border-radius: 19px; }
  .milestone-pair { gap: 12px; }
  .milestone-pair div { display: block; }
  .milestone-pair strong, .milestone-pair span { display: block; }
  .milestone-pair span { margin-top: 8px; }
  .skill-content { width: calc(100% - 32px); padding: 70px 0 78px; }
  .skill-overview { margin-bottom: 76px; }
  .skill-section-heading { display: block; }
  .skill-section-heading h2 { font-size: 32px; }
  .skill-overview-actions { justify-content: space-between; margin-top: 22px; }
  .skill-overview-actions .button { padding: 0 12px; }
  .skill-summary-grid { gap: 8px; }
  .skill-summary-card { min-height: 122px; padding: 18px; border-radius: 15px; }
  .skill-summary-card > strong { margin-top: 20px; font-size: 30px; }
  .skill-summary-card > small { right: 17px; bottom: 18px; }
  .skill-priority-resources { grid-template-columns: 1fr; }
  .skill-priority-resources > header { padding: 17px 18px; }
  .skill-priority-resource-stats article { min-height: 100px; padding: 17px 14px; }
  .skill-priority-resource-stats strong { font-size: clamp(17px, 5vw, 26px); }
  .skill-priority-resource-stats article:nth-child(3) strong { font-size: clamp(14px, 4.2vw, 22px); }
  .skill-priority-resource-stats small { right: 13px; bottom: 15px; }
  .skill-priority-resource-list { padding: 13px; }
  .skill-priority-list-items article { flex-basis: 100%; }
  .skill-priority-plan-list { flex-wrap: wrap; }
  .skill-priority-return { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-height: 42px; padding: 0 13px 0 9px; }
  .skill-priority-return span { width: 25px; height: 25px; }
  .skill-priority-return strong { font-size: 10px; }
  .skill-balance-head { padding: 16px 18px; }
  .skill-balance-groups { grid-template-columns: 1fr; }
  .skill-balance-group { padding: 15px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .skill-balance-group:last-child { border-bottom: 0; }
  .skill-balance-note { padding: 9px 16px; text-align: left; }
  .resource-breakdown > header { display: block; min-height: 0; padding: 20px; }
  .resource-breakdown > header > span { display: block; margin-top: 8px; }
  .resource-breakdown-list { grid-template-columns: 1fr; }
  .resource-breakdown-row { grid-template-columns: 78px 1fr auto; padding: 13px 15px; border-right: 0; }
  .silver-reference { align-items: flex-start; padding: 16px; }
  .character-card { border-radius: 16px; }
  .character-card > summary { grid-template-columns: 30px minmax(0, 1fr) auto 18px; grid-template-rows: auto auto; gap: 4px 10px; min-height: 82px; padding: 14px 15px; }
  .character-index { grid-column: 1; grid-row: 1 / span 2; }
  .character-summary-name { grid-column: 2; grid-row: 1; }
  .character-priority-list { grid-column: 2; grid-row: 2; }
  .character-remove { grid-column: 3; grid-row: 1 / span 2; }
  .character-chevron { grid-column: 4; grid-row: 1 / span 2; }
  .character-summary-stat { display: none; }
  .character-summary-name strong { font-size: 14px; }
  .character-card-body { padding: 18px 14px; }
  .character-profile-grid { grid-template-columns: 1fr; }
  .character-skill-heading { align-items: center; }
  .skill-quick-picker { padding: 13px; }
  .skill-quick-picker-head { align-items: flex-start; }
  .skill-quick-groups { grid-template-columns: 1fr; }
  .skill-quick-item { flex: 1 0 calc(50% - 8px); }
  .skill-quick-button { flex: 1; justify-content: flex-start; }
  .skill-plan-row { padding: 4px 7px; }
  .skill-data-note { grid-template-columns: 1fr; gap: 18px; margin-top: 70px; padding: 24px 20px; }
  .skill-source-links { grid-column: 1; }
  .chronicle-hero { gap: 36px; padding: 54px 20px 62px; }
  .chronicle-hero h1 { font-size: 48px; }
  .chronicle-hero-copy > p:last-child { font-size: 13px; }
  .chronicle-progress-card { padding: 24px 20px; border-radius: 19px; }
  .chronicle-progress-card strong { font-size: 74px; }
  .chronicle-content { width: calc(100% - 32px); padding: 62px 0 78px; }
  .chronicle-overview { display: block; }
  .chronicle-actions { margin-top: 20px; }
  .chronicle-filter, .chronicle-reset { flex: 1; justify-content: center; padding: 0 9px; }
  .chronicle-group > summary { grid-template-columns: 28px minmax(0, 1fr) auto 12px; gap: 8px; min-height: 72px; padding: 12px 14px; }
  .chronicle-incomplete-badge, .chronicle-unknown-count { display: none; }
  .chronicle-group-title strong { font-size: 14px; }
  .chronicle-group-title small { font-size: 8px; }
  .chronicle-group-progress { grid-column: 3; min-width: 50px; }
  .chronicle-group-arrow { grid-column: 4; }
  .chronicle-group-progress b { font-size: 15px; }
  .chronicle-items { grid-template-columns: 1fr; }
  .chronicle-item { min-height: 62px; padding: 9px 12px; }
  .chronicle-source-note { display: block; margin-top: 52px; padding: 24px 20px; }
  .chronicle-source-note > p { margin-top: 16px; }
  .chronicle-source-links { margin-top: 18px; }
}

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