/* SCHITAY CSS Phase 2: Matrix Destiny plus heavy finance and chart calculator interfaces. */

.matrix-widget,
.matrix-result,
.matrix-age-section,
.matrix-position-panel,
.matrix-channel-grid {
min-width:0; max-width:100%;
}
.matrix-date-field {
width:100%; max-width:100%; min-width:0; margin:0 0 15px; padding:0; border:0;
}
.matrix-date-field legend {
margin:0 0 8px; padding:0; color:#555762; font-size:11px; font-weight:750;
}
.matrix-date-selects {
display:grid; width:100%; max-width:100%; min-width:0; box-sizing:border-box; grid-template-columns:minmax(0,.95fr) minmax(0,1.28fr) minmax(0,1fr); gap:7px;
}
.matrix-date-selects label {
width:100%; max-width:100%; min-width:0;
}
.matrix-date-selects select {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; padding:0 25px 0 12px; font-size:16px;
}
.arcana-guide ol {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; margin:0; padding:0; list-style:none;
}
.arcana-guide li {
display:grid; grid-template-columns:minmax(122px,.62fr) minmax(0,1.38fr); gap:9px; padding:10px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.45;
}
.arcana-guide li:nth-child(-n+2) {
border-top:0;
}
.arcana-guide li b {
color:var(--ink); font-size:11px;
}
.matrix-date-selects select {
width:100%; height:54px; -webkit-appearance:none; appearance:none; padding-right:38px; border:1px solid #dedbd4; border-radius:13px; outline:0; color:var(--ink); background-color:#faf9f6; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%2321222d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px; font-weight:600;
}
.compound-mode-selector {
min-width:0; margin:0 0 18px; padding:17px; border:1px solid #d8d1ef; border-radius:16px; background:#f8f5ff;
}
.compound-mode-selector legend {
padding:0 7px; color:var(--ink); font-size:13px; font-weight:850;
}
.compound-mode-selector > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
}
.compound-mode-selector label {
position:relative; min-width:0; cursor:pointer;
}
.compound-mode-selector label:last-child {
grid-column:1/-1;
}
.compound-mode-selector input {
position:absolute; width:1px; height:1px; opacity:0;
}
.compound-mode-selector span {
min-height:46px; display:flex; align-items:center; justify-content:center; padding:9px 12px; border:1px solid #ddd7ef; border-radius:11px; color:#5c5668; background:#fff; font-size:10px; font-weight:800; line-height:1.25; text-align:center;
}
.compound-mode-selector input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.compound-mode-selector input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2);
}
.mortgage-mode-selector {
min-width:0; margin:0 0 18px; padding:17px; border:1px solid #d8d1ef; border-radius:16px; background:#f8f5ff;
}
.mortgage-mode-selector legend {
padding:0 7px; color:var(--ink); font-size:13px; font-weight:850;
}
.mortgage-mode-selector > div {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;
}
.mortgage-mode-selector label {
position:relative; min-width:0; cursor:pointer;
}
.mortgage-mode-selector input {
position:absolute; width:1px; height:1px; opacity:0;
}
.mortgage-mode-selector span {
min-height:48px; display:flex; align-items:center; justify-content:center; padding:9px 10px; border:1px solid #ddd7ef; border-radius:11px; color:#5c5668; background:#fff; font-size:10px; font-weight:800; line-height:1.25; text-align:center;
}
.mortgage-mode-selector input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.mortgage-mode-selector input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2);
}
.mortgage-down-section,
.mortgage-duration {
min-width:0; margin:0; padding:14px; border:1px solid #e2ddd4; border-radius:15px; background:#faf9f6;
}
.mortgage-down-section legend,
.mortgage-duration legend {
padding:0 7px; color:var(--ink); font-size:11px; font-weight:850;
}
.mortgage-down-grid,
.mortgage-duration > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.mortgage-down-section > small {
display:block; margin-top:10px; color:var(--muted); font-size:9px; line-height:1.45;
}
.mortgage-down-presets {
display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;
}
.mortgage-down-presets button {
min-width:48px; padding:7px 11px; border:1px solid #d8d1ef; border-radius:999px; color:var(--violet); background:#fff; cursor:pointer; font-size:10px; font-weight:850;
}
.mortgage-down-presets button:hover,
.mortgage-down-presets button:focus-visible {
border-color:var(--violet); background:var(--soft-violet);
}
.mortgage-credit-share {
margin:15px 0 0; padding:14px 16px; border-radius:13px; color:#574f67; background:#f5f1ff; font-size:11px; line-height:1.5;
}
.mortgage-credit-share strong {
color:var(--violet);
}
.mortgage-additional {
margin:0 0 18px; border:1px solid var(--line); border-radius:15px; background:#f7f4ff;
}
.mortgage-additional summary {
padding:15px 17px; color:#4d348f; cursor:pointer; font-size:11px; font-weight:850;
}
.mortgage-additional[open] summary {
border-bottom:1px solid #ded7f2;
}
.mortgage-additional-body {
display:grid; gap:14px; padding:17px;
}
.mortgage-additional-body .check-field {
min-height:48px; margin:0; color:var(--ink); font-weight:800;
}
.mortgage-additional-body > p {
margin:0; color:var(--muted); font-size:9px; line-height:1.5;
}
.mortgage-additional-body [data-mortgage-subsidy-fields] {
display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:12px;
}
.mortgage-additional-body [data-mortgage-subsidy-fields][hidden] {
display:none;
}
.mortgage-additional-body .field,
.mortgage-subsidy-use {
min-width:0; margin:0;
}
.mortgage-subsidy-use {
padding:0; border:0;
}
.mortgage-subsidy-use legend {
margin-bottom:8px; color:#555762; font-size:11px; font-weight:750;
}
.mortgage-budget-fields {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.mortgage-budget-fields > p {
grid-column:1/-1;
}
.mortgage-budget-result {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.mortgage-budget-result h2 {
margin:5px 0 14px; font-size:18px;
}
.mortgage-budget-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.mortgage-budget-grid > div {
min-height:88px; display:flex; flex-direction:column; justify-content:space-between; gap:7px; padding:15px; border-radius:14px; background:#f5f3ee;
}
.mortgage-budget-grid span,
.mortgage-budget-grid small {
color:var(--muted); font-size:9px; line-height:1.4;
}
.mortgage-budget-grid strong {
font-size:16px;
}
.mortgage-budget-grid .is-accent {
color:#fff; background:var(--violet);
}
.mortgage-budget-grid .is-accent span,
.mortgage-budget-grid .is-accent small {
color:#e8e2ff;
}
.mortgage-budget-result > p,
.mortgage-budget-result > div + p,
.mortgage-budget-result #mortgage-budget-content > p {
margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.55;
}
.mortgage-budget-result > p strong,
.mortgage-budget-result #mortgage-budget-content > p {
color:#4d348f;
}
.mortgage-additional-body [data-mortgage-expense-fields] {
display:grid; gap:12px;
}
.mortgage-additional-body [data-mortgage-expense-fields][hidden],
.mortgage-tax-used[hidden] {
display:none;
}
.mortgage-expense-heading {
color:#4d348f; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
}
.mortgage-expense-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.mortgage-expense-grid .field,
.mortgage-insurance-field {
margin:0;
}
.mortgage-insurance-field {
max-width:360px;
}
.mortgage-tax-used {
padding:13px; border:1px solid #ddd7ef; border-radius:13px; background:#fff;
}
.mortgage-purchase-summary,
.mortgage-money-structure,
.mortgage-tax-result,
.mortgage-down-comparison,
.mortgage-schedule {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.mortgage-purchase-summary h2,
.mortgage-money-structure h2,
.mortgage-tax-result h2,
.mortgage-down-comparison h2,
.mortgage-schedule h2 {
margin:5px 0 14px; font-size:18px;
}
.mortgage-purchase-summary dl {
display:grid; gap:8px; margin:0;
}
.mortgage-purchase-summary dl > div {
display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#faf9f6;
}
.mortgage-purchase-summary dt {
color:var(--muted); font-size:10px;
}
.mortgage-purchase-summary dd {
margin:0; font-size:13px; font-weight:850; text-align:right;
}
.mortgage-purchase-summary .is-total {
color:#fff; border-color:transparent; background:var(--violet);
}
.mortgage-purchase-summary .is-total dt {
color:#e8e2ff;
}
.mortgage-purchase-summary .is-over {
border-color:#cfe783; background:#efffb9;
}
.mortgage-purchase-summary .is-over dd {
color:#365000;
}
.mortgage-purchase-summary > p {
margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.55;
}
.mortgage-expense-summary {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:14px;
}
.mortgage-expense-summary > div {
display:flex; min-height:78px; flex-direction:column; justify-content:space-between; gap:8px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.mortgage-expense-summary span {
color:var(--muted); font-size:9px; line-height:1.4;
}
.mortgage-expense-summary strong {
font-size:13px;
}
.mortgage-expense-summary .is-accent {
color:#fff; border-color:transparent; background:linear-gradient(140deg,#6c47e7,#4728b9);
}
.mortgage-expense-summary .is-accent span {
color:#e8e2ff;
}
.mortgage-money-bar {
height:25px; display:flex; overflow:hidden; margin:14px 0; border-radius:999px; background:#eeeae4;
}
.mortgage-money-bar span {
min-width:2px;
}
.mortgage-money-values {
display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:9px;
}
.mortgage-money-values > div {
display:grid; min-width:0; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:6px 8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.mortgage-money-values i {
width:9px; height:9px; border-radius:50%;
}
.mortgage-money-values span {
min-width:0; grid-column:2/-1; overflow-wrap:break-word; color:var(--muted); font-size:9px;
}
.mortgage-money-values strong {
min-width:0; overflow-wrap:anywhere; grid-column:2; font-size:12px;
}
.mortgage-money-values small {
grid-column:3; grid-row:2; color:var(--muted); font-size:9px;
}
.mortgage-tax-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
}
.mortgage-tax-grid > div {
display:flex; min-height:95px; flex-direction:column; justify-content:center; gap:7px; padding:14px; border:1px solid #ddd7ef; border-radius:13px; background:#f8f5ff;
}
.mortgage-tax-grid span,
.mortgage-tax-grid small {
color:var(--muted); font-size:9px; line-height:1.4;
}
.mortgage-tax-grid strong {
font-size:14px;
}
.mortgage-tax-grid .is-accent {
color:#fff; border-color:transparent; background:var(--violet);
}
.mortgage-tax-grid .is-accent span {
color:#e8e2ff;
}
.mortgage-tax-result > p {
margin:11px 0 0; color:var(--muted); font-size:9px; line-height:1.55;
}
.mortgage-scenario-table {
width:100%; min-width:650px; table-layout:auto; border-collapse:collapse; background:#fff; font-size:11px; font-variant-numeric:tabular-nums;
}
.mortgage-scenario-table th,
.mortgage-scenario-table td {
padding:12px 15px; border-bottom:1px solid #eeece7; text-align:right; white-space:nowrap;
}
.mortgage-scenario-table th:first-child {
text-align:left;
}
.mortgage-scenario-table thead th {
color:var(--muted); background:#f6f4ef; font-size:9px; text-transform:uppercase;
}
.mortgage-scenario-table tbody tr:last-child > * {
border-bottom:0;
}
.mortgage-scenario-table tbody tr.is-selected > * {
background:#f1edff;
}
.mortgage-down-comparison th small {
display:block; margin-top:3px; color:var(--violet); font-size:7px; text-transform:uppercase;
}
.mortgage-down-comparison > p {
margin:12px 0 6px; color:#514967; font-size:10px; line-height:1.55;
}
.mortgage-down-comparison > small {
color:var(--muted); font-size:8px; line-height:1.45;
}
.mortgage-schedule .table-scroll {
max-height:520px;
}
.mortgage-schedule thead th {
position:sticky; top:0; z-index:2; background:#f6f3ec;
}
.mortgage-schedule th:first-child,
.mortgage-schedule td:first-child {
position:sticky; left:0; z-index:1; background:#fff;
}
.mortgage-schedule thead th:first-child {
z-index:3; background:#f6f3ec;
}
.credit-mode-selector,
.credit-type-selector,
.credit-duration {
min-width:0; margin:0 0 18px; padding:17px; border:1px solid #d8d1ef; border-radius:16px; background:#f8f5ff;
}
.credit-mode-selector legend,
.credit-type-selector legend,
.credit-duration legend {
padding:0 7px; color:var(--ink); font-size:13px; font-weight:850;
}
.credit-mode-selector > div {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;
}
.credit-type-selector > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.credit-mode-selector label,
.credit-type-selector label {
position:relative; min-width:0; cursor:pointer;
}
.credit-mode-selector input,
.credit-type-selector input {
position:absolute; width:1px; height:1px; opacity:0;
}
.credit-mode-selector span,
.credit-type-selector span {
min-height:50px; display:flex; align-items:center; justify-content:center; padding:9px 12px; border:1px solid #ddd7ef; border-radius:11px; color:#5c5668; background:#fff; font-size:10px; font-weight:800; line-height:1.25; text-align:center;
}
.credit-type-selector span {
min-height:66px; flex-direction:column; gap:4px;
}
.credit-type-selector b {
color:var(--ink); font-size:11px;
}
.credit-type-selector small {
color:var(--muted); font-size:8px; font-weight:650;
}
.credit-mode-selector input:checked + span,
.credit-type-selector input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.credit-type-selector input:checked + span b {
color:#fff;
}
.credit-type-selector input:checked + span small {
color:#e8e2ff;
}
.credit-mode-selector input:focus-visible + span,
.credit-type-selector input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2);
}
.credit-duration > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.credit-duration .field {
margin:0;
}
.credit-prepayments {
min-width:0; max-width:100%; margin:0 0 18px; border:1px solid var(--line); border-radius:15px; background:#f7f4ff;
}
.credit-prepayments summary {
padding:15px 17px; color:#4d348f; cursor:pointer; font-size:11px; font-weight:850;
}
.credit-prepayments[open] summary {
border-bottom:1px solid #ded7f2;
}
.credit-prepayments-body {
display:grid; min-width:0; grid-template-columns:minmax(0,1fr); gap:13px; padding:17px;
}
.credit-prepayments-body > div {
display:grid; min-width:0; grid-template-columns:minmax(0,1fr); gap:12px;
}
.credit-prepayments-body > p {
margin:0; color:var(--muted); font-size:9px; line-height:1.5;
}
.credit-prepayment-card {
min-width:0; padding:15px; border:1px solid #ddd7ef; border-radius:14px; background:#fff;
}
.credit-prepayment-head {
display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px;
}
.credit-prepayment-head strong {
color:var(--ink); font-size:11px;
}
.credit-prepayment-head button {
padding:0; border:0; color:#a34444; background:transparent; cursor:pointer; font:inherit; font-size:9px; font-weight:750;
}
.credit-prepayment-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.credit-prepayment-grid .field {
margin:0;
}
.credit-prepayment-strategy {
min-width:0; margin:0; padding:0; border:0;
}
.credit-prepayment-strategy legend {
margin-bottom:8px; padding:0; color:#555762; font-size:11px; font-weight:750;
}
.credit-add-prepayment {
width:fit-content; max-width:100%; white-space:normal; min-height:42px; padding:9px 15px; cursor:pointer; color:var(--violet); font-weight:800;
}
.credit-composition,
.credit-chart {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.credit-composition h2,
.credit-chart h2 {
margin:5px 0 0; font-size:18px;
}
.credit-composition-bar {
height:22px; display:flex; overflow:hidden; margin:15px 0 12px; border-radius:999px; background:#eeeae4;
}
.credit-composition-bar span:nth-child(1) {
background:var(--violet);
}
.credit-composition-bar span:nth-child(2) {
background:#d3683f;
}
.credit-composition-bar span:nth-child(3) {
background:#7b8f32;
}
.credit-composition-values {
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
}
.credit-composition-values > div {
display:flex; min-width:0; flex-direction:column; gap:4px;
}
.credit-composition-values > div:last-child {
text-align:right;
}
.credit-composition-values strong {
color:var(--ink); font-size:15px;
}
.credit-composition-values span {
color:var(--muted); font-size:9px;
}
.credit-composition-values b {
color:var(--ink);
}
.credit-chart-head {
display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:13px;
}
.credit-chart-switch {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid #dedbd4; border-radius:12px; background:#fff;
}
.credit-chart-switch button {
min-height:36px; padding:7px 11px; border:0; border-radius:8px; color:var(--muted); background:transparent; cursor:pointer; font:inherit; font-size:9px; font-weight:800;
}
.credit-chart-switch button.is-active {
color:#fff; background:var(--violet);
}
.credit-chart-switch button:focus-visible {
outline:3px solid rgba(99,62,229,.2);
}
.credit-chart-legend {
min-height:22px; display:flex; flex-wrap:wrap; gap:11px; color:var(--muted); font-size:9px; font-weight:750;
}
.credit-chart-legend span {
display:inline-flex; align-items:center; gap:6px;
}
.credit-chart-legend span::before {
width:18px; height:3px; border-radius:999px; background:currentColor; content:"";
}
.credit-chart-scroll {
overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.credit-chart svg {
display:block; min-width:590px; width:100%; height:auto;
}
.credit-schedule-toggle {
width:100%; min-height:44px; margin-top:12px; cursor:pointer; color:var(--violet); font-weight:800;
}
.credit-expenses {
margin:0 0 18px; border:1px solid var(--line); border-radius:15px; background:#f7f4ff;
}
.credit-expenses summary {
padding:15px 17px; color:#4d348f; cursor:pointer; font-size:11px; font-weight:850;
}
.credit-expenses[open] summary {
border-bottom:1px solid #ded7f2;
}
.credit-expenses-body {
display:grid; gap:14px; padding:17px;
}
.credit-expenses-body .check-field {
min-height:48px; margin:0; color:var(--ink); font-weight:800;
}
.credit-expenses-body > p {
margin:0; color:var(--muted); font-size:9px; line-height:1.5;
}
.credit-expense-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.credit-expense-grid .field {
margin:0;
}
.credit-prepayment-comparison,
.credit-cost-summary {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.credit-prepayment-comparison h2,
.credit-cost-summary h2 {
margin:5px 0 14px; font-size:18px;
}
.credit-before-after-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.credit-before-after-grid article {
padding:16px; border:1px solid var(--line); border-radius:15px; background:#faf9f6;
}
.credit-before-after-grid article > span {
color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase;
}
.credit-before-after-grid article.is-accent {
color:#fff; border-color:transparent; background:linear-gradient(140deg,#6c47e7,#4728b9);
}
.credit-before-after-grid article.is-accent > span {
color:#e8e2ff;
}
.credit-before-after-grid dl {
display:grid; gap:8px; margin:13px 0 0;
}
.credit-before-after-grid dl div {
display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:8px; border-top:1px solid var(--line);
}
.credit-before-after-grid article.is-accent dl div {
border-color:rgba(255,255,255,.16);
}
.credit-before-after-grid dt {
color:var(--muted); font-size:9px;
}
.credit-before-after-grid article.is-accent dt {
color:#e8e2ff;
}
.credit-before-after-grid dd {
margin:0; font-size:12px; font-weight:850; text-align:right;
}
.credit-savings {
display:grid; grid-template-columns:auto 1fr 1fr; align-items:center; gap:12px; margin-top:12px; padding:15px 17px; border:1px solid #c9df8b; border-radius:14px; background:#f2fadf;
}
.credit-savings span {
color:#55700b; font-size:9px; font-weight:850; text-transform:uppercase;
}
.credit-savings strong {
color:#354b00; font-size:12px; text-align:right;
}
.credit-strategy-comparison {
margin-top:18px; padding:17px; border:1px solid #d8d1ef; border-radius:15px; background:#f8f5ff;
}
.credit-strategy-comparison h3 {
margin:5px 0 13px; font-size:17px;
}
.credit-strategy-comparison table {
width:100%; border-collapse:collapse; background:#fff; font-size:10px;
}
.credit-strategy-comparison th,
.credit-strategy-comparison td {
padding:11px 12px; border-bottom:1px solid #eeece7; text-align:right; white-space:nowrap;
}
.credit-strategy-comparison th:first-child {
text-align:left;
}
.credit-strategy-comparison thead th {
color:var(--muted); background:#f6f4ef; font-size:8px; text-transform:uppercase;
}
.credit-strategy-comparison td.is-best {
color:#4c6b00; background:#f3fadf; font-weight:850;
}
.credit-strategy-comparison > p {
margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.5;
}
.credit-strategy-comparison > p strong {
color:#4c6b00;
}
.credit-cost-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.credit-cost-grid > div {
min-height:90px; display:flex; flex-direction:column; justify-content:space-between; gap:7px; padding:15px; border-radius:14px; background:#f5f3ee;
}
.credit-cost-grid span,
.credit-cost-grid small {
color:var(--muted); font-size:9px; line-height:1.4;
}
.credit-cost-grid strong {
color:var(--ink); font-size:16px;
}
.credit-cost-grid .is-accent {
color:#fff; background:var(--violet);
}
.credit-cost-grid .is-accent span,
.credit-cost-grid .is-accent strong {
color:#fff;
}
.credit-cost-summary > p {
margin:11px 0 0; color:var(--muted); font-size:9px; line-height:1.5;
}
.credit-payment-type-comparison {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.credit-payment-type-comparison h2 {
margin:5px 0 14px; font-size:18px;
}
.credit-payment-type-comparison table,
.credit-guide-table table {
width:100%; border-collapse:collapse; background:#fff; font-size:10px;
}
.credit-payment-type-comparison th,
.credit-payment-type-comparison td,
.credit-guide-table th,
.credit-guide-table td {
padding:11px 12px; border-bottom:1px solid #eeece7; text-align:center; white-space:nowrap;
}
.credit-payment-type-comparison th:first-child,
.credit-guide-table th:first-child {
text-align:left;
}
.credit-payment-type-comparison thead th,
.credit-guide-table thead th {
color:var(--muted); background:#f6f4ef; font-size:8px; text-transform:uppercase;
}
.credit-payment-type-comparison > p {
margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.55;
}
.credit-payment-type-comparison > p strong {
color:var(--violet);
}
.credit-guide-table {
margin:14px 0 17px;
}
.compound-target {
padding:14px; border:1px solid #d8d1ef; border-radius:14px; background:#f8f5ff;
}
.compound-section {
min-width:0; margin:0 0 15px; padding:17px 17px 2px; border:1px solid var(--line); border-radius:16px; background:#faf9f6;
}
.compound-section legend {
padding:0 7px; color:var(--ink); font-size:12px; font-weight:850;
}
.compound-duration {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.compound-contribution-grid {
display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr) minmax(220px,1.4fr); gap:12px;
}
.compound-contribution-grid.is-two-column {
grid-template-columns:minmax(0,1fr) minmax(220px,1.4fr);
}
.compound-timing > span {
min-height:14px;
}
.segmented-control {
display:grid; grid-template-columns:1fr 1fr; gap:4px; min-height:54px; padding:4px; border:1px solid #dedbd4; border-radius:13px; background:#fff;
}
.segmented-control label {
position:relative; min-width:0; cursor:pointer;
}
.segmented-control input {
position:absolute; width:1px; height:1px; opacity:0;
}
.segmented-control span {
height:44px; display:grid; place-items:center; padding:0 8px; border-radius:9px; color:var(--muted); font-size:10px; font-weight:800; text-align:center;
}
.segmented-control input:checked + span {
color:#fff; background:var(--violet); box-shadow:0 5px 12px rgba(99,62,229,.18);
}
.segmented-control input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2);
}
.segmented-control input:disabled + span {
color:#9c99a2; background:transparent; cursor:not-allowed;
}
.additional-params {
margin:1px 0 18px; border:1px solid var(--line); border-radius:15px; background:#f7f4ff;
}
.additional-params summary {
padding:15px 17px; color:#4d348f; cursor:pointer; font-size:11px; font-weight:850;
}
.additional-params[open] summary {
border-bottom:1px solid #ded7f2;
}
.additional-params-body {
display:grid; gap:15px; padding:17px;
}
.additional-params-body > .field {
max-width:360px; margin:0;
}
.tax-settings {
display:grid; grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr); align-items:start; gap:14px; padding:15px; border:1px solid #ddd7ef; border-radius:14px; background:#fff;
}
.tax-settings .check-field {
min-height:54px; margin:0; color:var(--ink); font-weight:800;
}
.tax-settings .field {
margin:0;
}
.advanced-settings {
padding:15px; border-top:1px solid #ddd7ef;
}
.advanced-settings > strong {
display:block; margin-bottom:13px; color:#4d348f; font-size:11px;
}
.advanced-settings .field {
max-width:420px; margin:0;
}
.compound-rate-summary {
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:13px;
}
.compound-result-period {
margin:17px 0 0; font-size:18px;
}
.compound-rate-summary > div {
display:flex; min-width:0; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px; border:1px solid #ddd7ef; border-radius:13px; background:#f8f5ff;
}
.compound-rate-summary span {
color:var(--muted); font-size:9px; line-height:1.4;
}
.compound-rate-summary strong {
color:var(--violet); font-size:16px; white-space:nowrap;
}
.compound-tax-breakdown {
margin-top:14px; padding:17px; border:1px solid #d8d1ef; border-radius:15px; background:#fff;
}
.compound-tax-breakdown h2 {
margin:5px 0 13px; font-size:18px;
}
.compound-tax-flow {
display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px;
}
.compound-tax-flow > div {
min-width:0; padding:13px; border:1px solid #ddd7ef; border-radius:12px; background:#f8f5ff;
}
.compound-tax-flow span {
display:block; color:var(--muted); font-size:9px; line-height:1.4;
}
.compound-tax-flow strong {
display:block; margin-top:6px; font-size:14px; line-height:1.25;
}
.compound-tax-flow .is-accent {
border-color:#cfe783; background:#efffb9;
}
.compound-tax-flow .is-accent strong {
color:#365000;
}
.compound-tax-arrow {
color:var(--violet) !important; font-size:18px !important; font-weight:850;
}
.compound-effect {
margin-top:14px; padding:17px; border:1px solid #d8d1ef; border-radius:15px; background:#f8f5ff;
}
.compound-effect h2 {
margin:5px 0 13px; font-size:18px;
}
.compound-effect-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.compound-effect-grid > div {
min-width:0; padding:13px; border:1px solid #ddd7ef; border-radius:12px; background:#fff;
}
.compound-effect-grid span {
display:block; min-height:25px; color:var(--muted); font-size:8px; line-height:1.4;
}
.compound-effect-grid strong {
display:block; margin-top:6px; color:var(--ink); font-size:13px; line-height:1.25;
}
.compound-effect-grid .is-accent {
border-color:#cfe783; background:#efffb9;
}
.compound-effect-grid .is-accent strong {
color:#365000;
}
.compound-effect > p {
margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5;
}
.compound-share {
margin:12px 0 0; padding:13px 15px; border-radius:12px; color:#514b5f; background:#efffb9; font-size:11px; line-height:1.5;
}
.compound-share strong {
color:var(--ink); font-size:14px;
}
.compound-crossover {
margin-top:12px; padding:16px 17px; border:1px solid #d8d2ea; border-radius:14px; background:#fff;
}
.compound-crossover strong {
color:#443373; font-size:12px;
}
.compound-crossover p {
margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.55;
}
.compound-scenarios {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.compound-scenarios h2 {
margin:5px 0 14px; font-size:18px;
}
.compound-scenario-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
}
.compound-scenario-grid article {
position:relative; min-height:92px; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.compound-scenario-grid article.is-selected {
color:#fff; border-color:transparent; background:var(--violet); box-shadow:0 10px 22px rgba(99,62,229,.18);
}
.compound-scenario-grid span {
color:var(--muted); font-size:9px; font-weight:750;
}
.compound-scenario-grid .is-selected span {
color:#e8e2ff;
}
.compound-scenario-grid strong {
font-size:15px;
}
.compound-scenario-grid small {
position:absolute; right:9px; top:9px; color:var(--lime); font-size:7px; font-weight:850; text-transform:uppercase;
}
.compound-scenarios > p {
margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5;
}
.compound-chart {
margin-top:25px; padding-top:23px; border-top:1px solid var(--line);
}
.compound-chart-head {
display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px;
}
.compound-chart h2 {
margin:5px 0 0; font-size:18px;
}
.compound-chart-legend {
display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; color:var(--muted); font-size:9px; font-weight:750;
}
.compound-chart-legend span {
display:inline-flex; align-items:center; gap:6px;
}
.compound-chart-legend span::before {
width:18px; height:3px; border-radius:999px; background:currentColor; content:"";
}
.compound-chart-legend .is-total {
color:var(--violet);
}
.compound-chart-legend .is-own {
color:#a34b27;
}
.compound-chart-legend .is-interest {
color:#526d08;
}
.compound-chart-legend .is-simple {
color:#3d66ab;
}
.compound-simple-toggle {
display:inline-flex; align-items:center; gap:5px; cursor:pointer;
}
.compound-simple-toggle input {
width:14px; height:14px; margin:0; accent-color:#4c78c2;
}
.compound-simple-toggle input:not(:checked) + span {
opacity:.45; text-decoration:line-through;
}
.compound-chart-scroll {
overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.compound-chart svg {
display:block; min-width:590px; width:100%; height:auto;
}
.compound-line-total {
stroke:var(--violet);
}
.compound-line-own {
stroke:#d3683f; stroke-dasharray:8 6;
}
.compound-line-interest {
stroke:#7d9d20;
}
.compound-line-simple {
stroke:#4c78c2; stroke-dasharray:4 5;
}
.alcohol-section {
min-width: 0; margin: 0 0 22px; padding: 0; border: 0;
}
.alcohol-section legend {
width: 100%; margin: 0 0 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 850;
}
.alcohol-drinks {
display: grid; gap: 12px;
}
.alcohol-drink-row {
position: relative; display: grid; grid-template-columns: 1.35fr repeat(3,minmax(0,1fr)); gap: 11px; padding: 16px 16px 1px; border: 1px solid var(--line); border-radius: 16px; background: #faf9f6;
}
.alcohol-drink-row .field {
margin-bottom: 14px;
}
.alcohol-drink-row .field input,
.alcohol-drink-row .field select {
height: 49px; background-color: #fff; font-size: 13px;
}
.add-drink,
.remove-drink {
border: 0; color: var(--violet); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800;
}
.add-drink {
margin: 11px 0 0; padding: 7px 0;
}
.remove-drink {
position: absolute; right: 12px; bottom: -28px; z-index: 2; padding: 5px; color: #9b3535;
}
.alcohol-drink-row:not(:last-child) {
margin-bottom: 13px;
}
.alcohol-risk {
align-items: flex-start; padding: 14px; border-radius: 13px; background: #f5f3ee; line-height: 1.45;
}
.drink-presets {
margin: -2px 0 15px;
}
.drink-presets > span {
display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 750;
}
.drink-presets > div {
display: flex; flex-wrap: wrap; gap: 8px;
}
.drink-presets button {
display: inline-flex; align-items: center; gap: 7px; min-height: 37px; padding: 8px 11px; border: 1px solid #dcd7cf; border-radius: 999px; color: #49464f; background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; transition: border-color .2s, color .2s, background .2s;
}
.drink-presets button:hover,
.drink-presets button:focus-visible {
border-color: var(--violet); color: var(--violet); background: #f7f4ff; outline: 0;
}
.drink-presets button small {
color: var(--muted); font-size: 8px; font-weight: 750;
}
.timing-note {
margin: -5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55;
}
.safety-factor {
margin: 0 0 17px; padding: 16px 18px; border: 1px solid #d8d2ea; border-radius: 15px; background: #f7f4ff;
}
.safety-factor > div {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.safety-factor strong {
color: #453080; font-size: 12px;
}
.safety-factor small {
color: #756d8a; font-size: 9px; font-weight: 700;
}
.safety-factor .alcohol-risk {
margin: 0 0 8px; padding: 0; background: transparent; color: #4f4a5f;
}
.safety-factor > p {
margin: 0 0 0 28px; color: #756d8a; font-size: 9px; line-height: 1.5;
}
.bac-chart {
margin-top: 25px; padding-top: 23px; border-top: 1px solid var(--line);
}
.bac-chart-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px;
}
.bac-chart h2 {
margin: 5px 0 0; font-size: 18px;
}
.bac-chart-legend {
display: flex; flex-wrap: wrap; gap: 11px; color: var(--muted); font-size: 9px; font-weight: 750;
}
.bac-chart-legend span {
display: inline-flex; align-items: center; gap: 6px;
}
.bac-chart-legend span::before {
width: 18px; height: 3px; border-radius: 999px; background: currentColor; content: "";
}
.bac-chart-legend .is-average {
color: var(--violet);
}
.bac-chart-legend .is-upper {
color: #a34b27;
}
.bac-chart-scroll {
overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.bac-chart svg {
display: block; min-width: 560px; width: 100%; height: auto;
}
.chart-grid-line {
stroke: #ebe8e1; stroke-width: 1;
}
.chart-now-line {
stroke: #9a92ad; stroke-width: 1.5; stroke-dasharray: 5 5;
}
.chart-line {
fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4;
}
.chart-line-average {
stroke: var(--violet);
}
.chart-line-upper {
stroke: #d3683f;
}
.chart-axis-text {
fill: #77727f; font-size: 10px; font-weight: 650;
}
.chart-now-text {
fill: #51485f; font-weight: 850;
}
.bac-chart > p {
margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55;
}
.safety-preface {
margin: 4px 0 17px; padding: 16px 18px; border: 1px solid #e5d99b; border-radius: 15px; background: #fff9dc;
}
.safety-preface strong {
display: block; margin-bottom: 5px; color: #685716; font-size: 12px;
}
.safety-preface p {
margin: 0; color: #6f6240; font-size: 11px; line-height: 1.55;
}
.driver-status {
margin-top: 14px; padding: 17px 18px; border-radius: 15px;
}
.driver-status strong {
display: block; margin-bottom: 6px; font-size: 14px;
}
.driver-status p {
margin: 0; font-size: 11px; line-height: 1.55;
}
.driver-status.is-danger {
border: 1px solid #efbaba; color: #742323; background: #fff0f0;
}
.driver-status.is-caution {
border: 1px solid #e7d48e; color: #66520d; background: #fff9dc;
}
.driver-status.is-zero {
border: 1px solid #b9dcc5; color: #245d38; background: #effaf3;
}
.matrix-privacy-note {
max-width:var(--shell-reading-max); margin:-4px 0 17px; color:var(--muted); font-size:11px; line-height:1.6;
}
.matrix-result {
margin-top: 26px; padding-top: 25px; border-top: 1px solid var(--line);
}
.matrix-result > h2 {
margin: 7px 0 18px; font-size: 24px; letter-spacing: -.035em;
}
.matrix-result-actions {
display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-2px 0 20px; padding:11px 12px; border:1px solid #d9d1fb; border-radius:14px; background:#f7f4ff;
}
.matrix-result-actions button {
display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 15px; border:0; border-radius:11px; color:#fff; background:var(--violet); font:inherit; font-size:11px; font-weight:850; cursor:pointer;
}
.matrix-result-actions button:hover {
background:#4f2fc4;
}
.matrix-result-actions button:focus-visible {
outline:3px solid rgba(211,104,63,.42); outline-offset:2px;
}
.matrix-result-actions button span {
font-size:16px;
}
.matrix-result-actions small {
max-width:250px; color:var(--muted); font-size:9px; line-height:1.45; text-align:right;
}
.matrix-map {
position: relative; width: min(100%,560px); aspect-ratio: 1; margin: 0 auto 22px; border-radius: 28px; background: radial-gradient(circle at center,rgba(217,248,76,.32),transparent 27%),linear-gradient(145deg,#f3efff,#fbfaf6);
}
.matrix-map svg {
position: absolute; inset: 7%; width: 86%; height: 86%;
}
.matrix-map svg polygon,
.matrix-map svg line {
fill: none; stroke: rgba(99,62,229,.3); stroke-width: 2;
}
.matrix-map svg polygon:last-of-type {
stroke: rgba(211,104,63,.3);
}
.matrix-node {
position: absolute; width: 62px; min-height: 62px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 6px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--violet); box-shadow: 0 7px 20px rgba(63,41,143,.2); transform: translate(-50%,-50%); text-align: center; font: inherit; cursor: pointer; transition: transform .18s ease,box-shadow .18s ease,outline-color .18s ease;
}
.matrix-node:hover,
.matrix-node:focus-visible {
transform:translate(-50%,-50%) scale(1.08); box-shadow:0 10px 26px rgba(63,41,143,.32); outline:3px solid rgba(211,104,63,.48); outline-offset:3px;
}
.matrix-node.is-selected {
outline:4px solid var(--orange); outline-offset:3px;
}
.matrix-node strong {
font-size: 19px; line-height: 1;
}
.matrix-node span {
max-width: 52px; font-size: 7px; line-height: 1.05;
}
.matrix-node.is-top {
left:50%; top:6%;
}
.matrix-node.is-top-right {
left:81%; top:19%;
}
.matrix-node.is-right {
left:94%; top:50%;
}
.matrix-node.is-bottom-right {
left:81%; top:81%;
}
.matrix-node.is-bottom {
left:50%; top:94%;
}
.matrix-node.is-bottom-left {
left:19%; top:81%;
}
.matrix-node.is-left {
left:6%; top:50%;
}
.matrix-node.is-top-left {
left:19%; top:19%;
}
.matrix-node.is-center {
left:50%; top:50%; width:78px; min-height:78px; color:var(--ink); background:var(--lime); box-shadow:0 9px 24px rgba(147,170,29,.25);
}
.matrix-node.is-center strong {
font-size:25px;
}
.matrix-line-marker {
position:absolute; z-index:2; display:flex; align-items:center; gap:3px; padding:4px 7px; border:1px solid rgba(99,62,229,.17); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.92); box-shadow:0 4px 12px rgba(42,29,92,.1); transform:translate(-50%,-50%); pointer-events:none;
}
.matrix-line-marker b {
color:var(--orange); font-size:14px;
}
.matrix-line-marker small {
font-size:8px; font-weight:850;
}
.matrix-line-marker.is-tail {
left:47%; top:72%;
}
.matrix-line-marker.is-love {
left:62%; top:67%;
}
.matrix-line-marker.is-money {
left:70%; top:58%;
}
.matrix-position-panel {
margin:-4px 0 12px; padding:18px; border:1px solid #d9d1fb; border-radius:16px; background:#f7f4ff;
}
.matrix-position-panel > div {
display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase;
}
.matrix-position-panel > div b {
width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--violet); font-size:13px;
}
.matrix-position-panel h3 {
margin:8px 0; font-size:18px;
}
.matrix-position-panel p {
margin:5px 0; color:var(--muted); font-size:10px; line-height:1.55;
}
.matrix-position-panel p strong {
color:var(--ink);
}
.matrix-position-panel .matrix-focus {
color:var(--violet); font-weight:750;
}
.matrix-legend {
margin-bottom:16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.matrix-legend > strong {
font-size:12px;
}
.matrix-legend > p {
margin:4px 0 10px; color:var(--muted); font-size:9px;
}
.matrix-legend ul {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; margin:0; padding:0; list-style:none;
}
.matrix-legend li {
display:flex; min-width:0; align-items:center; gap:7px; color:var(--muted); font-size:9px; line-height:1.35;
}
.matrix-legend li i {
width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; border-radius:8px; color:var(--violet); background:var(--soft-violet); font-style:normal; font-size:10px; font-weight:850;
}
.matrix-legend li i.is-point {
border-radius:50%; color:#fff; background:var(--violet);
}
.matrix-legend li i.is-center {
border-radius:50%; color:var(--ink); background:var(--lime);
}
.matrix-channel-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px;
}
.matrix-channel-grid > div,
.matrix-channel-grid > article {
min-height:75px; display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.matrix-channel-grid span {
color:var(--muted); font-size:9px; font-weight:750; text-transform:uppercase;
}
.matrix-channel-grid strong {
font-size:14px;
}
.matrix-channel-grid p {
margin:0; color:var(--muted); font-size:9px; line-height:1.55;
}
.matrix-age-section {
margin:0 0 18px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#faf9f6;
}
.matrix-current-age {
display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; padding:17px; border-radius:15px; color:#fff; background:linear-gradient(135deg,#6c47e7,#4728b9);
}
.matrix-current-age > div {
min-width:0;
}
.matrix-current-age span {
color:#ded6ff; font-size:9px; font-weight:800; text-transform:uppercase;
}
.matrix-current-age h3 {
margin:7px 0 4px; font-size:18px;
}
.matrix-current-age p {
margin:0; color:#eeeaff; font-size:10px;
}
.matrix-current-age > b {
width:52px; min-width:52px; height:52px; min-height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--lime); font-size:21px; line-height:1;
}
.matrix-age-heading {
display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:13px;
}
.matrix-age-heading h3 {
margin:5px 0 0; font-size:17px;
}
.matrix-age-heading > p {
max-width:230px; margin:0; color:var(--muted); font-size:9px; line-height:1.45; text-align:right;
}
.matrix-age-scale {
width:100%; max-width:100%; min-width:0; display:grid; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:4px;
}
.matrix-age-decade {
min-width:500px; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:8px;
}
.matrix-age-decade > strong {
color:var(--muted); font-size:9px;
}
.matrix-age-decade > div {
display:grid; grid-template-columns:repeat(9,minmax(38px,1fr)); gap:4px;
}
.matrix-age-decade span {
min-height:42px; display:flex; align-items:center; justify-content:center; flex-direction:column; border:1px solid var(--line); border-radius:9px; background:#fff;
}
.matrix-age-decade span small {
color:var(--muted); font-size:7px;
}
.matrix-age-decade span b {
color:var(--violet); font-size:11px;
}
.matrix-age-decade span.is-current {
border-color:var(--orange); background:#fff0e8; box-shadow:inset 0 0 0 1px var(--orange);
}
.matrix-meaning-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px;
}
.matrix-meaning-card {
padding:17px; border:1px solid var(--line); border-radius:16px; background:#fff;
}
.matrix-meaning-card.is-accent {
border-color:transparent; color:#fff; background:linear-gradient(140deg,#6c47e7,#4728b9);
}
.matrix-meaning-head {
display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase;
}
.matrix-meaning-head b {
width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--violet); font-size:12px;
}
.matrix-meaning-card.is-accent .matrix-meaning-head {
color:#e8e2ff;
}
.matrix-meaning-card.is-accent .matrix-meaning-head b {
color:var(--ink); background:var(--lime);
}
.matrix-meaning-card h3 {
margin:10px 0; font-size:17px;
}
.matrix-meaning-card p {
margin:6px 0; color:var(--muted); font-size:10px; line-height:1.55;
}
.matrix-meaning-card p strong {
color:var(--ink);
}
.matrix-meaning-card.is-accent p {
color:#eeeaff;
}
.matrix-meaning-card.is-accent p strong {
color:#fff;
}
.matrix-meaning-card .matrix-focus {
margin-top:11px; padding-top:10px; border-top:1px solid var(--line); font-weight:750;
}
.matrix-meaning-card.is-accent .matrix-focus {
border-color:rgba(255,255,255,.18);
}
.matrix-details {
margin-top:13px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.matrix-details summary {
padding:15px 17px; cursor:pointer; font-size:11px; font-weight:800;
}
.matrix-details > div {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 17px 17px;
}
.matrix-details span {
display:flex; justify-content:space-between; gap:8px; padding:9px; border-radius:10px; color:var(--muted); background:#fff; font-size:9px;
}
.matrix-details b {
color:var(--violet); font-size:11px;
}
.matrix-calculator .matrix-map {
width:min(100%,680px); overflow:hidden;
}
.matrix-calculator .matrix-map svg {
inset:0; width:100%; height:100%;
}
.matrix-calculator .matrix-map svg .matrix-program-line {
stroke:rgba(211,104,63,.34); stroke-dasharray:9 8;
}
.matrix-node-layer {
position:absolute; inset:0;
}
.matrix-calculator .matrix-node {
left:var(--matrix-x); top:var(--matrix-y); width:34px; min-height:34px; z-index:3; gap:0; padding:3px; border-width:2px; background:#8b78d8;
}
.matrix-calculator .matrix-node strong {
font-size:12px;
}
.matrix-calculator .matrix-node span {
display:none;
}
.matrix-calculator .matrix-node.is-primary {
width:58px; min-height:58px; z-index:5; background:var(--violet);
}
.matrix-calculator .matrix-node.is-primary strong {
font-size:18px;
}
.matrix-calculator .matrix-node.is-primary span {
display:block; max-width:50px; font-size:6px;
}
.matrix-calculator .matrix-node.is-secondary {
width:42px; min-height:42px; z-index:4; background:#6550b4;
}
.matrix-calculator .matrix-node.is-secondary strong {
font-size:14px;
}
.matrix-calculator .matrix-node.is-tertiary {
width:31px; min-height:31px; z-index:3; color:var(--violet-dark); border-width:1px; background:var(--soft-violet); box-shadow:0 4px 12px rgba(63,41,143,.16);
}
.matrix-calculator .matrix-node.is-program {
width:35px; min-height:35px; z-index:6; background:var(--orange); box-shadow:0 5px 15px rgba(159,69,35,.22);
}
.matrix-calculator .matrix-node.is-center {
width:76px; min-height:76px; z-index:7; color:var(--ink); background:var(--lime);
}
.matrix-calculator .matrix-node.is-center strong {
font-size:24px;
}
.matrix-calculator .matrix-node.is-center span {
display:block; max-width:64px; color:var(--ink); font-size:7px;
}
.matrix-calculator .matrix-node:hover,
.matrix-calculator .matrix-node:focus-visible {
z-index:10;
}
.matrix-main-grid {
display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 18px;
}
.matrix-main-grid button {
min-width:0; display:flex; align-items:center; justify-content:space-between; gap:7px; padding:10px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:#fff; font:inherit; font-size:8px; font-weight:800; cursor:pointer;
}
.matrix-main-grid button strong {
color:var(--violet); font-size:16px;
}
.matrix-main-grid button.is-accent {
border-color:transparent; color:var(--ink); background:var(--lime);
}
.matrix-main-grid button.is-accent strong {
color:var(--ink);
}
.matrix-main-grid button:hover,
.matrix-main-grid button:focus-visible {
border-color:var(--orange); outline:2px solid rgba(211,104,63,.2); outline-offset:2px;
}
.matrix-result-section {
margin:0 0 18px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#faf9f6;
}
.matrix-section-heading {
display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px;
}
.matrix-section-heading h3 {
margin:5px 0 0; font-size:18px;
}
.matrix-section-heading > p {
max-width:260px; margin:0; color:var(--muted); font-size:9px; line-height:1.5; text-align:right;
}
.matrix-program-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.matrix-program-card {
min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.matrix-program-head {
display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase;
}
.matrix-program-head b {
width:26px; height:26px; display:grid; place-items:center; flex:0 0 26px; border-radius:50%; color:#fff; background:var(--orange); font-size:13px;
}
.matrix-program-values {
display:flex; align-items:center; gap:6px; margin:12px 0 9px;
}
.matrix-program-values button {
width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--violet); font:inherit; font-size:12px; font-weight:850; cursor:pointer;
}
.matrix-program-values button:hover,
.matrix-program-values button:focus-visible {
outline:3px solid rgba(211,104,63,.35); outline-offset:2px;
}
.matrix-program-values > span {
color:var(--muted); font-size:11px;
}
.matrix-program-card p {
margin:0; color:var(--muted); font-size:9px; line-height:1.5;
}
.matrix-table-scroll {
width:100%; overflow-x:auto;
}
.matrix-chakra-table {
width:100%; min-width:460px; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; font-size:10px;
}
.matrix-chakra-table th,
.matrix-chakra-table td {
padding:10px 12px; border-bottom:1px solid var(--line); text-align:center;
}
.matrix-chakra-table th:first-child {
text-align:left;
}
.matrix-chakra-table thead th {
color:var(--muted); background:#f4f1fc; font-size:8px; text-transform:uppercase;
}
.matrix-chakra-table tbody tr:last-child th,
.matrix-chakra-table tbody tr:last-child td {
border-bottom:0;
}
.matrix-chakra-table tbody th small {
display:block; margin-top:3px; color:var(--muted); font-size:7px; font-weight:500;
}
.matrix-chakra-table tfoot th,
.matrix-chakra-table tfoot td {
border-top:2px solid #d9d1fb; border-bottom:0; color:var(--violet); background:#f7f4ff; font-weight:850;
}
.matrix-summary-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; border:0; background:transparent;
}
.matrix-summary-grid > article {
padding:18px; border:1px solid var(--line); border-radius:18px; background:#faf9f6;
}
.matrix-summary-grid h3 {
margin:6px 0 15px; font-size:17px;
}
.matrix-summary-row {
display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line);
}
.matrix-summary-row > span {
display:flex; min-width:0; flex-direction:column; color:var(--muted); font-size:9px;
}
.matrix-summary-row small {
margin-top:3px; font-size:7px;
}
.matrix-summary-row strong {
flex:0 0 auto; color:var(--violet); font-size:13px;
}
.matrix-calculator .matrix-age-scale {
overflow:visible;
}
.matrix-calculator .matrix-age-decade {
min-width:0;
}
.matrix-disclaimer {
margin:18px 0 0;
}
.matrix-v3-summary {
margin:0 0 18px; padding:20px; border:1px solid #d9d1fb; border-radius:20px; background:linear-gradient(145deg,#f7f4ff,#fff);
}
.matrix-v3-summary-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.matrix-v3-summary-card {
min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.matrix-v3-summary-card > div {
width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase;
}
.matrix-v3-summary-card > div b {
color:var(--violet); font-size:11px;
}
.matrix-v3-summary-card h4 {
margin:9px 0 7px; font-size:14px; line-height:1.25;
}
.matrix-v3-summary-card p {
margin:0 0 12px; color:var(--muted); font-size:9px; line-height:1.55;
}
.matrix-text-button {
min-height:34px; margin-top:auto; padding:7px 0; border:0; color:var(--violet); background:transparent; font:inherit; font-size:9px; font-weight:850; cursor:pointer;
}
.matrix-text-button:hover {
text-decoration:underline; text-underline-offset:3px;
}
.matrix-text-button:focus-visible,
.matrix-chakra-toggle:focus-visible,
.matrix-program-details summary:focus-visible {
outline:3px solid rgba(211,104,63,.35); outline-offset:2px;
}
.matrix-diagram-section {
scroll-margin-top:90px;
}
.matrix-editorial-content {
min-width:0;
}
.matrix-editorial-content > h4 {
margin:0 0 9px; font-size:17px;
}
.matrix-editorial-content p {
margin:7px 0; color:var(--muted); font-size:10px; line-height:1.6; white-space:pre-line;
}
.matrix-editorial-content .matrix-editorial-short {
color:var(--ink); font-weight:700;
}
.matrix-editorial-content section {
margin-top:12px;
}
.matrix-editorial-content section h4 {
margin:0 0 6px; color:var(--ink); font-size:10px;
}
.matrix-editorial-content ul {
display:grid; gap:5px; margin:0; padding-left:18px; color:var(--muted); font-size:9px; line-height:1.5;
}
.matrix-editorial-content .matrix-editorial-advice {
padding:11px 12px; border-radius:11px; background:#f1edff;
}
.matrix-purpose-layout {
display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.55fr); gap:20px;
}
.matrix-purpose-layout > .matrix-editorial-content {
padding:16px; border:1px solid #d9d1fb; border-radius:14px; background:#fff;
}
.matrix-purpose-layout > #matrix-purposes {
min-width:0;
}
.matrix-v3-program-grid {
display:grid; gap:11px;
}
.matrix-v3-program-card {
min-width:0; padding:17px; border:1px solid var(--line); border-radius:15px; background:#fff; scroll-margin-top:90px;
}
.matrix-v3-program-head {
display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.matrix-v3-program-head span {
color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase;
}
.matrix-v3-program-head h4 {
margin:5px 0 0; font-size:16px;
}
.matrix-v3-program-head > b {
flex:0 0 auto; padding:8px 10px; border-radius:10px; color:var(--violet); background:#f1edff; font-size:12px; font-variant-numeric:tabular-nums;
}
.matrix-program-lead {
margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.6;
}
.matrix-program-components {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px;
}
.matrix-program-components article {
min-width:0; padding:11px; border:1px solid var(--line); border-radius:11px; background:#faf9f6;
}
.matrix-program-components span {
display:block; color:var(--muted); font-size:7px; font-weight:800; text-transform:uppercase;
}
.matrix-program-components strong {
display:block; margin:6px 0; font-size:11px;
}
.matrix-program-components p {
margin:0; color:var(--muted); font-size:8px; line-height:1.5;
}
.matrix-program-details {
margin-top:12px; border-top:1px solid var(--line);
}
.matrix-program-details summary {
min-height:42px; display:flex; align-items:center; color:var(--violet); cursor:pointer; font-size:9px; font-weight:850;
}
.matrix-program-details > .matrix-editorial-content {
padding-top:2px;
}
.matrix-chakra-toggle {
min-height:34px; display:block; margin:6px 0 -4px; padding:5px 0; border:0; color:var(--violet); background:transparent; font:inherit; font-size:7px; font-weight:800; cursor:pointer; text-align:left;
}
.matrix-chakra-detail-row[hidden] {
display:none !important;
}
.matrix-chakra-detail-row > td {
padding:0 !important; text-align:left !important; white-space:normal; background:#faf9f6;
}
.matrix-chakra-interpretations {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px;
}
.matrix-chakra-interpretations article {
min-width:0; padding:11px; border:1px solid var(--line); border-radius:11px; background:#fff;
}
.matrix-chakra-interpretations span {
display:block; color:var(--muted); font-size:7px; font-weight:800; text-transform:uppercase;
}
.matrix-chakra-interpretations strong {
display:block; margin:6px 0; font-size:10px;
}
.matrix-chakra-interpretations p {
margin:0; color:var(--muted); font-size:8px; line-height:1.5;
}
.matrix-chakra-interpretations .matrix-chakra-axis-note {
margin-bottom:7px; color:var(--ink); font-weight:750;
}
.matrix-chakra-disclaimer {
margin:11px 0 0; color:var(--muted); font-size:8px; line-height:1.5;
}
.matrix-period-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:22px;
}
.matrix-period-grid .matrix-current-age {
min-width:0; margin:0;
}
.matrix-current-age.is-next {
color:var(--ink); border:1px solid #d9d1fb; background:#fff;
}
.matrix-current-age.is-next span,
.matrix-current-age.is-next p {
color:var(--muted);
}
.matrix-current-age.is-next > b {
color:#fff; background:var(--violet);
}
.matrix-current-age p + p {
margin-top:6px; line-height:1.5;
}
@media (max-width: 1020px) {
.compound-contribution-grid,
.compound-contribution-grid.is-two-column {
grid-template-columns:1fr;
}
}
@media (max-width: 720px) {
.compound-effect-grid {
grid-template-columns:1fr;
}
.compound-mode-selector > div {
grid-template-columns:1fr;
}
.compound-mode-selector label:last-child {
grid-column:auto;
}
.mortgage-mode-selector > div {
grid-template-columns:1fr;
}
.mortgage-additional-body [data-mortgage-subsidy-fields],
.mortgage-budget-fields,
.mortgage-budget-grid,
.mortgage-expense-grid,
.mortgage-tax-grid {
grid-template-columns:1fr;
}
.mortgage-purchase-summary dl > div {
align-items:flex-start; flex-direction:column; gap:5px;
}
.mortgage-purchase-summary dd {
text-align:left;
}
.mortgage-expense-summary {
grid-template-columns:1fr;
}
.mortgage-budget-fields > p {
grid-column:auto;
}
.credit-mode-selector > div,
.credit-type-selector > div {
grid-template-columns:1fr;
}
.credit-prepayment-grid,
.credit-composition-values,
.credit-expense-grid,
.credit-before-after-grid,
.credit-cost-grid {
grid-template-columns:1fr;
}
.credit-composition-values > div:last-child {
text-align:left;
}
.credit-savings {
grid-template-columns:1fr;
}
.credit-savings strong {
text-align:left;
}
.credit-chart-head {
align-items:flex-start; flex-direction:column;
}
.credit-chart-switch {
width:100%;
}
.compound-rate-summary {
grid-template-columns:1fr;
}
.compound-tax-flow {
grid-template-columns:1fr;
}
.compound-tax-arrow {
justify-self:center; transform:rotate(90deg);
}
.tax-settings,
.compound-scenario-grid {
grid-template-columns:1fr;
}
.compound-chart-head {
align-items:flex-start; flex-direction:column;
}
.compound-chart-legend {
justify-content:flex-start;
}
.matrix-map {
border-radius: 20px;
}
.matrix-result-actions {
align-items:stretch; flex-direction:column;
}
.matrix-result-actions small {
max-width:none; text-align:left;
}
.matrix-node {
width: 48px; min-height: 48px; padding: 4px;
}
.matrix-node strong {
font-size: 15px;
}
.matrix-node span {
font-size: 6px;
}
.matrix-node.is-center {
width: 62px; min-height: 62px;
}
.matrix-node.is-center strong {
font-size: 20px;
}
.matrix-line-marker {
padding:3px 5px;
}
.matrix-line-marker small {
font-size:6px;
}
.matrix-line-marker b {
font-size:11px;
}
.matrix-age-heading {
align-items:flex-start; flex-direction:column;
}
.matrix-age-heading > p {
text-align:left;
}
.matrix-legend ul {
grid-template-columns:1fr;
}
.arcana-guide ol {
grid-template-columns:1fr;
}
.arcana-guide li,
.arcana-guide li:nth-child(2) {
grid-template-columns:minmax(112px,.72fr) minmax(0,1.28fr); border-top:1px solid var(--line);
}
.arcana-guide li:first-child {
border-top:0;
}
.matrix-channel-grid,
.matrix-meaning-grid,
.matrix-details > div {
grid-template-columns: 1fr;
}
.matrix-program-grid,
.matrix-summary-grid {
grid-template-columns:1fr;
}
.matrix-v3-summary {
padding:16px;
}
.matrix-v3-summary-grid,
.matrix-purpose-layout,
.matrix-program-components,
.matrix-chakra-interpretations,
.matrix-period-grid {
grid-template-columns:1fr;
}
.matrix-v3-program-head {
flex-direction:column;
}
.matrix-v3-program-head > b {
align-self:flex-start;
}
.matrix-chakra-toggle {
min-height:44px; margin-bottom:-8px;
}
.matrix-chakra-table tbody tr.matrix-chakra-detail-row {
display:grid; grid-template-columns:minmax(0,1fr);
}
.matrix-chakra-table tbody tr.matrix-chakra-detail-row > td {
grid-column:1 / -1; display:block;
}
.matrix-chakra-table tbody tr.matrix-chakra-detail-row > td::before {
content:none;
}
.matrix-main-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.matrix-main-grid button:last-child {
grid-column:1 / -1;
}
.matrix-section-heading {
align-items:flex-start; flex-direction:column;
}
.matrix-section-heading > p {
text-align:left;
}
.matrix-calculator .matrix-map {
width:calc(100% + 32px); max-width:none; margin-right:-16px; margin-left:-16px;
}
.matrix-calculator .matrix-node {
width:20px; min-height:20px; padding:1px;
}
.matrix-calculator .matrix-node::after {
content:""; position:absolute; inset:-4px; border-radius:50%;
}
.matrix-calculator .matrix-node strong {
font-size:8px;
}
.matrix-calculator .matrix-node.is-primary {
width:36px; min-height:36px;
}
.matrix-calculator .matrix-node.is-primary strong {
font-size:12px;
}
.matrix-calculator .matrix-node.is-primary span {
display:none;
}
.matrix-calculator .matrix-node.is-secondary {
width:26px; min-height:26px;
}
.matrix-calculator .matrix-node.is-secondary strong {
font-size:9px;
}
.matrix-calculator .matrix-node.is-tertiary {
width:18px; min-height:18px;
}
.matrix-calculator .matrix-node.is-tertiary strong {
font-size:7px;
}
.matrix-calculator .matrix-node.is-program {
width:20px; min-height:20px;
}
.matrix-calculator .matrix-node.is-center {
width:48px; min-height:48px;
}
.matrix-calculator .matrix-node.is-center strong {
font-size:17px;
}
.matrix-calculator .matrix-age-decade {
grid-template-columns:1fr; align-items:start;
}
.matrix-calculator .matrix-age-decade > div {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.matrix-calculator .matrix-age-decade span {
min-height:39px;
}
.matrix-table-scroll {
overflow:visible;
}
.matrix-chakra-table {
min-width:0; border:0; border-radius:0; background:transparent;
}
.matrix-chakra-table thead {
position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.matrix-chakra-table tbody,
.matrix-chakra-table tfoot {
display:grid; gap:8px;
}
.matrix-chakra-table tbody tr {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.matrix-chakra-table tbody th {
grid-column:1 / -1; border-bottom:1px solid var(--line); text-align:left;
}
.matrix-chakra-table tbody td {
display:flex; min-width:0; flex-direction:column; gap:3px; border-bottom:0; font-size:11px; font-weight:850;
}
.matrix-chakra-table tbody td::before {
content:attr(data-label); color:var(--muted); font-size:6px; font-weight:700; text-transform:uppercase;
}
.matrix-chakra-table tfoot tr {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid #d9d1fb; border-radius:12px; background:#f7f4ff;
}
.matrix-chakra-table tfoot th {
grid-column:1 / -1; text-align:left;
}
.matrix-chakra-table tfoot td {
border:0;
}
.alcohol-drink-row {
grid-template-columns: 1fr; padding-bottom: 12px;
}
.safety-factor > div,
.bac-chart-head {
align-items: flex-start; flex-direction: column;
}
.bac-chart-legend {
gap: 8px;
}
.remove-drink {
position: static; justify-self: start; margin: -7px 0 2px;
}
}
@media (max-width:390px) {
.matrix-date-selects {
grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1fr);
}
.matrix-date-selects select {
padding-left:4px; padding-right:18px; background-position:right 4px center;
}
}
@media (max-width:360px) {
.matrix-date-selects {
grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr); gap:4px;
}
}
.matrix-date-selects select,
.alcohol-drink-row .field input,
.alcohol-drink-row .field select {
font-size: var(--text-base);
}
.matrix-date-field legend,
.arcana-guide li,
.arcana-guide li b,
.mortgage-down-section > small,
.mortgage-additional-body > p,
.mortgage-credit-share,
.mortgage-budget-result > p,
.mortgage-budget-result > div + p,
.mortgage-budget-result #mortgage-budget-content > p,
.mortgage-purchase-summary > p,
.mortgage-down-comparison > p,
.mortgage-down-comparison > small,
.drink-presets > span,
.credit-prepayments-body > p,
.credit-expenses-body > p,
.credit-strategy-comparison > p,
.credit-cost-summary > p,
.credit-payment-type-comparison > p,
.compound-effect > p,
.compound-share,
.compound-crossover p,
.compound-scenarios > p,
.timing-note,
.safety-factor > p,
.safety-preface p,
.driver-status p,
.bac-chart > p {
font-size: var(--text-sm);
    line-height: var(--leading-copy);
}
.matrix-date-field legend,
.arcana-guide li b {
font-weight: 650;
}
.safety-factor small,
.drink-presets button small,
.mortgage-expense-heading,
.credit-before-after-grid article > span,
.credit-savings span,
.compound-scenario-grid small {
font-size: var(--text-xs);
}
.safety-factor small,
.safety-factor > p {
color: #70677f;
}
.compound-mode-selector legend,
.mortgage-mode-selector legend,
.mortgage-down-section legend,
.mortgage-duration legend,
.mortgage-subsidy-use legend,
.credit-mode-selector legend,
.credit-type-selector legend,
.credit-duration legend,
.credit-prepayment-strategy legend,
.compound-section legend,
.alcohol-section legend,
.advanced-settings > strong {
font-size: var(--text-sm);
}
.compound-mode-selector span,
.mortgage-mode-selector span,
.credit-mode-selector span,
.credit-type-selector span,
.segmented-control span,
.mortgage-down-presets button,
.credit-chart-switch button,
.drink-presets button,
.add-drink,
.remove-drink {
font-size: var(--text-reading);
    line-height: 1.35;
}
.segmented-control span {
height: auto;
    min-height: 44px;
}
.credit-type-selector b,
.credit-prepayment-head strong,
.credit-prepayment-head button,
.credit-prepayments summary,
.credit-expenses summary,
.mortgage-additional summary,
.additional-params summary,
.safety-factor strong {
font-size: var(--text-sm);
}
.credit-type-selector small {
font-size: var(--text-sm);
}
.mortgage-budget-grid span,
.mortgage-budget-grid small,
.mortgage-purchase-summary dt,
.mortgage-purchase-summary dd,
.mortgage-expense-summary span,
.mortgage-expense-summary strong,
.mortgage-money-values span,
.mortgage-money-values strong,
.mortgage-money-values small,
.mortgage-tax-grid span,
.mortgage-tax-grid small,
.credit-composition-values span,
.credit-before-after-grid dt,
.credit-before-after-grid dd,
.credit-savings strong,
.credit-cost-grid span,
.credit-cost-grid small,
.compound-rate-summary span,
.compound-tax-flow span,
.compound-effect-grid span,
.compound-effect-grid strong,
.compound-scenario-grid span,
.credit-chart-legend,
.compound-chart-legend,
.bac-chart-legend {
font-size: var(--text-sm);
    line-height: 1.45;
}
.mortgage-scenario-table,
.credit-strategy-comparison table,
.credit-payment-type-comparison table,
.credit-guide-table table {
font-size: var(--text-sm);
    line-height: 1.45;
}
.mortgage-scenario-table thead th,
.credit-strategy-comparison thead th,
.credit-payment-type-comparison thead th,
.credit-guide-table thead th,
.mortgage-down-comparison th small {
font-size: var(--text-xs);
}
.matrix-privacy-note,
.matrix-result-actions small,
.matrix-legend > p,
.matrix-legend li,
.matrix-channel-grid p,
.matrix-current-age p,
.matrix-age-heading > p,
.matrix-meaning-card p,
.matrix-program-card p,
.matrix-section-heading > p,
.matrix-v3-summary-card p,
.matrix-program-lead,
.matrix-program-components p,
.matrix-chakra-interpretations p {
font-size: var(--text-sm);
    line-height: var(--leading-copy);
}
.matrix-result-actions button {
min-height: 44px;
    font-size: var(--text-reading);
}
.matrix-legend > strong,
.matrix-channel-grid span,
.matrix-current-age span,
.matrix-age-decade > strong,
.matrix-meaning-head,
.matrix-program-head,
.matrix-summary-row > span,
.matrix-summary-row small,
.matrix-v3-summary-card > div,
.matrix-v3-program-head span,
.matrix-program-components span,
.matrix-chakra-interpretations span {
font-size: var(--text-xs);
    line-height: 1.4;
}
.matrix-channel-grid strong,
.matrix-age-decade span b,
.matrix-details b,
.matrix-program-components strong,
.matrix-chakra-interpretations strong,
.matrix-summary-row strong,
.matrix-v3-summary-card > div b {
font-size: var(--text-sm);
}
.matrix-age-decade span small {
font-size: var(--text-xs);
}
.matrix-details summary,
.matrix-details span,
.matrix-text-button,
.matrix-program-details summary,
.matrix-chakra-toggle {
font-size: var(--text-sm);
    line-height: 1.4;
}
.matrix-text-button,
.matrix-chakra-toggle {
min-height: 44px;
    padding-block: 8px;
}
.matrix-main-grid button {
min-height: 44px;
    font-size: var(--text-xs);
    line-height: 1.35;
    text-align: left;
}
.matrix-chakra-table {
font-size: var(--text-sm);
    line-height: 1.45;
}
.matrix-chakra-table thead th,
.matrix-chakra-table tbody td::before {
font-size: var(--text-xs);
}
.matrix-chakra-table tbody th small {
font-size: var(--text-sm);
    line-height: 1.45;
}
.matrix-chakra-table tbody td {
font-size: var(--text-sm);
}
.matrix-chakra-disclaimer {
color: #5c5f6c;
    font-size: .8125rem;
    line-height: 1.55;
}
.matrix-v3-summary-card h4 {
font-size: var(--text-lg);
}
.matrix-section-heading h3,
.matrix-age-heading h3 {
font-size: 1.25rem;
    line-height: 1.25;
}
.matrix-editorial-content p {
font-size: var(--text-reading);
    line-height: var(--leading-copy);
    text-transform: none;
}
.matrix-editorial-content section h4,
.matrix-editorial-content ul {
font-size: var(--text-sm);
    line-height: 1.55;
}
.matrix-position-panel {
padding: 22px;
}
.matrix-position-kicker {
display: inline-flex;
    color: var(--violet);
    font-size: var(--text-xs);
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.35;
    text-transform: uppercase;
}
.matrix-position-panel > .matrix-position-header {
display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 7px;
    color: var(--ink);
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
}
.matrix-position-panel .matrix-position-header h3 {
grid-column:1; grid-row:1;
min-width: 0;
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
}
.matrix-position-panel .matrix-position-header b {
grid-column:2; grid-row:1;
width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--violet);
    font-size: var(--text-base);
}
.matrix-position-panel .matrix-position-subtitle {
margin: 7px 0 0;
    color: var(--ink);
    font-size: var(--text-reading);
    font-weight: 750;
    line-height: 1.45;
}
.matrix-position-panel > .matrix-position-role {
max-width: 72ch;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}
.matrix-position-panel > .matrix-editorial-content {
display: block;
    margin-top: 17px;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
}
.matrix-position-panel > .matrix-editorial-content > p {
max-width: 72ch;
    margin: 0;
    font-weight: 400;
}
.matrix-position-panel .matrix-editorial-sections {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
    margin-top: 15px;
}
.matrix-position-panel .matrix-editorial-sections > section {
min-width: 0;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}
.matrix-position-panel .matrix-editorial-sections > .matrix-editorial-advice {
border-color: #d9d1fb;
    background: #eee9ff;
    color: #595d6b;
}
.matrix-position-panel .matrix-editorial-advice :is(p, li) {
color: #595d6b;
}
.matrix-position-panel :is(h3, h4, p, li),
.matrix-v3-summary-card :is(h4, p),
.matrix-v3-program-card :is(h4, p),
.matrix-program-components :is(strong, p) {
overflow-wrap: anywhere;
}
.matrix-details + .matrix-result-actions {
margin-top: 22px;
}
@media (max-width: 720px) {
.matrix-position-panel {
padding: 18px;
}
.matrix-position-panel > .matrix-position-header {
display: flow-root;
}
.matrix-position-panel .matrix-position-header b {
float: right;
    margin-left: 8px;
    margin-bottom: 4px;
}
.matrix-position-panel .matrix-position-header h3 {
font-size: 1.25rem;
}
.matrix-v3-summary-grid,
.matrix-program-components,
.matrix-chakra-interpretations {
grid-template-columns: minmax(0, 1fr);
}
.matrix-chakra-table tbody tr:not(.matrix-chakra-detail-row) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.matrix-chakra-table tbody tr:not(.matrix-chakra-detail-row) > td {
min-width: 0;
        gap: 5px;
        padding: 12px 6px;
        text-align: center;
}
.matrix-chakra-toggle {
min-height: 44px;
        margin: 8px 0 4px;
        padding-block: 8px;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
}
.matrix-details + .matrix-result-actions {
margin-top: 18px;
}
}
@media (max-width: 430px) {
  .matrix-calculator .matrix-node-layer,
  .matrix-calculator .matrix-map svg {
    inset: 4px;
  }
  .matrix-calculator .matrix-map svg {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
  }
}
@media (max-width: 360px) {
  .matrix-position-panel { padding: 12px; }
}