:root {
  --hk-red: #c9342d;
  --hk-red-dark: #a9231f;
  --hk-red-soft: #fff2ef;
  --hk-ink: #25211f;
  --hk-muted: #7b706c;
  --hk-line: #eadfda;
  --hk-card: #fffdfa;
}

.hk-scene-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #f2c4bd;
  border-radius: 18px;
  background: linear-gradient(115deg, #fff8f5, #fffdfb 65%, #fff3ed);
  box-shadow: 0 7px 22px rgba(154, 50, 38, .08);
}
.hk-scene-entry-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 15px; background: #ffe3de; font-size: 25px; }
.hk-scene-entry-copy { min-width: 0; flex: 1; }
.hk-scene-entry-title { display: flex; align-items: center; gap: 8px; }
.hk-scene-entry-title h2 { margin: 0; color: var(--hk-ink); font-size: 16px; font-weight: 800; }
.hk-scene-entry-title span { padding: 2px 7px; border-radius: 999px; background: var(--hk-red); color: white; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.hk-scene-entry-copy p { margin: 4px 0 3px; color: #5f5551; font-size: 12px; line-height: 1.5; }
.hk-scene-entry-copy small { color: #a07870; font-size: 11px; }
.hk-scene-entry-button, .hk-primary-button { border: 0; border-radius: 12px; background: var(--hk-red); color: white; font-weight: 800; cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.hk-scene-entry-button { flex: 0 0 auto; padding: 11px 15px; font-size: 12px; box-shadow: 0 5px 12px rgba(201, 52, 45, .18); }
.hk-scene-entry-button:hover, .hk-primary-button:hover { background: var(--hk-red-dark); transform: translateY(-1px); }
.hk-scene-entry-button:focus-visible, .hk-primary-button:focus-visible, .hk-secondary-button:focus-visible, .hk-filter:focus-visible, .hk-scene-card:focus-visible, .hk-token:focus-visible, .hk-selected-token:focus-visible, .hk-close-button:focus-visible, .hk-back-button:focus-visible, .hk-speak:focus-visible { outline: 3px solid rgba(201, 52, 45, .28); outline-offset: 2px; }

.hk-scene-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 22px; background: rgba(46, 30, 26, .48); backdrop-filter: blur(5px); }
.hk-scene-dialog { width: min(860px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow: hidden; border: 1px solid rgba(201, 52, 45, .17); border-radius: 24px; background: var(--hk-card); box-shadow: 0 28px 90px rgba(64, 28, 23, .3); color: var(--hk-ink); }
.hk-scene-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px 19px; border-bottom: 1px solid var(--hk-line); background: linear-gradient(120deg, #fff8f4, #fffdfb); }
.hk-scene-dialog-head h1 { margin: 3px 0 4px; font-size: 25px; letter-spacing: -.02em; }
.hk-scene-dialog-head p { margin: 0; color: var(--hk-muted); font-size: 13px; }
.hk-kicker { color: var(--hk-red); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.hk-close-button { border: 0; background: transparent; color: #947f78; font-size: 29px; line-height: 1; cursor: pointer; }
.hk-scene-dialog-body { max-height: calc(min(760px, 100vh - 36px) - 114px); overflow: auto; padding: 24px 28px 30px; }
.hk-scene-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.hk-filter { border: 1px solid var(--hk-line); border-radius: 999px; padding: 8px 12px; background: white; color: #756662; font-size: 12px; cursor: pointer; }
.hk-filter.is-active { border-color: var(--hk-red); background: var(--hk-red); color: white; }
.hk-scene-count { margin-left: auto; color: var(--hk-muted); font-size: 12px; }
.hk-scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.hk-scene-card { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--hk-line); border-radius: 16px; padding: 13px 14px; background: white; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.hk-scene-card:hover { border-color: #e6aaa1; box-shadow: 0 7px 17px rgba(164, 64, 51, .1); transform: translateY(-1px); }
.hk-scene-emoji { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--hk-red-soft); font-size: 21px; }
.hk-scene-card-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.hk-scene-card-copy strong { color: var(--hk-ink); font-size: 13px; }
.hk-scene-card-copy small { overflow: hidden; color: var(--hk-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hk-scene-card-copy em { color: #b2847b; font-size: 10px; font-style: normal; }
.hk-scene-arrow { color: #c79289; font-size: 22px; }
.hk-practice-head { display: flex; align-items: center; gap: 10px; color: #655954; font-size: 13px; font-weight: 800; }
.hk-back-button { border: 0; padding: 0; background: transparent; color: var(--hk-red); font-size: 12px; cursor: pointer; }
.hk-step { margin-left: auto; color: var(--hk-muted); font-size: 12px; font-weight: 600; }
.hk-progress-line { height: 5px; margin: 15px 0 30px; overflow: hidden; border-radius: 99px; background: #f3e6e2; }
.hk-progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #db5e51, var(--hk-red)); transition: width .3s ease; }
.hk-prompt { position: relative; margin: 0 auto 24px; text-align: center; }
.hk-prompt h2 { max-width: 640px; margin: 8px auto 11px; font-size: clamp(22px, 4vw, 32px); letter-spacing: -.03em; }
.hk-speak { border: 1px solid #f0c9c2; border-radius: 999px; padding: 7px 11px; background: white; color: var(--hk-red); font-size: 12px; cursor: pointer; }
.hk-answer-area { display: flex; flex-direction: column; gap: 14px; }
.hk-selected-tokens { display: flex; min-height: 58px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #e3b9b0; border-radius: 16px; padding: 12px; background: #fff9f7; }
.hk-placeholder { color: #bd9f98; font-size: 13px; }
.hk-selected-token, .hk-token { border: 1px solid #edc9c2; border-radius: 10px; padding: 9px 12px; background: white; color: #493d39; font-size: 14px; cursor: pointer; box-shadow: 0 2px 5px rgba(115, 63, 53, .06); }
.hk-selected-token { border-color: #e59f95; background: #fff0ec; color: var(--hk-red-dark); }
.hk-token-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hk-token:hover { border-color: #d8786c; transform: translateY(-1px); }
.hk-token.is-used { opacity: .36; cursor: default; }
.hk-answer-area.is-typing input { width: 100%; box-sizing: border-box; border: 1px solid #e1c2bb; border-radius: 16px; padding: 18px; background: #fffaf8; color: var(--hk-ink); font-size: 17px; outline: none; }
.hk-answer-area.is-typing input:focus { border-color: var(--hk-red); box-shadow: 0 0 0 3px rgba(201, 52, 45, .1); }
.hk-submit { align-self: center; min-width: 180px; padding: 12px 22px; font-size: 13px; }
.hk-submit:disabled { opacity: .52; cursor: default; transform: none; }
.hk-submit span { margin-left: 7px; opacity: .75; }
.hk-feedback { margin-top: 20px; border-radius: 16px; padding: 16px 18px; text-align: center; animation: hk-feedback-in .2s ease-out; }
@keyframes hk-feedback-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.hk-feedback strong { font-size: 14px; }
.hk-feedback p { margin: 8px 0 5px; color: var(--hk-ink); font-size: 19px; font-weight: 800; }
.hk-feedback small { display: block; color: #725e58; font-size: 12px; line-height: 1.65; }
.hk-feedback.is-success { border: 1px solid #b6dfc8; background: #f1fbf4; }
.hk-feedback.is-success strong { color: #22814a; }
.hk-feedback.is-answer { border: 1px solid #f0c2a7; background: #fff8f1; }
.hk-feedback.is-answer strong { color: #b85f2d; }
.hk-feedback.is-hint { border: 1px solid #edd4a4; background: #fffaf0; }
.hk-feedback.is-hint strong { color: #a36e18; }
.hk-feedback.is-empty { border: 1px solid #efc9c0; background: #fff8f6; }
.hk-feedback.is-empty strong { color: var(--hk-red); }
.hk-feedback .hk-your-answer { margin: 10px 0 2px; color: #8d625b; font-size: 13px; font-weight: 700; }
.hk-analysis { margin: 13px auto 11px; max-width: 680px; border-radius: 13px; padding: 10px 12px; background: rgba(255, 255, 255, .72); text-align: left; }
.hk-analysis-summary { margin-bottom: 8px; color: #8d6c64; font-size: 11px; text-align: center; }
.hk-analysis-tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.hk-analysis-token { display: inline-flex; min-width: 45px; flex-direction: column; align-items: center; gap: 2px; border: 1px solid #e5d7d2; border-radius: 9px; padding: 5px 8px 4px; background: #fff; color: #5c514d; }
.hk-analysis-token b { font-size: 13px; line-height: 1.2; }
.hk-analysis-token small { color: #9a7870; font-size: 10px; line-height: 1.2; }
.hk-analysis-token.is-correct { border-color: #b9dfc7; background: #f3fcf5; color: #267b4a; }
.hk-analysis-token.is-wrong, .hk-analysis-token.is-extra { border-color: #efb5ad; background: #fff1ef; color: #bd3e35; }
.hk-analysis-token.is-missing { border-style: dashed; border-color: #e5bf8b; background: #fff8ed; color: #a26f2b; }
.hk-feedback-actions { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 13px; }
.hk-feedback-actions .hk-primary-button { margin-top: 0; }
.hk-feedback-actions .hk-speak { padding: 9px 12px; }
.hk-secondary-button { margin-top: 11px; border: 1px solid #dfc38f; border-radius: 10px; padding: 9px 14px; background: white; color: #946619; font-weight: 800; cursor: pointer; }
.hk-feedback .hk-primary-button { margin-top: 13px; padding: 10px 18px; font-size: 12px; }
.hk-explain-note { margin-top: 18px; border-top: 1px solid #f0e5e1; padding-top: 14px; color: #806d67; font-size: 11px; line-height: 1.6; }
.hk-explain-note span { display: inline-block; margin-right: 7px; border-radius: 5px; padding: 2px 5px; background: #f8e8e4; color: var(--hk-red); font-weight: 800; }

@media (max-width: 680px) {
  .hk-scene-entry { align-items: flex-start; flex-wrap: wrap; }
  .hk-scene-entry-button { width: 100%; }
  .hk-scene-overlay { padding: 8px; }
  .hk-scene-dialog { max-height: calc(100vh - 16px); border-radius: 18px; }
  .hk-scene-dialog-head { padding: 18px 18px 15px; }
  .hk-scene-dialog-head h1 { font-size: 22px; }
  .hk-scene-dialog-body { max-height: calc(100vh - 108px); padding: 18px 16px 23px; }
  .hk-scene-toolbar { flex-wrap: wrap; }
  .hk-scene-count { width: 100%; margin: 2px 0 0; }
  .hk-scene-grid { grid-template-columns: 1fr; }
  .hk-prompt h2 { font-size: 25px; }
}