/* Shared chrome for the Absolv founder tools.
 *
 * Lifted from the Founder Money Leak tool, which was the reference
 * implementation and kept its own inline copy deliberately, on the grounds that
 * refactoring a working tool to prove an abstraction is how you break a thing
 * that was fine. That page was retired on 2026-08-28, so this file is now the
 * only copy and there is no longer a second implementation to drift from.
 *
 * Everything here obeys docs/BRAND.md: paper and ink, three typefaces and no
 * more, no illustrations. Visual interest comes from type, one big figure, and
 * at most one data-driven chart per screen.
 */

:root{
  --paper:#F0E9DC;--paper-2:#E8DFCC;--paper-3:#DCD1B9;--paper-card:#E4DBCE;--paper-edge:#C9BD9F;
  --ink:#141414;--ink-2:#2A2724;--ink-muted:#5A5347;--ink-faded:#8B8270;
  --orange:#DF5911;--orange-deep:#B8431A;--orange-soft:#EA8F58;--orange-pale:#F4D2B5;--orange-wash:rgba(223,89,17,0.18);--graphite:#33302A;
  --rule:#1A1A1A;--rule-soft:#B3A887;
  --status-ok:#4A6B3E;
  /* EXEMPTION: a different easing curve from canon's
     cubic-bezier(0.22, 1, 0.36, 1), across 9 call sites in this file. This is a
     stylesheet rather than a page, which is why the exemption file count
     exceeds the page count, and tools/working-from-home declares the same
     curve, so the two want deciding together. Its own follow-up snag, because
     this block of work ships pixel-identical. */
  --ease-ink:cubic-bezier(.2,.7,.3,1);
  --font-display:"Newsreader",Georgia,serif;
  --font-sans:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.6}

.skip-link{position:absolute;left:-999px;top:0;background:var(--orange);color:var(--paper);padding:.6rem 1rem;z-index:100;font-weight:600;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}

/* The nav and footer rules moved to /assets/chrome.css on 2026-09-01, so that
 * every page taking the injected header gets the styling for it, rather than
 * only the three pages that link this file. */

/* A narrow column keeps the option cards chunky rather than wide and thin. The
 * result screen carries a table, so it gets its own wider measure. */
main{max-width:34rem;margin:0 auto;padding:2rem 1.5rem 1rem;min-height:60vh}
main.wide{max-width:42rem}

/* ---------- progress ---------- */
.progress{display:flex;gap:.4rem;margin:0 0 2.75rem}
.seg{flex:1;height:6px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.seg span{display:block;height:100%;width:0;background:var(--orange);border-radius:99px;transition:width .45s var(--ease-ink)}
.seg.done span{width:100%}
.seg.now span{width:100%;background:var(--orange-soft)}

.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faded);margin:0 0 .9rem}
.highlight{position:relative;display:inline-block;padding:0 .12em;z-index:0}
.highlight::before{content:"";position:absolute;left:-.08em;right:.06em;top:.12em;bottom:.06em;background:var(--orange-soft);opacity:.45;z-index:-1;border-radius:2px 8px 3px 7px;transform:rotate(-.4deg)}

/* ---------- screen ---------- */
.screen{animation:rise .35s var(--ease-ink) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen{animation:none}.seg span{transition:none}.opt{transition:none}
  .reveal{animation:none}.bar-fill{transition:none}
}

