:root{
  --ink:#171616;--cream:#f6f2e9;--blue:#2f6df0;--lime:#d9fa58;--muted:#77736c;
  --line:#c8c3b8;--warn:#c2410c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Zen Kaku Gothic New',sans-serif}

header{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4.5vw;gap:22px;position:sticky;top:0;background:var(--cream);z-index:20}
.brand{font-family:'DM Mono';font-weight:bold;font-size:18px;text-decoration:none;color:inherit;letter-spacing:-1px;white-space:nowrap}
.brand i{width:10px;height:10px;background:var(--blue);display:inline-block;border-radius:50%;margin-right:8px}
.brand small{color:#888;font-size:8px;margin-left:10px}
.back-link,.guide-link{font:11px 'DM Mono';color:var(--muted);text-decoration:none;white-space:nowrap}
.guide-link{border:1px solid var(--line);padding:9px 13px}
.guide-link:hover,.back-link:hover{color:var(--ink)}
.local{margin-left:auto;font:11px 'DM Mono';color:var(--blue);white-space:nowrap}

main{max-width:960px;margin:auto;padding:48px 24px 40px}
.hero{margin-bottom:40px}
.eyebrow{font:11px 'DM Mono';letter-spacing:1.5px;color:var(--blue);margin:0 0 14px}
h1{font-size:clamp(30px,5vw,54px);line-height:1.15;letter-spacing:-.06em;margin:0 0 18px;font-weight:900}
h1 em{font-style:normal;color:var(--blue)}
.intro{margin:0;max-width:44em;line-height:1.9;color:#3a3835}
.intro strong{background:linear-gradient(transparent 62%,var(--lime) 62%)}

.step{margin-bottom:36px}
.step-label{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.step-label span{font:11px 'DM Mono';color:var(--blue);letter-spacing:1px}
.step-label b{font-size:16px}
.step-label small{color:var(--muted);font-size:12px}

.drop-zone{position:relative;border:2px dashed var(--line);background:#fffdf8;padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop-zone:hover,.drop-zone.over{border-color:var(--blue);background:#f4f8ff}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-zone .plus{font-size:34px;color:var(--blue);line-height:1}
.drop-zone strong{display:block;margin:10px 0 4px;font-size:15px}
.drop-zone span{color:var(--muted);font-size:12px}

.message{margin:0 0 24px;padding:13px 16px;border-left:4px solid var(--blue);background:#eef3ff;font-size:13px;line-height:1.8}
.message.error{border-left-color:var(--warn);background:#fdf1ea;color:#7c2d12}

.source{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.source-shot{border:1px solid var(--line);background:#fff;padding:8px;max-width:260px}
.source-shot img{display:block;max-width:100%;height:auto;image-rendering:auto}
.source-info{margin:0;font-size:14px;line-height:2}

footer{border-top:1px solid var(--line);margin-top:40px;padding:22px 4.5vw;color:var(--muted);font-size:12px}

@media(max-width:640px){
  header{height:60px;gap:12px;padding:0 16px}
  .brand small{display:none}
  main{padding:28px 16px 32px}
}

.mt{margin-top:34px}
.scale-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.scale-btn{border:2px solid var(--ink);background:#fff;padding:18px 10px;cursor:pointer;text-align:center;font-family:inherit}
.scale-btn b{display:block;font-size:20px;font-weight:900}
.scale-btn small{display:block;margin-top:6px;font:11px 'DM Mono';color:var(--muted)}
.scale-btn[aria-pressed="true"]{background:var(--ink);color:#fff}
.scale-btn[aria-pressed="true"] small{color:#cfcabf}
.scale-btn:disabled{opacity:.35;cursor:not-allowed}
.run{width:100%;border:0;background:var(--blue);color:#fff;padding:18px;font:900 17px 'Zen Kaku Gothic New';cursor:pointer}
.run:disabled{opacity:.4;cursor:not-allowed}
#progress{width:100%;height:6px;display:block;margin-top:10px;border:0;background:#ddd8cc;accent-color:var(--blue)}
#progress[hidden]{display:none}

.compare{position:relative;background:#fff;border:1px solid var(--line);overflow:hidden;line-height:0}
.compare canvas{display:block;width:100%;height:auto}
.compare #afterCanvas{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.compare input[type=range]{position:absolute;left:0;right:0;bottom:10px;width:calc(100% - 24px);margin:0 12px}
.zoom-box{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.zoom-box canvas{border:1px solid var(--line);background:#fff;image-rendering:pixelated}
.zoom-box figure{margin:0}
.zoom-box figcaption{font:11px 'DM Mono';color:var(--muted);margin-top:5px}
@media(max-width:640px){ .scale-buttons{grid-template-columns:1fr} }

.save-row{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.save{border:0;background:var(--ink);color:#fff;padding:15px 34px;font:900 15px 'Zen Kaku Gothic New';cursor:pointer}
.save:hover{background:var(--blue)}
.fmt{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.fmt select{background:#fff;border:1px solid var(--line);padding:8px;font:12px 'Zen Kaku Gothic New'}
.save-info{font:11px 'DM Mono';color:var(--muted)}

.advanced{border:1px solid var(--line);background:#fffdf8;margin-bottom:18px}
.advanced summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:14px;user-select:none}
.advanced summary:hover{color:var(--blue)}
.adv-grid{padding:4px 16px 8px;display:flex;flex-direction:column;gap:12px}
.adv-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.adv-row>label{flex:0 0 150px;color:var(--muted)}
.adv-row input[type=number]{width:92px}
.adv-row input[type=number],.adv-row select{border:1px solid var(--line);background:#fff;padding:7px;font:13px 'Zen Kaku Gothic New'}
.adv-row input[type=range]{flex:1;min-width:140px;accent-color:var(--blue)}
.adv-row output{font:12px 'DM Mono';min-width:56px}
.adv-row small{color:var(--muted);font-size:11px}
.adv-out{margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:13px}
.adv-out b{font-family:'DM Mono'}
@media(max-width:640px){ .adv-row>label{flex-basis:100%} }

.fallback{margin-top:14px;padding:14px 16px;border:1px dashed var(--warn);background:#fff8f3;font-size:13px;line-height:1.9}
.fallback button{margin:8px 8px 0 0;border:1px solid var(--ink);background:#fff;padding:9px 14px;font:700 12px 'Zen Kaku Gothic New';cursor:pointer}
.fallback button:hover{background:var(--ink);color:#fff}

.warnings{margin-top:12px;font-size:12px;line-height:1.9;color:#7c2d12}
.warnings p{margin:0}

.ai-offer{margin-top:18px;padding:16px;border:1px solid var(--blue);background:#f4f8ff;font-size:13px;line-height:1.9}
.ai-offer b{display:block;margin-bottom:4px;font-size:14px}
.ai-offer button{margin:10px 8px 0 0;border:0;background:var(--blue);color:#fff;padding:11px 18px;font:700 13px 'Zen Kaku Gothic New';cursor:pointer}
.ai-offer button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ai-offer button:disabled{opacity:.5;cursor:not-allowed}
.ai-offer .note{color:var(--muted);font-size:11px;margin:6px 0 0}

.guide-title{font-size:clamp(26px,4vw,40px);margin:0 0 8px}
main h2{font-size:17px;margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
main ol,main ul{padding-left:1.3em;line-height:2}
main ol li,main ul li{margin-bottom:6px}
main>p{line-height:1.95}

.fast-toggle{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted);cursor:pointer}
.fast-toggle input{accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
.inline-check{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.inline-check input{accent-color:var(--blue)}

.scale-btn b span{font-size:12px;font-weight:400;color:var(--muted)}
.scale-btn[aria-pressed="true"] b span{color:#cfcabf}
.scale-btn:disabled small{color:var(--warn)}