:root{--bg:#f6f7fb;--panel:#fff;--text:#1f2937;--muted:#6b7280;--line-strong:#111827;--selected:#bfdbfe;--related:#e0f2fe;--same:#fde68a;--error:#fecaca;--hint:#bbf7d0;--fixed:#111827;--user:#2563eb}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);display:block;padding:0;overflow:hidden}.site-actions{position:fixed;top:12px;right:12px;z-index:20}.site-actions a{display:inline-flex;align-items:center;border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.12);color:var(--text);font-weight:800;text-decoration:none}.site-actions a:hover{filter:brightness(.98)}.app-three-column{width:100vw;height:100vh;display:grid;grid-template-columns:minmax(190px,250px) minmax(420px,1fr) minmax(280px,380px);gap:12px;padding:12px;align-items:stretch}.card{background:var(--panel);border-radius:16px;box-shadow:0 10px 35px rgba(0,0,0,.08);padding:14px;min-width:0}.controls-left,.analysis-right,.board-card{height:calc(100vh - 24px);overflow:auto}.board-card{display:grid;grid-template-rows:auto minmax(0,1fr);align-items:center;justify-items:center;overflow:hidden}.board-header{width:min(100%,calc(100vh - 160px));justify-self:center}.board-header h1{font-size:clamp(1.55rem,3vw,2.2rem)}.board-header p{margin-bottom:8px}h1{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.4rem)}h2{margin:0 0 8px;font-size:1rem}p{margin:0 0 16px;color:var(--muted);line-height:1.45}.board{width:min(100%,calc(100vh - 150px));max-width:calc(100vh - 150px);min-width:280px;aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);border:3px solid var(--line-strong);background:var(--line-strong);gap:1px;user-select:none;touch-action:manipulation;align-self:center;justify-self:center}.cell{position:relative;display:grid;place-items:center;background:white;font-size:clamp(1.25rem,5vw,2.2rem);font-weight:600;color:var(--user);cursor:pointer;border:0;padding:0;min-width:0;min-height:0}.cell:nth-child(3n){border-right:2px solid var(--line-strong)}.cell:nth-child(9n){border-right:0}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--line-strong)}.cell.fixed{color:var(--fixed);cursor:default}.cell.selected{background:var(--selected)}.cell.related{background:var(--related)}.cell.same{background:var(--same)}.cell.error{background:var(--error)}.cell.hint{background:var(--hint)}.notes{position:absolute;inset:4px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(.45rem,1.7vw,.8rem);color:var(--muted);font-weight:500;line-height:1;pointer-events:none}.notes span{display:grid;place-items:center}.controls{display:grid;gap:10px}.toolbar{display:flex;flex-wrap:wrap;gap:6px}.toolbar-vertical{display:grid;grid-template-columns:1fr;gap:6px}button,select{border:0;border-radius:10px;padding:8px 10px;background:#e5e7eb;color:var(--text);font:inherit;font-size:.94rem;cursor:pointer}button:hover,select:hover{filter:brightness(.98)}button.primary{background:#2563eb;color:white}button.active{outline:3px solid #93c5fd;background:#dbeafe}.toolbar-vertical button,.toolbar-vertical select,.controls-left>button,.analysis-controls button{width:100%}.numpad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.numpad button{min-height:42px;font-size:1.15rem;font-weight:700;background:#f3f4f6;border-radius:10px}.technique-panel{border:1px solid #e5e7eb;border-radius:16px;padding:12px;background:#f9fafb;width:100%}.analysis-right .technique-panel{height:100%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto}.technique-name{font-weight:800;margin-bottom:6px;font-size:.98rem}.technique-text{margin:0;font-size:.9rem}.analysis-list{margin:12px 0 0;padding-left:18px;max-height:none;overflow:auto;color:var(--text);font-size:.86rem}.analysis-list li{margin-bottom:8px;line-height:1.35}.analysis-list strong{color:var(--text)}.analysis-step{border-radius:10px}.analysis-step.active{background:#dbeafe}.analysis-step-button{display:block;width:100%;text-align:left;border:0;border-radius:10px;padding:6px;background:transparent;color:var(--text);cursor:pointer;font:inherit}.analysis-step-button:hover,.analysis-step-button:focus-visible{background:#eef2ff;outline:2px solid #93c5fd}.analysis-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.analysis-controls button{padding:7px 8px;font-size:.88rem}.compact-help{border-top:1px solid #e5e7eb;padding-top:8px;font-size:.88rem}.compact-help summary{cursor:pointer;font-weight:700;color:var(--text);margin-bottom:6px}.compact-help span{display:block;margin:2px 0}.status{min-height:1.5em;color:var(--muted);font-weight:600;font-size:.9rem}.error-message{padding:12px;border-radius:12px;background:#fee2e2;color:#991b1b;font-weight:700}.hidden{display:none!important}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52)}.modal-card{position:relative;width:min(720px,100%);max-height:min(680px,calc(100vh - 40px));overflow:auto;background:var(--panel);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.28);padding:18px}.modal-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.modal-header h2{margin:0 0 4px;font-size:1.25rem}.modal-header p{margin:0;font-size:.92rem}.modal-close{width:36px;height:36px;border-radius:999px;padding:0;font-size:1.4rem;line-height:1}.modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.modal-separator{border:0;border-top:1px solid #e5e7eb;margin:14px 0}.puzzle-string{width:100%;resize:vertical;min-height:96px;border:1px solid #d1d5db;border-radius:12px;padding:10px;font:.95rem ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--text);background:white}@media(max-width:1050px){body{overflow:auto}.site-actions{position:sticky;top:0;display:flex;justify-content:flex-end;padding:10px 10px 0}.app-three-column{height:auto;min-height:100vh;grid-template-columns:1fr;padding:10px}.controls-left,.analysis-right,.board-card{height:auto;overflow:visible}.board{width:min(100%,92vw);max-width:620px}.modal{padding:10px}}

:root {
  --bg: var(--bs-body-bg);
  --panel: var(--bs-body-bg);
  --text: var(--bs-body-color);
  --muted: var(--bs-secondary-color);
  --line-strong: var(--bs-emphasis-color);
  --selected: #93c5fd;
  --related: #dbeafe;
  --same: #fde68a;
  --error: var(--bs-danger-bg-subtle);
  --hint: var(--bs-success-bg-subtle);
  --fixed: var(--bs-emphasis-color);
  --user: var(--bs-primary);
  --active-cell-ring: #0d6efd;
}

[data-bs-theme="dark"] {
  --line-strong: rgba(255, 255, 255, .72);
  --selected: #1d4ed8;
  --related: #172033;
  --same: #2a2113;
  --error: #3b181d;
  --hint: #153322;
  --fixed: #f8fafc;
  --user: #7ab7ff;
  --active-cell-ring: #93c5fd;
}

body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.card,
.modal-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08);
}

