/* The free tools, the comparison page and the Korean page. Loaded after /guides/guides.css, using its colour tokens. */
.wrap.wide{max-width:1000px}
.footer .foot-text{display:block;margin:0;max-width:620px}
.footer .foot-text p{margin:0 0 8px;max-width:none}
.footer nav{flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;gap:8px 20px;max-width:420px}
.mono,textarea,.out pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.field{display:block;font-weight:600;color:var(--ink);margin:0 0 8px}
textarea{display:block;width:100%;min-height:168px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.55;resize:vertical}
textarea:focus-visible,select:focus-visible,.seg button:focus-visible,.copy:focus-visible,.options input:focus-visible,.grid input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.options{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:14px 0 0;font-size:14px}
.options label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.options input{accent-color:var(--btn);width:16px;height:16px;margin:0}
select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.seg button{font:inherit;font-size:14px;border:0;border-radius:7px;background:transparent;color:var(--muted);padding:6px 12px;cursor:pointer;min-height:34px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.status{min-height:22px;margin:12px 0 0;font-size:14px;color:var(--muted)}
.status .warn{color:var(--ink)}
.out{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.out header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;background:var(--band);border-bottom:1px solid var(--line)}
.out h2,.out h3{margin:0;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.out .meta{display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.out pre{margin:0;padding:14px 16px;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-all;color:var(--ink);font-size:14px;line-height:1.6}
.out pre:empty::before{content:attr(data-empty);color:var(--muted);font-family:Geist,system-ui,sans-serif}
.copy{flex:none;font:inherit;font-size:14px;font-weight:600;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer}
.copy:hover{border-color:var(--ink)}
mark{background:transparent;color:inherit}
mark.orf{background:rgba(43,63,176,.16);border-radius:2px}
mark.orf.longest{background:var(--btn);color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) mark.orf{background:rgba(157,176,255,.22)}}
:root[data-theme=dark] mark.orf{background:rgba(157,176,255,.22)}
:root[data-theme=dark] mark.orf.longest,:root:not([data-theme=light]) mark.orf.longest{color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin:10px 0 0}
.legend mark{padding:0 6px}
.callout{margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--band)}
.callout h2{margin:0 0 6px;font-size:18px;letter-spacing:-.015em}
.callout p{margin:0}
.callout .out{margin-top:14px}
.sites{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.sites li{display:grid;grid-template-columns:minmax(150px,1.1fr) 76px minmax(0,2fr);gap:4px 20px;align-items:start;max-width:none;margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.sites .name{color:var(--ink);font-weight:600}
.sites .site{display:block;font-size:13px;color:var(--muted);word-break:break-all}
.sites .count{color:var(--ink);font-variant-numeric:tabular-nums}
.sites .pos{font-size:14px;font-variant-numeric:tabular-nums;word-break:break-word}
.sites svg{grid-column:3;width:100%;height:14px;display:block;margin-top:6px}
.sites .track{stroke:var(--line);stroke-width:2}
.sites .cut{stroke:var(--accent);stroke-width:2}
.sites li.scale-row{padding:8px 0 4px}
.scale{grid-column:3;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.sites-empty{color:var(--muted);padding:18px 0;margin:0}
/* Numeric and enzyme inputs: the virtual gel, the molarity calculator and the GC page. */
.tool-h{font-size:22px;margin:40px 0 0}
.tool>.tool-h:first-child{margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:20px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
.grid input,.grid select{font:inherit;font-size:15px;width:100%;min-height:40px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.grid .hint{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.grid .hint.warn{color:var(--ink)}
@media(max-width:760px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid,.grid.three,.grid.four{grid-template-columns:1fr}}
.frags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.frags li{margin:0;padding:6px 12px;max-width:none;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.frags .n{color:var(--ink);font-weight:600}
/* The gel itself stays dark in both themes, as a gel photograph is. */
.gel{margin:24px 0 0}
.gel svg{display:block;margin:0 auto;max-width:100%;height:auto}
.gel .box{fill:#1b1b1f;stroke:#3b3b45}
.gel .well{fill:#33333c}
.gel .band{fill:#fff}
.gel .blabel{fill:#eaeaf0;font-size:10px;font-variant-numeric:tabular-nums}
.gel .bnote{fill:#a6a6b2;font-size:9px}
.gel .lead{fill:none;stroke:#73737f;stroke-width:1}
.gel .lane{fill:var(--ink);font-size:11px}
.gel .lnote,.gel .mlabel{fill:var(--muted);font-size:9.5px}
.gel .mlabel{font-size:10px;font-variant-numeric:tabular-nums}
.controls{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:20px}
.controls .label{font-size:14px;color:var(--muted);margin-right:8px}
.prose h2{font-size:24px;margin:48px 0 12px}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin:64px 0 0;padding:28px;border-radius:14px;background:var(--band)}
.cta h2{margin:0 0 6px;font-size:24px}
.cta p{margin:0;max-width:520px}
.cta .kicker{font-size:14px;color:var(--muted);margin-bottom:8px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.actions .button{padding:11px 18px}
.disclaimer{display:inline-block;font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 12px;margin:0 0 32px}
.table-wrap{overflow-x:auto;margin:16px 0 0}
.features{width:100%;border-collapse:collapse;font-size:15px}
.features th,.features td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-top:1px solid var(--line)}
.features thead th{font-size:13px;font-weight:500;color:var(--muted);border-top:0;padding-top:0}
.features tbody th{color:var(--ink);font-weight:600;width:38%}
.faq details{border-top:1px solid var(--line);max-width:760px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 28px 18px 0;color:var(--ink);font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:18px;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 0;padding:0;list-style:none}
.cards li{margin:0;padding:20px;border:1px solid var(--line);border-radius:12px;max-width:none}
.cards h3{margin:0 0 6px;font-size:18px;letter-spacing:-.015em}
.cards p{margin:0;font-size:15px}
.link-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0;list-style:none}
.link-list li{margin:0;padding:0;max-width:none}
.link-list a{display:block;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.link-list a:hover{border-color:var(--ink)}
.link-list span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
@media(max-width:700px){.sites li{grid-template-columns:minmax(0,1fr) auto}.sites .pos,.sites svg,.scale{grid-column:1/-1}.cards,.link-list{grid-template-columns:1fr}.features tbody th{width:44%}.footer nav{justify-content:flex-start;max-width:none}}
@media(max-width:600px){.cta{padding:22px 18px;margin-top:48px}.out header{padding-left:12px}.out pre{padding:12px}.features th,.features td{padding-right:10px}}
.ko section{margin-top:72px}
.ko section>h2{margin:0 0 12px}
.ko .actions{margin:0 0 16px}
.ko-note{font-size:14px;color:var(--muted);margin:0 0 40px;max-width:640px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.cards.two{grid-template-columns:1fr}.ko section{margin-top:56px}}
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
/* Guide screenshots read wider than the prose column; the app UI is unreadable at 836px. */
.plate.wide img{width:min(1160px,calc(100vw - 48px));max-width:none;margin-left:50%;transform:translateX(-50%)}
.plate.wide figcaption{text-align:center}
/* The request to copy, above the screenshot of it being typed. */
blockquote.ask{margin:0 0 20px;padding:14px 18px;border-left:3px solid var(--accent);background:var(--band);border-radius:0 10px 10px 0}
blockquote.ask p{margin:0;color:var(--ink)}