:root{--green:#163b32;--mint:#d6eacb;--paper:#f7f7f0;--ink:#24382e;--line:#ddded4;--muted:#6d766d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',system-ui,sans-serif;font-size:14px}button,input{font:inherit}button,a,label{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #a3bb65;outline-offset:4px}[hidden]{display:none!important}header{max-width:1240px;margin:auto;padding:26px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;text-decoration:none;color:var(--green);letter-spacing:1px}.mark{display:grid;place-items:center;background:var(--green);color:var(--mint);height:38px;width:38px;border-radius:50%;font-size:19px}.tag{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:9px}.tag i{width:6px;height:6px;background:#6d9065;border-radius:50%}main{max-width:1160px;margin:auto;padding:40px 0 24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.2px;color:#77806e}.intro h1{font-size:42px;letter-spacing:-1.5px;margin:10px 0 12px;font-weight:800}.intro h1 span{color:#64805a}.intro>p{color:var(--muted);font-size:13px;margin:0 0 30px}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:28px;align-items:start}.scanner{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.panel-head,.result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h2{font-size:14px;margin:0}h3{font-size:16px}.pill{font-size:10px;border:1px solid #dfe4d9;border-radius:20px;padding:5px 10px;color:#63725f;background:#f4f7ef}.stage{position:relative;background:#e8ebdf;border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}.stage>canvas{position:absolute;width:100%;height:100%;object-fit:contain}.stage #overlay{touch-action:manipulation;cursor:crosshair}.empty{position:relative;text-align:center;padding:20px}.empty h3{margin:17px 0 8px}.empty p{font-size:12px;line-height:1.9;color:#77816f}.coin-art{height:90px;width:170px;margin:auto;position:relative}.coin-art span{position:absolute;border:2px solid #a6b5a0;background:#d8dfcc;color:#819278;box-shadow:inset 0 0 0 5px #e6eadf,0 4px 0 #a7b49a;border-radius:50%;height:75px;width:75px;display:grid;place-items:center;font-family:Georgia,serif;font-size:23px}.coin-art span:first-child{left:10px;top:13px;transform:rotate(-15deg)}.coin-art span:nth-child(2){left:56px;top:0;background:#e1c5a8;border-color:#bd9c77;color:#a7835e;box-shadow:inset 0 0 0 5px #eddbc9,0 4px 0 #bda07e}.coin-art span:last-child{left:98px;top:25px;height:65px;width:65px;transform:rotate(12deg)}.primary,.secondary,.iconbtn,.smallbutton{border:0;border-radius:9px;padding:13px 16px;font-weight:600;font-size:12px;min-height:44px}.primary{background:var(--green);color:#fff}.secondary{background:#fff;color:var(--green);border:1px solid var(--line)}.empty .primary{display:block;margin:20px auto 5px;padding:13px 30px}.textbutton{border:0;background:none;color:#536d47;font-size:12px;padding:12px}.camera-actions{display:flex;gap:8px;margin-top:14px}.camera-actions .primary{flex:1}.upload{display:flex;align-items:center;cursor:pointer}.upload input{display:none}.iconbtn{background:#f0f2e9;color:#69745f;padding:10px 13px}.status{font-size:11px;line-height:1.8;color:var(--muted);min-height:20px}.calibration{background:#f5f7f0;border-radius:10px;padding:14px;margin:18px 0 12px}.calibration>div{display:flex;align-items:center;gap:10px;font-size:12px}.calibration b{border-radius:50%;background:#dce7d4;color:#59724c;padding:5px;font-size:10px}.calibration p{color:#6c7862;line-height:1.8;font-size:11px;margin:8px 0}.smallbutton{background:white;border:1px solid #dfe3d8;padding:6px 10px;font-size:10px;min-height:32px}details{font-size:11px;color:var(--muted);line-height:1.9}summary{cursor:pointer;padding:9px 0}details p{line-height:2}details input[type=range]{width:100%;accent-color:var(--green)}output{float:right}.result{background:var(--green);color:#f7faef;border-radius:20px;padding:26px}.result>.eyebrow{color:#9db29f;margin-bottom:22px}.result h2{font-weight:400;color:#c4d2c4}.result .pill{background:#335045;color:#c6d7bb;border:1px solid #4e6656}.total{display:flex;align-items:baseline;gap:10px;margin:20px 0 25px}.total>span{font-size:28px;color:#c9ddbb}.total strong{font-size:66px;font-weight:600;letter-spacing:-3px;line-height:1;font-variant-numeric:tabular-nums}.countline{display:flex;justify-content:space-between;align-items:center;color:#c6d4c6;font-size:12px}.countline strong{font-size:23px;color:white;font-variant-numeric:tabular-nums}.countline small{font-size:11px;font-weight:400}.hint{font-size:10px;color:#c5d6b8;line-height:1.8;min-height:18px}.divider{height:1px;background:#416052;margin:18px 0}.denom-row{display:grid;grid-template-columns:34px 1fr 40px 75px;align-items:center;padding:10px 0;gap:10px;font-size:12px}.mini-coin{width:28px;height:28px;border:1px solid #a8bca7;border-radius:50%;display:grid;place-items:center;color:#d8e4d0;font:12px Georgia,serif}.mini-coin.copper{border-color:#c69a71;color:#e7bd92}.mini-coin.gold{border-color:#c9ba80;color:#e9d99d}.denom-row .amount{text-align:right;color:#bdd0bc;font-variant-numeric:tabular-nums}.denom-row .num{text-align:center}.result-note{font-size:10px;color:#a6bba7;line-height:1.9;margin:20px 0}.full{width:100%;background:#d8eacb;border:none}.guide{display:flex;gap:14px;padding:22px 4px 6px}.guide-icon{display:grid;place-items:center;width:30px;height:30px;background:#e6eadb;border-radius:50%;flex-shrink:0}.guide h3{font-size:12px;margin:2px 0 8px}.guide p{font-size:11px;color:var(--muted);line-height:1.9;margin:0}.privacy{font-size:10px;line-height:1.9;color:#899180;padding:12px 5px}footer{border-top:1px solid var(--line);margin-top:32px;padding:18px 0;display:flex;justify-content:space-between;font-size:9px;color:#8b9182;letter-spacing:.5px}.live-tag{position:absolute;top:12px;left:12px;color:#dcf3cf;background:#163b32bb;font-size:10px;padding:6px 10px;border-radius:20px}dialog{border:0;border-radius:18px;padding:24px;color:var(--ink);width:min(90vw,390px);box-shadow:0 20px 70px #0003}dialog::backdrop{background:#132c27aa;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{font-size:17px}dialog p{font-size:12px;color:var(--muted);line-height:1.8}.denom-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.denom-buttons button{border:1px solid #d8e0d1;border-radius:10px;padding:18px 8px;background:#f2f5eb;color:var(--green);font-weight:700;min-height:48px}.check{display:flex;gap:8px;font-size:11px;align-items:center;min-height:44px}.check input{accent-color:var(--green)}.danger{background:none;border:0;color:#a35c49;padding:15px 0;font-size:12px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#172e27;color:white;padding:14px 22px;border-radius:10px;font-size:12px;z-index:5;max-width:90vw}.error{color:#9a4936}.demo-flag{color:#9d6838}@media(max-width:1200px){main{padding:34px 32px 20px}}@media(max-width:750px){header{padding:18px 20px}.brand{font-size:18px}.tag{font-size:9px}main{padding:27px 18px 10px}.intro h1{font-size:31px;margin-top:9px}.intro>p{font-size:11px;line-height:1.8;margin-bottom:22px}.workspace{grid-template-columns:1fr;gap:18px}.scanner{padding:14px;border-radius:16px}.stage{aspect-ratio:1/1}.empty{padding:12px}.empty h3{font-size:15px}.empty p{font-size:11px}.camera-actions{gap:6px}.camera-actions .primary,.camera-actions .secondary{font-size:11px;padding:12px 10px}.result{padding:23px;border-radius:16px}.total strong{font-size:64px}.guide{padding-top:18px}footer{display:block;line-height:2.3}footer span{display:block}.intro .eyebrow{font-size:9px}.denom-row{padding:9px 0}.stage.has-image{aspect-ratio:4/3}}

.offline-panel{background:#edf2e5;border:1px solid #d8e0ce;padding:15px 18px;border-radius:12px;margin:0 0 22px;display:flex;gap:15px;align-items:center;justify-content:space-between}.offline-panel strong{font-size:12px}.offline-panel p{font-size:11px;line-height:1.8;margin:5px 0;color:#677560}.offline-panel details{font-size:10px}.offline-panel .smallbutton{flex-shrink:0}@media(max-width:750px){.offline-panel{align-items:flex-start;gap:10px;padding:13px}.offline-panel .smallbutton{max-width:90px}}