/* Shared brand and component layer. Page-specific layouts remain in their own stylesheets. */
:root{--green:#164b40;--line:#e0e4e6;--surface:#fff;--muted:#5b6872;--ink:#14232b;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fcfcfb;accent-color:var(--green)}
::selection{background:#cce2d6;color:#173d36}
body{color:var(--ink);background:#fcfcfb}
header,main,footer{max-width:1600px}
header{padding:8px 38px;gap:32px;background:#fff;align-items:center;justify-content:flex-start;flex-wrap:nowrap;border-bottom-color:var(--line)}
.brand{font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:27px;height:27px}
.site-nav{order:1;margin:0;gap:24px;flex-wrap:nowrap}
.site-nav a{font-size:14px;padding:8px 0;border-bottom:2px solid transparent;border-radius:0;min-height:38px;white-space:nowrap}
.site-nav a[aria-current=page]{background:none;color:var(--green);border-bottom-color:var(--green);font-weight:700}
.site-nav a:hover{background:none;color:var(--green)}
.private{order:3;margin-left:auto;font-size:12px;white-space:nowrap;color:var(--green)}
header>a:not(.brand){order:2;margin-left:auto;font-size:13px;color:var(--green);white-space:nowrap;text-underline-offset:3px}
main{padding:26px 38px}
h1,.guide h1{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.15;overflow-wrap:break-word;text-wrap:balance}
h1 span{color:inherit}
h2,.guide h2{color:var(--ink);letter-spacing:-.02em}
.heading{display:block;margin-bottom:24px}
.sub{font-size:16px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.eyebrow,.step{font-size:12px;letter-spacing:.025em;color:var(--muted)}
/* These two labels are decorative; dated source labels in guides remain visible. */
.heading>.eyebrow,.heading>div>.eyebrow{display:none}
.workspace{gap:24px;grid-template-columns:320px minmax(0,1fr)}
.editor,.thumbnail-card,.math-grid>section{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:22px}
.upload{background:#f7faf8;border-color:#aebdb6;border-radius:5px;min-height:136px;margin-top:0;gap:6px}
.upload strong{font-size:14px;font-weight:600}
.upload span:not(.upload-icon),.upload small{font-size:12px;color:#52675e}
.upload-icon{color:var(--green)}
.muted,.privacy,#fileinfo,#input-help,#status,#geometry,.compression .muted{color:var(--muted);font-size:13px;line-height:1.6}
#error{font-size:13px;line-height:1.5;color:#9b2929}
.editor>label:not(.upload),.banner-workspace label,.dimensions label{font-size:13px;color:var(--ink)}
input,textarea,select{accent-color:var(--green);caret-color:var(--green)}
.editor input:not([type=file]):not([type=range]):not([type=color]):not([type=checkbox]),.editor select,.editor textarea,.input-row input{width:100%;min-width:0;min-height:44px;border:1px solid #cbd5d9;border-radius:5px;background:white;color:var(--ink);font:14px/1.5 Arial,Helvetica,sans-serif;padding:10px 12px}
.editor input[type=color]{border:1px solid #cbd5d9;border-radius:5px;background:white;padding:3px}
.editor input[type=range]{width:100%}
input::placeholder,textarea::placeholder{color:#61716e;opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#download,.input-row button,.thumbnail-card button,.action{background:var(--green);color:#fff;border:0;border-radius:5px;font-size:14px;font-weight:600;min-height:46px;padding:11px 18px;text-decoration:none}
#download:hover:not(:disabled),.input-row button:hover,.thumbnail-card button:hover:not(:disabled),.action:hover{background:#0b372e}
button:disabled{cursor:not-allowed;opacity:.55}
.action.secondary{background:#fff;color:var(--green);border:1px solid #cbd5d2}
.action.secondary:hover{background:#edf4f0}
.output-frame{background:#f5f7f6;border:1px solid var(--line);border-radius:6px;min-height:300px;padding:20px}
.output-frame p{color:var(--muted);font-size:14px}
.resultsbar{align-items:center;min-height:36px;margin-bottom:12px}
.resultsbar>span:last-child{color:var(--muted);font-size:12px}
.notes{margin-top:36px;padding-top:24px;border-color:var(--line);gap:24px 56px}
.notes p{font-size:14px;line-height:1.75;color:#53615c;max-width:72ch}
.notes h2{font-size:25px;letter-spacing:-.02em}
.notes h3{font-size:18px}
.notes details,.compression details{border-color:var(--line)}
.notes summary,.compression summary{line-height:1.6}
a{text-underline-offset:3px}
footer{padding:24px 38px;font-size:12px;color:#53615c;border-color:var(--line)}
footer nav a{font-size:13px;border-radius:5px}
footer nav a:hover{background:#edf4f0;color:#164b40}
.guide{max-width:1180px;font-size:16px;line-height:1.7}
.guide p{max-width:74ch}
.guide h2{font-size:26px;line-height:1.3}
.guide h3{font-size:18px}
.guide .lead{font-size:18px;line-height:1.65;color:#34474b}
.guide>article>section{padding:28px 0;border-color:var(--line)}
.guide>article>.answer{padding-top:4px}
.guide .actions{margin:22px 0 4px;gap:10px}
.guide figure img,.guide video,.compression figure img{border-radius:6px}
.guide figcaption,.compression figcaption{color:var(--muted);line-height:1.6}
.guide table{font-size:13px;line-height:1.6}
.guide caption{font-size:14px;color:var(--ink);margin-bottom:12px}
.guide thead{background:#edf3ef;color:#173d36}
.guide tbody th{background:#f5f8f5;color:var(--ink)}
.guide tbody td{background:#fff;color:#34474b}
.guide th,.guide td{border-color:var(--line);padding:14px 12px;font-variant-numeric:tabular-nums}
.formula{background:#edf3ef;color:#173d36;border-radius:5px;font-size:14px;line-height:1.7}
.compression{max-width:1100px}
.banner-workspace{grid-template-columns:300px minmax(0,1fr);gap:24px}
.banner-previews canvas{background:#f5f7f6;border-color:var(--line);border-radius:5px}
.banner-previews figcaption{font-size:13px;line-height:1.6}
.thumbnail-card[data-state=unavailable],.thumbnail-card[data-state=error]{background:#f6f8f6}
.information-page main{max-width:1000px;min-height:55vh;padding-top:40px}
.information-page .notes{display:block;margin-top:24px}
.information-page .notes p,.information-page main>p{max-width:72ch;font-size:16px;line-height:1.8;color:#53615c}
@media(max-width:1050px){header{gap:24px}.site-nav{gap:16px}.workspace{grid-template-columns:300px minmax(0,1fr)}.editor{padding:18px}}
@media(max-width:760px){header{padding:12px 18px;gap:8px;flex-wrap:wrap}.brand{font-size:17px}.private{order:0;font-size:11px;max-width:none}.site-nav,header .site-nav{order:3;width:100%;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.site-nav a{font-size:12px;padding:8px 2px}.site-nav a[aria-current=page]{background:none}header>a:not(.brand){order:0;min-height:36px;display:inline-flex;align-items:center}main{padding:22px 16px}h1,.guide h1{font-size:30px;line-height:1.2;letter-spacing:-.03em}.sub{font-size:15px}.workspace,.banner-workspace{grid-template-columns:1fr;gap:22px}.editor{padding:16px}.guide .lead{font-size:17px}.guide h2{font-size:23px}.guide>article>section{padding:24px 0}.guide th,.guide td{padding:12px}.guide tbody td:before{color:#53615c}.notes{grid-template-columns:1fr;gap:20px}.notes p{font-size:14px}.output-frame{min-height:220px}.input-row{flex-direction:column}.input-row input{width:100%}.thumbnail-grid{grid-template-columns:1fr}.math-grid{grid-template-columns:1fr}.information-page main{padding:28px 18px}.information-page .notes p{font-size:15px}footer{padding:22px 18px}}