:root{color-scheme:dark;font:15px/1.5 system-ui,sans-serif;background:#10151d;color:#e7eaf0}*{box-sizing:border-box}body{margin:0}main{max-width:1150px;margin:auto;padding:clamp(12px,3vw,32px)}header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}header p{color:#abb6c6;margin:.3rem 0}header small{white-space:nowrap;color:#8f9cae}.eyebrow{font-size:.72rem;letter-spacing:.16em;color:#7fc7c4!important;font-weight:700}h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:0}h2{font-size:1.15rem;margin:0 0 12px}.panel{background:#1a222e;border:1px solid #344252;border-radius:12px;padding:20px;margin:14px 0;min-width:0}.panel>p{color:#afbdcc;margin:4px 0 16px}.panel .hint{font-size:.9rem}.fields,.toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:12px 0}.fields label{min-width:140px;flex:1}.panel label{display:inline-flex;flex-direction:column;gap:5px;color:#d4e0e8;font-size:.9rem}input,select,button{font:inherit;color:inherit;background:#111925;border:1px solid #657b91;border-radius:6px;padding:8px;max-width:100%}input[type=checkbox]{width:18px;height:18px}label:has(input[type=checkbox]){flex-direction:row;align-items:center}input[type=file]{max-width:280px}button{cursor:pointer;background:#273f54;min-height:40px}button:hover{background:#375d71}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #83ded9;outline-offset:2px}#pattern-view{overflow-x:auto;padding:8px;background:#121a24;border-radius:8px;min-height:100px}#pattern-view [role=grid]{gap:3px}#pattern-view [role=gridcell]{min-width:80px;font-size:.85rem;text-align:left}#pattern-view fieldset{border:1px solid #3b5063;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}#pattern-view fieldset input{width:105px}#sample-edit{margin-top:12px;overflow:hidden}#sample-edit canvas{background:#101925}#sample-edit>button{margin:8px 5px 0 0}#status{display:block;position:sticky;bottom:0;background:#18372f;border:1px solid #477d6d;border-radius:8px;padding:10px 16px;min-height:44px;z-index:2}#status.error{background:#532a30;border-color:#e28c87}@media(max-width:650px){header{display:block}header small{display:block;margin-top:12px}.panel{padding:14px}.toolbar{align-items:stretch}.toolbar>button,.toolbar>label{flex:1 1 130px}.fields label{flex:1 1 130px}#pattern-view [role=gridcell]{min-width:72px}}