:root{font-family:Arial,sans-serif;color:#dddccd;background:#181f25;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100dvh;padding:25px 4vw 20px}header{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;border-bottom:1px solid #4a5152;padding-bottom:18px}.brand{color:#f5ce77;font-weight:700}.title{display:flex;justify-content:space-between;align-items:end;padding:28px 0}.eyebrow{font-size:10px;letter-spacing:3px;color:#c3ac77}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4vw,64px);line-height:.97;margin:10px 0}h1 em{color:#f2ca7a}.lede{line-height:1.7;font-size:13px;color:#a7b0b0}.workspace{display:grid;grid-template-columns:230px minmax(280px,1fr) 235px;gap:28px}aside{border-top:1px solid #59605d}h2{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#e3c68c;margin:20px 0 15px}label{display:block;font-size:11px;line-height:1.8;margin:9px 0}input:not([type=checkbox]),select{display:block;width:100%;background:#242e34;color:#ece2cc;border:1px solid #4c595e;border-radius:3px;padding:8px;margin:4px 0}input[type=range]{accent-color:#e7c77e;padding:0}input[type=checkbox]{accent-color:#e7c77e}.row{display:flex;gap:7px;align-items:end}.row>*{min-width:0;flex:1}.rgba input{padding:6px 2px}.hint{color:#9da9aa;font-size:10px;line-height:1.6}button,.file{background:transparent;border:1px solid #566264;color:#e8e2d2;border-radius:3px;padding:9px;font:inherit;font-size:10px;cursor:pointer}button:hover,.active{background:#364249;color:#ffda91}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffd377;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:#edce8a;color:#1b272c}.viewtabs{display:flex;gap:5px;margin-bottom:12px}.viewtabs button{text-transform:uppercase;letter-spacing:1px;flex:1}.picture{position:relative;touch-action:none;cursor:crosshair;aspect-ratio:1;background:repeating-conic-gradient(#242d34 0 25%,#2c353b 0 50%) 0/20px 20px}.picture canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.corner{position:absolute;bottom:12px;left:12px;background:#172127bd;padding:7px;font-size:8px;letter-spacing:2px;pointer-events:none}.artcaption{display:flex;justify-content:space-between;gap:8px;font-size:9px;padding:14px 0;color:#c8b990}.artcaption span+span{font-size:7px;letter-spacing:1px}.minis{display:flex;gap:12px}.minis>div{flex:1}.minis canvas{width:100%;image-rendering:pixelated;max-height:130px;object-fit:contain;background:#232d34}.minis span{display:block;font-size:9px;margin-top:7px;color:#a6b4b7}.compass{height:125px;width:125px;border:1px solid #666657;border-radius:50%;margin:12px auto;display:grid;place-items:center;background:radial-gradient(circle,#374846,#202b31)}.compass span{font-size:63px;line-height:1;color:#f3cf82;transform:rotate(var(--turn));transition:transform .12s}.bands{display:grid;grid-template-columns:1fr 1fr}footer{border-top:1px solid #4c5859;margin-top:28px;padding-top:20px;font-size:11px}.exports{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.file{margin:0}.file input{max-width:180px;font-size:9px}.privacy{font-size:10px;color:#99a6a7}.privacy button{padding:4px}.warning{color:#f6cb78}@media(max-width:1000px){.workspace{grid-template-columns:190px minmax(250px,1fr)}.workspace>aside:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.title .lede{max-width:250px}}@media(max-width:650px){main{padding:18px}.workspace{display:flex;flex-direction:column}.art{order:-1}.title{display:block}.lede{display:none}header>div:nth-child(2){display:none}.workspace>aside:last-child{display:block}.row button{height:35px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}