/* One small workshop. All styles and responsive rules belong to this component. */
.hangul-builder {
  --block-ink: #f1eafa;
  --block-muted: #b4a9c0;
  --block-line: #b5a5d029;
  container: hangul-workshop / inline-size;
  position: relative;
  min-width: 0;
  width: 100%;
  color: var(--block-ink);
  background: radial-gradient(ellipse at 0% 0%, #7980b21a, transparent 65%), #12121c;
  border: 1px solid var(--block-line);
  border-radius: 18px;
  box-shadow: 0 20px 65px #00000024, inset 0 1px 0 #ffffff06;
  isolation: isolate;
}
.hangul-builder *, .hangul-builder *::before, .hangul-builder *::after { box-sizing: border-box; }
.hangul-builder [hidden] { display: none !important; }
.hangul-builder .hangul-builder-inner { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.hangul-builder .hangul-builder-slab {
  display: grid;
  place-items: center;
  grid-template-rows: auto 1fr auto;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 280px;
  padding: 25px 18px;
  border-bottom: 1px solid var(--block-line);
  border-radius: 18px 18px 0 0;
  background: radial-gradient(ellipse at 28% 27%, #a7e9e523, transparent 53%), radial-gradient(ellipse at 85% 70%, #b099de24, transparent 58%);
}
.hangul-builder .hangul-builder-slab::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 24px 12px;
  background: linear-gradient(#b9b9d218 1px, transparent 1px), linear-gradient(90deg, #b9b9d218 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse, #000 30%, transparent 75%);
}
.hangul-builder .hangul-builder-slab-label, .hangul-builder .hangul-builder-kicker {
  font-family: var(--small);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b7c6d3;
}
.hangul-builder .hangul-builder-character {
  font-family: var(--ko);
  font-size: 165px;
  font-weight: 500;
  letter-spacing: -.08em;
  line-height: 1.25;
  padding-right: .08em;
  color: #dbd7f1;
  transform: perspective(700px) rotateY(-12deg) rotateZ(-7deg);
  text-shadow: 1px 1px 0 #f2eaff, 2px 2px 0 #acacc6, 3px 3px 0 #9895b4, 4px 4px 0 #8a86a7, 5px 5px 0 #75718e, 6px 6px 0 #62617d, 7px 7px 0 #525168, 8px 8px 0 #44435a, 14px 21px 20px #04040bbf;
}
.hangul-builder .hangul-builder-slab-caption { color: var(--block-muted); font-size: 12px; line-height: 1.5; }
.hangul-builder .hangul-builder-workbench { min-width: 0; padding: 25px 24px 23px; }
.hangul-builder .hangul-builder-kicker { margin: 0 0 11px; color: #b4a4cf; font-size: 9px; }
.hangul-builder h3 { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 400; line-height: 1.07; letter-spacing: -.035em; }
.hangul-builder h3 em { color: #c7b8e3; font-family: var(--italic); font-weight: 400; }
.hangul-builder .hangul-builder-instruction { margin: 18px 0 20px; color: var(--block-muted); font-size: 14px; line-height: 1.6; }
.hangul-builder fieldset { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.hangul-builder legend { margin-bottom: 9px; padding: 0; color: #e0d7e9; font-size: 13px; line-height: 1.5; }
.hangul-builder legend span { color: #b2a2c4; font-family: var(--small); font-size: 10px; margin-right: 6px; }
.hangul-builder .hangul-builder-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hangul-builder .hangul-builder-choice { position: relative; min-width: 0; }
.hangul-builder .hangul-builder-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hangul-builder .hangul-builder-choice label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 52px;
  padding: 8px 4px;
  border: 1px solid #b4a5cd40;
  border-radius: 8px;
  background: #ffffff04;
  color: #c8bdd5;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.hangul-builder .hangul-builder-choice label [lang="ko"] { font-family: var(--ko); font-size: 24px; font-weight: 400; line-height: 1.25; }
.hangul-builder .hangul-builder-choice-reading { font-size: 12px; line-height: 1; }
.hangul-builder .hangul-builder-choice input:checked + label { background: linear-gradient(145deg, #a8d9e329, #b29add20); border-color: #aebde0; color: #f4edff; box-shadow: inset 0 0 0 1px #bacce026; }
.hangul-builder .hangul-builder-choice input:focus-visible + label { outline: 3px solid #c0edef; outline-offset: 4px; }
.hangul-builder .hangul-builder-choice label:hover { background: #bfafd21c; border-color: #b6a7cc; }
.hangul-builder .hangul-builder-result { margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--block-line); }
.hangul-builder .hangul-builder-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #b4a5c3; font-size: 16px; line-height: 1.6; }
.hangul-builder .hangul-builder-formula [lang="ko"] { color: #d9cde5; font-family: var(--ko); font-size: 24px; font-weight: 400; }
.hangul-builder .hangul-builder-formula .hangul-builder-result-character { color: #d5efec; }
.hangul-builder .hangul-builder-reading { color: #d5efec; font-size: 19px; font-style: italic; }
.hangul-builder .hangul-builder-note { margin: 8px 0 0; color: var(--block-muted); font-size: 11px; line-height: 1.6; }
.hangul-builder .hangul-builder-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@container hangul-workshop (min-width: 490px) {
  .hangul-builder .hangul-builder-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .hangul-builder .hangul-builder-slab { min-height: 400px; border-bottom: 0; border-right: 1px solid var(--block-line); border-radius: 18px 0 0 18px; padding-inline: 12px; }
  .hangul-builder .hangul-builder-character { font-size: clamp(150px, 30cqi, 275px); }
  .hangul-builder .hangul-builder-workbench { padding: 30px 24px; }
}
@container hangul-workshop (min-width: 780px) {
  .hangul-builder .hangul-builder-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hangul-builder .hangul-builder-workbench { padding: 42px 48px; }
  .hangul-builder h3 { font-size: 48px; }
  .hangul-builder .hangul-builder-character { font-size: clamp(260px, 30cqi, 340px); }
  .hangul-builder .hangul-builder-choice label { min-height: 59px; }
  .hangul-builder .hangul-builder-instruction { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hangul-builder .hangul-builder-choice label { transition: none; }
  .hangul-builder .hangul-builder-character { transform: none; }
}
@media (forced-colors: active) {
  .hangul-builder { border: 1px solid CanvasText; color: CanvasText; background: Canvas; box-shadow: none; }
  .hangul-builder .hangul-builder-slab { background: Canvas; border-color: CanvasText; }
  .hangul-builder .hangul-builder-character { transform: none; text-shadow: none; color: CanvasText; }
  .hangul-builder .hangul-builder-choice label { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .hangul-builder .hangul-builder-choice input:checked + label { outline: 2px solid Highlight; outline-offset: -4px; }
  .hangul-builder .hangul-builder-choice input:focus-visible + label { outline: 3px solid Highlight; outline-offset: 4px; }
}