.crossword-studio {
  --cw-deep: #08271b;
  --cw-panel: #0e3828;
  --cw-panel-soft: #164735;
  --cw-mint: #80d9ad;
  --cw-gold: #f5bc55;
  --cw-paper: #f7f3e8;
  --cw-ink: #173429;
  --cw-muted: #63766c;
  width: 100%;
  padding: clamp(20px, 3.5vw, 44px);
  color: var(--cw-ink);
  background: radial-gradient(circle at 100% 0, rgba(128, 217, 173, .18), transparent 31%), var(--cw-paper);
  font-family: Manrope, Arial, sans-serif;
}

.crossword-studio *,
.crossword-studio *::before,
.crossword-studio *::after { box-sizing: border-box; }

.crossword-studio button,
.crossword-studio [contenteditable="true"],
.crossword-studio .matches li { cursor: pointer !important; }

.crossword-studio .hidden { display: none !important; }

.crossword-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
  align-items: end;
  gap: 26px;
  margin: 0 0 24px;
}

.crossword-eyebrow {
  margin: 0 0 8px !important;
  color: #237357 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.crossword-intro h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .18em;
  margin: 0;
  color: var(--cw-deep) !important;
  font: 600 clamp(32px, 5vw, 62px)/1 Fraunces, Georgia, serif !important;
  letter-spacing: -.04em;
}

.crossword-intro h1 small {
  color: #7b897f;
  font: 650 13px/1 Manrope, Arial, sans-serif;
  letter-spacing: .03em;
}

.crossword-intro #puzzle-author {
  color: #2b7459;
  font-size: .48em;
  letter-spacing: -.02em;
}

.crossword-summary {
  max-width: 760px;
  margin: 14px 0 0 !important;
  color: #52675c !important;
  font-size: 14px !important;
  line-height: 1.65;
}

.crossword-tip {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px;
  color: #d8ede1;
  border: 1px solid rgba(128, 217, 173, .24);
  border-radius: 16px;
  background: var(--cw-deep);
  box-shadow: 0 18px 45px -34px rgba(7, 37, 25, .8);
}

.crossword-tip i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--cw-deep);
  border-radius: 12px;
  background: var(--cw-mint);
}