h1{font-family:var(--font-display);font-size:clamp(1.9rem,5vw,2.7rem);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0 0 1rem}
.q{font-family:var(--font-display);font-size:clamp(1.5rem,4.6vw,2.05rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0 0 .6rem}
.sub{color:var(--ink-muted);font-size:.97rem;margin:0 0 2.25rem;max-width:32ch}
.lede{font-size:1.05rem;color:var(--ink-muted);margin:0 0 2rem}

/* ---------- options ----------
 * Tall vertical cards side by side, the way Brilliant does it. Every label is
 * short enough to sit in a third of a phone screen, which is the thing that
 * makes the shape possible at all. No letter keys, and no border at rest (the
 * brand distinguishes a card from paper by tone, not by rule). */
.opts{display:grid;gap:.7rem;margin:0 0 1.75rem}
/* minmax(0,1fr) rather than 1fr: a bare 1fr track is minmax(auto,1fr), and an
 * auto MINIMUM is min-content, so a card whose label is wider than its share
 * pushes the track open instead of shrinking. At 390px three cards wanted
 * 376px inside a 342px container and the third card ran off the screen. */
.opts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:10.5rem;
  text-align:center;background:var(--paper-card);border:1px solid transparent;border-radius:12px;
  padding:1.4rem .8rem;font:inherit;font-size:1rem;font-weight:600;line-height:1.3;color:var(--ink);
  cursor:pointer;transition:border-color .22s var(--ease-ink),background .22s var(--ease-ink),transform .22s var(--ease-ink),box-shadow .22s var(--ease-ink)}
.opt:hover:not(:disabled){border-color:var(--orange);transform:translateY(-4px);box-shadow:0 8px 24px rgba(223,89,17,.15)}
.opt:active:not(:disabled){transform:translateY(0);box-shadow:none}
.opt:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.opt .lab{display:block}
/* A figure gets the display serif, so the card carries something to look at
 * without the decoration the brand does not allow. */
/* Scales with the viewport so a money label fits its third of the row rather
 * than overflowing the card that minmax(0,1fr) now correctly holds at width.
 * Sized for eight characters (£100,000), not the seven we happen to ship. */
.opt .lab.big{font-family:var(--font-display);font-size:clamp(1.15rem,4.6vw,1.5rem);font-weight:600;letter-spacing:-.01em;line-height:1.12}
.opt .note{display:block;font-size:.78rem;font-weight:400;color:var(--ink-muted);line-height:1.35}
.opt .mark{position:absolute;top:.6rem;right:.6rem;display:none;width:19px;height:19px}
.opt .mark svg{width:100%;height:100%;display:block}
@media (min-width:600px){.opt{min-height:11.5rem;font-size:1.06rem;padding:1.5rem 1rem}.opt .lab.big{font-size:1.8rem}.opt .note{font-size:.84rem}}
.opt.picked{border-color:var(--orange);background:var(--orange-pale)}
.opt.picked .mark{display:block;color:var(--orange-deep)}
.opt.right{border-color:var(--status-ok);background:rgba(74,107,62,.12)}
.opt.right .mark{display:block;color:var(--status-ok)}
.opt.wrong{border-color:var(--orange-deep);background:var(--orange-wash)}
.opt.wrong .mark{display:block;color:var(--orange-deep)}
.opt:disabled{cursor:default}
.opt.faded{opacity:.42}

/* ---------- reveal ----------
 * One short punchline, the number, then the detail folded away. The whole panel
 * advances the tool. There is no Continue button to travel to, because the
 * thing you are already reading is the thing you tap. */
.reveal{border-left:3px solid var(--orange);border-radius:0 10px 10px 0;background:var(--paper-2);padding:1.3rem 1.4rem;margin:0 0 1.75rem;animation:rise .3s both;
  cursor:pointer;transition:transform .22s var(--ease-ink),box-shadow .22s var(--ease-ink)}
