:root {
  --ink:#17233b; --muted:#607087; --primary:#4058db; --primary-dark:#3045bd;
  --line:#e4e9f2; --soft:#f4f6fc; --radius:18px;
  font-family:Arial,"Helvetica Neue",sans-serif;
  color:var(--ink); background:#f8faff; font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;font-size:17px;line-height:1.7;background:radial-gradient(ellipse 70% 420px at 50% 90px,#edf1ff80,transparent),#f8faff}
a{color:inherit;text-underline-offset:4px;transition:color .15s}
a:hover{color:var(--primary)}
button,input,select{font:inherit}
button,a,input,select,summary{touch-action:manipulation}
:focus-visible{outline:3px solid #8494ef;outline-offset:4px}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
svg{display:block;flex-shrink:0}
.shell{width:min(1120px,calc(100% - 64px));margin:auto}
.skip{position:absolute;left:20px;top:-100px;padding:12px;background:#fff;z-index:10}
.skip:focus{top:12px}
.header{border-bottom:1px solid #e6eaf2;background:#ffffffd9}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:24px;font-weight:750;letter-spacing:-1px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.brand-dot{color:var(--primary);margin-left:-8px}
.mark{display:grid;place-items:center;background:var(--primary);color:#fff;border-radius:10px;width:33px;height:33px;font-size:24px;font-weight:600;box-shadow:0 3px 8px #4058db20}
.nav{display:flex;gap:7px;font-size:16px;font-weight:550}
.nav a{padding:8px 13px;text-decoration:none;border-radius:8px}
.nav a:hover{background:#eef1ff;color:var(--primary)}
.header-note{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;background:#328575;border-radius:50%;box-shadow:0 0 0 3px #32857510}
.hero{padding:46px 0 27px;max-width:850px}
.eyebrow{width:fit-content;text-transform:uppercase;letter-spacing:1.3px;font-size:13px;font-weight:700;color:#475ab2;background:#edf0ff;border:1px solid #dfe5fe;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:8px}
.eyebrow:before{content:'';width:5px;height:5px;border-radius:50%;background:#687be3}
h1{font-size:clamp(34px,4.5vw,52px);font-weight:730;line-height:1.14;letter-spacing:-1.9px;margin:18px 0 16px}
h2{font-size:27px;line-height:1.3;letter-spacing:-.8px;font-weight:680;margin:0 0 22px}
h3{font-size:18px;line-height:1.45;font-weight:650;letter-spacing:-.25px}
p{margin:0 0 16px}
.lead{font-size:18px;max-width:660px;color:var(--muted);line-height:1.8}
.breadcrumb{font-size:14px;color:var(--muted);display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 -23px}
.breadcrumb a{text-decoration:none}
.breadcrumb [aria-current]{color:#47536a}
.workspace{background:#fff;border:1px solid #dde3f0;border-radius:var(--radius);box-shadow:0 4px 6px #21366103,0 18px 54px -22px #26396825;overflow:hidden}
.workspace-top{flex-wrap:wrap;padding:15px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(100deg,#fff,#fafbff)}
.workspace-title{font-weight:650;font-size:16px;display:flex;align-items:center;gap:9px}
.workspace-symbol{color:var(--primary);display:grid;place-items:center;background:#edf0ff;width:30px;height:30px;border-radius:8px}
.workspace-symbol svg{width:18px;height:18px}
.tag{border:1px solid #dcebe4;border-radius:20px;background:#f0f8f4;font-size:12px;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;color:#316d54;display:flex;align-items:center;gap:5px;font-weight:650}
.tag:before{content:'';width:5px;height:5px;border-radius:50%;background:#45836b}
.workspace-body{display:grid;grid-template-columns:1.12fr 1fr;gap:36px;padding:27px}
.workspace-body>.fields{display:flex;flex-direction:column}
.workspace-body>.fields>.action{margin-top:auto}
.dropzone{display:flex;min-height:265px;min-width:0;align-items:center;justify-content:center;text-align:center;flex-direction:column;border:1.5px dashed #c8d2ec;border-radius:13px;background:linear-gradient(145deg,#fafbff,#f5f7fe);padding:27px 20px;position:relative;transition:border-color .15s,background .15s}
.dropzone.dragging{border-color:var(--primary);background:#edf1ff}
.upload-icon{color:var(--primary);border:1px solid #e0e5f5;background:white;border-radius:15px;display:grid;place-items:center;width:55px;height:55px;margin-bottom:17px;box-shadow:0 5px 12px #3b51a309;transform:rotate(-4deg)}
.upload-icon svg{width:24px;height:24px;transform:rotate(4deg)}
.dropzone strong{font-size:20px;font-weight:650;letter-spacing:-.3px}
.dropzone small{display:block;color:var(--muted);font-size:14px;margin:6px 0 17px;max-width:100%;overflow-wrap:anywhere}
.file-picker{display:inline-flex;align-items:center;gap:16px;background:#fff;padding:9px 18px;border:1px solid #d1daf3;border-radius:8px;box-shadow:0 2px 4px #233b7205;font-weight:650;font-size:15px;color:#3b50c0;cursor:pointer;transition:background .15s,border-color .15s}
.file-picker:hover{background:#edf1ff;border-color:#97a6e7}
.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dropzone:has(.file-input:focus-visible) .file-picker{outline:3px solid #8494ef;outline-offset:4px}
.dropzone:has(.file-input:disabled) .file-picker{opacity:.6;cursor:wait}
.file-name{font-size:14px;color:var(--muted);margin:8px 0 0;max-width:100%;overflow-wrap:anywhere}
.dropzone #file-limit{font-size:13px;margin:16px 0 0;color:#64748b}
#file-limit span{padding:0 4px}
.fields{display:grid;align-content:start;gap:16px;min-width:0}
.field{display:grid;gap:7px}
.field label,.field-label{font-size:15px;font-weight:650;color:#48566d}
.field input,.field select{border:1px solid #dce2ee;padding:11px 12px;border-radius:8px;min-width:0;width:100%;background:#fff;color:#243149;font-size:16px;box-shadow:0 1px 2px #12265103;transition:border-color .15s,box-shadow .15s}
.field input:hover,.field select:hover{border-color:#b5c0d8}
.field input:focus,.field select:focus{border-color:#7e91e5;box-shadow:0 0 0 3px #4058db0c}
.field input[type=number]{font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:13px;min-width:0}
.help{font-size:15px;color:var(--muted);line-height:1.75}
.fields>.help{padding:10px 12px;border-radius:8px;background:#f5f7fc;margin:0}
.check{font-size:15px;display:flex;align-items:center;gap:9px;color:#48566d}
.check input{accent-color:var(--primary);width:16px;height:16px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--primary);color:white;border:1px solid var(--primary);border-radius:9px;padding:12px 21px;text-decoration:none;font-size:17px;font-weight:650;line-height:1.5;box-shadow:0 3px 7px #4058db17;transition:background .15s,box-shadow .15s,transform .15s}
.button:hover{background:var(--primary-dark);color:#fff;box-shadow:0 5px 12px #4058db25;transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.button.secondary{background:white;color:#4156c6;border-color:#d9e0f4;padding:9px 14px;box-shadow:none}
.button.secondary:hover{background:#f1f4ff}
.action{width:100%;margin-top:4px}
.workspace-bottom{padding:13px 25px;background:#fafbfe;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:13px;color:var(--muted);gap:16px}
.preview{padding:0 27px 20px}
.preview audio,.preview video{display:block;width:100%;max-height:360px;border-radius:11px;background:#111c31}
.preview canvas{display:block;max-width:100%;max-height:420px;margin:auto;object-fit:contain;border:1px solid var(--line);border-radius:8px}
.preview p{font-size:14px;margin:8px 0;color:var(--muted)}
.feedback{padding:0 27px 20px}
.status{font-size:15px;color:#526783;margin:0;padding:10px 12px;border:1px solid #e8edf5;border-radius:8px;background:#f9fbff;overflow-wrap:anywhere}
.status.error{color:#a33032;border-color:#f0d6d6;background:#fff7f7}
.result{margin-top:15px;overflow-x:auto}
.result:empty{display:none}
.download{margin:0 10px 10px 0}
.total{font-size:28px;letter-spacing:-1px;font-weight:700;color:var(--primary)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:25px 0 45px;padding:0 8px}
.trust-item{display:flex;gap:11px;font-size:14px;color:var(--muted)}
.trust-icon{color:#6277a6;background:#edf1fa;width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;font-size:18px}
.trust-item strong{display:block;font-size:15px;color:#43516b;font-weight:600;margin-bottom:1px}
.section{padding:36px 0;border-top:1px solid var(--line)}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}
.section-heading h2{margin:0}
.section-heading>a{font-size:15px;color:#4c60c7;text-decoration:none;font-weight:550}
.section-kicker{font-size:12px;color:#66748b;text-transform:uppercase;letter-spacing:1.1px;white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps>div{padding:21px 22px;background:#fff;border:1px solid var(--line);border-radius:12px}
.step-number{font-size:13px;font-weight:700;color:#5265c1;background:#edf0fd;border-radius:8px;width:29px;height:29px;display:grid;place-items:center;margin-bottom:17px}
.steps h3{margin:0 0 10px}
.steps p,.notes p{font-size:17px;color:var(--muted);line-height:1.85;margin-bottom:0}
.example{background:#f0f3ff;border:1px solid #dfe6fc;border-radius:11px;padding:21px 24px;margin-top:20px;font-size:15px;color:#4e5c82}
.example strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;color:#455ab9}
.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 35px;margin-top:22px}
.notes h3{margin:0 0 9px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.spec{padding:20px 22px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:16px;color:#45536b}
.spec strong{display:block;color:#5b6db4;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.limits{margin-top:13px;font-size:14px;color:var(--muted);line-height:1.8}
.faq{max-width:900px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
details{border-bottom:1px solid var(--line);padding:18px 23px}
details:last-child{border-bottom:0}
details[open]{background:#fafbff}
summary{cursor:pointer;font-weight:550;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:#6172b6;font-size:19px;line-height:1.2;font-weight:400}
details[open] summary::after{content:'−'}
details p{font-size:16px;line-height:1.9;color:var(--muted);margin:12px 30px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{text-decoration:none;padding:23px;border:1px solid var(--line);border-radius:13px;display:block;background:#fff;transition:border-color .18s,transform .18s,box-shadow .18s;position:relative}
.card:hover{border-color:#c5cff2;color:inherit;transform:translateY(-3px);box-shadow:0 10px 24px -10px #253c7525}
.card-icon{color:#5266c5;display:grid;place-items:center;background:#eef1fe;border:1px solid #e6eaf9;width:42px;height:42px;border-radius:11px;margin-bottom:19px}
.card-icon svg{width:22px;height:22px}
.card h3{margin:7px 0 9px;font-size:17px}
.card p{font-size:16px;color:var(--muted);margin:0;line-height:1.85}
.card .arrow{float:right;color:#647498;font-size:20px}
.card-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#63718c}
.footer{border-top:1px solid var(--line);margin-top:45px;padding:32px 0 24px;background:#f2f5fc}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer .brand{font-size:21px}
.footer .mark{width:29px;height:29px;border-radius:8px;font-size:21px}
.footer p{font-size:14px;color:var(--muted);margin-top:10px}
.footer-links{display:flex;gap:24px;font-size:14px;flex-wrap:wrap;padding-top:5px}
.footer-links a{text-decoration:none;color:#56657f}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid #dfe5f1;margin-top:23px;padding-top:17px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:15px}
.article{max-width:780px;padding-bottom:20px}
.article .hero{padding-bottom:20px}
.article .lead{max-width:100%}
.article section{margin:30px 0}
.article h1{font-size:clamp(32px,4.2vw,47px)}
.article h2{font-size:23px;line-height:1.4;margin-bottom:14px}
.article p{color:#586881;line-height:1.95;font-size:17px}
.article .callout{padding:24px 26px;border:1px solid #dde4fa;border-left:3px solid #7285e4;border-radius:0 12px 12px 0;background:#f0f3ff}
.article .callout h2{font-size:19px}
.article .callout p{margin:0}
.article .button{margin-top:12px}
.roommate{display:grid;grid-template-columns:1fr 95px 32px;gap:8px}
.roommate input{padding:9px;width:100%;min-width:0;border:1px solid #dce2ee;border-radius:7px;font-size:15px;color:var(--ink)}
.remove{background:#f8faff;color:#61708d;border:1px solid var(--line);border-radius:7px}
.calculator{grid-template-columns:1fr 1fr}
.calc-intro{background:linear-gradient(145deg,#f4f6ff,#edf1fc);border:1px solid #e5eafa;border-radius:13px;padding:30px;display:flex;flex-direction:column;justify-content:center}
.calc-symbol{font-size:52px;font-weight:350;color:#667bc9;line-height:1.2;margin-bottom:20px}
.calc-intro h2{font-size:29px;max-width:300px;line-height:1.25}
.calc-intro p{font-size:16px;color:#5b6c8a;max-width:320px}
table{border-collapse:collapse;min-width:300px;width:100%;font-size:16px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{background:#f3f5fd;color:#526487;font-size:14px;font-weight:650}
tbody tr:nth-child(even){background:#fafbfe}
[hidden]{display:none!important}
.noscript{padding:20px;background:#fff1dc;border:1px solid #edc99e;border-radius:10px}
.all-tools{margin-top:30px}
.empty-page{padding:60px 0 100px}
@media(min-width:1500px){.hero{padding-top:52px}}
@media(max-width:800px){
  .header-note{display:none}.workspace-body{gap:24px;padding:23px}.cards{grid-template-columns:repeat(2,1fr)}
  .trust{gap:16px}.steps{gap:14px}.steps>div{padding:18px}.specs{grid-template-columns:1fr}.notes{gap:18px 24px}
}
@media(max-width:600px){
  .shell{width:calc(100% - 36px)}.header-inner{min-height:69px;gap:10px}.brand{font-size:21px}.mark{width:29px;height:29px;font-size:22px;border-radius:9px}
  .nav{gap:0;font-size:14px}.nav a{padding:7px 8px}.hero{padding:35px 0 22px}h1{letter-spacing:-1.3px;margin-top:15px}.lead{font-size:17px;line-height:1.85}
  .eyebrow{font-size:12px;letter-spacing:.9px}.breadcrumb{font-size:13px;margin:19px 0 -18px}
  .workspace{border-radius:15px}.workspace-body{grid-template-columns:1fr;padding:18px;gap:23px}.dropzone{min-height:245px;padding:24px 17px}.workspace-top{padding:13px 17px}.workspace-title{font-size:15px}.workspace-symbol{width:27px;height:27px}.tag{font-size:12px;padding:4px 7px}
  .workspace-bottom{padding:12px 17px;flex-wrap:wrap;gap:5px 12px;font-size:12px}.feedback{padding:0 18px 18px}.preview{padding:0 18px 18px}.status{font-size:14px}.field input,.field select{font-size:18px;padding:10px 12px}.field label{font-size:14px}
  .trust{grid-template-columns:1fr;gap:15px;margin:24px 0 32px;padding:0 4px}.trust-item{align-items:center}.trust-item strong{font-size:15px}.trust-icon{width:32px;height:32px}
  .steps,.notes,.cards{grid-template-columns:1fr}.section{padding:29px 0}.steps{gap:12px}.steps>div{padding:20px}.step-number{margin-bottom:13px}.steps p{margin-bottom:0}.section-heading{align-items:center;gap:12px;margin-bottom:19px}.section-kicker{font-size:12px;letter-spacing:.4px;white-space:normal;text-align:right;max-width:100px;flex-shrink:0}
  h2{font-size:23px}.section-heading>a{font-size:13px;white-space:nowrap}.example{padding:18px 20px}.spec{padding:18px 20px}.notes{gap:22px}.notes h3{font-size:17px}details{padding:17px 18px}summary{font-size:15px}details p{margin-right:0}.card{padding:22px}.card-icon{margin-bottom:16px}
  .footer-top{flex-direction:column}.footer-links{gap:21px;padding-top:0}.footer-bottom{flex-direction:column;gap:5px}.footer{margin-top:30px}.calc-intro{padding:23px}.calc-symbol{display:none}.calc-intro h2{font-size:25px;margin-bottom:12px}.calc-intro p{margin:0}.article h2{font-size:21px}.article p{font-size:16px}.article .callout{padding:22px}.roommate{grid-template-columns:1fr 80px 32px}
}
@media(max-width:380px){
  .header-inner{flex-wrap:wrap;padding:13px 0;gap:8px}
  .header-inner>.nav{width:100%;justify-content:space-between}
  .nav a{padding:5px 8px}
  .section-heading{align-items:flex-start;flex-wrap:wrap}
  .section-kicker{max-width:none;text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}