<link
  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap"
  rel="stylesheet"
/>

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<header class="topbar">

<div>
        <strong>Formly</strong>
        <span>Federal Tax Filing</span>
      </div>
    </div>

<div class="secure-label">
        <span class="secure-dot"></span>
        Secure session
      </div>

<button
        class="btn save-button"
        id="saveButton"
      >
        Save draft
      </button>

</div>

</header>

<div class="tax-year">
        <span>FILING YEAR</span>
        <strong>2026</strong>
      </div>

<span class="step-copy">
            <strong>About you</strong>
            <small>Personal information</small>
          </span>

<span class="step-copy">
            <strong>Income</strong>
            <small>Earnings & sources</small>
          </span>

<span class="step-copy">
            <strong>Deductions</strong>
            <small>Credits & expenses</small>
          </span>

<span class="step-copy">
            <strong>Dependents</strong>
            <small>Household members</small>
          </span>

<span class="step-copy">
            <strong>Payment</strong>
            <small>Refund preferences</small>
          </span>

<span class="step-copy">
            <strong>Review</strong>
            <small>Sign & submit</small>
          </span>

</nav>

<p>
            Your filing assistant can explain
            any field in plain language.
          </p>

<button type="button">
            Ask an expert →
          </button>
        </div>

</div>

</aside>

<div class="progress-header">

<strong id="progressPercent">
            17% complete
          </strong>
        </div>

</div>

<span class="eyebrow">
            LET'S GET ACQUAINTED
          </span>

<h1>
            First, tell us<br>
            a little about <em>you.</em>
          </h1>

<p>
            We'll use this information to determine
            your filing status and personalize the
            rest of your return.
          </p>

</div>

<div>
              <h2>Filing status</h2>

<p>
                Choose the option that best
                describes your household.
              </p>
            </div>
          </div>

<strong>Single</strong>

<small>
                Unmarried or legally separated
              </small>

</label>

<strong>
                Married filing jointly
              </strong>

<small>
                Filing one return together
              </small>

</label>

<strong>
                Married filing separately
              </strong>

<small>
                Separate individual returns
              </small>

</label>

<strong>
                Head of household
              </strong>

<small>
                Supporting a qualifying person
              </small>

</label>

</div>

<div>
              <h2>Personal details</h2>

<p>
                Enter your legal information exactly
                as it appears on your documents.
              </p>
            </div>
          </div>

<div class="col-md-6">
              <label class="field-label">
                First name
              </label>

<div class="col-md-6">
              <label class="field-label">
                Social Security number
              </label>

</div>

<span class="field-hint">
                ? Encrypted and securely stored
              </span>
            </div>

<div class="col-md-6">
              <label class="field-label">
                Date of birth
              </label>

<div class="col-md-6">
              <label class="field-label">
                Occupation
              </label>

<div class="col-md-6">
              <label class="field-label">
                Phone number
              </label>

<div class="col-12">
              <label class="field-label">
                Email address
              </label>

</div>

<div>
              <h2>Primary residence</h2>

<p>
                Where did you live for most
                of the tax year?
              </p>
            </div>
          </div>

<label class="field-label">
                Street address
              </label>

</div>

</div>

<label class="field-label">
                State
              </label>

<select
                class="form-select modern-input"
              >
                <option>Select state</option>
                <option>Arkansas</option>
                <option>California</option>
                <option>Illinois</option>
                <option>New York</option>
                <option>Texas</option>
                <option>Virginia</option>
              </select>

</div>

</div>

</section>

<span class="eyebrow">
            MONEY IN
          </span>

<h1>
            Let's map your<br>
            <em>income.</em>
          </h1>

<p>
            Add income you received during the year.
            You can enter multiple sources.
          </p>

</div>

<div>
              <h2>Income sources</h2>

<p>
                Select everything that applies.
              </p>
            </div>

</div>

<div>
                <strong>
                  Employment
                </strong>

<small>
                  W-2 wages and salary
                </small>
              </div>

<div>
                <strong>
                  Self-employment
                </strong>

<small>
                  Freelance or business
                </small>
              </div>

<div>
                <strong>
                  Investments
                </strong>

<small>
                  Stocks and dividends
                </small>
              </div>

<div>
                <strong>
                  Rental property
                </strong>

<small>
                  Rental income
                </small>
              </div>

</div>

<div>
              <h2>Employment income</h2>

<p>
                Enter the totals from your W-2.
              </p>
            </div>

</div>

<div>
                <strong>
                  Primary employer
                </strong>

</div>

<label class="field-label">
                  Employer name
                </label>

</div>

<label class="field-label">
                  Employer EIN
                </label>

</div>

<label class="field-label">
                  Wages
                </label>

</div>

<label class="field-label">
                  Federal tax withheld
                </label>

</div>

<label class="field-label">
                  State tax withheld
                </label>

</div>

<button
            class="add-button"
            type="button"
          >
            <span>＋</span>
            Add another employer
          </button>

</div>

<div>
              <h2>Documents</h2>

<p>
                Attach supporting tax forms.
              </p>
            </div>

</div>

<span>
              or click to browse your files
            </span>

<small>
              PDF, JPG or PNG • Maximum 10 MB
            </small>

</label>

</div>

</section>

<h1>
            Find every deduction<br>
            you may <em>qualify for.</em>
          </h1>

<p>
            Tell us about qualifying expenses.
            We'll organize them for your return.
          </p>

</div>

<div>
              <h2>Deduction preference</h2>

<p>
                Choose how you'd like to proceed.
              </p>
            </div>

</div>

<span class="recommended">
                RECOMMENDED
              </span>

<strong>
                Standard deduction
              </strong>

<p>
                Use the standard deduction
                available for your filing status.
              </p>

</label>

<strong>
                Itemize deductions
              </strong>

<p>
                Enter qualifying expenses such
                as mortgage interest and gifts.
              </p>

</label>

</div>

<div>
              <h2>Potential deductions</h2>

<p>
                Enter amounts that apply to you.
              </p>
            </div>

</div>

<div class="deduction-copy">
                <strong>
                  Mortgage interest
                </strong>

</div>

<div class="deduction-copy">
                <strong>
                  Charitable donations
                </strong>

<small>
                  Qualified contributions
                </small>
              </div>

