:root{font-family:Arial,sans-serif;color:#e9e5d9;background:#121f27;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100dvh;padding:3vw 5vw}header{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:2rem;border-bottom:1px solid #45545a;padding-bottom:2rem}.badge{font-size:.75rem;letter-spacing:.2em;color:#a7cdbb}h1{font-size:clamp(2.4rem,5vw,5rem);line-height:.95;margin:0;font-weight:500;letter-spacing:-.06em}h1 em{color:#f3a46b;font-family:Georgia,serif;font-weight:400}p{line-height:1.6;color:#acb9ba;font-size:.88rem}h2{font-size:1rem;letter-spacing:.08em;text-transform:uppercase}.workspace{display:grid;grid-template-columns:280px 1fr;gap:4vw;margin-top:2rem}aside{border-right:1px solid #45545a;padding-right:2rem}label{display:block;font-size:.8rem;margin:.7rem 0;color:#b9d0c5}input,select,textarea{display:block;width:100%;background:#21323a;color:#fff;border:1px solid #607173;border-radius:5px;padding:.5rem;margin-top:.4rem}input[type=color]{height:2.4rem}input[type=range]{accent-color:#edaa73}button{background:#253d42;color:#f5e8d9;border:1px solid #587273;padding:.7rem .8rem;border-radius:6px;font:inherit;font-size:.8rem;cursor:pointer;transition:background .2s,transform .2s}button:hover{background:#3f5c5d;transform:translateY(-1px)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #f3a46b;outline-offset:3px}.primary{background:#efac79;color:#17282c}.row{display:flex;gap:.5rem;flex-wrap:wrap}.row label{flex:1;min-width:60px}.hint,.caption{font-size:.75rem}.preview{width:min(100%,660px);aspect-ratio:1;margin:auto;position:relative;background:repeating-conic-gradient(#69736c 0 25%,#3c4841 0 50%) 0/16px 16px;box-shadow:0 12px 50px #080e1380}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation}.seam{position:absolute;background:#c1f3ce70;pointer-events:none}.vertical{top:0;bottom:0;width:1px}.horizontal{left:0;right:0;height:1px}.vertical.one{left:33.333%}.vertical.two{left:66.666%}.horizontal.one{top:33.333%}.horizontal.two{top:66.666%}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #45545a;padding-top:1rem;gap:1rem}.stats b{display:block;font-family:Georgia,serif;font-size:2rem;color:#f3bf89}.stats span{font-size:.72rem;color:#b4c3be}.success{color:#b0dbb6}.error{color:#ffad98}.source{margin-top:3rem;border-top:1px solid #45545a;padding-top:1rem}.source p{max-width:850px}textarea{min-height:150px;font:12px monospace;margin:1rem 0}footer{margin-top:2rem;border-top:1px solid #45545a;padding-top:1rem}footer p{max-width:900px;font-size:.75rem}@media(max-width:800px){header{grid-template-columns:1fr}header p{margin:0}.workspace{grid-template-columns:1fr}aside{border-right:0;padding-right:0}.stats b{font-size:1.4rem}main{padding:1.2rem}}@media(prefers-reduced-motion:reduce){button{transition:none}button:hover{transform:none}}.mask-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}