/* Every rule is scoped under #hn-practice so nothing leaks into the theme or Elementor. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

#hn-practice {
  --hn-primary: #1A5330;
  --hn-accent: #C56431;
  --hn-gold: #C89D48;
  --hn-card: #F6F4EE;
  --hn-border: #E8E1D2;
  --hn-radius: 25px;
  --hn-shadow: 5px 5px 10px rgba(0, 0, 0, 0.12);
  direction: rtl;
  font-family: "Open Sans", Arial, sans-serif;
  color: #000;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px 50px;
  line-height: 1.85;
  font-size: 16px;
  box-sizing: border-box;
}
#hn-practice *, #hn-practice *::before, #hn-practice *::after { box-sizing: border-box; }
#hn-practice [hidden] { display: none !important; }

#hn-practice .hn-title { color: var(--hn-primary); font-size: 35px; font-weight: 600; text-align: center; margin: 0 0 6px; line-height: 1.3; }
#hn-practice .hn-subtitle { color: var(--hn-primary); font-size: 20px; font-weight: 600; text-align: center; margin: 0 0 24px; }
#hn-practice p { margin: 0 0 14px; }
#hn-practice .hn-small-print { font-size: 14px; color: #444; text-align: center; }
#hn-practice .hn-gate { background: var(--hn-card); border: 1px solid var(--hn-border); border-radius: var(--hn-radius); box-shadow: var(--hn-shadow); padding: 30px; text-align: center; }

/* Buttons: square, terracotta, green on hover. */
#hn-practice .hn-btn {
  display: inline-block; font-family: inherit; font-size: 17px; font-weight: 500;
  background: var(--hn-accent); color: #FFF; border: 1px solid var(--hn-accent);
  border-radius: 0; padding: 11px 26px; cursor: pointer; text-decoration: none;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); transition: background .2s, border-color .2s; margin: 4px;
}
#hn-practice .hn-btn:hover, #hn-practice .hn-btn:focus-visible { background: var(--hn-primary); border-color: var(--hn-primary); color: #FFF; }
#hn-practice .hn-btn:disabled { opacity: .4; cursor: default; }
#hn-practice .hn-btn.hn-ghost { background: #FFF; color: var(--hn-primary); border-color: var(--hn-primary); text-shadow: none; }
#hn-practice .hn-btn.hn-ghost:hover { background: var(--hn-primary); color: #FFF; }
#hn-practice .hn-link { background: none; border: 0; color: var(--hn-accent); text-decoration: underline; font-weight: 600; font-family: inherit; font-size: 15px; cursor: pointer; margin: 0 8px; }

/* Landing */
#hn-practice .hn-guides { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 26px 0; }
#hn-practice .hn-guide-card { flex: 1 1 240px; max-width: 320px; background: var(--hn-card); border: 1px solid var(--hn-border); border-radius: var(--hn-radius); box-shadow: var(--hn-shadow); padding: 20px; text-align: center; }
#hn-practice .hn-guide-name { color: var(--hn-primary); font-weight: 600; font-size: 19px; }

/* Avatar */
#hn-practice .hn-avatar { --lvl: 0; width: 230px; max-width: 70vw; margin: 0 auto; }
#hn-practice .hn-avatar.hn-small { width: 170px; }
#hn-practice .hn-avatar svg { width: 100%; height: auto; display: block; overflow: visible; }
#hn-practice .hn-avatar .hn-ln { fill: none; stroke: var(--hn-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#hn-practice .hn-avatar .hn-arc { fill: none; stroke: var(--hn-gold); stroke-width: 4; stroke-linecap: round; transition: opacity .3s; }
#hn-practice .hn-avatar .hn-heart { fill: var(--hn-accent); opacity: .85; }
#hn-practice .hn-avatar .hn-figure { transform-origin: 120px 200px; }