</div>

<div class="deduction-copy">
                <strong>
                  Medical expenses
                </strong>

<small>
                  Eligible unreimbursed expenses
                </small>
              </div>

</div>

<div class="deduction-copy">
                <strong>
                  Education expenses
                </strong>

<small>
                  Eligible tuition and fees
                </small>
              </div>

</div>

</section>

<span class="eyebrow">
            YOUR HOUSEHOLD
          </span>

<h1>
            Who are you<br>
            caring <em>for?</em>
          </h1>

<p>
            Add qualifying children or other
            dependents who were part of your household.
          </p>

</div>

<div>
              <h2>Dependents</h2>

<p>
                Add each dependent separately.
              </p>
            </div>

</div>

<div>
              <strong>
                Add a dependent
              </strong>

<small>
                Child, parent or qualifying relative
              </small>
            </div>
          </button>

</div>

</section>

<span class="eyebrow">
            ALMOST THERE
          </span>

<h1>
            Where should your<br>
            refund <em>go?</em>
          </h1>

<p>
            Choose how you'd like to receive
            any eligible refund.
          </p>

</div>

<div>
              <h2>Refund method</h2>

<p>
                Direct deposit is typically
                the fastest option.
              </p>
            </div>

</div>

<div>
                <strong>
                  Direct deposit
                </strong>

<small>
                  Deposit into a bank account
                </small>
              </div>

</label>

<div>
                <strong>
                  Paper check
                </strong>

<small>
                  Receive a check by mail
                </small>
              </div>

</label>

</div>

<div>
              <h2>Bank account</h2>

<p>
                Enter the account where you
                want your refund deposited.
              </p>
            </div>

</div>

<div>
                <span>BANK ACCOUNT</span>

<strong>
                  Direct deposit
                </strong>
              </div>

</div>

<label class="field-label">
                  Routing number
                </label>

</div>

<label class="field-label">
                  Account number
                </label>

</div>

<label class="field-label">
                  Account type
                </label>

<select
                  class="form-select modern-input dark-input"
                >
                  <option>Checking</option>
                  <option>Savings</option>
                </select>

</div>

<label class="field-label">
                  Account holder
                </label>

</div>

</section>

<span class="eyebrow">
            FINAL CHECK
          </span>

<h1>
            Review. Sign.<br>
            <em>You're done.</em>
          </h1>

<p>
            Review your information before
            submitting this demonstration form.
          </p>

</div>

<div>
              <span>
                ESTIMATED OUTCOME
              </span>

<h2>
                Filing summary
              </h2>
            </div>

<div class="summary-status">
              READY
            </div>

</div>

<div>
              <span>
                Income entered
              </span>

<div>
              <span>
                Federal withholding
              </span>

<div class="highlight-summary">
              <span>
                Demo refund estimate
              </span>

</div>

<div>
              <h2>Declaration</h2>

<p>
                Confirm the information before
                submitting.
              </p>
            </div>

</div>

<p>
              I confirm that I have reviewed the
              information entered in this demo and
              understand that this interface is a
              design example, not an actual tax filing.
            </p>

</label>

<label class="field-label">
              Electronic signature
            </label>

<small>
              Your typed name acts as the signature
              for this demonstration.
            </small>

</div>

<button
          class="submit-return"
          id="submitReturn"
          type="button"
        >
          <span>
            Submit application
          </span>

</section>

<div class="autosave">
          <span>✓</span>
          Changes saved
        </div>

<button
          id="continueButton"
          class="continue-button"
          type="button"
        >
          Continue
          <span>→</span>
        </button>

</div>

</section>

</main>

<span>APPLICATION COMPLETE</span>

<h2>
        Nicely done.
      </h2>

<p>
        Your demonstration tax application
        has been successfully completed.
      </p>

<button
        id="closeSuccess"
        type="button"
      >
        Return to form
      </button>

</div>

* {
  box-sizing: border-box;
}

:root {
  --ink: #18201d;
  --muted: #748079;
  --line: #dfe5e1;

--paper: #f7f8f5;
  --white: #ffffff;

--forest: #173c31;
  --forest-2: #245646;

--mint: #d9eee4;
  --lime: #c8e46c;

--orange: #ee7655;

--serif:
    "DM Serif Display",
    Georgia,
    serif;

--sans:
    "DM Sans",
    sans-serif;
}

html,
body {
  margin: 0;

min-height: 100%;

background:
    var(--paper);

color:
    var(--ink);

font-family:
    var(--sans);
}

button,
input,
select {
  font-family:
    inherit;
}

/* =====================================
   APP
===================================== */

.tax-app {
  min-height:
    100vh;
}

/* =====================================
   TOP BAR
===================================== */

.topbar {
  position: sticky;

top: 0;

z-index: 100;

height: 72px;

display: flex;

align-items: center;

justify-content:
    space-between;

padding:
    0 28px;

border-bottom:
    1px solid
    #e4e8e5;

background:
    rgba(
      255,
      255,
      255,
      .93
    );

backdrop-filter:
    blur(16px);
}

.brand {
  display: flex;

align-items: center;

gap: 11px;
}

.brand-mark {
  width: 38px;
  height: 38px;

display: grid;

place-items: center;

border-radius:
    11px 4px 11px 4px;

background:
    var(--forest);

color:
    var(--lime);

font-family:
    var(--serif);

font-size:
    22px;
}

.brand strong {
  display: block;

font-family:
    var(--serif);

font-size:
    18px;

font-weight:
    normal;

line-height: 1;
}

.brand span {
  display: block;

margin-top: 3px;

color:
    var(--muted);

font-size:
    8px;

letter-spacing:
    .6px;
}

.top-actions {
  display: flex;

align-items: center;

gap: 13px;
}

.secure-label {
  display: flex;

align-items: center;

gap: 6px;

color:
    var(--muted);

font-size:
    9px;
}

.secure-dot {
  width: 7px;
  height: 7px;

border-radius:
    50%;

background:
    #48a77c;

box-shadow:
    0 0 0 4px
    rgba(
      72,
      167,
      124,
      .12
    );
}

.save-button {
  padding:
    8px 13px;

border:
    1px solid
    #d9dfdb;

border-radius:
    7px;

background:
    white;

color:
    var(--ink);

font-size:
    9px;

font-weight:
    600;
}

