:root{font-family:Arial,sans-serif;color:#e8e3d9;background:#172624;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;padding:35px 4vw}header{grid-column:1/-1;position:relative;border-bottom:1px solid #52625b;padding-bottom:24px}.eyebrow{font-size:11px;letter-spacing:4px;color:#d6b67d}h1{font-family:Georgia,serif;font-size:clamp(58px,7vw,110px);line-height:.88;letter-spacing:-5px;margin:30px 0 20px}h1 i{color:#eaaa83;font-weight:400}header>button{position:absolute;right:0;bottom:30px}h2{font-family:Georgia,serif;font-weight:400;font-size:28px}button,input,select,textarea{font:inherit}button{cursor:pointer;background:transparent;color:inherit;border:1px solid #65726b;padding:11px 15px;border-radius:3px}button:hover,button[aria-pressed=true]{background:#eaaa83;color:#172624}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ffd283;outline-offset:3px}.labels{display:grid;grid-template-columns:1fr 1fr;font-size:11px;letter-spacing:2px;margin-bottom:12px}canvas{width:100%;height:auto;display:block;image-rendering:pixelated;border:10px solid #e8e3d9}.verdict{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;padding:18px 0;border-bottom:1px solid #52625b}.pass strong{color:#b9dca5}.fail strong{color:#ffb7a6}.caption,small{font-size:12px;line-height:1.6;color:#bec9c0}aside{background:#233732;padding:22px}label{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0;font-size:13px}label span{width:100%;color:#bec9c0;font-size:11px}input[type=color]{width:60px;height:35px;padding:2px;margin-left:auto}input[type=number],select{background:#172624;color:#eee;border:1px solid #65726b;padding:9px;max-width:100%}label input[type=number]{width:100px;margin-left:auto}select{width:100%}.accent{background:#eaaa83;color:#172624;width:100%;margin-bottom:18px}aside p,.exports p,.editor p{font-size:13px;line-height:1.6;color:#bec9c0}.tools{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.tools input{width:90px}.mask{display:grid;grid-template-columns:repeat(24,1fr);width:min(100%,520px);border:8px solid #e8e3d9}.mask button{aspect-ratio:1;padding:0;border:1px solid #ffffff18;border-radius:0}.mask button:hover{outline:2px solid white;z-index:1}.exports>button{margin:4px}textarea{width:100%;height:150px;background:#10201d;color:#eee;border:1px solid #65726b;padding:12px;font-family:monospace}footer{grid-column:1/-1;border-top:1px solid #52625b;padding:22px 0;font-size:10px;letter-spacing:3px;line-height:2}summary{cursor:pointer}@media(max-width:900px){main{grid-template-columns:1fr;padding:20px}header>button{position:static}h1{letter-spacing:-3px}aside{grid-row:3}canvas{border-width:4px}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s,color .12s}}main.focus{grid-template-columns:1fr}main.focus header h1{font-size:50px}main.focus aside,main.focus .editor,main.focus .exports,main.focus footer{display:none}