*{box-sizing:border-box}body{margin:0;background:#f2f5f8;color:#172c42;font:17px/1.6 system-ui,sans-serif}header,main{max-width:1180px;margin:auto;padding:1rem 1.3rem}header{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #c8d4df;font-size:.9rem}a{color:#15577e}h1{font:600 clamp(2.1rem,5vw,3.5rem)/1.15 Georgia,serif}h2,h3{line-height:1.3}.intro{max-width:800px;font-size:1.15rem}#mask-tool{background:white;border:1px solid #bdccd9;border-radius:10px;padding:clamp(1rem,3vw,2rem);margin:2rem 0}#mask-tool .toolbar{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}#mask-tool label{display:block;font-weight:650}#mask-tool input{font:inherit;max-width:100%;width:100%;padding:.55rem;border:1px solid #7b97ad;border-radius:4px;background:white;color:#172c42}#mask-tool input[type=file]{font-size:.95rem}#mask-tool button{font:inherit;background:#175678;border:1px solid #175678;color:white;padding:.6rem 1rem;border-radius:4px;cursor:pointer}#mask-tool button.secondary{background:white;color:#175678}#mask-tool button:disabled{opacity:.5;cursor:not-allowed}#mask-tool canvas{display:block;max-width:100%;height:auto;touch-action:none;outline:1px solid #a9bbc8;outline-offset:0;background:repeating-conic-gradient(#e5e5e5 0 25%,white 0 50%) 0/16px 16px}#mask-tool .coordinates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0}#mask-tool #error{font-weight:650;color:#8b261b}#mask-tool .hint,#mask-tool .privacy{font-size:.92rem;color:#425b70}#mask-tool .privacy{border-top:1px dashed #bbcbd7;padding-top:1rem}#mask-tool #masks{overflow-wrap:anywhere}#mask-tool [hidden]{display:none!important}article.description{max-width:790px;margin:3rem auto}article.description h2{margin-top:2rem}footer{padding:2rem 0}.skip{position:absolute;left:-10000px}.skip:focus{left:1rem;top:1rem;background:white;z-index:2;padding:1rem}a:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #b86c18;outline-offset:4px}@media(max-width:650px){header{flex-direction:column;gap:.3rem}main{padding:1rem}#mask-tool{padding:1rem}#mask-tool .coordinates{grid-template-columns:repeat(2,minmax(0,1fr))}#mask-tool .toolbar button{flex:1 1 150px}}
