@layer reset, base, components, utilities, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  fieldset,
  legend,
  ol,
  ul,
  dl,
  dd {
    margin: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  select {
    cursor: pointer;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
  }
}

@layer base {
  :root {
    --paper: #f3ede2;
    --paper-deep: #e8dfd1;
    --surface: #fbf7ef;
    --surface-bright: #fffdf8;
    --ink: #1c2a30;
    --ink-soft: #536064;
    --ink-faint: #748084;
    --rule: #cfc5b7;
    --rule-strong: #a99e90;
    --accent: #c85d3f;
    --accent-dark: #8f3524;
    --accent-soft: #f3d8ca;
    --success: #2f7c63;
    --success-soft: #d9ebe3;
    --warning: #9a651c;
    --warning-soft: #f4e6c9;
    --danger: #a4382b;
    --danger-soft: #f2d6d0;
    --shadow: 0 24px 65px rgb(31 39 42 / 11%);
    --display: "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;
    --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --radius-sm: 0.55rem;
    --radius-md: 0.85rem;
    --radius-lg: 1.15rem;
    --content: 74rem;
    --content-wide: 82rem;
  }

  body {
    min-width: 20rem;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.58;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: 0.22;
    background-image:
      linear-gradient(to right, rgb(28 42 48 / 5%) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(28 42 48 / 5%) 1px, transparent 1px);
    background-size: 3rem 3rem;
    mask-image: linear-gradient(to bottom, black, transparent 52rem);
  }

  h1,
  h2,
  h3 {
    color: var(--ink);
    text-wrap: balance;
  }

  h1,
  .section-heading > h2,
  .section-heading > div > h2,
  .method-copy > h2,
  .source-panel h2 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.035em;
  }

  h1 {
    max-width: 13ch;
    font-size: clamp(2.7rem, 5.8vw, 5.65rem);
    line-height: 0.94;
  }

  h2 {
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    line-height: 1.18;
  }

  h3 {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  p {
    color: var(--ink-soft);
  }

  button,
  a,
  input,
  select,
  summary {
    -webkit-tap-highlight-color: transparent;
  }

  :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--ink);
  }
}

