html,body { height:100%; margin:0; padding: 0; height: auto; overflow-y: auto; }
  body{
    background:#1014eb;
    font-family: Arial, sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    color:#000;
  }

  .wrap {
    width:100%;
    max-width:820px;
    background: rgba(255,255,255,0.92);
    border-radius:10px;
    padding:18px;
    box-sizing:border-box;
    text-align:center;
  }

  h1 { 
  margin:6px 0 12px; 
  font-size:22px; 
  }
  
  label { 
	display:block; 
	font-weight:600; 
	margin-top:10px; 
	text-align:left; 
  }
  
  .row {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 15px;
  }
  
  .field {
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  
  .field label {
	font-weight: bold;
	margin-bottom: 5px;
  }

  .field input {
	width: 120px;
	padding: 6px;
	text-align: center;
	font-size: 20px;
  }

  .col {
	flex:1; 
	min-width:90px; 
  }
  
  input[type="number"], input[type="text"], select {
    width:100%;
    padding:8px 6px;
    box-sizing:border-box;
    font-size:15px;
    border:1px solid #aaa;
    border-radius:6px;
  }
  
  button {
    padding:8px 12px;
    margin:6px 6px 0 6px;
    cursor:pointer;
    border-radius:6px;
    border:1px solid #333;
    background:#fff;
    font-size:14px;
  }

  .controls { 
	margin-top:12px; 
  }
  
  .resultBox {
    margin-top:14px;
    background: rgba(13,124,255,0.06);
    border-radius:8px;
    padding:12px;
    text-align:left;
  }

  .bigDate { font-weight:800; font-size:25px; margin-bottom:8px; display:block; text-align:center; }
  pre { white-space:pre-wrap; word-wrap:break-word; font-size:14px; background:rgba(0,0,0,0.03); padding:16px; border-radius:8px; }

  .hint { font-size:13px; color:#333; margin-top:8px; text-align:center; }

  .center { text-align:center; }
  .small { font-size:13px; color:#333; }
  .tab {
    margin-top:12px;
    text-align:left;
  }
  
  #howToSolve {
	display: note;
	max-height: 500px;
	overflow-y: auto;
	padding: 20px;
	margin-top: 20px;
	
	white-space: pre-wrap;
	text-align: left;
  }

  @media (max-width:560px){
    .row { flex-direction:column; }
    .col { min-width:0; }
  }