:root{font-family:Inter,system-ui,sans-serif;color:#e7e6da;background:#101a24;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;padding:3vw}header{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #58636b;padding-bottom:24px}h1{font-size:clamp(32px,5vw,76px);line-height:.95;letter-spacing:-.05em;margin:18px 0}small{letter-spacing:.25em;color:#e4d47a}p{line-height:1.6;color:#acb9be}h2{font-weight:500}.work{display:grid;grid-template-columns:2fr 1fr;gap:30px;margin:35px 0}.art svg,canvas{display:block;width:100%;height:auto}.art{border:1px solid #334550;animation:arrive .7s ease-out}canvas[hidden]{display:none}.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.tags span{border-left:3px solid;padding:7px 12px;font-size:12px}button{background:#1d303d;border:1px solid #5e7379;border-radius:5px;color:#fff;padding:11px 14px;cursor:pointer}button:hover{background:#385261}button:disabled{opacity:.4;cursor:not-allowed}.buttons{display:flex;flex-wrap:wrap;gap:10px}label{display:block;margin:18px 0}input{display:block;width:100%;accent-color:#e4d47a}textarea{width:100%;height:360px;background:#0b131b;color:#d2dfdf;border:1px solid #567078;padding:20px;tab-size:2;font:14px/1.5 monospace;margin-bottom:15px}.source,footer{border-top:1px solid #334550;padding:20px 0}button:focus-visible,textarea:focus-visible{outline:3px solid #e4d47a;outline-offset:3px}@keyframes arrive{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-width:800px){.work{grid-template-columns:1fr}header{display:block}main{padding:20px}}.focus .work{grid-template-columns:1fr}.focus aside,.focus .source,.focus footer,.focus header{display:none}.focus .art svg{height:calc(100vh - 180px);width:100%}.focus main{padding:0}
