:root { color: #1b1a1f; background: #f3f2ee; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.shell { width: min(100% - 32px, 480px); margin: 0 auto; padding: 24px 0 46px; }
.hero { position: relative; overflow: hidden; min-height: 286px; padding: 24px; border-radius: 28px; color: #f8f8f1; background: #19191c; }
.hero-home { display: flex; flex-direction: column; justify-content: flex-end; }
.hero-top { position: absolute; top: 22px; left: 22px; display: flex; align-items: center; gap: 8px; }.brand-mark { color: #dfff45; font-size: 24px; line-height: 1; }.brand-name, .tool-brand { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; font-size: 11px; font-weight: 700; }.hero-eyebrow, .section-kicker { margin: 0; color: #756b8a; font: 700 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }.hero-eyebrow { position: relative; z-index: 1; color: #b4b09d; }.hero h1 { position: relative; z-index: 1; margin: 10px 0; max-width: 300px; font-size: clamp(36px, 10vw, 47px); letter-spacing: -.065em; line-height: .98; }.hero h1 em { color: #dfff45; font-style: normal; }.hero-copy { position: relative; z-index: 1; max-width: 260px; margin: 0; color: #c6c5ba; font-size: 14px; line-height: 1.65; }.hero-orb { position: absolute; right: -58px; top: -55px; width: 210px; height: 210px; border: 1px solid #dfff45; border-radius: 50%; box-shadow: 0 0 0 21px #c9ff2c1c, 0 0 0 44px #c9ff2c0d; }
.card { margin-top: 18px; padding: 23px; border: 1px solid #e2e0d8; border-radius: 24px; background: #fffefa; box-shadow: 0 10px 32px #352b1710; }.card h2 { margin: 4px 0 8px; font-size: 24px; letter-spacing: -.04em; }.muted, .notice { margin: 0; color: #77737b; line-height: 1.65; font-size: 14px; }label { display: block; margin-top: 22px; font-size: 13px; font-weight: 700; }input { display: block; width: 100%; height: 55px; margin-top: 9px; border: 1px solid #d9d5ce; border-radius: 13px; padding: 0 15px; background: #fffefa; color: #171719; font-size: 16px; }input:focus { outline: 3px solid #dfff4599; border-color: #1b1a1f; }.message { min-height: 20px; margin: 9px 0; color: #bd3654; font-size: 13px; }.card form > button, .sticky-action button, .button-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; margin-top: 16px; border: 0; border-radius: 14px; padding: 0 17px; background: #1b1a1f; color: #f7f6ee; cursor: pointer; font-size: 15px; font-weight: 700; text-align: left; text-decoration: none; }.card form > button span, .sticky-action button span { color: #dfff45; font-size: 21px; }button:disabled { opacity: .6; cursor: wait; }.hidden { display: none; }.notice { padding: 20px 5px; text-align: center; font-size: 12px; }.card-title-row { display: flex; justify-content: space-between; align-items: start; gap: 10px; }.text-button { width: auto; padding: 4px 0; border: 0; background: none; color: #6d5bd1; cursor: pointer; font-size: 13px; font-weight: 700; }.test-card { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 17px; border: 1px solid #dad6c9; border-radius: 17px; background: #f4f2e8; color: inherit; text-decoration: none; transition: transform .18s ease, background .18s ease; }.test-card:hover { transform: translateY(-2px); background: #edffb6; }.test-card > :last-child { margin-left: auto; font-size: 28px; color: #746c7c; }.test-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: #1b1a1f; color: #dfff45; font-size: 22px; }.test-card b, .test-card small { display: block; }.test-card b { letter-spacing: -.025em; }.test-card small { margin-top: 5px; color: #76727a; font-size: 12px; }.card-footnote { margin: 16px 2px 0; color: #86818a; font-size: 12px; }
.calculator-body { background: #171719; color: #f7f6ef; }.calculator-shell { width: min(100%, 560px); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px 112px; }.tool-header { display: flex; align-items: center; justify-content: space-between; color: #eeede6; }.back { color: #6254a3; text-decoration: none; font-size: 14px; font-weight: 700; }.back-dark { color: #d4d2ca; }.tool-brand { color: #c9c7be; }.tool-brand i { color: #dfff45; font-size: 18px; font-style: normal; vertical-align: -1px; }.tool-intro { padding: 48px 8px 33px; }.tool-intro .section-kicker { color: #b5b2a5; }.tool-intro h1 { margin: 13px 0 13px; font-size: clamp(39px, 11vw, 54px); letter-spacing: -.075em; line-height: .96; }.tool-intro h1 strong { color: #dfff45; font-weight: inherit; }.tool-intro > p:last-child { max-width: 310px; margin: 0; color: #b9b7ad; font-size: 14px; line-height: 1.7; }.worth-form { display: grid; gap: 14px; }.form-block { padding: 22px 18px; border: 1px solid #37363a; border-radius: 22px; background: #222225; }.focus-block { border-color: #c0dd52; background: linear-gradient(135deg, #292928, #1f201c); }.block-title { display: flex; align-items: flex-start; gap: 12px; }.block-title > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #68666e; border-radius: 50%; color: #dfff45; font: 700 10px "DM Mono", monospace; }.block-title h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }.block-title p { margin: 3px 0 0; color: #a8a6ad; font-size: 12px; }.field { margin-top: 20px; color: #e8e7df; font-size: 12px; font-weight: 700; }.input-unit { display: flex; align-items: center; height: 58px; margin-top: 8px; overflow: hidden; border: 1px solid #48474d; border-radius: 13px; background: #19191b; }.input-unit i { padding-left: 15px; color: #dfff45; font-size: 21px; font-style: normal; }.input-unit input { width: 100%; height: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0; padding: 0 10px; background: transparent; color: #fcfbf5; font-size: 20px; font-weight: 700; outline: 0; }.input-unit input:focus { box-shadow: inset 0 0 0 2px #dfff45; }.input-unit b { padding-right: 13px; color: #9e9ca5; font-size: 11px; white-space: nowrap; }.compact { height: 50px; }.compact input { padding-left: 12px; font-size: 17px; }.field-hint { margin: 8px 0 0; color: #9d9ba1; font-size: 11px; }.country-title { display: flex; justify-content: space-between; margin-top: 22px; color: #e8e7df; font-size: 12px; font-weight: 700; }.country-title small { color: #adaab2; font-size: 10px; font-weight: 500; }.country-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 9px; }.choice, .chip-field button { min-height: 42px; border: 1px solid #4a494f; border-radius: 11px; background: #29292d; color: #d2d0d1; cursor: pointer; font-size: 12px; font-weight: 700; }.choice.active { border-color: #dfff45; background: #dfff45; color: #18181a; }.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }.leave-field { width: calc(50% - 6px); }.chip-field { margin: 22px 0 0; padding: 0; border: 0; }.chip-field legend { margin-bottom: 9px; color: #e8e7df; font-size: 12px; font-weight: 700; }.chip-field div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.chip-field button { min-height: 39px; padding: 0 6px; }.chip-field button.selected { border-color: #dfff45; background: #dfff45; color: #1b1a1f; }.form-disclaimer { margin: 5px 5px 0; color: #918f96; font-size: 11px; line-height: 1.55; }.sticky-action { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 560px; margin: auto; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #3a393e; background: #171719eF; backdrop-filter: blur(14px); }.sticky-action div { display: grid; gap: 3px; }.sticky-action small { color: #97949c; font-size: 10px; }.sticky-action strong { color: #f1f0e9; font-size: 13px; }.sticky-action button { width: auto; min-width: 134px; min-height: 49px; margin: 0; background: #dfff45; color: #171719; }.sticky-action button span { color: #171719; }
.result-card { margin-top: 40px; text-align: center; }.result-icon { margin: 0; font-size: 55px; }.result-kicker { color: #6d5bd1; }.score-number { margin: 16px 0 0; color: #1b1a1f; font-size: 86px; font-weight: 700; letter-spacing: -.1em; line-height: .85; }.score-number small { color: #78747c; font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.03em; }.score-caption { margin: 12px 0 25px; color: #706b75; font-size: 12px; font-weight: 700; }.result-card h1 { margin: 0 0 13px; font-size: 28px; letter-spacing: -.055em; }.result-desc { color: #514e55; text-align: left; line-height: 1.8; font-size: 15px; }.result-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 26px 0; text-align: left; }.result-metrics div { padding: 13px 10px; border-radius: 13px; background: #f1efe7; }.result-metrics small, .result-metrics b { display: block; }.result-metrics small { color: #7c7880; font-size: 10px; }.result-metrics b { margin-top: 7px; font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.06em; }.button-link { margin-top: 14px; justify-content: center; text-align: center; }
@media (min-width: 600px) { .calculator-body { padding: 20px 0; }.calculator-shell { border-radius: 30px; background: #171719; }.sticky-action { border-right: 1px solid #3a393e; border-left: 1px solid #3a393e; border-radius: 0 0 30px 30px; } }

/* Full work-worth calculator */
.calculator-body select { display: block; width: 100%; height: 50px; margin-top: 8px; border: 1px solid #48474d; border-radius: 13px; padding: 0 38px 0 13px; appearance: none; background: #19191b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23dfff45' stroke-linecap='round' stroke-width='1.6' d='m1 1 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; color: #f4f3eb; font-size: 15px; font-weight: 700; }.calculator-body select:focus { outline: 2px solid #dfff45; }.field > span { display: flex; align-items: center; gap: 6px; }.help { display: inline-grid; flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; place-items: center; border: 0; border-radius: 50%; padding: 0; background: #dfff45; color: #1b1a1f; cursor: pointer; font-size: 10px; font-weight: 800; }.help[aria-expanded="true"] { box-shadow: 0 0 0 3px #dfff4530; }.field > .help-copy { display: block; min-height: 0; margin-top: 8px; border-left: 2px solid #dfff45; padding: 8px 10px; background: #19191b; color: #bbb8ae; font-size: 11px; font-weight: 500; line-height: 1.55; }.two-col { grid-template-columns: repeat(2, 1fr); }.three-col { grid-template-columns: repeat(3, 1fr); gap: 0 8px; }.three-col .field { min-width: 0; }.three-col .field > span { min-height: 29px; line-height: 1.3; }.three-col .input-unit b { display: none; }.three-col .input-unit input { padding-right: 7px; }.chip-field legend small { color: #929098; font-weight: 500; }.chip-field.four-up div { grid-template-columns: repeat(2, minmax(0, 1fr)); }.chip-field.two-up div { grid-template-columns: repeat(2, minmax(0, 1fr)); }.chip-field button { min-height: 44px; padding: 6px 7px; line-height: 1.25; }.benefits { display: grid; gap: 10px; margin-top: 24px; }.benefits label { display: flex; align-items: center; gap: 10px; margin: 0; color: #e7e5dd; font-size: 14px; }.benefits input { width: 19px; height: 19px; margin: 0; accent-color: #dfff45; }.benefits small { color: #9b99a1; font-size: 11px; }.live-summary { padding: 22px 18px; border: 1px solid #dfff45; border-radius: 22px; background: linear-gradient(135deg, #292d1e, #20211f); }.live-summary .section-kicker { color: #dfff45; }.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin-top: 16px; }.live-grid > div { display: grid; gap: 7px; }.live-grid span, .live-grid > div > small { color: #bcbab0; font-size: 11px; }.live-grid strong { color: #f7f6ee; font: 700 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; }.live-grid strong small { margin-left: 3px; color: #dfff45; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; }.live-grid .score-cell { grid-column: span 2; padding-top: 17px; border-top: 1px solid #515443; }.score-cell strong { color: #dfff45; font-size: 42px; }.score-cell > small { color: #aaa89e; }.sticky-action strong { white-space: nowrap; }
.field-grid > .field { display: flex; min-width: 0; flex-direction: column; }.field-grid > .field > span { min-height: 30px; align-items: flex-end; line-height: 1.3; }.field-grid > .field > .input-unit, .field-grid > .field > select { margin-top: auto; }.estimate-badge { display: inline-flex; align-items: center; min-height: 19px; border: 1px solid #dfff4573; border-radius: 999px; padding: 2px 7px; color: #dfff45; font-size: 10px; font-weight: 700; white-space: nowrap; }.salary-note { margin: 8px 0 0; color: #aaa79f; font-size: 11px; line-height: 1.5; }.chip-field > div { grid-auto-rows: 1fr; }.chip-field button { height: 100%; }
.input-unit.has-error, .calculator-body select.has-error { border-color: #ff7189; box-shadow: 0 0 0 2px #ff71891f; }.validation-box { border: 1px solid #ff71896b; border-radius: 16px; padding: 13px 15px; background: #3a2028; color: #ffdce2; font-size: 12px; line-height: 1.6; }.validation-box.warning { border-color: #efcf5c66; background: #37321f; color: #fff0b6; }
.help-copy[hidden], .validation-box[hidden] { display: none; }.field-grid > .field > .help-copy { min-height: 0; align-items: initial; }
@media (min-width: 460px) { .calculator-shell { padding-right: 20px; padding-left: 20px; }.chip-field.four-up div { grid-template-columns: repeat(3, minmax(0, 1fr)); }.live-grid { grid-template-columns: repeat(3, 1fr); }.live-grid .score-cell { grid-column: auto; padding-top: 0; border-top: 0; }.score-cell strong { font-size: 32px; } }