.controls-left {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  gap: 10px;
}

.site-actions {
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  z-index: auto;
}

.site-actions a,
.site-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--bs-border-color);
  border-radius: .55rem;
  padding: .45rem .65rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: none;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  text-decoration: none;
}

.site-actions a:hover,
.site-actions button:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  filter: none;
}

button,
select,
.numpad button {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

button.primary {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
  color: #fff;
}

button.active {
  outline: 3px solid rgba(var(--bs-primary-rgb), .3);
  background: var(--bs-primary-bg-subtle);
}

.technique-panel {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  border-radius: .75rem;
}

.analysis-step.active,
.analysis-step-button:hover,
.analysis-step-button:focus-visible {
  background: var(--bs-primary-bg-subtle);
}

.board {
  border-color: var(--line-strong);
  background: var(--line-strong);
}

.cell {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .cell {
  background: #111827;
}

.cell.related {
  background: var(--related);
}

.cell.same {
  background: var(--same);
}

.cell.selected {
  background: var(--selected);
  box-shadow: inset 0 0 0 4px var(--active-cell-ring), inset 0 0 0 999px rgba(var(--bs-primary-rgb), .08);
  z-index: 2;
}

.cell.error {
  background: var(--error);
}

.cell.hint {
  background: var(--hint);
}

[data-bs-theme="dark"] .cell.selected {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 4px var(--active-cell-ring), inset 0 0 0 999px rgba(255, 255, 255, .06);
}

.puzzle-string {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.modal-separator,
.compact-help {
  border-color: var(--bs-border-color);
}

.modal {
  z-index: 2000;
}

.modal-backdrop {
  z-index: 0;
}

.modal-card {
  z-index: 1;
}

@media (max-width: 1050px) {
  .site-actions {
    position: static;
    padding: 0;
  }
}