.reveal:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(223,89,17,.14)}
.reveal:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.reveal-go{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.15rem 0 0;padding-top:.85rem;border-top:1px solid var(--rule-soft);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);font-weight:600}
.reveal-go .arrow{display:inline-block;font-size:1.05rem;line-height:1;transition:transform .22s var(--ease-ink)}
.reveal:hover .reveal-go .arrow{transform:translateX(4px)}
.verdict{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 .7rem}
.verdict svg{width:15px;height:15px;flex:none}
.verdict.ok{color:var(--status-ok)}
.verdict.no{color:var(--orange-deep)}
.punch{font-family:var(--font-display);font-size:clamp(1.18rem,3.6vw,1.42rem);font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink);margin:0}
.cost-strip{display:flex;align-items:baseline;flex-wrap:wrap;gap:.15rem .65rem;margin:1.15rem 0 0}
.cost-strip .fig{font-family:var(--font-display);font-size:clamp(2rem,7.5vw,2.6rem);font-weight:700;line-height:1;letter-spacing:-.025em;color:var(--orange-deep)}
.cost-strip .lab{font-size:.93rem;color:var(--ink-muted)}
.why{margin:1.15rem 0 0;border-top:1px solid var(--rule-soft);padding-top:.8rem}
.why summary{cursor:pointer;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);list-style:none}
.why summary::-webkit-details-marker{display:none}
.why summary::after{content:"  +"}
.why[open] summary::after{content:"  -"}
.why summary:hover{color:var(--orange)}
.why p{margin:.8rem 0 0;font-size:.95rem;color:var(--ink-2);line-height:1.65}
.why .cost{font-weight:600;color:var(--orange-deep)}

/* ---------- the guess, scored ----------
 * The founder committed to a number before seeing the answer. Showing their
 * guess beside the truth is the entire mechanic, so it gets its own block
 * rather than being folded into the punchline. */
.guess-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;margin:1.15rem 0 0;padding:.95rem 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.guess-vs .side{text-align:center}
.guess-vs .k{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faded);margin-bottom:.3rem}
.guess-vs .v{display:block;font-family:var(--font-display);font-size:clamp(1.25rem,5vw,1.6rem);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.guess-vs .side.you .v{color:var(--ink-muted)}
.guess-vs .side.truth .v{color:var(--orange-deep)}
.guess-vs .sep{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faded)}
.guess-miss{font-size:.9rem;color:var(--ink-muted);margin:.75rem 0 0;text-align:center}
.guess-miss b{color:var(--orange-deep);font-weight:600}

/* ---------- charts ----------
 * One measure, one hue, every value direct labelled, so length carries the
 * message and nothing else does. */
.bars{margin:1.2rem 0 0}
.bars-title{font-size:.88rem;color:var(--ink-muted);margin:0 0 .7rem}
.bar-row{display:grid;grid-template-columns:4.6rem 1fr auto;align-items:center;gap:.7rem;margin-bottom:.5rem}
.bar-row:last-child{margin-bottom:0}
.bar-name{font-size:.9rem;color:var(--ink-2)}
.bar-track{height:14px;background:var(--paper-3);border-radius:2px}
.bar-fill{display:block;height:100%;background:var(--orange);border-radius:0 4px 4px 0;min-width:2px}
.bar-val{font-family:var(--font-mono);font-size:.86rem;font-weight:600;color:var(--ink);white-space:nowrap}
/* The value column is auto width and its text does not wrap, so a long one
 * such as "£57,000 (not open to you)" pushed the row past the screen on a
 * 320px phone. Below that it is allowed to wrap instead. */
@media (max-width:420px){.bar-val{white-space:normal;text-align:right}}
.bar-row.muted .bar-fill{background:var(--rule-soft)}
.bar-row.muted .bar-val{color:var(--ink-muted)}

/* A single bar split into named segments: what you budgeted against what it
 * actually costs. */
.stack{margin:1.2rem 0 0}
.stack-track{display:flex;height:26px;border-radius:3px;overflow:hidden;background:var(--paper-3)}
.stack-seg{height:100%;min-width:2px}
.stack-key{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.7rem 0 0}
.stack-key .k{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-2)}
.stack-key .sw{width:11px;height:11px;border-radius:2px;flex:none}
.stack-key .n{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-muted)}

/* An inline SVG plot. Used for the discount curve and the VAT notch, where the
 * shape of the line IS the finding and a bar chart would hide it. */
