:root{color-scheme:light}
*{box-sizing:border-box}
body.xc-page{margin:0;background:#f7f0df;color:#1c2422;font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic UI",system-ui,sans-serif;line-height:1.65}
.xc-page button,.xc-page select,.xc-page input{font:inherit}
.xc-page a{color:inherit}
.xc-skip{position:absolute;top:-5rem;left:1rem;z-index:10;padding:.65rem 1rem;background:#fff}
.xc-skip:focus{top:1rem}
.xc-header{background:#191d1c;color:#fffdf7;border-bottom:4px solid #37a5a0}
.xc-header-inner{max-width:1180px;margin:auto;min-height:76px;padding:1rem 1.35rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.xc-brand{text-decoration:none!important;font-size:1.22rem;font-weight:800;white-space:nowrap}
.xc-brand small{font-size:.8rem;font-weight:600;color:#c5d8d4}
.xc-back{margin-left:auto;text-decoration:none!important;border:1px solid #66746f;border-radius:999px;padding:.38rem .8rem;font-size:.9rem}
.xc-header .wfh-language{margin:0}
.xc-header .wfh-language-status{margin:0}
.xc-main{max-width:1120px;margin:auto;padding:2.2rem 1.25rem 4rem}
.xc-eyebrow{color:#248a86;letter-spacing:.2em;font-weight:800;font-size:.78rem;margin:0 0 .45rem}
.xc-intro{margin-bottom:1.8rem}
.xc-intro h1{font-size:clamp(2.15rem,5vw,4rem);line-height:1.16;letter-spacing:-.04em;margin:0 0 .9rem}
.xc-intro>p:not(.xc-eyebrow){font-size:1.08rem;max-width:49rem;margin:.3rem 0 1rem;color:#43504b}
.xc-badges{display:flex;gap:.6rem;flex-wrap:wrap}
.xc-badges span{background:#e0f1ed;border:1px solid #abd1c9;border-radius:999px;padding:.22rem .7rem;font-size:.82rem;font-weight:700}
.xc-panel,.xc-help{background:#fffdf8;border:1px solid #d5c7ad;border-radius:24px;box-shadow:0 16px 34px #43372517;padding:clamp(1rem,3vw,2rem)}
.xc-panel-title h2{font-size:1.5rem;margin:0 0 1.3rem}
.xc-drop{position:relative;border:2px dashed #b6a789;background:#fff;border-radius:18px;text-align:center;padding:1.4rem;transition:background .15s,border-color .15s}
.xc-drop.dragging{background:#e5f5ef;border-color:#248a86}
.xc-drop:focus-within{outline:3px solid #59b3ae;outline-offset:3px}
.xc-drop label{display:flex;justify-content:center;align-items:center;gap:.35rem;flex-wrap:wrap;cursor:pointer}
.xc-drop label strong{display:inline-block;background:#247e7b;color:#fff;border-radius:10px;padding:.62rem 1rem}
.xc-drop label span{color:#4d5750}
.xc-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.xc-drop p{margin:.45rem 0 0;color:#576159;font-size:.84rem}
.xc-drop .xc-filename{font-weight:700;color:#1b514e;overflow-wrap:anywhere}
.xc-controls{display:grid;grid-template-columns:minmax(13rem,1fr) minmax(19rem,1.5fr);gap:1.2rem;margin:1.45rem 0 .9rem}
.xc-select label{display:block;font-weight:800;margin-bottom:.4rem}
.xc-select select{display:block;width:100%;background:#fff;color:#182220;border:1px solid #aeb6ad;border-radius:10px;padding:.7rem .8rem}
.xc-options{display:grid;gap:.55rem;align-content:center}
.xc-options label{display:flex;align-items:flex-start;gap:.5rem;font-size:.94rem}
.xc-options input{width:1.12rem;height:1.12rem;accent-color:#247e7b;margin-top:.25rem;flex:none}
.xc-note{font-size:.84rem;color:#4b5852;background:#f5f2e9;border-left:4px solid #e4a62d;padding:.8rem 1rem;margin:.8rem 0 1.2rem}
.xc-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.xc-actions button{border:1px solid #1c2a27;border-radius:11px;padding:.72rem 1.1rem;min-height:44px;font-weight:800;cursor:pointer}
#convert{background:#e6a829;color:#18211f}
#download{background:#247e7b;color:#fff}
.xc-actions button:disabled{opacity:.46;cursor:not-allowed}
#status{margin:1rem 0 0;min-height:1.6em;color:#1e5f5c;font-weight:700}
#status[data-kind="error"]{color:#ac352c}
.xc-preview{margin-top:1.5rem;border-top:1px solid #d9d1c2;padding-top:1rem}
.xc-preview h3{margin:.1rem 0 .7rem;font-size:1.08rem}
.xc-table-scroll{overflow:auto;max-height:20rem;border:1px solid #d5d7cf;border-radius:10px}
.xc-preview table{border-collapse:collapse;min-width:100%;font-size:.9rem}
.xc-preview th,.xc-preview td{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;border-right:1px solid #e2e3da;border-bottom:1px solid #e2e3da;padding:.5rem .65rem;min-width:6rem;max-width:18rem}
.xc-preview th{background:#eaf2ef;position:sticky;top:0}
.xc-preview>p{font-size:.82rem;color:#576159}
.xc-help{margin-top:1.4rem;box-shadow:none}
.xc-help h2{margin:.1rem 0 .7rem;font-size:1.35rem}
.xc-help ol{padding-left:1.35rem}
.xc-help p{margin-bottom:0;color:#4b5852}
.xc-footer{max-width:1120px;margin:auto;padding:0 1.25rem 2rem;color:#4d5750;font-size:.84rem}
.xc-footer nav{display:flex;flex-wrap:wrap;gap:1rem}
.xc-footer p{margin:.5rem 0}
.xc-page :is(a,button,input,select):focus-visible{outline:3px solid #59b3ae;outline-offset:3px}
@media(max-width:720px){.xc-header-inner{gap:.7rem}.xc-brand{flex-basis:100%;white-space:normal}.xc-brand small{display:none}.xc-back{margin-left:0}.xc-controls{grid-template-columns:1fr}.xc-intro h1{font-size:2.25rem}.xc-main{padding-top:1.4rem}}
@media(prefers-reduced-motion:reduce){.xc-drop{transition:none}}