.avatar {
  width: 34px;
  height: 34px;

display: grid;

place-items: center;

border-radius:
    50%;

background:
    #e8d8c6;

color:
    #6e4933;

font-size:
    8px;

font-weight:
    700;
}

/* =====================================
   LAYOUT
===================================== */

.app-layout {
  min-height:
    calc(
      100vh - 72px
    );

display: grid;

grid-template-columns:
    245px
    minmax(0, 1fr);
}

/* =====================================
   SIDEBAR
===================================== */

.sidebar {
  position: sticky;

top: 72px;

height:
    calc(
      100vh - 72px
    );

display: flex;

flex-direction: column;

padding:
    30px 19px 20px;

background:
    var(--forest);

color:
    white;

overflow-y:
    auto;
}

.tax-year {
  padding:
    0 9px 24px;

border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .11
    );
}

.tax-year span {
  display: block;

color:
    #8ca99d;

font-size:
    6px;

font-weight:
    700;

letter-spacing:
    1.4px;
}

.tax-year strong {
  display: block;

margin-top:
    3px;

font-family:
    var(--serif);

font-size:
    29px;

font-weight:
    normal;
}

/* =====================================
   STEPS
===================================== */

.steps {
  display: flex;

flex-direction:
    column;

gap: 4px;

margin-top:
    20px;
}

.step {
  position:
    relative;

width: 100%;

display: grid;

grid-template-columns:
    27px
    1fr
    18px;

align-items:
    center;

gap: 7px;

padding:
    11px 9px;

border: 0;

border-radius:
    8px;

background:
    transparent;

color:
    #a7bcb4;

text-align:
    left;

cursor:
    pointer;

transition:
    .2s;
}

.step:hover {
  background:
    rgba(
      255,
      255,
      255,
      .05
    );
}

.step.active {
  background:
    rgba(
      216,
      239,
      227,
      .1
    );

color:
    white;
}

.step.active::before {
  content: "";

position:
    absolute;

left: -19px;

width: 3px;
  height: 32px;

border-radius:
    0 4px 4px 0;

background:
    var(--lime);
}

.step-number {
  color:
    #708e82;

font-size:
    7px;

font-weight:
    700;
}

.step.active
.step-number {
  color:
    var(--lime);
}

.step-copy strong {
  display: block;

font-size:
    9px;

font-weight:
    600;
}

.step-copy small {
  display: block;

margin-top:
    2px;

color:
    #718f83;

font-size:
    6px;
}

.step-check {
  width: 17px;
  height: 17px;

display: none;

place-items:
    center;

border-radius:
    50%;

background:
    var(--lime);

color:
    var(--forest);

font-size:
    7px;

font-weight:
    bold;
}

.step.completed
.step-check {
  display: grid;
}

/* =====================================
   HELP
===================================== */

.sidebar-help {
  margin-top:
    auto;

display: flex;

gap: 9px;

padding:
    13px;

border:
    1px solid
    rgba(
      255,
      255,
      255,
      .1
    );

border-radius:
    10px;

background:
    rgba(
      255,
      255,
      255,
      .045
    );
}

.help-icon {
  width: 26px;
  height: 26px;

flex-shrink: 0;

display: grid;

place-items: center;

border-radius:
    50%;

background:
    var(--lime);

color:
    var(--forest);

font-family:
    var(--serif);
}

.sidebar-help strong {
  font-size:
    8px;
}

.sidebar-help p {
  margin:
    4px 0 6px;

color:
    #83a094;

font-size:
    6px;

line-height:
    1.5;
}

.sidebar-help button {
  padding: 0;

border: 0;

background:
    transparent;

color:
    var(--lime);

font-size:
    6px;

cursor:
    pointer;
}

/* =====================================
   CONTENT
===================================== */

.content {
  width: 100%;

max-width:
    940px;

margin:
    0 auto;

padding:
    30px 55px 55px;
}

/* =====================================
   PROGRESS
===================================== */

.progress-header {
  display: flex;

align-items:
    center;

gap: 22px;

margin-bottom:
    45px;
}

.progress-header > div:first-child {
  min-width:
    105px;
}

.progress-header span {
  display: block;

color:
    #a0aaa4;

font-size:
    6px;

font-weight:
    700;

letter-spacing:
    1.2px;
}

.progress-header strong {
  display: block;

margin-top:
    3px;

font-size:
    8px;

font-weight:
    600;
}

.progress-track {
  height: 3px;

flex: 1;

overflow:
    hidden;

border-radius:
    20px;

background:
    #e3e8e4;
}

.progress-fill {
  width: 16.66%;
  height: 100%;

border-radius:
    20px;

background:
    var(--forest);

transition:
    width .4s ease;
}

/* =====================================
   PAGES
===================================== */

.form-step {
  display: none;
}

.form-step.active {
  display: block;

animation:
    pageIn .35s ease;
}

@keyframes pageIn {

from {
    opacity: 0;

transform:
      translateY(8px);
  }

to {
    opacity: 1;

transform:
      translateY(0);
  }

}

/* =====================================
   PAGE HEADING
===================================== */

.page-heading {
  max-width:
    610px;

margin-bottom:
    45px;
}

.eyebrow {
  display: block;

margin-bottom:
    11px;

color:
    #789187;

font-size:
    7px;

font-weight:
    700;

letter-spacing:
    2px;
}

.page-heading h1 {
  margin: 0;

font-family:
    var(--serif);

font-size:
    clamp(
      35px,
      5vw,
      53px
    );

font-weight:
    normal;

line-height:
    .98;

letter-spacing:
    -1.4px;
}

.page-heading h1 em {
  color:
    var(--forest-2);

font-weight:
    normal;
}

.page-heading p {
  max-width:
    480px;

margin:
    17px 0 0;

color:
    var(--muted);

font-size:
    10px;

line-height:
    1.7;
}

/* =====================================
   FORM SECTION
===================================== */

.form-section {
  margin-bottom:
    38px;

padding:
    27px;

border:
    1px solid
    var(--line);

border-radius:
    14px;

background:
    var(--white);

box-shadow:
    0 12px 35px
    rgba(
      26,
      48,
      39,
      .035
    );
}

