:root {
  --ink: #283249;
  --muted: #687189;
  --paper: #ffffffe8;
  --line: #cfd9eb;
  --aqua: #18bdd0;
  --aqua-deep: #087caa;
  --pink: #f65e96;
  --yellow: #f4bc31;
  --purple: #7663c8;
}
* { box-sizing: border-box; }
body { position: relative; z-index: 0; min-width: 320px; margin: 0; color: var(--ink); background: #e8eef5; font-family: "Yu Gothic UI", "Hiragino Sans", system-ui, sans-serif; line-height: 1.55; }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; background: linear-gradient(144deg, transparent 0 18%, #d9f0f333 18% 32%, transparent 32% 56%, #eee2f133 56% 69%, transparent 69%), linear-gradient(36deg, transparent 0 28%, #dce7f733 28% 43%, transparent 43% 72%, #f7e4ed33 72% 87%, transparent 87%), linear-gradient(90deg, #f2f7fa80, #edf0fa80 50%, #f7f2f880); }
button, select, input { font: inherit; }
button { cursor: pointer; }

.site-header { position: relative; overflow: hidden; color: #41627b; background: linear-gradient(112deg, #e8f6f8d9, #eef1fad9 54%, #f6edf4d9); border-bottom: 1px solid #c8dde8; }
.site-header::before, .site-header::after { position: absolute; content: ""; pointer-events: none; }
.site-header::before { top: -52px; right: 14%; width: 150px; height: 150px; background: linear-gradient(135deg, #bfeef26b, #f4ccfb55); clip-path: polygon(50% 0, 100% 85%, 16% 65%); }
.site-header::after { right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #2cb9c5b3, #a8a0dd80 50%, #ed8eae9c); }
.header-inner, .page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.header-inner { position: relative; z-index: 1; padding: 19px 0 17px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif; font-size: clamp(1.35rem, 3.1vw, 2rem); font-weight: 400; letter-spacing: .015em; line-height: 1.4; }
.intro { margin-bottom: 0; color: var(--muted); font-size: .93rem; font-weight: 700; }

.page-shell { padding: 26px 0 52px; }
.results-section, .formation-section, .details-section, .notes-section { position: relative; background: #fffffff2; border: 1px solid var(--line); box-shadow: 0 9px 23px rgb(58 94 140 / 10%); }
.results-section { border-top: 4px solid var(--aqua); }
.formation-section { z-index: 3; border-top: 4px solid var(--pink); }
.details-section { border-top: 4px solid var(--purple); }
.notes-section { border-top: 4px solid var(--yellow); }
.results-section, .formation-section, .notes-section { padding: clamp(19px, 3vw, 28px); }
.formation-section, .details-section, .notes-section { margin-top: 26px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h2, .notes-section h2 { margin: 0; font-size: 1.32rem; letter-spacing: .02em; }
.actions, .formation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: end; }
.button { border: 1px solid transparent; border-radius: 5px; padding: 8px 12px; font-weight: 800; transition: transform .15s, background .15s, color .15s; }
.button:hover { transform: translateY(-1px); }
.button.secondary { color: white; background: var(--aqua-deep); }
.button.ghost { color: #6755b1; background: #f0edff; }
.button.swap { color: var(--pink); background: white; border-color: var(--pink); }
.button.swap.active { color: white; background: var(--pink); }

.a-text { margin-top: 22px; }
.featured-metric { border: 1px solid #c5e6eb; background: linear-gradient(102deg, #e7fbfc, #f4edff); }
.secondary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #d9e4ef; border-top: 0; }
.metric { box-sizing: border-box; height: 123px; padding: 14px 17px; background: #fbfdff; border-left: 1px solid #d9e4ef; }
.metric:first-child { border-left: 0; }
.featured-metric .metric { height: 180px; padding: 20px 22px; border: 0; background: transparent; }
.metric.primary { background: linear-gradient(135deg, #e4fbfc, #f3ecff); }
.metric-label { color: var(--muted); font-size: .79rem; font-weight: 800; }
.metric-value { display: block; margin-top: 4px; color: var(--aqua-deep); font-size: clamp(1.3rem, 3.4vw, 1.72rem); font-weight: 900; letter-spacing: -.035em; text-align: left; white-space: nowrap; }
.featured-metric .metric-value { margin-top: 5px; font-size: clamp(2.3rem, 6.6vw, 3.55rem); }
.metric.primary .metric-value { color: #b33a74; }
.metric-range { margin-right: .13em; color: #99a5b7; font-size: .38em; font-weight: 800; letter-spacing: -.03em; vertical-align: .21em; }
.metric-value .metric-range { margin-left: -.5em; }
.metric-sub { display: block; height: 1.5em; margin-top: 3px; margin-left: 7px; overflow: hidden; color: var(--muted); font-size: .73rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.result-notices { height: 90px; margin-top: 8px; }
.b-text, .validation-message { margin: 0; font-size: .9rem; }
.b-text { color: #70639e; }
.b-text:empty { display: none; }
.validation-message { margin-top: 6px; color: #c23d6c; }
.validation-message:empty { display: none; }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin-top: 6px; padding: 9px 11px; color: #536178; background: #f3fafc; border-left: 3px solid var(--aqua); font-size: .8rem; }
.legend[hidden] { display: none; }
.legend.is-empty { display: none; }
.legend strong { color: var(--aqua-deep); margin-right: 3px; }

.formation-heading { justify-content: space-between; margin-bottom: 19px; }
.formation-heading .formation-actions { margin-left: auto; }
.help-text { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 700; text-align: right; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 2px; }
.card { position: relative; min-width: 0; padding: 14px; background: #fff; border: 1px solid var(--line); transition: border .15s, background .15s, transform .15s, box-shadow .15s; }
.card::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; content: ""; background: #e2e8f3; }
.card.leader { border-color: var(--line); }
.card.leader::before { background: #e2e8f3; }
.card.leader::after { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 4px; content: ""; background: var(--pink); }
.card.last-focused { border-color: var(--aqua); box-shadow: 0 0 0 2px #bceff2; }
.card.last-focused::before { background: var(--aqua); }
.card.swap-ready { cursor: pointer; }
.card.swap-ready:hover { background: #fff9fc; border-color: #ef97b8; }
.card.swap-selected { background: #fff3f8; border: 2px solid var(--pink); box-shadow: 0 0 0 3px #ffe1ec; }
.card.swap-selected::before { height: 4px; background: var(--pink); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 23px; margin-bottom: 11px; }
.card-position { color: var(--purple); font-size: .74rem; font-weight: 900; }
.leader-badge { color: white; background: var(--pink); border-radius: 999px; padding: 2px 7px; font-size: .66rem; font-weight: 800; }
.card-select { display: none; border: 1px solid #f3a2c0; border-radius: 4px; padding: 3px 7px; color: #ca3a73; background: #fff; font-size: .69rem; font-weight: 800; }
.swap-ready .card-select { display: inline-block; }
.swap-selected .card-select { color: #fff; background: var(--pink); }
.field { position: relative; display: grid; gap: 4px; margin-top: 10px; }
.dropdown-field { min-height: 80px; align-content: start; }
.field label { color: #505c72; font-size: .75rem; font-weight: 800; }
.field label .required { margin-left: 4px; color: #e23a76; font-size: .67rem; }
select, input[type="number"] { width: 100%; color: var(--ink); background: white; border: 1px solid #c9d4e4; border-radius: 4px; padding: 8px; }
select:focus, input:focus { outline: 3px solid #cef3f4; border-color: var(--aqua); }
input:disabled { background: #f8fafc; color: #7b8494; }
.dropdown { position: relative; }
.dropdown-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 7px 9px; color: var(--ink); text-align: left; background: linear-gradient(90deg, #fff, #f9fdff); border: 1px solid #bcd5e5; border-radius: 4px; }
.dropdown-label { display: block; min-width: 0; line-height: 1.35; }
.dropdown-prefix, .dropdown-suffix { display: block; }
.dropdown-trigger .dropdown-chevron { flex: 0 0 auto; margin-left: 5px; color: var(--aqua-deep); font-size: 1rem; transition: transform .15s; }
.dropdown.open .dropdown-trigger { border-color: var(--aqua); box-shadow: 0 0 0 3px #cef3f4; }
.dropdown.open .dropdown-trigger .dropdown-chevron { transform: rotate(180deg); }
.dropdown-trigger:disabled { color: #7b8494; background: #f5f8fb; cursor: default; }
.dropdown-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; left: 0; display: none; max-height: 276px; overflow-y: auto; padding: 4px; background: #fbfeff; border: 1px solid #86c9d5; border-top: 3px solid var(--aqua); box-shadow: 0 9px 22px rgb(29 105 135 / 22%); }
.dropdown.open .dropdown-menu { display: grid; }
.dropdown-overlay { position: fixed; z-index: 30; inset: 0; pointer-events: none; }
.dropdown-portal-menu { position: fixed; z-index: 31; display: grid; pointer-events: auto; }
.dropdown-option { width: 100%; padding: 7px 8px; color: #35435e; text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; }
.dropdown-option:hover, .dropdown-option:focus-visible { color: #075f85; background: #e7f9fa; border-left-color: var(--aqua); outline: 0; }
.dropdown-option.selected { color: #fff; background: linear-gradient(90deg, #0d98b4, #3dbdd1); border-left-color: var(--yellow); font-weight: 800; }
.card.dropdown-open { z-index: 4; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; min-height: 20px; margin-top: 9px; }
.tag { color: #4d76aa; background: #eaf6fb; border-radius: 999px; padding: 2px 7px; font-size: .66rem; font-weight: 800; }
.tag.condition { color: #a94a75; background: #ffe8f0; }
.single-skill { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; min-height: 24px; margin: 7px 0 0; padding: 4px 0 5px; border-bottom: 1px solid #e2eaf1; }
.single-skill span { color: #738197; font-size: .67rem; font-weight: 800; }
.single-skill strong { color: var(--aqua-deep); font-size: .9rem; white-space: nowrap; }
.single-skill .metric-range { font-size: .62em; vertical-align: .12em; }
.skill-field .dropdown-trigger, .unit-field .dropdown-trigger { height: 57px; }

details summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 25px; list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.summary-title { font-size: 1.15rem; font-weight: 900; }
.summary-chevron { color: var(--purple); font-size: 1.6rem; transition: transform .18s; }
details[open] .summary-chevron { transform: rotate(180deg); }
.detail-body { border-top: 1px solid var(--line); padding: 19px 25px 25px; }
.detail-note { color: var(--muted); font-size: .87rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .87rem; }
th, td { padding: 10px 12px; text-align: center; border-bottom: 1px solid #e1e9f0; }
th { color: #5f6a80; background: #f2f8fb; font-size: .75rem; }
td.metric-cell { color: var(--aqua-deep); font-weight: 900; }
tr.random-group-start td { border-top: 3px solid #8ad2dc; }
.condition-cell { vertical-align: middle; }
.condition-positive { color: #ef4f88; font-weight: 900; }
.random-max { color: #e34f85; font-weight: 900; }
.random-avg { color: #078aaa; font-weight: 900; }
.random-min { color: #7c6fbd; font-weight: 900; }
.calculation-button { padding: 0; color: inherit; font-weight: inherit; background: transparent; border: 0; border-bottom: 1px dashed #65aec3; }
.calculation-button:hover, .calculation-button:focus-visible { color: #e3457f; border-bottom-color: #e3457f; outline: 0; }
.formula-dialog { width: min(760px, calc(100% - 28px)); max-height: min(760px, calc(100% - 28px)); padding: 0; color: var(--ink); background: #fcfeff; border: 1px solid #9bcfd8; box-shadow: 0 18px 50px rgb(27 67 100 / 32%); }
.formula-dialog::backdrop { background: rgb(29 47 79 / 45%); backdrop-filter: blur(2px); }
.formula-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: linear-gradient(90deg, #e1f9fa, #f1eaff); border-top: 4px solid var(--aqua); }
.formula-dialog-head h2 { margin: 0; font-size: 1.12rem; }
.close-formula { width: 30px; height: 30px; color: #5a6b83; font-size: 1.35rem; line-height: 1; background: white; border: 1px solid #c4dae5; border-radius: 50%; }
#formula-content { padding: 17px 20px 20px; overflow-y: auto; }
.formula-block + .formula-block { margin-top: 15px; padding-top: 15px; border-top: 1px solid #d7e5eb; }
.formula-block h3 { margin: 0 0 6px; color: var(--aqua-deep); font-size: .92rem; }
.formula-cards { margin: 0; color: #596a83; font-size: .8rem; }
.formula-references { margin: 8px 0 0; padding: 7px 9px; color: #55647a; background: #f0f9fb; border-left: 2px solid var(--aqua); font-size: .78rem; line-height: 1.65; }
.formula-prelude { margin: 9px 0 0; color: #43687b; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: .82rem; }
.formula-expression { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: .91rem; }
.formula-expression b { color: #d73e7b; }
.formula-caption { margin: 0; color: #8a96a8; font-size: .73rem; }
.notes-section ul { margin: 13px 0 0; padding-left: 1.25em; color: #59657a; font-size: .89rem; }
.notes-section li + li { margin-top: 5px; }
footer { max-width: 840px; margin: 0 auto; padding: 0 16px 32px; color: #778397; text-align: center; font-size: .72rem; line-height: 1.6; }
footer p { margin: 4px 0; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 5; max-width: calc(100% - 36px); padding: 11px 15px; color: white; background: #354f73; border-radius: 5px; box-shadow: 0 6px 20px rgb(34 59 91 / 18%); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .header-inner { padding: 16px 0 14px; } .section-heading { align-items: flex-start; flex-direction: column; } .formation-heading { align-items: center; flex-direction: row; } .actions, .formation-actions { justify-content: flex-start; } .help-text { text-align: left; } .secondary-metrics { grid-template-columns: 1fr; } .metric { height: 123px; border-top: 1px solid #d9e4ef; border-left: 0; } .metric:first-child { border-top: 0; } .featured-metric .metric { height: 180px; border: 0; } .result-notices { height: 90px; } .cards { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .card { flex: 0 0 min(78vw, 290px); scroll-snap-align: start; } details summary, .detail-body { padding-right: 17px; padding-left: 17px; } }