@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#11161a; --muted:#6d7577; --paper:#f1f0eb; --panel:#fffefa; --lime:#d9ff3f; --line:#d9d9d2; --coral:#ff725c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:'Space Grotesk',system-ui,sans-serif; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.site-shell { width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:28px 0 22px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:18px; font-weight:700; letter-spacing:-.04em; }
.brand-slash { color:#a6b92f; }
.brand-mark { display:flex; align-items:flex-end; gap:3px; width:23px; height:20px; }
.brand-mark i { display:block; width:5px; background:var(--ink); border-radius:4px 4px 1px 1px; transform:skew(-17deg); }
.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:16px}.brand-mark i:nth-child(3){height:20px;background:var(--lime)}
.header-meta,.privacy-note,.language-switch { display:flex; align-items:center; }
.header-meta { gap:28px; font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.login-button { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); background:transparent; color:var(--ink); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }.login-button:hover { border-color:var(--ink); background:var(--panel); }.login-status { color:#8d9693; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; }
.privacy-note { gap:8px; color:var(--muted); }
.privacy-dot { width:7px; height:7px; border-radius:50%; background:#94b425; box-shadow:0 0 0 4px #e8efc7; }
.language-switch { gap:7px; color:#b2b5ad; }
.language-button { padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit; font-weight:500; }
.language-button.is-active { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; padding:82px 8px 72px; position:relative; }
.eyebrow,.section-label { display:flex; align-items:center; gap:10px; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.eyebrow { grid-column:1/-1; }
.eyebrow-line { width:28px; height:1px; background:var(--ink); }
h1 { grid-column:1; margin:18px 0 0; max-width:740px; font-size:clamp(52px,8vw,108px); line-height:.9; letter-spacing:-.085em; font-weight:600; }
h1 em { color:#8d9693; font-style:normal; }
.hero-copy { align-self:end; max-width:300px; margin:0 0 4px; color:#616b6c; font-size:16px; line-height:1.45; }
.hero-stats { grid-column:2; display:flex; align-self:end; gap:32px; margin-top:20px; color:var(--muted); font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.hero-stats div { display:grid; gap:9px; }.hero-stats strong { color:var(--ink); font-size:13px; font-weight:500; }
.mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-bottom:28px; background:var(--line); border:1px solid var(--line); }
.mode-tab { display:grid; grid-template-columns:32px 1fr 20px; align-items:center; gap:12px; min-height:82px; padding:16px 18px; border:0; background:rgba(255,254,250,.65); color:var(--ink); text-align:left; cursor:pointer; transition:background .2s,color .2s; }
.mode-tab:hover { background:var(--panel); }.mode-tab.is-active { background:var(--ink); color:#fff; }.mode-number { align-self:start; color:#a6ada8; font:10px 'DM Mono',monospace; }.is-active .mode-number { color:var(--lime); }.mode-tab-copy { display:grid; gap:7px; }.mode-tab-copy strong { font-size:15px; letter-spacing:-.03em; }.mode-tab-copy small { color:#8b9691; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; }.is-active .mode-tab-copy small { color:#aab6af; }.mode-arrow { justify-self:end; color:#a6ada8; font-size:20px; }.is-active .mode-arrow { color:var(--lime); }
.is-static-hidden { display:none !important; }
.converter-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-bottom:72px; }
.section-label { margin-bottom:13px; }.section-label span:first-child { color:#acb0a9; }
.dropzone { min-height:330px; border:1px dashed #aeb4ae; background:rgba(255,254,250,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.dropzone:hover,.dropzone.is-dragging,.dropzone:focus-visible { border-color:var(--ink); background:var(--panel); outline:none; }.dropzone.is-dragging { transform:scale(.99); }
.dropzone input { display:none; }.dropzone-title { margin:17px 0 6px; font-size:20px; font-weight:600; letter-spacing:-.04em; }.dropzone-subtitle { margin:0; color:var(--muted); font-size:14px; }.text-button { padding:0; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--ink); cursor:pointer; }.dropzone-hint { margin:35px 0 0; color:#a1a7a1; font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.dropzone-orbit { width:60px; height:60px; position:relative; transform:rotate(-15deg); }.dropzone-orbit:before,.dropzone-orbit:after,.dropzone-orbit span { content:''; position:absolute; border:1px solid var(--ink); border-radius:50%; }.dropzone-orbit:before { inset:12px 0; transform:rotate(55deg); }.dropzone-orbit:after { inset:0 12px; transform:rotate(55deg); border-color:#b9c938; }.dropzone-orbit span { width:6px; height:6px; border:0; background:var(--lime); top:5px; right:6px; }.dropzone-orbit span:nth-child(2){top:auto;right:auto;bottom:6px;left:2px;background:var(--coral)}.dropzone-orbit span:nth-child(3){top:26px;right:-2px;background:var(--ink)}
.file-card { display:flex; align-items:center; gap:12px; padding:12px; margin-top:12px; background:var(--panel); border:1px solid var(--line); }.file-card.is-hidden { display:none; }.file-thumb { width:50px; height:50px; display:grid; place-items:center; background:#1b2227; color:var(--lime); font:500 9px 'DM Mono',monospace; }.file-details { min-width:0; flex:1; display:grid; gap:5px; }.file-details strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.file-details span { color:var(--muted); font:10px 'DM Mono',monospace; }.icon-button { width:28px; height:28px; border:0; background:none; color:var(--muted); cursor:pointer; font-size:22px; }.privacy-card { display:flex; gap:12px; margin-top:16px; padding:17px 18px; background:#e7ebdc; color:#485246; font-size:12px; line-height:1.4; }.privacy-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#62721d; background:var(--lime); font-size:14px; }.privacy-card strong,.privacy-card span { display:block; }.privacy-card strong { margin-bottom:2px; color:#252b28; font-weight:600; }
.settings-panel { background:var(--panel); border:1px solid var(--line); }.setting-row { padding:21px 22px; border-bottom:1px solid var(--line); }.setting-row:last-child { border-bottom:0; }.setting-row-duo { display:grid; grid-template-columns:1fr 18px 1fr; align-items:end; gap:12px; }.setting-row label { display:grid; gap:9px; font-size:12px; font-weight:600; }.input-with-unit { display:flex; align-items:center; border-bottom:1px solid #aeb4ae; }.input-with-unit input { width:100%; padding:0 0 9px; border:0; outline:0; background:none; font:500 20px 'DM Mono',monospace; color:var(--ink); }.input-with-unit span { padding-bottom:9px; color:var(--muted); font:10px 'DM Mono',monospace; }.dimension-link { align-self:end; padding-bottom:10px; color:#adb3ae; font-family:'DM Mono',monospace; }.setting-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }.setting-heading label { display:block; }.setting-note,.range-labels { color:#a1a7a1; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; }.setting-row select { width:100%; padding:11px 0; border:0; border-bottom:1px solid #aeb4ae; border-radius:0; outline:0; appearance:none; background:linear-gradient(45deg,transparent 50%,#6e7774 50%) calc(100% - 6px) 50%/5px 5px no-repeat,linear-gradient(135deg,#6e7774 50%,transparent 50%) 100% 50%/5px 5px no-repeat; color:var(--ink); cursor:pointer; }.range-row { padding-bottom:18px; }.range-row output { color:var(--ink); font:500 12px 'DM Mono',monospace; }.range-row input[type=range] { width:100%; accent-color:var(--ink); cursor:pointer; }.range-labels { display:flex; justify-content:space-between; margin-top:5px; }.checkbox-row { display:flex; gap:23px; flex-wrap:wrap; }.checkbox-label { display:flex !important; grid-template-columns:none !important; align-items:center; gap:8px !important; cursor:pointer; }.checkbox-label input { position:absolute; opacity:0; }.fake-checkbox { display:grid; place-items:center; width:17px; height:17px; border:1px solid #aeb4ae; color:transparent; font-size:11px; }.checkbox-label input:checked + .fake-checkbox { background:var(--ink); border-color:var(--ink); color:var(--lime); }.action-row { margin-top:14px; }.convert-button,.download-button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:17px 18px; border:1px solid var(--ink); background:var(--ink); color:white; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s,color .2s,transform .2s; text-decoration:none; }.convert-button:hover:not(:disabled),.download-button:hover { background:var(--lime); color:var(--ink); transform:translateY(-2px); }.convert-button:disabled { cursor:not-allowed; opacity:.35; }.button-arrow { color:var(--lime); font-size:21px; line-height:12px; }.convert-button:hover .button-arrow,.download-button:hover .button-arrow { color:var(--ink); }.action-note { margin:10px 0 0; color:#9da39d; text-align:right; font:10px 'DM Mono',monospace; }
.result-section { padding:0 0 78px; }.result-section.is-hidden { display:none; }.result-card { display:grid; grid-template-columns:1.12fr .88fr; background:var(--ink); color:white; }.result-preview-wrap { min-height:380px; display:grid; place-items:center; padding:35px; }.checkerboard { width:min(100%,380px); aspect-ratio:1; display:grid; place-items:center; background-color:#f4f4ed; background-image:linear-gradient(45deg,#dadbd4 25%,transparent 25%),linear-gradient(-45deg,#dadbd4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dadbd4 75%),linear-gradient(-45deg,transparent 75%,#dadbd4 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; overflow:hidden; }.checkerboard img { display:block; max-width:100%; max-height:100%; }.result-info { display:flex; flex-direction:column; justify-content:center; padding:40px 42px 38px 12px; }.result-head { display:flex; justify-content:space-between; align-items:center; color:#a8b0ad; font:10px 'DM Mono',monospace; letter-spacing:.07em; text-transform:uppercase; }.result-format { color:var(--lime); }.success-mark { color:#a8d31c; }.result-info h2 { margin:32px 0 10px; font-size:39px; letter-spacing:-.07em; line-height:1; }.result-info p { max-width:280px; margin:0; color:#aeb5b3; font-size:14px; line-height:1.45; }.result-metrics { display:flex; gap:24px; margin:34px 0 28px; }.result-metrics div { display:grid; gap:6px; }.result-metrics span { color:#7b8682; font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-metrics strong { font:13px 'DM Mono',monospace; }.download-button { background:var(--lime); color:var(--ink); border-color:var(--lime); }.download-button .button-arrow { color:var(--ink); }.again-button { align-self:center; margin-top:17px; padding:0; border:0; border-bottom:1px solid #65706c; background:none; color:#aeb5b3; font-size:12px; cursor:pointer; }.again-button:hover { color:white; border-color:white; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:19px 0 28px; border-top:1px solid var(--line); color:#969e99; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }.site-footer .brand-slash { color:#a7ba35; }.toast { position:fixed; right:22px; bottom:22px; z-index:5; max-width:min(380px,calc(100% - 44px)); padding:13px 16px; opacity:0; transform:translateY(10px); pointer-events:none; background:var(--coral); color:#271b18; font-size:12px; line-height:1.45; white-space:pre-line; transition:opacity .2s,transform .2s; }.toast.is-visible { opacity:1; transform:translateY(0); }
.auth-modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background:rgba(17,22,26,.55); }.auth-dialog { position:relative; width:min(100%,460px); padding:34px; background:var(--panel); box-shadow:0 24px 70px rgba(17,22,26,.25); }.auth-close { position:absolute; top:14px; right:16px; border:0; background:transparent; color:var(--muted); font-size:24px; cursor:pointer; }.auth-dialog h2 { margin:25px 0 10px; font-size:42px; line-height:1; letter-spacing:-.07em; }.auth-dialog > p { max-width:330px; margin:0 0 27px; color:var(--muted); font-size:14px; line-height:1.45; }.auth-dialog form { display:grid; gap:18px; }.auth-dialog label { display:grid; gap:8px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }.auth-dialog input { width:100%; padding:11px 0; border:0; border-bottom:1px solid #aeb4ae; outline:0; background:transparent; color:var(--ink); font:16px 'Space Grotesk',system-ui,sans-serif; }.auth-dialog input:focus { border-color:var(--ink); }.auth-message { min-height:18px; margin:0; color:var(--coral); font-size:12px; }.auth-actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; }.auth-cancel { padding:0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }.auth-submit { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:13px 16px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; font-size:13px; font-weight:600; }.auth-submit:hover { background:var(--lime); color:var(--ink); }.auth-submit:disabled { opacity:.5; cursor:wait; }
body.is-busy .convert-button { background:#4b5553; pointer-events:none; }.is-busy .convert-button .button-arrow { animation:spin 1s linear infinite; }.is-busy .dropzone { pointer-events:none; opacity:.55; }@keyframes spin{to{transform:rotate(180deg)}}
@media (max-width:800px){.site-shell{width:min(100% - 32px,620px)}.site-header{padding-top:20px}.privacy-note{display:none}.hero{display:block;padding:57px 0 48px}.hero h1{margin-top:19px;font-size:clamp(53px,13vw,88px)}.hero-copy{margin-top:30px;max-width:350px}.hero-stats{margin-top:38px}.converter-grid,.result-card{grid-template-columns:1fr}.settings-column{margin-top:20px}.result-info{padding:32px 24px 30px}.result-preview-wrap{min-height:320px;padding:24px}.site-footer{display:grid;gap:8px}}
@media (max-width:460px){.site-shell{width:calc(100% - 24px)}.header-meta{gap:12px}.privacy-note{display:none}.brand{font-size:16px}.hero h1{font-size:53px}.mode-tab{grid-template-columns:25px 1fr 15px; gap:7px; padding:13px 10px}.mode-tab-copy strong{font-size:12px}.mode-tab-copy small{font-size:8px}.setting-row{padding:18px 16px}.checkbox-row{gap:14px}.result-metrics{gap:16px}.result-info h2{font-size:34px}.auth-dialog{padding:27px 22px}.auth-dialog h2{font-size:36px}}