.section-heading {
  display: flex;

align-items:
    flex-start;

gap: 12px;

margin-bottom:
    24px;
}

.section-heading > span {
  width: 28px;
  height: 28px;

flex-shrink: 0;

display: grid;

place-items:
    center;

border-radius:
    50%;

background:
    #edf3ef;

color:
    var(--forest);

font-family:
    var(--serif);

font-size:
    10px;
}

.section-heading h2 {
  margin: 0;

font-family:
    var(--serif);

font-size:
    20px;

font-weight:
    normal;
}

.section-heading p {
  margin:
    3px 0 0;

color:
    var(--muted);

font-size:
    8px;
}

/* =====================================
   FIELDS
===================================== */

.field-label {
  display: block;

margin-bottom:
    6px;

color:
    #4f5c56;

font-size:
    8px;

font-weight:
    600;
}

.modern-input {
  min-height:
    44px;

padding:
    10px 12px;

border:
    1px solid
    #d9dfdb;

border-radius:
    7px;

background:
    #fbfcfa;

color:
    var(--ink);

font-size:
    9px;

box-shadow:
    none !important;

transition:
    .2s;
}

.modern-input::placeholder {
  color:
    #abb3ae;
}

.modern-input:focus {
  border-color:
    var(--forest-2);

background:
    white;

box-shadow:
    0 0 0 3px
    rgba(
      36,
      86,
      70,
      .08
    ) !important;
}

.field-hint {
  display: block;

margin-top:
    5px;

color:
    #8b9690;

font-size:
    6px;
}

.input-icon-wrap {
  position:
    relative;
}

.input-icon-wrap
.modern-input {
  padding-right:
    55px;
}

.input-action {
  position:
    absolute;

right: 7px;
  top: 50%;

transform:
    translateY(-50%);

padding:
    5px 7px;

border: 0;

background:
    transparent;

color:
    var(--forest-2);

font-size:
    7px;

font-weight:
    700;

cursor:
    pointer;
}

/* =====================================
   CHOICE CARDS
===================================== */

.choice-grid {
  display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 10px;
}

.choice-card {
  position:
    relative;

min-height:
    104px;

padding:
    16px;

border:
    1px solid
    #dce2de;

border-radius:
    10px;

background:
    #fbfcfa;

cursor:
    pointer;

transition:
    .2s;
}

.choice-card:hover {
  border-color:
    #9fb6aa;
}

.choice-card.selected {
  border-color:
    var(--forest-2);

background:
    #f2f8f4;

box-shadow:
    inset 0 0 0 1px
    var(--forest-2);
}

.choice-card input {
  position:
    absolute;

opacity: 0;
}

.choice-icon {
  display: block;

margin-bottom:
    9px;

color:
    var(--forest-2);

font-family:
    var(--serif);

font-size:
    15px;
}

.choice-card strong {
  display: block;

padding-right:
    25px;

font-size:
    9px;
}

.choice-card small {
  display: block;

margin-top:
    4px;

color:
    var(--muted);

font-size:
    7px;
}

.radio-ui {
  position:
    absolute;

right: 14px;
  top: 14px;

width: 15px;
  height: 15px;

border:
    1px solid
    #bbc6c0;

border-radius:
    50%;
}

.choice-card.selected
.radio-ui {
  border:
    4px solid
    var(--forest-2);
}

/* =====================================
   INCOME OPTIONS
===================================== */

.income-options {
  display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 9px;
}

.toggle-card {
  position:
    relative;

display: grid;

grid-template-columns:
    35px 1fr 20px;

align-items:
    center;

gap: 9px;

padding:
    13px;

border:
    1px solid
    #dde3df;

border-radius:
    9px;

background:
    #fbfcfa;

cursor:
    pointer;
}

.toggle-card input {
  position:
    absolute;

opacity: 0;
}

.toggle-card.active {
  border-color:
    #89aa99;

background:
    #f1f7f3;
}

.income-icon {
  width: 34px;
  height: 34px;

display: grid;

place-items:
    center;

border-radius:
    8px;

background:
    #e9f1ec;

color:
    var(--forest-2);

font-size:
    14px;
}

.toggle-card strong {
  display: block;

font-size:
    8px;
}

.toggle-card small {
  display: block;

margin-top:
    2px;

color:
    var(--muted);

font-size:
    6px;
}

.toggle-check {
  width: 18px;
  height: 18px;

display: none;

place-items:
    center;

border-radius:
    50%;

background:
    var(--forest-2);

color:
    white;

font-size:
    7px;
}

.toggle-card.active
.toggle-check {
  display: grid;
}

/* =====================================
   EMPLOYER
===================================== */

.employer-card {
  padding:
    18px;

border:
    1px solid
    #e0e5e2;

border-radius:
    10px;

background:
    #fbfcfa;
}

.employer-heading {
  display: grid;

grid-template-columns:
    34px 1fr 30px;

align-items:
    center;

gap: 9px;

margin-bottom:
    17px;
}

.employer-number {
  width: 31px;
  height: 31px;

display: grid;

place-items:
    center;

border-radius:
    8px;

background:
    var(--forest);

color:
    var(--lime);

font-family:
    var(--serif);
}

.employer-heading strong {
  display: block;

font-size:
    9px;
}

.employer-heading small {
  color:
    var(--muted);

font-size:
    6px;
}

.employer-heading button {
  border: 0;

background:
    transparent;

color:
    var(--muted);
}

.money-field {
  position:
    relative;
}

.money-field > span {
  position:
    absolute;

left: 12px;
  top: 50%;

z-index: 2;

transform:
    translateY(-50%);

color:
    #75827b;

font-size:
    9px;
}

.money-field input {
  padding-left:
    25px;
}

.add-button {
  margin-top:
    12px;

padding:
    9px 12px;

border:
    1px dashed
    #aebdb5;

border-radius:
    7px;

background:
    transparent;

color:
    var(--forest-2);

font-size:
    8px;

cursor:
    pointer;
}

.add-button span {
  margin-right:
    4px;
}

/* =====================================
   UPLOAD
===================================== */

.upload-area {
  min-height:
    155px;

display: flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

padding:
    20px;

border:
    1px dashed
    #aabbb2;

border-radius:
    11px;

background:
    #fafcf9;

text-align:
    center;

cursor:
    pointer;

transition:
    .2s;
}

