/* Little tools: a quiet basket resting on the footer's ground line. */
.tools-ground{position:relative;width:100%;height:106px;margin:0 0 22px;border-bottom:1px solid #66806640;text-align:right}
.tools-ground::after{content:'';position:absolute;bottom:-2px;right:18px;width:100px;height:4px;border-radius:50%;background:#0209028c;filter:blur(2px);pointer-events:none}
.basket-launch{position:absolute;right:14px;bottom:-1px;width:122px;height:103px;border:0;padding:0;background:none;isolation:isolate;z-index:1;cursor:pointer;touch-action:manipulation}
.basket-launch img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 3px #0005);transform-origin:50% 95%;transition:transform .2s}
.basket-launch:hover img{transform:rotate(-4deg) translateY(-2px)}

footer:has(.tools-ground){padding-top:24px}
body.tools-basket-open{overflow:hidden}
#tool-basket-dialog{position:fixed;inset:0;margin:auto;width:min(820px,calc(100% - 24px));max-width:820px;max-height:calc(100dvh - 24px);padding:46px 20px 25px;border:0;border-radius:24px;background:transparent;color:#f4f6ee;overflow:auto;overscroll-behavior:contain;box-shadow:none}
#tool-basket-dialog::backdrop{background:#080d09d9;backdrop-filter:blur(5px);animation:basket-backdrop .25s ease-out}
#tool-basket-dialog:focus{outline:none}
#tool-basket-dialog .basket-close{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #92ad8a55;border-radius:50%;background:#1e2d20;color:#e5ecdf;padding:10px;z-index:5}
.basket-close svg{display:block;width:16px;height:16px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
.basket-close:hover{border-color:#16cf57;background:#24412b}
.basket-stage{position:relative;height:220px;width:260px;margin:0 auto 12px;pointer-events:none}
.basket-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 13px 12px #0005)}
.basket-stage .basket-filled{animation:basket-tip .68s cubic-bezier(.2,.7,.2,1) both}
.basket-stage .basket-emptied{opacity:0;animation:basket-empty .7s ease-out both}
#tool-basket-dialog .basket-heading{font:600 13px Nunito,system-ui,sans-serif;color:#bbcbb4;text-align:center;letter-spacing:.02em;margin:0 0 21px;animation:tools-caption .6s both}
.tools-spill{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:13px;padding:8px 0 25px;perspective:700px}
.tool-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:128px;min-height:166px;border:1px solid #fff5;border-bottom:5px solid #9e926e;border-radius:24px;background:linear-gradient(145deg,#f4ead5,#d9c9a6);padding:16px 9px 12px;color:#202a20;box-shadow:inset 2px 3px 4px #fff9,inset -2px -3px 5px #776a462e,0 12px 18px #0005;transform-origin:50% 10%;animation:tool-spill .8s cubic-bezier(.18,.75,.25,1.05) both;animation-delay:calc(.18s + var(--tool-index)*.075s);text-align:center;touch-action:manipulation}
.tool-tile .tool-object{width:82px;height:88px;display:block;filter:drop-shadow(0 5px 3px #62563a44);transition:transform .2s}
.tool-tile .tool-name{display:block;font:800 13px/1.2 Nunito,system-ui,sans-serif;max-width:108px;margin-top:11px}
.tool-tile:hover .tool-object{transform:translateY(-5px) rotate(-5deg)}
.tool-tile:hover{border-color:#16cf57;box-shadow:inset 2px 3px 4px #fff9,0 12px 24px #0006}
.tool-tile:focus-visible{outline:3px solid #16cf57;outline-offset:5px}
#tool-basket-dialog.is-closing{animation:tools-away .23s ease-in both;pointer-events:none}
#tool-basket-dialog.is-closing::backdrop{animation:backdrop-away .23s ease-in both}
.tool-detail{max-width:450px;margin:12px auto 0;padding:25px;border:1px solid #65835b66;border-radius:20px;background:#19221b;box-shadow:0 20px 50px #0004}
.tool-detail[hidden],#tool-basket-dialog [hidden]{display:none!important}
.tool-back{border:0;background:none;padding:0 0 13px;color:#a7c39d;font:600 13px Nunito,system-ui;cursor:pointer}
#tool-basket-dialog .tool-detail h2{margin:0 0 20px;font:800 23px Nunito,system-ui;color:#f4f6ee}
.tool-form{display:grid;gap:14px}
.tool-form label{display:grid;gap:6px;font-size:13px;color:#bdc9b8;text-align:left}
.tool-form input,.tool-form select,.tool-form textarea{min-width:0;width:100%;border:1px solid #52624b;border-radius:9px;background:#101710;color:#f4f6ee;padding:11px 12px;font:400 16px Nunito,system-ui;accent-color:#16cf57}
.tool-form textarea{min-height:105px;resize:vertical}
.tool-form input:focus-visible,.tool-form select:focus-visible,.tool-form textarea:focus-visible{outline:2px solid #16cf57;outline-offset:2px}
.tool-run{border:0;border-radius:10px;background:#16cf57;color:#082c16;font:800 15px Nunito,system-ui;padding:12px;cursor:pointer}
.tool-result{display:block;overflow-wrap:anywhere;padding:15px;border-radius:10px;background:#243329;color:#bdf2c8;font:800 23px/1.4 Nunito,system-ui;text-align:center;min-height:62px}
.tool-note{font:400 11px Nunito,system-ui;color:#8e9d88;text-align:center;margin:13px 0 0}
@keyframes basket-tip{0%{opacity:1;transform:translate(var(--basket-x,0px),var(--basket-y,20px)) scale(var(--basket-scale,.65)) rotate(0)}45%{opacity:1;transform:translate(0,0) scale(1) rotate(-8deg)}75%{opacity:1;transform:rotate(-28deg)}100%{opacity:0;transform:rotate(-30deg)}}
@keyframes basket-empty{0%,47%{opacity:0;transform:rotate(7deg)}100%{opacity:1;transform:rotate(0)}}
@keyframes tool-spill{0%{opacity:0;transform:translate(var(--spill-x,0px),-95px) scale(.3) rotate(var(--spill-angle,15deg))}35%{opacity:1}72%{transform:translate(0,7px) scale(1.02) rotate(-2deg)}100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes tools-caption{0%,65%{opacity:0}100%{opacity:1}}
@keyframes basket-backdrop{from{background:#080d0900;backdrop-filter:blur(0)}to{background:#080d09d9;backdrop-filter:blur(5px)}}
@keyframes tools-away{to{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes backdrop-away{to{background:#080d0900;backdrop-filter:blur(0)}}
@media(max-width:639px){.tools-ground{height:83px;margin-bottom:19px}.basket-launch{width:95px;height:81px;right:7px}.tools-ground::after{width:80px;right:10px}footer:has(.tools-ground){padding-top:16px}#tool-basket-dialog{padding:43px 10px 16px}.basket-stage{height:170px;width:210px;margin-bottom:8px}.tools-spill{gap:11px 9px;max-width:360px;margin:auto;padding-bottom:18px}.tool-tile{width:94px;min-height:132px;padding:11px 6px 9px;border-radius:20px}.tool-tile .tool-object{width:64px;height:67px}.tool-tile .tool-name{font-size:11px;margin-top:9px}.tool-detail{padding:20px}#tool-basket-dialog .basket-heading{font-size:12px;margin-bottom:13px}}
@media(prefers-reduced-motion:reduce){#tool-basket-dialog,#tool-basket-dialog::backdrop,.basket-stage img,.tool-tile,#tool-basket-dialog .basket-heading{animation:none!important}.basket-stage .basket-filled{display:none}.basket-stage .basket-emptied{opacity:1}.basket-launch img,.tool-object{transition:none!important}}
/* Search and the small basket form one centered group. */
.masthead .project-search-row{gap:13px;justify-content:center}
.masthead .basket-launch{position:relative;right:auto;bottom:auto;display:block;flex:0 0 56px;width:56px;height:44px;align-self:center}
@media(max-width:639px){.masthead .project-search-row{gap:10px}.masthead .basket-launch{flex-basis:48px;width:48px;height:37px}}
/* Leave room for the basket when the search field is expanded on narrow phones. */
.masthead .project-search.is-open .search-field{max-width:calc(100vw - 190px)}

/* Small tools appear after large projects only while a query is active. */
.tool-search-results{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:13px;min-width:0}
.tool-search-results .tool-tile{animation:none;margin:0;flex:0 0 128px}
#tool-search-results[hidden],.tool-search-results .tool-tile[hidden]{display:none!important}
@media(max-width:639px){.tool-search-results{gap:11px 9px}.tool-search-results .tool-tile{flex-basis:94px}}

/* The glass close control stays beside the object or panel being viewed. */
#tool-basket-dialog .basket-close{top:48px;left:calc(50% + 104px);right:auto;width:44px;height:44px;padding:12px;background:linear-gradient(140deg,#d5efd51f,#23452b6b);border:1px solid #d9f4d64d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff3,0 7px 22px #0005,0 1px 4px #0004;color:#eff7e9}
#tool-basket-dialog .basket-close svg{width:18px;height:18px;stroke-width:2}
#tool-basket-dialog .basket-close:hover{background:#507a4c66;border-color:#c0e8b78c;box-shadow:inset 0 1px 0 #fff3,0 8px 26px #0006}
#tool-basket-dialog.is-tool-detail .basket-close{left:calc(50% + 166px);top:72px}
#tool-basket-dialog .tool-detail{padding-top:29px}
#tool-basket-dialog .tool-back{padding-right:44px;min-height:32px}
@media(max-width:639px){#tool-basket-dialog .basket-close{top:47px;left:calc(50% + 73px);width:42px;height:42px}#tool-basket-dialog.is-tool-detail .basket-close{left:auto;right:23px;top:67px}#tool-basket-dialog .tool-detail{padding-top:24px}}
/* Keep the basket's base level with the search frame. */
.masthead .project-search-row{align-items:flex-end}
.masthead .basket-launch{align-self:flex-end}

/* The familiar flags: English first, with the inactive language faded. */
#tool-basket-dialog .basket-language{position:absolute;top:54px;left:calc(50% - 184px);display:flex;align-items:center;gap:2px;padding:4px;border:1px solid #48604099;border-radius:24px;background:#1b261dc9;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff0a,0 4px 12px #0002;z-index:5;width:max-content;height:36px;box-sizing:border-box}
.basket-language button{display:flex;align-items:center;justify-content:center;width:27px;height:27px;min-width:27px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;line-height:0;cursor:pointer}
.basket-language button[aria-pressed="true"]{background:#2b392b;box-shadow:inset 0 0 0 1px #71836a}
.basket-language svg{display:block;flex:none;width:21px;height:21px;border-radius:50%;overflow:hidden;opacity:.35;filter:grayscale(.55)}
.basket-language button[aria-pressed="true"] svg,.basket-language button:hover svg,.basket-language button:focus-visible svg{opacity:1;filter:none}
#tool-basket-dialog.is-tool-detail .basket-language{left:calc(50% + 88px);top:76px}
@media(max-width:639px){#tool-basket-dialog .basket-language{left:calc(50% - 139px);top:50px}#tool-basket-dialog.is-tool-detail .basket-language{left:auto;right:73px;top:70px}}
/* In the basket view the flags sit low, just above the spilled cards. */
#tool-basket-dialog:not(.is-tool-detail) .basket-language{top:230px}
@media(max-width:639px){#tool-basket-dialog:not(.is-tool-detail) .basket-language{top:175px}}
/* Homepage shell stays in place while each actual tool page appears as a window. */
#site-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;flex:1;width:100%}
.direct-tool-backdrop{display:none;position:fixed;inset:0;z-index:10000;background:#080d09d9;backdrop-filter:blur(5px)}
body[data-page-kind="tool"]:not(.has-tool-modal) .direct-tool-backdrop{display:block}
.has-tool-modal .direct-tool-backdrop{display:none}
#tool-basket-dialog[open]{z-index:10001}
#tool-basket-dialog .tool-detail{max-width:560px;text-align:left}
#tool-basket-dialog .tool-detail h1{font:800 25px/1.25 Nunito,system-ui,sans-serif;margin:0 0 9px;letter-spacing:-.4px;padding-right:4px;color:#f4f6ee}
#tool-basket-dialog .tool-intro{font:400 14px/1.65 Nunito,system-ui,sans-serif;color:#afbea8;margin:0 0 20px}
#tool-basket-dialog.is-tool-detail .basket-close{left:calc(50% + 224px)}
#tool-basket-dialog.is-tool-detail .basket-language{left:calc(50% + 146px)}
.basket-language a{display:flex;align-items:center;justify-content:center;width:27px;height:27px;min-width:27px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;line-height:0;cursor:pointer}
.basket-language a[aria-pressed="true"]{background:#2b392b;box-shadow:inset 0 0 0 1px #71836a}
.basket-language a[aria-pressed="true"] svg,.basket-language a:hover svg,.basket-language a:focus-visible svg{opacity:1;filter:none}
.tool-tile{text-decoration:none}
.tool-two-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.tool-form select{font-size:14px;min-height:45px}
.tool-form .tool-reset{border:1px solid #52624b;border-radius:10px;background:#223025;color:#c9d8c0;font:700 14px Nunito,system-ui;padding:12px;cursor:pointer}
.tool-form .tool-reset:hover{border-color:#16cf57}
.tool-form output{margin:0}
#tool-basket-dialog .tool-guide{margin:20px 0 0;border-top:1px solid #7e9c702f;padding-top:13px;color:#aebfa5}
.tool-guide>summary{cursor:pointer;font:700 13px/1.5 Nunito,system-ui;color:#b7d6aa;padding:5px 0;list-style-position:inside}
.tool-guide article{padding-top:21px;max-width:100%}
#tool-basket-dialog .tool-guide h2{font:800 17px/1.5 Nunito,system-ui;color:#e1ecd8;margin:0 0 9px}
#tool-basket-dialog .tool-guide h3{font:700 14px/1.5 Nunito,system-ui;color:#d4e3cb;margin:17px 0 6px}
#tool-basket-dialog .tool-guide p{font:400 13px/1.85 Nunito,system-ui;color:#aebeaa;margin:0 0 13px;overflow-wrap:anywhere}
.tool-guide section{margin:0 0 24px}
.related-tools a{display:inline-block;font:600 12px/1.6 Nunito,system-ui;color:#a3cf9b;text-decoration:underline;text-underline-offset:3px;margin:0 14px 9px 0}
@media(max-width:639px){#tool-basket-dialog .tool-detail h1{font-size:22px}#tool-basket-dialog .tool-intro{font-size:13px}#tool-basket-dialog.is-tool-detail .basket-close{left:auto;right:23px}#tool-basket-dialog.is-tool-detail .basket-language{left:auto;right:73px}.tool-two-columns{gap:9px}.tool-form select{font-size:13px}}
/* Match the close control with a circular glass back arrow. */
#tool-basket-dialog .tool-back{position:absolute;top:72px;left:calc(50% - 268px);display:grid;place-items:center;width:44px;height:44px;min-height:0;max-width:none;padding:12px;border:1px solid #d9f4d64d;border-radius:50%;background:linear-gradient(140deg,#d5efd51f,#23452b6b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff3,0 7px 22px #0005,0 1px 4px #0004;color:#eff7e9;z-index:5;line-height:0;text-decoration:none}
#tool-basket-dialog .tool-back svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#tool-basket-dialog .tool-back:hover{background:#507a4c66;border-color:#c0e8b78c}
#tool-basket-dialog .tool-back:focus-visible{outline:2px solid #16cf57;outline-offset:3px}
#tool-basket-dialog .tool-detail{padding-top:78px}
@media(max-width:639px){#tool-basket-dialog .tool-back{top:67px;left:23px;width:42px;height:42px}#tool-basket-dialog .tool-detail{padding-top:74px}}

#tool-basket-dialog .basket-close svg{stroke-width:2.6}

/* Preview inventory only: no advertising script, requests or tracking. */
#tool-basket-dialog .tool-ad-preview{display:none;pointer-events:none;user-select:none}
@media(min-width:1024px) and (min-height:648px){
 #tool-basket-dialog.has-ad-preview{width:min(1040px,calc(100% - 48px));max-width:1040px;min-height:624px}
 #tool-basket-dialog.has-ad-preview .tool-ad-preview{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:160px;height:600px;box-sizing:border-box;border:1px dashed #91a48a40;border-radius:12px;background:#b5c8a803;color:#a7b69c80;text-align:center;font:600 12px/1.4 Nunito,system-ui,sans-serif;letter-spacing:.025em}
 #tool-basket-dialog.has-ad-preview .tool-ad-left{left:calc(50% - 472px)}
 #tool-basket-dialog.has-ad-preview .tool-ad-right{right:calc(50% - 472px)}
 #tool-basket-dialog .tool-ad-preview small{font-size:11px;font-weight:400;color:#a7b69c5e;letter-spacing:.04em}
}

/* Basket toolbar: the homepage search followed by language flags. */
#tool-basket-dialog:not(.is-tool-detail) .basket-close{display:none}
#tool-basket-dialog .tools-spill{position:relative}
#tool-basket-dialog .basket-toolbar{display:flex;align-items:center;gap:12px;width:100%;max-width:760px;box-sizing:border-box;margin:0 auto 14px;min-height:36px}
#tool-basket-dialog:not(.is-tool-detail) .basket-toolbar .basket-language{position:static;flex:none;margin:0;height:36px}
#tool-basket-dialog.is-tool-detail .basket-toolbar{display:contents}
#tool-basket-dialog.is-tool-detail #basket-search,#tool-basket-dialog.is-tool-detail .basket-search-empty{display:none!important}
#basket-search{flex:0 1 auto;min-width:0;width:max-content;border-radius:10px}
#basket-search-form{display:flex;align-items:center;position:relative;margin:0;min-height:36px;max-width:100%}
#basket-search .search-toggle{width:36px;height:36px;padding:9px;border-radius:10px}
#basket-search .search-toggle svg{width:18px;height:18px}
#basket-search .search-border rect{rx:10px}
#basket-search .search-field{flex-shrink:1;min-width:0}
#basket-search.is-open .search-field{width:min(190px,calc(100vw - 205px));visibility:visible;opacity:1}
#basket-search-input{display:block;width:100%;min-width:0;padding:7px 7px 7px 0;border:0;outline:0;background:none;color:#f4f6ee;font:500 16px/22px Nunito,system-ui,sans-serif;caret-color:#16cf57}
#basket-search-input::placeholder{color:#80917c;font-size:13px}
#basket-search .search-clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;line-height:1;margin-right:6px}
#basket-search .search-clear svg{display:block;flex:none;width:12px;height:12px;margin:0}
#basket-filter-term{min-width:0;max-width:min(190px,calc(100vw - 205px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;color:#cfdbca;font:600 13px/22px Nunito,system-ui;padding:0 7px 0 0;cursor:pointer}
#basket-search.has-filter:not(.is-open) .search-toggle::after{top:10px;bottom:10px}
#tool-basket-dialog .basket-search-empty{text-align:center;color:#9cad93;font:500 13px Nunito,system-ui;margin:10px auto 24px}
@media(max-width:639px){#tool-basket-dialog .basket-toolbar{max-width:360px;gap:10px}#basket-search.is-open .search-field{width:min(150px,calc(100vw - 205px))}}

/* The basket is a bare illustration in every interaction state. */
#open-tool-basket,#open-tool-basket:is(:hover,:active,:focus,:focus-visible),#open-tool-basket img{outline:none!important;border:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
#open-tool-basket{appearance:none;-webkit-appearance:none;background:transparent}
/* Reserve room for the homepage's new flags as well as the basket. */
.masthead .project-search.is-open .search-field{max-width:max(40px,calc(100vw - 270px))}

/* Stationary tool frame and advertising; only the inner content scrolls. */
body.tools-basket-open{overflow:hidden}
#tool-basket-dialog.is-tool-detail[open]{position:fixed;inset:0;box-sizing:border-box;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;min-height:0;padding:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#tool-basket-dialog.is-tool-detail .tool-detail{box-sizing:border-box;flex:0 1 auto;width:min(560px,100%);max-width:560px;height:min(760px,calc(100dvh - 82px));min-height:0;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}
#tool-basket-dialog .tool-fixed-toolbar{display:flex;align-items:center;gap:10px;flex:none;min-height:64px;padding:10px 12px;box-sizing:border-box}
#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar .tool-back,#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar .basket-close,#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar .basket-language{position:static;inset:auto;transform:none;flex:none;margin:0}
#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar .tool-back{margin-right:auto}
#tool-basket-dialog .tool-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 24px;scrollbar-width:thin;scrollbar-color:#51634b transparent}
#tool-basket-dialog .tool-bottom-ad{box-sizing:border-box;display:flex;flex:none;align-items:center;justify-content:center;gap:10px;width:320px;height:50px;max-width:100%;border:1px dashed #91a48a40;border-radius:8px;background:#b5c8a803;color:#a7b69c80;font:600 11px/1.4 Nunito,system-ui;text-align:center;pointer-events:none}
#tool-basket-dialog:not(.is-tool-detail) .tool-bottom-ad{display:none}
#tool-basket-dialog .tool-bottom-ad small{font-size:10px;font-weight:400;color:#a7b69c5e}
@media(min-width:1024px) and (min-height:648px){
 #tool-basket-dialog.is-tool-detail .tool-detail{height:min(760px,calc(100dvh - 24px))}
 #tool-basket-dialog.is-tool-detail .tool-bottom-ad{display:none}
 #tool-basket-dialog.has-ad-preview .tool-ad-preview{position:fixed;top:50%}
}
@media(max-width:639px){#tool-basket-dialog .tool-scroll{padding:0 20px 20px}}
@media(max-width:335px){#tool-basket-dialog .tool-bottom-ad{width:234px;height:60px}#tool-basket-dialog.is-tool-detail .tool-detail{height:min(760px,calc(100dvh - 92px))}}

/* No browser focus or tap rings after interacting, on desktop or touch. */
*:focus,*:focus-visible{outline:none!important}*{-webkit-tap-highlight-color:transparent}

/* Percentage operations: a clear, localized dropdown and equal X/Y columns. */
.percent-mode-field{display:grid;gap:7px;font-size:13px;color:#bdc9b8}
.percent-picker{position:relative;min-width:0}
.tool-form .percent-picker select{appearance:none;padding-right:46px;background:#101710 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316cf57' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/22px}
.percent-mode-trigger{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:54px;padding:13px 14px;border:1px solid #597153;border-radius:11px;background:linear-gradient(135deg,#203323,#152219);color:#f4f6ee;text-align:left;font:600 14px/1.5 Nunito,system-ui;cursor:pointer}
.percent-mode-trigger>span{flex:1;min-width:0}
.percent-mode-trigger>svg{flex:none;width:25px;height:25px;padding:3px;border-radius:7px;background:#16cf5714;fill:none;stroke:#16cf57;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.percent-mode-trigger[aria-expanded=true]{border-color:#16cf5780}
.percent-mode-trigger[aria-expanded=true]>svg{transform:rotate(180deg)}
.percent-mode-options{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:20;max-height:min(310px,42dvh);overflow-y:auto;overscroll-behavior:contain;padding:5px;border:1px solid #52714c;border-radius:12px;background:#1a281d;box-shadow:0 14px 35px #0009;scrollbar-width:thin}
.percent-mode-options>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 10px;border:0;border-radius:7px;background:transparent;color:#dce7d6;text-align:left;font:500 13px/1.5 Nunito,system-ui;cursor:pointer}
.percent-mode-options>button:is(:hover,:focus),.percent-mode-options>button[aria-selected=true]{background:#2a422c;color:#f4f6ee}
.percent-mode-options>button>svg{flex:none;width:18px;height:18px;visibility:hidden;fill:none;stroke:#16cf57;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.percent-mode-options>button[aria-selected=true]>svg{visibility:visible}
.percent-values{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:639px){.percent-mode-trigger{font-size:13px;padding:12px;gap:10px}.percent-mode-options>button{font-size:12px}}

/* Keep the basket search and flags centered together as search expands. */
#tool-basket-dialog:not(.is-tool-detail) .basket-toolbar{justify-content:center;padding-left:0;padding-right:0}

/* Mobile keyboard: pin the existing frame to the visible viewport, and scroll only its content. */
#tool-basket-dialog.is-tool-detail.tool-keyboard-open[open]{top:var(--tool-visible-top,0px);bottom:auto;height:var(--tool-visible-height,100dvh);justify-content:flex-start}
#tool-basket-dialog.is-tool-detail.tool-keyboard-open .tool-detail{height:calc(var(--tool-visible-height,100dvh) - 82px)}
#tool-basket-dialog.is-tool-detail.tool-keyboard-open .tool-bottom-ad{display:flex}
#tool-basket-dialog.has-ad-preview.tool-keyboard-open .tool-ad-preview{display:none}
#tool-basket-dialog.tool-keyboard-open .tool-scroll{scroll-behavior:auto}
#tool-basket-dialog.tool-keyboard-open .percent-workspace{gap:10px;scroll-margin-top:0}
#tool-basket-dialog.tool-keyboard-open .percent-mode-trigger{min-height:46px;padding:9px 12px;line-height:1.35}
#tool-basket-dialog.tool-keyboard-open .percent-values input{min-height:42px;padding:8px 10px;font-size:16px}
#tool-basket-dialog.tool-keyboard-open .tool-result{min-height:48px;padding:8px 12px;font-size:22px}
@media(max-width:335px){#tool-basket-dialog.is-tool-detail.tool-keyboard-open .tool-detail{height:calc(var(--tool-visible-height,100dvh) - 92px)}}

/* Center icon artwork independently of padding and intrinsic grid sizing. */
#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar :is(.tool-back,.basket-close){position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;line-height:0}
#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar :is(.tool-back,.basket-close)>svg{display:block;flex:none;width:18px;height:18px;margin:0;padding:0;transform:none;vertical-align:middle}
@media(max-width:639px){#tool-basket-dialog.is-tool-detail .tool-fixed-toolbar :is(.tool-back,.basket-close){width:42px;height:42px;min-width:42px;min-height:42px}}

/* Give the calculator the full visible height while the numeric keyboard is open. */
#tool-basket-dialog.is-tool-detail.tool-keyboard-open .tool-bottom-ad{display:none}
#tool-basket-dialog.is-tool-detail.tool-keyboard-open .tool-detail{height:calc(var(--tool-visible-height,100dvh) - 24px)}

/* Bookmark separator: five draggable shapes and a small color palette. */
.tool-form[data-tool-form=bookmark]{--separator-color:#000000;gap:0}
.bookmark-drag-hint{display:flex;align-items:center;gap:10px;font:600 12px/1.6 Nunito,system-ui;color:#aabda2;margin:0 0 19px}
.bookmark-drag-hint>svg{flex:none;width:23px;height:23px;fill:none;stroke:#8fbd86;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bookmark-touch-hint{display:none}
.bookmark-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:23px}
.bookmark-choice{min-width:0;text-align:center}
.bookmark-draggable{position:relative;display:grid;place-items:center;height:94px;width:100%;border:1px solid #526b475c;border-radius:14px;background:linear-gradient(145deg,#26362a,#17251b);color:var(--separator-color);cursor:grab;touch-action:manipulation;transition:transform .16s,border-color .16s,background .16s;text-decoration:none}
.bookmark-draggable:hover{transform:translateY(-3px);border-color:#8caf7f;background:#263d2a}
.bookmark-draggable:active{cursor:grabbing}
.bookmark-art{display:block;width:49px;height:49px;pointer-events:none}
.bookmark-grip{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:12px;height:8px;color:#789071;opacity:.6;pointer-events:none}
.bookmark-choice-name{display:block;margin-top:9px;font:600 11px/1.5 Nunito,system-ui;color:#b6c5ae}
.bookmark-color-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px;color:#cbd8c3;font:600 12px/1.5 Nunito,system-ui}
.bookmark-color-value{font:400 11px/1.5 Nunito,system-ui;color:#809577}
.bookmark-colors{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bookmark-swatch{position:relative;display:block;flex:none;width:29px;height:29px;padding:0;border:3px solid transparent;border-radius:50%;background:var(--swatch);background-clip:content-box;cursor:pointer}
.bookmark-swatch[aria-pressed=true]{border-color:#bdcfb1}
.bookmark-custom-color{position:relative;display:grid!important;place-items:center;width:33px;height:33px;margin-left:3px;border:1px solid #526b47;border-radius:10px;overflow:hidden;background:#223727;cursor:pointer}
.bookmark-custom-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;cursor:pointer}
.bookmark-custom-color svg{width:18px;height:18px;fill:none;stroke:#c7d9bd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media(max-width:639px){.bookmark-choices{gap:7px}.bookmark-draggable{height:82px;border-radius:12px}.bookmark-art{width:40px;height:40px}.bookmark-choice-name{font-size:10px}.bookmark-colors{gap:10px}.bookmark-drag-hint{font-size:11px}}
@media(pointer:coarse){.bookmark-desktop-hint{display:none}.bookmark-touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.bookmark-draggable{transition:none}}

.bookmark-drag-tooltip{position:fixed;z-index:10000;transform:translateX(-50%);max-width:calc(100vw - 24px);box-sizing:border-box;padding:10px 14px;border:1px solid #76916a66;border-radius:10px;background:#233026f5;color:#f4f6ee;box-shadow:0 8px 25px #0006;backdrop-filter:blur(10px);font:700 14px/1.5 Nunito,system-ui,sans-serif;text-align:center;pointer-events:none;white-space:nowrap}.bookmark-drag-tooltip[hidden]{display:none}

.tool-intro:empty{display:none}

.bookmark-colors{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:center}.bookmark-swatch{width:min(100%,29px);height:auto;aspect-ratio:1;justify-self:center}.bookmark-color-heading label{display:block}@media(max-width:639px){.bookmark-colors{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.bookmark-swatch{width:min(100%,32px)}}

/* Render the masthead controls at their final positions on the first paint.
   The search is present in static HTML; only its text field is collapsed. */
.masthead .basket-launch img,.masthead .basket-launch:hover img{transform:none;transition:none}
/* Do not let vertical auto margins recenter the header while HTML is arriving. */
.masthead{margin:0 auto}
/* A block line box does not move the controls when the wordmark font resolves. */
.masthead .home-logo{display:block;width:fit-content;margin:0 auto}
/* Font-independent wordmark: original Barlow outlines, no hidden/font-swap phase. */
.brand-font-loading .home-logo.has-vector{visibility:visible}
.home-logo.has-vector .wordmark-vector{display:flex;align-items:center;line-height:0}
.home-logo.has-vector .wordmark-glyph{display:block;flex:none;width:calc(var(--glyph-width)*1em);height:1.1em;margin-right:-1px;overflow:visible}