.mq-tools { color:var(--maq-text,#262923); padding-bottom:70px; }
.mq-tools .shell { max-width:1400px; }
.mq-tools-hero { padding-top:32px; }
.mq-tools-crumb { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#66705f; margin-bottom:38px; }
.mq-tools-heading { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; gap:50px; margin-bottom:36px; }
.mq-tools-eyebrow { font-family:var(--maq-font-mono,monospace); letter-spacing:.1em; font-size:11px; text-transform:uppercase; color:#8b4a00; }
.mq-tools h1 { font-size:clamp(36px,4vw,64px); line-height:1.04; max-width:800px; margin:18px 0; text-transform:uppercase; }
.mq-tools-heading p { max-width:720px; color:#62695e; line-height:1.8; }
.mq-tools-drawing { padding:12px; border-bottom:1px solid #d5d9cd; }
.mq-tools-drawing svg { width:100%; fill:none; stroke:#74806b; stroke-width:1.5; }
.mq-tools-drawing .accent { stroke:#c16a00; }
.mq-tools-drawing span { font:12px var(--maq-font-mono,monospace); color:#62695e; }
.mq-tools-access { background:#252923; color:#f5f4ec; border:1px solid #454c3e; border-left:3px solid #f58a00; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.mq-tools-access h2 { font-size:25px; margin:12px 0 8px; text-transform:uppercase; }
.mq-tools-access p { color:#c5cbbc; max-width:740px; font-size:14px; line-height:1.7; margin:0; }
.mq-pro-badge { display:inline-flex; align-items:center; padding:5px 9px; background:#ff9519; color:#252923; font:700 10px var(--maq-font-mono,monospace); text-transform:uppercase; letter-spacing:.07em; border-radius:2px; }
.mq-tools-actions { display:flex; flex-wrap:wrap; gap:10px; min-width:235px; max-width:360px; }
.mq-tools-access .btn { border-color:#69725d; color:#f4f4e9; white-space:nowrap; }
.mq-tools-access .btn.primary { background:#ff9519; color:var(--maq-on-accent); border-color:#ff9519; }
.mq-tools-licences { width:100%; font-size:12px; color:#d7dccf; text-decoration:underline; text-underline-offset:4px; }
.mq-tools-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:stretch; }
.mq-tool-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid #d7dbd0; border-radius:4px; overflow:hidden; scroll-margin-top:100px; }
.mq-tool-card header { position:relative; padding:25px 28px 22px; border-bottom:1px solid #e6e7df; }
.mq-tool-card header::before { content:""; position:absolute; top:0; left:28px; width:32px; height:3px; background:#ff9519; }
.mq-tool-card h2 { margin:0 0 10px; font-size:28px; text-transform:uppercase; line-height:1.15; }
.mq-tool-card header p { margin:0; font-size:14px; color:#62695e; line-height:1.7; }
.mq-tool-form,.mq-tool-preview { padding:24px 28px 28px; }
.mq-tool-form { display:flex; flex-direction:column; flex:1; margin:0; }
.mq-tool-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; align-items:start; }
.mq-tool-fields label { display:flex; flex-direction:column; min-width:0; gap:8px; margin:0; font-size:12px; font-weight:600; line-height:1.5; color:#53594f; }
.mq-tool-fields input,.mq-tool-fields select { width:100%; min-width:0; height:48px; border:1px solid #d1d5c9; border-radius:3px; background:#fafaf6; padding:11px 13px; font:500 15px/1.4 var(--maq-font-ui,sans-serif); color:#252923; box-shadow:none; transition:border-color .15s,background-color .15s; }
.mq-tool-fields select { appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2362695e' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; cursor:pointer; }
.mq-tool-fields :is(input,select):hover { border-color:#9da58f; }
.mq-tool-fields :is(input,select):focus { background-color:#fff; border-color:#c36d0d; }
.mq-tool-wide { grid-column:1/-1; }
.mq-tool-measurement { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:12px; align-items:end; }
.mq-tool-custom-scale { margin-top:12px; }
.mq-tool-custom-scale[hidden] { display:none; }
.mq-tool-form[data-tool="dimension"] .mq-tool-fields > label:last-child { grid-column:1/-1; }
.mq-tool-fields [aria-invalid="true"] { border-color:#b43922; outline:1px solid #b43922; }
.mq-tools :is(input,select,button,a):focus-visible { outline:2px solid #b65f00; outline-offset:3px; }
.mq-tool-submit { margin-top:auto; padding-top:22px; }
.mq-tool-hint { font-size:12px; line-height:1.65; color:#6a7262; margin:0 0 16px; max-width:50ch; }
.mq-tool-form .btn.primary { display:inline-flex; justify-content:space-between; gap:32px; min-width:148px; min-height:46px; padding:12px 18px; background:#ff9519; color:var(--maq-on-accent); border-color:#ff9519; }
.mq-tool-form .btn.primary:hover { background:#ed8500; border-color:#ed8500; color:var(--maq-on-accent); }
.mq-tool-form .btn.primary .icon { width:18px; height:18px; }
.mq-tool-form button:disabled { opacity:.6; cursor:wait; }
.mq-tool-output { font-size:13px; line-height:1.7; margin-top:20px; }
.mq-tool-output:empty { display:none; }
.mq-tool-results { margin:0; border:1px solid #e3e4da; border-radius:3px; background:#fafaf6; padding:0 16px; }
.mq-tool-results > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 16px; padding:14px 0; border-bottom:1px solid #e7e9e0; }
.mq-tool-results > div:last-child { border-bottom:0; }
.mq-tool-results dt { color:#69725f; font-size:12px; }
.mq-tool-results dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.mq-tool-results:not(.mq-tool-results--scales) > div:first-child dd { font-size:24px; line-height:1.3; color:#985000; }
.mq-tool-results--resize > div:nth-child(2) dd { font-size:21px; line-height:1.3; color:#985000; }
.mq-tool-results--scales { max-height:440px; overflow:auto; scrollbar-width:thin; scrollbar-color:#bdc1b4 transparent; }
.mq-tool-results--scales .is-selected { position:sticky; top:0; background:#fafaf6; z-index:1; }
.mq-tool-results--scales .is-selected :is(dt,dd) { color:#985000; font-weight:700; }
.mq-tool-bar { grid-column:1/-1; height:4px; background:#d57908; border-radius:2px; }
.mq-tool-preview { background:linear-gradient(135deg,#fafaf5,#f0f2e9); }
.mq-tool-preview > span { display:block; color:#69725f; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.mq-tool-preview strong { display:block; font-size:24px; margin:12px 0; font-variant-numeric:tabular-nums; }
.mq-tool-preview p { color:#69725f; font-size:13px; margin:0 0 20px; }
.mq-tool-preview a { font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.mq-tools-notes { border-top:1px solid #d7dbd0; margin-top:40px; padding-top:28px; }
.mq-tools-notes h2 { font-size:22px; text-transform:uppercase; }
.mq-tools-notes p { color:#69725f; max-width:960px; font-size:13px; line-height:1.8; }
.mq-tools-notes p a { text-decoration:underline; text-underline-offset:3px; }
.mq-tools-picker-hint { margin:0 0 18px; font-size:14px; color:#62695e; }
.mq-tools-grid--catalog { margin-top:0; }
.mq-tool-tile { display:grid; grid-template-columns:80px minmax(0,1fr); gap:18px 24px; padding:30px; min-width:0; border:1px solid #d7dbd0; border-top:3px solid #f58a00; border-radius:4px; background:#fff; color:#252923; text-decoration:none; scroll-margin-top:100px; transition:border-color .15s,background-color .15s; }
.mq-tool-tile:hover { border-color:#d57908; background:#fffdf7; }
.mq-tool-tile-icon { grid-row:1/3; color:#a75b00; padding:10px; border:1px solid #e7e2d7; border-radius:4px; align-self:start; background:#fafaf6; }
.mq-tool-tile-icon svg { display:block; width:100%; height:auto; }
.mq-tool-tile-copy h2 { font-size:28px; line-height:1.15; text-transform:uppercase; margin:0 0 12px; }
.mq-tool-tile-copy p { font-size:14px; line-height:1.75; color:#62695e; margin:0; }
.mq-tool-tile-example { grid-column:2; font:12px/1.6 var(--maq-font-mono,monospace); color:#6a7262; }
.mq-tool-tile-cta { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; border-top:1px solid #e6e7df; font-size:13px; font-weight:700; color:#985000; }
.mq-tool-tile-cta svg { width:22px; height:22px; }
.mq-tool-tile:last-child:nth-child(odd) { grid-column:1/-1; }
.mq-tools-back { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#985000; text-decoration:underline; text-underline-offset:4px; }
.mq-tools-tool-icon { color:#a75b00; justify-self:center; width:120px; }
.mq-tools-tool-icon svg { width:100%; height:auto; display:block; }
.mq-tools.mq-tools--single .mq-tools-workspace {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
  gap:30px;
  align-items:start;
}
.mq-tools-workspace > .mq-tool-panel { min-width:0; }
.mq-tools-workspace > .mq-tools-notes {
  min-width:0;
  margin:0;
  padding:26px;
  border:1px solid #d7dbd0;
  border-top:3px solid #f58a00;
  border-radius:4px;
  background:#fafaf6;
}
.mq-tools-workspace > .mq-tools-notes h2 { margin:0 0 14px; line-height:1.2; }
.mq-tools-workspace > .mq-tools-notes p:last-child { margin-bottom:0; }
@media(max-width:1000px) {
  .mq-tools.mq-tools--single .mq-tools-workspace { grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media(max-width:600px) {
  .mq-tools-workspace > .mq-tools-notes { padding:22px; }
}
.mq-tool-panel { background:#fff; border:1px solid #d7dbd0; border-top:3px solid #f58a00; border-radius:4px; overflow:hidden; }
.mq-tools--single .mq-tool-form { padding:30px; }
.mq-tools--single .mq-tool-hint { max-width:80ch; }
@media(max-width:1000px) { .mq-tool-tile { grid-template-columns:60px minmax(0,1fr); padding:24px; gap:16px; }.mq-tool-tile-copy h2 { font-size:25px; }.mq-tools--single .mq-tool-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .mq-tool-tile:last-child:nth-child(odd) { grid-column:auto; }.mq-tool-tile { grid-template-columns:64px minmax(0,1fr); }.mq-tools--single .mq-tools-heading { grid-template-columns:minmax(0,1fr) 90px; gap:20px; }.mq-tools-tool-icon { width:80px; } }
@media(max-width:600px) { .mq-tool-tile { padding:22px; grid-template-columns:48px minmax(0,1fr); gap:16px; }.mq-tool-tile-icon { padding:6px; }.mq-tool-tile-copy h2 { font-size:24px; }.mq-tool-tile-copy p { font-size:13px; }.mq-tool-tile-example { grid-column:1/-1; }.mq-tools-tool-icon { display:none; }.mq-tools--single .mq-tools-heading { display:block; }.mq-tools--single .mq-tool-form { padding:22px; }.mq-tools--single .mq-tool-fields { grid-template-columns:1fr; } }
@media(max-width:1000px) { .mq-tools-heading { grid-template-columns:1fr 180px; gap:24px; }.mq-tools-access { align-items:flex-start;flex-direction:column;gap:22px; }.mq-tools-actions { max-width:none; }.mq-tools-grid { gap:20px; }.mq-tool-card header,.mq-tool-form,.mq-tool-preview { padding:22px; }.mq-tool-card header::before { left:22px; }.mq-tool-fields { grid-template-columns:1fr; }.mq-tool-measurement { grid-template-columns:minmax(0,1fr) 112px; } }
@media(max-width:760px) { .mq-tools-grid { grid-template-columns:1fr; }.mq-tool-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .mq-tools-hero { padding-top:24px; }.mq-tools-crumb { margin-bottom:28px; }.mq-tools-heading { display:block; margin-bottom:28px; }.mq-tools-drawing { display:none; }.mq-tools-access { padding:24px; }.mq-tools-grid { margin-top:0; }.mq-tool-fields { grid-template-columns:1fr; gap:16px; }.mq-tool-fields input,.mq-tool-fields select { font-size:16px; }.mq-tool-card h2 { font-size:26px; }.mq-tool-card header p { font-size:13px; }.mq-tool-form .btn.primary { width:100%; }.mq-tool-results > div { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.mq-tool-results dd { text-align:right; }.mq-tool-results:not(.mq-tool-results--scales) > div:first-child dd { font-size:21px; }.mq-tools-actions { min-width:0; }.mq-tools-access .btn { white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .mq-tools * { scroll-behavior:auto; } }