@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --ink:#1f2925; --muted:#7e8880; --paper:#f4efe8; --panel:#fffdf9; --line:#dcded6; --accent:#d9f06f; --accent-dark:#748b1c; --coral:#eb725f; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Manrope',sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.page-shell { min-height:100vh; padding:28px clamp(22px,5vw,76px) 22px; background:radial-gradient(circle at 84% 0%,#fffdf7 0 12%,transparent 34%),var(--paper); display:flex; flex-direction:column; }
.topbar,.footer { display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--ink); text-decoration:none; display:flex; gap:10px; align-items:center; font-size:17px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:flex; align-items:end; gap:3px; height:22px; }.brand-mark span { width:5px; background:var(--ink); display:block; border-radius:2px; }.brand-mark span:nth-child(1) { height:11px; }.brand-mark span:nth-child(2) { height:18px; }.brand-mark span:nth-child(3) { height:14px; }
.privacy-note,.footer { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.04em; }.privacy-dot { width:7px; height:7px; background:var(--accent-dark); border-radius:50%; display:inline-block; margin-right:7px; }
main { width:min(100%,1050px); margin:auto; }.intro { padding:76px 0 48px; max-width:670px; }.eyebrow,.section-kicker { color:var(--accent-dark); font:500 11px 'DM Mono',monospace; letter-spacing:.09em; }.eyebrow span,.section-kicker span { color:var(--muted); margin-left:15px; }
h1 { margin:18px 0 20px; font-size:clamp(50px,7vw,88px); line-height:.98; letter-spacing:-.075em; font-weight:800; } h1 em { color:var(--coral); font-style:normal; }.intro-copy { color:#68736b; font-size:16px; line-height:1.6; max-width:390px; margin:0; }
.workspace { background:var(--panel); border:1px solid #e2e0d8; padding:clamp(23px,4vw,46px); box-shadow:0 18px 50px rgba(62,66,48,.05); }.workspace-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:27px; }.section-kicker { margin:0 0 9px; }.section-kicker span { margin-left:10px; } h2 { font-size:26px; letter-spacing:-.055em; margin:0; }.text-button { color:var(--ink); border:0; background:none; padding:4px 0; font-size:13px; font-weight:700; }.text-button:hover { color:var(--accent-dark); }
.drop-zone { min-height:180px; border:1px dashed #b9c0b2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; transition:background .2s,border-color .2s; outline:none; }.drop-zone:hover,.drop-zone:focus,.drop-zone.dragging { background:#fbfde9; border-color:var(--accent-dark); } #file-input { display:none; }.upload-symbol { width:38px; height:38px; border-radius:50%; background:var(--accent); display:grid; place-items:center; font-size:22px; }.upload-symbol span { transform:translateY(-2px); }.drop-copy { display:flex; gap:5px; font-size:14px; }.drop-copy strong { font-weight:800; }.drop-copy span { color:var(--muted); }.drop-copy u { text-underline-offset:3px; color:var(--ink); }.format-note { color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.08em; }.format-note i,.file-info i { font-style:normal; margin:0 4px; }
.file-list { display:grid; gap:8px; margin-top:18px; }.file-row { min-height:66px; border:1px solid var(--line); display:flex; align-items:center; padding:8px 12px 8px 8px; gap:13px; animation:arrive .35s both; }.thumbnail-wrap { width:50px; height:50px; background:#e8e5de; overflow:hidden; flex:0 0 auto; }.thumbnail-wrap img { width:100%; height:100%; object-fit:cover; }.file-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }.file-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.file-info span { color:var(--muted); font:10px 'DM Mono',monospace; }.row-actions { display:flex; align-items:center; gap:5px; }.icon-button,.remove-button { color:var(--muted); width:27px; height:27px; border:0; background:transparent; font-size:16px; }.icon-button:hover,.remove-button:hover { color:var(--ink); background:#f1f0e9; }.icon-button:disabled { opacity:.25; cursor:default; }.remove-button { font-size:22px; font-weight:300; margin-left:6px; }
.empty-state { display:flex; align-items:center; gap:13px; color:#b4b9b0; font:10px 'DM Mono',monospace; justify-content:center; padding:25px 0 11px; }.empty-line { height:1px; background:var(--line); width:70px; }
.workspace-footer { border-top:1px solid var(--line); margin-top:30px; padding-top:22px; display:flex; align-items:center; justify-content:space-between; }.clear-button { border:0; padding:0; background:none; color:var(--muted); font-size:12px; }.clear-button:not(:disabled):hover { color:var(--coral); }.clear-button:disabled { opacity:.45; cursor:default; }.convert-button { background:var(--ink); color:#fff; border:0; min-width:153px; padding:14px 17px; display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; transition:transform .2s,background .2s; }.convert-button:hover:not(:disabled) { background:var(--accent-dark); transform:translateY(-2px); }.convert-button:disabled { opacity:.3; cursor:default; }.button-arrow { color:var(--accent); font-size:19px; }.convert-button.loading { pointer-events:none; opacity:.7; }
.footer { margin-top:30px; padding-bottom:4px; }.footer-code { color:var(--accent-dark); }.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:12px 18px; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }.toast.visible { opacity:1; transform:translate(-50%,0); }
@keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:600px) { .page-shell { padding:20px 16px; }.privacy-note { font-size:9px; }.intro { padding:55px 0 33px; }.intro-copy { font-size:14px; }.workspace { padding:22px 16px; }.workspace-head { margin-bottom:21px; }.drop-zone { min-height:155px; }.drop-copy { flex-direction:column; align-items:center; }.file-row { gap:10px; padding-right:6px; }.row-actions { gap:0; }.remove-button { margin-left:0; }.footer { font-size:9px; } }