/* Visual tokens and typography shared with outlier.si. No external assets. */
:root {
  --bg: #101012; --panel: #17171b; --panel2: #202026; --ink: #f4efe4;
  --muted: #aaa6a0; --orange: #f28c28; --teal: #7dd3c7; --red: #e45b52;
  --line: #34343c; --paper: #e8dfcd; --shadow: 0 22px 60px rgba(0,0,0,.34); --radius: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--ink); background: var(--bg); font-synthesis: none; color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; line-height: 1.6;
  background: radial-gradient(circle at 10% 10%, rgba(242,140,40,.09), transparent 24rem),
    radial-gradient(circle at 88% 22%, rgba(125,211,199,.07), transparent 26rem), var(--bg);
}
body::after { content: ""; pointer-events: none; position: fixed; inset: 0; opacity: .045; z-index: 99; background: repeating-linear-gradient(to bottom, transparent 0 3px, #fff 4px); mix-blend-mode: soft-light; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
button:disabled { opacity: .45; cursor: default; }
button, input, textarea, select, a, summary { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--teal); }
button:hover:not(:disabled), .home-link:hover { border-color: #666672; }
[hidden] { display: none !important; }
.site-header {
  position: sticky; top: 0; z-index: 50; min-height: 68px;
  padding: 12px max(18px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  backdrop-filter: blur(14px); background: rgba(16,16,18,.78);
}
.header-brand { display: flex; align-items: center; gap: 20px; }
.brand { font-weight: 900; letter-spacing: .08em; font-size: 16px; }
.brand span { color: var(--orange); }
.brand-caption { font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 20px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.home-link { color: var(--muted); font-size: 11px; margin-right: 6px; }
.quiet { border: 1px solid var(--line); background: #16161a; color: var(--ink); border-radius: 999px; padding: 10px 15px; font-size: 11px; }
main { width: min(1120px, calc(100% - 36px)); margin: auto; }
.intro { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 38px; padding: 68px 0 48px; }
.eyebrow { color: var(--teal); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; font-weight: 400; margin: 0 0 18px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(3rem, 6vw, 5rem); line-height: .98; letter-spacing: -.045em; margin: 0; }
h1 em { font-style: normal; color: var(--orange); }
.intro-copy { font-size: 13px; line-height: 1.8; color: #d5d1ca; margin: 25px 0 0; }
/* The same terminal container and header used on outlier.si. */
.intro-note {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #0b0b0d;
  border: 1px solid #2b2b32;
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
  overflow: hidden;
}
.terminal-head { height: 42px; background: #19191e; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid #2d2d34; }
.terminal-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.terminal-head i:nth-child(2) { background: #dca844; }
.terminal-head i:nth-child(3) { background: #67b97b; }
.terminal-body { padding: 22px 22px 25px; font-size: .88rem; color: #d8d5cf; }
.term-line { margin: .25rem 0; }
.prompt { color: var(--teal); }
.orange { color: var(--orange); }
.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--ink);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.workspace { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); gap: 24px; align-items: start; }
.card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #1c1c21, var(--panel)); padding: 25px; box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 25px; }
.section-heading .eyebrow { font-size: 10px; margin-bottom: 8px; }
h2 { font: 700 26px/1.1 Georgia, serif; letter-spacing: -.025em; margin: 0; }
.text-button { font-size: 11px; color: var(--orange); border: 0; padding: 5px 0; background: transparent; white-space: nowrap; }
.text-button:hover:not(:disabled) { color: #ffb469; }
.preview-tag { background: rgba(125,211,199,.06); color: var(--teal); border: 1px solid rgba(125,211,199,.25); border-radius: 999px; font-size: 8px; letter-spacing: .08em; padding: 5px 9px; white-space: nowrap; }
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #111114; padding: 11px 12px; color: var(--ink); font-size: 12px; }
input::placeholder, textarea::placeholder { color: #96929a; }
/* Keep the focus indicator inside controls: the word list clips overflow. */
input:focus, textarea:focus, select:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--teal);
}
.words-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; }
.words-heading label { margin: 0; }
.badge { display: inline-block; font-size: 10px; color: var(--teal); background: rgba(125,211,199,.08); border: 1px solid rgba(125,211,199,.18); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.hint { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 9px 0 14px; }
.table-heading, .entry { display: grid; grid-template-columns: minmax(85px,.75fr) minmax(120px,1.4fr) 22px; gap: 8px; }
.table-heading { font-size: 9px; letter-spacing: .14em; color: var(--muted); padding: 8px 2px; }
.entry { margin-bottom: 8px; }
.entry input { padding: 10px; font-size: 11px; }
.entry .answer { color: var(--teal); font-weight: 600; text-transform: uppercase; }
.remove { background: none; border: 0; font-size: 20px; color: var(--muted); padding: 0; }
.remove:hover { color: var(--red); }
.word-table { max-height: 350px; overflow-y: auto; padding-right: 4px; scrollbar-color: #52525d #17171b; }
.add-button { border: 1px dashed #51515b; background: transparent; border-radius: 999px; width: 100%; color: var(--ink); font-size: 11px; padding: 11px; margin-top: 4px; }
.bulk { font-size: 11px; margin-top: 18px; color: var(--muted); }
.bulk summary { cursor: pointer; }
.bulk textarea { resize: vertical; margin-bottom: 8px; }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.settings select { font-size: 11px; padding: 10px 8px; }
.primary { width: 100%; border: 1px solid var(--orange); border-radius: 999px; background: var(--orange); color: #171717; display: flex; justify-content: space-between; align-items: center; padding: 13px 20px; margin-top: 23px; font-size: 12px; font-weight: 900; }
.primary:hover:not(:disabled) { background: #ffa345; border-color: #ffa345; }
.primary span { font-size: 18px; font-weight: 400; }
#cancel { margin-top: 12px; }
.status { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }
.status:empty { display: none; }
#errors { background: rgba(228,91,82,.08); border: 1px solid rgba(228,91,82,.3); color: #ffb6ad; border-radius: 9px; padding: 12px; font-size: 11px; line-height: 1.6; margin-top: 12px; }
#errors ul { padding-left: 18px; margin: 0; }
.preview { min-height: 705px; }
.preview-toolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.segmented { background: #101012; border: 1px solid var(--line); border-radius: 999px; display: flex; padding: 3px; }
.segmented button { background: none; border: 0; border-radius: 999px; font-size: 10px; padding: 8px 12px; color: var(--muted); }
.segmented .active { background: var(--panel2); color: var(--teal); }
#empty-state { text-align: center; padding: 90px 15px; }
.empty-grid { font-size: 110px; color: #43434e; line-height: 1; }
.preview h3 { font: 700 23px/1.2 Georgia, serif; }
.preview p { font-size: 11px; line-height: 1.7; color: var(--muted); }
#puzzle { color-scheme: light; background: var(--paper); color: #25252a; border: 1px solid #d7cbb6; border-radius: 13px; padding: 24px 20px; margin-top: 20px; }
.paper-heading { text-align: center; padding: 0 0 20px; }
.paper-heading .eyebrow { font-size: 8px; color: #5e5c59; margin-bottom: 10px; }
.paper-heading h3 { font-size: 27px; color: #25252a; margin: 0; overflow-wrap: anywhere; }
.paper-heading #solution-label { color: #625e58; margin: 6px 0 0; }
.grid { display: grid; max-width: 475px; margin: 0 auto; aspect-ratio: 1; border: 1px solid #33333b; background: #33333b; gap: 1px; }
.cell { position: relative; background: #faf7f0; display: flex; justify-content: center; align-items: center; min-width: 0; overflow: hidden; }
.cell.block { background: #202026; }
.cell .number { position: absolute; top: 1px; left: 2px; font-size: clamp(6px,.65vw,10px); line-height: 1; }
.cell .letter { font-weight: 600; font-size: clamp(10px,1.5vw,21px); }
.grid.dense .number { font-size: 7px; }
.grid.dense .letter { font-size: 14px; }
.clues { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 25px; }
.clues h4 { font: 700 20px Georgia, serif; margin: 0 0 13px; }
.clues ol { padding: 0; list-style: none; margin: 0; }
.clues li { font-size: 10px; line-height: 1.65; margin-bottom: 10px; display: flex; gap: 7px; overflow-wrap: anywhere; }
.clues .clue-number { font-weight: 700; min-width: 17px; color: #25252a; }
#result-footer { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
#result-summary { margin: 0 0 5px; }
#remaining { font-size: 11px; color: #eac092; background: rgba(242,140,40,.06); border: 1px solid rgba(242,140,40,.2); padding: 12px; border-radius: 9px; margin: 10px 0; line-height: 1.7; }
footer { display: flex; justify-content: space-between; gap: 18px; font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 36px; padding: 24px 0 30px; }
footer a { color: var(--orange); }
body.busy .editor input, body.busy .editor select, body.busy .editor textarea { opacity: .65; }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr; } .preview { min-height: 500px; }
  .intro { gap: 24px; grid-template-columns: 1.18fr .82fr; } .brand-caption { font-size: 10px; }
  #puzzle { max-width: 680px; margin: 20px auto 0; padding: 26px; }
  .cell .number { font-size: 10px; } .cell .letter { font-size: 22px; } .clues li { font-size: 11px; }
}
@media (max-width: 650px) {
  .site-header { position: relative; flex-wrap: wrap; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .header-brand { width: 100%; gap: 14px; } .brand-caption { padding-left: 14px; }
  .header-actions { width: 100%; gap: 8px; } .home-link { margin-right: auto; }
  .header-actions .quiet { font-size: 10px; padding: 8px 12px; }
  .intro { grid-template-columns: 1fr; padding: 42px 0 30px; } .intro .eyebrow { font-size: 9px; }
  h1 { font-size: clamp(2.6rem, 9.5vw, 3.8rem); } .intro-copy { font-size: 12px; } .intro-note { display: none; }
  .card { padding: 18px; border-radius: 18px; } .section-heading { gap: 8px; } .section-heading .eyebrow { font-size: 9px; }
  h2 { font-size: 23px; } .preview-tag { display: none; } .settings { grid-template-columns: 1fr; }
  .table-heading, .entry { grid-template-columns: minmax(70px,.75fr) minmax(85px,1.4fr) 18px; gap: 5px; }
  .entry input { padding: 9px 7px; } #puzzle { padding: 20px 12px; } .paper-heading h3 { font-size: 23px; }
  .clues { gap: 12px; } .clues li { font-size: 10px; gap: 4px; }
  .preview-toolbar .quiet { padding: 8px 11px; font-size: 10px; } .segmented button { padding: 8px 10px; }
  footer { flex-direction: column; gap: 8px; } .cell .number { font-size: 7px; } .cell .letter { font-size: 15px; }
  .grid.dense .number { font-size: 5px; } .grid.dense .letter { font-size: 10px; }
}
@page { size: A4 portrait; margin: 15mm; }
@media print {
  :root { color-scheme: light; } body { background: #fff; color: #000; }
  body::after, .site-header, .intro, .editor, .preview > .section-heading, .preview-toolbar, #result-footer, footer { display: none !important; }
  main { padding: 0; max-width: none; width: 100%; } .workspace { display: block; }
  .preview { background: #fff; border: 0; box-shadow: none; padding: 0; min-height: 0; }
  #puzzle { background: #fff; border: 0; border-radius: 0; margin: 0; padding: 0; max-width: none; }
  .paper-heading { padding: 0 0 15px; } .paper-heading h3 { color: #000; font-size: 25px; } .paper-heading .eyebrow { display: none; }
  .grid { width: 135mm; max-width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cell { background: #fff; } .cell.block { background: #1c1c1c; } .cell .number { font-size: 8px; } .cell .letter { font-size: 17px; }
  .grid.dense .letter { font-size: 13px; } .clues { gap: 12mm; margin-top: 7mm; }
  .clues li { font-size: 10px; break-inside: avoid; margin-bottom: 6px; } .clues h4 { font-size: 17px; }
  .clues .clue-number, .preview p { color: #000; } .paper-heading, .grid { break-inside: avoid; }
}