body[data-entry-mode="demo"] .canvas-viewport { border-color: #9fb8ad; cursor: default; }
body[data-entry-mode="demo"] .canvas-toolbar__value::after { content: " · 3분 언어 모드"; color: #315e55; }
body[data-entry-mode="demo"] .empty-board,
body[data-entry-mode="demo"] .canvas-corner,
body[data-entry-mode="demo"] .canvas-viewport > :not(.language-demo) { visibility: hidden; }

.language-demo { position: absolute; z-index: 80; inset: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto;
  min-width: 0; min-height: 0; overflow: hidden; background:
    radial-gradient(circle at 92% 5%, rgba(203,230,218,.9), transparent 30%),
    linear-gradient(145deg,#fbfaf5,#eff5f1); color: #263a44; pointer-events: auto; cursor: default; }
.language-demo button { min-height: 44px; border: 1px solid #b9cbc3; border-radius: 11px; padding: 0 14px;
  background: rgba(255,255,255,.92); color: #315e55; font: 800 11px/1 system-ui,sans-serif; cursor: pointer; }
.language-demo button:hover,.language-demo button:focus-visible { border-color: #315e55; outline: 3px solid rgba(49,94,85,.17); outline-offset: 1px; }
.language-demo button:disabled { opacity: .38; cursor: default; }
.language-demo__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px 12px; }
.language-demo__header h1 { margin: 3px 0 0; font: 850 clamp(19px,2.4vw,30px)/1.2 system-ui,sans-serif; letter-spacing: -.04em; }
.language-demo__kicker { color: #477268; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.language-demo__header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.language-demo__fixture { padding: 6px 9px; border-radius: 999px; background: #fff0d4; color: #875b19; font-size: 9px; font-weight: 900; white-space: nowrap; }
.language-demo__timeline { padding: 0 22px 10px; }
.language-demo__progress { height: 5px; overflow: hidden; border-radius: 999px; background: #d9e4df; }
.language-demo__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#315e55,#db835d); transition: width .3s linear; }
.language-demo__timeline ol { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 8px 0 0; padding: 0; list-style: none; }
.language-demo__timeline li { display: flex; align-items: center; gap: 5px; min-width: 0; color: #89958f; }
.language-demo__timeline li span { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #e3e9e6; font-size: 8px; font-weight: 900; }
.language-demo__timeline li small { overflow: hidden; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.language-demo__timeline li.is-active { color: #315e55; }
.language-demo__timeline li.is-active span { background: #315e55; color: #fff; box-shadow: 0 0 0 4px rgba(49,94,85,.12); }
.language-demo__timeline li.is-done { color: #5c766c; }
.language-demo__timeline li.is-done span { background: #c8ddd3; }
.language-demo__stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,30%); grid-template-rows: auto minmax(0,1fr);
  gap: 10px 18px; min-width: 0; min-height: 0; margin: 0 22px; padding: 15px 18px; overflow: auto;
  border: 1px solid rgba(150,175,164,.65); border-radius: 17px; background: rgba(255,255,255,.78); box-shadow: 0 14px 36px rgba(46,72,62,.11); }
.language-demo__scene-meta { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; color: #315e55; font-size: 10px; font-weight: 900; }
.language-demo__content { display: grid; align-content: center; gap: 13px; min-width: 0; }
.language-demo__source,.language-demo__discussion { margin: 0; color: #253b43; font-family: "Noto Serif KR","Nanum Myeongjo",serif;
  font-size: clamp(22px,3vw,39px); font-weight: 750; line-height: 1.6; letter-spacing: -.04em; word-break: keep-all; }
.language-demo__circle { position: relative; padding: 0 4px; background: transparent; color: inherit; }
.language-demo__circle::after { content: ""; position: absolute; inset: -8px -9px; border: 3px solid #e85d3f; border-radius: 50%; transform: rotate(-5deg); }
.language-demo__prompt { margin: 0; color: #6c766f; font-size: clamp(12px,1.4vw,17px); }
.language-demo__meaning { display: grid; gap: 5px; max-width: 540px; padding: 13px 16px; border-left: 5px solid #d87855; border-radius: 12px; background: #fff4e9; }
.language-demo__meaning strong { font-size: 13px; }.language-demo__meaning p { margin: 0; font-size: clamp(14px,1.6vw,19px); font-weight: 800; }
.language-demo__meaning small,.language-demo__audit { color: #73776f; font-size: 9px; }
.language-demo__object-tag { color: #985332; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.language-demo__tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.language-demo__token { display: grid; gap: 3px; min-width: 62px; padding: 9px 10px; border: 1px solid #c9d5d0; border-radius: 11px; background: #f8fbf9; }
.language-demo__token strong { font-size: 16px; }.language-demo__token small { color: #68756f; font-size: 8px; }
.language-demo__token--particle { border-color: #d6a4a8; background: #fff2f2; }.language-demo__token--ending { border-color: #b7a7d5; background: #f7f2ff; }
.language-demo__structure { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.language-demo__component { display: grid; align-content: center; gap: 5px; min-width: 105px; min-height: 86px; padding: 9px; border: 1px solid #b9cbc3; border-radius: 12px; background: #f2f8f5; }
.language-demo__component span { color: #477268; font-size: 8px; font-weight: 900; }.language-demo__component strong { font-size: 15px; }
.language-demo__component small { color: #78817c; font-size: 7px; overflow-wrap: anywhere; }.language-demo__component--unresolved { border-style: dashed; background: #fbf6e9; }
.language-demo__privacy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 11px; border-radius: 10px; background: #eaf4f0; color: #315e55; font-size: 9px; }
.language-demo__privacy span { color: #61736b; }.language-demo__discussion { font-size: clamp(20px,2.7vw,34px); }
.language-demo__observation,.language-demo__question { margin: 0; font-size: 12px; line-height: 1.55; }.language-demo__question { color: #8d4c33; font-weight: 850; }
.language-demo__cue { align-self: center; padding: 15px; border-radius: 13px; background: #315e55; color: #fff; }
.language-demo__cue b { font-size: 9px; letter-spacing: .1em; }.language-demo__cue p { margin: 8px 0 0; font: 650 clamp(12px,1.35vw,16px)/1.65 system-ui,sans-serif; }
.language-demo__controls { display: flex; justify-content: center; gap: 7px; padding: 12px 16px 15px; }
.language-demo__controls .language-demo__next { min-width: 112px; border-color: #315e55; background: #315e55; color: #fff; }

@media (max-width:860px) {
  .language-demo__header { padding: 12px 12px 8px; }.language-demo__header h1 { font-size: 19px; }
  .language-demo__fixture { display: none; }.language-demo__timeline { padding: 0 12px 8px; }
  .language-demo__timeline li small { display: none; }.language-demo__stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    margin: 0 10px; padding: 12px; gap: 10px; }.language-demo__cue { align-self: auto; }
  .language-demo__controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 8px 8px 10px; }
  .language-demo__controls button { min-width: 0; padding: 0 5px; font-size: 9px; }.language-demo__controls .language-demo__next { min-width: 0; }
}
@media (max-width:440px) {
  .language-demo__header-actions button { padding: 0 9px; }.language-demo__source { font-size: 21px; }
  .language-demo__stage { overflow-x: hidden; }.language-demo__structure { max-width: 100%; }
}
@media (prefers-reduced-motion:reduce) { .language-demo__progress span { transition: none; } }