@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --oc-white: #ffffff;
    --oc-black: #000000;
    
    --oc-gray-0: #f8f9fa;
    --oc-gray-1: #f1f3f5;
    --oc-gray-2: #e9ecef;
    --oc-gray-3: #dee2e6;
    --oc-gray-4: #ced4da;
    --oc-gray-5: #adb5bd;
    --oc-gray-6: #868e96;
    --oc-gray-7: #495057;
    --oc-gray-8: #343a40;
    --oc-gray-9: #212529;
    
    --oc-red-0: #fff5f5;
    --oc-red-1: #ffe3e3;
    --oc-red-2: #ffc9c9;
    --oc-red-3: #ffa8a8;
    --oc-red-4: #ff8787;
    --oc-red-5: #ff6b6b;
    --oc-red-6: #fa5252;
    --oc-red-7: #f03e3e;
    --oc-red-8: #e03131;
    --oc-red-9: #c92a2a;
    
    --oc-pink-0: #fff0f6;
    --oc-pink-1: #ffdeeb;
    --oc-pink-2: #fcc2d7;
    --oc-pink-3: #faa2c1;
    --oc-pink-4: #f783ac;
    --oc-pink-5: #f06595;
    --oc-pink-6: #e64980;
    --oc-pink-7: #d6336c;
    --oc-pink-8: #c2255c;
    --oc-pink-9: #a61e4d;
    
    --oc-grape-0: #f8f0fc;
    --oc-grape-1: #f3d9fa;
    --oc-grape-2: #eebefa;
    --oc-grape-3: #e599f7;
    --oc-grape-4: #da77f2;
    --oc-grape-5: #cc5de8;
    --oc-grape-6: #be4bdb;
    --oc-grape-7: #ae3ec9;
    --oc-grape-8: #9c36b5;
    --oc-grape-9: #862e9c;
    
    --oc-violet-0: #f3f0ff;
    --oc-violet-1: #e5dbff;
    --oc-violet-2: #d0bfff;
    --oc-violet-3: #b197fc;
    --oc-violet-4: #9775fa;
    --oc-violet-5: #845ef7;
    --oc-violet-6: #7950f2;
    --oc-violet-7: #7048e8;
    --oc-violet-8: #6741d9;
    --oc-violet-9: #5f3dc4;
    
    --oc-indigo-0: #edf2ff;
    --oc-indigo-1: #dbe4ff;
    --oc-indigo-2: #bac8ff;
    --oc-indigo-3: #91a7ff;
    --oc-indigo-4: #748ffc;
    --oc-indigo-5: #5c7cfa;
    --oc-indigo-6: #4c6ef5;
    --oc-indigo-7: #4263eb;
    --oc-indigo-8: #3b5bdb;
    --oc-indigo-9: #364fc7;
    
    --oc-blue-0: #e7f5ff;
    --oc-blue-1: #d0ebff;
    --oc-blue-2: #a5d8ff;
    --oc-blue-3: #74c0fc;
    --oc-blue-4: #4dabf7;
    --oc-blue-5: #339af0;
    --oc-blue-6: #228be6;
    --oc-blue-7: #1c7ed6;
    --oc-blue-8: #1971c2;
    --oc-blue-9: #1864ab;
    
    --oc-cyan-0: #e3fafc;
    --oc-cyan-1: #c5f6fa;
    --oc-cyan-2: #99e9f2;
    --oc-cyan-3: #66d9e8;
    --oc-cyan-4: #3bc9db;
    --oc-cyan-5: #22b8cf;
    --oc-cyan-6: #15aabf;
    --oc-cyan-7: #1098ad;
    --oc-cyan-8: #0c8599;
    --oc-cyan-9: #0b7285;
    
    --oc-teal-0: #e6fcf5;
    --oc-teal-1: #c3fae8;
    --oc-teal-2: #96f2d7;
    --oc-teal-3: #63e6be;
    --oc-teal-4: #38d9a9;
    --oc-teal-5: #20c997;
    --oc-teal-6: #12b886;
    --oc-teal-7: #0ca678;
    --oc-teal-8: #099268;
    --oc-teal-9: #087f5b;
    
    --oc-green-0: #ebfbee;
    --oc-green-1: #d3f9d8;
    --oc-green-2: #b2f2bb;
    --oc-green-3: #8ce99a;
    --oc-green-4: #69db7c;
    --oc-green-5: #51cf66;
    --oc-green-6: #40c057;
    --oc-green-7: #37b24d;
    --oc-green-8: #2f9e44;
    --oc-green-9: #2b8a3e;
    
    --oc-lime-0: #f4fce3;
    --oc-lime-1: #e9fac8;
    --oc-lime-2: #d8f5a2;
    --oc-lime-3: #c0eb75;
    --oc-lime-4: #a9e34b;
    --oc-lime-5: #94d82d;
    --oc-lime-6: #82c91e;
    --oc-lime-7: #74b816;
    --oc-lime-8: #66a80f;
    --oc-lime-9: #5c940d;
    
    --oc-yellow-0: #fff9db;
    --oc-yellow-1: #fff3bf;
    --oc-yellow-2: #ffec99;
    --oc-yellow-3: #ffe066;
    --oc-yellow-4: #ffd43b;
    --oc-yellow-5: #fcc419;
    --oc-yellow-6: #fab005;
    --oc-yellow-7: #f59f00;
    --oc-yellow-8: #f08c00;
    --oc-yellow-9: #e67700;
    
    --oc-orange-0: #fff4e6;
    --oc-orange-1: #ffe8cc;
    --oc-orange-2: #ffd8a8;
    --oc-orange-3: #ffc078;
    --oc-orange-4: #ffa94d;
    --oc-orange-5: #ff922b;
    --oc-orange-6: #fd7e14;
    --oc-orange-7: #f76707;
    --oc-orange-8: #e8590c;
    --oc-orange-9: #d9480f;



    --foreground: var(--oc-gray-0);
    --background: var(--oc-gray-9);

    --stroke: var(--oc-gray-6);
    --background-light: var(--oc-gray-8);
    --foreground-muted: var(--oc-gray-6);

    --text-h1: 3.815rem;
    --text-h2: 3.052rem;
    --text-h3: 2.441rem;
    --text-h4: 1.953rem;
    --text-h5: 1.563rem;
    --text-h6: 1.25rem;
    --text-large: var(--text-h6);
    --text-p: 1rem;
    --text-small: 0.8rem;
    --text-xsmall: 0.64rem;
}