#hn-practice .hn-avatar.hn-idle .hn-figure,
#hn-practice .hn-avatar.hn-listening .hn-figure { animation: hn-breathe 6s ease-in-out infinite; }
#hn-practice .hn-avatar.hn-breathing .hn-figure { animation: hn-breathe 8s ease-in-out infinite; }
#hn-practice .hn-avatar.hn-thinking .hn-arc { animation: hn-glow 1.8s ease-in-out infinite; }
#hn-practice .hn-avatar.hn-speaking .hn-figure { transform: scale(calc(1 + var(--lvl) * 0.025)); transition: transform .08s linear; }
#hn-practice .hn-avatar.hn-speaking .hn-mouth { transform-origin: 120px 122px; transform: scaleY(calc(1 + var(--lvl) * 1.6)); }
#hn-practice .hn-avatar.hn-speaking .hn-arc { opacity: calc(.55 + var(--lvl) * .45); }
#hn-practice .hn-avatar.hn-listening .hn-heart { animation: hn-glow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--mic, 0) * 0.9)); transition: transform .08s linear; }

@keyframes hn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes hn-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Session */
#hn-practice .hn-session { text-align: center; }
#hn-practice .hn-stage { position: relative; padding: 10px 0; }
#hn-practice .hn-guide-label { color: var(--hn-primary); font-weight: 600; margin-top: 4px; }
#hn-practice .hn-breath { position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; max-width: 80vw; max-height: 80vw; margin: -135px 0 0 -135px; border-radius: 50%; border: 2px solid var(--hn-gold); opacity: 0; pointer-events: none; transition: opacity .8s; }
#hn-practice .hn-breath.hn-on { opacity: .5; animation: hn-ring 8s ease-in-out infinite; }
@keyframes hn-ring { 0%, 100% { transform: scale(.88); } 50% { transform: scale(1.04); } }
#hn-practice .hn-status { min-height: 30px; color: #444; font-size: 15px; margin: 8px 0; }
#hn-practice .hn-controls { margin: 10px 0; }
#hn-practice .hn-talk { font-size: 19px; padding: 14px 40px; }
#hn-practice .hn-talk.hn-rec { background: var(--hn-primary); border-color: var(--hn-primary); animation: hn-glow 1.6s ease-in-out infinite; }
#hn-practice .hn-paused, #hn-practice .hn-end, #hn-practice .hn-typebox { background: var(--hn-card); border: 1px solid var(--hn-border); border-radius: var(--hn-radius); box-shadow: var(--hn-shadow); padding: 20px; margin: 14px 0; }
#hn-practice .hn-paused { border-right: 4px solid var(--hn-accent); }
#hn-practice .hn-input { width: 100%; font-family: inherit; font-size: 16px; border: 1px solid var(--hn-border); border-radius: 12px; padding: 10px; direction: rtl; resize: vertical; }
#hn-practice .hn-tools { margin-top: 8px; }
#hn-practice .hn-log { text-align: right; background: #FFF; border: 1px solid var(--hn-border); border-radius: 16px; padding: 14px 18px; margin-top: 12px; max-height: 320px; overflow-y: auto; font-size: 15px; }
#hn-practice .hn-log strong { color: var(--hn-primary); }
#hn-practice .hn-log-user strong { color: var(--hn-accent); }
#hn-practice .hn-debug { text-align: right; margin-top: 16px; font-size: 13px; direction: rtl; }
#hn-practice .hn-debug-list { max-height: 220px; overflow-y: auto; background: #FFF; border: 1px dashed var(--hn-border); padding: 10px 30px; }

/* Card */
#hn-practice .hn-end { text-align: center; }
#hn-practice .hn-card-img { width: 100%; max-width: 480px; height: auto; border-radius: var(--hn-radius); box-shadow: var(--hn-shadow); margin: 10px auto; display: block; }
#hn-practice .hn-card-actions { margin-top: 10px; }

@media (max-width: 600px) {
  #hn-practice { padding: 20px 15px 40px; }
  #hn-practice .hn-title { font-size: 26px; }
  #hn-practice .hn-avatar { width: 190px; }
  #hn-practice .hn-btn { font-size: 16px; padding: 10px 18px; }
}

#hn-print { display: none; }
@media print {
  body * { visibility: hidden !important; }
  #hn-print, #hn-print * { visibility: visible !important; }
  #hn-print { display: block !important; position: absolute; top: 0; left: 0; width: 100%; }
  #hn-print img { width: 100%; max-width: 18cm; display: block; margin: 0 auto; }
}