.noodle-app {
    width: min(calc(100% - 2rem), 78rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 2.5vw, 2rem) 0 2.25rem;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: #bd5634;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.calculator-grid {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1.48fr) minmax(20rem, 0.78fr);
    gap: clamp(1.25rem, 4vw, 2.5rem);
}

.question-stack {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    gap: 1rem;
}

.price-basis-field {
    max-width: 24rem;
}

.field-label-row {
    position: relative;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.25rem;
}

.select-control {
    position: relative;
    display: block;
}

.select-control select {
    padding-right: 3rem;
    appearance: none;
}

.select-control > svg {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    width: 1.1rem;
    fill: none;
    stroke: #756a62;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

.question-card {
    display: grid;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 1rem;
    border: 1px solid #eadfd4;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0.5rem 1.5rem rgba(92, 64, 45, 0.045);
}

.step-number {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #e66f45;
    font-size: 0.85rem;
    font-weight: 850;
}

.question-content,
.question-heading > div {
    min-width: 0;
}

.question-heading {
    display: flex;
    margin-bottom: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.question-heading p {
    margin: 0 0 0.15rem;
    color: #9b765e;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.question-heading h2 {
    margin: 0;
    color: #362e29;
    font-size: clamp(1.15rem, 2.5vw, 1.38rem);
}

.live-badge {
    display: inline-flex;
    min-height: 1.75rem;
    padding: 0.25rem 0.6rem;
    align-items: center;
    border-radius: 999px;
    color: #72592b;
    background: #fff1c8;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.live-badge.is-live {
    color: #356142;
    background: #e8f5e9;
}

.field,
.compact-field {
    display: grid;
    gap: 0.42rem;
    color: #514a45;
    font-size: 0.88rem;
    font-weight: 700;
}

.question-content > .field + .field {
    margin-top: 1rem;
}

.field small,
.switch-row small,
.inflation-source {
    color: #7e756e;
    font-size: 0.76rem;
    font-weight: 450;
    line-height: 1.45;
}

.field-row {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.field-row .field + .field {
    margin-top: 0;
}

.field-row + .field {
    margin-top: 1rem;
}

.cost-transition {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eadfd4;
}

.cost-transition-heading {
    display: flex;
    margin-bottom: 1rem;
    align-items: flex-start;
    gap: 0.7rem;
}

.cost-transition-heading svg {
    width: 1.2rem;
    margin-top: 0.12rem;
    flex: 0 0 1.2rem;
    fill: none;
    stroke: #c75836;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.cost-transition-heading > div {
    display: grid;
    gap: 0.16rem;
}

.cost-transition-heading strong {
    color: #3b322d;
    font-size: 0.9rem;
}

.cost-transition-heading span {
    color: #7e756e;
    font-size: 0.78rem;
    line-height: 1.45;
}

select,
input {
    width: 100%;
    min-height: 3rem;
    border: 1px solid #d5c8bc;
    border-radius: 0.7rem;
    color: #332b27;
    background: #fffdfa;
    font: inherit;
}

select {
    padding: 0.65rem 2.4rem 0.65rem 0.85rem;
}

input {
    padding: 0.65rem 3.5rem 0.65rem 0.85rem;
    font-weight: 700;
}

select:focus,
input:focus {
    border-color: #df704b;
    outline: 3px solid rgba(230, 111, 69, 0.16);
}

select:disabled {
    color: #8b837c;
    background: #f5f2ee;
}

.input-with-unit {
    position: relative;
    display: block;
}

.input-with-unit > span {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    color: #847a72;
    font-size: 0.8rem;
    transform: translateY(-50%);
    pointer-events: none;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.quantity-stepper {
    display: grid;
    min-height: 3rem;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    overflow: hidden;
    border: 1px solid #d5c8bc;
    border-radius: 0.75rem;
    background: #fffdfa;
}

.quantity-stepper:focus-within {
    border-color: #df704b;
    outline: 3px solid rgba(230, 111, 69, 0.16);
}

.quantity-stepper button {
    display: grid;
    min-width: 3rem;
    padding: 0;
    place-items: center;
    border: 0;
    color: #a7482d;
    background: #fff1df;
    cursor: pointer;
}

.quantity-stepper button:hover {
    background: #ffe4ca;
}

.quantity-stepper button:focus-visible {
    z-index: 1;
    outline: 3px solid rgba(230, 111, 69, 0.28);
    outline-offset: -3px;
}

.quantity-stepper svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.quantity-value {
    position: relative;
    min-width: 0;
    border-inline: 1px solid #eadfd4;
}

.quantity-value input {
    min-height: 3rem;
    padding: 0.45rem 0.6rem 1rem;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 1.05rem;
}

.quantity-value input:focus {
    outline: 0;
}

.quantity-value > span {
    position: absolute;
    right: 0;
    bottom: 0.28rem;
    left: 0;
    color: #8b7c72;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.toggle-setting {
    display: grid;
    padding: 0.85rem 0;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    gap: 1rem;
    border-top: 1px solid #eee9e3;
}

.toggle-setting:first-of-type {
    border-top: 0;
}

.switch-row {
    display: flex;
    min-width: 0;
    margin: 0;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.switch-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
}

.switch {
    position: relative;
    width: 2.7rem;
    height: 1.55rem;
    flex: 0 0 2.7rem;
    border-radius: 999px;
    background: #c9c1ba;
    transition: background 160ms ease;
}

.switch::after {
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    top: 0.2rem;
    left: 0.2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
    content: "";
    transition: transform 160ms ease;
}

.switch-row input:checked + .switch {
    background: #e66f45;
}

.switch-row input:checked + .switch::after {
    transform: translateX(1.15rem);
}

.switch-row input:focus-visible + .switch {
    outline: 3px solid rgba(230, 111, 69, 0.25);
    outline-offset: 3px;
}

.switch-row > span:last-child {
    display: grid;
    gap: 0.1rem;
}

.switch-row strong {
    color: #3b3530;
    font-size: 0.9rem;
}

.compact-field {
    width: 7.5rem;
    flex: 0 0 7.5rem;
}

.compact-field > span:first-child {
    font-size: 0.72rem;
}

.inflation-source {
    margin: 0.65rem 0 0;
}

.form-error {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    color: #8f2f22;
    background: #fff0ed;
    font-size: 0.88rem;
}

.calculate-button,
.secondary-button {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.calculate-button {
    width: 100%;
    padding: 0.75rem 1.15rem;
    gap: 0.5rem;
    border: 1px solid #c85534;
    color: #fff;
    background: #e66f45;
    box-shadow: 0 0.5rem 1.25rem rgba(184, 76, 44, 0.16);
}

.calculate-button:hover {
    background: #d75f39;
}

.calculate-button svg {
    width: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.result-panel {
    position: sticky;
    min-height: 27rem;
    grid-column: 2;
    grid-row: 1;
    top: 1rem;
    overflow: hidden;
    border: 1px solid #efc8ad;
    border-radius: 1.25rem;
    color: #3a2c25;
    background:
        radial-gradient(circle at 90% 5%, rgba(255, 199, 91, 0.38), transparent 13rem),
        linear-gradient(150deg, #fff8e8, #fff0df 58%, #ffe7dd);
    box-shadow: 0 1rem 2.5rem rgba(115, 70, 39, 0.1);
}

.result-placeholder,
.result-content {
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.result-placeholder {
    display: flex;
    min-height: 27rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.mini-bowl {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.2rem;
    place-items: center;
    border-radius: 50% 50% 44% 44%;
    color: #6c3d27;
    background: #ffc85e;
    font-size: 2rem;
    font-weight: 900;
}

.result-placeholder h2 {
    margin: 0;
    font-size: 1.35rem;
}

.result-placeholder p {
    max-width: 19rem;
    margin: 0.7rem 0 0;
    color: #786960;
    line-height: 1.55;
}

.result-kicker {
    margin: 0 0 1rem;
    color: #b75132;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.result-number {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.result-number strong {
    font-size: clamp(3.6rem, 9vw, 5.4rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.result-number span {
    color: #9d583d;
    font-size: 1.1rem;
    font-weight: 750;
}

.result-summary {
    margin: 1rem 0 1.5rem;
    color: #65564e;
    line-height: 1.55;
}

.inflation-limit {
    display: grid;
    margin: -0.35rem 0 1.15rem;
    padding: 0.8rem 0.9rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #e9cdbb;
    border-radius: 0.75rem;
    color: #69564c;
    background: rgba(255, 255, 255, 0.42);
}

.inflation-limit.is-angry {
    grid-template-columns: auto minmax(0, 1fr);
    border-color: #e7aa90;
    background: rgba(255, 231, 218, 0.82);
}

.inflation-limit-emoji {
    font-size: 1.65rem;
    line-height: 1;
}

.inflation-limit strong {
    color: #51372c;
    font-size: 0.78rem;
}

.inflation-limit p {
    margin: 0.2rem 0 0;
    font-size: 0.73rem;
    line-height: 1.45;
}

.result-facts {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block: 1px solid #e9cdbb;
}

.result-facts div {
    padding: 0.9rem 0;
}

.result-facts div:nth-child(even) {
    padding-left: 0.8rem;
    border-left: 1px solid #e9cdbb;
}

.result-facts dt {
    color: #8a7468;
    font-size: 0.7rem;
    font-weight: 650;
}

.result-facts dd {
    margin: 0.2rem 0 0;
    color: #3b2d26;
    font-size: 0.98rem;
    font-weight: 800;
}

.result-assumption {
    margin-top: 1.3rem;
    padding: 1rem;
    border-radius: 0.8rem;
    color: #695b53;
    background: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    line-height: 1.5;
}

.result-assumption strong {
    color: #42332b;
}

.result-assumption p {
    margin: 0.35rem 0 0;
}

.secondary-button {
    width: 100%;
    margin-top: 1rem;
    border: 1px solid #d7a98d;
    color: #8c442d;
    background: rgba(255, 255, 255, 0.45);
}

.secondary-button:hover {
    background: rgba(255, 255, 255, 0.82);
}

.method-note {
    grid-column: 1;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.5rem;
    border-top: 1px solid #dfd8cf;
}

.method-note h2 {
    display: flex;
    margin: 0;
    align-items: baseline;
    gap: 0.45rem;
    color: #2b2622;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    line-height: 1.2;
}

.method-note h2 span:first-child {
    color: #b65536;
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.method-summary {
    max-width: 76rem;
    margin: 0.7rem 0 0;
    color: #6d655f;
    font-size: 0.9rem;
    line-height: 1.55;
}

.nerd-calculation {
    margin-top: 1rem;
    color: #71675f;
    font-size: 0.84rem;
}

.nerd-calculation summary {
    display: grid;
    width: fit-content;
    padding: 0.45rem 0;
    gap: 0.08rem;
    color: #9a5a41;
    font-weight: 750;
    cursor: pointer;
}

.nerd-calculation summary::marker {
    color: #c75836;
}

.nerd-calculation summary span {
    font-size: 0.86rem;
}

.nerd-calculation summary small {
    color: #8a7e76;
    font-size: 0.72rem;
    font-weight: 500;
}

.nerd-calculation summary:hover {
    color: #743d28;
}

.nerd-calculation summary:focus-visible {
    border-radius: 0.25rem;
    outline: 3px solid rgba(230, 111, 69, 0.2);
    outline-offset: 3px;
}

.nerd-calculation-body {
    display: grid;
    max-width: 78rem;
    margin-top: 0.9rem;
    gap: 1.25rem;
}

.nerd-section {
    min-width: 0;
}

.nerd-section + .nerd-section {
    padding-top: 1.25rem;
    border-top: 1px solid #e6dbd1;
}

.nerd-section-label {
    margin: 0 0 0.2rem !important;
    color: #b85a3a !important;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.nerd-section h3 {
    margin: 0 0 0.7rem;
    color: #3c332e;
    font-size: 1.05rem;
}

.nerd-variable-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1rem;
}

.nerd-variable-grid > div {
    display: grid;
    padding: 0.45rem 0;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.45rem;
    border-bottom: 1px solid #eee6df;
}

.nerd-variable-grid code {
    color: #8b432d;
    font: 750 0.86rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.nerd-variable-grid span {
    color: #736860;
    line-height: 1.45;
}

.equation-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.equation-card {
    display: grid;
    padding: 0.8rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.65rem;
    border: 1px solid #e8ddd3;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.58);
}

.equation-card-accent {
    border-color: #edc9b5;
    background: #fff2e7;
}

.equation-number {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #e66f45;
    font-size: 0.72rem;
    font-weight: 850;
}

.equation-card > div {
    display: grid;
    min-width: 0;
    gap: 0.4rem;
}

.equation-card strong {
    color: #473b34;
    font-size: 0.84rem;
}

.equation-card code,
.nerd-steps code {
    display: block;
    padding: 0.55rem 0.7rem;
    overflow-wrap: anywhere;
    border-radius: 0.55rem;
    color: #56443a;
    background: #fffaf4;
    font: 650 0.8rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.equation-card small {
    color: #80746c;
    line-height: 1.5;
}

.nerd-example-placeholder {
    padding: 1rem;
    border: 1px dashed #dcc9ba;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.35);
}

.nerd-steps {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
    list-style: none;
}

.nerd-steps li {
    display: grid;
    padding: 0.65rem 0;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 1px solid #eee4dc;
}

.nerd-steps li > span {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 1px solid #e4c8b7;
    border-radius: 50%;
    color: #a24f33;
    background: #fff7ed;
    font-size: 0.68rem;
    font-weight: 850;
}

.nerd-steps li > div {
    display: grid;
    min-width: 0;
    gap: 0.4rem;
}

.nerd-steps strong {
    color: #4b4039;
    font-size: 0.8rem;
}

.nerd-steps code {
    padding: 0;
    background: transparent;
}

.nerd-steps .nerd-verdict {
    grid-column: 1 / -1;
    margin-top: 0.55rem;
    padding: 0.9rem;
    border: 1px solid #cfe1ce;
    border-radius: 0.75rem;
    background: #f3faf1;
}

.nerd-steps .nerd-verdict > span {
    border-color: #bcd7bd;
    color: #427049;
    background: #e8f5e7;
}

.nerd-heading-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.math-info {
    position: static;
    display: inline-grid;
    width: 1.45rem;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #a95538;
    background: transparent;
    cursor: help;
}

.math-info svg {
    width: 1rem;
    height: 1rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
}

.math-info > span {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 0.45rem);
    left: 0;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.65rem 0.75rem;
    border: 1px solid #ead6c8;
    border-radius: 0.6rem;
    color: #4e423b;
    background: #fffdf9;
    box-shadow: 0 0.7rem 1.8rem rgba(74, 49, 34, 0.14);
    font: 500 0.75rem/1.45 system-ui, sans-serif;
    text-align: left;
    transform: translateY(0.25rem);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.math-info:hover > span,
.math-info:focus-visible > span {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.math-info:focus-visible {
    outline: 3px solid rgba(230, 111, 69, 0.22);
    outline-offset: 1px;
}

[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }

    .question-stack,
    .result-panel {
        grid-column: 1;
    }

    .result-panel {
        grid-row: auto;
        position: static;
        min-height: auto;
    }

    .result-placeholder {
        min-height: 18rem;
    }

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

@media (max-width: 650px) {
    .question-card {
        grid-template-columns: 1fr;
    }

    .field-row,
    .nerd-variable-grid {
        grid-template-columns: 1fr;
    }

    .price-basis-field {
        max-width: none;
    }

    .equation-stack,
    .nerd-steps {
        grid-template-columns: 1fr;
    }

    .method-note h2 {
        display: block;
        font-size: 1.08rem;
    }

    .method-note h2 span:first-child {
        margin-right: 0.2rem;
        font-size: 0.72em;
    }

    .equation-card {
        padding: 0.9rem;
        grid-template-columns: 1fr;
    }

    .equation-number {
        width: 1.65rem;
        height: 1.65rem;
    }

    .toggle-setting {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .compact-field {
        width: 100%;
        padding-left: 3.45rem;
    }

    .question-heading {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .result-content:not([hidden]) {
        animation: result-enter 260ms ease-out;
    }

    @keyframes result-enter {
        from { opacity: 0; transform: translateY(0.5rem); }
        to { opacity: 1; transform: translateY(0); }
    }
}