@font-face {

      font-family: 'Lora';

      src: url('../fonts/Lora-Regular.ttf') format('truetype');

      font-weight: 400;

    }

    @font-face {

      font-family: 'Lora';

      src: url('../fonts/Lora-Bold.ttf') format('truetype');

      font-weight: 700;

    }

    @font-face {

      font-family: 'WorkSans';

      src: url('../fonts/WorkSans-Regular.ttf') format('truetype');

      font-weight: 400;

    }

    @font-face {

      font-family: 'WorkSans';

      src: url('../fonts/WorkSans-Bold.ttf') format('truetype');

      font-weight: 700;

    }



    :root {

      --bg: #FDF8F3;

      --bg2: #F5EDE4;

      --bg3: #EDE4D8;

      --ink: #3D3229;

      --muted: #8C7E6F;

      --rule: #E8DDD0;

      --accent: #D4A574;

      --accent-light: rgba(212,165,116,0.15);

      --accent2: #B8A9C9;

      --accent2-light: rgba(184,169,201,0.2);

      --warm: #E8B4B8;

      --warm-light: rgba(232,180,184,0.2);

      --sage: #B5C9B3;

      --sage-light: rgba(181,201,179,0.2);

      --sky: #A8C5D8;

      --sky-light: rgba(168,197,216,0.2);

      --gold: #E8C98E;

      --font: 'WorkSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;

      --font-serif: 'Lora', 'Songti SC', serif;

      --radius: 16px;

      --shadow: 0 8px 32px rgba(61,50,41,0.08);

      --shadow-lg: 0 16px 48px rgba(61,50,41,0.12);

    }



    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { font-size: 16px; scroll-behavior: smooth; }

    body {

      font-family: var(--font);

      color: var(--ink);

      background: var(--bg);

      line-height: 1.8;

      overflow-x: hidden;

    }



    /* ===== HERO ===== */

    .hero {

      position: relative;

      width: 100%;

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      text-align: center;

      overflow: hidden;

      padding-top: 60px;

    }

    .hero-img-wrap {

      position: absolute;

      top: 0; left: 0; right: 0; bottom: 0;

      z-index: 0;

    }

    .hero-img-wrap img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      opacity: 0.8;

    }

    .hero-overlay {

      position: absolute;

      top: 0; left: 0; right: 0; bottom: 0;

      background: linear-gradient(180deg,

        rgba(253,248,243,0.15) 0%,

        rgba(253,248,243,0.5) 50%,

        rgba(253,248,243,0.98) 100%

      );

      z-index: 1;

    }

    .hero-content {

      position: relative;

      z-index: 2;

      max-width: 640px;

      padding: 2rem;

    }

    .hero-tag {

      display: inline-flex;

      align-items: center;

      gap: 0.4rem;

      font-size: 0.82rem;

      letter-spacing: 0.1em;

      color: var(--accent);

      background: var(--accent-light);

      padding: 0.4rem 1.1rem;

      border-radius: 2rem;

      margin-bottom: 1.5rem;

    }

    .hero h1 {

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

      font-size: clamp(2.5rem, 6vw, 4rem);

      font-weight: 700;

      color: var(--ink);

      line-height: 1.2;

      margin-bottom: 1rem;

    }

    .hero-subtitle {

      font-size: clamp(1rem, 2.5vw, 1.25rem);

      color: var(--muted);

      margin-bottom: 0.5rem;

    }

    .hero-desc {

      font-size: 0.95rem;

      color: var(--muted);

      max-width: 480px;

      margin: 0 auto 2rem;

      line-height: 1.9;

    }

    .hero-actions {

      display: flex;

      gap: 1rem;

      justify-content: center;

      flex-wrap: wrap;

    }

    .btn {

      display: inline-flex;

      align-items: center;

      gap: 0.5rem;

      padding: 0.8rem 2rem;

      border-radius: 3rem;

      font-size: 0.95rem;

      font-weight: 600;

      text-decoration: none;

      cursor: pointer;

      border: none;

      transition: all 0.3s ease;

      font-family: var(--font);

    }

    .btn-primary {

      background: var(--accent);

      color: white;

      box-shadow: 0 4px 16px rgba(212,165,116,0.35);

    }

    .btn-primary:hover {

      transform: translateY(-2px);

      box-shadow: 0 8px 24px rgba(212,165,116,0.45);

    }

    .btn-outline {

      background: transparent;

      color: var(--ink);

      border: 1.5px solid var(--rule);

    }

    .btn-outline:hover {

      border-color: var(--accent);

      background: var(--accent-light);

    }

    .scroll-hint {

      position: absolute;

      bottom: 2rem;

      left: 50%;

      transform: translateX(-50%);

      z-index: 2;

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 0.4rem;

      color: var(--muted);

      font-size: 0.78rem;

      animation: float 3s ease-in-out infinite;

      cursor: pointer;

    }

    @keyframes float {

      0%, 100% { transform: translateX(-50%) translateY(0); }

      50% { transform: translateX(-50%) translateY(10px); }

    }



    /* ===== SECTIONS ===== */

    .section {

      max-width: 1100px;

      margin: 0 auto;

      padding: 5rem 2rem;

    }

    .section-alt {

      background: var(--bg2);

      max-width: 100%;

    }

    .section-alt .section-inner {

      max-width: 1100px;

      margin: 0 auto;

      padding: 5rem 2rem;

    }

    .section-header {

      text-align: center;

      margin-bottom: 3rem;

    }

    .section-header h2 {

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

      font-size: clamp(1.6rem, 3.5vw, 2.2rem);

      margin-bottom: 0.5rem;

    }

    .section-header .sub {

      color: var(--muted);

      font-size: 0.95rem;

    }

    .divider {

      width: 48px;

      height: 3px;

      background: var(--accent);

      border-radius: 2px;

      margin: 0 auto 1rem;

    }



    /* ===== TREE CANVAS ===== */

    .tree-wrapper {

      position: relative;

      background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);

      border-radius: var(--radius);

      overflow: visible;

      min-height: 500px;

    }

    .tree-bg {

      position: absolute;

      top: 0; left: 0; right: 0; bottom: 0;

      opacity: 0.3;

      z-index: 0;

      pointer-events: none;

      border-radius: var(--radius);

      overflow: hidden;

    }

    .tree-bg img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }

    .tree-canvas {

      position: relative;

      z-index: 1;

      width: 100%;

      min-height: 500px;

    }



    /* ===== TREE SVG ===== */

    .tree-svg-wrap {

      position: absolute;

      top: 0; left: 0;

      width: 100%;

      height: 100%;

      z-index: 0;

      pointer-events: none;

    }

    .tree-svg-wrap svg {

      width: 100%;

      height: 100%;

    }



    /* ===== FRUIT ON TREE ===== */

    .fruit {

      position: absolute;

      width: 36px;

      height: 36px;

      cursor: pointer;

      transition: all 0.3s ease;

      z-index: 10;

      animation: fruitAppear 0.6s ease-out both;

      filter: drop-shadow(0 2px 6px rgba(212,165,116,0.3));

    }

    .fruit:hover {

      transform: scale(1.3);

      filter: drop-shadow(0 4px 12px rgba(212,165,116,0.5));

    }

    .fruit-glow {

      position: absolute;

      top: 50%; left: 50%;

      transform: translate(-50%,-50%);

      width: 50px;

      height: 50px;

      border-radius: 50%;

      background: radial-gradient(circle, rgba(232,201,142,0.4) 0%, transparent 70%);

      animation: pulse 2s ease-in-out infinite;

      pointer-events: none;

    }

    .fruit-body {

      position: absolute;

      top: 50%; left: 50%;

      transform: translate(-50%,-50%);

      width: 36px;

      height: 36px;

      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

      pointer-events: none;

    }

    .fruit-stem {

      position: absolute;

      top: -6px;

      left: 50%;

      transform: translateX(-50%);

      width: 2px;

      height: 8px;

      background: #8B7355;

      border-radius: 1px;

    }

    .fruit-leaf {

      position: absolute;

      top: -8px;

      left: 55%;

      width: 10px;

      height: 6px;

      background: var(--sage);

      border-radius: 0 50% 50% 0;

      transform: rotate(-15deg);

    }

    /* mood colors */

    .mood-sad .fruit-body { background: linear-gradient(135deg, #A8C5D8, #8BAEC4); }

    .mood-anxious .fruit-body { background: linear-gradient(135deg, #E8B4B8, #D9A0A5); }

    .mood-lonely .fruit-body { background: linear-gradient(135deg, #B8A9C9, #A495B8); }

    .mood-hopeful .fruit-body { background: linear-gradient(135deg, #E8C98E, #D4B574); }

    .mood-angry .fruit-body { background: linear-gradient(135deg, #E8A0A0, #D48E8E); }

    .mood-grateful .fruit-body { background: linear-gradient(135deg, #B5C9B3, #9FB89D); }

    .mood-default .fruit-body { background: linear-gradient(135deg, var(--accent), #C49468); }



    @keyframes fruitAppear {

      0% { opacity: 0; transform: scale(0) translateY(-20px); }

      50% { opacity: 1; transform: scale(1.15) translateY(0); }

      100% { opacity: 1; transform: scale(1) translateY(0); }

    }

    @keyframes pulse {

      0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }

      50% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }

    }



    /* ===== TREE SHAKE ===== */

    @keyframes treeShake {

      0% { transform: rotate(0deg); }

      10% { transform: rotate(-2deg) translateY(-2px); }

      20% { transform: rotate(2.5deg) translateY(-1px); }

      30% { transform: rotate(-2.5deg); }

      40% { transform: rotate(2deg); }

      50% { transform: rotate(-1.5deg); }

      60% { transform: rotate(1.5deg); }

      70% { transform: rotate(-1deg); }

      80% { transform: rotate(0.8deg); }

      90% { transform: rotate(-0.3deg); }

      100% { transform: rotate(0deg); }

    }

    .tree-shaking {

      animation: treeShake 0.8s ease-out;

    }

    /* Shake the SVG tree only, origin at trunk bottom */

    .tree-shaking .tree-svg-wrap {

      transform-origin: 50% 95%;

      animation: treeShake 0.8s ease-out;

    }



    /* ===== FALLING FRUIT (arc) ===== */

    .falling-fruit {

      position: fixed;

      pointer-events: none;

      z-index: 50;

      animation: fruitDrop 1.2s cubic-bezier(0.25, 0, 0.6, 1) forwards;

    }

    .falling-fruit-inner {

      width: 36px;

      height: 36px;

      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

      position: relative;

    }

    .falling-fruit-inner::before {

      content: '';

      position: absolute;

      top: -5px;

      left: 50%;

      transform: translateX(-50%);

      width: 2px;

      height: 7px;

      background: #8B7355;

      border-radius: 1px;

    }

    .falling-fruit-inner::after {

      content: '';

      position: absolute;

      top: -7px;

      left: 55%;

      width: 9px;

      height: 5px;

      background: var(--sage);

      border-radius: 0 50% 50% 0;

      transform: rotate(-15deg);

    }

    /* shadow on ground */

    .falling-fruit-shadow {

      position: absolute;

      bottom: -8px;

      left: 50%;

      transform: translateX(-50%);

      width: 24px;

      height: 6px;

      border-radius: 50%;

      background: rgba(61,50,41,0.15);

      animation: shadowGrow 1.2s ease-out forwards;

    }

    @keyframes fruitDrop {

      0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }

      50% { opacity: 1; transform: translateY(60px) translateX(15px) rotate(90deg) scale(0.95); }

      75% { transform: translateY(100px) translateX(-5px) rotate(160deg) scale(0.9); }

      85% { transform: translateY(110px) translateX(2px) rotate(175deg) scale(0.88); opacity: 0.9; }

      100% { opacity: 0.7; transform: translateY(115px) rotate(180deg) scale(0.85); }

    }

    @keyframes shadowGrow {

      0% { transform: translateX(-50%) scale(0.3); opacity: 0; }

      85% { transform: translateX(-50%) scale(1); opacity: 0.6; }

      100% { transform: translateX(-50%) scale(1.2); opacity: 0.8; }

    }



    /* ===== PICKED NOTIFICATION CARD ===== */

    .picked-notification {

      position: fixed;

      bottom: 2rem;

      left: 50%;

      transform: translateX(-50%) translateY(100px);

      background: var(--bg);

      border: 1.5px solid var(--rule);

      border-radius: 20px;

      padding: 1.2rem 1.5rem;

      box-shadow: 0 12px 40px rgba(61,50,41,0.15);

      z-index: 250;

      display: flex;

      align-items: center;

      gap: 1rem;

      max-width: 380px;

      width: calc(100% - 2rem);

      opacity: 0;

      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

      cursor: pointer;

    }

    .picked-notification.show {

      transform: translateX(-50%) translateY(0);

      opacity: 1;

    }

    .picked-notification:hover {

      border-color: var(--accent);

      box-shadow: 0 12px 40px rgba(212,165,116,0.2);

    }

    .picked-notification:active {

      transform: translateX(-50%) translateY(0) scale(0.98);

    }

    .picked-fruit-icon {

      width: 48px;

      height: 48px;

      border-radius: 50%;

      flex-shrink: 0;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 1.5rem;

      animation: pickedBounce 0.6s ease-out 0.5s both;

    }

    .picked-fruit-icon.sad { background: var(--sky-light); }

    .picked-fruit-icon.anxious { background: var(--warm-light); }

    .picked-fruit-icon.lonely { background: var(--accent2-light); }

    .picked-fruit-icon.hopeful { background: rgba(232,201,142,0.25); }

    .picked-fruit-icon.angry { background: rgba(232,160,160,0.2); }

    .picked-fruit-icon.grateful { background: var(--sage-light); }

    .picked-fruit-icon.default { background: var(--accent-light); }

    @keyframes pickedBounce {

      0% { transform: scale(0); }

      60% { transform: scale(1.2); }

      100% { transform: scale(1); }

    }

    .picked-info {

      flex: 1;

      min-width: 0;

    }

    .picked-title {

      font-size: 0.95rem;

      font-weight: 600;

      color: var(--ink);

      margin-bottom: 0.2rem;

    }

    .picked-subtitle {

      font-size: 0.8rem;

      color: var(--muted);

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }

    .picked-action {

      flex-shrink: 0;

      width: 36px;

      height: 36px;

      border-radius: 50%;

      background: var(--accent);

      color: white;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 0.85rem;

      transition: all 0.2s;

    }

    .picked-notification:hover .picked-action {

      transform: scale(1.1);

      box-shadow: 0 3px 10px rgba(212,165,116,0.4);

    }



    /* ===== OLD FALLING PARTICLE (kept for leaves) ===== */

    .falling-leaf {

      position: fixed;

      pointer-events: none;

      z-index: 200;

      animation: leafFall 1.5s ease-in forwards;

    }

    .falling-leaf span {

      display: block;

      font-size: 1.5rem;

      animation: leafSpin 1.5s linear infinite;

    }

    @keyframes leafFall {

      0% { opacity: 1; transform: translateY(0) rotate(0deg); }

      100% { opacity: 0; transform: translateY(200px) rotate(180deg); }

    }

    @keyframes leafSpin {

      0% { transform: rotate(0deg); }

      100% { transform: rotate(360deg); }

    }



    /* ===== MOOD TAGS ===== */

    .mood-filters {

      display: flex;

      flex-wrap: wrap;

      gap: 0.5rem;

      justify-content: center;

      margin-bottom: 2rem;

    }

    .mood-tag {

      padding: 0.4rem 1rem;

      border-radius: 2rem;

      font-size: 0.82rem;

      font-weight: 500;

      cursor: pointer;

      border: 1.5px solid var(--rule);

      background: var(--bg);

      color: var(--muted);

      transition: all 0.3s ease;

    }

    .mood-tag:hover { border-color: var(--accent); color: var(--accent); }

    .mood-tag.active {

      background: var(--accent);

      color: white;

      border-color: var(--accent);

    }



    /* ===== CARD MODAL ===== */

    .modal-overlay {

      position: fixed;

      top: 0; left: 0; right: 0; bottom: 0;

      background: rgba(61,50,41,0.4);

      backdrop-filter: blur(8px);

      z-index: 300;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 1.5rem;

      opacity: 0;

      visibility: hidden;

      transition: all 0.3s ease;

    }

    .modal-overlay.open {

      opacity: 1;

      visibility: visible;

    }

    .modal-card {

      background: var(--bg);

      border-radius: 20px;

      padding: 2.5rem;

      max-width: 480px;

      width: 100%;

      box-shadow: var(--shadow-lg);

      transform: translateY(20px) scale(0.95);

      transition: all 0.3s ease;

      position: relative;

    }

    .modal-overlay.open .modal-card {

      transform: translateY(0) scale(1);

    }

    .modal-close {

      position: absolute;

      top: 1rem; right: 1rem;

      width: 36px; height: 36px;

      border-radius: 50%;

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

      background: var(--bg);

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 1.1rem;

      color: var(--muted);

      transition: all 0.2s;

    }

    .modal-close:hover {

      background: var(--bg2);

      color: var(--ink);

    }

    .modal-mood-badge {

      display: inline-flex;

      align-items: center;

      gap: 0.3rem;

      padding: 0.3rem 0.8rem;

      border-radius: 2rem;

      font-size: 0.78rem;

      font-weight: 500;

      margin-bottom: 1rem;

    }

    .modal-mood-badge.sad { background: var(--sky-light); color: #7BA3B8; }

    .modal-mood-badge.anxious { background: var(--warm-light); color: #C98A8E; }

    .modal-mood-badge.lonely { background: var(--accent2-light); color: #957FA8; }

    .modal-mood-badge.hopeful { background: rgba(232,201,142,0.25); color: #B89B5A; }

    .modal-mood-badge.angry { background: rgba(232,160,160,0.2); color: #C07878; }

    .modal-mood-badge.grateful { background: var(--sage-light); color: #7A9A78; }

    .modal-mood-badge.default { background: var(--accent-light); color: var(--accent); }

    .modal-author {

      font-size: 0.85rem;

      color: var(--muted);

      margin-bottom: 1rem;

    }

    .modal-content {

      font-size: 1.05rem;

      line-height: 1.9;

      color: var(--ink);

      margin-bottom: 1.5rem;

      min-height: 60px;

    }

    .modal-time {

      font-size: 0.78rem;

      color: var(--muted);

      opacity: 0.7;

      margin-bottom: 1.5rem;

    }

    .reply-area {

      margin-top: 1rem;

      padding-top: 1.5rem;

      border-top: 1px solid var(--rule);

    }

    .reply-area label {

      font-size: 0.9rem;

      font-weight: 600;

      display: block;

      margin-bottom: 0.5rem;

    }

    .reply-textarea {

      width: 100%;

      min-height: 100px;

      padding: 0.8rem 1rem;

      border: 1.5px solid var(--rule);

      border-radius: 12px;

      background: var(--bg2);

      color: var(--ink);

      font-family: var(--font);

      font-size: 0.9rem;

      line-height: 1.7;

      resize: vertical;

      transition: border-color 0.3s;

    }

    .reply-textarea:focus {

      outline: none;

      border-color: var(--accent);

    }

    .reply-textarea::placeholder { color: var(--muted); opacity: 0.6; }

    .reply-actions {

      display: flex;

      gap: 0.75rem;

      margin-top: 1rem;

      justify-content: flex-end;

    }

    .btn-sm {

      padding: 0.5rem 1.3rem;

      font-size: 0.85rem;

      border-radius: 2rem;

    }

    .btn-warm {

      background: var(--warm);

      color: white;

      box-shadow: 0 3px 10px rgba(232,180,184,0.3);

    }

    .btn-warm:hover {

      box-shadow: 0 6px 16px rgba(232,180,184,0.4);

      transform: translateY(-1px);

    }



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

    .submit-card {

      background: var(--bg);

      border-radius: var(--radius);

      padding: 2.5rem;

      box-shadow: var(--shadow);

      max-width: 600px;

      margin: 0 auto;

    }

    .form-group {

      margin-bottom: 1.5rem;

    }

    .form-label {

      display: block;

      font-size: 0.9rem;

      font-weight: 600;

      margin-bottom: 0.5rem;

      color: var(--ink);

    }

    .form-input, .form-textarea {

      width: 100%;

      padding: 0.8rem 1rem;

      border: 1.5px solid var(--rule);

      border-radius: 12px;

      background: var(--bg2);

      color: var(--ink);

      font-family: var(--font);

      font-size: 0.9rem;

      line-height: 1.7;

      transition: border-color 0.3s;

    }

    .form-input:focus, .form-textarea:focus {

      outline: none;

      border-color: var(--accent);

    }

    .form-input::placeholder, .form-textarea::placeholder {

      color: var(--muted); opacity: 0.6;

    }

    .form-textarea {

      min-height: 140px;

      resize: vertical;

    }

    .form-mood-select {

      display: flex;

      flex-wrap: wrap;

      gap: 0.5rem;

    }

    .mood-option {

      padding: 0.4rem 1rem;

      border-radius: 2rem;

      font-size: 0.82rem;

      cursor: pointer;

      border: 1.5px solid var(--rule);

      background: var(--bg);

      color: var(--muted);

      transition: all 0.3s;

    }

    .mood-option:hover { border-color: var(--accent); }

    .mood-option.selected {

      border-color: var(--accent);

      background: var(--accent-light);

      color: var(--accent);

      font-weight: 600;

    }

    .char-count {

      text-align: right;

      font-size: 0.78rem;

      color: var(--muted);

      margin-top: 0.3rem;

    }

    .char-count.warn { color: var(--warm); }



    /* ===== TOAST ===== */

    .toast {

      position: fixed;

      bottom: 2rem;

      left: 50%;

      transform: translateX(-50%) translateY(100px);

      background: var(--ink);

      color: white;

      padding: 0.8rem 1.5rem;

      border-radius: 3rem;

      font-size: 0.9rem;

      z-index: 400;

      opacity: 0;

      transition: all 0.4s ease;

      box-shadow: 0 4px 16px rgba(0,0,0,0.2);

      display: flex;

      align-items: center;

      gap: 0.5rem;

    }

    .toast.show {

      transform: translateX(-50%) translateY(0);

      opacity: 1;

    }



    /* ===== TREE INFO BAR ===== */

    .tree-info {

      display: flex;

      justify-content: center;

      gap: 2rem;

      padding: 1rem 2rem;

      background: var(--bg);

      border-radius: 0 0 var(--radius) var(--radius);

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

      border-top: none;

      position: relative;

      z-index: 2;

    }

    .tree-stat {

      text-align: center;

    }

    .tree-stat-num {

      font-size: 1.4rem;

      font-weight: 700;

      color: var(--accent);

    }

    .tree-stat-label {

      font-size: 0.75rem;

      color: var(--muted);

    }



    /* ===== HOW TO USE ===== */

    .how-grid {

      display: grid;

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

      gap: 2rem;

    }

    .how-card {

      text-align: center;

      padding: 2rem 1.5rem;

      background: var(--bg);

      border-radius: var(--radius);

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

      transition: all 0.3s;

    }

    .how-card:hover {

      transform: translateY(-4px);

      box-shadow: var(--shadow);

    }

    .how-icon {

      width: 56px;

      height: 56px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      margin: 0 auto 1rem;

      font-size: 1.6rem;

    }

    .how-card:nth-child(1) .how-icon { background: var(--accent-light); }

    .how-card:nth-child(2) .how-icon { background: var(--accent2-light); }

    .how-card:nth-child(3) .how-icon { background: var(--sage-light); }

    .how-card h3 {

      font-size: 1.05rem;

      margin-bottom: 0.4rem;

    }

    .how-card p {

      font-size: 0.85rem;

      color: var(--muted);

      line-height: 1.7;

    }



    /* ===== QUOTE ===== */

    .quote-section {

      text-align: center;

      padding: 5rem 2rem;

      background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);

    }

    .quote-text {

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

      font-size: clamp(1.2rem, 2.8vw, 1.6rem);

      font-style: italic;

      max-width: 640px;

      margin: 0 auto 1rem;

      line-height: 1.8;

      color: var(--ink);

    }

    .quote-author {

      color: var(--muted);

      font-size: 0.9rem;

    }



    /* ===== FOOTER ===== */

    footer {

      text-align: center;

      padding: 2rem;

      color: var(--muted);

      font-size: 0.82rem;

      border-top: 1px solid var(--rule);

    }

    footer a {

      color: var(--muted);

      text-decoration: none;

    }



    /* ===== MOBILE ===== */

    @media (max-width: 768px) {

      .hero-actions { flex-direction: column; align-items: center; }

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

      .tree-wrapper { min-height: 380px; }

      .tree-canvas { min-height: 380px; }

      .fruit { width: 28px; height: 28px; }

      .fruit-body { width: 28px; height: 28px; font-size: 0.7rem; }

      .fruit-glow { width: 40px; height: 40px; }

      .tree-info { gap: 1rem; }

      .modal-card { padding: 1.5rem; }

      .submit-card { padding: 1.5rem; }

      .section { padding: 3rem 1.5rem; }

    }



    /* ===== FADE IN ===== */

    .fade-in {

      opacity: 0;

      transform: translateY(20px);

      transition: opacity 0.7s ease, transform 0.7s ease;

    }

    .fade-in.visible {

      opacity: 1;

      transform: translateY(0);

    }



    /* ===== HINT POPUP ===== */

    .tree-hint {

      position: absolute;

      bottom: 1.5rem;

      left: 50%;

      transform: translateX(-50%);

      background: var(--bg);

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

      padding: 0.5rem 1.2rem;

      border-radius: 2rem;

      font-size: 0.82rem;

      color: var(--muted);

      z-index: 10;

      animation: hintBlink 2s ease-in-out infinite;

      white-space: nowrap;

    }

    @keyframes hintBlink {

      0%, 100% { opacity: 1; }

      50% { opacity: 0.5; }

    }

    /* No mood */
    .mood-none .fruit-body { background: linear-gradient(135deg, #DFE6E9, #B2BEC3); }
    .mood-none .fruit-glow { background: radial-gradient(circle at 30% 30%, rgba(223,230,233,0.4), transparent 60%); }