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

   body {
       font-family: 'Georgia', 'Times New Roman', serif;
       background: #faf9f7;
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 40px 20px;
       color: #2c2c2c;
       position: relative;
   }

   body::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background:
           radial-gradient(circle at 20% 50%, rgba(215, 180, 145, 0.08) 0%, transparent 50%),
           radial-gradient(circle at 80% 80%, rgba(180, 150, 120, 0.06) 0%, transparent 50%);
       pointer-events: none;
   }

   .container {
       max-width: 680px;
       width: 100%;
       background: #ffffff;
       border-radius: 2px;
       padding: 52px 60px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
       position: relative;
       z-index: 1;
       border: 1px solid rgba(0, 0, 0, 0.04);
   }

   .ornament {
       text-align: center;
       color: #c9b99a;
       font-size: 1.5em;
       margin-bottom: 24px;
       opacity: 0.6;
       letter-spacing: 8px;
   }

   .header {
       text-align: center;
       margin-bottom: 32px;
       border-bottom: 1px solid #e8e3db;
       padding-bottom: 20px;
   }

   .header h1 {
       font-size: 1.5em;
       color: #5a5550;
       margin-bottom: 8px;
       font-weight: 400;
       letter-spacing: 3px;
       text-transform: uppercase;
   }

   .header p {
       color: #9a8f82;
       font-size: 0.9em;
       font-family: 'Segoe UI', sans-serif;
       letter-spacing: 1px;
   }

   .verse-card {
       margin-bottom: 36px;
       padding: 0;
       position: relative;
   }

   .verse-text {
       font-size: 1.35em;
       line-height: 2;
       color: #2c2c2c;
       margin-bottom: 20px;
       text-align: center;
       font-style: normal;
       position: relative;
       opacity: 0;
       animation: gentleFadeIn 1.2s ease-out forwards;
   }

   .verse-reference {
       font-size: 0.95em;
       color: #9a8f82;
       font-weight: 400;
       text-align: center;
       font-family: 'Segoe UI', sans-serif;
       letter-spacing: 1px;
       opacity: 0;
       animation: gentleFadeIn 1.2s ease-out 0.3s forwards;
   }

   @keyframes gentleFadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .explanation {
       background: #fbf9f6;
       padding: 35px;
       border-radius: 1px;
       margin-bottom: 40px;
       border-left: 2px solid #d7b491;
       opacity: 0;
       animation: gentleFadeIn 1.2s ease-out 0.6s forwards;
   }

   .explanation h3 {
       color: #5a5550;
       margin-bottom: 18px;
       font-size: 0.85em;
       font-weight: 400;
       letter-spacing: 2px;
       text-transform: uppercase;
       font-family: 'Segoe UI', sans-serif;
   }

   .explanation p {
       color: #5a5550;
       line-height: 1.9;
       font-size: 0.95em;
       font-family: 'Georgia', serif;
   }

   .button-container {
       display: flex;
       gap: 15px;
       justify-content: center;
       flex-wrap: wrap;
   }

   button {
       background: transparent;
       color: #5a5550;
       border: 1px solid #d4c9ba;
       padding: 14px 36px;
       font-size: 0.85em;
       border-radius: 1px;
       cursor: pointer;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       font-weight: 400;
       font-family: 'Segoe UI', sans-serif;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       position: relative;
       overflow: hidden;
   }

   button::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: #f5f0e8;
       transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: -1;
   }

   button:hover::before {
       left: 0;
   }

   button:hover {
       border-color: #c9b99a;
       color: #4a453f;
   }

   button:active {
       transform: scale(0.98);
   }

   button:disabled {
       opacity: 0.4;
       cursor: not-allowed;
   }

   button:disabled:hover {
       border-color: #d4c9ba;
       color: #5a5550;
   }

   button:disabled::before {
       left: -100%;
   }

   .spinner {
       display: inline-block;
       width: 14px;
       height: 14px;
       border: 2px solid rgba(90, 85, 80, 0.2);
       border-radius: 50%;
       border-top-color: #5a5550;
       animation: spin 0.8s linear infinite;
       margin-left: 8px;
       vertical-align: middle;
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   .loading-state .verse-text,
   .loading-state .verse-reference,
   .loading-state .explanation {
       opacity: 0.3;
   }

   .notification {
       position: fixed;
       top: 40px;
       right: 40px;
       background: #5a5550;
       color: #faf9f7;
       padding: 16px 28px;
       border-radius: 1px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       font-family: 'Segoe UI', sans-serif;
       font-size: 0.9em;
       letter-spacing: 0.5px;
       z-index: 1000;
       animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .notification.error {
       background: #8b6f5c;
   }

   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @media (max-width: 768px) {
       .container {
           padding: 50px 30px;
       }

       .header h1 {
           font-size: 1.2em;
       }

       .verse-text {
           font-size: 1.15em;
           line-height: 1.8;
       }

       .button-container {
           flex-direction: column;
       }

       button {
           width: 100%;
       }

       .notification {
           top: 20px;
           right: 20px;
           left: 20px;
       }
   }