:root {
      color-scheme: light;
      --ink: #2a1c14;
      --muted: #766858;
      --paper: #f5ead2;
      --paper-deep: #ead8b4;
      --panel: rgba(255, 247, 225, .94);
      --line: #9d7042;
      --line-soft: rgba(120, 75, 38, .28);
      --dark: #171611;
      --dark-2: #272018;
      --red: #8f2c22;
      --gold: #c69343;
      --jade: #2f695e;
      --blue: #315b78;
      --shadow: 0 16px 38px rgba(31, 19, 10, .28);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --portrait-sheet: none;
      --cast-sheet: url("../images/liujing-character-cast-20-clean.png");
      --cast-avatar-sheet: url("../images/liujing-character-cast-20-portrait.png");
      --clinic-bg: none;
      --clinic-pixel-bg: url("../images/clinic-pixel-room.png");
      --exam-bg: url("../images/exam-master-hall.png");
    }

    * { box-sizing: border-box; }

    html { min-height: 100%; background: #171611; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: "Microsoft YaHei", "PingFang SC", "Noto Serif SC", Arial, sans-serif;
      line-height: 1.48;
      background:
        radial-gradient(circle at 10% -10%, rgba(226, 198, 142, .23), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(61, 98, 108, .34), transparent 26%),
        linear-gradient(180deg, rgba(10, 13, 14, .65), rgba(20, 19, 14, .98)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px);
      background-attachment: fixed;
      animation: bgBreath 12s ease-in-out infinite alternate;
    }

    button, select { font: inherit; }
    button { -webkit-tap-highlight-color: transparent; }

    .app {
      width: min(100%, 740px);
      min-height: 100vh;
      margin: 0 auto;
      padding: 12px 12px calc(78px + var(--safe-bottom));
    }

    .hero {
      position: relative;
      min-height: 250px;
      padding: 24px 18px 18px;
      overflow: hidden;
      border: 1px solid rgba(218, 178, 104, .48);
      border-radius: 8px;
      color: #fff4d8;
      background:
        linear-gradient(120deg, rgba(16, 19, 18, .88), rgba(30, 27, 20, .7) 58%, rgba(19, 34, 39, .66)),
        radial-gradient(circle at 18% 18%, rgba(246, 220, 154, .24), transparent 20%),
        linear-gradient(145deg, #293b3f, #21170f 54%, #0e1110);
      box-shadow: var(--shadow);
      isolation: isolate;
      animation: panelRise .55s ease both;
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(130deg, transparent 0 42%, rgba(255,255,255,.05) 42% 43%, transparent 43%),
        repeating-linear-gradient(0deg, rgba(245,226,186,.04) 0 1px, transparent 1px 9px);
      pointer-events: none;
      animation: mistDrift 9s linear infinite;
    }

    .hero-art {
      position: absolute;
      right: -24px;
      bottom: -18px;
      width: 222px;
      height: 286px;
      border-radius: 8px 0 0 0;
      opacity: .98;
      filter: drop-shadow(0 20px 28px rgba(0,0,0,.5));
      transform-origin: bottom right;
      animation: heroFloat 5.6s ease-in-out infinite;
      z-index: 1;
    }

    .portrait {
      background-image: var(--portrait-sheet);
      background-repeat: no-repeat;
      background-size: 200% 200%;
      background-color: #201914;
    }

    .portrait-young { background-position: 0% 0%; }
    .portrait-master { background-position: 100% 0%; }
    .portrait-npc { background-position: 0% 100%; }
    .portrait-swordsman { background-position: 100% 100%; }

    .cast-scene-portrait {
      background-image: var(--cast-avatar-sheet), url("../images/liujing-character-cast-20-portrait.png");
      background-repeat: no-repeat;
      background-size: 400% 500%;
      background-color: #201914;
    }

    .hero-art:after,
    .scene-portrait:after,
    .master-face:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.16) 48%, transparent 55%);
      transform: translateX(-120%);
      animation: bladeGleam 5.8s ease-in-out infinite;
      pointer-events: none;
    }

    .moon {
      position: absolute;
      top: 20px;
      right: 30px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 38%, #fff4d0, #e7c879 68%, rgba(231,200,121,0) 70%);
      opacity: .78;
    }

    .hero-copy { position: relative; z-index: 2; max-width: 78%; }

    .seal {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 9px;
      border: 1px solid rgba(221, 183, 103, .62);
      border-radius: 4px;
      color: #f4d38a;
      background: rgba(84, 32, 25, .58);
      font-size: 12px;
      font-weight: 800;
    }

    h1, h2, h3, p { margin-top: 0; }
    h1 {
      margin: 12px 0 8px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: clamp(34px, 10vw, 58px);
      line-height: 1.02;
      letter-spacing: 0;
      text-shadow: 0 4px 16px rgba(0,0,0,.55);
    }

    .subtitle {
      margin: 0 0 14px;
      color: #ead9b6;
      font-size: 14px;
    }

    .disclaimer {
      margin: 0;
      padding: 9px 10px;
      border: 1px solid rgba(232, 198, 128, .36);
      border-radius: 6px;
      color: #f1dfb9;
      background: rgba(0,0,0,.24);
      font-size: 12px;
    }

    .study-notice {
      margin-top: 8px;
      padding: 8px 10px;
      border: 1px solid rgba(142, 47, 34, .28);
      border-radius: 8px;
      color: #6c2d25;
      background: rgba(255, 239, 213, .72);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .stats {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 18px;
    }

    .stat {
      min-width: 0;
      padding: 10px 8px;
      border: 1px solid rgba(226, 186, 112, .45);
      border-radius: 6px;
      background: rgba(17, 15, 12, .56);
      color: #f5e5bf;
    }

    .stat span {
      display: block;
      color: #cbb98e;
      font-size: 11px;
    }

    .stat strong {
      display: block;
      margin-top: 2px;
      font-size: 18px;
      line-height: 1.1;
    }

    .section {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 250, 235, .88), rgba(235, 214, 177, .92)),
        repeating-linear-gradient(90deg, rgba(118, 84, 44, .04) 0 1px, transparent 1px 8px);
      box-shadow: 0 10px 25px rgba(0,0,0,.16);
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    h2 {
      margin-bottom: 0;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 24px;
      letter-spacing: 0;
    }

    h3 {
      margin-bottom: 8px;
      font-size: 16px;
    }

    .small { color: var(--muted); font-size: 12px; }

    .story-scroll {
      margin-top: 12px;
      padding: 13px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 249, 229, .9), rgba(233, 211, 172, .86)),
        repeating-linear-gradient(90deg, rgba(118,84,44,.04) 0 1px, transparent 1px 8px);
      color: #4d341f;
      box-shadow: 0 10px 22px rgba(78,45,21,.13);
    }

    .story-scroll.dark {
      border-color: rgba(220,178,105,.36);
      color: #f3dfb7;
      background:
        linear-gradient(135deg, rgba(33,27,20,.94), rgba(76,38,28,.82)),
        radial-gradient(circle at 82% 16%, rgba(198,147,67,.2), transparent 28%);
    }

    .story-scroll b {
      display: block;
      margin-bottom: 5px;
      color: #8f2c22;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 19px;
    }

    .story-scroll.dark b { color: #ffe1a0; }

    .story-scroll p {
      margin: 0;
      font-size: 13px;
    }

    .story-thread {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px;
      align-items: start;
      margin-top: 8px;
      font-size: 12px;
      color: #6f5540;
    }

    .story-thread i {
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      color: #fff0c8;
      background: #8f2c22;
      font-style: normal;
      font-weight: 900;
    }

    .case-goals {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .goal-block {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid rgba(198,147,67,.28);
      border-radius: 8px;
      background: rgba(255, 248, 226, .72);
    }

    .story-scroll.dark .goal-block {
      border-color: rgba(232,198,128,.24);
      background: rgba(32, 26, 18, .74);
    }

    .goal-block b {
      color: #7b2a20;
      font-size: 14px;
      font-weight: 900;
    }

    .story-scroll.dark .goal-block b {
      color: #ffe2a5;
    }

    .goal-block span {
      display: block;
      color: #5b4129;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.42;
    }

    .story-scroll.dark .goal-block span {
      color: #e5cfa2;
    }

    .teacher-reasons i {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      margin-right: 6px;
      padding: 1px 6px;
      border-radius: 999px;
      color: #fff6dd;
      background: #7b2a20;
      font-style: normal;
      font-size: 11px;
      font-weight: 900;
    }

    .clinic-intake {
      margin: 10px 0 12px;
      padding: 11px;
      border: 1px solid rgba(198,147,67,.32);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 247, 226, .78), rgba(231, 207, 166, .7)),
        repeating-linear-gradient(90deg, rgba(118,84,44,.04) 0 1px, transparent 1px 8px);
    }

    .story-scroll.dark .clinic-intake {
      border-color: rgba(232,198,128,.28);
      background:
        linear-gradient(145deg, rgba(24, 20, 16, .78), rgba(70, 42, 26, .66)),
        radial-gradient(circle at 76% 12%, rgba(198,147,67,.18), transparent 30%);
    }

    .intake-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .intake-head span {
      padding: 2px 7px;
      border-radius: 999px;
      color: #fff2d2;
      background: #7b2a20;
      font-size: 11px;
      font-weight: 900;
    }

    .intake-head b {
      margin: 0;
      color: #7b2a20;
      font-size: 16px;
    }

    .story-scroll.dark .intake-head b {
      color: #ffe2a5;
    }

    .difficulty-selector {
      margin: 8px 0 10px;
      padding: 8px;
      border: 1px solid rgba(126,76,39,.18);
      border-radius: 7px;
      background: rgba(255,255,255,.28);
    }

    .story-scroll.dark .difficulty-selector {
      border-color: rgba(232,198,128,.16);
      background: rgba(255,244,216,.06);
    }

    .difficulty-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
      color: #7b2a20;
      font-size: 12px;
      font-weight: 900;
    }

    .story-scroll.dark .difficulty-title {
      color: #ffe2a5;
    }

    .difficulty-title b {
      color: rgba(64,43,27,.64);
      font-size: 11px;
      font-weight: 800;
    }

    .story-scroll.dark .difficulty-title b {
      color: rgba(255,238,202,.66);
    }

    .difficulty-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
    }

    .difficulty-card {
      min-width: 0;
      min-height: 88px;
      padding: 7px 6px;
      border: 1px solid rgba(126,76,39,.24);
      border-radius: 7px;
      color: #4e2f1d;
      background: linear-gradient(180deg, rgba(255,250,235,.72), rgba(226,199,154,.56));
      text-align: left;
      cursor: pointer;
    }

    .difficulty-card.active {
      border-color: rgba(143,44,34,.68);
      background: linear-gradient(180deg, #fff0c9, #d9a057);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.62), 0 6px 12px rgba(126,76,39,.16);
    }

    .difficulty-card:disabled {
      cursor: default;
      opacity: .82;
    }

    .difficulty-card i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      margin-bottom: 5px;
      border-radius: 999px;
      color: #fff7df;
      background: #7b2a20;
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
    }

    .difficulty-card strong,
    .difficulty-card em {
      display: block;
      line-height: 1.28;
    }

    .difficulty-card strong {
      font-size: 12px;
      font-weight: 900;
    }

    .difficulty-card em {
      margin-top: 4px;
      color: rgba(64,43,27,.72);
      font-style: normal;
      font-size: 10px;
    }

    .story-scroll.dark .difficulty-card {
      border-color: rgba(232,198,128,.18);
      color: #ffe7ba;
      background: linear-gradient(180deg, rgba(255,236,184,.13), rgba(86,53,29,.44));
    }

    .story-scroll.dark .difficulty-card.active {
      border-color: rgba(241,191,107,.72);
      background: linear-gradient(180deg, rgba(116,64,34,.86), rgba(73,36,22,.9));
    }

    .story-scroll.dark .difficulty-card em {
      color: rgba(255,232,191,.68);
    }

    .intake-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .intake-card {
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(126,76,39,.22);
      border-radius: 7px;
      background: rgba(255,255,255,.38);
    }

    .story-scroll.dark .intake-card {
      border-color: rgba(232,198,128,.18);
      background: rgba(255,244,216,.08);
    }

    .intake-card.main,
    .intake-card.chart {
      grid-column: 1 / -1;
    }

    .intake-card i {
      display: inline-block;
      margin-bottom: 4px;
      color: #8f2c22;
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
    }

    .story-scroll.dark .intake-card i {
      color: #f1bf6b;
    }

    .intake-card p {
      margin: 2px 0 0;
      color: #553b25;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .story-scroll.dark .intake-card p {
      color: #f2ddb5;
    }

    .novel-scene {
      margin: 10px 0 12px;
      padding: 12px;
      border: 1px solid rgba(143, 44, 34, .22);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 252, 240, .82), rgba(240, 224, 191, .76)),
        repeating-linear-gradient(0deg, rgba(74, 47, 26, .035) 0 1px, transparent 1px 9px);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
    }

    .story-scroll.dark .novel-scene {
      border-color: rgba(232, 198, 128, .28);
      background:
        linear-gradient(145deg, rgba(22, 18, 15, .74), rgba(70, 41, 25, .72)),
        radial-gradient(circle at 20% 0%, rgba(198, 147, 67, .16), transparent 36%);
    }

    .novel-scene-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 4px 10px;
      align-items: center;
      margin-bottom: 8px;
    }

    .novel-scene-head span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .novel-scene-head b {
      grid-column: 1 / -1;
      margin: 0;
      color: #7a251d;
      font-size: 18px;
    }

    .story-scroll.dark .novel-scene-head b { color: #ffe1a0; }

    .novel-scene-head i {
      justify-self: end;
      padding: 2px 7px;
      border-radius: 999px;
      color: #fff2ce;
      background: #8f2c22;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    .novel-hook {
      margin: 0 0 10px;
      color: #553820;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 14px;
    }

    .story-scroll.dark .novel-hook { color: #f6dfba; }

    .comic-strip {
      display: grid;
      gap: 10px;
    }

    .comic-bubble {
      position: relative;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      align-items: end;
      gap: 10px;
      width: min(96%, 520px);
      padding: 7px 9px;
      border: 1px solid rgba(47, 105, 94, .26);
      border-radius: 8px;
      background: rgba(255, 249, 229, .88);
      color: #3d2b1e;
      box-shadow: 0 7px 14px rgba(76, 42, 20, .1);
      animation: dialogueEnter .34s ease both;
      animation-delay: calc(var(--line-index, 0) * 90ms);
    }

    .story-scroll.dark .comic-bubble {
      border-color: rgba(232, 198, 128, .22);
      background: rgba(255, 244, 216, .1);
      color: #fae8c5;
    }

    .comic-bubble.right {
      justify-self: end;
      grid-template-columns: minmax(0, 1fr) 54px;
      border-color: rgba(143, 44, 34, .28);
    }

    .comic-bubble.right .dialogue-avatar {
      grid-column: 2;
    }

    .comic-bubble.right .dialogue-copy {
      grid-column: 1;
      grid-row: 1;
      text-align: right;
    }

    .dialogue-avatar {
      width: 54px;
      height: 64px;
      align-self: stretch;
      border: 1px solid rgba(93, 59, 31, .25);
      border-radius: 8px;
      background-color: rgba(240, 224, 184, .76);
      background-size: cover;
      background-position: center;
      box-shadow: inset 0 -18px 18px rgba(65, 38, 20, .18), 0 6px 12px rgba(50, 27, 12, .14);
      transform-origin: bottom center;
      animation: portraitTalk 2.2s ease-in-out infinite;
      animation-delay: calc(var(--line-index, 0) * 120ms);
    }

    .mood-guide .dialogue-avatar {
      border-color: rgba(47, 105, 94, .35);
      background-color: rgba(217, 236, 222, .68);
    }

    .mood-patient .dialogue-avatar {
      border-color: rgba(143, 44, 34, .3);
      background-color: rgba(240, 217, 184, .72);
    }

    .dialogue-copy {
      min-width: 0;
      padding: 2px 0;
    }

    .comic-bubble span {
      display: block;
      margin-bottom: 3px;
      color: #2f695e;
      font-size: 11px;
      font-weight: 900;
    }

    .story-scroll.dark .comic-bubble span { color: #f0c270; }

    .comic-bubble p {
      margin: 0;
      font-size: 13px;
    }

    .comic-bubble em {
      display: inline-block;
      margin-top: 5px;
      color: #8f2c22;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    body.modal-open {
      overflow: hidden;
    }

    .story-prelude-modal.hidden {
      display: none;
    }

    .story-prelude-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 18px;
    }

    .story-prelude-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(11, 10, 8, .72);
      backdrop-filter: blur(5px);
    }

    .story-prelude-card {
      position: relative;
      width: min(940px, 100%);
      max-height: min(92vh, 780px);
      overflow: auto;
      padding: 16px;
      border: 1px solid rgba(232, 198, 128, .44);
      border-radius: 8px;
      color: #fff3d8;
      background:
        linear-gradient(145deg, rgba(19, 16, 13, .98), rgba(55, 32, 22, .96)),
        repeating-linear-gradient(90deg, rgba(232,198,128,.05) 0 1px, transparent 1px 9px);
      box-shadow: 0 24px 70px rgba(0,0,0,.46);
    }

    .prelude-topline,
    .prelude-head,
    .prelude-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .prelude-topline span {
      padding: 3px 9px;
      border-radius: 999px;
      color: #2d1c13;
      background: #e8c680;
      font-size: 12px;
      font-weight: 900;
    }

    .prelude-close {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(232,198,128,.4);
      border-radius: 999px;
      color: #ffe7ba;
      background: rgba(255,255,255,.06);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    .prelude-head {
      align-items: flex-end;
      margin: 12px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(232,198,128,.22);
    }

    .prelude-head i,
    .prelude-head p {
      display: block;
      margin: 0;
      color: rgba(255,232,191,.68);
      font-style: normal;
      font-size: 12px;
      font-weight: 800;
    }

    .prelude-head h2 {
      margin: 4px 0;
      color: #ffe1a0;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 28px;
      line-height: 1.2;
    }

    .prelude-stage {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr) 118px;
      gap: 12px;
      align-items: stretch;
    }

    .prelude-portrait {
      min-width: 0;
      padding: 8px;
      border: 1px solid rgba(232,198,128,.18);
      border-radius: 8px;
      background: rgba(255,244,216,.08);
      text-align: center;
    }

    .prelude-avatar {
      width: 100%;
      height: 150px;
      margin-bottom: 7px;
      border-radius: 7px;
      border: 1px solid rgba(232,198,128,.25);
      background-color: rgba(255,244,216,.12);
    }

    .prelude-portrait span,
    .prelude-portrait em {
      display: block;
      line-height: 1.25;
    }

    .prelude-portrait span {
      color: #ffe1a0;
      font-weight: 900;
    }

    .prelude-portrait em {
      margin-top: 3px;
      color: rgba(255,232,191,.62);
      font-style: normal;
      font-size: 11px;
    }

    .prelude-scroll {
      display: grid;
      gap: 10px;
      padding: 13px;
      border: 1px solid rgba(232,198,128,.3);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255,244,216,.16), rgba(30,20,15,.42));
    }

    .prelude-scroll p {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 8px;
      margin: 0;
      color: #fff7df;
      font-family: system-ui, "Microsoft YaHei", sans-serif;
      font-size: 17px;
      line-height: 1.78;
    }

    .prelude-scroll b {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      margin-top: 3px;
      border-radius: 999px;
      color: #2d1c13;
      background: #e8c680;
      font-family: system-ui, sans-serif;
      font-size: 12px;
    }

    .prelude-comic {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .prelude-comic .comic-bubble {
      max-width: 92%;
      border-color: rgba(232,198,128,.36);
      background: rgba(255,244,216,.16);
      color: #fff4d8;
    }

    .prelude-comic .comic-bubble span {
      color: #f0c270;
    }

    .prelude-comic .comic-bubble p {
      font-size: 15px;
      line-height: 1.62;
    }

    .prelude-motive {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      padding: 8px 9px;
      border-radius: 7px;
      color: #2d1c13;
      background: #e8c680;
      font-size: 13px;
      font-weight: 900;
    }

    .prelude-motive b {
      display: inline-flex;
      padding: 2px 7px;
      border-radius: 999px;
      color: #fff7df;
      background: #7b2a20;
      font-size: 12px;
    }

    .prelude-actions {
      justify-content: flex-end;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(232,198,128,.18);
      flex-wrap: wrap;
    }

    .story-prelude-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      margin: 8px 0 4px;
      padding: 6px 10px;
      border: 1px solid rgba(143,44,34,.26);
      border-radius: 7px;
      color: #7b2a20;
      background: rgba(255,247,226,.72);
      font-weight: 900;
      cursor: pointer;
    }

    @keyframes dialogueEnter {
      from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes portraitTalk {
      0%, 100% { transform: translateY(0); }
      45% { transform: translateY(-2px); }
      58% { transform: translateY(0); }
    }

    .novel-cliff {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px dashed rgba(143, 44, 34, .25);
      color: #6f3f29;
      font-size: 12px;
    }

    .novel-cliff b {
      margin: 0;
      color: #8f2c22;
      font-size: 13px;
    }

    .story-scroll.dark .novel-cliff { color: #f2d6a8; }

    .result-novel {
      margin: 10px 0;
      padding: 8px;
      border-radius: 8px;
      background: rgba(198, 147, 67, .08);
    }

    .cast-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 10px;
    }

    .cast-card {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 10px;
      min-height: 104px;
      padding: 10px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      background: rgba(255,248,229,.76);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }

    .cast-portrait {
      width: 72px;
      height: 86px;
      border: 1px solid rgba(126,76,39,.32);
      border-radius: 8px;
      background-image: var(--avatar-image), var(--cast-sheet), url("../images/liujing-character-cast-20-clean.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center 18%;
      box-shadow: inset 0 -18px 24px rgba(0,0,0,.26);
    }

    .cast-scene-portrait {
      background-image: var(--avatar-image), var(--cast-avatar-sheet), url("../images/liujing-character-cast-20-portrait.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center 18%;
      background-color: #201914;
    }

    .cast-p1 { background-position: 0% 0%; }
    .cast-p2 { background-position: 33.333% 0%; }
    .cast-p3 { background-position: 66.666% 0%; }
    .cast-p4 { background-position: 100% 0%; }
    .cast-p5 { background-position: 0% 25%; }
    .cast-p6 { background-position: 33.333% 25%; }
    .cast-p7 { background-position: 66.666% 25%; }
    .cast-p8 { background-position: 100% 25%; }
    .cast-p9 { background-position: 0% 50%; }
    .cast-p10 { background-position: 33.333% 50%; }
    .cast-p11 { background-position: 66.666% 50%; }
    .cast-p12 { background-position: 100% 50%; }
    .cast-p13 { background-position: 0% 75%; }
    .cast-p14 { background-position: 33.333% 75%; }
    .cast-p15 { background-position: 66.666% 75%; }
    .cast-p16 { background-position: 100% 75%; }
    .cast-p17 { background-position: 0% 100%; }
    .cast-p18 { background-position: 33.333% 100%; }
    .cast-p19 { background-position: 66.666% 100%; }
    .cast-p20 { background-position: 100% 100%; }
    .cast-master { background-position: 0% 0%; }
    .cast-rival { background-position: 33.333% 0%; }
    .cast-antagonist { background-position: 66.666% 0%; }
    .cast-official { background-position: 100% 0%; }

    .avatar-master { --avatar-image: url("../images/avatars/avatar-01.png"); }
    .avatar-rival { --avatar-image: url("../images/avatars/avatar-02.png"); }
    .avatar-antagonist { --avatar-image: url("../images/avatars/avatar-11.png"); }
    .avatar-official { --avatar-image: url("../images/avatars/avatar-04.png"); }
    .avatar-baishi { --avatar-image: url("../images/avatars/avatar-06.png"); }
    .avatar-xuyanwei { --avatar-image: url("../images/avatars/avatar-05.png"); }
    .avatar-linjinghan { --avatar-image: url("../images/avatars/avatar-07.png"); }
    .avatar-qinzhaoye { --avatar-image: url("../images/avatars/avatar-08.png"); }
    .avatar-luobanxi { --avatar-image: url("../images/avatars/avatar-09.png"); }
    .avatar-tiansuyi { --avatar-image: url("../images/avatars/avatar-10.png"); }
    .avatar-hanjiangke { --avatar-image: url("../images/avatars/avatar-14.png"); }
    .avatar-chixue { --avatar-image: url("../images/avatars/avatar-12.png"); }
    .avatar-tiechi { --avatar-image: url("../images/avatars/avatar-13.png"); }
    .avatar-liuwusheng { --avatar-image: url("../images/avatars/avatar-03.png"); }
    .avatar-mengguideng { --avatar-image: url("../images/avatars/avatar-15.png"); }
    .avatar-xiaoman { --avatar-image: url("../images/avatars/avatar-16.png"); }
    .avatar-zhaokezhou { --avatar-image: url("../images/avatars/avatar-17.png"); }
    .avatar-yunniang { --avatar-image: url("../images/avatars/avatar-18.png"); }
    .avatar-atong { --avatar-image: url("../images/avatars/avatar-19.png"); }
    .avatar-wenhenian { --avatar-image: url("../images/avatars/avatar-20.png"); }

    .cast-scene-portrait.patient-avatar-01,
    .cast-portrait.patient-avatar-01 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 0% 0%; }
    .cast-scene-portrait.patient-avatar-02,
    .cast-portrait.patient-avatar-02 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 33.333% 0%; }
    .cast-scene-portrait.patient-avatar-03,
    .cast-portrait.patient-avatar-03 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 66.666% 0%; }
    .cast-scene-portrait.patient-avatar-04,
    .cast-portrait.patient-avatar-04 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 100% 0%; }
    .cast-scene-portrait.patient-avatar-05,
    .cast-portrait.patient-avatar-05 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 0% 50%; }
    .cast-scene-portrait.patient-avatar-06,
    .cast-portrait.patient-avatar-06 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 33.333% 50%; }
    .cast-scene-portrait.patient-avatar-07,
    .cast-portrait.patient-avatar-07 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 66.666% 50%; }
    .cast-scene-portrait.patient-avatar-08,
    .cast-portrait.patient-avatar-08 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 100% 50%; }
    .cast-scene-portrait.patient-avatar-09,
    .cast-portrait.patient-avatar-09 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 0% 100%; }
    .cast-scene-portrait.patient-avatar-10,
    .cast-portrait.patient-avatar-10 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 33.333% 100%; }
    .cast-scene-portrait.patient-avatar-11,
    .cast-portrait.patient-avatar-11 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 66.666% 100%; }
    .cast-scene-portrait.patient-avatar-12,
    .cast-portrait.patient-avatar-12 { background-image: url("../images/patient-avatar-sheet-12.png"); background-size: 400% 300%; background-position: 100% 100%; }

    .patient-avatar-01 { --patient-avatar-pos: 0% 0%; }
    .patient-avatar-02 { --patient-avatar-pos: 33.333% 0%; }
    .patient-avatar-03 { --patient-avatar-pos: 66.666% 0%; }
    .patient-avatar-04 { --patient-avatar-pos: 100% 0%; }
    .patient-avatar-05 { --patient-avatar-pos: 0% 50%; }
    .patient-avatar-06 { --patient-avatar-pos: 33.333% 50%; }
    .patient-avatar-07 { --patient-avatar-pos: 66.666% 50%; }
    .patient-avatar-08 { --patient-avatar-pos: 100% 50%; }
    .patient-avatar-09 { --patient-avatar-pos: 0% 100%; }
    .patient-avatar-10 { --patient-avatar-pos: 33.333% 100%; }
    .patient-avatar-11 { --patient-avatar-pos: 66.666% 100%; }
    .patient-avatar-12 { --patient-avatar-pos: 100% 100%; }

    .cast-scene-portrait[class*="patient-avatar-"],
    .cast-portrait[class*="patient-avatar-"] {
      background-image: url("../images/patient-avatar-sheet-12.png") !important;
      background-size: 400% 300% !important;
      background-position: var(--patient-avatar-pos) !important;
    }

    .cast-card b {
      display: block;
      margin-bottom: 4px;
      color: #7d251c;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 18px;
    }

    .cast-card span {
      display: block;
      color: #6f5540;
      font-size: 12px;
      line-height: 1.35;
    }

    .character-card-pro {
      grid-template-columns: 92px 1fr;
      min-height: 172px;
      background:
        linear-gradient(180deg, rgba(255, 249, 231, .86), rgba(238, 220, 184, .74)),
        radial-gradient(circle at 12% 12%, rgba(198,147,67,.14), transparent 32%);
    }

    .character-card-pro .cast-portrait {
      width: 92px;
      height: 118px;
      align-self: start;
      box-shadow: inset 0 -22px 24px rgba(0,0,0,.26), 0 10px 18px rgba(72,42,22,.16);
    }

    .character-duty {
      color: #2f695e !important;
      font-weight: 900;
    }

    .character-quote {
      margin: 6px 0;
      padding: 7px 9px;
      border-left: 3px solid #8f2c22;
      border-radius: 0 7px 7px 0;
      color: #6b2f24;
      background: rgba(143,44,34,.08);
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 14px;
      font-weight: 900;
    }

    .character-tools {
      grid-column: 1 / -1;
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding: 2px 0 8px;
    }

    .character-archive-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .cast-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 7px;
    }

    .cast-tags i {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 2px 6px;
      border: 1px solid rgba(126,76,39,.18);
      border-radius: 999px;
      color: #7d251c;
      background: rgba(255,244,216,.72);
      font-style: normal;
      font-size: 10px;
      font-weight: 900;
    }

    .bond-line {
      margin-top: 7px;
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(126,76,39,.14);
    }

    .bond-line i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #8d2e21, #d6a451, #2f695e);
    }

    .mode-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 10px;
    }

    .mode-card, .chapter-card, .answer-card, .challenge-card {
      width: 100%;
      border: 1px solid rgba(126, 76, 39, .36);
      border-radius: 8px;
      color: var(--ink);
      background: linear-gradient(180deg, #fff4d7, #e9d0a4);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 6px 12px rgba(78, 45, 21, .13);
      cursor: pointer;
    }

    .mode-card {
      min-height: 104px;
      padding: 12px;
      text-align: left;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      animation: panelRise .45s ease both;
    }

    .mode-card.primary-mode {
      grid-row: span 2;
      min-height: 218px;
      color: #fff2d2;
      background:
        linear-gradient(160deg, rgba(126,37,28,.9), rgba(52,31,22,.95)),
        radial-gradient(circle at 20% 18%, rgba(255,225,151,.28), transparent 28%);
      border-color: rgba(232,198,128,.62);
      box-shadow: 0 18px 32px rgba(82, 26, 18, .3), inset 0 0 0 1px rgba(255,255,255,.13);
    }

    .mode-card.primary-mode b {
      font-size: 28px;
      color: #ffe5a9;
    }

    .mode-card.primary-mode span {
      color: #f0d6a5;
      font-size: 13px;
    }

    .mode-card.exam-mode {
      background: linear-gradient(180deg, #2d3328, #17221c);
      color: #f3e7c6;
      border-color: rgba(119,169,126,.38);
    }

    .mode-card.exam-mode span { color: #c9d7bd; }

    .mode-card:active,
    .chapter-card:active,
    .answer-card:active,
    .ask-btn:active,
    .primary-btn:active,
    .ghost-btn:active { transform: translateY(1px) scale(.99); }

    .mode-card b {
      display: block;
      margin-bottom: 6px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 20px;
    }

    .mode-card span { display: block; color: #6f5540; font-size: 12px; }

    .challenge-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .challenge-zone {
      padding: 10px;
      border: 1px solid rgba(126,76,39,.26);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255,248,229,.78), rgba(232,211,174,.72)),
        repeating-linear-gradient(90deg, rgba(118,84,44,.04) 0 1px, transparent 1px 8px);
    }

    .challenge-zone-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      color: #6b4328;
      font-weight: 900;
    }

    .challenge-zone-title b {
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 18px;
    }

    .challenge-zone-title span {
      color: #806853;
      font-size: 12px;
    }

    .challenge-zone-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .challenge-card {
      display: grid;
      grid-template-columns: 1fr 72px;
      gap: 10px;
      align-items: center;
      min-height: 82px;
      padding: 11px;
      text-align: left;
      animation: cardFlip .38s ease both;
    }

    .challenge-card[data-zone="演武场"] {
      background: linear-gradient(180deg, #ffe8bd, #ddb36b);
    }

    .challenge-card[data-zone="藏经阁"] {
      background: linear-gradient(180deg, #f5ecd1, #d4c19a);
    }

    .challenge-card[data-zone="问诊堂"] {
      background: linear-gradient(180deg, #eaf6df, #bfd7b1);
    }

    .challenge-card[data-zone="观象台"] {
      background: linear-gradient(180deg, #e7f0f0, #b7c8c8);
    }

    .challenge-card > span:first-child b {
      display: block;
      margin-bottom: 5px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 18px;
    }

    .challenge-card > span:first-child span {
      display: block;
      color: #6f5540;
      font-size: 12px;
    }

    .challenge-host {
      display: grid;
      justify-items: center;
      gap: 5px;
      min-width: 64px;
    }

    .challenge-host .cast-portrait {
      width: 54px;
      height: 62px;
      border-color: rgba(126,76,39,.34);
      border-radius: 8px;
      box-shadow: inset 0 -14px 18px rgba(0,0,0,.24), 0 6px 12px rgba(91,44,20,.13);
    }

    .challenge-host b {
      margin: 0;
      max-width: 70px;
      color: #7d251c;
      font-size: 12px;
      line-height: 1.1;
      text-align: center;
    }

    .challenge-host span {
      max-width: 70px;
      color: rgba(80,52,33,.72);
      font-size: 10px;
      line-height: 1.1;
      text-align: center;
    }

    .arena-panel {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid rgba(220, 178, 105, .36);
      border-radius: 8px;
      color: #f7e8bf;
      background:
        linear-gradient(110deg, rgba(15,18,18,.94), rgba(48,34,23,.88)),
        radial-gradient(circle at 80% 10%, rgba(198,147,67,.24), transparent 30%);
      box-shadow: var(--shadow);
    }

    .arena-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .arena-title h2 {
      color: #ffe8b7;
    }

    .arena-body {
      padding: 12px;
      border-radius: 8px;
      background: rgba(255,248,229,.9);
      color: #4d341f;
    }

    .arena-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .arena-option {
      min-height: 42px;
      padding: 8px;
      border: 1px solid rgba(126,76,39,.34);
      border-radius: 7px;
      color: var(--ink);
      background: linear-gradient(180deg, #fff8e7, #ead5ad);
      font-weight: 900;
    }

    .arena-result {
      margin-top: 10px;
      padding: 10px;
      border-radius: 7px;
      background: rgba(47,105,94,.12);
      color: #24594f;
      font-weight: 900;
    }

    .chapters {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .chapter-card {
      position: relative;
      min-height: 176px;
      padding: 12px;
      overflow: hidden;
      text-align: left;
      transition: transform .2s ease, box-shadow .2s ease;
      animation: cardFlip .42s ease both;
    }

    .patient-case-card {
      display: grid;
      align-content: start;
      gap: 8px;
      min-height: 226px;
      padding: 11px;
    }

    .chapter-card:hover,
    .mode-card:hover {
      transform: translateY(-2px);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 12px 22px rgba(78, 45, 21, .22);
    }

    .chapter-card:after {
      content: attr(data-mark);
      position: absolute;
      right: 10px;
      bottom: -2px;
      color: rgba(97, 52, 32, .11);
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 58px;
      font-weight: 900;
    }

    .patient-case-card:after {
      right: 8px;
      bottom: -4px;
      z-index: 0;
      font-size: 64px;
    }

    .patient-case-card > * {
      position: relative;
      z-index: 1;
    }

    .chapter-card b {
      display: block;
      margin-bottom: 5px;
      font-size: 16px;
    }

    .chapter-card .tag {
      display: inline-block;
      margin-top: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(143, 44, 34, .11);
      color: var(--red);
      font-size: 11px;
      font-weight: 800;
    }

    .chapter-card-head {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
    }

    .chapter-avatar {
      width: 58px;
      height: 68px;
      border: 1px solid rgba(126,76,39,.34);
      border-radius: 7px;
      box-shadow: inset 0 -18px 24px rgba(0,0,0,.28), 0 8px 14px rgba(78,45,21,.14);
    }

    .chapter-card-title {
      min-width: 0;
    }

    .chapter-card-title b,
    .chapter-card-title span {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chapter-card-title span {
      white-space: nowrap;
    }

    .novel-card-line {
      display: block;
      color: #8f2c22;
      font-weight: 900;
    }

    .chapter-motive {
      display: block;
      padding: 7px 8px;
      border: 1px solid rgba(126,76,39,.14);
      border-radius: 7px;
      background: rgba(255, 247, 226, .48);
      color: #56351f;
      line-height: 1.5;
    }

    .chapter-motive i {
      display: inline-block;
      margin-right: 6px;
      padding: 1px 5px;
      border-radius: 999px;
      color: #fff4d4;
      background: #8f2c22;
      font-style: normal;
      font-size: 10px;
      font-weight: 900;
    }

    .novel-card-hook {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      color: #5a3a24;
      line-height: 1.55;
    }

    .chapter-card-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-top: auto;
    }

    .chapter-chip {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(126,76,39,.1);
      color: #6a4328;
      font-size: 11px;
      font-weight: 900;
    }

    .patient-case-card .tag {
      margin-top: 0;
    }

    .boss-stamp {
      position: absolute;
      top: 9px;
      right: 9px;
      z-index: 2;
      padding: 2px 6px;
      border: 1px solid rgba(143,44,34,.22);
      border-radius: 999px;
      color: #8f2c22;
      background: rgba(255, 247, 226, .82);
      font-size: 10px;
      font-weight: 900;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: none;
      align-items: center;
      grid-template-columns: 40px minmax(0, 1fr) 40px;
      gap: 8px;
      margin: -12px -12px 10px;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(214, 178, 106, .36);
      background: rgba(23, 22, 17, .88);
      color: #f5e8c7;
      backdrop-filter: blur(10px);
    }

    .topbar.active { display: grid; }

    .topbar strong {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(232, 198, 128, .45);
      border-radius: 6px;
      background: rgba(0,0,0,.18);
      color: #f8e6bd;
      font-size: 18px;
    }

    .view { display: none; }
    .view.active { display: block; }

    .case-head {
      position: relative;
      padding: 14px;
      border: 1px solid rgba(220, 178, 105, .36);
      border-radius: 8px;
      color: #f7e8bf;
      background:
        linear-gradient(110deg, rgba(15,18,18,.92), rgba(48,34,23,.88)),
        radial-gradient(circle at 78% 10%, rgba(198,147,67,.28), transparent 30%);
      overflow: hidden;
      animation: panelRise .45s ease both;
    }

    .case-head:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at var(--glow-x, 72%) 28%, rgba(198,147,67,.25), transparent 24%);
      opacity: .9;
      pointer-events: none;
      animation: glowMove 6s ease-in-out infinite alternate;
    }

    .case-head > * { position: relative; z-index: 1; }

    .case-head .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 8px;
    }

    .phase-tracker {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 14px;
      padding: 8px;
      border: 1px solid rgba(138, 44, 24, .16);
      border-radius: 8px;
      background: rgba(255, 248, 226, .78);
      box-shadow: 0 10px 18px rgba(94, 50, 18, .08);
    }

    .phase-step {
      position: relative;
      min-height: 52px;
      padding: 8px 8px 8px 34px;
      border: 1px solid rgba(94, 50, 18, .14);
      border-radius: 7px;
      background: rgba(255,255,255,.42);
      color: #6a4931;
      overflow: hidden;
    }

    .phase-step:before {
      content: attr(data-step);
      position: absolute;
      left: 8px;
      top: 10px;
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(94, 50, 18, .12);
      color: #704523;
      font-size: 11px;
      font-weight: 900;
    }

    .phase-step b {
      display: block;
      margin-bottom: 2px;
      font-size: 13px;
    }

    .phase-step span {
      display: block;
      font-size: 11px;
      line-height: 1.35;
      color: #8a6b52;
    }

    .phase-step.done {
      border-color: rgba(47, 105, 94, .28);
      background: rgba(228, 243, 229, .56);
    }

    .phase-step.done:before {
      content: "✓";
      background: rgba(47, 105, 94, .18);
      color: #2f695e;
    }

    .phase-step.active {
      border-color: rgba(143, 44, 34, .36);
      background: linear-gradient(180deg, rgba(255, 241, 199, .92), rgba(244, 218, 171, .86));
      color: #4d251b;
      box-shadow: inset 0 -16px 24px rgba(143, 44, 34, .08), 0 8px 16px rgba(143, 44, 34, .1);
    }

    .phase-step.active:before {
      background: #8f2c22;
      color: #fff5d6;
    }

    .phase-step.active span {
      color: #6d3b28;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border: 1px solid rgba(198,147,67,.36);
      border-radius: 999px;
      background: rgba(0,0,0,.18);
      color: #e8d2a7;
      font-size: 12px;
      font-weight: 800;
    }

    .npc-wrap {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 10px;
      align-items: end;
      margin-top: 12px;
      animation: panelRise .48s ease both;
    }

    .avatar {
      width: 70px;
      height: 86px;
      border: 1px solid rgba(230, 190, 115, .44);
      border-radius: 8px 8px 5px 5px;
      background-size: 240% 240%;
      box-shadow: inset 0 -20px 26px rgba(0,0,0,.34);
      animation: breathe 3.4s ease-in-out infinite;
    }

    .avatar.cast-scene-portrait {
      background-size: cover;
      background-position: center 18%;
      background-repeat: no-repeat;
    }

    .scene-portrait.cast-scene-portrait {
      background-size: cover;
      background-position: center 18%;
      background-repeat: no-repeat;
    }

    .dialogue {
      position: relative;
      min-height: 92px;
      padding: 13px;
      border: 1px solid #8d6336;
      border-radius: 7px;
      background: linear-gradient(180deg, #fff2d4, #e9d2a8);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
      animation: dialogueIn .28s ease both;
    }

    .dialogue:before {
      content: "";
      position: absolute;
      left: -8px;
      bottom: 24px;
      width: 14px;
      height: 14px;
      border-left: 1px solid #8d6336;
      border-bottom: 1px solid #8d6336;
      background: #edd7ad;
      transform: rotate(45deg);
    }

    .dialogue .name {
      margin-bottom: 5px;
      color: var(--red);
      font-weight: 900;
    }

    .npc-trait {
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      padding: 2px 6px;
      border-radius: 999px;
      color: #f7ead0;
      background: rgba(125,37,28,.82);
      font-size: 11px;
      font-weight: 900;
      vertical-align: 1px;
    }

    .clue-board {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      background: rgba(255, 247, 228, .68);
      transition: box-shadow .25s ease, transform .25s ease;
    }

    .clue-board.flash {
      box-shadow: 0 0 0 2px rgba(198,147,67,.28), 0 0 28px rgba(198,147,67,.28);
      transform: translateY(-1px);
    }

    .clues {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      min-height: 31px;
    }

    .clue {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(47, 105, 94, .12);
      color: #24594f;
      font-size: 12px;
      font-weight: 800;
      animation: cluePop .24s ease both;
    }

    .scene-board {
      position: relative;
      min-height: 285px;
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid rgba(220, 178, 105, .36);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(12,8,5,.18), rgba(11,8,5,.82)),
        radial-gradient(circle at 18% 14%, rgba(244, 210, 132, .22), transparent 18%),
        var(--clinic-bg),
        linear-gradient(135deg, #27383d, #211712 58%, #101313);
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
      animation: panelRise .45s ease both;
      transition: background-image .35s ease, min-height .3s ease, filter .35s ease, box-shadow .35s ease;
    }

    .scene-board.pulse {
      animation: panelRise .45s ease both, scenePulse .38s ease both;
    }

    .scene-board.consult-mode {
      min-height: 340px;
      background-image:
        linear-gradient(180deg, rgba(10,8,6,.02), rgba(10,8,6,.58)),
        var(--clinic-pixel-bg),
        var(--clinic-bg);
      background-size: cover;
      background-position: center;
      filter: saturate(1.05);
    }

    .scene-board.consult-mode:before {
      background:
        radial-gradient(circle at 52% 76%, rgba(255, 218, 143, .18), transparent 18%),
        linear-gradient(90deg, rgba(255,255,255,.08), transparent 26%, transparent 74%, rgba(0,0,0,.2));
      animation: lanternBreath 4s ease-in-out infinite alternate;
    }

    .scene-board:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 26% 18%, rgba(255, 220, 142, .16), transparent 18%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.48)),
        repeating-linear-gradient(120deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px);
      animation: mistDrift 12s linear infinite;
    }

    .exam-hall-hero {
      position: relative;
      min-height: min(68vh, 620px);
      overflow: hidden;
      border: 1px solid rgba(232,198,128,.46);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(13,9,5,.08), rgba(13,9,5,.88)),
        var(--exam-bg),
        linear-gradient(135deg, #21150f, #51311c);
      background-size: cover;
      background-position: center;
      box-shadow: 0 22px 48px rgba(0,0,0,.4);
      animation: panelRise .45s ease both;
    }

    .exam-hall-hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 62% 30%, rgba(255,221,146,.18), transparent 18%),
        linear-gradient(100deg, rgba(255,255,255,.07), transparent 28%, transparent 74%, rgba(0,0,0,.34));
      animation: lanternBreath 4.5s ease-in-out infinite alternate;
    }

    .exam-hall-copy {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 1;
      padding: 14px;
      border: 1px solid rgba(232,198,128,.36);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(48,28,17,.72), rgba(24,16,11,.92));
      color: #fff2c8;
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
      backdrop-filter: blur(4px);
    }

    .exam-hall-copy h2 {
      margin: 0 0 6px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: clamp(28px, 8vw, 44px);
      color: #ffe9aa;
      letter-spacing: 0;
    }

    .exam-hall-copy p {
      margin: 0 0 10px;
      color: rgba(255,242,200,.86);
      line-height: 1.65;
      font-size: 13px;
      font-weight: 800;
    }

    .exam-mode-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .exam-mode-card {
      position: relative;
      min-height: 118px;
      padding: 12px;
      overflow: hidden;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      text-align: left;
      color: #4c2e1d;
      background:
        radial-gradient(circle at 90% 10%, rgba(155,59,43,.16), transparent 24%),
        linear-gradient(180deg, rgba(255,246,221,.96), rgba(231,207,161,.9));
      box-shadow: 0 8px 18px rgba(58,35,17,.12);
    }

    .exam-mode-card:before {
      content: attr(data-mark);
      position: absolute;
      right: 10px;
      bottom: -8px;
      color: rgba(126,76,39,.1);
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 58px;
      font-weight: 900;
    }

    .exam-mode-card b {
      position: relative;
      display: block;
      color: #8d2e21;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 20px;
      line-height: 1.2;
    }

    .exam-mode-card span {
      position: relative;
      display: block;
      margin-top: 7px;
      color: rgba(75,48,30,.78);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 800;
    }

    @media (max-width: 560px) {
      .exam-mode-grid {
        grid-template-columns: 1fr;
      }
    }

    .clinic-plaque { display: none; }

    .clinic-desk {
      position: absolute;
      left: 6%;
      right: 6%;
      bottom: -28px;
      z-index: 1;
      height: 52px;
      border: 1px solid rgba(235, 198, 126, .28);
      border-radius: 10px 10px 0 0;
      background:
        radial-gradient(circle at 18% 42%, rgba(255, 220, 142, .16), transparent 18%),
        linear-gradient(180deg, rgba(112, 67, 35, .62), rgba(52, 31, 19, .88));
      box-shadow: 0 -10px 22px rgba(0,0,0,.18), inset 0 12px 18px rgba(255,255,255,.05);
      opacity: .86;
      transform: translateY(12px);
      transition: transform .35s ease, height .35s ease;
    }

    .clinic-desk:before,
    .clinic-desk:after {
      content: "";
      position: absolute;
      bottom: 32px;
      border-radius: 999px;
      background: rgba(232, 199, 130, .86);
      box-shadow: 0 0 16px rgba(232, 199, 130, .38);
    }

    .clinic-desk:before {
      left: 16px;
      width: 62px;
      height: 10px;
    }

    .clinic-desk:after {
      right: 22px;
      width: 28px;
      height: 28px;
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 240, 188, .9), rgba(162, 112, 49, .95) 62%, rgba(67, 39, 23, .95));
    }

    .scene-board.consult-mode .clinic-desk {
      height: 64px;
      transform: translateY(8px);
    }

    .scene-portrait {
      position: absolute;
      z-index: 3;
      right: -12px;
      bottom: -52px;
      width: min(72vw, 330px);
      height: 310px;
      border-left: 1px solid rgba(232,198,128,.22);
      filter: drop-shadow(-20px 12px 30px rgba(0,0,0,.45));
      animation: heroFloat 5s ease-in-out infinite;
      box-shadow: inset 0 -64px 56px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.12);
    }

    .scene-board.consult-mode .scene-portrait {
      right: 3%;
      bottom: 42px;
      width: min(48vw, 260px);
      height: 300px;
      border-radius: 12px 12px 0 0;
      background-position: center 12%;
      opacity: .98;
      box-shadow: inset 0 -70px 54px rgba(0,0,0,.28), 0 20px 34px rgba(0,0,0,.36);
    }

    .scene-board.npc-entering .scene-portrait {
      animation: npcEnter .72s cubic-bezier(.2,.8,.2,1) both, heroFloat 5s ease-in-out .72s infinite;
    }

    #caseView.consult-room-active .case-head,
    #caseView.consult-room-active #caseStory,
    #caseView.consult-room-active #examBanner {
      display: none;
    }

    #caseView.consult-prep #examBanner,
    #caseView.consult-prep .scene-ribbon,
    #caseView.consult-prep .scene-portrait {
      display: none;
    }

    #caseView.consult-prep .case-head {
      margin-bottom: 12px;
    }

    #caseView.consult-prep #caseStory {
      display: block;
      margin-bottom: 14px;
      border-color: rgba(138, 44, 24, .24);
      background:
        linear-gradient(180deg, rgba(255,248,226,.96), rgba(244,226,188,.94)),
        var(--paper-bg);
      box-shadow: 0 16px 28px rgba(94, 50, 18, .13);
    }

    #caseView.consult-room-active .scene-board {
      min-height: 470px;
      margin-top: 0;
      border-color: rgba(232,198,128,.56);
      box-shadow: 0 22px 44px rgba(0,0,0,.34);
    }

    #caseView.consult-prep .scene-board {
      min-height: min(40vh, 360px);
      margin-top: 0;
      border-color: rgba(232,198,128,.56);
      background-image:
        linear-gradient(180deg, rgba(10,8,6,.02), rgba(10,8,6,.42)),
        var(--clinic-pixel-bg),
        var(--clinic-bg);
      background-size: cover;
      background-position: center;
      box-shadow: 0 22px 44px rgba(0,0,0,.36);
    }

    #caseView.consult-room-active .scene-ribbon {
      left: 14px;
      top: 14px;
      padding: 9px 12px;
      border-radius: 8px;
      background: rgba(17, 13, 10, .68);
      backdrop-filter: blur(4px);
    }

    #caseView.consult-room-active .clinic-plaque {
      display: block;
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 3;
      padding: 7px 10px;
      border: 1px solid rgba(232,198,128,.55);
      border-radius: 7px;
      background: rgba(25, 17, 10, .72);
      color: #f7dfab;
      font-family: "STKaiti", "KaiTi", serif;
      font-weight: 900;
      letter-spacing: 0;
    }

    #caseView.consult-prep .clinic-plaque {
      display: block;
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 3;
      padding: 7px 10px;
      border: 1px solid rgba(232,198,128,.55);
      border-radius: 7px;
      background: rgba(25, 17, 10, .72);
      color: #f7dfab;
      font-family: "STKaiti", "KaiTi", serif;
      font-weight: 900;
      letter-spacing: 0;
    }

    #caseView.consult-room-active .scene-portrait {
      right: 5%;
      bottom: 96px;
      width: min(36vw, 220px);
      height: 276px;
      opacity: .94;
    }

    #caseView.consult-room-active .clinic-desk {
      height: 96px;
      left: 4%;
      right: 4%;
      bottom: -22px;
      opacity: .9;
    }

    #caseView.consult-prep .clinic-desk {
      height: 104px;
      left: 4%;
      right: 4%;
      bottom: -18px;
      opacity: .9;
    }

    #caseView.consult-prep .consult-overlay {
      left: 16px;
      right: 16px;
      bottom: 26px;
      width: auto;
      max-width: 430px;
      margin: 0 auto;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      transform: none;
      background: linear-gradient(180deg, rgba(32,22,15,.58), rgba(21,14,10,.78));
    }

    #caseView.consult-prep .consult-overlay b,
    #caseView.consult-prep .consult-overlay span {
      display: block;
      color: #ffe7b7;
    }

    #caseView.consult-prep .consult-overlay .primary-btn {
      width: min(100%, 260px);
      min-width: 0;
      min-height: 54px;
      padding: 0 18px;
      font-size: clamp(18px, 5.4vw, 22px);
      font-family: "STKaiti", "KaiTi", serif;
      letter-spacing: 0;
      white-space: nowrap;
    }

    #caseView.exam-room-active .case-head,
    #caseView.exam-room-active #caseStory,
    #caseView.exam-prep .case-head,
    #caseView.exam-prep #caseStory {
      display: none;
    }

    #caseView.exam-prep .scene-portrait {
      display: none;
    }

    #caseView.exam-prep .scene-board,
    #caseView.exam-room-active .scene-board {
      margin-top: 0;
      border-color: rgba(232,198,128,.58);
      background-image:
        linear-gradient(180deg, rgba(11,7,4,.08), rgba(11,7,4,.78)),
        var(--exam-bg),
        linear-gradient(135deg, #21150f, #51311c);
      background-size: cover;
      background-position: center;
      box-shadow: 0 22px 44px rgba(0,0,0,.38);
    }

    #caseView.exam-prep .scene-board {
      min-height: min(70vh, 600px);
    }

    #caseView.exam-room-active .scene-board {
      min-height: 430px;
    }

    #caseView.exam-prep .scene-board:before,
    #caseView.exam-room-active .scene-board:before {
      background:
        radial-gradient(circle at 46% 32%, rgba(255, 220, 142, .18), transparent 16%),
        linear-gradient(90deg, rgba(255,255,255,.06), transparent 30%, transparent 72%, rgba(0,0,0,.28));
      animation: lanternBreath 4.2s ease-in-out infinite alternate;
    }

    #caseView.exam-prep .clinic-plaque,
    #caseView.exam-room-active .clinic-plaque {
      display: block;
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      padding: 8px 10px;
      border: 1px solid rgba(235,198,126,.45);
      border-radius: 8px;
      color: #ffe6a7;
      background: rgba(32,18,11,.7);
      font-weight: 900;
    }

    #caseView.exam-prep .scene-ribbon,
    #caseView.exam-room-active .scene-ribbon {
      display: block;
      left: 14px;
      top: 14px;
      background: linear-gradient(180deg, rgba(55,25,16,.78), rgba(20,13,9,.9));
      border-color: rgba(232,198,128,.38);
    }

    #caseView.exam-prep .scene-ribbon b,
    #caseView.exam-room-active .scene-ribbon b {
      color: #ffe9ad;
    }

    #caseView.exam-prep .consult-overlay {
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 3;
      width: auto;
      grid-template-columns: 1fr auto;
      justify-items: stretch;
      text-align: left;
      transform: none;
      background: linear-gradient(180deg, rgba(65,31,20,.78), rgba(24,14,10,.94));
      border-color: rgba(232,198,128,.42);
      backdrop-filter: blur(4px);
    }

    #caseView.exam-prep .consult-overlay b,
    #caseView.exam-prep .consult-overlay span {
      display: block;
    }

    #caseView.exam-prep .consult-overlay .primary-btn {
      min-width: 132px;
      min-height: 46px;
      font-size: 18px;
      background: linear-gradient(180deg, #b3402e, #7d251c);
    }

    #caseView.exam-room-active .clinic-desk,
    #caseView.exam-prep .clinic-desk {
      height: 86px;
      left: 5%;
      right: 5%;
      bottom: -22px;
      background:
        radial-gradient(circle at 20% 44%, rgba(255,220,142,.18), transparent 18%),
        linear-gradient(180deg, rgba(78,42,24,.76), rgba(25,15,10,.92));
    }

    #caseView.consult-room-active .game-hud {
      margin-top: 10px;
    }

    #caseView.consult-room-active .question-grid,
    #caseView.consult-room-active .clue-board,
    #caseView.consult-room-active .npc-wrap {
      border-color: rgba(126,76,39,.34);
      box-shadow: 0 10px 22px rgba(58,35,17,.12);
    }

    .consult-overlay {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 4;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: end;
      padding: 12px;
      border: 1px solid rgba(232,198,128,.4);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(32,22,15,.78), rgba(21,14,10,.9));
      color: #f8e6bd;
      box-shadow: 0 14px 26px rgba(0,0,0,.28);
      backdrop-filter: blur(5px);
      animation: panelRise .35s ease both;
    }

    .consult-overlay b {
      display: block;
      margin-bottom: 3px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 19px;
    }

    .consult-overlay span {
      display: block;
      color: #d9c195;
      font-size: 12px;
    }

    .transition-veil {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      place-items: center;
      color: #f8e6bd;
      background:
        radial-gradient(circle at 50% 55%, rgba(198,147,67,.24), transparent 24%),
        rgba(12, 9, 7, .94);
      opacity: 0;
      pointer-events: none;
      transform: scale(1.04);
    }

    .transition-veil.active {
      display: grid;
      animation: veilPass .9s ease both;
    }

    .transition-veil b {
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 26px;
      letter-spacing: 0;
      text-shadow: 0 8px 18px rgba(0,0,0,.45);
    }

    .transition-veil span {
      display: block;
      margin-top: 9px;
      color: #d9c195;
      font-size: 13px;
      font-weight: 900;
      text-align: center;
    }

    .stage-caption,
    .master-aside,
    .verdict-stamp,
    .flying-clue {
      position: fixed;
      left: 50%;
      z-index: 90;
      pointer-events: none;
    }

    .stage-caption {
      top: 78px;
      min-width: 190px;
      max-width: min(86vw, 420px);
      padding: 10px 14px;
      border: 1px solid rgba(232,198,128,.55);
      border-radius: 8px;
      color: #ffe8b7;
      background: linear-gradient(180deg, rgba(40,25,16,.94), rgba(18,14,10,.94));
      box-shadow: 0 18px 36px rgba(0,0,0,.34);
      text-align: center;
      transform: translateX(-50%);
      animation: stageCaption 1.5s ease both;
    }

    .master-aside {
      top: 136px;
      padding: 8px 12px;
      border: 1px solid rgba(232,198,128,.52);
      border-radius: 999px;
      color: #fff3d3;
      background: rgba(80, 34, 25, .92);
      box-shadow: 0 14px 24px rgba(0,0,0,.26);
      font-size: 13px;
      font-weight: 900;
      transform: translateX(-50%);
      animation: masterAside 1.2s ease both;
    }

    .flying-clue {
      top: 50%;
      padding: 6px 10px;
      border-radius: 999px;
      color: #f7fff0;
      background: linear-gradient(180deg, #4b8a77, #285d51);
      box-shadow: 0 0 22px rgba(82, 156, 132, .42);
      font-size: 12px;
      font-weight: 900;
      transform: translate(-50%, -50%);
      animation: clueFly .82s ease both;
    }

    .verdict-stamp {
      top: 42%;
      width: 132px;
      height: 132px;
      display: grid;
      place-items: center;
      border: 5px double currentColor;
      border-radius: 18px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 34px;
      font-weight: 900;
      transform: translate(-50%, -50%) rotate(-12deg) scale(.6);
      opacity: 0;
      mix-blend-mode: multiply;
      animation: stampDrop 1.05s cubic-bezier(.2, 1.35, .22, 1) both;
    }

    .verdict-stamp.good {
      color: #8a1e18;
      background: rgba(255, 236, 191, .25);
    }

    .verdict-stamp.bad {
      color: #2f5f55;
      background: rgba(231, 244, 232, .22);
    }

    .scroll-open {
      animation: scrollOpen .42s ease both;
      transform-origin: top center;
    }

    .scene-fx {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .fx-dot,
    .fx-line {
      position: absolute;
      display: block;
      opacity: .78;
      transform: translate3d(0,0,0);
    }

    .fx-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(242, 205, 124, .85);
      box-shadow: 0 0 12px rgba(242, 205, 124, .7);
      animation: emberRise 4.8s linear infinite;
    }

    .fx-line {
      width: 82px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(229, 218, 190, .75), transparent);
      animation: windSlash 3.8s linear infinite;
    }

    .fx-taiyang .fx-line { background: linear-gradient(90deg, transparent, rgba(220, 232, 224, .8), transparent); }
    .fx-yangming .fx-dot { background: rgba(255, 167, 74, .95); box-shadow: 0 0 16px rgba(255, 111, 50, .8); }
    .fx-shaoyang .fx-dot { background: rgba(116, 191, 142, .9); box-shadow: 0 0 12px rgba(116, 191, 142, .65); }
    .fx-taiyin .fx-dot { background: rgba(184, 216, 224, .9); box-shadow: 0 0 12px rgba(184, 216, 224, .7); animation-name: snowFall; }
    .fx-shaoyin .fx-dot { background: rgba(220, 242, 250, .95); box-shadow: 0 0 14px rgba(220, 242, 250, .8); animation-name: snowFall; }
    .fx-jueyin .fx-dot:nth-child(odd) { background: rgba(63, 155, 210, .92); box-shadow: 0 0 16px rgba(63,155,210,.7); }
    .fx-jueyin .fx-dot:nth-child(even) { background: rgba(215, 70, 46, .9); box-shadow: 0 0 16px rgba(215,70,46,.68); }

    .scene-ribbon {
      position: absolute;
      left: 14px;
      top: 14px;
      z-index: 4;
      max-width: min(58%, 330px);
      padding: 8px 10px 9px;
      border-radius: 7px;
      background: linear-gradient(90deg, rgba(10,8,6,.62), rgba(10,8,6,.28), transparent);
      color: #f7e4b8;
    }

    .scene-ribbon b {
      display: block;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 26px;
      line-height: 1;
      text-shadow: 0 4px 14px rgba(0,0,0,.6);
    }

    .scene-ribbon span {
      display: block;
      margin-top: 8px;
      color: #d8c29a;
      font-size: 12px;
      line-height: 1.35;
    }

    .game-hud {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .hud-card {
      min-height: 58px;
      padding: 9px 8px;
      border: 1px solid rgba(198,147,67,.34);
      border-radius: 7px;
      color: #f4e0b5;
      background: linear-gradient(180deg, rgba(31,27,20,.9), rgba(59,39,25,.82));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 16px rgba(0,0,0,.18);
      animation: panelRise .42s ease both;
    }

    .hud-card span {
      display: block;
      color: #cdb585;
      font-size: 11px;
      font-weight: 800;
    }

    .hud-card b {
      display: block;
      margin-top: 3px;
      font-size: 18px;
      line-height: 1.1;
    }

    .hud-card.warn {
      border-color: rgba(143, 44, 34, .48);
      color: #ffe0bb;
      background: linear-gradient(180deg, rgba(94,31,24,.92), rgba(54,30,24,.86));
    }

    .hud-card.shake {
      animation: patienceShake .38s ease both;
    }

    .patient-mood-panel {
      margin-top: 8px;
      padding: 10px;
      border: 1px solid rgba(198,147,67,.34);
      border-radius: 8px;
      color: #f3ddb3;
      background:
        radial-gradient(circle at 8% 20%, rgba(198,147,67,.18), transparent 24%),
        linear-gradient(180deg, rgba(29,25,20,.92), rgba(50,36,25,.88));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.14);
    }

    .patient-profile {
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin-bottom: 9px;
    }

    .patient-profile-avatar {
      width: 66px;
      height: 78px;
      border: 1px solid rgba(232,198,128,.38);
      border-radius: 8px;
      box-shadow: inset 0 -18px 24px rgba(0,0,0,.35), 0 10px 18px rgba(0,0,0,.16);
    }

    .patient-profile-copy {
      min-width: 0;
    }

    .patient-profile-copy p {
      margin: 5px 0 0;
      color: #e7cfa1;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .patient-mood-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 0;
    }

    .patient-mood-head b {
      font-size: 13px;
      font-weight: 900;
    }

    .patient-mood-head span {
      color: #d7bd8e;
      font-size: 11px;
      font-weight: 800;
      text-align: right;
    }

    .mood-bars {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .mood-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 5px;
      align-items: center;
      min-width: 0;
    }

    .mood-bar i,
    .mood-bar b {
      color: #d7bd8e;
      font-style: normal;
      font-size: 11px;
      font-weight: 900;
    }

    .mood-bar span {
      position: relative;
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.13);
    }

    .mood-bar em {
      position: absolute;
      inset: 0 auto 0 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #4eb58e, #d7a94c);
    }

    .mood-bar.reverse em {
      background: linear-gradient(90deg, #d7a94c, #c54c39);
    }

    .evidence-meter {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      margin-top: 9px;
      padding-top: 9px;
      border-top: 1px solid rgba(232,198,128,.18);
    }

    .evidence-meter span {
      position: relative;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.13);
    }

    .evidence-meter i {
      position: absolute;
      inset: 0 auto 0 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #6dbb95, #d7a94c);
    }

    .evidence-meter b,
    .evidence-meter em {
      color: #e3c899;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .patient-reaction-note,
    .teacher-focus-note {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      gap: 8px;
      margin-top: 8px;
      padding: 8px;
      border-radius: 7px;
      background: rgba(255, 244, 216, .07);
      color: #e6cf9f;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .patient-reaction-note b,
    .teacher-focus-note b {
      color: #ffd995;
      font-size: 12px;
      white-space: nowrap;
    }

    .teacher-focus-note {
      background: rgba(47,105,94,.14);
    }

    .consult-feedback {
      position: relative;
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 48px;
      margin-top: 8px;
      padding: 9px 10px;
      border: 1px solid rgba(198,147,67,.34);
      border-radius: 8px;
      color: #f7dfb0;
      background: linear-gradient(180deg, rgba(31,27,20,.9), rgba(54,37,25,.86));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.16);
      animation: panelRise .28s ease both;
    }

    .consult-feedback:before {
      content: "";
      width: 10px;
      height: 30px;
      border-radius: 999px;
      background: #c69343;
      box-shadow: 0 0 14px rgba(198,147,67,.48);
    }

    .consult-feedback b,
    .consult-feedback span {
      display: block;
      min-width: 0;
    }

    .consult-feedback b {
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .consult-feedback span {
      margin-top: 2px;
      color: #d9c195;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }

    .feedback-good {
      border-color: rgba(65, 142, 116, .48);
      background: linear-gradient(180deg, rgba(27,61,53,.92), rgba(32,45,35,.86));
    }

    .feedback-good:before {
      background: #4eb58e;
      box-shadow: 0 0 14px rgba(78,181,142,.45);
    }

    .feedback-bad {
      border-color: rgba(159, 58, 43, .54);
      background: linear-gradient(180deg, rgba(93,32,27,.92), rgba(52,31,27,.86));
    }

    .feedback-bad:before {
      background: #c54c39;
      box-shadow: 0 0 14px rgba(197,76,57,.45);
    }

    .feedback-neutral:before,
    .feedback-idle:before,
    .feedback-start:before {
      background: #d7a94c;
    }

    .question-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .ask-btn, .primary-btn, .ghost-btn, .choice-btn {
      min-height: 42px;
      border-radius: 7px;
      cursor: pointer;
    }

    .ask-btn {
      position: relative;
      padding: 8px 9px;
      border: 1px solid rgba(126,76,39,.36);
      color: var(--ink);
      background: linear-gradient(180deg, #fff8e7, #ead5ad);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      animation: questionIn .24s ease both;
    }

    .ask-btn:before {
      content: "";
      position: absolute;
      left: 7px;
      top: 50%;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(143,44,34,.82);
      box-shadow: inset 0 0 0 5px rgba(248,229,191,.92);
      transform: translateY(-50%);
    }

    .ask-btn {
      padding-left: 34px;
    }

    .ask-btn em {
      display: block;
      margin-top: 2px;
      color: rgba(80, 52, 33, .64);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
    }

    .ask-btn:hover {
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 8px 16px rgba(126,76,39,.2);
      filter: saturate(1.06);
    }

    .ask-btn:disabled {
      opacity: .55;
      color: #7b7065;
    }

    .ask-btn.trap {
      border-color: rgba(143,44,34,.42);
      background: linear-gradient(180deg, #f7ead6, #d9b993);
    }

    .ask-btn.trap:before {
      background: rgba(52, 58, 62, .86);
      box-shadow: inset 0 0 0 5px rgba(232, 198, 147, .88);
    }

    .ask-btn.trap em {
      color: rgba(143,44,34,.86);
    }

    .ask-btn.rephrase {
      border-color: rgba(47,105,94,.38);
      color: #24594f;
      background: linear-gradient(180deg, #eff9ee, #d9e8cd);
    }

    .ask-btn.rephrase:before {
      background: rgba(47,105,94,.86);
      box-shadow: inset 0 0 0 5px rgba(232, 246, 219, .88);
    }

    .ask-btn.rephrase em {
      color: rgba(36,89,79,.82);
    }

    .follow-panel {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid rgba(47,105,94,.28);
      border-radius: 8px;
      background: rgba(232, 244, 229, .68);
      animation: panelRise .28s ease both;
    }

    .follow-panel h3 {
      margin-bottom: 8px;
      color: #24594f;
      font-size: 14px;
    }

    .follow-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 7px;
    }

    .follow-btn {
      min-height: 38px;
      padding: 7px 8px;
      border: 1px solid rgba(47,105,94,.34);
      border-radius: 7px;
      color: #244f47;
      background: linear-gradient(180deg, #f6ffef, #d9ead0);
      font-size: 12px;
      font-weight: 900;
    }

    .evidence-board {
      display: grid;
      gap: 7px;
      margin: 10px 0;
      padding: 10px;
      border: 1px solid rgba(47,105,94,.22);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(239,247,229,.76), rgba(232,220,187,.62));
    }

    .evidence-head,
    .evidence-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .evidence-head {
      grid-template-columns: 1fr auto;
      color: #24594f;
      font-size: 12px;
      font-weight: 900;
    }

    .evidence-row span {
      min-width: 36px;
      color: #6a2b1f;
      font-weight: 900;
    }

    .evidence-row em {
      min-width: 28px;
      color: rgba(80,52,33,.7);
      font-style: normal;
      font-weight: 900;
      text-align: right;
    }

    .evidence-track {
      height: 8px;
      border-radius: 999px;
      background: rgba(126,76,39,.16);
      overflow: hidden;
    }

    .evidence-track i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2f695e, #d1a351, #8f2c22);
    }

    .counter-evidence {
      margin-top: 3px;
      padding: 8px;
      border: 1px dashed rgba(143,44,34,.28);
      border-radius: 7px;
      color: #5b3925;
      background: rgba(255,248,229,.64);
      line-height: 1.55;
    }

    .counter-evidence b {
      display: block;
      margin-bottom: 2px;
      color: #8f2c22;
    }

    .skill-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .skill-card {
      min-height: 118px;
      padding: 10px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      color: #4c341f;
      background: linear-gradient(180deg, rgba(255,248,229,.9), rgba(235,213,173,.82));
      text-align: left;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
    }

    .skill-card.learned {
      border-color: rgba(47,105,94,.45);
      background: linear-gradient(180deg, rgba(238,248,229,.94), rgba(203,226,196,.84));
    }

    .skill-card.locked {
      opacity: .58;
      filter: grayscale(.25);
    }

    .skill-card b {
      display: block;
      color: #7d251c;
      font-size: 15px;
      margin-bottom: 5px;
    }

    .skill-card span {
      display: block;
      color: rgba(80,52,33,.72);
      font-size: 11px;
      line-height: 1.45;
    }

    .skill-card em {
      display: inline-flex;
      margin-top: 7px;
      padding: 3px 7px;
      border-radius: 999px;
      color: #fff3d4;
      background: #8f2c22;
      font-style: normal;
      font-size: 11px;
      font-weight: 900;
    }

    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 12px;
      align-items: stretch;
    }

    .primary-btn {
      border: 1px solid rgba(88, 30, 22, .55);
      color: #fff4dc;
      background: linear-gradient(180deg, #9b382b, #6f2018);
      box-shadow: 0 8px 16px rgba(82, 26, 18, .22), inset 0 1px 0 rgba(255,255,255,.25);
      font-weight: 900;
    }

    .ghost-btn {
      border: 1px solid rgba(96, 64, 35, .36);
      color: #503421;
      background: rgba(255, 244, 216, .74);
      font-weight: 800;
    }

    .answer-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .answer-card {
      min-height: 66px;
      padding: 10px;
      text-align: center;
      font-weight: 900;
    }

    .answer-card.selected {
      border-color: #7d251c;
      color: #7d251c;
      background: linear-gradient(180deg, #ffe8bd, #e6b966);
      box-shadow: 0 0 0 2px rgba(143,44,34,.18), 0 8px 18px rgba(105,59,28,.2);
      animation: selectedPulse .5s ease both;
    }

    .formula-list .answer-card {
      min-height: 58px;
      font-size: 14px;
    }

    .formula-tools {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding: 2px 0 8px;
      scrollbar-width: none;
    }

    .formula-tools::-webkit-scrollbar { display: none; }

    .filter-chip {
      flex: 0 0 auto;
      min-height: 32px;
      padding: 5px 10px;
      border: 1px solid rgba(126,76,39,.34);
      border-radius: 999px;
      color: #503421;
      background: rgba(255, 244, 216, .8);
      font-size: 12px;
      font-weight: 900;
    }

    .filter-chip.active {
      color: #fff2d2;
      background: linear-gradient(180deg, #8f2c22, #642018);
    }

    .formula-list {
      max-height: 320px;
      overflow: auto;
      padding-right: 2px;
    }

    .formula-card-note {
      display: block;
      margin-top: 3px;
      color: rgba(80, 52, 33, .72);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.25;
    }

    .formula-detail {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      background: rgba(255, 248, 229, .72);
      color: #4c341f;
      font-size: 13px;
    }

    .formula-detail b {
      display: block;
      margin-bottom: 4px;
      color: #7d251c;
    }

    .library-search {
      width: 100%;
      min-height: 42px;
      margin: 4px 0 10px;
      padding: 9px 12px;
      border: 1px solid rgba(126,76,39,.34);
      border-radius: 8px;
      color: #4c341f;
      background: rgba(255, 248, 229, .86);
      font-size: 15px;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    }

    .library-shell {
      display: grid;
      gap: 10px;
    }

    .library-index {
      display: grid;
      gap: 7px;
      max-height: 44vh;
      overflow: auto;
      padding-right: 2px;
    }

    .library-group-title {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 9px;
      border: 1px solid rgba(126,76,39,.22);
      border-radius: 8px;
      color: #6a2b1f;
      background: linear-gradient(180deg, rgba(255,248,229,.96), rgba(239,224,190,.94));
      font-weight: 900;
    }

    .library-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      min-height: 50px;
      padding: 9px 10px;
      border: 1px solid rgba(126,76,39,.22);
      border-radius: 8px;
      color: #4c341f;
      background: rgba(255, 248, 229, .72);
      text-align: left;
    }

    .library-row.active {
      border-color: rgba(143,44,34,.55);
      background: linear-gradient(180deg, rgba(255,239,193,.95), rgba(247,220,157,.86));
      box-shadow: 0 8px 18px rgba(91, 44, 20, .12);
    }

    .library-row b,
    .library-detail-card b {
      color: #7d251c;
      font-size: 16px;
    }

    .library-row span {
      display: block;
      margin-top: 2px;
      color: rgba(80,52,33,.68);
      font-size: 11px;
      line-height: 1.35;
    }

    .library-row i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      min-height: 24px;
      padding: 2px 7px;
      border-radius: 999px;
      color: #fff2d2;
      background: #8f2c22;
      font-style: normal;
      font-size: 11px;
      font-weight: 900;
    }

    .library-detail-card {
      padding: 12px;
      border: 1px solid rgba(126,76,39,.34);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255,248,229,.96), rgba(238,223,189,.92));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }

    .library-detail-card .actions {
      margin-top: 10px;
      grid-template-columns: 1fr;
    }

    .library-empty {
      padding: 16px;
      border: 1px dashed rgba(126,76,39,.35);
      border-radius: 8px;
      color: rgba(80,52,33,.72);
      background: rgba(255,248,229,.58);
      text-align: center;
      font-weight: 900;
    }

    .archive-fold {
      padding-top: 0;
    }

    .archive-fold > summary {
      cursor: pointer;
      list-style: none;
      padding: 12px 0 8px;
    }

    .archive-fold > summary::-webkit-details-marker {
      display: none;
    }

    .archive-fold > summary:after {
      content: "展开";
      flex: 0 0 auto;
      padding: 4px 9px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 999px;
      color: #7d251c;
      background: rgba(255,244,216,.86);
      font-size: 11px;
      font-weight: 900;
    }

    .archive-fold[open] > summary:after {
      content: "收起";
    }

    .reason-board {
      margin-top: 12px;
      padding: 11px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      background: rgba(255, 248, 229, .68);
    }

    .reason-row {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }

    .reason-row:first-child { margin-top: 0; }

    .reason-row.advanced {
      padding-top: 8px;
      border-top: 1px dashed rgba(126,76,39,.18);
    }

    .reason-row b {
      color: #6d4429;
      font-size: 12px;
    }

    .reason-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .reason-chip {
      min-height: 30px;
      padding: 5px 9px;
      border: 1px solid rgba(126,76,39,.3);
      border-radius: 999px;
      color: #503421;
      background: rgba(255, 244, 216, .86);
      font-size: 12px;
      font-weight: 900;
    }

    .reason-chip.active {
      border-color: rgba(47,105,94,.5);
      color: #f4ffe9;
      background: linear-gradient(180deg, #3d776a, #24594f);
    }

    .reason-toggle {
      width: 100%;
      min-height: 36px;
      margin-top: 10px;
      border: 1px solid rgba(126,76,39,.28);
      border-radius: 8px;
      color: #7d251c;
      background: linear-gradient(180deg, rgba(255,244,216,.9), rgba(232,210,166,.78));
      font-weight: 900;
    }

    .reason-dashboard {
      display: grid;
      gap: 8px;
      margin-bottom: 10px;
    }

    .reason-meter {
      display: grid;
      gap: 5px;
      padding: 8px;
      border: 1px solid rgba(126,76,39,.22);
      border-radius: 8px;
      background: rgba(255, 255, 245, .58);
    }

    .reason-meter-head,
    .reason-signal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #6d4429;
      font-size: 11px;
      font-weight: 900;
    }

    .reason-meter-track,
    .reason-signal-track {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(126,76,39,.15);
    }

    .reason-meter-fill,
    .reason-signal-fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #9b3b2b, #d9a64f, #3d776a);
      transition: width .28s ease;
    }

    .reason-signals {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px dashed rgba(126,76,39,.28);
      border-radius: 8px;
      background: rgba(255, 244, 216, .5);
    }

    .reason-signal-row {
      display: grid;
      grid-template-columns: 48px 1fr 34px;
    }

    .reason-note-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .reason-note {
      min-height: 52px;
      padding: 8px;
      border-radius: 8px;
      background: rgba(47,105,94,.08);
      color: #503421;
      font-size: 12px;
      line-height: 1.5;
    }

    .reason-note.warning {
      background: rgba(155,59,43,.1);
    }

    .reason-note b {
      display: block;
      margin-bottom: 3px;
      color: #7d251c;
      font-size: 12px;
    }

    @media (max-width: 560px) {
      .bottom-nav {
        padding: 5px 7px calc(5px + var(--safe-bottom));
      }

      .nav-btn {
        min-height: 44px;
        font-size: 11px;
      }

      #caseView.consult-room-active {
        padding-bottom: 86px;
      }

      #caseView.consult-room-active #consultActions {
        position: sticky;
        bottom: 8px;
        z-index: 28;
        grid-template-columns: minmax(94px, .78fr) minmax(132px, 1.22fr);
        gap: 8px;
        margin: 12px 0 2px;
        padding: 8px;
        border: 1px solid rgba(126,76,39,.32);
        border-radius: 10px;
        background: rgba(255, 247, 225, .94);
        box-shadow: 0 -10px 26px rgba(39, 24, 13, .2), inset 0 0 0 1px rgba(255,255,255,.48);
        backdrop-filter: blur(8px);
      }

      #caseView.consult-room-active #consultActions .primary-btn,
      #caseView.consult-room-active #consultActions .ghost-btn {
        min-height: 52px;
        padding: 0 10px;
        font-size: 15px;
        white-space: nowrap;
      }

      #caseView.consult-room-active #consultActions .primary-btn {
        font-size: 17px;
      }

      .consult-feedback {
        grid-template-columns: 8px minmax(0, 1fr);
        min-height: 44px;
        padding: 8px 9px;
      }

      .consult-feedback:before {
        width: 8px;
        height: 28px;
      }

      .reason-note-grid {
        grid-template-columns: 1fr;
      }

      .phase-tracker {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
      }

      .phase-step {
        min-height: 48px;
        padding: 7px 7px 7px 31px;
      }

      .phase-step b {
        font-size: 12px;
      }

      .phase-step span {
        font-size: 10px;
      }
    }

    .path-log {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .path-log span {
      display: block;
      padding: 7px 8px;
      border-radius: 6px;
      background: rgba(47,105,94,.08);
      color: #513924;
      font-size: 12px;
      font-weight: 800;
    }

    .teacher-pause-log {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .teacher-pause-log span {
      display: block;
      padding: 7px 8px;
      border: 1px solid rgba(143,44,34,.18);
      border-radius: 6px;
      color: #742b22;
      background: rgba(255, 236, 199, .62);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.35;
    }

    .master {
      display: none;
      margin-top: 12px;
      padding: 14px;
      border: 1px solid rgba(126,76,39,.38);
      border-radius: 8px;
      background: linear-gradient(180deg, #fff7df, #e8d1a8);
      box-shadow: var(--shadow);
      animation: panelRise .4s ease both;
    }

    .master.active { display: block; }

    .master.active:before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background: radial-gradient(circle at 50% 28%, rgba(255, 230, 164, .18), transparent 28%);
      pointer-events: none;
      animation: verdictGlow .7s ease both;
    }

    .result-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 24px;
      font-weight: 900;
    }

    .master-layout {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 10px;
      align-items: start;
    }

    .master-face {
      position: relative;
      width: 82px;
      height: 104px;
      overflow: hidden;
      border: 1px solid rgba(126,76,39,.38);
      border-radius: 8px;
      background-size: cover;
      background-position: center 12%;
      box-shadow: inset 0 -22px 30px rgba(0,0,0,.32), 0 10px 18px rgba(75,44,20,.2);
      animation: breathe 3.8s ease-in-out infinite;
    }

    .score-line {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin: 10px 0;
    }

    .score-line span {
      padding: 7px 5px;
      border-radius: 6px;
      background: rgba(47,105,94,.11);
      color: #24594f;
      text-align: center;
      font-size: 12px;
      font-weight: 900;
    }

    .scroll-text {
      padding: 11px;
      border-left: 3px solid var(--red);
      background: rgba(255,255,255,.38);
      color: #49331f;
      font-size: 14px;
    }

    .case-chart-summary {
      display: grid;
      gap: 6px;
      margin: 8px 0;
      padding: 10px;
      border: 1px solid rgba(47,105,94,.22);
      border-radius: 8px;
      background: rgba(47,105,94,.08);
    }

    .case-chart-summary b {
      color: #255d53;
      font-size: 14px;
      font-weight: 900;
    }

    .case-chart-summary span {
      display: block;
      color: #4e3a26;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
    }

    .wrong-list, .record-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .record {
      padding: 10px;
      border: 1px solid rgba(126,76,39,.26);
      border-radius: 7px;
      background: rgba(255,248,229,.72);
    }

    .record b { display: block; margin-bottom: 4px; }

    .release-section {
      border-color: rgba(47,105,94,.26);
      background:
        linear-gradient(180deg, rgba(250, 244, 226, .92), rgba(225, 213, 184, .9)),
        repeating-linear-gradient(90deg, rgba(47,105,94,.04) 0 1px, transparent 1px 8px);
    }

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

    .release-card {
      min-height: 104px;
      padding: 10px;
      border: 1px solid rgba(126,76,39,.22);
      border-radius: 8px;
      background: rgba(255,248,228,.72);
    }

    .release-card b,
    .release-card span {
      display: block;
    }

    .release-card b {
      margin-bottom: 5px;
      color: #24594f;
      font-size: 14px;
      font-weight: 900;
    }

    .release-card span {
      color: #5d4a36;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.5;
    }

    .release-card.warning {
      border-color: rgba(143,44,34,.24);
      background: rgba(255,239,213,.72);
    }

    .release-card.warning b {
      color: #8f2c22;
    }

    .bottom-nav {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 30;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      width: min(100%, 740px);
      padding: 7px 8px calc(7px + var(--safe-bottom));
      border-top: 1px solid rgba(225, 187, 112, .4);
      background: rgba(20, 18, 14, .94);
      transform: translateX(-50%);
      backdrop-filter: blur(10px);
    }

    .nav-btn {
      min-height: 48px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #d8c69f;
      font-size: 12px;
      font-weight: 800;
    }

    .nav-btn.active {
      background: rgba(198,147,67,.18);
      color: #fff0c8;
    }

    .nav-btn i {
      display: block;
      font-style: normal;
      font-size: 18px;
      line-height: 1.1;
    }

    .exam-banner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      margin: 0 0 12px;
      padding: 10px 12px;
      border: 1px solid rgba(205, 151, 66, .45);
      border-radius: 8px;
      color: #f7e5bb;
      background:
        linear-gradient(135deg, rgba(85, 38, 26, .72), rgba(28, 24, 18, .82)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 10px);
      box-shadow: inset 0 0 24px rgba(0,0,0,.2);
      animation: panelRise .35s ease both;
    }

    .exam-banner b {
      font-family: "STKaiti", "KaiTi", serif;
      font-size: 18px;
      color: #ffe2a0;
    }

    .exam-banner span,
    .exam-banner i {
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
      color: #dcc69d;
    }

    .hidden { display: none !important; }

    .float-toast {
      position: fixed;
      left: 50%;
      top: 92px;
      z-index: 80;
      max-width: min(88vw, 360px);
      padding: 9px 12px;
      border: 1px solid rgba(232,198,128,.55);
      border-radius: 999px;
      color: #fff1ca;
      background: rgba(32, 21, 13, .9);
      box-shadow: 0 12px 25px rgba(0,0,0,.28);
      transform: translateX(-50%);
      animation: toastFloat 1.15s ease both;
      pointer-events: none;
      font-size: 13px;
      font-weight: 900;
    }

    @keyframes bgBreath {
      from { background-position: 0 0, 100% 0, 0 0, 0 0; }
      to { background-position: 10px 18px, calc(100% - 18px) 12px, 0 0, 0 0; }
    }

    @keyframes mistDrift {
      from { transform: translateX(-18px); opacity: .72; }
      50% { opacity: 1; }
      to { transform: translateX(18px); opacity: .72; }
    }

    @keyframes heroFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-7px) scale(1.015); }
    }

    @keyframes npcEnter {
      0% { opacity: 0; transform: translateX(90px) translateY(16px) scale(.9); filter: blur(1px) drop-shadow(-20px 12px 30px rgba(0,0,0,.45)); }
      70% { opacity: 1; transform: translateX(-6px) translateY(0) scale(1.01); filter: blur(0) drop-shadow(-20px 12px 30px rgba(0,0,0,.45)); }
      100% { opacity: .96; transform: translateX(0) translateY(0) scale(1); filter: drop-shadow(-20px 12px 30px rgba(0,0,0,.45)); }
    }

    @keyframes panelRise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes cardFlip {
      from { opacity: 0; transform: perspective(600px) rotateX(8deg) translateY(10px); }
      to { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }
    }

    @keyframes dialogueIn {
      from { opacity: 0; transform: translateX(10px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes cluePop {
      from { opacity: 0; transform: scale(.85); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes selectedPulse {
      0% { box-shadow: 0 0 0 0 rgba(143,44,34,.26), 0 8px 18px rgba(105,59,28,.2); }
      100% { box-shadow: 0 0 0 2px rgba(143,44,34,.18), 0 8px 18px rgba(105,59,28,.2); }
    }

    @keyframes scenePulse {
      0% { box-shadow: var(--shadow); filter: saturate(1); }
      45% { box-shadow: 0 0 0 2px rgba(198,147,67,.28), 0 18px 44px rgba(198,147,67,.25); filter: saturate(1.18); }
      100% { box-shadow: var(--shadow); filter: saturate(1); }
    }

    @keyframes emberRise {
      from { transform: translateY(40px) scale(.7); opacity: 0; }
      15% { opacity: .85; }
      to { transform: translateY(-245px) scale(1.2); opacity: 0; }
    }

    @keyframes snowFall {
      from { transform: translateY(-40px) translateX(0) scale(.8); opacity: 0; }
      15% { opacity: .75; }
      to { transform: translateY(260px) translateX(-24px) scale(1.1); opacity: 0; }
    }

    @keyframes windSlash {
      from { transform: translateX(-130px) translateY(20px) rotate(-13deg); opacity: 0; }
      16% { opacity: .8; }
      to { transform: translateX(420px) translateY(-28px) rotate(-13deg); opacity: 0; }
    }

    @keyframes questionIn {
      from { opacity: 0; transform: translateY(8px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes toastFloat {
      0% { opacity: 0; transform: translate(-50%, 8px) scale(.96); }
      18%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -14px) scale(.98); }
    }

    @keyframes verdictGlow {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes stageCaption {
      0% { opacity: 0; transform: translate(-50%, 10px) scale(.96); }
      18%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -12px) scale(.98); }
    }

    @keyframes masterAside {
      0% { opacity: 0; transform: translate(-50%, 8px) scale(.94); }
      22%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -10px) scale(.96); }
    }

    @keyframes clueFly {
      0% { opacity: 0; transform: translate(-50%, 22px) scale(.88); }
      22% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(55%, -120px) scale(.72); }
    }

    @keyframes stampDrop {
      0% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(1.8); filter: blur(4px); }
      42% { opacity: .96; transform: translate(-50%, -50%) rotate(-10deg) scale(.86); filter: blur(0); }
      64% { opacity: .96; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.04); }
    }

    @keyframes scrollOpen {
      from { opacity: 0; transform: scaleY(.72) translateY(-8px); filter: saturate(.9); }
      to { opacity: 1; transform: scaleY(1) translateY(0); filter: saturate(1); }
    }

    @keyframes patienceShake {
      0%, 100% { transform: translateX(0); }
      22% { transform: translateX(-4px); }
      44% { transform: translateX(4px); }
      66% { transform: translateX(-2px); }
      82% { transform: translateX(2px); }
    }

    @keyframes lanternBreath {
      from { opacity: .72; }
      to { opacity: 1; }
    }

    @keyframes veilPass {
      0% { opacity: 0; transform: scale(1.04); }
      25%, 65% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(.98); }
    }

    @keyframes breathe {
      0%, 100% { transform: translateY(0); filter: saturate(1); }
      50% { transform: translateY(-2px); filter: saturate(1.08); }
    }

    @keyframes bladeGleam {
      0%, 66% { transform: translateX(-120%); }
      82% { transform: translateX(120%); }
      100% { transform: translateX(120%); }
    }

    @keyframes glowMove {
      from { --glow-x: 62%; }
      to { --glow-x: 84%; }
    }

    @media (min-width: 680px) {
      .app { padding-top: 18px; }
      .hero { min-height: 310px; padding: 34px 28px 24px; }
      .hero-art { right: 8px; width: 286px; height: 330px; }
      .scene-board { min-height: 300px; }
      .scene-portrait { width: 380px; height: 365px; }
      .question-grid, .answer-grid, .chapters { grid-template-columns: repeat(3, 1fr); }
      .mode-grid { grid-template-columns: repeat(4, 1fr); }
    }

    @media (max-width: 560px) {
      .app {
        padding: 8px 8px calc(96px + var(--safe-bottom));
      }

      .hero {
        min-height: 238px;
        padding: 16px 13px 14px;
      }

      .hero-copy {
        max-width: 100%;
      }

      .hero-copy h1 {
        margin: 8px 0 6px;
        font-size: 34px;
      }

      .subtitle {
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 1.45;
      }

      .disclaimer {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 7px 8px;
        font-size: 11px;
      }

      .hero-art {
        right: 6px;
        bottom: 72px;
        z-index: 0;
        width: 126px;
        height: 168px;
        opacity: .32;
        filter: drop-shadow(0 14px 22px rgba(0,0,0,.38));
        pointer-events: none;
      }

      .hero-art:after {
        display: none;
      }

      .stats {
        gap: 6px;
        margin-top: 10px;
      }

      .stat {
        padding: 7px 6px;
      }

      .stat strong {
        font-size: 15px;
      }

      .section {
        margin-top: 9px;
        padding: 10px;
      }

      #storyPrelude {
        max-height: 118px;
        overflow: hidden;
      }

      #storyPrelude .story-thread {
        display: none;
      }

      #skillSection,
      #trainingRankSection,
      #challengeSection,
      #recordsSection,
      #releaseSection {
        max-height: 56px;
        overflow: hidden;
        cursor: default;
      }

      #skillSection .section-title,
      #trainingRankSection .section-title,
      #challengeSection .section-title,
      #recordsSection .section-title,
      #releaseSection .section-title {
        margin-bottom: 0;
      }

      #skillSection .section-title:after,
      #trainingRankSection .section-title:after,
      #challengeSection .section-title:after,
      #recordsSection .section-title:after,
      #releaseSection .section-title:after {
        content: "藏书阁/桌面端展开";
        padding: 2px 7px;
        border-radius: 999px;
        color: #7b2a20;
        background: rgba(143,44,34,.1);
        font-size: 10px;
        font-weight: 900;
        white-space: nowrap;
      }

      .mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .mode-card {
        min-height: 108px;
        padding: 10px;
      }

      .mode-card span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      #chapterSection {
        margin-top: 9px;
      }

      .formula-tools {
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        scrollbar-width: none;
      }

      .formula-tools::-webkit-scrollbar {
        display: none;
      }

      .filter-chip {
        flex: 0 0 auto;
      }

      .chapters {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .patient-case-card {
        min-height: 0;
        gap: 7px;
        padding: 10px;
      }

      .patient-case-card:after {
        font-size: 46px;
      }

      .chapter-card-head {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 8px;
      }

      .chapter-avatar {
        width: 46px;
        height: 54px;
      }

      .chapter-card b {
        margin-bottom: 3px;
        font-size: 15px;
      }

      .chapter-card-title .small:last-child,
      .chapter-chip {
        display: none;
      }

      .chapter-motive {
        padding: 6px 8px;
        line-height: 1.48;
      }

      .novel-card-hook {
        -webkit-line-clamp: 2;
        line-height: 1.48;
      }

      .chapter-card-foot {
        margin-top: 0;
      }

      .case-head {
        margin-bottom: 6px;
      }

      .case-head h2 {
        font-size: 20px;
      }

      .case-head .subtitle {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .phase-tracker {
        gap: 5px;
        margin-bottom: 7px;
      }

      .phase-step {
        min-height: 48px;
        padding: 7px 5px;
      }

      .phase-step span {
        display: none;
      }

      .study-notice {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        padding: 6px 8px;
        font-size: 11px;
      }

      #caseView.consult-room-active #caseStory,
      #caseView.exam-room-active #caseStory {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        border-width: 0;
      }

      .scene-board.consult-mode,
      .scene-board.exam-mode-scene {
        min-height: 220px;
        margin-top: 8px;
      }

      .scene-board:not(.consult-mode) {
        min-height: 238px;
      }

      .scene-ribbon {
        left: 8px;
        right: 8px;
        top: 8px;
        padding: 7px 9px;
      }

      .scene-ribbon span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .scene-portrait {
        right: -36px;
        width: 230px;
        height: 236px;
      }

      .consult-overlay {
        right: 10px;
        bottom: 10px;
        left: 10px;
        max-width: none;
        padding: 10px;
      }

      .game-hud {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        margin-top: 8px;
      }

      .hud-card {
        min-height: 48px;
        padding: 6px 4px;
      }

      .hud-card span {
        font-size: 10px;
      }

      .hud-card b {
        font-size: 14px;
      }

      .patient-mood-panel {
        padding: 8px;
      }

      .patient-profile {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 7px;
      }

      .patient-profile-avatar {
        width: 48px;
        height: 58px;
      }

      .patient-profile-copy p,
      .teacher-focus-note {
        display: none;
      }

      .patient-mood-head {
        display: block;
      }

      .patient-mood-head span {
        display: block;
        margin-top: 3px;
        text-align: left;
      }

      .mood-bars {
        gap: 5px;
      }

      .mood-bar {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .mood-bar b {
        display: none;
      }

      .evidence-meter {
        grid-template-columns: 1fr auto;
        margin-top: 7px;
        padding-top: 7px;
      }

      .evidence-meter em {
        display: none;
      }

      .patient-reaction-note {
        grid-template-columns: 1fr;
        gap: 3px;
        margin-top: 6px;
        padding: 6px 7px;
      }

      .patient-reaction-note span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .consult-feedback {
        min-height: 0;
        padding: 7px 8px;
      }

      .consult-feedback span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .npc-wrap {
        margin-top: 8px;
      }

      .avatar {
        width: 56px;
        height: 66px;
      }

      .dialogue {
        min-height: 76px;
        padding: 10px;
      }

      #npcText {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .clue-board {
        margin-top: 8px;
        padding: 8px;
      }

      .clue-board .section-title {
        margin-bottom: 6px;
      }

      .clue {
        min-height: 22px;
        padding: 3px 7px;
        font-size: 11px;
      }

      .question-grid {
        gap: 7px;
        margin-top: 9px;
      }

      .ask-btn {
        min-height: 50px;
        padding: 7px 8px 7px 30px;
        font-size: 13px;
        line-height: 1.28;
      }

      .ask-btn:before {
        left: 7px;
        width: 18px;
        height: 18px;
        box-shadow: inset 0 0 0 4px rgba(248,229,191,.92);
      }

      .ask-btn em {
        margin-top: 1px;
        font-size: 10px;
      }

      .follow-panel {
        margin-top: 8px;
        padding: 8px;
      }

      #caseView.consult-room-active #consultActions,
      #caseView.exam-room-active #consultActions {
        position: sticky;
        bottom: calc(66px + var(--safe-bottom));
        z-index: 29;
        margin-top: 9px;
        padding: 7px;
        border: 1px solid rgba(214,178,106,.34);
        border-radius: 8px;
        background: rgba(255, 247, 225, .94);
        box-shadow: 0 -10px 24px rgba(39,24,13,.18);
        backdrop-filter: blur(10px);
      }

      .story-prelude-modal {
        padding: 10px;
        place-items: end center;
      }

      .story-prelude-card {
        max-height: 94vh;
        padding: 11px;
      }

      .prelude-head h2 {
        font-size: 22px;
      }

      .prelude-stage {
        grid-template-columns: 1fr 1fr;
      }

      .prelude-scroll {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      .prelude-avatar {
        height: 112px;
      }

      .prelude-scroll p {
        font-size: 16px;
        line-height: 1.68;
      }

      .prelude-comic .comic-bubble {
        max-width: 100%;
      }

      .prelude-comic .comic-bubble p {
        font-size: 14px;
      }

      .prelude-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .release-grid {
        grid-template-columns: 1fr;
      }

      .release-card {
        min-height: 0;
      }

      .difficulty-grid { grid-template-columns: 1fr 1fr; }
      .difficulty-card { min-height: 78px; }
    }

    @media (max-width: 380px) {
      .moon {
        right: 12px;
        width: 58px;
        height: 58px;
      }

      .hero-copy { max-width: 86%; }
      .mode-grid, .question-grid, .answer-grid { grid-template-columns: 1fr 1fr; }
      .chapters { grid-template-columns: 1fr; }
      .mode-card { min-height: 98px; }
    }