.crossword-tip b,
.crossword-tip span { display: block; }
.crossword-tip b { margin-bottom: 3px; color: #fff7e6; font-size: 12px; }
.crossword-tip span { color: #bcd0c3; font-size: 10px; line-height: 1.45; }

.crossword-toolbar-wrap {
  position: relative;
  z-index: 30;
  padding: 12px;
  border: 1px solid rgba(23, 52, 41, .16);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 18px 45px -36px rgba(7, 37, 25, .72);
}

.crossword-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.crossword-toolbar > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 13px;
  color: #315c49;
  border: 1px solid #cbdad1;
  border-radius: 11px;
  background: #f1f6f2;
  font: 800 11px/1 Manrope, Arial, sans-serif;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.crossword-toolbar > button:hover {
  color: var(--cw-deep);
  border-color: #68a58a;
  background: #e4f3e9;
  transform: translateY(-1px);
}

.crossword-toolbar > button i { color: #237357; font-size: 14px; }
.crossword-toolbar > button.button-on { color: #173429; border-color: #d89e38; background: #fff3d8; }
.crossword-toolbar > button.button-on i { color: #bb7911; }
.crossword-toolbar > button.default { border-color: #d89e38; background: var(--cw-gold); }
.crossword-toolbar > button.disabled { color: #98a79f; opacity: .58; cursor: not-allowed !important; }
.crossword-toolbar > button.disabled:hover { transform: none; }

.crossword-toolbar .divider {
  align-self: stretch;
  width: 1px;
  min-height: 36px;
  margin: 4px 2px;
  background: #d6e1da;
}

.crossword-toolbar .menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 116px;
  z-index: 80;
  width: min(290px, calc(100vw - 64px));
  padding: 12px;
  color: #d8ede1;
  border: 1px solid rgba(128, 217, 173, .3);
  border-radius: 14px;
  background: var(--cw-deep);
  box-shadow: 0 22px 48px rgba(7, 37, 25, .28);
}

.crossword-toolbar .menu h4 {
  margin: 0 0 8px;
  padding: 2px 3px 9px;
  color: #fff7e6;
  border-bottom: 1px solid rgba(128, 217, 173, .18);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.crossword-toolbar .menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: #d8ede1;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font: 750 11px/1.2 Manrope, Arial, sans-serif;
}

.crossword-toolbar .menu button:hover,
.crossword-toolbar .menu button.default { color: #102d21; background: var(--cw-mint); }
.crossword-toolbar .menu button i { width: 18px; color: var(--cw-gold); text-align: center; }
.crossword-toolbar .menu button:hover i,
.crossword-toolbar .menu button.default i { color: #17533d; }

.crossword-instructions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin: 12px 0 18px;
  padding: 0 3px;
  color: #61756a;
  font-size: 10px;
  font-weight: 700;
}

.crossword-studio kbd {
  display: inline-block;
  min-width: 24px;
  margin-right: 4px;
  padding: 4px 7px;
  color: #fff7e6;
  border: 1px solid #315c49;
  border-radius: 6px;
  background: var(--cw-deep);
  text-align: center;
  font: 800 9px/1 Manrope, Arial, sans-serif;
}

.crossword-workspace {
  display: grid;
  grid-template-columns: minmax(440px, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
  align-items: stretch;
}

.crossword-grid-panel,
.crossword-clue-panel {
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(23, 52, 41, .15);
  border-radius: 18px;
  background: #fffdf8;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.panel-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: #8d5d13;
  border: 1px solid #d69a31;
  border-radius: 11px;
  background: #fff6df;
  font-size: 10px;
  font-weight: 900;
}

.panel-heading b,
.panel-heading small { display: block; }
.panel-heading b { color: var(--cw-deep); font-size: 12px; }
.panel-heading small { margin-top: 2px; color: #708178; font-size: 9px; line-height: 1.4; }

.crossword-grid-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  padding: clamp(8px, 1.5vw, 14px);
  border: 1px solid #d5e0d9;
  border-radius: 14px;
  background: linear-gradient(45deg, #edf1ee 25%, transparent 25%), linear-gradient(-45deg, #edf1ee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf1ee 75%), linear-gradient(-45deg, transparent 75%, #edf1ee 75%), #f9fbf9;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.crossword-studio #grid {
  width: min(100%, 620px);
  table-layout: fixed;
  border: 2px solid #10251d;
  border-collapse: collapse;
  background: #fff;
  text-align: center;
  font-size: clamp(10px, 1.8vw, 19px);
  font-weight: 650;
  user-select: none;
}

.crossword-studio #grid:focus { outline: 3px solid rgba(45, 131, 97, .26); outline-offset: 3px; }
.crossword-studio #grid.unsat:focus { outline-color: rgba(184, 57, 48, .5); }

.crossword-studio #grid td {
  position: relative;
  width: 6.666%;
  height: clamp(24px, 3.15vw, 41px);
  padding: 0;
  color: #163328;
  border: 1px solid #1c3329;
  background: #fffdf8;
}

.crossword-studio #grid td.black { background: var(--cw-deep); }
.crossword-studio #grid td.highlight { background: #e5f5eb; }
.crossword-studio #grid td.active {
  z-index: 2;
  color: #102d21;
  background: var(--cw-gold);
  box-shadow: inset 0 0 0 2px #9d6410, 0 0 0 2px rgba(245, 188, 85, .28);
}

.crossword-studio #grid td.pencil .fill { color: #7c8e84; }
.crossword-studio #grid .label {
  position: absolute;
  top: 1px;
  left: 2px;
  color: #315347;
  font-size: clamp(5px, .7vw, 8px);
  font-weight: 850;
  line-height: 1;
}

.crossword-studio #grid .fill { line-height: clamp(24px, 3.15vw, 41px); }

.crossword-clue-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  color: #d8ede1;
  background: var(--cw-deep);
}

.crossword-clue-panel .panel-heading { margin-bottom: 2px; }
.crossword-clue-panel .panel-heading b { color: #fff7e6; }
.crossword-clue-panel .panel-heading small { color: #9fbaaa; }
.crossword-clue-panel .panel-heading > span { color: #ffd888; border-color: rgba(245, 188, 85, .55); background: rgba(245, 188, 85, .08); }

.crossword-studio .half-sidebar {
  display: grid;
  grid-template-rows: auto minmax(90px, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(128, 217, 173, .18);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
}

.crossword-studio .direction-heading { padding: 12px; border-bottom: 1px solid rgba(128, 217, 173, .14); }
.crossword-studio .direction-heading.highlight { background: rgba(128, 217, 173, .08); box-shadow: inset 3px 0 var(--cw-mint); }
.crossword-studio .direction-label { margin: 0 0 7px !important; color: var(--cw-gold) !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .13em; text-transform: uppercase; }
.crossword-studio .clue { min-height: 32px; color: #fff7e6; font-size: 12px; font-weight: 700; line-height: 1.45; }
.crossword-studio .clue-number { margin-right: 4px; color: var(--cw-mint); }
.crossword-studio .editable { border-radius: 4px; transition: background-color .15s ease, box-shadow .15s ease; }
.crossword-studio .editable:hover { background: rgba(128, 217, 173, .15); }
.crossword-studio .editable:focus { outline: 0; box-shadow: 0 2px var(--cw-gold); }
.crossword-studio .current-word { min-height: 20px; margin-top: 8px; color: var(--cw-mint); font: 600 18px/1.1 Fraunces, Georgia, serif; letter-spacing: .08em; word-break: break-all; }

.crossword-studio ul.matches {
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 7px;
  overflow-y: auto;
  color: #a9bfb2;
  list-style: none;
  font-size: 10px;
  font-weight: 650;
  scrollbar-color: #38634f transparent;
}

.crossword-studio ul.matches li { padding: 5px 7px; border-radius: 6px; }
.crossword-studio ul.matches li:hover { color: #102d21; background: var(--cw-mint); }

.crossword-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.crossword-status .notification {
  position: relative;
  flex: 1 1 280px;
  margin: 0;
  padding: 12px 14px;
  color: #bcd0c3;
  border: 1px solid rgba(128, 217, 173, .22);
  border-radius: 12px;
  background: var(--cw-panel);
  font-size: 10px;
  line-height: 1.5;
}
.crossword-status .notification h3 { margin: 0 0 7px; color: #fff7e6; font-size: 10px; text-transform: uppercase; }
.crossword-status .notification table { border-collapse: collapse; }
.crossword-status .notification td { padding: 3px 8px 3px 0; }

@media (max-width: 980px) {
  .crossword-workspace { grid-template-columns: 1fr; }
  .crossword-clue-panel { grid-template-columns: 1fr 1fr; grid-template-rows: auto 300px; }
  .crossword-clue-panel > .panel-heading { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .crossword-studio { padding: 18px 11px 26px; }
  .crossword-intro { grid-template-columns: 1fr; }
  .crossword-tip { max-width: 360px; }
  .crossword-toolbar > button { flex: 1 1 calc(25% - 8px); padding-inline: 8px; }
  .crossword-toolbar .divider { display: none; }
  .crossword-toolbar .menu { left: 0; }
  .crossword-clue-panel { grid-template-columns: 1fr; grid-template-rows: auto 270px 270px; }
  .crossword-clue-panel > .panel-heading { grid-column: auto; }
  .crossword-studio #grid td { height: clamp(20px, 5.6vw, 36px); }
  .crossword-studio #grid .fill { line-height: clamp(20px, 5.6vw, 36px); }
}

@media (max-width: 480px) {
  .crossword-toolbar > button { flex-basis: calc(33.333% - 8px); }
  .crossword-toolbar > button span { font-size: 9px; }
  .crossword-instructions { display: grid; }
  .crossword-grid-panel,
  .crossword-clue-panel { padding: 11px; }
  .crossword-grid-stage { padding: 5px; }
}