.upload-area:hover,
.upload-area.dragging {
  border-color:
    var(--forest-2);

background:
    #f0f7f3;
}

.upload-icon {
  width: 36px;
  height: 36px;

display: grid;

place-items:
    center;

margin-bottom:
    9px;

border-radius:
    50%;

background:
    var(--mint);

color:
    var(--forest);

font-size:
    17px;
}

.upload-area strong {
  font-size:
    9px;
}

.upload-area span {
  margin-top:
    3px;

color:
    var(--muted);

font-size:
    7px;
}

.upload-area small {
  margin-top:
    9px;

color:
    #a0aaa4;

font-size:
    6px;
}

.uploaded-files {
  display: flex;

flex-direction:
    column;

gap: 7px;

margin-top:
    10px;
}

.file-row {
  display: flex;

align-items:
    center;

gap: 9px;

padding:
    9px 11px;

border:
    1px solid
    #e0e5e2;

border-radius:
    7px;

background:
    #fafcf9;

font-size:
    7px;
}

.file-row strong {
  flex: 1;

overflow:
    hidden;

text-overflow:
    ellipsis;

white-space:
    nowrap;
}

.file-row span {
  color:
    #47a079;
}

/* =====================================
   DEDUCTION CHOICES
===================================== */

.large-choice-grid {
  display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 12px;
}

.large-choice {
  position:
    relative;

min-height:
    175px;

padding:
    22px;

border:
    1px solid
    #dce2de;

border-radius:
    11px;

background:
    #fbfcfa;

cursor:
    pointer;
}

.large-choice input {
  position:
    absolute;

opacity: 0;
}

.large-choice.selected {
  border-color:
    var(--forest-2);

background:
    #f2f8f4;

box-shadow:
    inset 0 0 0 1px
    var(--forest-2);
}

.recommended {
  position:
    absolute;

right: 12px;
  top: 12px;

padding:
    4px 6px;

border-radius:
    4px;

background:
    var(--lime);

color:
    var(--forest);

font-size:
    5px;

font-weight:
    700;

letter-spacing:
    .7px;
}

.large-choice-icon {
  margin-bottom:
    22px;

color:
    var(--forest-2);

font-family:
    var(--serif);

font-size:
    29px;
}

.large-choice strong {
  display: block;

font-family:
    var(--serif);

font-size:
    16px;

font-weight:
    normal;
}

.large-choice p {
  margin:
    6px 0 0;

color:
    var(--muted);

font-size:
    7px;

line-height:
    1.55;
}

/* =====================================
   DEDUCTIONS
===================================== */

.deduction-list {
  border:
    1px solid
    #e1e5e2;

border-radius:
    10px;

overflow:
    hidden;
}

.deduction-row {
  display: grid;

grid-template-columns:
    38px
    1fr
    145px;

align-items:
    center;

gap: 10px;

padding:
    13px;

border-bottom:
    1px solid
    #e7ebe8;
}

.deduction-row:last-child {
  border-bottom: 0;
}

.deduction-icon {
  width: 34px;
  height: 34px;

display: grid;

place-items:
    center;

border-radius:
    8px;

background:
    #edf3ef;

color:
    var(--forest-2);

font-size:
    13px;
}

.deduction-copy strong {
  display: block;

font-size:
    8px;
}

.deduction-copy small {
  color:
    var(--muted);

font-size:
    6px;
}

/* =====================================
   DEPENDENTS
===================================== */

.dependent-card {
  position:
    relative;

margin-bottom:
    10px;

padding:
    18px;

border:
    1px solid
    #dfe5e1;

border-radius:
    10px;

background:
    #fbfcfa;

animation:
    pageIn .25s ease;
}

.dependent-header {
  display: flex;

align-items:
    center;

justify-content:
    space-between;

margin-bottom:
    15px;
}

.dependent-header strong {
  font-family:
    var(--serif);

font-size:
    15px;

font-weight:
    normal;
}

.remove-dependent {
  border: 0;

background:
    transparent;

color:
    #ba6551;

font-size:
    7px;

cursor:
    pointer;
}

.add-dependent {
  width: 100%;

display: flex;

align-items:
    center;

gap: 12px;

padding:
    16px;

border:
    1px dashed
    #aabbb2;

border-radius:
    10px;

background:
    #fafcf9;

color:
    var(--ink);

text-align:
    left;

cursor:
    pointer;
}

.add-dependent > span {
  width: 34px;
  height: 34px;

display: grid;

place-items:
    center;

border-radius:
    50%;

background:
    var(--mint);

color:
    var(--forest);

font-size:
    15px;
}

.add-dependent strong {
  display: block;

font-size:
    8px;
}

.add-dependent small {
  color:
    var(--muted);

font-size:
    6px;
}

/* =====================================
   PAYMENT
===================================== */

.payment-options {
  display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 10px;
}

.payment-card {
  position:
    relative;

display: grid;

grid-template-columns:
    40px 1fr 18px;

align-items:
    center;

gap: 10px;

padding:
    17px;

border:
    1px solid
    #dce2de;

border-radius:
    10px;

background:
    #fbfcfa;

cursor:
    pointer;
}

.payment-card input {
  position:
    absolute;

opacity: 0;
}

.payment-card.selected {
  border-color:
    var(--forest-2);

background:
    #f2f8f4;
}

.payment-icon {
  width: 38px;
  height: 38px;

display: grid;

place-items:
    center;

border-radius:
    9px;

background:
    #e7f0eb;

color:
    var(--forest-2);

font-size:
    15px;
}

.payment-card strong {
  display: block;

font-size:
    8px;
}

.payment-card small {
  color:
    var(--muted);

font-size:
    6px;
}

.payment-card.selected
.radio-ui {
  border:
    4px solid
    var(--forest-2);
}

/* =====================================
   BANK CARD
===================================== */

.bank-card {
  position:
    relative;

overflow:
    hidden;

padding:
    23px;

border-radius:
    14px;

background:
    linear-gradient(
      135deg,
      #193e33,
      #0d2a22
    );

color:
    white;
}

.bank-card::after {
  content: "";

position:
    absolute;

width: 230px;
  height: 230px;

right: -100px;
  top: -100px;

border:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

border-radius:
    50%;

box-shadow:
    0 0 0 35px
    rgba(
      255,
      255,
      255,
      .025
    );
}

