:root{color:#24231f;font-synthesis:none;--orange:#f0643a;--orange-dark:#d94c26;--ink:#24231f;--muted:#777268;--paper:#fffdf8;--line:#ddd7cb;background:#f5f1e8;font-family:Noto Sans JP,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% 18%,#fffaf0 0,#0000 36rem),#f5f1e8;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button,label,a{-webkit-tap-highlight-color:transparent}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.logo{color:var(--ink);letter-spacing:-.03em;align-items:center;gap:14px;font:700 1.75rem DM Sans,sans-serif;text-decoration:none;display:inline-flex}.logo-mark{background:var(--orange);border-radius:13px;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;display:flex;transform:rotate(-4deg)}.logo-mark i{background:#fff;border-radius:4px;width:4px;display:block}.logo-mark i:first-child{height:11px}.logo-mark i:nth-child(2){height:22px}.logo-mark i:nth-child(3){height:15px}main{width:min(760px,100% - 40px);margin:0 auto}.hero{text-align:center;padding:64px 0 38px}.hero-logo{margin-bottom:42px}h1{letter-spacing:-.07em;margin:0;font-size:clamp(2.65rem,7vw,4.3rem);line-height:1.08}h1 em{color:var(--orange);font-style:normal;position:relative}.lead{color:var(--muted);margin:25px 0 0;font-size:.98rem;line-height:1.9}.converter{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffdf8e0;border:1px solid #3631291f;border-radius:24px;padding:20px;box-shadow:0 18px 50px #44362217}.drop-zone{cursor:pointer;background:#faf7f0;border:1.5px dashed #c9c0b1;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;min-height:220px;transition:border-color .2s,background .2s,transform .2s;display:flex}.drop-zone:hover,.drop-zone.is-dragging{border-color:var(--orange);background:#fff7ef;transform:translateY(-2px)}.drop-zone input{opacity:0;pointer-events:none;position:absolute}.upload-icon{width:47px;height:47px;color:var(--orange);background:#fbe5dc;border-radius:14px;place-items:center;margin-bottom:14px;display:grid}.upload-icon svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:25px}.drop-title{font-size:1rem;font-weight:700}.drop-subtitle{color:var(--muted);margin-top:6px;font-size:.8rem}.drop-subtitle span{color:var(--orange);text-underline-offset:3px;font-weight:600;text-decoration:underline}.drop-types{color:#a09a90;margin-top:15px;font-size:.67rem}.file-card{border:1px solid var(--line);background:#faf7f0;border-radius:14px;align-items:center;gap:13px;padding:14px 16px}.file-card:not([hidden]){display:flex}.file-icon{width:45px;height:45px;color:var(--orange);background:#fbe5dc;border-radius:12px;flex:none;place-items:center;display:grid}.file-icon svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:25px}.file-info{flex-direction:column;gap:4px;min-width:0;display:flex}.file-info strong{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.file-info small{color:var(--muted);font-size:.7rem}.remove-button{color:#8c867b;cursor:pointer;background:0 0;border:0;border-radius:50%;width:34px;height:34px;margin-left:auto;font-size:1.4rem}.remove-button:hover{color:var(--ink);background:#eee8dc}.format-fieldset{border:0;margin:20px 0;padding:0}.format-fieldset legend{margin-bottom:10px;font-size:.73rem;font-weight:700}.format-options{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.format-options label{cursor:pointer}.format-options input{opacity:0;position:absolute}.format-options span{border:1px solid var(--line);background:#fff;border-radius:12px;flex-direction:column;justify-content:center;min-height:67px;padding:12px 14px;transition:border .2s,box-shadow .2s;display:flex;position:relative}.format-options strong{font:700 .86rem DM Sans,sans-serif}.format-options small{color:var(--muted);margin-top:3px;font-size:.62rem}.format-options input:checked+span{border:1.5px solid var(--orange);box-shadow:0 0 0 3px #f0643a17}.format-options input:checked+span:after{content:"✓";color:#fff;background:var(--orange);border-radius:50%;place-items:center;width:17px;height:17px;font-size:.6rem;display:grid;position:absolute;top:8px;right:9px}.format-options input:focus-visible+span{outline-offset:2px;outline:3px solid #f0643a40}.convert-button{color:#fff;background:var(--orange);cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:53px;font-weight:700;transition:background .2s,transform .2s;display:flex;box-shadow:0 8px 18px #d94c2633}.convert-button:not(:disabled):hover{background:var(--orange-dark);transform:translateY(-1px)}.convert-button:disabled{color:#aaa49a;box-shadow:none;cursor:not-allowed;background:#e7e2d9}.convert-button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:19px}.progress-area{margin-top:18px}.progress-copy{color:var(--muted);justify-content:space-between;font-size:.72rem;display:flex}.progress-track{background:#e8e2d8;border-radius:99px;height:7px;margin-top:8px;overflow:hidden}.progress-track span{border-radius:inherit;background:var(--orange);width:0;height:100%;transition:width .2s;display:block}.result{background:#f1faf3;border:1px solid #bcdcc5;border-radius:14px;align-items:center;gap:15px;margin-top:20px;padding:20px}.result:not([hidden]){display:flex}.result-icon{color:#fff;background:#55a36b;border-radius:50%;flex:none;place-items:center;width:40px;height:40px;font-size:1.1rem;font-weight:700;display:grid}.result div{flex-direction:column;min-width:0;display:flex}.result strong{font-size:1rem}.result small{color:#6c776f;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;font-size:.78rem;overflow:hidden}.result button{color:#fff;cursor:pointer;background:#408b56;border:0;border-radius:9px;flex:none;margin-left:auto;padding:12px 17px;font-size:.9rem;font-weight:700}.result button:hover{background:#347648}.error-message{color:#a33b27;background:#fff0ec;border-radius:9px;margin:14px 0 0;padding:11px;font-size:.72rem}footer{color:#989187;border-top:1px solid #dcd5c9;justify-content:center;width:min(1120px,100% - 48px);margin:80px auto 0;padding:24px 0 30px;font-size:.82rem;display:flex}@media (width<=600px){main{width:calc(100% - 24px)}.hero{padding:42px 0 30px}.hero-logo{margin-bottom:34px}.lead{font-size:.84rem}.converter{border-radius:19px;padding:13px}.drop-zone{min-height:205px}.format-options{gap:6px}.format-options span{padding:10px}.format-options small{font-size:.56rem}footer{width:calc(100% - 32px);margin-top:56px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}