/* Country notes (Admin > Call routing > note editor), shown on Place a call before a call there. Written in the support centre's markdown (md.js) and set in its prose: these are docs.css's article rules (".docs .article" and the callout, code, table and figure rules with it), scoped to .note-md so a page can use them without docs.css's page-wide rules. Keep them in step with docs.css. Then the note's card, shared by Place a call and the editor's preview so the preview is the real thing. */ .note-md{ --d-bg:#05070E; --d-ink:#EEF1FA; /* headings, anything read first */ --d-text:#BEC6E0; /* body copy */ --d-mute:#A9B4D6; /* secondary */ --d-faint:#8E9BC4; /* tertiary, placeholders */ --d-line:rgba(147,197,253,.12); --d-line-2:rgba(147,197,253,.2); --d-line-3:rgba(96,165,250,.42); --d-surface:rgba(37,99,235,.05); --d-surface-2:rgba(37,99,235,.1); --d-surface-3:rgba(37,99,235,.16); --d-raised:#0E1430; /* code, menus: opaque navy */ --d-card:linear-gradient(180deg,rgba(21,27,58,.62),rgba(10,13,30,.72)); --d-card-hi:inset 0 1px 0 rgba(255,255,255,.045); --d-accent:#2563EB; --d-link:#93C5FD; --d-btn:linear-gradient(135deg,#3B82F6,#1D4ED8); --d-btn-glow:0 10px 24px -12px rgba(37,99,235,.85),inset 0 1px 0 rgba(255,255,255,.2); --d-ai:var(--ai-grad,linear-gradient(135deg,#7DD3FC 0%,#818CF8 42%,#C084FC 78%,#F0ABFC 100%)); --d-ai-deep:var(--ai-grad-deep,linear-gradient(135deg,#2563EB 0%,#6D28D9 58%,#A21CAF 100%)); --d-ok:#34D399; --d-warn:#FBBF24; --d-bad:#F87171; --d-r:18px; --d-r-sm:11px; --d-ease:cubic-bezier(.16,1,.3,1); /* the site-wide tokens other shared files read */ --ink:var(--d-ink);--muted:var(--d-mute);--faint:var(--d-faint); color:var(--d-text); font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .note-md{--p-ink:var(--d-text);--p-strong:var(--d-ink);color:var(--d-text);font:400 16.5px/1.75 'Geist',sans-serif;overflow-wrap:break-word;min-width:0} .note-md > *:first-child{margin-top:0} .note-md p{margin:0 0 20px} .note-md strong{color:var(--d-ink);font-weight:600} .note-md em{color:#C9D1EA} .note-md h2{margin:52px 0 14px;font:600 24px/1.25 'Geist',sans-serif;letter-spacing:-.025em;color:var(--d-ink);scroll-margin-top:96px} .note-md h3{margin:34px 0 10px;font:600 18px/1.35 'Geist',sans-serif;letter-spacing:-.015em;color:var(--d-ink);scroll-margin-top:96px} .note-md h4{margin:26px 0 8px;font:600 15.5px/1.4 'Geist',sans-serif;color:var(--d-ink)} .note-md a{color:var(--d-link);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(134,166,255,.35); text-underline-offset:3.5px;transition:color .15s,text-decoration-color .15s} .note-md a:hover{color:#BFDBFE;text-decoration-color:currentColor} .note-md :not(pre) > code{font:500 .86em/1 'IBM Plex Mono',ui-monospace,monospace;color:#C7D2FE;background:rgba(99,102,241,.12); border:1px solid rgba(129,140,248,.22);border-radius:6px;padding:.16em .42em;white-space:nowrap} .note-md blockquote{margin:28px 0;padding:2px 0 2px 20px;border-left:2px solid transparent;border-image:linear-gradient(180deg,#93C5FD,#6366F1) 1;color:#C9D1EA;font-size:17.5px} .note-md blockquote p:last-child{margin:0} /* lists: the call builder's connection points for bullets; a top-level numbered list is steps, each number in a lit disc, the discs on a rail */ .note-md ul,.note-md ol{margin:0 0 22px;padding:0;list-style:none} .note-md li{position:relative;margin:0 0 10px;padding-left:26px} .note-md li > ul,.note-md li > ol{margin:10px 0 0} .note-md ul > li::before{content:"";position:absolute;left:5px;top:calc(.875em - 3.5px);width:7px;height:7px;border-radius:50%; background:#60A5FA;box-shadow:0 0 0 3px rgba(59,130,246,.16)} .note-md ul ul > li::before{left:6px;top:calc(.875em - 2.5px);width:5px;height:5px;background:none;box-shadow:inset 0 0 0 1.5px #A9B4D6} .note-md ol{counter-reset:ol} .note-md ol > li{counter-increment:ol;padding-left:28px} .note-md ol > li::before{content:counter(ol) ".";position:absolute;left:0;top:0;min-width:20px;font-weight:600;font-variant-numeric:tabular-nums;color:#93C5FD} .note-md > ol{margin:4px 0 30px} .note-md > ol > li{padding:0 0 20px 46px;margin:0} .note-md > ol > li:last-child{padding-bottom:0} .note-md > ol > li::before{content:counter(ol);top:calc(.875em - 13px);left:0;width:26px;height:26px;min-width:0;display:grid;place-items:center;border-radius:50%; font:600 12.5px/1 'Geist',sans-serif;color:#EEF2FF;background:linear-gradient(160deg,rgba(99,102,241,.62),rgba(37,99,235,.32)); box-shadow:inset 0 0 0 1px rgba(165,180,252,.5),0 8px 18px -8px rgba(79,70,229,.9)} .note-md > ol > li:not(:last-child)::after{content:"";position:absolute;left:12px;top:calc(.875em + 18px);bottom:calc(12px - .875em);width:2px;border-radius:2px; background:linear-gradient(180deg,rgba(129,140,248,.6),rgba(99,102,241,.16))} /* callouts: a notification from the page, the way Spoofey's phones show one: the kind's app tile with its faceted glyph, a title, the message, on a navy card lit along its top edge in the kind's colour. The tile and glyph are drawn here, so the server's first paint (a .ctitle, no glyph) and the page's own render look the same. */ .note-md .callout{--c-rgb:59,130,246;--c-a:#3B82F6;--c-b:#4338CA;--c-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' stroke='none'%3E%3Cpath fill-opacity='0.90' d='M12.55 10.3L13.25 10.3L13.25 11.09L20.09 6.12L15.09 2.49L13.39 7.74L13.39 8.1L13.24 8.18Z'/%3E%3Cpath fill-opacity='0.80' d='M22 12L20.09 6.12L13.25 11.09L13.25 12Z'/%3E%3Cpath fill-opacity='0.73' d='M20.09 17.88L22 12L13.25 12L13.25 12.91Z'/%3E%3Cpath fill-opacity='0.69' d='M15.09 21.51L20.09 17.88L13.25 12.91L13.25 15.85Z'/%3E%3Cpath fill-opacity='0.72' d='M8.91 21.51L15.09 21.51L13.25 15.85L13.25 17.3L10.75 17.3L10.75 15.85Z'/%3E%3Cpath fill-opacity='0.80' d='M3.91 17.88L8.91 21.51L10.75 15.85L10.75 12.91Z'/%3E%3Cpath fill-opacity='0.89' d='M2 12L3.91 17.88L10.75 12.91L10.75 12Z'/%3E%3Cpath fill-opacity='0.97' d='M3.91 6.12L2 12L10.75 12L10.75 11.09Z'/%3E%3Cpath d='M8.91 2.49L3.91 6.12L10.75 11.09L10.75 10.3L11.45 10.3L10.76 8.18L10.61 8.1L10.61 7.74Z'/%3E%3Cpath fill-opacity='0.97' d='M11.45 10.3L12.55 10.3L13.24 8.18L12 8.9L10.76 8.18ZM15.09 2.49L8.91 2.49L10.61 7.74L10.61 6.5L12 5.7L13.39 6.5L13.39 7.74Z'/%3E%3C/g%3E%3C/svg%3E"); --hex:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%); position:relative;display:block;margin:28px 0;padding:17px 20px 18px 70px;border-radius:14px; font-size:15px;line-height:1.65;color:var(--d-text); background:linear-gradient(180deg,rgba(var(--c-rgb),.07),rgba(var(--c-rgb),.035)); border:1px solid rgba(var(--c-rgb),.24);box-shadow:0 18px 40px -34px rgba(var(--c-rgb),.5),inset 0 1px 0 rgba(255,255,255,.04)} /* the kind's glyph in a real hexagon gem (base.css .hexm), exactly like the ticket banners — beam-lit ring, dark core, the kind's coloured glyph */ .note-md .callout .hexm{--c1:var(--c-a);--c2:var(--c-b);--hs:36px;position:absolute;left:18px;top:15px} .note-md .callout .hexm .cicon{display:block} /* fallback for the server's first paint / no-JS (a .ctitle, no gem): the old flat tile so there's still an icon before the client render swaps in the gem */ .note-md .callout:not(:has(.hexm))::before{content:"";position:absolute;left:18px;top:16px;width:34px;height:34px;clip-path:var(--hex); background:linear-gradient(145deg,var(--c-a),var(--c-b));filter:drop-shadow(0 8px 14px rgba(var(--c-rgb),.5))} .note-md .callout:not(:has(.hexm))::after{content:"";position:absolute;left:18px;top:16px;width:34px;height:34px;background:#fff; -webkit-mask:var(--c-ico) center/17px 17px no-repeat;mask:var(--c-ico) center/17px 17px no-repeat} .note-md .callout > div{min-width:0} .note-md .callout > div:not(.ctitle)::before,.note-md .callout .ctitle{display:block;margin:5px 0 3px;font:600 15px/1.4 'Geist',sans-serif;letter-spacing:-.01em;color:var(--d-ink)} .note-md .callout.note > div:not(.ctitle)::before{content:"Note"} .note-md .callout.tip > div:not(.ctitle)::before{content:"Tip"} .note-md .callout.warn > div:not(.ctitle)::before{content:"Warning"} .note-md .callout.danger > div:not(.ctitle)::before{content:"Important"} .note-md .callout p{margin:0 0 8px}.note-md .callout p:last-child{margin:0} .note-md .callout strong{color:var(--d-ink)} .note-md .callout a{color:var(--d-link);text-decoration-color:rgba(147,197,253,.35)} .note-md .callout :not(pre) > code{background:rgba(var(--c-rgb),.14);border-color:rgba(var(--c-rgb),.3)} .note-md .callout.tip{--c-rgb:45,212,191;--c-a:#2DD4BF;--c-b:#0F766E;--c-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' stroke='none'%3E%3Cpath fill-opacity='0.94' d='M12 12L12 3.5L10.37 10.37Z'/%3E%3Cpath fill-opacity='0.84' d='M12 12L12 3.5L13.63 10.37Z'/%3E%3Cpath fill-opacity='0.55' d='M12 12L20.5 12L13.63 10.37Z'/%3E%3Cpath fill-opacity='0.55' d='M12 12L20.5 12L13.63 13.63Z'/%3E%3Cpath fill-opacity='0.55' d='M12 12L12 20.5L13.63 13.63Z'/%3E%3Cpath fill-opacity='0.55' d='M12 12L12 20.5L10.37 13.63Z'/%3E%3Cpath fill-opacity='0.78' d='M12 12L3.5 12L10.37 13.63Z'/%3E%3Cpath fill-opacity='0.89' d='M12 12L3.5 12L10.37 10.37Z'/%3E%3C/g%3E%3C/svg%3E")} .note-md .callout.warn{--c-rgb:245,158,11;--c-a:#FBBF24;--c-b:#C2410C;--c-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' stroke='none'%3E%3Cpath fill-opacity='0.97' d='M12.8 3.79L11.2 3.79L11.57 8.3L12.43 8.3Z'/%3E%3Cpath fill-opacity='0.92' d='M17.1 11.3L12.8 3.79L12.43 8.3L13.15 8.3L12.79 13.25Z'/%3E%3Cpath fill-opacity='0.73' d='M21.4 18.81L17.1 11.3L12.79 13.25L12.73 14Z'/%3E%3Cpath fill-opacity='0.70' d='M20.6 20.2L21.4 18.81L12.73 14L12.72 14.15Z'/%3E%3Cpath fill-opacity='0.69' d='M12 20.2L20.6 20.2L12.72 14.15L12.7 14.4L12 14.4L12 15.7L13.17 16.38L13.17 17.73L12 18.4Z'/%3E%3Cpath fill-opacity='0.79' d='M12 14.4L11.3 14.4L11.28 14.15L3.4 20.2L12 20.2L12 18.4L10.83 17.73L10.83 16.38L12 15.7Z'/%3E%3Cpath fill-opacity='0.85' d='M2.6 18.81L3.4 20.2L11.28 14.15L11.27 14Z'/%3E%3Cpath fill-opacity='0.91' d='M6.9 11.3L2.6 18.81L11.27 14L11.21 13.25Z'/%3E%3Cpath d='M11.2 3.79L6.9 11.3L11.21 13.25L10.85 8.3L11.57 8.3Z'/%3E%3C/g%3E%3C/svg%3E")} .note-md .callout.danger{--c-rgb:239,68,68;--c-a:#F87171;--c-b:#B91C1C;--c-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' stroke='none'%3E%3Cpath fill-opacity='0.98' d='M7.05 11.3L7.05 5.75L7.45 4.85L8.3 4.5L8.3 11.3Z'/%3E%3Cpath fill-opacity='0.88' d='M8.3 11.3L8.3 4.5L9.15 4.85L9.55 5.75L9.55 11.3Z'/%3E%3Cpath d='M9.85 11.3L9.85 3.55L10.25 2.65L11.1 2.3L11.1 11.3Z'/%3E%3Cpath fill-opacity='0.90' d='M11.1 11.3L11.1 2.3L11.95 2.65L12.35 3.55L12.35 11.3Z'/%3E%3Cpath fill-opacity='0.99' d='M12.65 11.3L12.65 4.05L13.05 3.15L13.9 2.8L13.9 11.3Z'/%3E%3Cpath fill-opacity='0.89' d='M13.9 11.3L13.9 2.8L14.75 3.15L15.15 4.05L15.15 11.3Z'/%3E%3Cpath fill-opacity='0.96' d='M15.4 11.3L15.4 6.25L15.8 5.35L16.65 5L16.65 11.3Z'/%3E%3Cpath fill-opacity='0.86' d='M16.65 11.3L16.65 5L17.5 5.35L17.9 6.25L17.9 11.3Z'/%3E%3Cpath fill-opacity='0.94' d='M7.05 11.3L17.9 11.3L12.7 16Z'/%3E%3Cpath fill-opacity='0.82' d='M17.9 11.3L17.9 16.6L16.6 19.6L15.8 22.4L12.7 16Z'/%3E%3Cpath fill-opacity='0.78' d='M15.8 22.4L9.2 22.4L8.4 20.2L12.7 16Z'/%3E%3Cpath fill-opacity='0.88' d='M8.4 20.2L7.05 14.4L7.05 11.3L12.7 16Z'/%3E%3Cpath fill-opacity='0.96' d='M7.05 14.4L5.3 12.2L4 10.2L3 10.3L2.5 11.2L4.9 14.3L8.4 20.2Z'/%3E%3Cpath fill-opacity='0.84' d='M2.5 11.2L2.9 12.4L4.6 15.6L8.4 20.2L4.9 14.3Z'/%3E%3C/g%3E%3C/svg%3E")} .note-md .callout > .ctitle + p{margin-top:0} /* code: a quiet panel, its language and a copy button in the header */ .note-md .code-wrap{position:relative;margin:26px 0;border-radius:13px;overflow:hidden;background:var(--d-raised);border:1px solid var(--d-line);box-shadow:none} .note-md .code-head{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 8px 6px 14px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--d-line); font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.02em;color:var(--d-mute);text-transform:lowercase} .note-md .code-head > span{flex:1} .note-md .code-wrap pre{margin:0;padding:16px 18px 18px;overflow-x:auto;scrollbar-width:thin} .note-md .code-wrap code,.note-md .code-wrap code.hljs{font:400 13.5px/1.7 'IBM Plex Mono',ui-monospace,monospace;background:none!important;padding:0!important;color:#D6DCF0} .note-md .copy-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:26px;padding:0 9px;border-radius:7px;cursor:pointer; font:500 12px/1 'Geist',sans-serif;text-transform:none;letter-spacing:0;color:var(--d-mute);background:transparent;border:1px solid transparent; transition:color .15s,background .15s,border-color .15s} .note-md .copy-btn::before{content:"";width:12px;height:12px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='8' y='8' width='13' height='13' rx='2.5'/%3E%3Cpath d='M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='8' y='8' width='13' height='13' rx='2.5'/%3E%3Cpath d='M16 8V5.5A2.5 2.5 0 0 0 13.5 3h-8A2.5 2.5 0 0 0 3 5.5v8A2.5 2.5 0 0 0 5.5 16H8'/%3E%3C/svg%3E") center/contain no-repeat} .note-md .copy-btn:hover{color:var(--d-ink);background:var(--d-surface-2);border-color:var(--d-line)} .note-md .copy-btn.copied,.note-md .copy-btn.done{color:var(--d-ok)} /* syntax, a few muted hues */ .note-md .hljs{color:#D6DCF0} .note-md .hljs-keyword,.note-md .hljs-built_in,.note-md .hljs-selector-tag{color:#B9A7F7} .note-md .hljs-string,.note-md .hljs-attr + .hljs-string{color:#8FD9B6} .note-md .hljs-attr,.note-md .hljs-property,.note-md .hljs-variable,.note-md .hljs-params{color:#93B4FF} .note-md .hljs-number,.note-md .hljs-literal{color:#F0B98A} .note-md .hljs-comment{color:#5E6472;font-style:italic} .note-md .hljs-title,.note-md .hljs-title.function_{color:#E6C87A} .note-md .hljs-meta,.note-md .hljs-punctuation{color:#7A808E} /* tables: a framed panel, hairline rows */ .note-md .table-wrap{margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:13px;border:1px solid var(--d-line);background:rgba(255,255,255,.012);scrollbar-width:thin} .note-md table{width:100%;border-collapse:collapse;margin:0;font-size:14.5px;line-height:1.55} .note-md .table-wrap table{min-width:460px} .note-md th,.note-md td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--d-line);vertical-align:top;overflow-wrap:break-word} .note-md tbody tr:last-child td{border-bottom:0} .note-md th{font:600 12.5px/1.3 'Geist',sans-serif;color:var(--d-ink);background:rgba(255,255,255,.025)} .note-md td:first-child{color:var(--d-ink);font-weight:500} .note-md tbody tr{transition:background .15s} .note-md tbody tr:hover{background:rgba(255,255,255,.015)} /* images and figures */ .note-md img:not(.avatar){display:block;max-width:100%;height:auto;margin:30px auto;border-radius:13px;border:1px solid var(--d-line);box-shadow:none} .note-md p > img:not(.avatar):only-child{margin:6px auto} .note-md svg,.note-md iframe,.note-md video{max-width:100%} .note-md svg:not(.cicon){height:auto} .note-md iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:13px;margin:30px 0} .note-md .a-fig{margin:32px 0} .note-md .a-fig.is-portrait img:not(.avatar){max-width:400px} .note-md .a-fig img:not(.avatar){margin:0 auto} .note-md figcaption{margin-top:12px;text-align:center;font:400 13.5px/1.5 'Geist',sans-serif;color:var(--d-mute);text-wrap:balance} /* a divider: the hairline breaks for a voice, the call's own waveform */ .note-md hr{position:relative;border:0;height:1px;margin:48px 0;overflow:visible; background:linear-gradient(90deg,transparent,rgba(147,197,253,.24) 26%,rgba(147,197,253,.24) calc(50% - 32px),transparent calc(50% - 32px), transparent calc(50% + 32px),rgba(147,197,253,.24) calc(50% + 32px),rgba(147,197,253,.24) 74%,transparent)} .note-md hr::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:16px;transform:translate(-50%,-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2393C5FD'/%3E%3Cstop offset='1' stop-color='%23818CF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='1' y='5.5' width='2.6' height='5' rx='1.3'/%3E%3Crect x='6' y='3' width='2.6' height='10' rx='1.3'/%3E%3Crect x='11' y='0.5' width='2.6' height='15' rx='1.3'/%3E%3Crect x='16' y='4' width='2.6' height='8' rx='1.3'/%3E%3Crect x='21' y='2' width='2.6' height='12' rx='1.3'/%3E%3Crect x='26' y='5' width='2.6' height='6' rx='1.3'/%3E%3Crect x='31' y='6.5' width='2.6' height='3' rx='1.3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} /* ---- the note --------------------------------------------------------------- The note is the step's own text: the step's heading says where ("Before you call Mexico", "Mexico +52") beside the flag filling a hex gem, its ring in the flag's colours (note.js reads them off the flag: --f1, --f2, --f-rgb, amber until they're read), then the note in the prose above, a little tighter than an article's. A 3-way to two countries with notes heads each one with its own small gem and name. */ .cnote{--f1:#FBBF24;--f2:#C2410C;--f-rgb:251,191,36} .cnote + .cnote{margin-top:20px;padding-top:18px;border-top:1px solid rgba(147,197,253,.12)} .cnote-gem{--c1:var(--f1);--c2:var(--f2);--f1:#FBBF24;--f2:#C2410C;--f-rgb:251,191,36} .cnote .cnote-gem{--f1:inherit;--f2:inherit;--f-rgb:inherit} /* the flag fills the hexagon just inside the gem's thin lit ring (the same 1.5px as the call debugger's flag, admin-debug.css .dxm-flag): Twemoji's flag is 26 of its 36 units tall, so it's drawn at 142% to fill the height */ /* its ring: the flag's colours, solid and lit, so the flag reads as set in it */ .cnote-gem::before{background:conic-gradient(from var(--hb),transparent 0 30%,rgba(255,255,255,.55) 48%,#fff 52%,rgba(255,255,255,.55) 56%,transparent 72%), linear-gradient(150deg,color-mix(in srgb,var(--f1) 70%,#fff),var(--f1) 45%,var(--f2))} .cnote-gem::after{inset:1.5px} .cnote-flag{position:absolute;inset:1.5px;z-index:1;overflow:hidden;clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%); background:rgba(var(--f-rgb),.3)} .cnote-flag img{position:absolute;left:50%;top:50%;width:142%;height:142%;max-width:none;transform:translate(-50%,-50%);display:block} .cnote-flag::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(0,0,0,.18))} .cnote-head{display:flex;align-items:center;gap:11px;margin-bottom:10px} .cnote-head .cnote-gem{--hs:32px} .cnote-head b{font:650 15.5px/1.2 'Geist',system-ui,sans-serif;letter-spacing:-.01em;color:#F3F5FF} .cnote-dial{font:500 12.5px/1 'Geist',system-ui,sans-serif;color:#8E9BC4;font-variant-numeric:tabular-nums} .cnote-tag{margin-left:auto;font:600 12px/1 'Geist',system-ui,sans-serif;padding:5px 9px;border-radius:99px; color:#C9D2EE;background:rgba(147,197,253,.08);border:1px solid rgba(147,197,253,.2)} .cnote-md{font-size:15px;line-height:1.65} .cnote-md p{margin:0 0 12px} .cnote-md h2{margin:20px 0 8px;font-size:18px} .cnote-md h3{margin:16px 0 6px;font-size:16px} .cnote-md h4{margin:14px 0 6px;font-size:14.5px} .cnote-md ul,.cnote-md ol{margin:0 0 14px} .cnote-md li{margin-bottom:6px} .cnote-md > ol{margin:2px 0 16px} .cnote-md > ol > li{padding-bottom:12px} .cnote-md .callout{margin:16px 0;font-size:14px} .cnote-md .code-wrap,.cnote-md .table-wrap{margin:16px 0} .cnote-md img:not(.avatar){margin:16px auto} .cnote-md .a-fig{margin:18px 0} .cnote-md hr{margin:26px 0} .cnote-md blockquote{margin:16px 0;font-size:15.5px} .cnote-md > :last-child{margin-bottom:0} @media (max-width:640px){ .cnote-md{font-size:14.5px;line-height:1.6} } }