.bank-header {
  position:
    relative;

z-index: 2;

display: flex;

justify-content:
    space-between;

margin-bottom:
    22px;
}

.bank-header span {
  display: block;

color:
    #7da496;

font-size:
    6px;

letter-spacing:
    1px;
}

.bank-header strong {
  display: block;

margin-top:
    3px;

font-family:
    var(--serif);

font-size:
    18px;

font-weight:
    normal;
}

.bank-symbol {
  color:
    var(--lime);

font-size:
    23px;
}

.bank-card .row {
  position:
    relative;

z-index: 2;
}

.bank-card
.field-label {
  color:
    #9ab4aa;
}

.dark-input {
  border-color:
    rgba(
      255,
      255,
      255,
      .12
    );

background:
    rgba(
      255,
      255,
      255,
      .07
    );

color:
    white;
}

.dark-input:focus {
  border-color:
    var(--lime);

background:
    rgba(
      255,
      255,
      255,
      .1
    );

color:
    white;
}

/* =====================================
   SUMMARY
===================================== */

.summary-card {
  margin-bottom:
    30px;

overflow:
    hidden;

border-radius:
    15px;

background:
    var(--forest);

color:
    white;
}

.summary-top {
  display: flex;

align-items:
    center;

justify-content:
    space-between;

padding:
    22px 25px;

border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .1
    );
}

.summary-top span {
  color:
    #86a69a;

font-size:
    6px;

letter-spacing:
    1.3px;
}

.summary-top h2 {
  margin:
    4px 0 0;

font-family:
    var(--serif);

font-size:
    23px;

font-weight:
    normal;
}

.summary-status {
  padding:
    6px 9px;

border-radius:
    20px;

background:
    var(--lime);

color:
    var(--forest);

font-size:
    6px;

font-weight:
    700;

letter-spacing:
    1px;
}

.summary-numbers {
  display: grid;

grid-template-columns:
    repeat(3, 1fr);
}

.summary-numbers > div {
  padding:
    20px;

border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      .09
    );
}

.summary-numbers > div:last-child {
  border-right: 0;
}

.summary-numbers span {
  display: block;

color:
    #89a69b;

font-size:
    6px;
}

.summary-numbers strong {
  display: block;

margin-top:
    5px;

font-family:
    var(--serif);

font-size:
    20px;

font-weight:
    normal;
}

.highlight-summary {
  background:
    rgba(
      200,
      228,
      108,
      .09
    );
}

.highlight-summary strong {
  color:
    var(--lime);
}

/* =====================================
   DECLARATION
===================================== */

.declaration {
  display: flex;

align-items:
    flex-start;

gap: 11px;

padding:
    14px;

border:
    1px solid
    #e0e5e2;

border-radius:
    9px;

background:
    #fafcf9;

cursor:
    pointer;
}

.declaration input {
  position:
    absolute;

opacity: 0;
}

.custom-checkbox {
  width: 19px;
  height: 19px;

flex-shrink: 0;

display: grid;

place-items:
    center;

border:
    1px solid
    #b8c4bd;

border-radius:
    4px;

color:
    transparent;

font-size:
    8px;
}

.declaration input:checked
+
.custom-checkbox {
  border-color:
    var(--forest);

background:
    var(--forest);

color:
    white;
}

.declaration p {
  margin: 0;

color:
    #69766f;

font-size:
    8px;

line-height:
    1.55;
}

.signature-area {
  margin-top:
    22px;
}

.signature-input {
  width: 100%;

padding:
    10px 2px;

border: 0;

border-bottom:
    1px solid
    #aab5af;

outline: none;

background:
    transparent;

color:
    var(--forest);

font-family:
    var(--serif);

font-size:
    24px;
}

.signature-input::placeholder {
  color:
    #c3cac6;
}

.signature-area small {
  display: block;

margin-top:
    6px;

color:
    #98a19c;

font-size:
    6px;
}

/* =====================================
   SUBMIT
===================================== */

.submit-return {
  width: 100%;

display: flex;

align-items:
    center;

justify-content:
    space-between;

padding:
    17px 19px;

border: 0;

border-radius:
    9px;

background:
    var(--forest);

color:
    white;

cursor:
    pointer;

transition:
    .2s;
}

.submit-return:hover {
  background:
    #225343;

transform:
    translateY(-1px);
}

.submit-return span {
  font-size:
    9px;

font-weight:
    600;
}

.submit-return strong {
  color:
    var(--lime);

font-size:
    18px;
}

/* =====================================
   NAVIGATION
===================================== */

.form-navigation {
  display: grid;

grid-template-columns:
    120px
    1fr
    130px;

align-items:
    center;

gap: 12px;

margin-top:
    25px;

padding-top:
    22px;

border-top:
    1px solid
    var(--line);
}

.back-button {
  padding:
    11px 13px;

border:
    1px solid
    #d8dfda;

border-radius:
    7px;

background:
    white;

color:
    #59665f;

font-size:
    8px;

cursor:
    pointer;
}

.back-button:disabled {
  opacity:
    .35;

cursor:
    default;
}

.autosave {
  display: flex;

align-items:
    center;

justify-content:
    center;

gap: 5px;

color:
    #8a9690;

font-size:
    7px;
}

.autosave span {
  color:
    #51a27d;
}

.continue-button {
  display: flex;

align-items:
    center;

justify-content:
    space-between;

padding:
    11px 14px;

border: 0;

border-radius:
    7px;

background:
    var(--forest);

color:
    white;

font-size:
    8px;

font-weight:
    600;

cursor:
    pointer;
}

.continue-button span {
  color:
    var(--lime);

font-size:
    13px;
}

/* =====================================
   SUCCESS
===================================== */

.success-overlay {
  position:
    fixed;

inset: 0;

z-index:
    1000;

display: none;

align-items:
    center;

justify-content:
    center;

padding:
    20px;

background:
    rgba(
      12,
      31,
      25,
      .78
    );

backdrop-filter:
    blur(8px);
}

.success-overlay.visible {
  display: flex;
}