@layer components {
  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.7rem 1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--surface-bright);
    color: var(--ink);
    font-weight: 800;
    transform: translateY(-180%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .section-shell {
    width: min(calc(100% - 2rem), var(--content));
    margin-inline: auto;
  }

  .section-shell--wide {
    width: min(calc(100% - 2rem), var(--content-wide));
  }

  .eyebrow,
  .step-label {
    color: var(--accent-dark);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid rgb(169 158 144 / 72%);
    background: rgb(243 237 226 / 96%);
  }

  .site-header__inner {
    display: flex;
    width: min(calc(100% - 2rem), var(--content-wide));
    min-height: 4.15rem;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .wordmark {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.26rem;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
  }

  .wordmark__slash {
    color: var(--accent);
  }

  .wordmark__ruler {
    width: 1.85rem;
    height: 0.58rem;
    margin-right: 0.35rem;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 0.36rem);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 2.5vw, 2rem);
  }

  .site-nav a,
  .site-footer nav a {
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    text-underline-offset: 0.3em;
  }

  .site-nav a:hover,
  .site-footer nav a:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  .tool-section {
    padding: clamp(2.7rem, 5vw, 5.2rem) 0 clamp(4rem, 7vw, 7rem);
  }

  .tool-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.48fr);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    align-items: end;
    gap: clamp(2rem, 6vw, 7rem);
  }

  .tool-intro .eyebrow {
    margin-bottom: 0.85rem;
  }

  .tool-intro__lede {
    max-width: 32rem;
    padding-bottom: 0.35rem;
    font-family: var(--display);
    font-size: clamp(1.22rem, 2vw, 1.65rem);
    line-height: 1.42;
  }

  .notice {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--ink);
  }

  .sizing-workspace {
    display: grid;
    overflow: clip;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    grid-template-columns: minmax(22rem, 0.43fr) minmax(30rem, 0.57fr);
    grid-template-areas:
      "controls result"
      "controls visual";
  }

  .workspace-controls {
    grid-area: controls;
    min-width: 0;
    border-right: 1px solid var(--rule);
  }

  .workspace-result {
    grid-area: result;
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: 1px solid var(--rule);
  }

  .workspace-visual {
    grid-area: visual;
    min-width: 0;
    padding: clamp(1rem, 2.2vw, 1.75rem);
    background: var(--paper-deep);
  }

  .control-strip,
  .control-section,
  .advanced-settings {
    padding: 1.25rem clamp(1.2rem, 2.4vw, 1.75rem);
  }

  .control-strip {
    display: grid;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-bright);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
  }

  .control-section {
    border-bottom: 1px solid var(--rule);
  }

  .control-section--sleepers {
    padding-bottom: 1.35rem;
  }

  .control-heading,
  .blueprint-heading {
    display: flex;
    margin-bottom: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .control-heading h2,
  .blueprint-heading h2 {
    margin-top: 0.23rem;
    font-size: 1.07rem;
  }

  .control-heading__hint {
    max-width: 12rem;
    color: var(--ink-faint);
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: right;
  }

  .field,
  .segmented-field,
  .option-field {
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    gap: 0.42rem;
  }

  .field__label,
  .segmented-field > legend,
  .option-field > legend {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }

  select,
  input[type="number"],
  input[type="text"] {
    width: 100%;
    min-height: 2.78rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-bright);
    color: var(--ink);
    font-weight: 700;
  }

  select {
    padding: 0.65rem 2.3rem 0.65rem 0.75rem;
  }

  input[type="number"],
  input[type="text"] {
    padding: 0.62rem 0.75rem;
  }

  select:hover,
  input:hover {
    border-color: var(--ink-soft);
  }

  .segmented {
    display: inline-grid;
    overflow: hidden;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
  }

  .segmented__button {
    min-height: 2.65rem;
    padding: 0.55rem 0.78rem;
    border: 0;
    border-right: 1px solid var(--rule-strong);
    background: var(--surface-bright);
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .segmented__button:last-child {
    border-right: 0;
  }

  .segmented__button:hover {
    color: var(--ink);
  }

  .segmented__button.is-active,
  .segmented__button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--surface-bright);
  }

  .text-button,
  .inline-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
  }

  .text-button:hover,
  .inline-link:hover {
    color: var(--ink);
  }

  .size-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .size-option {
    position: relative;
    display: grid;
    min-height: 4rem;
    padding: 0.68rem 0.72rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    align-content: center;
    gap: 0.1rem;
    text-align: left;
  }

  .size-option::after {
    position: absolute;
    top: 0.42rem;
    right: 0.5rem;
    color: transparent;
    content: "✓";
    font-size: 0.72rem;
    font-weight: 900;
  }

  .size-option span {
    overflow: hidden;
    font-size: 0.79rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .size-option small {
    overflow: hidden;
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.62rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .size-option:hover {
    border-color: var(--ink-soft);
    background: var(--surface-bright);
  }

  .size-option.is-active,
  .size-option[aria-pressed="true"] {
    border-color: var(--accent-dark);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-dark);
  }

  .size-option.is-active::after,
  .size-option[aria-pressed="true"]::after {
    color: var(--accent-dark);
  }

  .custom-size-button {
    display: flex;
    width: 100%;
    min-height: 3.6rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    align-items: center;
    gap: 0.75rem;
    text-align: left;
  }

  .custom-size-button:hover,
  .custom-size-button.is-active {
    border-style: solid;
    border-color: var(--accent-dark);
    background: var(--surface-bright);
  }

  .custom-size-button__icon {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--accent-dark);
    place-items: center;
  }

  .custom-size-button strong,
  .custom-size-button small {
    display: block;
  }

  .custom-size-button strong {
    font-size: 0.77rem;
    line-height: 1.25;
  }

  .custom-size-button small {
    margin-top: 0.14rem;
    color: var(--ink-faint);
    font-size: 0.65rem;
    line-height: 1.3;
  }

  .source-note,
  .field-help {
    margin-top: 0.65rem;
    color: var(--ink-faint);
    font-size: 0.67rem;
    line-height: 1.45;
  }

  .room-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .input-with-unit {
    position: relative;
    display: block;
  }

  .input-with-unit input {
    padding-right: 3.35rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }

  .input-unit {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 800;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .field-error {
    min-height: 0;
    margin-top: 0.35rem;
    color: var(--danger);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .field-error:empty {
    display: none;
  }

  .preset-row,
  .comparison-presets {
    display: flex;
    margin-top: 0.7rem;
    align-items: center;
    gap: 0.42rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .preset-row__label,
  .comparison-presets > span {
    flex: 0 0 auto;
    color: var(--ink-faint);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .preset-row button,
  .comparison-presets button {
    min-height: 2rem;
    flex: 0 0 auto;
    padding: 0.36rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .preset-row button:hover,
  .preset-row button.is-active,
  .comparison-presets button:hover,
  .comparison-presets button.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--surface-bright);
  }

  .sleeper-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.85rem;
  }

  .segmented--equal {
    width: 100%;
  }

  .height-field {
    display: grid;
    min-width: 0;
    gap: 0.42rem;
  }

  .height-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .height-inputs label {
    position: relative;
    display: block;
  }

  .height-inputs select {
    padding-right: 2rem;
  }

  .height-inputs label > span:last-child {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    color: var(--ink-faint);
    font-size: 0.64rem;
    font-weight: 800;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .height-metric {
    min-height: 2.78rem;
  }

  .advanced-settings {
    padding-block: 0;
    background: var(--surface-bright);
  }

  .advanced-settings > summary {
    display: flex;
    min-height: 3.8rem;
    padding-block: 0.85rem;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 850;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .advanced-settings > summary::-webkit-details-marker {
    display: none;
  }

  .advanced-settings > summary::after {
    flex: 0 0 auto;
    color: var(--accent-dark);
    content: "+";
    font-size: 1.25rem;
    font-weight: 500;
  }

  .advanced-settings[open] > summary::after {
    content: "−";
  }

  .advanced-settings > summary span {
    color: var(--ink-faint);
    font-size: 0.63rem;
    font-weight: 600;
    text-align: right;
  }

  .advanced-settings__content {
    display: grid;
    padding: 0.2rem 0 1.25rem;
    gap: 1.1rem;
  }

  .option-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .option-list button {
    display: grid;
    min-height: 3.55rem;
    padding: 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    align-content: center;
    gap: 0.08rem;
    text-align: left;
  }

  .option-list button strong {
    font-size: 0.7rem;
  }

  .option-list button span {
    color: var(--ink-faint);
    font-size: 0.57rem;
    line-height: 1.3;
  }

  .option-list button.is-active,
  .option-list button[aria-pressed="true"] {
    border-color: var(--accent-dark);
    background: var(--accent-soft);
  }

  .check-field {
    display: flex;
    min-height: 3.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
  }

  .check-field input {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    accent-color: var(--accent-dark);
  }

  .check-field strong,
  .check-field small {
    display: block;
  }

  .check-field strong {
    font-size: 0.73rem;
  }

  .check-field small {
    color: var(--ink-faint);
    font-size: 0.61rem;
  }

  .fit-status {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .fit-status__mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    font-size: 1.05rem;
    font-weight: 900;
    place-items: center;
  }

  .fit-status > div > p {
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .fit-status h2 {
    margin-top: 0.1rem;
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  .fit-status--tight .fit-status__mark {
    background: var(--warning-soft);
    color: var(--warning);
  }

  .fit-status--no-fit .fit-status__mark {
    background: var(--danger-soft);
    color: var(--danger);
  }

  .result-summary {
    max-width: 46rem;
    margin-top: 0.72rem;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .result-metrics {
    display: grid;
    margin-top: 1rem;
    padding-block: 0.85rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .result-metrics > div {
    min-width: 0;
  }

  .result-metrics dt {
    color: var(--ink-faint);
    font-size: 0.61rem;
    font-weight: 800;
    line-height: 1.2;
  }

  .result-metrics dd {
    overflow: hidden;
    margin-top: 0.2rem;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recommendation {
    display: grid;
    margin-top: 0.85rem;
    padding: 0.7rem 0.78rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
  }

  .recommendation__eyebrow {
    color: var(--accent-dark);
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .recommendation__main strong,
  .recommendation__main span {
    display: block;
  }

  .recommendation__main strong {
    font-family: var(--display);
    font-size: 1.05rem;
  }

  .recommendation__main span {
    margin-top: 0.08rem;
    color: var(--ink-soft);
    font-size: 0.66rem;
    line-height: 1.4;
  }

  .result-warning {
    margin-top: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid var(--warning);
    background: var(--warning-soft);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
  }

  .primary-actions {
    display: flex;
    margin-top: 0.9rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .button {
    display: inline-flex;
    min-height: 2.7rem;
    padding: 0.62rem 0.86rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-decoration: none;
  }

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

  .button--primary:hover {
    background: var(--accent-dark);
  }

  .button--secondary {
    border-color: var(--ink);
    background: var(--surface-bright);
    color: var(--ink);
  }

  .button--secondary:hover {
    background: var(--ink);
    color: var(--surface-bright);
  }

  .button--quiet {
    border-color: var(--rule);
    background: transparent;
    color: var(--ink-soft);
  }

  .button--quiet:hover {
    border-color: var(--ink);
    color: var(--ink);
  }

  .privacy-line {
    margin-top: 0.72rem;
    color: var(--ink-faint);
    font-size: 0.62rem;
    line-height: 1.4;
  }

  .blueprint-heading {
    margin-bottom: 0.75rem;
  }

  .blueprint-actions {
    display: flex;
    gap: 0.35rem;
  }

  .icon-button {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.55rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-soft);
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 850;
    gap: 0.32rem;
  }

  .icon-button--wide {
    padding-inline: 0.75rem;
  }

  .icon-button:hover,
  .icon-button.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--surface-bright);
  }

  .blueprint-stage {
    position: relative;
    display: grid;
    min-height: clamp(23rem, 42vw, 35rem);
    overflow: hidden;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    place-items: center;
  }

  .blueprint-stage::before,
  .blueprint-stage::after {
    position: absolute;
    z-index: 1;
    content: "";
    pointer-events: none;
  }

  .blueprint-stage::before {
    inset: 0.6rem;
    border: 1px solid rgb(83 96 100 / 18%);
  }

  .blueprint-stage::after {
    top: 0.6rem;
    right: 0.6rem;
    width: 2.2rem;
    height: 2.2rem;
    border-top: 1px solid var(--ink-faint);
    border-right: 1px solid var(--ink-faint);
  }

  .room-blueprint {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    max-height: 35rem;
    padding: clamp(0.4rem, 1vw, 0.8rem);
    touch-action: none;
    user-select: none;
  }

  .blueprint-corner-label {
    position: absolute;
    right: 1rem;
    bottom: 0.85rem;
    z-index: 3;
    padding: 0.22rem 0.35rem;
    background: rgb(251 247 239 / 86%);
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.54rem;
  }

  .blueprint-caption {
    display: flex;
    margin-top: 0.7rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink-faint);
    font-size: 0.63rem;
  }

  .blueprint-caption > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .drag-dot {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .blueprint-room {
    fill: var(--surface-bright);
    stroke: var(--ink);
    stroke-width: 2;
  }

  .blueprint-grid-line {
    stroke: var(--rule);
    stroke-width: 0.45;
  }

  .blueprint-grid {
    opacity: 0.76;
  }

  .blueprint-bed {
    cursor: grab;
  }

  .blueprint-bed:active,
  .room-blueprint.is-dragging .blueprint-bed {
    cursor: grabbing;
  }

  .blueprint-bed:focus-visible .blueprint-bed-base {
    stroke: var(--ink);
    stroke-width: 3;
  }

  .blueprint-bed-shadow {
    fill: var(--ink);
    opacity: 0.14;
  }

  .blueprint-bed-base {
    fill: var(--accent);
    stroke: var(--accent-dark);
    stroke-width: 1.15;
  }

  .blueprint-bed-top {
    fill: #f6dfcf;
    stroke: var(--accent-dark);
    stroke-width: 0.75;
  }

  .blueprint-bed-seam {
    fill: none;
    stroke: #b14931;
    stroke-width: 0.6;
    stroke-dasharray: 2 2;
  }

  .blueprint-pillow {
    fill: var(--surface-bright);
    stroke: #b14931;
    stroke-width: 0.6;
  }

  .blueprint-bed-name {
    fill: var(--ink);
    font-family: var(--sans);
    font-size: 6px;
    font-weight: 850;
    pointer-events: none;
  }

  .blueprint-bed-dimensions {
    fill: var(--ink-soft);
    font-family: var(--mono);
    font-size: 4.1px;
    font-weight: 750;
    pointer-events: none;
  }

  .dimension-line {
    stroke: var(--ink-soft);
    stroke-width: 0.72;
  }

  .dimension-arrow {
    fill: var(--ink-soft);
  }

  .dimension-label {
    fill: var(--ink);
    stroke: var(--surface-bright);
    stroke-width: 2.5px;
    paint-order: stroke;
    font-family: var(--mono);
    font-size: 4px;
    font-weight: 850;
    stroke-linejoin: round;
  }

  .dimension-line.is-short {
    stroke: var(--danger);
  }

  .dimension-label.is-short {
    fill: var(--danger);
  }

  .blueprint-wall-label,
  .comparison-axis-label {
    fill: var(--ink-faint);
    font-family: var(--mono);
    font-size: 4px;
    font-weight: 850;
    letter-spacing: 0.85px;
  }

  .blueprint-status-label {
    fill: var(--ink);
    stroke: var(--surface-bright);
    stroke-width: 2px;
    paint-order: stroke;
    font-family: var(--sans);
    font-size: 4.2px;
    font-weight: 850;
  }

  .blueprint-status-dot {
    fill: var(--success);
  }

  .blueprint-status--tight .blueprint-status-dot {
    fill: var(--warning);
  }

  .blueprint-status--no-fit .blueprint-status-dot {
    fill: var(--danger);
  }

  .blueprint-furniture-shape {
    fill: #ded2c3;
    stroke: #70665c;
    stroke-width: 0.7;
  }

  .blueprint-furniture-label {
    fill: #4f4640;
    font-family: var(--sans);
    font-size: 3.4px;
    font-weight: 750;
  }

  .blueprint-furniture.is-constrained .blueprint-furniture-shape {
    fill: #f1b7a8;
    stroke: var(--danger);
    stroke-width: 1.2;
  }

  .blueprint-no-fit-overlay {
    fill: none;
    stroke: var(--danger);
    stroke-width: 2;
    stroke-dasharray: 4 3;
  }

  .comparison-section,
  .chart-section,
  .guide-section {
    padding: clamp(5rem, 9vw, 9rem) 0;
    border-top: 1px solid var(--rule-strong);
  }

  .comparison-section {
    background: var(--ink);
    color: var(--surface-bright);
  }

  .comparison-section .eyebrow {
    color: #f0a68f;
  }

  .comparison-section h2,
  .comparison-section p {
    color: var(--surface-bright);
  }

  .section-heading {
    max-width: 47rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

  .section-heading .eyebrow {
    margin-bottom: 0.75rem;
  }

  .section-heading > h2,
  .section-heading > div > h2,
  .method-copy > h2,
  .source-panel h2 {
    font-size: clamp(2.25rem, 5vw, 4.7rem);
    line-height: 0.98;
  }

  .section-heading > p {
    max-width: 42rem;
    margin-top: 1rem;
    font-size: 1.05rem;
  }

  .section-heading--split {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.46fr);
    align-items: end;
    gap: clamp(2rem, 7vw, 8rem);
  }

  .section-heading--split > p {
    margin: 0 0 0.35rem;
    color: var(--ink-soft);
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.65vw, 1.35rem);
    line-height: 1.5;
  }

  .comparison-section .section-heading--split > p {
    color: #cdd2d1;
  }

  .comparison-presets {
    margin: 0 0 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
  }

  .comparison-presets > span {
    color: #aeb7b8;
  }

  .comparison-presets button {
    border-color: rgb(255 255 255 / 28%);
    color: #dce1e1;
  }

  .comparison-presets button:hover,
  .comparison-presets button.is-active {
    border-color: var(--surface-bright);
    background: var(--surface-bright);
    color: var(--ink);
  }

  .comparison-picker {
    display: flex;
    min-height: 3.2rem;
    margin-bottom: 1rem;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .comparison-picker button {
    display: grid;
    min-width: 7.2rem;
    min-height: 3rem;
    flex: 0 0 auto;
    padding: 0.52rem 0.7rem;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: var(--radius-sm);
    background: transparent;
    color: #d8dddd;
    gap: 0.05rem;
    text-align: left;
  }

  .comparison-picker button strong {
    font-size: 0.72rem;
  }

  .comparison-picker button small {
    color: #9fa9aa;
    font-family: var(--mono);
    font-size: 0.58rem;
  }

  .comparison-picker button:hover,
  .comparison-picker button[aria-pressed="true"],
  .comparison-picker button.is-active {
    border-color: #f0a68f;
    background: rgb(200 93 63 / 18%);
    color: #fff;
  }

  .comparison-workspace {
    display: grid;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: var(--radius-lg);
    background: #26363b;
    grid-template-columns: minmax(24rem, 0.53fr) minmax(25rem, 0.47fr);
  }

  .comparison-visual {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-right: 1px solid rgb(255 255 255 / 18%);
    background: #203035;
  }

  .comparison-overlay {
    width: 100%;
    height: clamp(24rem, 43vw, 39rem);
  }

  .comparison-visual figcaption {
    margin-top: 0.5rem;
    color: #aeb7b8;
    font-size: 0.68rem;
    text-align: center;
  }

  .comparison-result {
    min-width: 0;
    padding: clamp(1.5rem, 3.5vw, 3rem);
  }

  .comparison-result__lead {
    color: #fff;
    font-family: var(--display);
    font-size: clamp(1.45rem, 2.7vw, 2.4rem);
    line-height: 1.25;
  }

  .comparison-result .table-scroll {
    margin-top: 1.5rem;
  }

  .comparison-table {
    width: 100%;
    border-collapse: collapse;
    color: #e6e9e9;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
  }

  .comparison-table th,
  .comparison-table td {
    min-width: 7rem;
    padding: 0.7rem 0.55rem;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
    text-align: left;
    vertical-align: top;
  }

  .comparison-table thead th {
    color: #fff;
    font-family: var(--display);
    font-size: 0.9rem;
  }

  .comparison-table tbody th {
    min-width: 8rem;
    color: #aeb7b8;
    font-size: 0.63rem;
  }

  .table-action {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-dark);
    font-size: 0.62rem;
    font-weight: 850;
    white-space: nowrap;
  }

  .comparison-table .table-action {
    color: #f0a68f;
  }

  .table-action:hover {
    background: currentColor;
  }

  .dimension-table .table-action:hover {
    background: var(--accent-dark);
    color: #fff;
  }

  .comparison-table .table-action:hover {
    border-color: #f0a68f;
    background: #f0a68f;
    color: var(--ink);
  }

  .comparison-note {
    margin-top: 1rem;
    color: #aeb7b8 !important;
    font-size: 0.69rem;
    line-height: 1.5;
  }

  .comparison-bed-shape {
    stroke-width: 1.2;
  }

  .comparison-bed--0 .comparison-bed-shape,
  .comparison-fallback-queen {
    fill: rgb(240 166 143 / 25%);
    stroke: #f0a68f;
  }

  .comparison-bed--1 .comparison-bed-shape,
  .comparison-fallback-king {
    fill: rgb(122 187 168 / 18%);
    stroke: #7abba8;
  }

  .comparison-bed--2 .comparison-bed-shape {
    fill: rgb(242 206 125 / 17%);
    stroke: #f2ce7d;
  }

  .comparison-headboard-line {
    stroke: rgb(255 255 255 / 45%);
    stroke-width: 0.7;
    stroke-dasharray: 2 2;
  }

  .comparison-bed-label {
    fill: #fff;
    stroke: #203035;
    stroke-width: 2px;
    paint-order: stroke;
    font-family: var(--sans);
    font-size: 5px;
    font-weight: 850;
  }

  .comparison-headboard-axis {
    stroke: #aeb7b8;
    stroke-width: 0.8;
  }

  .comparison-axis-label {
    fill: #aeb7b8;
  }

  .comparison-legend-line {
    stroke-width: 2.2;
  }

  .comparison-legend-line--0 {
    stroke: #f0a68f;
  }

  .comparison-legend-line--1 {
    stroke: #7abba8;
  }

  .comparison-legend-line--2 {
    stroke: #f2ce7d;
  }

  .comparison-legend-label {
    fill: #dce1e1;
    font-family: var(--mono);
    font-size: 3.7px;
  }

  .chart-section {
    background: var(--surface);
  }

  .chart-toolbar {
    display: flex;
    min-height: 4rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .chart-toolbar p {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
  }

  .chart-toolbar strong {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.15rem;
  }

  .chart-toolbar span {
    color: var(--ink-faint);
    font-size: 0.68rem;
  }

  .chart-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .chart-download {
    min-height: 2.45rem;
    padding-block: 0.5rem;
    white-space: nowrap;
  }

  .chart-download > span {
    color: currentColor;
    font-size: inherit;
  }

  .chart-download > span:first-child {
    color: currentColor;
    font-size: 1rem;
    line-height: 1;
  }

  .chart-download small {
    padding: 0.2rem 0.3rem;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    font-family: var(--mono);
    font-size: 0.52rem;
    letter-spacing: 0.05em;
  }

  .chart-download-note {
    margin: 0.65rem 0 0.9rem;
    color: var(--ink-faint);
    font-size: 0.67rem;
    line-height: 1.45;
  }

  .table-scroll {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll--chart {
    contain: inline-size paint;
    border-bottom: 1px solid var(--rule-strong);
  }

  .dimension-table {
    width: 100%;
    min-width: 58rem;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
  }

  .dimension-table th,
  .dimension-table td {
    padding: 1rem 0.8rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    text-align: left;
    vertical-align: middle;
  }

  .dimension-table thead th {
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .dimension-table tbody tr:last-child > * {
    border-bottom: 0;
  }

  .dimension-table tbody tr:hover {
    background: var(--surface-bright);
  }

  .dimension-table tbody th {
    width: 12rem;
    color: var(--ink);
    font-weight: 750;
  }

  .dimension-table tbody th strong,
  .dimension-table tbody th small {
    display: block;
  }

  .dimension-table tbody th small {
    margin-top: 0.15rem;
    color: var(--ink-faint);
    font-size: 0.6rem;
    font-weight: 600;
  }

  .dimension-table td:nth-child(2),
  .dimension-table td:nth-child(3),
  .dimension-table td:nth-child(4) {
    font-family: var(--mono);
    white-space: nowrap;
  }

  .chart-footnote {
    max-width: 65rem;
    margin-top: 1.25rem;
    color: var(--ink-soft);
    font-size: 0.74rem;
    line-height: 1.55;
  }

  .chart-footnote strong {
    color: var(--ink);
  }

  .guide-section {
    background: var(--paper);
  }

  .measure-steps {
    padding: 0;
    border-top: 1px solid var(--rule-strong);
    list-style: none;
  }

  .measure-steps li {
    display: grid;
    padding: 1.65rem 0;
    border-bottom: 1px solid var(--rule-strong);
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 1rem;
  }

  .measure-steps__number {
    color: var(--accent-dark);
    font-family: var(--display);
    font-size: 2.1rem;
    line-height: 1;
  }

  .measure-steps li > div {
    display: grid;
    grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr);
    align-items: baseline;
    gap: clamp(1rem, 5vw, 5rem);
  }

  .measure-steps h3 {
    font-family: var(--display);
    font-size: 1.3rem;
  }

  .measure-steps p {
    max-width: 42rem;
    font-size: 0.88rem;
  }

  .method-grid {
    display: grid;
    margin-top: clamp(5rem, 9vw, 8rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    gap: clamp(3rem, 8vw, 8rem);
  }

  .method-copy .eyebrow {
    margin-bottom: 0.8rem;
  }

  .method-copy > p:not(.eyebrow) {
    max-width: 43rem;
    margin-top: 1.15rem;
    font-size: 0.92rem;
  }

  .method-copy .inline-link {
    display: inline-block;
    margin-top: 1.3rem;
    font-size: 0.8rem;
  }

  .method-facts {
    border-top: 1px solid var(--rule-strong);
  }

  .method-facts > div {
    display: grid;
    min-height: 4.1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule-strong);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }

  .method-facts dt {
    color: var(--ink-faint);
    font-size: 0.68rem;
    font-weight: 800;
  }

  .method-facts dd {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: right;
  }

  .questions {
    display: grid;
    margin-top: clamp(5rem, 10vw, 9rem);
    padding-top: 2rem;
    border-top: 1px solid var(--rule-strong);
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
    gap: clamp(2rem, 8vw, 8rem);
  }

  .questions__heading .eyebrow {
    margin-bottom: 0.6rem;
  }

  .questions__heading h2 {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
  }

  .questions__list {
    border-top: 1px solid var(--rule-strong);
  }

  .questions__list details {
    border-bottom: 1px solid var(--rule-strong);
  }

  .questions__list summary {
    position: relative;
    min-height: 4.3rem;
    padding: 1.1rem 3rem 1.1rem 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
  }

  .questions__list summary::-webkit-details-marker {
    display: none;
  }

  .questions__list summary::after {
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--accent-dark);
    content: "+";
    font-family: var(--sans);
    font-size: 1.35rem;
    transform: translateY(-50%);
  }

  .questions__list details[open] summary::after {
    content: "−";
  }

  .questions__list details p {
    max-width: 45rem;
    padding: 0 3rem 1.3rem 0;
    font-size: 0.83rem;
  }

  .source-panel {
    display: grid;
    margin-top: clamp(5rem, 10vw, 9rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--rule-strong);
    background: var(--surface);
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 7vw, 7rem);
  }

  .source-panel .eyebrow {
    margin-bottom: 0.7rem;
  }

  .source-panel h2 {
    font-size: clamp(2rem, 4.4vw, 3.75rem);
  }

  .source-panel > div:last-child > p {
    font-size: 0.82rem;
  }

  .source-links {
    display: grid;
    margin-top: 1.25rem;
    padding: 0;
    border-top: 1px solid var(--rule);
    list-style: none;
  }

  .source-links li {
    border-bottom: 1px solid var(--rule);
  }

  .source-links a {
    display: flex;
    min-height: 3.2rem;
    color: var(--ink);
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
  }

  .source-links a::after {
    color: var(--accent-dark);
    content: "↗";
  }

  .source-links a:hover {
    color: var(--accent-dark);
  }

  .site-footer {
    padding: 3rem 0;
    border-top: 1px solid var(--rule-strong);
    background: var(--paper-deep);
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto auto;
    align-items: end;
    gap: 2rem;
  }

  .wordmark--footer {
    min-height: auto;
  }

  .site-footer__inner > div > p {
    max-width: 24rem;
    margin-top: 0.55rem;
    font-size: 0.72rem;
  }

  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .site-footer__note {
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.6rem;
    text-align: right;
  }

  .content-dialog {
    width: min(calc(100% - 2rem), 47rem);
    max-height: min(47rem, calc(100dvh - 2rem));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 32px 90px rgb(0 0 0 / 28%);
  }

  .content-dialog::backdrop {
    background: rgb(28 42 48 / 68%);
  }

  .dialog-shell {
    display: flex;
    max-height: min(47rem, calc(100dvh - 2rem));
    flex-direction: column;
  }

  .dialog-shell > header {
    display: flex;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-bright);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .dialog-shell > header .eyebrow {
    margin-bottom: 0.25rem;
  }

  .dialog-shell > header h2 {
    font-family: var(--display);
    font-size: 1.65rem;
    font-weight: 600;
  }

  .dialog-close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    place-items: center;
  }

  .dialog-close:hover {
    background: var(--ink);
    color: var(--surface-bright);
  }

  .dialog-content {
    overflow-y: auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
  }

  .dialog-lede {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.25rem;
    line-height: 1.45;
  }

  .dialog-content h3 {
    margin-top: 1.7rem;
    font-family: var(--display);
  }

  .dialog-content p:not(.dialog-lede) {
    margin-top: 0.5rem;
    font-size: 0.82rem;
  }

  .dialog-content > .field,
  .dialog-content > .room-fields {
    margin-top: 1.2rem;
  }

  .dialog-actions {
    display: flex;
    margin-top: 1.4rem;
    justify-content: flex-end;
    gap: 0.6rem;
  }

  .toast {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 80;
    max-width: min(24rem, calc(100% - 2rem));
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.7rem);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .error-page {
    display: grid;
    width: min(calc(100% - 2rem), 48rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding-block: 4rem;
    align-content: center;
    justify-items: start;
    gap: 1.2rem;
  }

  .error-page__ruler {
    width: min(22rem, 70vw);
    height: 1.15rem;
    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background-image: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 1.4rem);
  }

  .error-page h1 {
    max-width: 10ch;
  }

  .error-page > p:not(.eyebrow) {
    max-width: 36rem;
    font-family: var(--display);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
  }

  .error-page .button {
    margin-top: 0.4rem;
  }

  body:has(dialog[open]) {
    overflow: hidden;
  }
}

@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  [hidden] {
    display: none !important;
  }
}

@layer responsive {
  @media (max-width: 72rem) {
    .sizing-workspace {
      grid-template-columns: minmax(20rem, 0.46fr) minmax(27rem, 0.54fr);
    }

    .result-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-workspace {
      grid-template-columns: minmax(21rem, 0.48fr) minmax(23rem, 0.52fr);
    }
  }

  @media (max-width: 58rem) {
    .tool-intro,
    .section-heading--split {
      grid-template-columns: 1fr;
      gap: 1.4rem;
    }

    .tool-intro__lede,
    .section-heading--split > p {
      max-width: 44rem;
    }

    .sizing-workspace {
      grid-template-columns: 1fr;
      grid-template-areas:
        "controls"
        "result"
        "visual";
    }

    .workspace-controls {
      border-right: 0;
    }

    .workspace-result {
      border-bottom: 1px solid var(--rule);
    }

    .blueprint-stage {
      min-height: 31rem;
    }

    .comparison-workspace {
      grid-template-columns: 1fr;
    }

    .comparison-visual {
      border-right: 0;
      border-bottom: 1px solid rgb(255 255 255 / 18%);
    }

    .comparison-overlay {
      height: clamp(25rem, 78vw, 38rem);
    }

    .method-grid,
    .source-panel {
      grid-template-columns: 1fr;
    }

    .questions {
      grid-template-columns: minmax(10rem, 0.3fr) minmax(0, 1fr);
      gap: 2.5rem;
    }

    .site-footer__inner {
      grid-template-columns: 1fr auto;
    }

    .site-footer__note {
      grid-column: 1 / -1;
      text-align: left;
    }
  }

  @media (max-width: 47.99rem) {
    html {
      scroll-padding-top: 4.65rem;
    }

    body::before {
      background-size: 2rem 2rem;
    }

    .section-shell,
    .section-shell--wide,
    .site-header__inner {
      width: min(calc(100% - 1.2rem), var(--content));
    }

    .site-header__inner {
      min-height: 3.8rem;
    }

    .wordmark__ruler {
      display: none;
    }

    .site-nav {
      gap: 0.75rem;
    }

    .site-nav a {
      font-size: 0.67rem;
    }

    .site-nav a:nth-child(3),
    .site-nav a:nth-child(4) {
      display: none;
    }

    .tool-section {
      padding-top: 2.25rem;
    }

    .tool-intro {
      margin-bottom: 1.7rem;
    }

    h1 {
      max-width: 11ch;
      font-size: clamp(2.65rem, 14vw, 4.5rem);
    }

    .tool-intro__lede {
      font-size: 1.13rem;
    }

    .sizing-workspace {
      overflow: visible;
      border-radius: var(--radius-md);
    }

    .control-strip,
    .control-section,
    .advanced-settings,
    .workspace-result,
    .workspace-visual {
      padding-inline: 1rem;
    }

    .control-strip {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .size-options {
      display: flex;
      margin-inline: -1rem;
      padding-inline: 1rem;
      overflow-x: auto;
      scroll-padding-inline: 1rem;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
    }

    .size-option {
      width: 7.4rem;
      min-width: 7.4rem;
      scroll-snap-align: start;
    }

    .workspace-result {
      order: 2;
    }

    .workspace-visual {
      order: 3;
    }

    .result-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blueprint-heading {
      display: grid;
    }

    .blueprint-actions {
      width: 100%;
    }

    .blueprint-actions .icon-button {
      flex: 1 1 auto;
    }

    .blueprint-stage {
      min-height: min(27rem, 118vw);
    }

    .room-blueprint {
      min-height: min(26rem, 112vw);
    }

    .blueprint-caption {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.3rem;
    }

    .comparison-section,
    .chart-section,
    .guide-section {
      padding-block: 4.5rem;
    }

    .section-heading > h2,
    .section-heading > div > h2,
    .method-copy > h2,
    .source-panel h2 {
      font-size: clamp(2.15rem, 11vw, 3.6rem);
    }

    .comparison-presets {
      margin-inline: -0.6rem;
      padding-inline: 0.6rem;
    }

    .comparison-picker {
      margin-inline: -0.6rem;
      padding-inline: 0.6rem;
    }

    .comparison-workspace {
      margin-inline: -0.6rem;
      border-radius: var(--radius-md);
    }

    .comparison-overlay {
      height: min(31rem, 115vw);
    }

    .chart-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }

    .chart-toolbar__actions {
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .chart-download {
      flex: 1 1 10rem;
    }

    .dimension-table {
      min-width: 53rem;
    }

    .measure-steps li {
      grid-template-columns: 3rem minmax(0, 1fr);
    }

    .measure-steps li > div {
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }

    .method-grid,
    .questions,
    .source-panel {
      margin-top: 4.5rem;
    }

    .questions {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .source-panel {
      padding: 1.2rem;
    }

    .site-footer__inner {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .site-footer nav {
      justify-content: flex-start;
    }

    .site-footer__note {
      grid-column: auto;
    }

    .content-dialog {
      width: 100%;
      max-width: none;
      max-height: 100dvh;
      margin: auto 0 0;
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .dialog-shell {
      max-height: 100dvh;
    }
  }

  @media (max-width: 27rem) {
    .wordmark {
      font-size: 0.72rem;
    }

    .site-nav a {
      font-size: 0.62rem;
    }

    .chart-toolbar__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .chart-toolbar__actions .segmented,
    .chart-download {
      width: 100%;
    }

    .chart-download {
      min-height: 3rem;
      flex: none;
    }

    .control-strip {
      grid-template-columns: 1fr;
    }

    .control-strip .segmented {
      width: 100%;
    }

    .control-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.45rem;
    }

    .control-heading__hint {
      max-width: none;
      text-align: left;
    }

    .room-fields,
    .sleeper-fields {
      grid-template-columns: 1fr;
    }

    .option-list {
      grid-template-columns: 1fr;
    }

    .advanced-settings > summary span {
      display: none;
    }

    .recommendation {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .recommendation > .text-button {
      grid-column: 2;
      justify-self: start;
    }

    .primary-actions .button {
      width: 100%;
    }

    .blueprint-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blueprint-actions .icon-button--wide {
      grid-column: 1 / -1;
    }

    .blueprint-stage {
      min-height: 22rem;
    }

    .room-blueprint {
      min-height: 21rem;
    }

    .comparison-result {
      padding-inline: 1rem;
    }

    .method-facts > div {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }

    .method-facts dd {
      text-align: left;
    }

    .dialog-actions {
      flex-direction: column-reverse;
    }

    .dialog-actions .button {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    .size-option.is-active,
    .segmented__button.is-active,
    .option-list button.is-active,
    .icon-button.is-active {
      border: 2px solid Highlight;
    }

    .blueprint-bed-base,
    .comparison-bed-shape {
      fill: Canvas;
      stroke: CanvasText;
    }

    .blueprint-grid {
      opacity: 0.35;
    }
  }

  @media print {
    .site-header,
    .workspace-controls,
    .primary-actions,
    .blueprint-actions,
    .comparison-section,
    .guide-section,
    .site-footer {
      display: none !important;
    }

    body,
    .tool-section,
    .chart-section {
      background: #fff;
    }

    .sizing-workspace {
      display: block;
      box-shadow: none;
    }

    .workspace-result,
    .workspace-visual {
      border: 0;
    }
  }
}