:root{--bg:#04100d;--panel:#071713;--text:#f2f5f1;--muted:#91a39d;--line:rgba(123,160,150,.16);--accent:#19d6a0;--glow:rgba(25,214,160,.18);--font:"DM Sans",sans-serif;--mono:"JetBrains Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}
.bg-grid{position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 72% 10%,rgba(25,214,160,.08),transparent 25%),radial-gradient(circle at 8% 70%,rgba(25,214,160,.025),transparent 32%),linear-gradient(rgba(130,180,165,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(130,180,165,.022) 1px,transparent 1px);background-size:auto,auto,72px 72px,72px 72px}.noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.nav{position:sticky;top:18px;z-index:100;width:min(1160px,calc(100% - 56px));height:66px;margin:18px auto 0;padding:0 12px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(5,18,14,.82);border:1px solid rgba(130,169,157,.17);border-radius:22px;backdrop-filter:blur(24px);box-shadow:0 18px 55px rgba(0,0,0,.28)}.brand{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;letter-spacing:1px;white-space:nowrap}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(25,214,160,.65);border-radius:11px;color:var(--accent);background:rgba(25,214,160,.045);font:600 12px var(--mono)}.accent{color:var(--accent)}.nav nav{display:flex;gap:30px}.nav nav a{font:500 12px var(--font);color:#8fa39e}.nav nav a:hover,.nav nav a.active{color:var(--accent)}.back{height:40px;padding:0 14px;display:flex;align-items:center;border:1px solid rgba(25,214,160,.25);border-radius:10px;color:#dce8e4;font:600 11px var(--mono)}.back:hover{background:var(--accent);color:#04100d}
main{width:min(1220px,calc(100% - 44px));margin:auto}.lab-hero{padding:105px 0 70px;max-width:850px}.eyebrow,.label,.status,.num,.field label,.preview>label{font:10px var(--mono);letter-spacing:1.7px}.eyebrow{display:flex;align-items:center;gap:10px;color:#a7b8b2}.eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 15px var(--accent)}.lab-hero h1{font-size:clamp(58px,8vw,104px);line-height:.9;letter-spacing:-5px;margin:25px 0}.lab-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--accent)}.lab-hero p{max-width:650px;color:var(--muted);font-size:18px;line-height:1.7}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:100px}.tool-card{position:relative;padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(7,23,18,.96),rgba(5,16,13,.92));box-shadow:0 25px 70px rgba(0,0,0,.18);overflow:hidden}.tool-card:hover{border-color:rgba(25,214,160,.3);transform:translateY(-3px);transition:.25s}.tool-card.markdown-card{grid-column:1/-1}.tool-head{display:flex;justify-content:space-between;color:var(--accent);margin-bottom:18px}.tool-head>div{display:flex;gap:12px}.num,.status{color:#60736d}.tool-card h2{font-size:36px;letter-spacing:-1.8px;margin:0 0 8px}.tool-card>p{color:var(--muted);line-height:1.7;max-width:720px;margin:0 0 24px}
.dropzone{min-height:250px;border:1px dashed rgba(25,214,160,.3);border-radius:14px;background:rgba(25,214,160,.018);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(25,214,160,.05)}.drop-icon{font:32px var(--mono);color:var(--accent)}.dropzone strong{font-size:17px}.dropzone span{font:11px var(--mono);color:#71837d}.hidden{display:none!important}.compress-controls{margin-top:18px}.file-meta,.result-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.file-meta{font:10px var(--mono);color:#9db0a9;margin-bottom:18px}.range-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font:10px var(--mono);color:#8fa39e}.range-row input{width:100%;accent-color:var(--accent)}.range-row b{color:var(--accent);min-width:42px;text-align:right}.result-row{margin-top:20px;font:10px var(--mono);color:#7f938b}
.field{display:flex;flex-direction:column;gap:9px}.field label,.preview>label{color:#71837d}textarea{width:100%;resize:vertical;background:#06130f;border:1px solid var(--line);border-radius:12px;color:#e7efec;padding:15px;outline:none;line-height:1.65}textarea:focus{border-color:rgba(25,214,160,.55);box-shadow:0 0 0 3px rgba(25,214,160,.05)}.qr-workspace{display:grid;grid-template-columns:1fr 190px;gap:18px}.qr-preview{min-height:190px;border:1px solid var(--line);border-radius:12px;background:#f2f5f1;display:grid;place-items:center;position:relative}.qr-preview canvas,.qr-preview img{max-width:160px!important;height:auto!important}.qr-preview span{position:absolute;color:#52625d;font:9px var(--mono)}.actions{display:flex;flex-wrap:wrap;gap:8px}.qr-workspace+.actions{margin-top:14px}
.btn{border:1px solid var(--line);border-radius:10px;padding:12px 15px;font:600 11px var(--mono);transition:.2s}.btn.primary{background:var(--accent);color:#04100d;border-color:var(--accent)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--glow)}.btn.secondary{background:rgba(7,20,16,.55);color:#d3dfda}.btn.secondary:hover:not(:disabled){border-color:rgba(25,214,160,.45);color:var(--accent)}.btn:disabled{opacity:.35;cursor:not-allowed}
.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.md-grid textarea,.preview{min-height:330px}.preview{border:1px solid var(--line);border-radius:12px;background:#06130f;padding:15px;overflow:auto}.preview>label{display:block;margin-bottom:14px}.prose{color:#dbe7e2;line-height:1.7}.prose h1,.prose h2,.prose h3{color:#f2f5f1}.prose h1{font-size:34px}.prose h2{font-size:27px}.prose a{color:var(--accent);text-decoration:underline}.prose code{background:#0b211a;border:1px solid var(--line);padding:2px 5px;border-radius:5px}.prose pre{background:#020b08;border:1px solid var(--line);padding:14px;border-radius:10px;overflow:auto}.prose blockquote{border-left:2px solid var(--accent);padding-left:14px;color:#9db0a9}.md-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}.md-footer>span{font:9px var(--mono);color:#6f837b}.download-link{display:inline-block;margin-top:14px;color:var(--accent);font:10px var(--mono);border-bottom:1px solid rgba(25,214,160,.3);padding-bottom:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0 35px;color:#60736d;font:9px var(--mono)}footer a:hover{color:var(--accent)}
@media(max-width:850px){.nav{width:calc(100% - 24px);top:12px}.nav nav{display:none}main{width:min(100% - 28px,700px)}.lab-hero{padding:85px 0 55px}.lab-hero h1{font-size:clamp(52px,15vw,82px);letter-spacing:-4px}.tools{grid-template-columns:1fr}.tool-card.markdown-card{grid-column:auto}.md-grid{grid-template-columns:1fr}.md-grid textarea,.preview{min-height:260px}}
@media(max-width:560px){.nav{height:58px;border-radius:18px;padding-left:12px}.brand{font-size:14px}.brand-mark{width:36px;height:36px}.back{padding:0 10px}.tool-card{padding:20px;border-radius:16px}.tool-card h2{font-size:30px}.qr-workspace{grid-template-columns:1fr}.qr-preview{min-height:180px}.md-footer{align-items:flex-start;flex-direction:column}.md-footer .actions{width:100%}.md-footer .btn{flex:1}footer{flex-direction:column;gap:12px}}