.success-card {
  width:
    min(
      420px,
      100%
    );

padding:
    40px;

border-radius:
    18px;

background:
    white;

text-align:
    center;

animation:
    successIn
    .35s ease;
}

@keyframes successIn {

from {
    opacity: 0;

transform:
      scale(.94)
      translateY(10px);
  }

to {
    opacity: 1;

transform:
      scale(1)
      translateY(0);
  }

}

.success-mark {
  width: 58px;
  height: 58px;

display: grid;

place-items:
    center;

margin:
    0 auto 20px;

border-radius:
    50%;

background:
    var(--lime);

color:
    var(--forest);

font-size:
    21px;
}

.success-card > span {
  color:
    #85938c;

font-size:
    6px;

font-weight:
    700;

letter-spacing:
    1.5px;
}

.success-card h2 {
  margin:
    8px 0;

font-family:
    var(--serif);

font-size:
    35px;

font-weight:
    normal;
}

.success-card p {
  margin:
    0 auto;

max-width:
    270px;

color:
    var(--muted);

font-size:
    8px;

line-height:
    1.6;
}

.confirmation {
  margin:
    22px 0;

padding:
    10px;

border-radius:
    7px;

background:
    #f2f6f3;

color:
    var(--forest);

font-family:
    monospace;

font-size:
    10px;

letter-spacing:
    1px;
}

.success-card button {
  padding:
    10px 18px;

border: 0;

border-radius:
    7px;

background:
    var(--forest);

color:
    white;

font-size:
    8px;

cursor:
    pointer;
}

/* =====================================
   RESPONSIVE
===================================== */

@media (
  max-width: 850px
) {

.app-layout {
    grid-template-columns:
      190px
      1fr;
  }

.content {
    padding:
      28px;
  }

}

@media (
  max-width: 680px
) {

.topbar {
    padding:
      0 15px;
  }

.secure-label,
  .save-button {
    display: none;
  }

.app-layout {
    display: block;
  }

.sidebar {
    position:
      static;

height: auto;

padding:
      12px;

overflow-x:
      auto;
  }

.tax-year,
  .sidebar-help {
    display: none;
  }

.steps {
    flex-direction:
      row;

min-width:
      570px;

margin: 0;
  }

.step {
    grid-template-columns:
      22px 1fr;

min-width:
      90px;

padding:
      9px;
  }

.step.active::before,
  .step-copy small,
  .step-check {
    display: none;
  }

.content {
    padding:
      25px 15px
      40px;
  }

.progress-header {
    margin-bottom:
      30px;
  }

.choice-grid,
  .income-options,
  .large-choice-grid,
  .payment-options {
    grid-template-columns:
      1fr;
  }

.form-section {
    padding:
      20px;
  }

.deduction-row {
    grid-template-columns:
      36px 1fr;
  }

.deduction-row
  .money-field {
    grid-column:
      2;

width: 100%;
  }

.summary-numbers {
    grid-template-columns:
      1fr;
  }

.summary-numbers > div {
    border-right: 0;

border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        .09
      );
  }

.form-navigation {
    grid-template-columns:
      1fr 1fr;
  }

.autosave {
    display: none;
  }

}

/* =========================================
   FORM NAVIGATION
========================================= */

let currentStep = 1;

const totalSteps = 6;

const pages =
  document.querySelectorAll(
    ".form-step"
  );

const steps =
  document.querySelectorAll(
    ".step"
  );

const backButton =
  document.getElementById(
    "backButton"
  );

const continueButton =
  document.getElementById(
    "continueButton"
  );

const progressFill =
  document.getElementById(
    "progressFill"
  );

const progressLabel =
  document.getElementById(
    "progressLabel"
  );

const progressPercent =
  document.getElementById(
    "progressPercent"
  );

function showStep(step) {

currentStep =
    Math.max(
      1,
      Math.min(
        totalSteps,
        step
      )
    );

pages.forEach(
    function(page) {

page.classList.toggle(
        "active",
        Number(
          page.dataset.page
        ) === currentStep
      );

}
  );

steps.forEach(
    function(item) {

const number =
        Number(
          item.dataset.step
        );

item.classList.toggle(
        "active",
        number === currentStep
      );

item.classList.toggle(
        "completed",
        number < currentStep
      );

}
  );

const percent =
    Math.round(
      (
        currentStep /
        totalSteps
      ) *
      100
    );

progressFill.style.width =
    percent + "%";

progressLabel.textContent =
    "STEP " +
    currentStep +
    " OF " +
    totalSteps;

progressPercent.textContent =
    percent +
    "% complete";

backButton.disabled =
    currentStep === 1;

if (
    currentStep ===
    totalSteps
  ) {

continueButton.style.display =
      "none";

updateSummary();

} else {

continueButton.style.display =
      "flex";

}

window.scrollTo({
    top: 0,
    behavior: "smooth"
  });

}

continueButton.addEventListener(
  "click",
  function() {

if (
      currentStep <
      totalSteps
    ) {

showStep(
        currentStep + 1
      );

}

}
);

backButton.addEventListener(
  "click",
  function() {

if (
      currentStep > 1
    ) {

showStep(
        currentStep - 1
      );

}

}
);

steps.forEach(
  function(step) {

step.addEventListener(
      "click",
      function() {

showStep(
          Number(
            step.dataset.step
          )
        );

}
    );

}
);

/* =========================================
   RADIO CARDS
========================================= */

function setupRadioCards(
  selector
) {

document
    .querySelectorAll(
      selector
    )
    .forEach(
      function(card) {

card.addEventListener(
          "click",
          function() {

const input =
              card.querySelector(
                'input[type="radio"]'
              );

if (!input) {
              return;
            }

const name =
              input.name;

document
              .querySelectorAll(
                'input[name="' +
                name +
                '"]'
              )
              .forEach(
                function(radio) {

const parent =
                    radio.closest(
                      selector
                    );

if (parent) {

parent.classList
                      .remove(
                        "selected"
                      );

}

}
              );

input.checked =
              true;

card.classList.add(
              "selected"
            );

}
        );

}
    );

}

setupRadioCards(
  ".choice-card"
);

setupRadioCards(
  ".large-choice"
);

setupRadioCards(
  ".payment-card"
);

/* =========================================
   TOGGLE CARDS
========================================= */