.plot{margin:1.2rem 0 0}
.plot svg{display:block;width:100%;height:auto;overflow:visible}
.plot .grid{stroke:var(--rule-soft);stroke-width:1;opacity:.5}
.plot .axis{stroke:var(--ink-faded);stroke-width:1}
.plot .line{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.plot .line.ghost{stroke:var(--rule-soft);stroke-width:1.6;stroke-dasharray:4 3}
.plot .area{fill:var(--orange);opacity:.12}
.plot .dot{fill:var(--orange-deep)}
.plot .tick{font-family:var(--font-mono);font-size:9px;fill:var(--ink-faded)}
.plot .note{font-family:var(--font-mono);font-size:9px;fill:var(--orange-deep);font-weight:600}
.plot-cap{font-size:.82rem;color:var(--ink-muted);margin:.6rem 0 0}

/* The cash timeline: money out, then a long wait, then money in. */
.tl{margin:1.2rem 0 0}
.tl-row{display:grid;grid-template-columns:5.4rem 1fr;align-items:center;gap:.7rem;margin-bottom:.55rem}
.tl-row:last-child{margin-bottom:0}
.tl-name{font-size:.85rem;color:var(--ink-2)}
.tl-track{position:relative;height:16px;background:var(--paper-3);border-radius:2px}
.tl-span{position:absolute;top:0;height:100%;border-radius:2px;background:var(--orange);opacity:.85}
.tl-span.out{background:var(--rule-soft)}
.tl-span.gap{background:var(--orange)}
.tl-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faded);margin-top:.35rem;padding-left:6.1rem}

/* ---------- buttons ---------- */
/* .btn is a .btn-drawn in the markup; marks come from /assets/drawn-controls.css */ .btn{font-family:inherit;text-decoration:none}

.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* full -> .btn-drawn.is-block */
/* ghost -> .btn-drawn.is-quiet */

.btn:disabled{opacity:.55;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

.tally{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faded);margin:1.75rem 0 0;border-top:1px solid var(--rule-soft);padding-top:.9rem}
.tally b{color:var(--orange-deep);font-weight:600}

/* ---------- result ---------- */
.headline-num{font-family:var(--font-display);font-size:clamp(3rem,13vw,5.5rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--orange-deep);margin:.5rem 0 .3rem}
.headline-num.sm{font-size:clamp(2.4rem,10vw,4rem)}
.headline-note{color:var(--ink-muted);font-size:.97rem;margin:0 0 2rem}
.leaks{list-style:none;padding:0;margin:0 0 1.5rem}
.leaks li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--rule-soft)}
.leaks li:first-child{border-top:1px solid var(--rule-soft)}
.leaks .what{font-size:.97rem}
.leaks .how{display:block;color:var(--ink-muted);font-size:.86rem;margin-top:.2rem}
.leaks .amt{font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--orange-deep);white-space:nowrap}
.panel{background:var(--paper-2);border:1px solid var(--paper-edge);border-radius:10px;padding:1.3rem 1.4rem;margin:0 0 1.75rem}
.panel h2{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:0 0 .5rem}
.panel p{margin:0 0 .6rem;font-size:.93rem;color:var(--ink-muted)}
.panel p:last-child{margin-bottom:0}
h2.sect{font-family:var(--font-display);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;margin:2.25rem 0 .4rem}
p.sect-sub{color:var(--ink-muted);font-size:.93rem;margin:0 0 1rem}

/* ---------- dial in your own numbers ----------
 * The card picks got them an answer in four taps. This is for the founder who
 * is actually making the decision and needs their real figures in it. */
.dial{margin:0 0 1.75rem}
.dial summary{cursor:pointer;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);list-style:none;padding:.8rem 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.dial summary::-webkit-details-marker{display:none}
.dial summary::after{content:"  +"}
.dial[open] summary::after{content:"  -"}
.dial summary:hover{color:var(--orange)}
.dial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.9rem;margin:1.2rem 0 0}
.field label{display:block;font-size:.8rem;color:var(--ink-muted);margin-bottom:.3rem}
.field .wrap{display:flex;align-items:center;background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;padding:0 .7rem;transition:border-color .15s}
.field .wrap:focus-within{border-color:var(--orange)}
.field .pre{font-family:var(--font-mono);font-size:.9rem;color:var(--ink-faded);flex:none}
.field input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--font-mono);font-size:.98rem;color:var(--ink);padding:.6rem .3rem;outline:none;-moz-appearance:textfield}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field .suf{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-faded);flex:none}
.dial-note{font-size:.84rem;color:var(--ink-faded);margin:1rem 0 0}

