:root{color-scheme:light;--ink:#20324a;--blue:#2869c7;--line:#bdcbdc;--muted:#59677b;font-family:"Yu Gothic","Meiryo",sans-serif;color:var(--ink);background:#f1f5fa;font-size:16px}*{box-sizing:border-box}body{margin:0}header{max-width:1200px;margin:auto;display:flex;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}a{color:#1d58ac;text-underline-offset:4px}header a{font-weight:700}main{max-width:1200px;margin:0 auto;padding:30px 24px}h1{font-size:clamp(1.7rem,3.5vw,2.5rem);margin:0 0 12px;font-weight:800;letter-spacing:.02em}h2{font-size:1.15rem;margin:0 0 18px}p{line-height:1.8;margin:10px 0}.intro{margin-bottom:24px}.intro>p:first-of-type{font-size:1.2rem}.privacy{color:#245381}.pick{padding:20px;background:#e9f1fb;border-left:5px solid var(--blue)}.pick h2{margin-bottom:12px}.pick p{font-size:.88rem}.file-label{display:inline-flex;flex-direction:column;gap:10px;font-weight:700;max-width:100%}input[type=file]{max-width:100%;font:inherit;font-size:.9rem}#clear{margin:12px 0 0 16px}.workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:30px;margin-top:20px}.preview{min-width:0}.surface{background-color:white;background-image:conic-gradient(#e0e5ec 25%,transparent 0 50%,#e0e5ec 0 75%,transparent 0);background-size:24px 24px;min-height:350px;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid #a9bbce}.surface canvas{width:100%;height:auto;display:block}.surface #empty{position:absolute;text-align:center;font-size:1.3rem;font-weight:700;background:#ffffffee;padding:24px}#source-info{font-weight:700}.preview>p{font-size:.9rem}.settings{background:white;padding:24px;border-top:5px solid var(--blue)}fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-weight:700;margin-bottom:15px}.output-legend{display:block;margin:16px 0}label{display:block;line-height:1.7;font-size:.88rem;margin-bottom:16px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}input[type=number],select{display:block;width:100%;min-width:0;margin-top:5px;padding:10px;border:1px solid #7e91a9;border-radius:4px;font:inherit;background:white;color:var(--ink);height:44px}button,.save{display:inline-block;font:inherit;font-weight:700;border:1px solid var(--blue);border-radius:5px;padding:11px 16px;cursor:pointer;background:var(--blue);color:white;text-align:center;line-height:1.5;text-decoration:none;min-height:44px}button:disabled{background:#e0e5eb;border-color:#aab6c5;color:#5c6876;cursor:default}button.subtle,#clear{background:white;color:#1d58ac}#make,.save{width:100%;margin-bottom:12px}.save{background:#164d40;border-color:#164d40}.save[hidden]{display:none}.check{display:flex;align-items:center;gap:9px}.check input{width:20px;height:20px;margin:0;flex-shrink:0}.hint{font-size:.85rem;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);margin:22px 0}#status{padding:12px 0;min-height:48px;font-weight:700}#status[data-error=true]{color:#a32921}.help{margin-top:35px;padding-top:25px;border-top:1px solid var(--line);max-width:850px}.help li{line-height:1.9;margin-bottom:8px}footer{max-width:1200px;margin:0 auto;padding:25px 24px 40px;display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line)}footer p{width:100%;font-size:.85rem;color:var(--muted)}:focus-visible{outline:3px solid #c87600;outline-offset:3px}@media(max-width:780px){.workspace{grid-template-columns:1fr;gap:20px}.surface{min-height:190px}main{padding:25px 16px}.settings{padding:20px}.pick{padding:16px}#clear{margin-left:0;display:block}header{padding:18px 16px}footer{padding:25px 16px;gap:15px}.pair{gap:10px}}