.webcode{
  position:fixed;z-index:20;
  width:min(980px, calc(100vw - 32px));
  padding:2rem 0;
  color:var(--fg);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  font-size:12px;
  opacity:0;translate:0 6px;pointer-events:none;
  transition:opacity .3s linear, translate 0s linear .3s;
}
.webcode.open{
  opacity:1;translate:0 0;pointer-events:auto;
  transition:opacity .2s linear, translate .36s cubic-bezier(.22,1,.36,1);
}
.webcode:not(.open) > *{visibility:hidden}
.webcode[hidden]{display:none}

.webcode-top{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:20px;margin-bottom:12px}
.webcode-title{font-size:13px}
.webcode:focus{outline:none}
.webcode-copy{display:flex;align-items:center;gap:7px;height:20px;color:var(--dim);transition:color .2s linear}
.webcode-copy:hover,.webcode-copy:focus-visible,.webcode-copy.copied{color:var(--fg)}
.copy-label{display:block;height:18px;overflow:hidden;line-height:18px}
.copy-rows{display:flex;flex-direction:column;align-items:flex-end;transition:translate .42s cubic-bezier(.22,1,.36,1)}
.copy-rows > span{height:18px;white-space:nowrap}
.webcode-copy:hover .copy-rows,.webcode-copy:focus-visible .copy-rows{translate:0 -18px}
.copy-icon{flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1}
.copy-icon .sheet{transition:translate .42s cubic-bezier(.22,1,.36,1), opacity .18s linear}
.webcode-copy:hover .back,.webcode-copy:focus-visible .back{translate:-1px -1px}
.webcode-copy:hover .front,.webcode-copy:focus-visible .front{translate:1px 1px}
.copy-icon .tick{stroke-dasharray:1.02 2;stroke-dashoffset:1.04;transition:stroke-dashoffset .24s cubic-bezier(.4,0,.2,1)}
.webcode-copy.copied .copy-rows{translate:0 -36px}
.webcode-copy.copied .sheet{opacity:0;translate:0 0}
.webcode-copy.copied .tick{stroke-dashoffset:0;transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1) .12s}
.webcode-copy.failed .tick{stroke-dashoffset:1.04}

.webcode-blocks{display:flex;gap:28px}
.webcode-block{flex:1 1 0;min-width:0}
.webcode-block:first-child{flex-grow:1.23;display:flex;flex-direction:column}
.webcode-note{margin-top:auto;padding:16px 0 1.3px;font-size:10.5px;line-height:1.5;color:var(--dim)}
.webcode-head{margin-bottom:6px;color:var(--dim)}
.webcode pre{
  font:11.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.webcode pre > code{display:block;font:inherit}
.webcode pre > code > span{display:block}
@media (max-width:720px){
  .webcode-blocks{flex-direction:column;gap:16px}
  .webcode-block,.webcode-block:first-child{flex:none}
}

.webcode-size{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px;color:var(--dim)}
.size-row{display:flex;align-items:baseline}
.size-icon{flex:none;align-self:center;margin-right:10px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transition:rotate .46s cubic-bezier(.22,1,.36,1)}
.size-row.landscape .size-icon{rotate:-90deg}
.size-icon .ink{stroke:var(--fg)}
.size-icon .ink path{stroke-dasharray:1.02 2;stroke-dashoffset:1.04;transition:stroke-dashoffset .3s cubic-bezier(.4,0,.2,1)}
.size-icon .ink .island{transition-duration:.14s}
.size-row.peeking .size-icon .ink path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.size-row.peeking .size-icon .ink .island{transition:stroke-dashoffset .24s cubic-bezier(.4,0,.2,1) .2s}
.size-val,.size-field{
  flex:none;width:3.2em;margin:0 3px;
  border-bottom:1px solid transparent;
  font-variant-numeric:tabular-nums;text-align:right;
}
.size-val{padding:1px 0}
.size-field{border-bottom-color:var(--faint);transition:border-color .2s linear}
.size-field:focus-within{border-bottom-color:var(--fg)}
.size-input{
  display:block;width:100%;margin:0;padding:1px 0;
  border:0;background:none;color:var(--fg);
  font:inherit;font-variant-numeric:tabular-nums;text-align:right;
  appearance:textfield;-moz-appearance:textfield;
}
.size-input::placeholder{color:var(--dim);opacity:1}
.size-width{flex:none;min-width:5em;font-variant-numeric:tabular-nums}
.size-num{display:inline-block;min-width:4ch;text-align:right}
.size-rotate{flex:none;align-self:center;display:grid;place-items:center;width:20px;height:20px;margin-left:6px;color:var(--dim);transition:color .2s linear}
.size-rotate:hover,.size-rotate:focus-visible,.size-rotate[aria-pressed="true"]{color:var(--fg)}
.size-rotate:focus-visible{outline:none}
.size-rotate svg{overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transition:rotate .46s cubic-bezier(.22,1,.36,1)}
.size-rotate:is(:hover, :focus-visible) svg{rotate:-20deg}
.size-rotate[aria-pressed="true"] svg{rotate:-90deg}
.size-rotate[aria-pressed="true"]:is(:hover, :focus-visible) svg{rotate:-110deg}
.size-input::-webkit-inner-spin-button,.size-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.size-input:focus{outline:none}