/* ---------- resumed from a saved answer set ---------- */
/* Deliberately quiet. It is an explanation of why the tool is not on its
   first question, not an offer, so it is set in the same mono label style
   as the other asides rather than given any weight of its own. */
.resumed{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 1.4rem}
.resumed button.link{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--orange);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.resumed button.link:hover{color:var(--orange-deep)}

/* ---------- email the result ---------- */
.send{margin:0 0 1.75rem}
.send-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0 0}
.send-row .field{flex:1;min-width:12rem}
.send .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send-msg{font-size:.88rem;margin:.8rem 0 0}
.send-msg.ok{color:var(--status-ok)}
.send-msg.no{color:var(--orange-deep)}

/* ---------- the working ---------- */
.working{margin:1.5rem 0 0;border-top:1px solid var(--rule-soft);padding-top:1rem}
.working summary{cursor:pointer;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.working summary:hover{color:var(--orange)}
.working table{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.88rem}
.working th,.working td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--rule-soft)}
.working th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faded);font-weight:500}
.working td.n{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.working tr.tot td{font-weight:700;border-top:1px solid var(--rule);border-bottom:none}
.working tr.tot td.n{color:var(--orange-deep)}

/* ---------- footer ---------- */
footer{max-width:42rem;margin:3.5rem auto 0;padding:2rem 1.5rem 3rem;border-top:1px solid var(--rule-soft);color:var(--ink-muted);font-size:.9rem}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.footer-wordmark{height:22px;width:auto;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:1.1rem}
.footer-links a{color:var(--ink-muted);text-decoration:none}
.footer-links a:hover{color:var(--orange)}
.footer-copy{font-size:.82rem;line-height:1.6;margin:1.1rem 0 0;max-width:70ch}
/* --orange-deep, not --orange: 3.12:1 against paper is a WCAG AA failure at
   this size, and this ground is paper on every page that loads flow.css. */
.footer-copy a{color:var(--orange-deep)}
.footer-legal{color:var(--ink-faded);font-size:.75rem;margin-top:.7rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* tool-top:css:start */
/* Every tool is entered from the toolbox, so every tool owes the visitor one
   obvious way back to it and one line saying what they came here for. */
.tool-top{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.15rem;
  margin:0 0 1.9rem;padding:0 0 1.15rem;border-bottom:1px solid var(--rule-soft,#B3A887)}
.tool-back{display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-family:var(--font-sans,"Plus Jakarta Sans",-apple-system,system-ui,sans-serif);
  font-size:.95rem;font-weight:600;text-decoration:none;line-height:1;min-height:48px;
  color:var(--orange-deep,#B8431A);background:transparent;
  border:2px solid var(--orange,#DF5911);padding:.75rem 1.35rem;border-radius:5px;
  transition:background .15s,color .15s,transform .15s}
.tool-back i{font-style:normal;font-size:1.05em;line-height:1}
.tool-back:hover,.tool-back:focus-visible{background:var(--orange-wash,rgba(223,89,17,0.18));color:var(--ink,#141414);transform:translateX(-2px)}
.tool-back:focus-visible{outline:2px solid var(--orange,#DF5911);outline-offset:3px}
.tool-what{margin:0;flex:1 1 21rem;min-width:0;
  font-family:var(--font-display,Newsreader,Georgia,serif);
  font-size:1.02rem;line-height:1.4;color:var(--ink-2,#2A2724)}
@media (max-width:34rem){
  .tool-what{flex-basis:100%;font-size:.95rem}
  .tool-back{width:100%;justify-content:center;min-height:54px;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.tool-back{transition:background .15s,color .15s}
  .tool-back:hover,.tool-back:focus-visible{transform:none}}
/* tool-top:css:end */
