body { 
	font-family: "Courier New", Courier, monospace; 
	background: #000000;
	color: white; display:
	flex; flex-direction: column;
	align-items: center; padding: 100px; 
}

      
table { 
	border-collapse: collapse;
	background: black;
	color: #555;
	box-shadow: 2px 2px 100px rgba(255,255,255,0.05);
}
        
td { 
          position: relative; /* Required for absolute positioning of controls */
          width: 200px; 
          height: 200px; 
          padding: 10px; 
          vertical-align: middle; 
          text-align: left; 
          transition: background 0.5s;
      }
td:hover { background: rgba(255,255,255,0.03); }

.title { 
	font-weight: bold;
	color: #f8f8f8;
	display: block;
	text-align: center;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 1.0rem; 
}

      .keywords { 
	font-weight: normal;
	color: #e8e8e8;
	display: block;
	text-align: center;
	margin-bottom: 5px;
	
	font-size: 0.9rem; 
}
      
.desc { 
	font-style: italic;
	color: #444;
	display: block;
	text-align: center;
	font-size: 0.8rem;
}

/* BORDER STATES - We use !important to override the table's collapse logic */
      .border-hidden-top    { border-top: 4px solid #0000!important; }
      .border-hidden-bottom { border-bottom: 4px solid #0000 !important; }
      .border-hidden-left   { border-left: 4px solid #0000 !important; }
      .border-hidden-right  { border-right: 4px solid #0000 !important; }

      .border-double-top    { border-top: 4px double white !important; }
      .border-double-bottom { border-bottom: 4px double white !important; }
      .border-double-left   { border-left: 4px double white !important; }
      .border-double-right  { border-right: 4px double white !important; }

      .border-dotted-top    { border-top: 4px dotted white !important; }
      .border-dotted-bottom { border-bottom: 4px dotted white !important; }
      .border-dotted-left   { border-left: 4px dotted white !important; }
      .border-dotted-right  { border-right: 4px dotted white !important; }


      /* The Control Menu (Hidden by default) */
      .edge-controls {
          position: absolute;
          top: -10px; left: -10px; right: -10px; bottom: -10px;
          display: grid;
          grid-template-columns: 16px 1fr 16px;
          grid-template-rows: 16px 1fr 16px;
          opacity: 0; transition: opacity 0.5s;
          pointer-events: none; /* Allows clicking text unless hovering */
      }
      td:hover .edge-controls { opacity: 1; pointer-events: all; }

      /* Control Buttons (Invisible zones) */
      .ctrl { 
          background: rgba(255, 255, 255, 0); 
           
          font-size: 3px; 
          display: flex; align-items: center; justify-content: center;
          color: #FFFF; font-weight: bold;
      }
      .ctrl:hover { background: rgba(255, 255, 255, 0.15); color: white; }

      /* Positioning the controls on the grid */
      .ctrl-t { grid-column: 2; grid-row: 1; } /* Top */
      .ctrl-b { grid-column: 2; grid-row: 3; } /* Bottom */
      .ctrl-l { grid-column: 1; grid-row: 2; } /* Left */
      .ctrl-r { grid-column: 3; grid-row: 2; } /* Right */

      /* Text Content (ensure it stays below controls) */
      .content { position: relative; z-index: 1; pointer-events: none; }
      
button { font-family: "Courier New", Courier, monospace; padding: 10px 20px; cursor: pointer; margin-bottom: 20px; background: #000000; border: none; color: white; font-weight: bold; border-radius: 5px; box-shadow: 2px 2px 100px rgba(255,255,255,0.125); }
      h1 { margin-bottom: 10px; }

@media print {
	/* Force background colors to print */
	body { 
		background: white !important; 
		color: black !important; 
		padding: 0 !important; 
	}
	
	h1, button, .controls { 
		display: none !important; /* Hide UI elements on paper */
	}

	table { 
		background: white !important; 
		color: black !important; 
		box-shadow: none !important;
		border-collapse: collapse !important;
	}

	td { 
		color: black !important; 
		border: 1px solid #ccc !important; /* Light grid for structure */
	}

	.keywords, .desc { 
		color: black !important; 
	}

	/* Force the dynamic borders to show as solid black lines */
	.border-top, .border-bottom, .border-left, .border-right,
	.border-dotted-top, .border-dotted-bottom, .border-dotted-left, .border-dotted-right { 
		border-color: black !important; 
		border-style: solid !important; /* Dotted often disappears on print */
		border-width: 3px !important;
	}

	/* Hide the invisible control buttons so they don't occupy space/render */
	.edge-controls { 
		display: none !important; 
	}
}