* { margin: 0; padding: 0; }

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); margin-top: 1em; }
h3 { font-size: var(--text-h3); margin-top: 1em; }
h4 { font-size: var(--text-h4); margin-top: 1em; }
h5 { font-size: var(--text-h5); margin-top: 1em; }
h6 { font-size: var(--text-h6); margin-top: 1em; }

.large { font-size: var(--text-large); }
.small { font-size: var(--text-small); }

.negative { color: var(--oc-red-3); }
.positive { color: var(--oc-green-3); }

.disclaimer { font-size: var(--text-small); color: var(--foreground-muted); }

p { margin-block-end: 1em; }
.contents li:has(a), a { text-decoration: none; color: var(--oc-violet-2); transition: 250ms ease; }
.contents li:has(a):hover, a:hover { color: var(--oc-violet-3); }

html { scroll-behavior: smooth; }
body {
    background: var(--background);
    color: var(--foreground);
    padding: 1rem;
    
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    line-height: 1.6;

    display: grid;
    grid-template-columns: [full-start] minmax(max(env(safe-area-inset-left, 0), 1rem), 30rem) [main-start] 1fr [main-end] minmax(max(env(safe-area-inset-left, 0), 1rem), 30rem) [full-end];
}

@media (max-width: 30rem) { body { grid-template-columns: [full-start] max(env(safe-area-inset-left, 0), 1rem) [main-start] 1fr [main-end] max(env(safe-area-inset-right, 0), 1rem) [full-end]; } }
body > * { grid-column: main; }

table { border-collapse: collapse; margin-block-end: 1em; max-width: 100%; }
table th { border-bottom: 0.125em solid var(--stroke); white-space: nowrap; }
table tr td { border-bottom: 1px solid var(--background-light); }
table :is(th, td) { padding: 0.25em 0.5em; text-align: center; }
table :is(th, td)[l] { text-align: left; }
table :is(th, td)[c] { text-align: center; }
table :is(th, td)[r] { text-align: right; }
table :is(th, td)[b], table:not(.nobold) tr td:first-of-type { font-weight: bold; }
table tr:not(:has(th)):hover { background: var(--background-light); }

[data-copy] { text-decoration-line: underline; text-decoration-style: dotted; cursor: copy; white-space: nowrap; }

[id^="fav-"]:target { color: var(--oc-yellow-3); }

.contents p { margin-block-end: 0; text-decoration: underline solid; }
li { margin-inline-start: 1em; }
ul > ul li { margin-inline-start: 2em; }

[data-tippy-content]:after {
    content: "?";
    font-weight: 600;
    font-size: var(--text-xsmall);
    vertical-align: super;
    color: var(--oc-cyan-4);
    padding: 0 0.25em;
}

footer {
    font-size: var(--text-xsmall);
    color: var(--foreground-muted);
    margin-block-start: 2rem;
}

footer p { max-width: 100%; margin-block-end: 0; }