document
  .querySelectorAll(
    ".toggle-card"
  )
  .forEach(
    function(card) {

card.addEventListener(
        "click",
        function() {

const input =
            card.querySelector(
              "input"
            );

/*
            Label already changes the
            checkbox state. Wait until
            the click has completed.
          */

setTimeout(
            function() {

card.classList.toggle(
                "active",
                input.checked
              );

},
            0
          );

}
      );

}
  );

/* =========================================
   SSN VISIBILITY
========================================= */

const ssn =
  document.getElementById(
    "ssn"
  );

const showSSN =
  document.getElementById(
    "showSSN"
  );

showSSN.addEventListener(
  "click",
  function() {

if (
      ssn.type ===
      "password"
    ) {

ssn.type =
        "text";

showSSN.textContent =
        "Hide";

} else {

ssn.type =
        "password";

showSSN.textContent =
        "Show";

}

}
);

/* =========================================
   FILE UPLOAD
========================================= */

const uploadArea =
  document.getElementById(
    "uploadArea"
  );

const fileInput =
  document.getElementById(
    "fileInput"
  );

const uploadedFiles =
  document.getElementById(
    "uploadedFiles"
  );

fileInput.addEventListener(
  "change",
  function() {

showFiles(
      fileInput.files
    );

}
);

uploadArea.addEventListener(
  "dragover",
  function(event) {

event.preventDefault();

uploadArea.classList.add(
      "dragging"
    );

}
);

uploadArea.addEventListener(
  "dragleave",
  function() {

uploadArea.classList.remove(
      "dragging"
    );

}
);

uploadArea.addEventListener(
  "drop",
  function(event) {

event.preventDefault();

uploadArea.classList.remove(
      "dragging"
    );

showFiles(
      event.dataTransfer.files
    );

}
);

function showFiles(
  files
) {

Array.from(
    files
  ).forEach(
    function(file) {

const row =
        document.createElement(
          "div"
        );

row.className =
        "file-row";

row.innerHTML =
        "<span>✓</span>" +
        "<strong>" +
        escapeHTML(
          file.name
        ) +
        "</strong>" +
        "<small>" +
        formatFileSize(
          file.size
        ) +
        "</small>";

uploadedFiles.appendChild(
        row
      );

}
  );

}

function formatFileSize(
  bytes
) {

if (
    bytes <
    1024 * 1024
  ) {

return (
      bytes /
      1024
    ).toFixed(0) +
    " KB";

}

return (
    bytes /
    (
      1024 *
      1024
    )
  ).toFixed(1) +
  " MB";

}

function escapeHTML(
  value
) {

const div =
    document.createElement(
      "div"
    );

div.textContent =
    value;

return div.innerHTML;

}

/* =========================================
   DEPENDENTS
========================================= */

const dependentsContainer =
  document.getElementById(
    "dependentsContainer"
  );

const addDependent =
  document.getElementById(
    "addDependent"
  );

let dependentCount = 0;

addDependent.addEventListener(
  "click",
  function() {

dependentCount++;

const card =
      document.createElement(
        "div"
      );

card.className =
      "dependent-card";

card.innerHTML = `

<strong>
          Dependent ${dependentCount}
        </strong>

<button
          class="remove-dependent"
          type="button"
        >
          Remove
        </button>

</div>

<label class="field-label">
            First name
          </label>

</div>

</div>

<label class="field-label">
            Relationship
          </label>

<select
            class="form-select modern-input"
          >
            <option>Child</option>
            <option>Parent</option>
            <option>Sibling</option>
            <option>Other relative</option>
          </select>

</div>

<label class="field-label">
            Date of birth
          </label>

</div>

<label class="field-label">
            Months lived with you
          </label>

</div>

card
      .querySelector(
        ".remove-dependent"
      )
      .addEventListener(
        "click",
        function() {

card.remove();

}
      );

dependentsContainer
      .appendChild(
        card
      );

}
);

/* =========================================
   SUMMARY
========================================= */

const wages =
  document.getElementById(
    "wages"
  );

const withholding =
  document.getElementById(
    "withholding"
  );

function updateSummary() {

const income =
    Number(
      wages.value
    ) || 0;

const withheld =
    Number(
      withholding.value
    ) || 0;

/*
    This is intentionally just a UI
    demonstration calculation and not
    an actual tax calculation.
  */

const demoEstimate =
    Math.max(
      0,
      withheld -
      income * .08
    );

document.getElementById(
    "summaryIncome"
  ).textContent =
    formatCurrency(
      income
    );

document.getElementById(
    "summaryWithholding"
  ).textContent =
    formatCurrency(
      withheld
    );

document.getElementById(
    "refundEstimate"
  ).textContent =
    formatCurrency(
      demoEstimate
    );

}

function formatCurrency(
  amount
) {

return new Intl
    .NumberFormat(
      "en-US",
      {
        style:
          "currency",

currency:
          "USD",

maximumFractionDigits:
          0
      }
    )
    .format(
      amount
    );

}

/* =========================================
   SAVE DRAFT
========================================= */

const saveButton =
  document.getElementById(
    "saveButton"
  );

saveButton.addEventListener(
  "click",
  function() {

const oldText =
      saveButton.textContent;

saveButton.textContent =
      "✓ Saved";

setTimeout(
      function() {

saveButton.textContent =
          oldText;

},
      1400
    );

}
);

/* =========================================
   SUBMIT
========================================= */

const submitReturn =
  document.getElementById(
    "submitReturn"
  );

const declaration =
  document.getElementById(
    "declaration"
  );

const signature =
  document.getElementById(
    "signature"
  );

const successOverlay =
  document.getElementById(
    "successOverlay"
  );

submitReturn.addEventListener(
  "click",
  function() {

if (
      !declaration.checked
    ) {

alert(
        "Please confirm the declaration before submitting."
      );

return;
    }

if (
      !signature.value.trim()
    ) {

alert(
        "Please enter your electronic signature."
      );

signature.focus();

return;
    }

successOverlay
      .classList.add(
        "visible"
      );

}
);

document
  .getElementById(
    "closeSuccess"
  )
  .addEventListener(
    "click",
    function() {

successOverlay
        .classList.remove(
          "visible"
        );

}
  );

/* =========================================
   INITIALIZE
========================================= */

showStep(1);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground