:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#10191c;color:#e4eeea;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;padding:36px 28px;margin:auto}header,.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{text-decoration:none;font-weight:800;letter-spacing:2px;color:#e4eeea}.brand span{color:#a0cfb7}.local,.eyebrow{color:#a0cfb7;font-size:13px;letter-spacing:2px}.hero{padding:68px 0 34px;max-width:760px}h1{font-size:clamp(36px,6vw,64px);line-height:1.15;letter-spacing:-2px;margin:20px 0}h1 span{color:#a0cfb7}.hero p, .notice{line-height:1.8;color:#aebeb7}.badges{display:flex;gap:10px;margin:24px 0}.badges span{border:1px solid #354a40;border-radius:30px;padding:6px 16px;font-size:13px}.input-panel,#task{background:#192629;padding:30px;border:1px solid #334544;border-radius:18px}h2{font-size:20px;margin:0 0 22px}.section-head h2{margin:0}section{margin:0 0 36px}.tabs{display:flex;border-bottom:1px solid #3a4b48;margin-bottom:25px;gap:12px}button,input{font:inherit}button{cursor:pointer}.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;color:#acbbb5;padding:12px 18px}.tabs [aria-selected=true]{color:#afe3c7;border-bottom-color:#afe3c7}label{display:block;margin:20px 0 9px}label small{font-size:12px;font-weight:400;color:#9bafa7;margin-left:8px}input:not([type=file]){width:100%;background:#10191c;color:#e4eeea;border:1px solid #455953;border-radius:8px;padding:13px 16px}input:focus,button:focus-visible,a:focus-visible{outline:2px solid #b1e5c9;outline-offset:3px}.hint{font-size:13px;color:#a4b7ae;line-height:1.7}.primary{display:inline-flex;justify-content:space-between;gap:35px;align-items:center;background:#b0dfc5;color:#12271d;font-weight:700;border:0;border-radius:8px;padding:14px 22px;text-decoration:none;margin-top:14px}.primary:disabled{opacity:.5;cursor:wait}.notice{font-size:12px;margin-bottom:0}#dropzone{border:1px dashed #739688;border-radius:12px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;padding:20px;text-align:center}#dropzone.dragging{background:#263e34}#dropzone small{margin:0}#archive{max-width:100%;font-size:13px}.upload-icon{font-size:32px;color:#b0dfc5}#filename{overflow-wrap:anywhere}.section-head{margin-bottom:20px}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.tool{border:1px solid #334943;border-radius:10px;padding:17px;display:flex;justify-content:space-between;gap:10px}.ready{color:#a9dfbe}.missing{color:#efbe83}.secondary{background:transparent;color:#c5d4ce;border:1px solid #455953;border-radius:8px;padding:8px 15px}details{font-size:14px;color:#b8c8c0;line-height:1.8}summary{cursor:pointer}code{overflow-wrap:anywhere}#error{color:#ffc2ae;border:1px solid #9a6555;border-radius:8px;padding:14px}.history-item{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #334943;padding:16px 0;font-size:14px}.history-item p{margin:5px 0}.history-item a{color:#b0dfc5}.history-item small{color:#a4b7ae}footer{border-top:1px solid #334943;padding-top:20px;color:#96aaa0;font-size:12px;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 18px}.hero{padding-top:40px}.input-panel,#task{padding:20px}.section-head{flex-wrap:wrap}.primary{width:100%}.local{letter-spacing:0;font-size:12px}.history-item{align-items:flex-start}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Two viewport-height portraits stay behind the scrolling content. */
body{min-height:100vh;isolation:isolate}
body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:50%;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(10,18,25,.38),rgba(10,18,25,.38)),url('/background.jpg');background-size:100% 100%,auto 100%;background-position:center;background-repeat:no-repeat}
/* The left layer is mirrored, so its right-aligned image lands on the left edge. */
body::before{left:0;transform:scaleX(-1);background-position:center,right center}
body::after{right:0;background-position:center,right center}
main{background:rgba(12,22,28,.80);box-shadow:0 0 80px rgba(0,0,0,.35);min-height:100vh}
.input-panel,#task{background:rgba(25,38,41,.94)}
.tool{background:rgba(16,25,28,.7)}
@media(max-width:600px){main{background:rgba(12,22,28,.84)}}