:root {
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#223c39;
  background:#f7f4ec;
  font-synthesis:none;
  line-height:1.6;
  --ink:#223c39;
  --muted:#52665e;
  --accent:#91462e;
  --line:#cecfc2
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-underline-offset:.2em
}
button,input,select {
  font:inherit
}
button,a,input,select {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #ad502a;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
.skip {
  position:absolute;
  left:16px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:4
}
.skip:focus {
  top:8px
}
.topbar {
  max-width:1180px;
  margin:auto;
  padding:24px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:750;
  font-size:1.3rem;
  letter-spacing:-.03em;
  text-decoration:none
}
.brand img {
  width:30px;
  height:38px
}
.topbar nav {
  font-size:.85rem
}
main {
  max-width:1180px;
  margin:auto;
  padding:0 28px
}
.intro {
  max-width:760px;
  padding:60px 0 38px
}
.eyebrow {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--accent);
  margin:0 0 10px
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.3rem,4.4vw,3.8rem);
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.035em;
  margin-bottom:22px
}
h2 {
  font-size:1.35rem;
  line-height:1.3;
  letter-spacing:-.02em
}
h3 {
  font-size:1.04rem;
  line-height:1.4
}
.lead {
  font-size:1.08rem;
  max-width:670px;
  color:#405a52
}
.local {
  font-size:.82rem;
  color:var(--muted);
  margin:0
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,390px) minmax(0,1fr);
  gap:36px;
  align-items:start
}
#controls {
  border:1px solid var(--line);
  padding:28px;
  background:#fffdf7;
  border-radius:3px
}
.form-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:start
}
.unit-select {
  max-width:85px;
  font-size:.75rem
}
.field {
  display:block;
  margin-bottom:20px;
  min-width:0
}
.field>span,.field>label {
  display:block;
  font-size:.85rem;
  font-weight:650;
  margin-bottom:5px
}
input,select {
  width:100%;
  border:1px solid #8d9c90;
  border-radius:2px;
  background:#fffefa;
  padding:10px 12px;
  color:var(--ink);
  min-height:46px;
  min-width:0
}
select {
  padding-right:26px
}
input {
  font-variant-numeric:tabular-nums;
  font-size:1.12rem
}
small,.help {
  display:block;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.5;
  margin:6px 0 0
}
.input-help {
  border-top:1px solid var(--line);
  padding-top:15px
}
.two-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.secondary-link {
  border:0;
  background:none;
  text-decoration:underline;
  font-size:.82rem;
  padding:12px 0 0;
  color:var(--ink)
}
.preview-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:16px
}
.tag {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1px solid #a4b3a4;
  padding:3px 8px;
  white-space:nowrap
}
.diagram {
  height:420px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#e6e9df;
  border:1px solid #ced5c7;
  padding:22px;
  overflow:hidden
}
.diagram>svg {
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  filter:drop-shadow(0 4px 7px #223c3920)
}
.preview-note {
  font-size:.74rem;
  color:var(--muted);
  margin:8px 0 18px
}
.results {
  background:#fffdf7;
  border:1px solid var(--line);
  padding:22px
}
.metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0 0 20px
}
.metrics dt {
  font-size:.78rem;
  color:var(--muted)
}
.metrics dd {
  margin:2px 0 0;
  font-size:1.4rem;
  line-height:1.3;
  font-weight:650;
  font-variant-numeric:tabular-nums
}
.results h3 {
  font-size:.82rem;
  margin-bottom:7px
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.8rem;
  font-variant-numeric:tabular-nums
}
th,td {
  padding:4px 7px;
  border-bottom:1px solid #e4e3d8;
  text-align:left
}
thead th {
  font-weight:500;
  color:var(--muted)
}
tbody th {
  font-weight:500;
  width:30%
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px
}
.actions button {
  border:1px solid var(--ink);
  padding:12px 16px;
  color:var(--ink);
  background:transparent;
  font-size:.82rem;
  font-weight:650
}
.actions .primary {
  background:var(--ink);
  color:white
}
.print-advice {
  font-size:.76rem;
  margin:12px 0 0;
  color:var(--muted)
}
.status {
  font-size:.75rem;
  min-height:1.6em;
  margin:12px 0;
  color:var(--muted)
}
.error {
  padding:16px;
  border:1px solid #a13f22;
  color:#8b301b;
  background:#fff2e9;
  font-size:.85rem;
  margin-top:12px
}
.guide {
  padding:64px 0 44px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:26px
}
.step-number {
  color:var(--accent);
  font-family:Georgia,serif;
  font-size:1.6rem;
  display:block;
  margin-bottom:12px
}
.steps p,.guide>p,details p {
  font-size:.88rem;
  color:#405a52
}
.scope {
  margin-top:34px;
  border-top:1px solid var(--line);
  padding-top:24px
}
.scope p {
  font-size:.85rem;
  color:var(--muted)
}
details {
  margin-top:24px
}
summary {
  cursor:pointer;
  font-size:.88rem;
  font-weight:650
}
details p {
  margin-top:15px;
  max-width:850px
}
footer {
  max-width:1180px;
  margin:auto;
  padding:22px 28px 34px;
  border-top:1px solid var(--line);
  display:flex;
  gap:20px;
  justify-content:space-between;
  font-size:.76rem;
  color:var(--muted)
}
footer div {
  display:flex;
  flex-wrap:wrap;
  gap:20px
}
.legal {
  max-width:760px;
  padding:48px 0 64px
}
.legal h1 {
  font-size:2.6rem
}
.legal p {
  margin-bottom:22px
}
.legal a {
  overflow-wrap:anywhere
}
@media(max-width:800px) {
  .workspace {
    grid-template-columns:1fr;
    gap:28px
  }
  .intro {
    padding-top:36px
  }
  .steps {
    grid-template-columns:1fr;
    gap:14px
  }
  .step-number {
    margin-bottom:4px
  }
  .diagram {
    height:370px
  }
}
@media(max-width:440px) {
  main {
    padding:0 16px
  }
  .topbar {
    padding:18px 16px
  }
  .intro {
    padding-bottom:26px
  }
  .lead {
    font-size:1rem
  }
  #controls {
    padding:20px
  }
  .preview-heading {
    display:block
  }
  .tag {
    display:inline-block;
    margin-bottom:12px
  }
  .diagram {
    height:340px
  }
  .results {
    padding:16px
  }
  .metrics dd {
    font-size:1.25rem
  }
  .actions {
    display:grid;
    grid-template-columns:1fr
  }
  .actions button {
    width:100%
  }
  footer {
    padding:20px 16px;
    flex-direction:column;
    gap:8px
  }
  .two-fields {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
}
:root {
  --ink:#273c49;
  --accent:#a84e2e;
  --muted:#536570;
  --line:#c9cfcf
}
body {
  background:#f5f1e8;
  color:var(--ink)
}
.topbar {
  border-color:#c9cfcf
}
.intro {
  max-width:950px
}
.intro h1 {
  font-size:clamp(2.8rem,5.5vw,4.8rem);
  line-height:1.04;
  letter-spacing:-.035em
}
.intro .lead {
  max-width:700px
}
.workspace {
  grid-template-columns:minmax(310px,390px) minmax(0,1fr);
  align-items:start;
  gap:36px
}
#controls {
  background:#fffcf5;
  border-color:#c9cfcf
}
.preview-panel {
  min-width:0
}
.diagram {
  height:auto;
  min-height:180px;
  background:#ebe6db;
  padding:12px
}
.diagram>svg {
  width:100%;
  height:auto;
  filter:none
}
.results {
  padding:22px;
  background:#fffcf5
}
.metrics dd {
  font-size:1.3rem
}
.metrics {
  grid-template-columns:1fr 1fr
}
.placement {
  font-size:.85rem;
  padding:14px;
  background:#eee9dd;
  margin:8px 0 24px
}
.placement p {
  margin:0 0 4px
}
.results h3 {
  font-size:1rem;
  margin-top:24px
}
.results .help {
  margin-bottom:10px
}
.table-wrap {
  overflow-x:auto
}
table {
  font-size:.8rem
}
td,th {
  padding:8px 5px
}
tbody th {
  width:auto
}
.swatch {
  display:inline-block;
  width:12px;
  height:12px;
  border:1px solid #616867;
  vertical-align:middle;
  margin-right:6px
}
.color-name {
  overflow-wrap:anywhere
}
.palette {
  display:grid;
  gap:8px
}
.yarn {
  display:grid;
  grid-template-columns:18px 36px 1fr;
  gap:8px;
  align-items:center
}
.yarn input[type=color] {
  padding:1px;
  width:36px;
  height:36px;
  min-width:0;
  cursor:pointer
}
.yarn input[type=text] {
  min-width:0;
  width:100%;
  font-size:.82rem
}
.yarn strong {
  font-size:.8rem
}
fieldset {
  border:0;
  border-top:1px solid var(--line);
  padding:20px 0 0;
  margin:22px 0
}
legend {
  float:left;
  font-size:.9rem;
  font-weight:650;
  width:100%;
  margin-bottom:12px
}
fieldset:after {
  content:'';
  display:block;
  clear:both
}
legend + * {
  clear:both
}
.block-head,.block {
  display:grid;
  grid-template-columns:20px minmax(64px,.8fr) minmax(90px,1.2fr) 34px;
  gap:8px;
  align-items:center
}
.block-head {
  font-size:.7rem;
  color:var(--muted);
  margin-bottom:6px
}
.block {
  margin:8px 0;
  font-size:.8rem
}
.block input,.block select {
  min-width:0;
  width:100%;
  font-size:.9rem
}
.remove {
  background:none;
  border:1px solid #c9cfcf;
  padding:5px;
  font-size:1.1rem;
  line-height:1;
  min-height:38px;
  color:var(--ink)
}
input:disabled,select:disabled {
  background:#e8e7e1;
  color:#68737b
}
.file-actions {
  display:flex;
  gap:10px;
  margin-top:22px
}
.file-actions button {
  background:none;
  border:1px solid var(--ink);
  padding:8px;
  font-size:.76rem;
  color:var(--ink)
}
.total-row {
  font-weight:700
}
.steps p,.guide>p,details p {
  color:#40545f
}
.actions {
  display:grid;
  grid-template-columns:1fr 1fr
}
.actions button {
  padding:10px 12px
}
.legal p {
  color:#40545f
}
#print-card {
  display:none
}
.print-only {
  display:none
}
.range-preview {
  max-height:580px;
  overflow:auto;
  scrollbar-gutter:stable
}
.all-ranges {
  background:none;
  border:1px solid var(--line);
  font-size:.8rem;
  padding:10px;
  margin-top:10px;
  color:var(--ink)
}
.print-intro {
  font-size:.85rem
}
.print-summary {
  font-size:.9rem
}
.print-source {
  font-size:.7rem
}
button:disabled {
  opacity:.45;
  cursor:default
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible {
  outline:3px solid #a84e2e;
  outline-offset:3px
}
@media(max-width:850px) {
  .workspace {
    grid-template-columns:1fr
  }
  .intro h1 {
    font-size:3.4rem
  }
  .preview-panel {
    width:100%
  }
  .range-preview {
    max-height:480px
  }
}
@media(max-width:440px) {
  .intro h1 {
    font-size:2.8rem
  }
  .actions {
    grid-template-columns:1fr
  }
  #controls {
    padding:18px
  }
  .results {
    padding:14px
  }
  .metrics dd {
    font-size:1.12rem
  }
  .diagram {
    min-height:100px
  }
  .yarn input[type=text] {
    font-size:.9rem
  }
}
@media print {
  @page {
    size:auto;
    margin:14mm
  }
  body>*:not(#print-card) {
    display:none!important
  }
  #print-card {
    display:block!important;
    color:#111;
    font-family:Arial,sans-serif;
    font-size:10pt
  }
  #print-card .diagram {
    display:block;
    min-height:0;
    padding:0;
    border:0;
    background:white
  }
  #print-card .diagram svg {
    width:100%;
    height:auto;
    max-height:130px
  }
  #print-card h1 {
    font-size:22pt;
    margin:0 0 8pt
  }
  #print-card h2 {
    font-size:14pt;
    margin:16pt 0 8pt
  }
  #print-card h3 {
    font-size:12pt;
    margin:14pt 0 6pt
  }
  #print-card table {
    font-size:9pt
  }
  #print-card thead {
    display:table-header-group
  }
  #print-card tr {
    break-inside:avoid
  }
  #print-card .metrics {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8pt;
    margin:12pt 0
  }
  #print-card .metrics dd {
    font-size:12pt
  }
  #print-card .metrics dt,#print-card .help {
    color:#222
  }
  #print-card .placement {
    padding:6pt;
    margin:8pt 0;
    font-size:9pt
  }
  #print-card .placement p {
    margin:0
  }
  #print-card .table-wrap {
    overflow:visible
  }
  #print-card .range-preview {
    max-height:none;
    overflow:visible
  }
  #print-card .swatch {
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact
  }
  #print-card .help {
    font-size:9pt
  }
  #print-card .all-ranges {
    display:none
  }
}

.jump { display: inline-block; margin-top: 18px; font-size: .85rem; font-weight: 650; }

@media print {
  #print-card table { line-height: 1.25; }
  #print-card th, #print-card td { padding: 3px 5px; }
}
.brand img {
  width: 32px;
  height: 32px;
}