Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
3.2 kB · 7 lines
CSS
12345678:root{font-family:Arial,Helvetica,sans-serif;color:#f4f1dc;background:#101716;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1150px;margin:auto;padding:36px 44px}header,footer,.transport{display:flex;align-items:center;justify-content:space-between;gap:20px}header{font:12px monospace;letter-spacing:.12em;color:#a0b5a9;border-bottom:1px solid #34423a;padding-bottom:20px}.hero{display:flex;justify-content:space-between;align-items:center;min-height:340px;gap:24px}h1{font-size:clamp(110px,18vw,210px);line-height:.8;letter-spacing:-.09em;margin:34px 0 25px}h1 span{color:#deef8b}p{font-size:24px;margin:12px 0}.muted{font-size:15px;color:#a5b8ac}.orb{width:220px;height:220px;border:1px solid #6e826b;border-radius:50%;display:grid;place-items:center}.orb div{width:140px;height:140px;border:1px solid #8f9e76;border-radius:50%;background:#1d2d22;transition:background .08s,transform .08s}.orb.active div{background:#deef8b;transform:scale(1.08)}button,select{font:inherit;border:1px solid #657461;border-radius:5px;background:#233226;color:inherit;padding:15px 22px;cursor:pointer}button:first-child{background:#deef8b;color:#182218;border-color:#deef8b;font-weight:bold}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:4px}.transport{justify-content:flex-start;border-bottom:1px solid #34423a;padding:10px 0 30px}.transport output{margin-left:auto;font:20px monospace;white-space:nowrap}.controls{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;padding:36px 0}label{font-size:16px}label output{float:right;color:#deef8b;font:16px monospace}input,select{display:block;width:100%;margin-top:17px;accent-color:#deef8b}select{padding:10px}footer{border-top:1px solid #34423a;padding-top:20px;font-size:12px;color:#a5b8ac}a{color:#deef8b}@media(max-width:700px){main{padding:22px}.hero{min-height:270px}.orb{width:125px;height:125px;flex-shrink:0}.orb div{width:80px;height:80px}.transport{flex-wrap:wrap}.transport output{margin:0}.controls{gap:25px;grid-template-columns:1fr}footer{align-items:flex-start}h1{font-size:110px}p{font-size:20px}}
#performance{display:block;width:100vw;height:100vh;image-rendering:pixelated;background:#0c0f17} .performance-actions{position:fixed;right:18px;bottom:16px;display:flex;gap:10px}.performance-actions button{font:12px monospace;padding:9px 12px;background:#121c27;color:#b8c7dd;border-color:#344253}dialog{width:min(1180px,96vw);max-height:94vh;padding:0;border:1px solid #53604e;background:#101716;color:#f4f1dc}dialog::backdrop{background:#000b}#closeSettings{position:absolute;right:18px;top:13px;padding:7px 14px;font-size:12px}dialog main{padding-top:55px}dialog .hero{min-height:240px}dialog h1{font-size:130px}dialog .orb{width:150px;height:150px}dialog .orb div{width:100px;height:100px}dialog footer{padding-bottom:12px}
body.concert .performance-actions{display:none}#concert{position:absolute;left:18px;top:13px;padding:7px 14px;font-size:12px}
html:has(body.concert),body.concert,body.concert *{cursor:none!important}body.concert dialog[open],body.concert dialog[open] *{cursor:auto!important}