.ms-free {
        font-family: inherit;
        padding: 40px 20px
    }

    .ms-tabs {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
        justify-content: center
    }

    .ms-field input,
    .ms-tab {
        font-size: 16px;
        background: #fff;
        transition: all .3s ease
    }

    .ms-field label,
    .ms-tab {
        color: #045b7c;
        font-weight: 500
    }

    .ms-tab {
        border: 2px solid #045b7c;
        padding: 12px 24px;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(4, 91, 124, .1)
    }

    .ms-tab:hover {
        background: rgba(4, 91, 124, .05);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(4, 91, 124, .15)
    }

    .ms-tab-active {
        background: #045b7c;
        color: #fff;
        box-shadow: 0 4px 16px rgba(4, 91, 124, .3)
    }

    .ms-tab-active:hover {
        background: #034a68;
        transform: translateY(-2px)
    }

    .ms-section {
        margin-bottom: 24px
    }

    .ms-field {
        margin-bottom: 16px
    }

    .ms-field label {
        font-size: 14px;
        display: block;
        margin-bottom: 6px
    }

    .ms-field input {
        width: 100%;
        padding: 14px 18px;
        border-radius: 14px;
        border: 2px solid #e2e8f0;
        box-sizing: border-box
    }

    .ms-field input:focus {
        outline: 0;
        border-color: #045b7c;
        box-shadow: 0 0 0 4px rgba(4, 91, 124, .1)
    }

    .ms-field input::placeholder {
        color: #a0aec0
    }

    .ms-field-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px
    }

    .ms-btn {
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 16px 32px;
        border-radius: 50px;
        border: 0;
        background: #ffddab;
        color: #442908;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        transition: all .3s ease;
        box-shadow: 0 4px 16px rgba(255, 221, 171, .4)
    }

    .ms-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(255, 221, 171, .5);
        background: #f5d199
    }

    .ms-btn:active {
        transform: translateY(0)
    }

    .ms-result {
        margin-top: 24px;
        font-size: 16px
    }

    .ms-error {
        color: #e53e3e;
        margin-top: 12px;
        padding: 12px 16px;
        background: #fff5f5;
        border-radius: 12px;
        border: 1px solid #feb2b2
    }

    .ms-card {
        background: #fff;
        border-radius: 20px;
        padding: 24px
    }

    .ms-card h3,
    .ms-card h4 {
        margin: 0 0 12px;
        font-size: 21px;
        color: #045b7c
    }

    .ms-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px
    }

    .ms-row-2>* {
        flex: 1 1 220px
    }

    .ms-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 16px;
        font-size: 14px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04)
    }

    .ms-table td,
    .ms-table th {
        border: 0;
        border-bottom: 1px solid #e2e8f0;
        padding: 12px 14px;
        text-align: left
    }

    .ms-table tr:last-child td {
        border-bottom: none
    }

    .ms-table th,
    .ms-table tr:hover td {
        background: #f7fafc
    }

    .ms-compat-sep {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid #e2e8f0
    }

    .ms-mini-matrix-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #045b7c
    }

    .ms-mini-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        font-size: 13px
    }

    .ms-mini-grid div span,
    .ms-table th {
        font-weight: 600;
        color: #045b7c
    }

    .ms-svg-wrap {
        margin-top: 10px;
        text-align: center
    }

    @media (max-width:600px) {
        .ms-free {
            width: 100%;
            padding: 20px 16px
        }

        .ms-tabs {
            gap: 8px
        }

        .ms-tab {
            padding: 10px 18px;
            font-size: 14px;
            flex: 1;
            text-align: center
        }

        .ms-field input {
            padding: 12px 14px;
            font-size: 16px
        }

        .ms-field-group {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px
        }

        .ms-btn {
            padding: 14px 24px;
            font-size: 16px
        }

        .ms-card {
            padding: 18px;
            border-radius: 16px
        }

        .ms-row-2 {
            flex-direction: column
        }
    }

    body {
        font-family: "Montserrat", sans-serif
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: "Philosopher";
        font-size: 40px
    }

    
    .button-input-tilda{
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px
    }

    td,
    th {
        border: 3px solid #fff;
        padding: 8px;
        text-align: center
    }

    .destiny {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 16px 40px;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        color: #2b2b2b
    }

    .destiny__title,
    h1,
    h2,
    h3,
    h4 {
        text-align: center;
        color: #045b7c
    }

    .destiny__title {
        font-size: 34px;
        font-weight: 800;
        margin: 8px 0 28px
    }

    .destiny__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px
    }

    @media (min-width:700px) {
        .destiny__grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (min-width:1100px) {
        .destiny__grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (max-width:375px) {
        .table-mobile-font {
            font-size: 12px
        }
    }

    .destiny-card {
        text-align: center
    }

    .destiny-card__heading {
        color: #045b7c;
        font-weight: 900;
        font-size: 18px;
        margin-bottom: 14px
    }

    .brace-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px
    }

    .brace-row__left {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .brace {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0
    }

    .brace__symbol {
        font-size: 38px;
        line-height: 1;
        color: #045b7c;
        transform: translateY(-4px)
    }

    .brace__value {
        font-size: 28px;
        font-weight: 600;
        color: #045b7c
    }

    .destiny-card__desc {
        margin-top: 16px;
        line-height: 1.55;
        color: #4a4a4a;
        font-size: 15px
    }

    #age-marker {
        fill: red !important;
        stroke-width: 0 !important
    }

    .marker-tooltip {
        position: fixed;
        z-index: 99999;
        pointer-events: none;
        background: rgba(20, 20, 25, .95);
        color: #fff;
        font: 12px/1.3 system-ui, sans-serif;
        padding: 6px 8px;
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        transform: translate(10px, 10px);
        opacity: 0;
        transition: opacity .12s ease
    }

    .marker-tooltip.show {
        opacity: 1
    }

    .ms-svg-scale {
        max-width: 840px;
        margin: 0 auto
    }

    .ms-accordion {
        display: grid
    }

    .ms-acc-head {
        width: 100%;
        background: #fff;
        border: 0;
        cursor: not-allowed
    }

    .ms-acc-title {
        text-align: left
    }

    .ms-acc-meta {
        opacity: .8;
        white-space: nowrap
    }

    .ms-acc-lock {
        opacity: .9
    }

    .ms-acc-body {
        background: rgba(0, 0, 0, .02)
    }

    .ms-locked-text {
        opacity: .8
    }

    .ms-acc-item:not(.ms-locked) .ms-acc-head {
        background: rgba(0, 0, 0, .01)
    }

    .ms-acc-item.open:not(.ms-locked) .ms-acc-head {
        background: rgba(0, 0, 0, .03)
    }

    .ms-accordion {
        display: flex;
        flex-direction: column;
        gap: 12px
    }

    .ms-acc-item {
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: 16px;
        overflow: hidden;
        background: #fff
    }

    .ms-acc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: rgba(0, 0, 0, .02);
        user-select: none
    }

    .ms-acc-titlewrap {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .ms-acc-title {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.2
    }

    .ms-acc-sub {
        font-size: 13px;
        opacity: .75
    }

    .ms-acc-right {
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap
    }

    .ms-acc-pill {
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, .1);
        background: #fff;
        opacity: .9
    }

    .ms-acc-chevron {
        transition: transform .18s ease;
        opacity: .75
    }

    .ms-acc-item.open .ms-acc-chevron {
        transform: rotate(180deg)
    }

    .ms-acc-body {
        padding: 16px;
        border-top: 1px solid rgba(0, 0, 0, .08)
    }

    .ms-acc-item.ms-locked .ms-acc-head {
        cursor: default
    }

    .ms-acc-item.ms-locked .ms-acc-body {
        display: block
    }

    .ms-locked-note {
        font-size: 14px;
        line-height: 1.5;
        opacity: .8;
        margin: 0
    }

    .ms-acc-item:not(.ms-locked) .ms-acc-head {
        cursor: pointer
    }

    .ms-acc-item:not(.ms-locked) .ms-acc-body {
        display: none
    }

    .ms-acc-item.open:not(.ms-locked) .ms-acc-body {
        display: block
    }

    @media print {

        .ms-btn,
        .ms-form,
        .ms-tabs,
        button {
            display: none !important
        }

        #ms-free {
            padding: 0 !important
        }

        .ms-card {
            box-shadow: none !important;
            border: 0 !important
        }

        .ms-acc-body {
            display: block !important
        }
    }

    #ms-free,
    .ms-free {
        width: 100% !important;
        max-width: 800px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px
    }

    #ms-free {
        margin-left: auto;
        margin-right: auto
    }

    .ms-free {
        margin: 0 auto
    }

    #ms-free svg,
    .ms-free svg {
        display: block;
        text-align: center;
        max-width: 90%;
        height: auto;
        margin-left: auto;
        margin-right: auto
    }

    #ms-free .ms-svg-wrap,
    .ms-free .ms-svg-wrap {
        width: 100%
    }

    #ms-free .ms-svg-scale,
    .ms-free .ms-svg-scale {
        width: 100%;
        max-width: 100%;
        margin: 0 auto
    }

    #ms-free .ms-row.ms-row-2,
    .ms-free .ms-row.ms-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start
    }

    #ms-free .ms-field-group,
    .ms-free .ms-field-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px
    }

    #ms-free .ms-card,
    .ms-free .ms-card {
        max-width: 100%;
        overflow-x: hidden
    }

    #ms-free table,
    .ms-free table {
        width: 100%;
        border-collapse: collapse
    }

    .brace-row__line {
        font-size: 14px !important
    }

    @media (max-width:600px) {

        #ms-free,
        .ms-free {
            padding-left: 10px;
            padding-right: 10px
        }

        #ms-free .ms-field-group,
        #ms-free .ms-row.ms-row-2,
        .ms-free .ms-field-group,
        .ms-free .ms-row.ms-row-2 {
            grid-template-columns: 1fr
        }

        #ms-free .ms-svg-wrap,
        .ms-free .ms-svg-wrap {
            max-height: 90vh
        }

        #ms-free .ms-svg-wrap svg,
        .ms-free .ms-svg-wrap svg {
            width: 100%;
            height: auto
        }
    }

    @media (max-width:1224px) {
        .brace-row {
            gap: 10px;
            justify-content: center
        }

        .brace__symbol {
            font-size: 36px
        }

        .brace__value {
            font-size: 24px
        }

        .destiny-card {
            padding-top: 20px
        }

        .brace-row__left,
        .destiny-card,
        .destiny-card__heading {
            text-align: center
        }

        .brace-row__left {
            align-items: center
        }
    }

    @media (max-width:425px) {
        .icon-chakra {
            display: none
        }

        .tab-top-left {
            border-radius: 15px 0 0 0
        }

        .tab-bottom-left {
            border-radius: 0 0 0 15px
        }
    }
</style>