@font-face{font-family:Terminus;src:url('Terminus/TerminessNerdFontMono-Regular.ttf') format('truetype');font-weight:400}
@font-face{font-family:Terminus;src:url('Terminus/TerminessNerdFontMono-Bold.ttf') format('truetype');font-weight:700}
:root{--bg:#0a0a0a;--fg:#eaeaea;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Terminus,monospace;font-size:16px}
button,input{font:inherit;color:var(--fg);background:var(--bg)}
.shell{width:min(1180px,calc(100% - 24px));margin:auto;padding:14px 0 28px}
.ascii-box{position:relative;border:1px solid var(--fg);padding:14px}
.ascii-box::before{content:"+";position:absolute;top:-10px;left:-5px;background:var(--bg);line-height:1}
.ascii-box::after{content:"+";position:absolute;right:-5px;bottom:-10px;background:var(--bg);line-height:1}
.hero{margin-bottom:18px;display:flex;align-items:center;justify-content:center;padding:10px 14px}
h1{margin:0;font-size:56px;line-height:1;font-weight:400;letter-spacing:0;text-transform:lowercase;display:flex;align-items:center;gap:12px}h1 img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}
h2{margin:0;font-size:16px;font-weight:400;text-transform:lowercase}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.panel-head span,.status,label{font-size:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px 280px;gap:18px;align-items:start}.right-col{display:grid;gap:18px}.swatch-card{display:grid;grid-template-rows:150px auto;gap:10px}.big-swatch{background:red}.big-swatch,canvas,input,button,.code-row,.chip{border:1px solid var(--fg)}#swatch-name{font-size:22px}canvas{display:block;width:100%;cursor:crosshair;touch-action:none}#spectrum{height:auto;aspect-ratio:960/430}#value{height:auto;aspect-ratio:960/60;margin-top:10px}.formats,.manual-grid{display:grid;gap:8px}.formats{margin-bottom:20px}.code-row{display:grid;grid-template-columns:48px 1fr auto;gap:8px;align-items:center;padding:7px}.code-row b{font-weight:400}.code-row code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}button{padding:6px 9px;cursor:pointer;text-transform:lowercase}button:hover,button:focus{background:var(--fg);color:var(--bg);outline:0}input{width:100%;padding:8px;outline:0}input:focus{box-shadow:0 0 0 1px var(--fg)}label{display:grid;gap:4px;text-transform:lowercase}.palette-panel{margin:0}.actions{display:flex;gap:8px;flex-wrap:wrap}.seeds,.palette{display:grid;grid-template-columns:1fr;gap:8px}.seeds{margin-bottom:10px}.chip{min-height:70px;padding:7px;display:flex;align-items:flex-end;color:#fff;text-shadow:0 1px 4px #000}.palette .chip{min-height:92px}.repo-link{margin-top:18px;text-align:center}.repo-link a{color:var(--fg);font-size:24px;text-decoration:none}.repo-link a:hover{text-decoration:underline}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 320px}.right-col{grid-column:1/-1;grid-template-columns:280px 1fr}.seeds,.palette{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}}@media(max-width:760px){.workspace,.right-col{grid-template-columns:1fr}.hero{height:58px}h1{font-size:24px}}