:root {
      --bg: #f6efe4;
      --card: #fffaf2;
      --text: #3d342c;
      --muted: #88796b;
      --line: #e6d7c5;
      --brown: #9b735c;
      --brown-dark: #6f4e3f;
      --soft: #ead9c9;
      --green: #98a98e;
      --pink: #d9a99c;
      --shadow: 0 24px 70px rgba(87, 63, 43, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 10%, rgba(255,255,255,.9), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(219,190,166,.55), transparent 26%),
        radial-gradient(circle at 50% 90%, rgba(152,169,142,.18), transparent 38%),
        var(--bg);
    }

    button {
      font-family: inherit;
    }

    .page {
      min-height: 100vh;
      padding: 20px 18px 28px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .app {
      width: min(720px, 100%);
    }

    .screen {
      display: none;
      width: 100%;
      min-height: auto;
      padding: 22px 10px;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      border: 0;
      flex-direction: column;
    }

    .screen.active {
      display: flex;
    }

    #test.likert-mode {
      min-height: calc(100vh - 40px);
    }

    #test.likert-mode .question,
    #test.likert-mode .sub,
    #test.likert-mode .options,
    #test.likert-mode .actions {
      width: min(640px, 100%);
      margin-left: auto;
      margin-right: auto;
    }

    #test.likert-mode .question {
      margin-top: auto;
    }

    #test.likert-mode .question,
    #test.likert-mode .sub {
      text-align: center;
    }

    #test.likert-mode .actions {
      margin-top: 36px;
      margin-bottom: auto;
    }

    @media (max-width: 600px) {
      #test.likert-mode {
        min-height: calc(100vh - 28px);
      }
    }

    .cover-screen {
      position: relative;
      overflow: hidden;
      min-height: calc(100vh - 48px);
      justify-content: center;
      align-items: center;
    }

    .cover-screen::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -90px;
      top: -70px;
      border-radius: 50%;
      background: rgba(155,115,92,.13);
    }

    .cover-screen::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      left: -80px;
      bottom: -90px;
      border-radius: 50%;
      background: rgba(152,169,142,.16);
    }

    .cover-content {
      position: relative;
      z-index: 1;
      max-width: 520px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .cover-title {
      margin: 0 0 18px;
      font-size: clamp(46px, 8vw, 76px);
      line-height: 1.02;
      letter-spacing: -2px;
      font-weight: 950;
    }

    .cover-desc {
      max-width: 520px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.9;
      margin: 0 0 28px;
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }

    .title {
      margin: 0;
      font-size: 24px;
      font-weight: 900;
    }

    .step {
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    .progress {
      height: 9px;
      width: 100%;
      border-radius: 999px;
      overflow: hidden;
      background: #eadfd2;
      margin-bottom: 32px;
    }

    .bar {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, #dfc6b5, var(--brown));
      transition: .25s ease;
    }

    .question {
      margin: 0 0 24px;
      font-size: clamp(24px, 3vw, 35px);
      line-height: 1.34;
      letter-spacing: -0.6px;
      font-weight: 950;
    }

    .sub {
      margin: -10px 0 24px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
    }

    .options {
      display: grid;
      gap: 14px;
    }

    .options-likert {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 16px;
      max-width: 620px;
      margin: 6px auto 0;
      padding: 12px 18px 4px;
      position: relative;
    }

    .option {
      width: 100%;
      padding: 17px 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.52);
      color: var(--text);
      text-align: left;
      font-size: 16px;
      line-height: 1.6;
      cursor: pointer;
      transition: .18s ease;
    }

    .option:hover {
      transform: translateY(-2px);
      background: #fff;
      border-color: rgba(155,115,92,.42);
      box-shadow: 0 12px 28px rgba(78,56,39,.08);
    }

    .option.selected {
      background: #ead9c9;
      color: var(--brown-dark);
      border-color: var(--brown);
      font-weight: 800;
    }

    .option-likert {
      position: relative;
      z-index: 1;
      width: auto;
      padding: 22px 0 0;
      border: 0;
      background: transparent;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-items: center;
      box-shadow: none;
    }

    .likert-top-label {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      line-height: 1.3;
      color: rgba(91, 71, 59, 0.66);
      white-space: nowrap;
    }

    .option-likert:hover {
      transform: none;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }

    .likert-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid rgba(155,115,92,.5);
      background: rgba(255,255,255,.7);
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 18px;
      font-weight: 900;
      transition: .18s ease;
      box-shadow: 0 10px 20px rgba(78,56,39,.06);
    }

    .likert-circle.size-0,
    .likert-circle.size-4 {
      width: 64px;
      height: 64px;
    }

    .likert-circle.size-1,
    .likert-circle.size-3 {
      width: 52px;
      height: 52px;
    }

    .option-likert.selected .likert-circle {
      background: linear-gradient(180deg, #f1dfd0, #ddbea8);
      border-color: var(--brown-dark);
      color: var(--brown-dark);
      box-shadow: 0 12px 24px rgba(111,78,63,.16);
      transform: translateY(-2px);
    }

    .option-likert:focus-visible {
      outline: none;
    }

    .option-likert:focus-visible .likert-circle {
      box-shadow:
        0 0 0 4px rgba(255,250,242,.9),
        0 0 0 6px rgba(155,115,92,.22);
    }

    .actions {
      margin-top: auto;
      display: flex;
      gap: 14px;
      justify-content: space-between;
      padding-top: 28px;
    }

    .btn {
      border: 0;
      cursor: pointer;
      border-radius: 999px;
      padding: 15px 24px;
      font-size: 15px;
      transition: .18s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .primary {
      color: #fff;
      background: var(--brown-dark);
      box-shadow: 0 16px 34px rgba(111,78,63,.24);
    }

    .secondary {
      color: var(--brown-dark);
      background: #eee1d3;
    }

    .wechat-share {
      color: #fff;
      background: #07c160;
      box-shadow: 0 16px 34px rgba(7,193,96,.24);
    }

    .result-card {
      padding: 12px 0 0;
    }

    .code {
      display: inline-flex;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(255,255,255,.62);
      color: var(--brown-dark);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 1px;
      margin-bottom: 14px;
    }

    .score {
      font-size: clamp(58px, 8.5vw, 90px);
      line-height: 1;
      color: var(--brown-dark);
      font-weight: 950;
      letter-spacing: -4px;
      margin-bottom: 12px;
    }

    .score span {
      font-size: 22px;
      color: var(--muted);
      letter-spacing: 0;
    }

    .type {
      font-size: clamp(30px, 4.6vw, 48px);
      line-height: 1.1;
      font-weight: 950;
      margin: 0 0 14px;
      letter-spacing: .8px;
    }

    .roast {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
      margin: 0;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .tag {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.58);
      color: var(--brown-dark);
      font-size: 13px;
      border: 1px solid rgba(155,115,92,.12);
    }

    .tags.code-queen .tag,
    .tags.code-aura .tag {
      color: #fffaf6;
      border: 0;
      box-shadow: 0 10px 24px rgba(194,129,69,.14);
    }

    .tags.code-vip .tag:nth-child(1) {
      background: linear-gradient(135deg, #ef8f8f, #cf5f68);
      color: #fffaf6;
      border: 0;
      box-shadow: 0 10px 24px rgba(207,95,104,.16);
    }

    .tags.code-queen .tag:nth-child(1) {
      background: linear-gradient(135deg, #f2c37f, #e59472);
    }

    .tags.code-queen .tag:nth-child(2) {
      background: linear-gradient(135deg, #ffc7d9, #df8db4);
    }

    .tags.code-queen .tag:nth-child(3) {
      background: linear-gradient(135deg, #f1d17c, #caa24e);
    }

    .tags.code-queen .tag:nth-child(4) {
      background: linear-gradient(135deg, #bba7ff, #8f7be8);
    }

    .result-stage.code-aura {
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.95), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255,230,168,.68), transparent 20%),
        radial-gradient(circle at 52% 92%, rgba(255,169,196,.34), transparent 30%),
        linear-gradient(135deg, rgba(255,247,212,.98), rgba(255,225,189,.86) 38%, rgba(255,209,223,.84) 68%, rgba(226,240,255,.82));
      border-color: rgba(211,168,71,.26);
      box-shadow: 0 24px 60px rgba(210,168,89,.18);
    }

    .result-stage.code-aura .stage-stamp {
      background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,237,192,.9));
      border-color: rgba(211,168,71,.28);
      box-shadow: 0 10px 24px rgba(211,168,71,.14);
    }

    .tags.code-aura .tag:nth-child(1) {
      background: linear-gradient(135deg, #ffb36b, #ff7f96);
    }

    .tags.code-aura .tag:nth-child(2) {
      background: linear-gradient(135deg, #ffd86f, #ff9f5a);
    }

    .tags.code-aura .tag:nth-child(3) {
      background: linear-gradient(135deg, #8ccfff, #7e9bff);
    }

    .tags.code-aura .tag:nth-child(4) {
      background: linear-gradient(135deg, #ff9ed6, #c58cff);
    }

    .result-stage {
      margin-top: 18px;
      position: relative;
      border-radius: 28px;
      padding: 24px 20px 22px;
      background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.85), transparent 22%),
        radial-gradient(circle at 82% 16%, rgba(255,255,255,.5), transparent 18%),
        linear-gradient(145deg, rgba(240,223,207,.92), rgba(255,248,238,.82));
      border: 1px solid rgba(155,115,92,.14);
      overflow: hidden;
    }

    .result-stage::before,
    .result-stage::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      opacity: .72;
    }

    .result-stage::before {
      width: 132px;
      height: 132px;
      top: -42px;
      right: -26px;
      background: rgba(255,255,255,.34);
    }

    .result-stage::after {
      width: 110px;
      height: 110px;
      left: -28px;
      bottom: -34px;
      background: rgba(255,255,255,.2);
    }

    .stage-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    .stage-stamp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(155,115,92,.14);
      color: var(--brown-dark);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

    .stage-meter {
      height: 10px;
      flex: 1;
      border-radius: 999px;
      background: rgba(255,255,255,.44);
      overflow: hidden;
    }

    .stage-meter-bar {
      height: 100%;
      width: 68%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(155,115,92,.4), var(--brown-dark));
    }

    .stage-body {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      text-align: center;
      justify-items: center;
    }

    .stage-code {
      font-size: clamp(90px, 18vw, 156px);
      line-height: .86;
      font-weight: 950;
      letter-spacing: -7px;
      color: transparent;
      background: linear-gradient(180deg, rgba(111,78,63,.38), rgba(111,78,63,.16));
      -webkit-background-clip: text;
      background-clip: text;
      text-shadow: 0 12px 30px rgba(111,78,63,.14);
      font-family: "Georgia", "Times New Roman", "PingFang SC", "Microsoft YaHei", serif;
    }

    .stage-ascii {
      display: none;
      font-size: clamp(18px, 3vw, 26px);
      line-height: 1.2;
      color: rgba(92, 68, 54, 0.82);
      font-weight: 800;
      letter-spacing: 0.5px;
      white-space: pre-wrap;
    }

    .result-stage.code-kimi {
      background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.92), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(255,205,160,.56), transparent 20%),
        radial-gradient(circle at 50% 92%, rgba(158,207,255,.24), transparent 28%),
        linear-gradient(138deg, rgba(255,244,183,.96), rgba(255,215,195,.9) 46%, rgba(206,234,255,.88));
      border-color: rgba(121,164,192,.24);
      box-shadow: 0 24px 52px rgba(121,164,192,.14);
    }

    .result-stage.code-kimi .stage-body {
      gap: 14px;
    }

    .result-stage.code-kimi .stage-code {
      background: linear-gradient(180deg, rgba(132,90,62,.42), rgba(132,90,62,.18));
      -webkit-background-clip: text;
      background-clip: text;
      font-size: clamp(50px, 14vw, 118px);
      letter-spacing: -4px;
    }

    .result-stage.code-kimi .stage-ascii {
      display: block;
    }

    #result .top {
      align-items: flex-end;
      margin-bottom: 8px;
    }

    #result .title {
      font-size: 28px;
      letter-spacing: 1px;
      font-weight: 900;
    }

    #result .actions {
      margin-top: 18px;
      padding-top: 18px;
    }

    .result-stage.code-npc .stage-meter-bar {
      width: 24%;
      background: linear-gradient(90deg, rgba(122,89,74,.26), #7a594a);
    }

    .result-stage.code-atm .stage-meter-bar {
      width: 46%;
      background: linear-gradient(90deg, rgba(155,115,92,.35), #9b735c);
    }

    .result-stage.code-try .stage-meter-bar {
      width: 63%;
      background: linear-gradient(90deg, rgba(152,169,142,.35), #98a98e);
    }

    .result-stage.code-vip .stage-meter-bar {
      width: 82%;
      background: linear-gradient(90deg, rgba(143,123,101,.35), #8f7b65);
    }

    .result-stage.code-queen .stage-meter-bar {
      width: 100%;
      background: linear-gradient(90deg, rgba(184,139,113,.4), #b88b71);
    }

    .result-stage.code-dust .stage-meter-bar {
      width: 14%;
      background: linear-gradient(90deg, rgba(110,110,110,.28), #6e6e6e);
    }

    .result-stage.code-aura .stage-meter-bar {
      width: 100%;
      background: linear-gradient(90deg, rgba(206,171,88,.38), #ceab58);
    }

    .result-stage.code-kimi .stage-meter-bar {
      width: 55%;
      background: linear-gradient(90deg, rgba(121,164,192,.35), #79a4c0);
    }

    .disclaimer {
      margin-top: 20px;
      text-align: center;
      color: rgba(61, 52, 44, 0.42);
      font-size: 11px;
      line-height: 1.65;
      letter-spacing: 0.2px;
    }

    @media (max-width: 600px) {
      .page {
        padding: 0 14px 14px;
        align-items: flex-start;
      }

      .screen {
        min-height: auto;
        padding: 18px 4px;
        border-radius: 0;
      }

      .cover-screen {
        min-height: calc(100vh - 28px);
        padding-top: 0;
        padding-bottom: 0;
      }

      .cover-screen::before,
      .cover-screen::after {
        display: none;
      }

      .cover-content {
        max-width: 100%;
        padding: 0;
      }

      .cover-title {
        font-size: 42px;
        letter-spacing: -1px;
      }

      .cover-desc {
        font-size: 15px;
        line-height: 1.75;
        margin-bottom: 22px;
      }

      .top {
        flex-direction: column;
        align-items: flex-start;
      }

      .question {
        font-size: 25px;
      }

      .option {
        font-size: 15px;
        padding: 16px;
      }

      .options-likert {
        max-width: 100%;
        justify-content: space-between;
        gap: 2px;
        padding: 6px 0 0;
      }

      .option-likert {
        padding-top: 18px;
      }

      .likert-top-label {
        font-size: 10px;
      }

      .likert-circle.size-0,
      .likert-circle.size-4 {
        width: 46px;
        height: 46px;
      }

      .likert-circle.size-1,
      .likert-circle.size-3 {
        width: 40px;
        height: 40px;
      }

      .likert-circle.size-2 {
        width: 34px;
        height: 34px;
      }

      .result-stage {
        padding: 18px 14px 16px;
      }

      .stage-code {
        font-size: 78px;
        letter-spacing: -4px;
      }

      #test .actions {
        position: static;
        bottom: auto;
        padding-bottom: 0;
        background: transparent;
      }

      #result .actions {
        position: static;
        background: transparent;
      }

      .btn {
        flex: 1;
      }

    }