*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'DM Mono', monospace;
  }

  header { text-align: center; margin-bottom: 16px; }
  header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
  }
  header p.sub {
    margin-top: 10px;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #aaa;
  }

  .rules-box {
    max-width: 680px;
    margin: 24px auto 48px;
    background: #fff;
    border: 2px solid #2a2a3e;
    border-radius: 4px;
    padding: 20px 24px;
    box-shadow: 3px 3px 0 #2a2a3e;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #1c1c2e;
  }
  .rules-box strong { color: #b8391f; }

  .quilts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 56px 40px;
    max-width: 1160px;
    margin: 0 auto;
    justify-items: center;
  }

  .quilt-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .quilt-index {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #b8391f;
  }
   .quilt-container {
	  position: relative;
	  border: 2px solid #2a2a3e;
	  box-shadow: 3px 3px 0 #2a2a3e, 8px 10px 28px rgba(28,28,46,.13);
	  overflow: hidden;
	  flex-shrink: 0;
	  width: fit-content;
	  margin: 20px auto 10px;
	}
  /* Square tiles */
  .sq {
    position: absolute;
    border: 1.5px solid #2a2a3e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: filter .15s;
  }
  
  
  
.sq[contenteditable="true"] {
  cursor: text;
  outline: none;
}
.sq[contenteditable="true"]:focus {
  background: #fffbe6 !important;
  box-shadow: inset 0 0 0 2px #b8391f;
}
  
  
  
  
  
  
  .sq:hover { filter: brightness(0.88); z-index: 20; }

  /* Target square (x²) */
  .sq.target { background: #d4ecff !important; }
  .sq.target:hover { filter: brightness(0.90); }

  .sq .lbl {
    font-family: 'DM Mono', monospace;
    font-weight: 500;
    color: #1c1c2e;
    user-select: none;
    pointer-events: none;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
  }
  .sq .lbl sup {
    font-size: 0.6em;
    vertical-align: super;
  }
  /* x label styling */
  .sq .lbl.x-lbl {
    font-style: italic;
    color: #1a5fa8;
    font-size: inherit;
  }

  /* Answer key section */
  .answer-section {
    max-width: 680px;
    margin: 72px auto 0;
    text-align: center;
  }


  .answer-key {
    display: none;
    margin-top: 36px;
    text-align: left;
    background: #fff;
    border: 2px solid #2a2a3e;
    border-radius: 4px;
    padding: 24px 28px;
    box-shadow: 3px 3px 0 #2a2a3e;
  }
  .answer-key h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 16px;
    color: #1c1c2e;
  }
  .answer-key ol {
    columns: 2;
    column-gap: 40px;
    list-style: decimal;
    padding-left: 20px;
    font-size: 0.85rem;
    line-height: 2.1;
  }
  .answer-key li { break-inside: avoid; }
  .answer-key .ans-val { color: #b8391f; font-weight: 500; }
  .Times {
  	 font-family: 'Playfair Display', serif;
  	 font-style:italic;
  	 font-size:30px;
  }