/* Chinese Room lesson. All rules scoped under .crm-* */
.crm-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.crm-zh { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "WenQuanYi Zen Hei", var(--sans); font-weight: 600; letter-spacing: .02em; }
.crm-fine { font-size: 12px; color: var(--faint); text-align: center; }

/* ---------- the door and the rulebook ---------- */
.crm-door { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: #F2EDE3; color: #1B1A18; }
.crm-door small, .crm-out span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6E6960; }
.crm-note { font-size: 24px; line-height: 1.3; }
.crm-long .crm-note { font-size: 16px; line-height: 1.5; }
.crm-out { display: none; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1.5px dashed #BDB5A6; }
.crm-out .crm-zh { font-size: 18px; color: #3C2A8C; }
.crm-out.on { display: flex; animation: crmIn .35s ease-out both; }
@keyframes crmIn { from { opacity: 0; transform: translateY(6px); } }

.crm-book { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.crm-bh { display: grid; grid-template-columns: 1fr 1fr; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.crm-rule { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 4px; min-height: 48px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--raised); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: border-color .2s, background .2s, opacity .3s; }
.crm-rule .crm-zh { font-size: 18px; line-height: 1.25; }
.crm-rule i { font-style: normal; color: var(--faint); text-align: center; }
.crm-rule.right { border-color: var(--mint); background: rgba(63,214,154,.14); }
.crm-rule.wrong { border-color: var(--red); }
.crm-rule.off { opacity: .4; }

/* ---------- translations ---------- */
.crm-trans { display: flex; flex-direction: column; gap: 8px; }
.crm-tr { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.crm-tq, .crm-ta { display: flex; align-items: baseline; gap: 4px 8px; }
.crm-ta { flex-wrap: wrap; }
.crm-tr small { flex: none; width: 46px; font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.crm-tq span { font-size: 14px; line-height: 1.3; color: var(--dim); }
.crm-ta .crm-zh { font-size: 15px; color: var(--violet-bright); }
.crm-ta > span:last-child { display: none; flex-basis: 100%; padding-left: 54px; font-size: 14px; font-weight: 700; color: var(--gold); }
.crm-tq span { filter: blur(5px); transition: filter .5s; }
.crm-tr.on .crm-tq span { filter: none; color: var(--text); }
.crm-tr.on .crm-ta > span:last-child { display: inline; animation: crmIn .35s ease-out both; }

/* ---------- Searle's point ---------- */
.crm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-pan { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); }
.crm-pan small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.crm-pan b { font-size: 16px; line-height: 1.25; }
.crm-have { border-color: var(--violet-bright); } .crm-have b { color: var(--violet-bright); }
.crm-lack { border-style: dashed; } .crm-lack b { color: var(--dim); }
.crm-pan::after { font-family: var(--mono); font-size: 13px; font-weight: 600; margin-top: auto; opacity: 0; transition: opacity .4s; }
.crm-named .crm-have::after { content: "Syntax"; color: var(--violet-bright); opacity: 1; }
.crm-named .crm-lack::after { content: "Semantics"; color: var(--gold); opacity: 1; }

/* ---------- the systems reply ---------- */
.crm-fig svg { display: block; width: 100%; max-width: 330px; margin: 0 auto; }
.crm-sys { fill: rgba(123,92,253,.08); stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 6 5; }
.crm-syl { font-family: var(--sans); font-size: 14px; font-weight: 700; fill: var(--violet-bright); }
.crm-fig text { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--dim); }
.crm-p circle, .crm-p path { fill: var(--gold); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.crm-bk path { fill: #F2EDE3; stroke: #BDB5A6; stroke-width: 2; }
.crm-nt rect { fill: #F2EDE3; }
.crm-bk, .crm-nt { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; transform-box: fill-box; transform-origin: center; }
.crm-inside .crm-bk, .crm-inside .crm-nt { opacity: 0; }
.crm-inside .crm-p circle, .crm-inside .crm-p path, .crm-inside .crm-p text { transform: translateX(70px); }
.crm-p text { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.crm-robot img { display: block; width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }

/* ---------- the poll ---------- */
.crm-poll { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.crm-pq { font-family: var(--serif); font-size: 16px; line-height: 1.3; }
.crm-pb { display: grid; grid-template-columns: 112px 1fr 40px; align-items: center; gap: 8px; }
.crm-pb span { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--dim); }
.crm-pb b { font-family: var(--mono); font-size: 14px; text-align: right; }
.crm-pt { height: 16px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.crm-pt i { display: block; height: 100%; width: 0; background: var(--violet); border-radius: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.crm-pm { opacity: .35; } .crm-pm.on { opacity: 1; } .crm-pm .crm-pt i { background: var(--gold); } .crm-pm.on span, .crm-pm.on b { color: var(--gold); }
.crm-poll small { font-size: 12px; color: var(--faint); }

@media (max-height: 700px) {
  .crm-note { font-size: 20px; }
  .crm-long .crm-note { font-size: 14px; line-height: 1.35; }
  .crm-door { padding: 8px 12px; gap: 4px; }
  .crm-book { gap: 4px; padding: 6px; }
  .crm-trans { gap: 6px; }
  .crm-tr { padding: 6px 10px; }
  .crm-rule { min-height: 44px; padding: 4px 10px; }
  .crm-rule .crm-zh { font-size: 16px; }
  .crm-tq span, .crm-ta > span:last-child { font-size: 13px; }
}