@import url('https://fonts.cdnfonts.com/css/news-gothic-mt');:root{--black:#062732;--white:#FFEABD}
html,body{margin:0;font-family:'News Gothic MT',sans-serif;background:var(--white)}
h1{margin:20px 10px 40px}
header{background:var(--black);color:var(--white);padding:30px 30px 10px;text-align:center}
main{background:var(--white);padding:30px;display:flow-root}
.sep{display:block;background:var(--black);position:relative;width:100%;height:30px}
.sep:before{background:linear-gradient(45deg,transparent 33.333%,var(--black) 33.333%,var(--black) 66.667%,transparent 66.667%),linear-gradient(-45deg,transparent 33.333%,var(--black) 33.333%,var(--black) 66.667%,transparent 66.667%);background-size:20px 40px;content:"";display:block;position:absolute;bottom:-10px;width:100%;height:10px;transform:rotate(180deg)}
span.color { padding: .5rem; margin: .25rem; text-transform: capitalize; border: solid 2px; }
table.colors tr:nth-child(2) { border: solid .1rem black; display: flex; width: fit-content; font-size: .6rem; margin:-7px 6px 10px; width:calc(100% - .75rem) }
table.colors[data-rating="5"] tr:nth-child(2), .ok { background: #d2fbd0; color: #0d5f07}
table.colors[data-rating="4"] tr:nth-child(2) { background: #d2fbd0; color: #0d5f07}
table.colors[data-rating="3"] tr:nth-child(2) { background: #fbf5d0; color: #5f5207}
table.colors[data-rating="2"] tr:nth-child(2) { background: #fbd0da; color: #5f071c}
table.colors[data-rating="1"] tr:nth-child(2), .ko { background: #fbd0da; color: #5f071c}
table.colors { float: left } td { display: flex }
td.contrast { display: block; font-weight: bold; font-size: 1rem; margin: .25rem; width: 50% }
td.contrast span { font-size: 1.4rem }
td.accessibility { display: block; font-weight: bold; font-size: .8rem; margin: .25rem; text-align: right;width: 50% }
h2 { clear: both; padding: 1%; text-align: left; }
h3 { font-size: 1.6rem; text-transform: uppercase; text-align: center; }
#criteria,#nbColors{display:inline}
.form-section { margin: 20px 0; }
.input-group { margin: 10px 0; }
.brand-context { margin-top: 30px; border-top: 2px solid var(--black); padding-top: 20px; }
.brand-context h2 { margin-top: 0; font-size: 1rem; color: var(--white); font-weight: bold; text-align: left; clear: both; padding: 1%; }
.context-inputs { display: flex; gap: 20px; flex-wrap: wrap; }
.context-inputs .input-group { flex: 1; min-width: 200px; }
.input-group label { display: block; margin-bottom: 5px; font-size: 0.9rem; }
.input-group select { width: 100%; padding: 8px; border: 2px solid var(--black); border-radius: 5px; background: var(--white); font-size: 0.9rem; }
.recommendation-content { padding: 10px 0; }
#generate-palette { 
  background: var(--white); 
  color: var(--black); 
  border: 3px solid var(--white); 
  outline: 2px solid var(--black);
  padding: 12px 24px; 
  border-radius: 8px; 
  cursor: pointer; 
  font-weight: bold; 
  font-size: 1.1rem;
  margin: 15px 0; 
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#generate-palette:hover { 
  background: var(--black); 
  color: var(--white); 
  border: 3px solid var(--white);
  outline: 2px solid var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
#generate-palette:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.recommendation-section { margin: 30px 0; padding: 20px; background: #f5f5f5; border-radius: 10px; }
.font-suggestion { margin: 10px 0; padding: 15px; border: 2px solid var(--black); border-radius: 5px; background: var(--white); }
.font-example { font-size: 24px; margin: 10px 0; }
.logo-suggestion { margin: 15px 0; padding: 20px; border: 2px solid var(--black); border-radius: 5px; background: var(--white); }
.logo-concept { font-size: 18px; margin: 10px 0; padding: 10px; border-left: 4px solid var(--black); }
.logo-icons { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.logo-icon { font-size: 1.5rem; padding: 8px; border: 1px solid #ddd; border-radius: 5px; background: #f9f9f9; cursor: pointer; transition: transform 0.2s; }
.logo-icon:hover { transform: scale(1.1); background: #e9e9e9; }
.usage-category { margin: 20px 0; padding: 15px; border-left: 4px solid var(--black); background: #f9f9f9; border-radius: 5px; }
.usage-category h4 { margin: 0 0 10px 0; color: var(--black); font-size: 1.1rem; }
.usage-category p { margin: 5px 0; color: #555; }
.color-demo { margin: 10px 0; border-radius: 5px; }
.font-fallback { background: #f0f0f0; padding: 8px; border-radius: 3px; margin-top: 8px; font-family: monospace; }
.font-fallback strong { color: var(--black); }
.lock-hint { font-size: 0.9rem; color: #666; margin: 10px 0; }
.lock-button { 
  background: none; 
  border: none; 
  font-size: 1.2rem; 
  cursor: pointer; 
  padding: 5px; 
  border-radius: 3px; 
  margin-left: 5px;
  transition: background-color 0.2s;
}
.lock-button:hover { background-color: rgba(0,0,0,0.1); }
.lock-button.locked { color: #d2691e; }
.lock-button.unlocked { color: #ccc; }
div.color { position: relative; }
.color-controls { display: flex; align-items: center; justify-content: center; gap: 5px; }
#colors { display: flex; width: 100%; } div.color { width: 100%; break-inside: avoid; }
label.color { font-size: 1rem; display: block; text-align:center; position: relative; top: 2.5rem; font-weight: bold; text-transform: uppercase; }
label.color.white{color:var(--white)} label.color.dark {color:var(--black)}
button.color { display: block; height: 1.2rem } input.color { height: 4rem}
button.color, input.color { margin: 0 .25rem; width: calc(100% - .5rem) }
@media only screen and (max-width: 1024px) {
  #colors { display: inline-block; columns: 4 }
}
@media only screen and (max-width: 600px) {
  #colors { display: inline-block; columns: 2 }
}
#nb{margin:0 auto;top:17px;position:relative;width:200px;font-size:20px;font-weight:bold;color:var(--black);height:50px;-webkit-appearance:none;background:transparent}
#nb:before{position:relative;cursor:pointer;top:14px}
#nb.n2:before{content:'2';left:23px}#nb.n3:before{content:'3';left:45px}
#nb.n4:before{content:'4';left:66px}#nb.n5:before{content:'5';left:88px}
#nb.n6:before{content:'6';left:111px}#nb.n7:before{content:'7';left:133px}
#nb.n8:before{content:'8';left:155px}#nb.n9:before{content:'9';left:178px}
.c,.a{margin:0 auto;text-align:-webkit-center}
:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;animate:0.2s;box-shadow:1px 1px 1px var(--black);background:var(--white);border-radius:5px;border:2px solid var(--black)}
input[type=range]::-webkit-slider-thumb{box-shadow:2px 2px 2px var(--black);border:2px solid var(--black);height:30px;width:30px;border-radius:5px;background:var(--white);cursor:pointer;-webkit-appearance:none;margin-top:-12px}
input[type=range]:focus::-webkit-slider-runnable-track{background:var(--white)}
input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;animate:0.2s;box-shadow:1px 1px 1px var(--black);background:var(--white);border-radius:5px;border:2px solid var(--black)}
input[type=range]::-moz-range-thumb{box-shadow:2px 2px 2px var(--black);border:2px solid var(--black);height:30px;width:30px;border-radius:5px;background:var(--white);cursor:pointer}
input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;animate:0.2s;background:transparent;border-color:transparent;color:transparent}
input[type=range]::-ms-fill-lower{background:var(--white);border:2px solid var(--black);border-radius:10px;box-shadow:1px 1px 1px var(--black)}
input[type=range]::-ms-fill-upper{background:var(--white);border:2px solid var(--black);border-radius:10px;box-shadow:1px 1px 1px var(--black)}
input[type=range]::-ms-thumb{margin-top:1px;box-shadow:2px 2px 2px var(--black);border:2px solid var(--black);height:30px;width:30px;border-radius:5px;background:var(--white);cursor:pointer}
input[type=range]:focus::-ms-fill-lower{background:var(--white)}
input[type=range]:focus::-ms-fill-upper{background:var(--white)}
details{display:block;width:100%;margin:10px 0;clear:both}
details summary{display:block;background:var(--black);color:var(--white);border-radius:5px;padding:5px;cursor:pointer;text-align:left;font-weight:bold;font-size:24px}
details summary:after{content:"+";color:var(--white);float:left;font-size:1.5em;font-weight:bold;margin:-7px 5px 0;padding:0;text-align:center;width:20px}
details[open] summary:after{content:"-";margin:-10px 5px 0}
details div{display:flow-root}
label{font-weight:bold;font-size:24px}