:root {
        color-scheme: light;
        --bg: #f5f7f1;
        --panel: #ffffff;
        --panel-2: #edf4ef;
        --text: #17211b;
        --muted: #657267;
        --line: #d7dfd8;
        --accent: #d23f31;
        --accent-2: #1b8a76;
        --danger: #b83d4b;
        --shadow: 0 16px 48px rgba(35, 49, 39, 0.11);
      }


      * {
        box-sizing: border-box;
      }


      button,
      input {
        font: inherit;
      }


      .primary-btn,
      .secondary-btn {
        display: inline-flex;
        height: 46px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 8px;
        border: 1px solid transparent;
        padding: 0 16px;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
      }


      .primary-btn {
        background: var(--accent);
        color: #fff;
        font-weight: 700;
      }


      .secondary-btn {
        background: var(--panel);
        color: var(--text);
        border-color: var(--line);
      }


      .primary-btn svg,
      .secondary-btn svg {
        width: 18px;
        height: 18px;
      }


      .results.is-hidden {
        display: none;
      }


      @keyframes drawLine {
        to {
          stroke-dashoffset: 0;
        }
      }


      @keyframes fadeIn {
        to {
          opacity: 1;
        }
      }


      @keyframes pulseDot {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.22);
        }
      }


      .ritual-screen {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding: 20px;
        background:
          radial-gradient(circle at 22% 12%, rgba(255, 239, 213, 0.92), transparent 18rem),
          radial-gradient(circle at 82% 18%, rgba(210, 63, 49, 0.16), transparent 24rem),
          linear-gradient(180deg, #fffaf2 0%, #f3eee3 58%, #e7dccb 100%);
        color: #251b16;
      }


      .ritual-screen.is-hidden {
        display: none;
      }


      .maiden-stage {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: none;
      }


      .maiden-figure {
        position: relative;
        width: min(285px, 68vw);
        height: min(570px, 70vh);
        transform: translateY(-112vh);
        animation: maidenDrop 1.25s cubic-bezier(0.16, 1, 0.3, 1) 160ms forwards;
      }


      .maiden-figure::before,
      .maiden-figure::after {
        content: "";
        position: absolute;
        left: 50%;
        z-index: 0;
        width: 102px;
        height: 382px;
        border-radius: 52% 52% 46% 46%;
        background: linear-gradient(110deg, rgba(255, 255, 255, 0.96), rgba(241, 235, 230, 0.82));
        filter: drop-shadow(0 10px 12px rgba(80, 57, 45, 0.12));
      }


      .maiden-figure::before {
        top: 76px;
        transform: translateX(-128%) rotate(13deg);
      }


      .maiden-figure::after {
        top: 74px;
        transform: translateX(24%) rotate(-14deg);
      }


      .maiden-head {
        position: absolute;
        top: 38px;
        left: 52%;
        z-index: 2;
        width: 78px;
        height: 86px;
        transform: translateX(-50%) rotate(4deg);
        border-radius: 46% 46% 48% 48%;
        background: #ffe6d6;
        border: 2px solid rgba(79, 55, 45, 0.16);
      }


      .maiden-head::before,
      .maiden-head::after {
        content: "";
        position: absolute;
        top: -9px;
        width: 72px;
        height: 34px;
        border-radius: 50% 50% 46% 46%;
        background: #fff8f4;
        border: 2px solid rgba(79, 55, 45, 0.12);
      }


      .maiden-head::before {
        left: -58px;
        transform: rotate(14deg);
      }


      .maiden-head::after {
        right: -58px;
        transform: rotate(-14deg);
      }


      .maiden-eye {
        position: absolute;
        top: 42px;
        width: 9px;
        height: 15px;
        border-radius: 999px;
        background: #79c9d1;
        box-shadow: 0 0 0 2px rgba(66, 118, 125, 0.12);
      }


      .maiden-eye.left {
        left: 22px;
      }


      .maiden-eye.right {
        right: 22px;
      }


      .maiden-body {
        position: absolute;
        top: 120px;
        left: 54%;
        z-index: 2;
        width: 78px;
        height: 190px;
        transform: translateX(-50%) rotate(6deg);
        border-radius: 36px 34px 16px 16px;
        background: linear-gradient(120deg, #20201e 0%, #101012 68%, #3b3536 100%);
        border: 2px solid rgba(255, 232, 187, 0.42);
        box-shadow: inset 15px 0 0 rgba(255, 255, 255, 0.05);
      }


      .maiden-body::before {
        content: "";
        position: absolute;
        inset: 0 14px auto;
        height: 76px;
        border-radius: 0 0 40px 40px;
        border-bottom: 2px solid rgba(232, 185, 92, 0.7);
      }


      .maiden-skirt {
        position: absolute;
        top: 248px;
        left: 46%;
        z-index: 1;
        width: 178px;
        height: 212px;
        transform-origin: 50% 0;
        transform: translateX(-50%) rotate(5deg);
        border-radius: 16px 16px 90px 74px;
        background: linear-gradient(135deg, #141416, #292428 64%, #0f0f10);
        clip-path: polygon(38% 0, 78% 0, 100% 96%, 58% 84%, 0 100%, 18% 28%);
        animation: skirtSwing 900ms ease-in-out 1.05s 3;
      }


      .maiden-staff {
        position: absolute;
        left: -74px;
        top: 246px;
        z-index: 6;
        width: 440px;
        height: 8px;
        transform: rotate(-14deg);
        border-radius: 999px;
        background: #6b4226;
      }


      .maiden-staff::before {
        content: "";
        position: absolute;
        top: -22px;
        right: -24px;
        width: 46px;
        height: 46px;
        border: 7px solid #6b4226;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        transform: rotate(-24deg);
      }


      .maiden-arm {
        position: absolute;
        z-index: 4;
        width: 22px;
        height: 122px;
        border-radius: 999px;
        background: linear-gradient(#ffe6d6, #f3c8b5);
        transform-origin: 50% 10%;
      }


      .maiden-arm.reach {
        top: 138px;
        left: 58%;
        transform: rotate(-58deg);
      }


      .maiden-arm.hold {
        top: 156px;
        left: 60%;
        height: 122px;
        transform: rotate(50deg);
      }


      .maiden-hand {
        position: absolute;
        z-index: 7;
        top: 226px;
        left: 75%;
        width: 42px;
        height: 36px;
        border-radius: 48%;
        background: #f3c8b5;
        transform: rotate(9deg);
        box-shadow: -12px 5px 0 -8px #f3c8b5, 12px 5px 0 -8px #f3c8b5;
      }


      .maiden-leg {
        position: absolute;
        top: 410px;
        z-index: 0;
        width: 20px;
        height: 118px;
        border-radius: 999px;
        background: linear-gradient(#352c2f, #171416);
      }


      .maiden-leg.left {
        left: 49%;
        transform: rotate(5deg);
      }


      .maiden-leg.right {
        left: 61%;
        transform: rotate(-5deg);
      }


      .maiden-leg::after {
        content: "";
        position: absolute;
        left: -12px;
        bottom: -12px;
        width: 42px;
        height: 24px;
        border-radius: 16px 16px 10px 10px;
        background: #111;
      }


      .ritual-card,
      .result-modal {
        position: relative;
        z-index: 4;
        width: min(380px, calc(100vw - 32px));
        border: 1px solid rgba(119, 82, 48, 0.2);
        border-radius: 8px;
        background: rgba(255, 252, 245, 0.94);
        box-shadow: 0 28px 80px rgba(71, 46, 33, 0.22);
        backdrop-filter: blur(14px);
      }


      .ritual-card {
        width: min(340px, calc(100vw - 48px));
        margin-top: min(430px, 52vh);
        padding: 22px;
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        animation: cardIn 520ms ease 1.2s forwards;
      }


      .ritual-card.is-hidden,
      .lottery-stage.is-hidden,
      .result-modal.is-hidden {
        display: none;
      }


      .ritual-card h2,
      .result-modal h2 {
        margin: 0 0 14px;
        font-size: 24px;
        text-align: center;
        letter-spacing: 0;
      }


      .ritual-input {
        width: 100%;
        height: 48px;
        border: 1px solid rgba(119, 82, 48, 0.26);
        border-radius: 8px;
        background: #fff;
        color: #251b16;
        padding: 0 14px;
        text-align: center;
        outline: none;
      }


      .ritual-input:focus {
        border-color: #d23f31;
        box-shadow: 0 0 0 3px rgba(210, 63, 49, 0.16);
      }


      .fortune-config {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
      }


      .fortune-config label {
        display: grid;
        gap: 5px;
        color: #6f5943;
        font-size: 12px;
        font-weight: 700;
      }


      .focus-selector {
        position: relative;
      }


      .focus-trigger {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid rgba(119, 82, 48, 0.26);
        border-radius: 7px;
        background: #fff;
        color: #251b16;
        padding: 0 11px;
        cursor: pointer;
        text-align: left;
      }


      .focus-trigger::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid #7a6757;
        border-bottom: 2px solid #7a6757;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 180ms ease;
      }


      .focus-trigger[aria-expanded="true"]::after {
        transform: translateY(2px) rotate(225deg);
      }


      .focus-trigger:focus-visible {
        border-color: #d23f31;
        box-shadow: 0 0 0 3px rgba(210, 63, 49, 0.16);
        outline: none;
      }


      .focus-trigger span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }


      .focus-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 12;
        display: none;
        width: 100%;
        max-height: min(310px, 42vh);
        overflow-y: auto;
        border: 1px solid rgba(119, 82, 48, 0.25);
        border-radius: 8px;
        background: rgba(255, 253, 248, 0.98);
        padding: 7px;
        box-shadow: 0 18px 38px rgba(71, 46, 33, 0.2);
        backdrop-filter: blur(16px);
      }


      .focus-menu.is-open {
        display: grid;
        gap: 3px;
        animation: focusMenuIn 180ms ease both;
      }


      .focus-option {
        display: flex !important;
        grid-template-columns: none !important;
        min-height: 34px;
        align-items: center;
        gap: 9px !important;
        border-radius: 6px;
        color: #3d3028 !important;
        padding: 6px 8px;
        cursor: pointer;
        font-size: 13px !important;
        font-weight: 600 !important;
      }


      .focus-option:hover {
        background: rgba(210, 63, 49, 0.08);
      }


      .focus-option input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #d23f31;
      }


      .focus-option.is-general {
        border-bottom: 1px solid rgba(119, 82, 48, 0.14);
        margin-bottom: 3px;
        padding-bottom: 9px;
        font-weight: 800 !important;
      }


      @keyframes focusMenuIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
      }


      .ritual-card .primary-btn {
        width: 100%;
        margin-top: 12px;
      }


      .reroll-btn {
        display: inline-flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        border: 1px solid rgba(119, 82, 48, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.58);
        color: #5f5148;
        cursor: pointer;
      }


      .reroll-btn:hover {
        background: rgba(119, 82, 48, 0.1);
        color: #35251f;
      }


      .reroll-btn.is-hidden {
        display: none;
      }


      .lottery-stage {
        position: relative;
        z-index: 4;
        display: grid;
        place-items: center;
        min-height: 520px;
        width: min(520px, 100%);
      }


      .lottery-tube {
        position: relative;
        width: 230px;
        height: 310px;
        transform: rotate(-10deg);
        animation: tubeShake 820ms ease-in-out 5;
      }


      .lottery-stage.is-waiting .lottery-tube {
        animation: tubeShake 820ms ease-in-out infinite;
      }


      .ritual-thought {
        position: absolute;
        left: 50%;
        top: calc(50% + 106px);
        z-index: 9;
        width: min(470px, calc(100vw - 34px));
        min-height: 42px;
        transform: translateX(-50%);
        color: #fff3bd;
        font-family: "STKaiti", "KaiTi", "FangSong", serif;
        font-size: clamp(20px, 5.2vw, 27px);
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        letter-spacing: 0;
        opacity: 0;
        text-shadow:
          0 1px 2px rgba(37, 16, 5, 0.92),
          0 0 5px rgba(255, 255, 224, 0.96),
          0 0 13px rgba(255, 183, 52, 0.94),
          0 0 30px rgba(230, 92, 25, 0.74);
        filter: drop-shadow(0 0 12px rgba(255, 183, 52, 0.55));
        pointer-events: none;
      }


      .ritual-thought.is-showing {
        animation: ritualThoughtFade 2.8s ease-in-out both;
      }


      .ritual-thought.is-final {
        color: #fff8d8;
        text-shadow:
          0 1px 2px rgba(37, 16, 5, 0.95),
          0 0 7px #fff7c9,
          0 0 18px rgba(255, 194, 65, 0.98),
          0 0 38px rgba(229, 64, 29, 0.92);
        animation: ritualThoughtFinal 2.2s ease-in-out both;
      }


      .lottery-stick {
        position: absolute;
        left: 50%;
        bottom: 198px;
        width: 30px;
        height: 210px;
        transform-origin: 50% 100%;
        border-radius: 8px;
        background: linear-gradient(90deg, #b96518, #e49a34 48%, #9f5413);
        box-shadow: inset 0 0 0 1px rgba(96, 49, 9, 0.2);
      }


      .lottery-stick:nth-child(1) { transform: translateX(-92px) rotate(-19deg); }

      .lottery-stick:nth-child(2) { transform: translateX(-56px) rotate(-10deg); }

      .lottery-stick:nth-child(3) { transform: translateX(-20px) rotate(-3deg); }

      .lottery-stick:nth-child(4) { transform: translateX(16px) rotate(8deg); }

      .lottery-stick:nth-child(5) { transform: translateX(52px) rotate(16deg); }


      .lottery-cup {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 210px;
        height: 230px;
        transform: translateX(-50%);
        border-radius: 22px 22px 36px 36px;
        background: linear-gradient(110deg, #171312 0%, #302927 54%, #16110f 100%);
        box-shadow: inset 12px 0 18px rgba(255, 255, 255, 0.06), 0 26px 42px rgba(58, 35, 22, 0.24);
      }


      .lottery-cup::before {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: -20px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(#fff4e5, #8e8176 48%, #1d1816 52%);
      }


      .lottery-cup::after {
        content: "签";
        position: absolute;
        left: 50%;
        top: 78px;
        transform: translateX(-50%) rotate(-8deg);
        color: #ffb22d;
        font-size: 92px;
        font-weight: 900;
        font-family: "KaiTi", "STKaiti", serif;
        text-shadow: 0 4px 0 #59311d;
      }


      .falling-stick {
        position: absolute;
        left: calc(50% + 28px);
        top: 110px;
        z-index: 6;
        width: 34px;
        height: 220px;
        border-radius: 8px;
        opacity: 0;
        background: linear-gradient(90deg, #b96518, #e69d36 48%, #9a4d10);
        box-shadow: 0 14px 24px rgba(80, 43, 14, 0.22);
      }


      .lottery-stage.is-dropping .falling-stick {
        animation: stickFall 1s cubic-bezier(0.24, 0.9, 0.3, 1) forwards;
      }


      .result-actions .secondary-btn {
        width: 100%;
      }


      .mobile-share-sheet.is-hidden {
        display: none;
      }


      @keyframes maidenDrop {
        0% {
          transform: translateY(-112vh) rotate(-8deg);
        }
        72% {
          transform: translateY(-2vh) rotate(2deg);
        }
        100% {
          transform: translateY(-8vh) rotate(0);
        }
      }


      @keyframes skirtSwing {
        0%,
        100% {
          transform: translateX(-50%) rotate(0);
        }
        50% {
          transform: translateX(-50%) rotate(12deg);
        }
      }


      @keyframes dressSweep {
        0%,
        100% {
          transform: rotate(0deg) translateX(0);
        }
        50% {
          transform: rotate(3.5deg) translateX(8px);
        }
      }


      @keyframes cardIn {
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }


      @keyframes tubeShake {
        0%,
        100% {
          transform: rotate(-10deg) translateX(0);
        }
        25% {
          transform: rotate(-18deg) translateX(-12px);
        }
        55% {
          transform: rotate(6deg) translateX(10px);
        }
        78% {
          transform: rotate(-15deg) translateX(-7px);
        }
      }


      @keyframes stickFall {
        0% {
          opacity: 0;
          transform: translateY(0) rotate(-8deg);
        }
        10% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translate(28px, 315px) rotate(76deg);
        }
      }


      @keyframes ritualThoughtFade {
        0% { opacity: 0; transform: translate(-50%, 7px); }
        18%, 76% { opacity: 1; transform: translate(-50%, 0); }
        100% { opacity: 0; transform: translate(-50%, -4px); }
      }


      @keyframes ritualThoughtFinal {
        0% { opacity: 0; transform: translate(-50%, 7px) scale(0.98); }
        22%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
        100% { opacity: 0; transform: translate(-50%, -4px) scale(1); }
      }
@media (max-width: 900px){

        .primary-btn,
        .secondary-btn {
          width: 100%;
        }
}


      /* Modern detail experience */
      :root {
        --bg: #eaf2ef;
        --panel: #fffdf9;
        --panel-2: #edf2f7;
        --surface-mint: #e3f6ee;
        --surface-warm: #fff9f0;
        --text: #17201d;
        --muted: #60706a;
        --line: #cfdcd7;
        --accent: #f25f5c;
        --accent-2: #10a878;
        --cyan: #29b6d8;
        --sun: #f6c445;
        --danger: #df4353;
        --shadow: 0 18px 46px rgba(33, 70, 58, 0.1);
      }


      .mode-btn,
      .secondary-btn,
      .primary-btn,
      .carousel-nav {
        transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }


      .mode-btn:hover,
      .secondary-btn:hover,
      .carousel-nav:hover {
        transform: translateY(-2px);
        border-color: var(--accent-2);
        box-shadow: 0 10px 24px rgba(16, 168, 120, 0.14);
      }


      .mode-btn:hover svg,
      .secondary-btn:hover svg {
        animation: iconNudge 520ms ease;
      }


      .primary-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(242, 95, 92, 0.25);
      }


      /* Matching fortune animations */
      .ritual-screen {
        background: #dfece8;
        color: #17201d;
      }


      .maiden-stage {
        display: none;
      }


      .ritual-card,
      .result-modal {
        border-color: #c7d8d2;
        background: rgba(255, 253, 249, 0.96);
        color: #17201d;
        box-shadow: 0 26px 70px rgba(31, 69, 56, 0.18);
      }


      .ritual-card {
        width: min(390px, calc(100vw - 32px));
        margin-top: 0;
        padding: 24px;
      }


      .ritual-input,
      .fortune-select {
        border-color: #c7d8d2;
        color: #17201d;
      }


      .fortune-config label,
      .result-status {
        color: #60706a;
      }


      .lottery-stage {
        width: min(620px, 100%);
        min-height: 560px;
      }


      .zhouyi-animation {
        position: relative;
        width: 260px;
        height: 390px;
      }


      .lottery-tube {
        position: absolute;
        left: 15px;
        top: 42px;
      }


      .lottery-stage:not(.is-waiting) .lottery-tube {
        animation: none;
      }


      .lottery-stage[data-format="tarot"] .zhouyi-animation {
        display: none;
      }


      .lottery-stage[data-format="tarot"] .tarot-animation {
        display: block;
      }


      .lottery-stage.is-waiting[data-format="tarot"] .tarot-card:nth-child(1) {
        animation: tarotShuffleLeft 1.55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }


      .lottery-stage.is-waiting[data-format="tarot"] .tarot-card:nth-child(2) {
        animation: tarotShuffleCenter 1.55s cubic-bezier(0.4, 0, 0.2, 1) 140ms infinite;
      }


      .lottery-stage.is-waiting[data-format="tarot"] .tarot-card:nth-child(3) {
        animation: tarotShuffleRight 1.55s cubic-bezier(0.4, 0, 0.2, 1) 280ms infinite;
      }


      .lottery-stage.is-revealing[data-format="tarot"] .tarot-drawn-card {
        animation: tarotReveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }


      .lottery-stage.is-revealing[data-format="tarot"] .tarot-drawn-card::before,
      .lottery-stage.is-revealing[data-format="tarot"] .tarot-drawn-card::after {
        animation: tarotBackFade 1.15s linear forwards;
      }


      .lottery-stage.is-revealing[data-format="tarot"] .tarot-face {
        animation: tarotFaceShow 1.15s linear forwards;
      }


      .lottery-stage[data-format="tarot"] .falling-stick {
        display: none;
      }


      .ritual-thought {
        top: calc(50% + 150px);
        color: #fff9d8;
        font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: clamp(19px, 4.8vw, 25px);
        text-shadow: 0 0 8px rgba(16, 168, 120, 0.95), 0 0 22px rgba(41, 182, 216, 0.72);
        filter: none;
      }


      .ritual-thought.is-final {
        color: #fff9d8;
        text-shadow: 0 0 8px rgba(242, 95, 92, 0.96), 0 0 26px rgba(246, 196, 69, 0.88);
      }


      @keyframes hourCardNext {
        from { opacity: 0; transform: translateX(74px) rotateY(-4deg) scale(0.97); }
        to { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
      }


      @keyframes hourCardPrev {
        from { opacity: 0; transform: translateX(-74px) rotateY(4deg) scale(0.97); }
        to { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
      }


      @keyframes iconNudge {
        0%, 100% { transform: translateY(0) rotate(0); }
        40% { transform: translateY(-2px) rotate(-7deg); }
        70% { transform: translateY(0) rotate(4deg); }
      }


      @keyframes iconPulse {
        0%, 100% { opacity: 0.65; transform: scale(0.86); }
        50% { opacity: 1; transform: scale(1.22); }
      }


      @keyframes tarotShuffleLeft {
        0%, 100% { transform: translateX(-50%) rotate(-12deg); }
        42% { transform: translateX(-108%) translateY(-12px) rotate(-18deg); }
        70% { transform: translateX(-12%) translateY(6px) rotate(5deg); }
      }


      @keyframes tarotShuffleCenter {
        0%, 100% { transform: translateX(-50%) rotate(0); }
        45% { transform: translateX(14%) translateY(-18px) rotate(8deg); }
        72% { transform: translateX(-96%) translateY(5px) rotate(-6deg); }
      }


      @keyframes tarotShuffleRight {
        0%, 100% { transform: translateX(-50%) rotate(12deg); }
        48% { transform: translateX(-4%) translateY(-10px) rotate(19deg); }
        74% { transform: translateX(-112%) translateY(8px) rotate(-4deg); }
      }


      @keyframes tarotReveal {
        0% { opacity: 0; transform: translateX(-50%) translateY(32px) rotateY(0) scale(0.88); }
        44% { opacity: 1; transform: translateX(-50%) translateY(-28px) rotateY(0) scale(1.05); }
        50% { opacity: 1; transform: translateX(-50%) translateY(-22px) rotateY(90deg) scale(1.03); }
        51% { opacity: 1; transform: translateX(-50%) translateY(-22px) rotateY(-90deg) scale(1.03); }
        100% { opacity: 1; transform: translateX(-50%) translateY(-8px) rotateY(0) scale(1); }
      }


      @keyframes tarotBackFade {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
      }


      @keyframes tarotFaceShow {
        0%, 49% { opacity: 0; }
        50%, 100% { opacity: 1; }
      }
@media (max-width: 640px){

        .ritual-thought {
          top: calc(50% + 132px);
        }
}


      .maiden-stage {
        display: grid;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 360ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
      }


      .ritual-screen {
        background: #f7f2e8;
      }


      .ritual-card {
        width: min(340px, calc(100vw - 48px));
        margin-top: min(430px, 52vh);
      }


      .ritual-screen.is-drawing .maiden-stage {
        opacity: 0;
        transform: translateY(-24px) scale(0.96);
      }


      @keyframes brandFloat {
        0%, 100% { transform: translateY(0) rotate(-2deg); }
        50% { transform: translateY(-4px) rotate(2deg); }
      }


      @keyframes drawStateCards {
        0%, 100% { transform: translateX(0) rotate(0); }
        45% { transform: translateX(3px) rotate(5deg); }
        70% { transform: translateX(-2px) rotate(-3deg); }
      }


      @keyframes iconSpark {
        0%, 100% { transform: scale(0.92) rotate(0); opacity: 0.72; }
        50% { transform: scale(1.12) rotate(12deg); opacity: 1; }
      }


      @keyframes iconOrbit {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        40% { transform: translate(3px, -3px) rotate(12deg); }
        70% { transform: translate(-2px, 1px) rotate(-7deg); }
      }


      .maiden-stage {
        transform: translateY(-24px) scale(1.18);
        transform-origin: center bottom;
      }


      .ritual-card {
        margin-top: min(500px, 55vh);
      }


      .ritual-screen.is-drawing .maiden-stage {
        transform: translateY(-52px) scale(1.12);
      }


      @keyframes progressGrow {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
      }
@media (max-width: 640px){

        .ritual-card {
          margin-top: min(430px, 50vh);
        }
}


      .maiden-stage {
        transform: translateY(30px) scale(1.06);
      }


      .ritual-screen.is-drawing .maiden-stage {
        transform: translateY(0) scale(1);
      }


      @keyframes brandYinFloat {
        0%, 100% { transform: translateY(0) rotate(-5deg); }
        50% { transform: translateY(-3px) rotate(2deg); }
      }


      @keyframes brandStarFloat {
        0%, 100% { transform: translateY(0) rotate(4deg); }
        50% { transform: translateY(3px) rotate(-2deg); }
      }


      @keyframes sunRiseSet {
        0%, 100% { opacity: 0.45; transform: translate(-20px, 12px) scale(0.78); }
        38% { opacity: 1; transform: translate(-5px, -5px) scale(1); }
        62% { opacity: 1; transform: translate(5px, -5px) scale(1); }
        82% { opacity: 0.72; transform: translate(16px, 6px) scale(0.88); }
      }
@media (max-width: 760px){
        .maiden-stage {
          transform: translateY(-36px) scale(0.84);
        }


        .ritual-screen.is-drawing .maiden-stage {
          transform: translateY(-60px) scale(0.8);
        }


        .ritual-card {
          margin-top: min(410px, 56vh);
        }
}


      @keyframes patternFloat {
        from { transform: translate3d(-8px, 3px, 0) rotate(-7deg); }
        to { transform: translate3d(12px, -5px, 0) rotate(-4deg); }
      }


      @keyframes hourCardNext {
        0% { opacity: 0; transform: translateX(118px) rotateY(-9deg) scale(0.955); }
        72% { opacity: 1; transform: translateX(-10px) rotateY(1.4deg) scale(1.006); }
        100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
      }


      @keyframes hourCardPrev {
        0% { opacity: 0; transform: translateX(-118px) rotateY(9deg) scale(0.955); }
        72% { opacity: 1; transform: translateX(10px) rotateY(-1.4deg) scale(1.006); }
        100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
      }


      @keyframes journeySunGlow {
        0%, 100% { box-shadow: 0 0 0 6px rgba(255, 220, 116, 0.1), 0 0 18px rgba(237, 167, 25, 0.4); }
        50% { box-shadow: 0 0 0 10px rgba(255, 220, 116, 0.15), 0 0 30px rgba(237, 167, 25, 0.62); }
      }


      @keyframes journeyMoonGlow {
        0%, 100% { box-shadow: 0 0 0 6px rgba(157, 187, 231, 0.08), 0 0 18px rgba(83, 121, 180, 0.32); }
        50% { box-shadow: 0 0 0 9px rgba(157, 187, 231, 0.13), 0 0 28px rgba(83, 121, 180, 0.5); }
      }


      @keyframes cardAtmosphere {
        from { background-position: 0% 50%, 0 0, 0 0; }
        to { background-position: 100% 50%, 0 0, 0 0; }
      }


      @keyframes cardLightSweep {
        0%, 18% { transform: translateX(0) skewX(-15deg); opacity: 0; }
        34% { opacity: 0.8; }
        55%, 100% { transform: translateX(650%) skewX(-15deg); opacity: 0; }
      }


      @keyframes watermarkDrift {
        from { transform: translate(-8px, 4px) rotate(-12deg); opacity: 0.64; }
        to { transform: translate(12px, -8px) rotate(-8deg); opacity: 1; }
      }


      @keyframes scoreSurface {
        0%, 35% { background-position: 120% 0; }
        70%, 100% { background-position: -120% 0; }
      }


      @keyframes scoreIconBreath {
        0%, 100% { opacity: 0.14; transform: translateY(0) scale(0.94); }
        50% { opacity: 0.25; transform: translateY(-3px) scale(1.04); }
      }


      /* Keep the entry form and its long focus menu reachable on every viewport. */
      .ritual-screen:not(.is-drawing) {
        place-items: start center;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
      }


      .ritual-screen:not(.is-drawing) .ritual-card {
        margin-bottom: max(32px, env(safe-area-inset-bottom));
      }


      .focus-menu {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform-origin: top center;
      }


      .focus-menu.opens-up {
        top: auto;
        bottom: calc(100% + 6px);
        transform-origin: bottom center;
      }