*{box-sizing:border-box}body{margin:0;background:#f3f6f3;color:#172b25;font:16px/1.6 system-ui,sans-serif}header,main{max-width:1080px;margin:auto;padding-inline:24px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid #cbd9d1}a{color:#145c47}header a{font-size:1.28rem;font-weight:800}header span,small,.note{color:#425a50}header span{font-size:.72rem;letter-spacing:.09em}h1{font-size:clamp(2.1rem,6vw,4.2rem);line-height:1.05;letter-spacing:-.05em;margin:30px 0 24px}h2{margin:0 0 14px;font-size:1.25rem}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.card{min-width:0;background:white;border:1px solid #cbd9d1;border-radius:20px;padding:22px}#drop{padding:24px 12px;text-align:center;border:2px dashed #9db7a9;border-radius:14px;background:#f4faf6}#drop.active{background:#d5eee3;border-color:#145c47}.choose,button{display:inline-block;position:relative;border:0;border-radius:9px;background:#145c47;color:white;font:inherit;font-weight:700;padding:10px 17px;cursor:pointer}.choose input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.choose:focus-within,button:focus-visible{outline:3px solid #98612a;outline-offset:3px}button:disabled{opacity:.55;cursor:default}#drop p{margin:8px 0 0}#status{overflow-wrap:anywhere}#status.error{color:#a02222}canvas{max-width:100%;max-height:260px;width:auto;height:auto;border-radius:12px}.score{margin:0;line-height:1.1;font-variant-numeric:tabular-nums}.score output{font-size:clamp(2.9rem,8vw,4.6rem);font-weight:750;color:#145c47}.note{margin:8px 0 0}dl{margin:16px 0}dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #d6e1da;padding:8px 0}dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:#145c47}#copy-status{margin:4px 0 0}.method{max-width:74ch;padding:36px 0}.method li{margin-block:10px}details{border-top:1px solid #cbd9d1;padding:10px 0}summary{cursor:pointer}button,.choose,#drop{transition:background-color .15s ease}@media(max-width:650px){header,main{padding-inline:16px}.workspace{grid-template-columns:1fr;gap:12px}.card{padding:16px}header span{font-size:.63rem}h1{margin-block:22px 16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.capture{display:inline-block;position:relative;margin:8px 0 0 8px;padding:8px;color:#145c47;font-weight:700;cursor:pointer}.capture input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.capture:focus-within{outline:3px solid #98612a;outline-offset:2px}@media(max-width:650px){#preview{max-height:104px}#drop{padding-block:14px}}