header{height:76px;border-bottom:1px solid #d9e2d7;padding-top:0;padding-bottom:0}.brand{display:flex;align-items:center;gap:8px;letter-spacing:-1px}.brand-dot{width:8px;height:8px;background:#1b7561;border-radius:50%}nav{display:flex;align-items:center;gap:20px}nav>a{text-decoration:none}.tool-menu{position:relative}.tool-menu>summary{list-style:none;cursor:pointer;background:white;border:1px solid #d9e2d7;border-radius:9px;padding:10px 14px;display:flex;gap:24px;min-height:44px}.tool-menu summary::-webkit-details-marker{display:none}.tool-panel{position:absolute;z-index:5;right:0;top:54px;width:600px;padding:24px;background:#fff;border:1px solid #d9e2d7;border-radius:14px;box-shadow:0 18px 50px #193a3318;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tool-panel h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;margin:0 0 8px;color:#60716b}.tool-panel a{display:block;padding:6px 0;text-decoration:none;font-size:14px}.tool-panel a:hover{text-decoration:underline}
.page-heading{position:relative;padding:24px 0 20px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 5px;color:#60716b}.page-heading h1{font-size:40px;letter-spacing:-1.8px;line-height:1.15;margin:0}.local-badge{position:absolute;right:0;bottom:24px;font-size:12px;padding:5px 10px;border:1px solid #d9e2d7;border-radius:20px;color:#60716b}
.workspace{grid-template-columns:1fr 1fr;gap:0;background:white;border:1px solid #d9e2d7;border-radius:18px;overflow:visible}.workspace>article,.workspace>.settings{padding:24px;border:0;border-radius:0;background:transparent;min-width:0}.workspace>.settings{border-left:1px solid #d9e2d7;background:#fdfefa;border-radius:0 18px 18px 0}.panel-heading{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:1.5px;color:#60716b;margin-bottom:18px}.panel-heading span:first-child{color:#193a33}.drop{padding:22px 16px;border-radius:12px;background:#f5f8ef;transition:background 120ms,border-color 120ms}.upload-symbol{margin:0 auto 10px;width:38px;height:38px;border:1px solid #d9e2d7;border-radius:10px;background:white;font-size:27px;line-height:34px}.drop p{font-size:14px;margin:10px 0 5px}.drop small{display:block;max-width:330px;margin:auto;font-size:12px;line-height:1.6;color:#60716b}
button,.button{min-height:44px;border-radius:9px;font-size:14px;padding:10px 18px;font-weight:650}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.actions>*{width:100%}.source{font-size:14px;line-height:1.6;color:#60716b;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.format{font-size:10px;letter-spacing:1px;margin-top:0}.preview-frame{height:190px;border:1px solid #d9e2d7;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:repeating-conic-gradient(#f4f6f0 0% 25%,#fff 0% 50%) 50%/18px 18px}.preview-frame #original,.preview-frame #result{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0;border:0;border-radius:0}.source-preview:not(:has(img:not([hidden]))){display:none}.result-placeholder{font-size:13px;color:#60716b;padding:24px;text-align:center}.result-preview:has(img:not([hidden])) .result-placeholder{display:none}
#status{padding:10px 12px;border-left:3px solid #1b7561;background:#edf5ee;border-radius:0 6px 6px 0;font-size:13px;overflow-wrap:anywhere}#status.error{background:#fff0eb;color:#913e2b;border-color:#b24931}.boundary{margin-top:18px;border:0;border-top:1px solid #d9e2d7;border-radius:0;padding:14px 0 0;background:transparent}.boundary summary{cursor:pointer;display:flex;justify-content:space-between;font-size:13px;font-weight:650;min-height:32px}.boundary p{font-size:12px;color:#60716b;overflow-wrap:anywhere;line-height:1.7}body[data-stage=selected] #choose,body[data-stage=completed] #choose,body[data-stage=completed] #convert{background:white;color:#193a33;border:1px solid #d9e2d7}body[data-stage=completed] #download{background:#1b7561;color:white;border-color:#1b7561}.result-preview:has(img:not([hidden])){animation:reveal 150ms ease-out}@keyframes reveal{from{opacity:.4}to{opacity:1}}:focus-visible{outline:3px solid #c89534;outline-offset:4px}.copy{margin-top:44px}.copy h2{font-size:24px;letter-spacing:-.5px}.pause-table{font-variant-numeric:tabular-nums;font-size:14px}#measurement{overflow-x:auto}
@media(max-width:700px){header{height:66px;flex-wrap:nowrap}header nav{max-width:none;gap:12px}header nav>a{display:none}.page-heading{padding:20px 0 18px}.page-heading h1{font-size:30px;letter-spacing:-1px}.local-badge{display:none}.workspace{grid-template-columns:1fr;border-radius:14px}.workspace>article,.workspace>.settings{padding:18px}.workspace>.settings{border-left:0;border-top:1px solid #d9e2d7;border-radius:0 0 14px 14px}.panel-heading{margin-bottom:14px}.drop{padding:18px 12px}.preview-frame{height:190px}.preview-frame #original,.preview-frame #result{max-height:100%}.tool-panel{width:min(340px,calc(100vw - 32px));grid-template-columns:1fr 1fr;padding:18px;max-height:70vh;overflow:auto}.pause-table{min-width:500px}.copy{margin-top:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.drop{text-align:center}.drop #choose{display:inline-flex;float:none}.actions button:disabled{background:#eef1eb;color:#7b8981;border:1px solid #e2e7de;opacity:1}
