:root {
    color-scheme: light;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 20px;

    --main-left: max(0px, min(25vw, (100vw - 900px) / 2));
    --star-size: 20px;
    --octopus-hue: 338;
    --octopus-focus-pupil-radius: 16;
    --octopus-idle-pupil-radius: 8;
    --main-text-color: black;
    --altcha-color-text: var(--main-text-color) !important;
    --main-background-color: white;
    --main-background-stripe-color: #f8f8f8;
    --background-color: #DDF;
    --inactive-color: #aaa;
    --valid-color: #EFE;
    --error-color: #FAA;
    --invalid-color: #FEE;
    --pane-color: white;
    --padding: 16px;
    --em-color: #800;
    --link-color: #008;
    --seaweed-opacity: 0.05;
    --octopus-idle-color: lch(73% 15 var(--octopus-hue));
    --octopus-active-color: lch(73% 75 var(--octopus-hue));
    --octopus-color: var(--octopus-idle-color);
    --octopus-highlight-color: color-mix(in oklch, var(--octopus-color) 70%, white);
    --octopus-darklight-color: color-mix(in oklch, var(--octopus-color) 80%, black);
    --progress-color: var(--octopus-darklight-color);
    --progress-remaining-color: var(--octopus-highlight-color);
    --octopus-eye-color: white;
    --octopus-eye-highlight-color: white;
    --bubble-opacity: 1;
    --classmap-color: #FFE;
    --rolemap-color: #FA0;
    --rolemap-prefix-color: #FC6;
    --classmap-button-color: #DD8;
    --rolemap-button-color: #FA0;
    --outline-color: black;
    --box-outline-color: black;
    --checkbox-slider-color: #44D;
    --checkbox-background-color: gray;
    --xml-boilerplate-color: #AAA;
    --xml-elt-color: #008;
    --xml-elt-prefix-color: #88A;
    --xml-att-key-color: #080;
    --xml-att-key-prefix-color: #8A8;
    --xml-att-val-color: #800;
    --xml-text-color: black;
    --xml-disclosure-color: #ddd;
    --xml-classmap-color: #FFE;
    --xml-rolemap-color: #FA0;
    --xml-blob-background-color: #0001;
    --sea-nominal-color: #b8f4f4;
    --sea-color-0: lch(92% 20 198);
    --sea-color-1: lch(81% 37 200);
    --sea-color-2: lch(66% 40 218);
    --panel-color-1: lch(96% 15 240);
    --panel-color-2: lch(96% 15 90);
    --panel-color-3: lch(96% 15 290);
    --panel-color-4: lch(96% 15 140);
    --panel-color-5: lch(96% 15 340);
    --panel-color-6: lch(96% 15 190);
    --panel-color-7: lch(96% 15 50);

    --score3-color: lch(73% 95 156);
    --score2-color: lch(73% 95 93);
    --score1-color: lch(73% 95 65);
    --score0-color: lch(64% 95 37);
    &.corporate {
        --panel-color-1: lch(96% 5 240);
        --panel-color-2: lch(96% 5 90);
        --panel-color-3: lch(96% 5 290);
        --panel-color-4: lch(96% 5 140);
        --panel-color-5: lch(96% 5 340);
        --panel-color-6: lch(96% 5 190);
        --panel-color-7: lch(96% 5 50);
        --sea-color-0: lch(92% 10 198);
        --sea-color-1: lch(81% 15 200);
        --sea-color-2: lch(66% 20 218);
    }
}
:root.dark {
    color-scheme: dark;
    --outline-color: black;
    --box-outline-color: #666;
    --main-text-color: white;
    --link-color: #AAF;
    --em-color: #FBB;
    --valid-color: #030;
    --seaweed-opacity: 0.4;
    --invalid-color: #300;
    --main-background-color: black;
    --main-background-stripe-color: #222;
    --octopus-focus-pupil-radius: 20;
    --octopus-idle-pupil-radius: 12;
    --octopus-color: lch(16% 18 var(--octopus-hue));
    --octopus-active-color: lch(20% 55 var(--octopus-hue));
    --octopus-highlight-color: color-mix(in oklch, var(--octopus-color) 90%, white);
    --octopus-darklight-color: color-mix(in oklch, var(--octopus-color) 90%, black);
    --progress-color: color-mix(in oklch, var(--octopus-color) 70%, white);
    --progress-remaining-color: color-mix(in oklch, var(--octopus-color) 70%, black);
    --octopus-eye-color: #855;
    --octopus-eye-highlight-color: #E80;
    --bubble-opacity: 0.4;
    --checkbox-background-color: #666;

    --xml-boilerplate-color: #AAA;
    --xml-elt-color: #BBF;
    --xml-elt-prefix-color: #AAC;
    --xml-att-key-color: #BFB;
    --xml-att-key-prefix-color: #ACA;
    --xml-att-val-color: #FCC;
    --xml-text-color: white;
    --xml-disclosure-color: #888;
    --xml-classmap-color: #662;
    --xml-rolemap-color: #FA0;
    --xml-blob-background-color: #FFF2;
    --sea-color-0: lch(35% 39 285);
    --sea-color-1: lch(20% 39 285);
    --sea-color-2: lch(10% 39 285);

    --panel-color-1: lch(12% 15 50);
    --panel-color-2: lch(12% 15 90);
    --panel-color-3: lch(12% 15 140);
    --panel-color-4: lch(12% 15 190);
    --panel-color-5: lch(12% 15 240);
    --panel-color-6: lch(12% 15 290);
    --panel-color-7: lch(12% 15 340);
}
:root.corporate {
    #background > * {
        display:none !important;
    }
}
* {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}

body {
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}
a {
    color: var(--link-color);
}
#background, #foreground {
    position: fixed;
    left: 0;
    top: 0;
    width: 100lvw;
    height: 100lvh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
#foreground {
    pointer-events: none;
    > * {
        pointer-events: auto;
    }
}

#background {
    background: radial-gradient(circle at 50% 100px, var(--sea-color-0), var(--sea-color-1), var(--sea-color-2));
    > * {
        user-select: none;
        position: absolute;
        will-change: transform;
        &.bubble {
            opacity: var(--bubble-opacity);
        }
        &.seaweed {
            width: 100%;
            height: 300px;
            opacity: var(--seaweed-opacity);
            transform-origin: 50% 100%;
            bottom: 0;
            * {
                position: absolute;
                bottom: 0;
            }
        }
    }
    #feedsign {
        display: block;
        position: absolute;
        bottom: 0;
        right: 290px;
        width: 100px;
        opacity: 0.3;
        :root.dark & {
            opacity: 0.1;
        }
    }
    #pullcord {
        z-index: 1;
        height: 120px;
        left: 0;
        top: -10px;
        opacity: 0.15;
        transform-origin: 50% 0;
        cursor: pointer;
        transition: margin-top 100ms;
        :root.dark & {
            opacity: 1;
        }
        &.active {
            margin-top: 10px;
            transition: margin-top 100ms;
        }
    }
    #corporate-mode {
        z-index: 1;
        height: 120px;
        left: 80px;
        top: -10px;
        opacity: 0.2;
        transform-origin: 50% 0;
        cursor: pointer;
        transition: margin-top 100ms;
        :root.dark & {
            opacity: 1;
        }
        &.active {
            margin-top: 10px;
            transition: margin-top 100ms;
        }
    }
}

h1 {
    font-size: 80px;
    font-weight: 900;
    white-space: pre;
    text-align: center;
    padding-top: 20px;
    margin-top: 0px;
    @media (max-width: 900px) {
        padding-top: 100px;
    }
}
p {
    margin: 0;
}
.center {
    text-align: center;
}
.mt {
    margin-top: 1em;
}
.mb {
    margin-bottom: 1em;
}
em {
    font-style: normal;
    font-weight: 700;
    color: var(--em-color);
}
strong {
    font-weight: 800;
}
.expanded {
    margin-bottom: 1em;
}

:root.dragging {
    --octopus-color: var(--octopus-active-color);
}

#octopus {
    --outline: var(--outline-color);
    position: absolute;
    overflow: visible;
    z-index: 5;
    left: min(25vw - 350px, (100vw - 1350px) / 2);
    bottom: 0;
    .body, .arm {
        transition: fill 1500ms;
        fill: var(--octopus-color);
        stroke: var(--outline);
        stroke-width: 4px;
    }
    .eye {
        .white {
            fill: var(--octopus-eye-color);
            stroke: var(--outline);
            stroke-width: 4px;
        }
        .pupil {
            fill: black;
        }
        .pupilc {
            fill: var(--octopus-eye-highlight-color);
        }
    }
    .highlight {
        transition: fill 1s;
        stroke: var(--octopus-highlight-color);
        stroke-width: 10px;
        stroke-linecap: round;
        stroke-dasharray: 0, 15, 30, 15, 0, 15;
        fill: none;
    }
    .darklight {
        transition: fill 1s;
        fill: var(--octopus-darklight-color);
    }
    #octoarm1, #octoarm2, #octoarm5, #octoarm6 {
        fill: color-mix(in oklch, var(--octopus-color) 60%, black);
    }
    #octoarm2, #octoarm5 {
        fill: color-mix(in oklch, var(--octopus-color) 80%, black);
    }
}


.hidden {
    display: none !important;
}
.analysis {
    margin-top: 1em;
    text-align:center;
    font-size: 0.75em
}
.small {
    font-size: 0.75em
}
:root.loading :is(main, #octopus) {
    display: none;
}

:root.corporate .non-corporate {
    display: none !important;
}
main {
    margin-top: 16px;
    margin-bottom: 16px;

    --star-top: 8px;
    --indent: calc(6 * var(--star-size));
    color: var(--main-text-color);
    border: 4px solid black;
    min-width: min-content;
    max-width: 1600px;
    margin-left: var(--main-left);
    position: relative;
    background-color: var(--main-background-color);
    line-height: 1.4;
    > section:nth-of-type(7n-7) { --background-color: var(--panel-color-1) }
    > section:nth-of-type(7n-6) { --background-color: var(--panel-color-2) }
    > section:nth-of-type(7n-5) { --background-color: var(--panel-color-3) }
    > section:nth-of-type(7n-4) { --background-color: var(--panel-color-4) }
    > section:nth-of-type(7n-3) { --background-color: var(--panel-color-5) }
    > section:nth-of-type(7n-2) { --background-color: var(--panel-color-6) }
    > section:nth-of-type(7n-1) { --background-color: var(--panel-color-7) }
    > section {
        padding: 1rem var(--padding) 1rem calc(var(--padding) + var(--indent));
        background: var(--background-color);
        position: relative;
        overflow: visible;
        .score {
           position: absolute;
           display: inline-block;
           width: var(--indent);
           margin-left: calc(-1 * var(--indent));
           .star {
               display: inline-block;
               width: var(--star-size);
               height: var(--star-size);
               background-image: url("resources/icons/l/star.svg");
               :root.dark & {
                  background-image: url("resources/icons/d/star.svg");
               }
               &.star-off {
                   background-image: url("resources/icons/l/star-off.svg");
                   :root.dark & {
                      background-image: url("resources/icons/d/star-off.svg");
                   }
               }
           }
        }
        h2 {
            line-height: 1;
            margin: 0 0 0.4em 0;
            img {
               height: 0.8em;
               margin-right: 0.2em;
            }
        }
    }
    a.home {
        position: absolute;
        z-index: 5;
        top: var(--padding);
        left: var(--padding);
        width: 32px;
        height: 32px;
        opacity: 0.5;
        background-image: url("resources/icons/l/home.svg");
        :root.dark & {
            background-image: url("resources/icons/d/home.svg");
        }
    }
}
section:has(> h3) {
    border:1px solid var(--box-outline-color);
    position: relative;
    margin: 1em 0;
    padding: 0.5em;
    h3 {
        width: max-content;
        background: var(--background-color);
        position: absolute;
        padding: 0 0.2em;
        top: -0.6em;
        font-size: 0.8em;
        line-height: 1;
    }
}
.closeable {
    > .section-header {
        display: flex;
        > :nth-child(1) {
            flex: 1;
        }
        > button {
            margin-left: 1em;
            width: 1em;
            height: 1em;
            background-image: url("resources/icons/l/open.svg");
            :root.dark & {
                background-image: url("resources/icons/d/open.svg");
            }
        }
    }
    &.closed > .section-header > button {
        background-image: url("resources/icons/l/closed.svg");
        :root.dark & {
            background-image: url("resources/icons/d/closed.svg");
        }
    }
    &.closed > .section-body :is(.score) {
        display: none;
    }
    > .section-body  {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.1s linear;
        > * {
            overflow: hidden;
        }
    }
    &.closed > .section-body {
        grid-template-rows: 0fr;
    }
}
aside {
    position: absolute;
    white-space: pre-line;
    margin-top: 0.5em;
    background: var(--main-background-stripe-color);
    border: 1px solid var(--box-outline-color);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 10px 10px 5px #0006;
    display: none;
    font-size: 16px;
    width: max-content;
    max-width: 800px;
    z-index: 2;
}
.help {
    /* Don't set position:relative, breaks popup */
    > :not(aside) {
        text-decoration: var(--main-text-color) 2px dotted underline;
        text-underline-offset: 4px;
    }
    &.hover aside {
        display: block;
    }
}
button {
    border: none;
    box-sizing: content-box;
    padding: 0;
    appearance: none;
    font-size: inherit;
    background-color: transparent;
    &:active {
        background-color: #0002;
        :root.dark & {
            background-color: #FFF4;
        }
    }
}

h2 {
    font-weight: 800;
}

h1, h2, h3 {
   margin-top: 0;
}
table {
    border-spacing: 0;
    font-size: 0.8rem;
}
th, .leader {
    display: flex;
    vertical-align: top;
    text-align: left;
    padding-right: 2em;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    &::after {
        flex: 1;
        margin-left: 1em;
        margin-right: -2em;
        opacity: 0.6;
        content: "";
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210px%22%20height%3D%224px%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E") calc(100% + 1em) 13px/auto space no-repeat;

    }
}
.pill {
    display: inline-block;
    vertical-align: -2px;
    width: 0.8em;
    height: 0.8em;
    border: 1px solid black;
}
.action-link {
    cursor: pointer;
    width: 1em;
    height: 1em;
    display: inline-block;
    background: url("resources/icons/l/link.svg") 0 100%/auto 0.75em no-repeat;
    :root.dark & {
        background-image: url("resources/icons/d/link.svg");
    }
}
.action-copy {
    cursor: pointer;
    width: 1em;
    height: 1em;
    background: url("resources/icons/l/copy.svg") 0 100%/auto 1em no-repeat;
    :root.dark & {
        background-image: url("resources/icons/d/copy.svg");
    }
    :not(.actions) > & {
        vertical-align: -0.2em;
        font-size: 1.2em;
        margin-top: -1.2em;
    }
}
.action-download {
    cursor: pointer;
    width: 1em;
    height: 1em;
    background: url("resources/icons/l/download.svg") 0 100% / auto 1em no-repeat;
    :root.dark & {
        background-image: url("resources/icons/d/download.svg");
    }
}
dialog {
    --background-color: var(--main-background-color);
    background: var(--main-background-color);
    color: var(--main-text-color);
    max-width: 800px;
    max-height: 80vh;
    border: 1px solid var(--main-text-color);
    box-shadow: 10px 10px 5px #0006;
    &.error {
        background: var(--error-color);
        text-align: center;
        p {
            padding: 10px;
        }
    }
}
#password-dialog {
    z-index: 15;
    &::backdrop {
        background: #0008;
    }
    padding: 2em;
    p {
        margin-bottom: 1em;
    }
    form {
        width: 100%;
        display: flex;
        font-size: 1.5em;
        gap: 1em;
        input {
            flex: 1;
        }
        button {
            appearance: initial;
            border: 1px solid black;
            border-radius: 4px;
            padding: 2px 1em;
        }
    }
}
.actions > * {
    display: block;
}
dialog .actions {
    font-size: 1.5em;
    position: absolute;
    right: 6px;
    top: 6px;
}
dialog .certificate {
    padding: 16px;
}
li.score0 {
    background: none;
    &::marker { color: var(--score0-color) }
}
li.score1 {
    background: none;
    &::marker { color: var(--score1-color) }
}
li.score2 {
    background: none;
    &::marker { color: var(--score2-color) }
}
li.score3 {
    background: none;
    &::marker { color: var(--score3-color) }
}

.xml {
    font-size: 16px;
    padding: 1em;

    position: relative;
    details {
        line-height: 1.3;
        color: var(--xml-boilerplate-color);
        font-family: monospace;
        margin-left: 1em;
        &[open] > summary > .closed  {
            display: none;
        }
        summary {
            text-indent: 3em hanging;
        }
        summary::marker {
            color: var(--xml-disclosure-color);
        }
        .xml > & {
            margin-left: 0;
        }
    }
    p {
        font-weight: bold;
        color: var(--xml-text-color);
        margin: 0 0 0 2em;
    }
    .actions {
        margin: -16px -16px 4px 8px;
        vertical-align: 0;
        font-size: 1.5em;
        float: right;
        > * {
            margin-bottom: 8px;
        }
    }
    .elt { color: var(--xml-elt-color) }
    .elt .prefix { color: var(--xml-elt-prefix-color) }
    .att-key { color: var(--xml-att-key-color) }
    .att-key .prefix { color: var(--xml-att-key-prefix-color) }
    .att-val { color: var(--xml-att-val-color) }
    .annotation, .blob {
        width: max-content;
        font-style: italic;
        background-color: var(--xml-blob-background-color);
        color: var(--xml-text-color);
        padding: 2px 6px;
        border-radius: 8px;
    }
    .tag-rolemap, .tag-classmap {
        display: none;
    }
    &.rolemapped .tag-rolemap {
        display: initial;
        color: var(--xml-rolemap-color);
        .prefix {
            color: var(--xml-rolemap-prefix-color);
        }
    }
    &.rolemapped .tag-normal {
        display: none;
    }
    &.classmapped .tag-classmap {
        display: initial;
        background: var(--xml-classmap-color);
    }
}
label.checkbox-slider {
    --size: 50px;
    cursor: pointer;
    width: var(--size);
    height: calc(var(--size) / 2);
    background: var(--checkbox-background-color);
    display: block;
    border-radius: 100px;
    position: relative;
    user-select: none;
    &.inline {
        display: inline-block;
        margin: 0 0.25em;
        --size: 2em;
        top: 0.2em;
    }
    &::after {
        content: "";
        position: absolute;
        top: 6%;
        left: 2.5%;
        width: calc(50% - 5%);
        height: calc(100% - 11%);
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }
    input[type=checkbox] {
        height: 0;
        width: 0;
        visibility: hidden;
    }
    &:has(input:checked) {
        background: var(--checkbox-slider-color);
        &::after {
            left: calc(100% - 2.5%);
            transform: translateX(-100%);
        }
    }
    &:active::after {
        width: 55%;
    }
}
#progress {
  --progress: 1;
  --progress-core-color: var(--octopus-color);
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:
      radial-gradient(var(--progress-core-color) 0%, var(--progress-core-color) 40%, #0000 40%, #0000 100%),
      conic-gradient(var(--progress-color) 0, var(--progress-color) calc(1turn * var(--progress)), var(--progress-remaining-color) calc(1turn * var(--progress)))
  ;
  &.indefinite {
      animation: 1s linear infinite spinning;
  }
  :root > body > & {
      left: 25px;
      top: 25px;
      --progress-core-color: var(--sea-color-1);
      --progress-remaining-color: var(--sea-color-2);
      position: fixed;
  }
}
@keyframes spinning { to { transform: rotate(1turn) } }

altcha-widget {
    position: absolute;
    left: 0;
    bottom: 0;
    .altcha {
        border: none;
        &[data-state="verified"], &[data-state="expired"], &[data-state="verifying"] {
            .altcha-checkbox, .altcha-error {
                display:none;
            }
        }
        &[data-state="expired"] {
            .altcha-logo {
                color: #888 !important;
            }
        }
        .altcha-label, .altcha-footer {
            display: none;
        }
    }
}

#tag-rolemap-switch {
    --checkbox-slider-color: var(--rolemap-button-color);
}
#tag-classmap-switch {
    --checkbox-slider-color: var(--classmap-button-color);
}

.score0 {
    fill: var(--score0-color);
    background-color: var(--score0-color);
}
.score1 {
    fill: var(--score1-color);
    background-color: var(--score1-color);
}
.score2 {
    fill: var(--score2-color);
    background-color: var(--score2-color);
}
.score3 {
    fill: var(--score3-color);
    background-color: var(--score3-color);
}
.pre {
    font-family: monospace;
    white-space: pre-line;
}
td ul {
    padding-left: 1em;
    list-style: disc;
}
:root.safari-fix {
    td ul {
        list-style: none;
    }
    td ul li::before {
        position: absolute;
        margin-left: -1em;
        width: 1em;
        content: "\2022";
    }
}
ul li {
    border-bottom: 1px solid #8882;
}
.summary {
    position: relative;
    --radius: 100px;
    --pad: 120px;
    @media (max-width: 900px) {
        --radius: 90px;
        --pad: 95px;
    }
    @media (max-width: 800px) {
        --radius: 80px;
        --pad: 80px;
    }
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    margin-bottom: 2em;
    gap: 0;
    > * {
        display: flex;
        min-height: 100px;
    }
    > :is(:nth-child(1), :nth-child(2)) {
        align-items: end;
        border-bottom: 1px dotted black;
        padding-bottom: 1em;
    }
    > :is(:nth-child(3), :nth-child(4)) {
        align-items: start;
        padding-top: 1em;
        border-top: 1px dotted black;
    }
    > :is(:nth-child(1), :nth-child(3)) {
        justify-content: end;
        text-align: right;
        padding-right: var(--pad);
        border-right: 1px dotted black;
    }
    > :is(:nth-child(2), :nth-child(4)) {
        justify-content: start;
        text-align: left;
        padding-left: var(--pad);
    }
    .chart {
        position: absolute;
        left: calc(50% - var(--radius));
        top: calc(33.3% - var(--radius));
        width: calc(var(--radius) * 2);
        height: calc(var(--radius) * 2);
        .outline {
            fill: none;
            stroke: black;
            stroke-width: 2px;
        }
        text {
            text-anchor: middle;
            font-weight: 900;
            font-size: 1.5em;
            stroke: white;
            paint-order: stroke fill;
            transform: translate(0, 0.3em);
        }
    }
    .extras {
        --icon-size: 100px;
        --icon-gap: 50px;
        @media (max-width: 1400px) {
            --icon-size: 80px;
            --icon-gap: 30px;
            font-size: 0.8em;
        }
        @media (max-width: 1100px) {
            --icon-size: 60px;
            --icon-gap: 10px;
            font-size: 0.7em;
        }
        @media (max-width: 900px) {
            --icon-size: 40px;
        }
        grid-column: 1 / 3;
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 1em;
        gap: var(--icon-gap);
        div {
            text-align: center;
            img, span {
                display: block;
                width: var(--icon-size);
            }
            &.disabled {
                filter: grayscale(100%);
                opacity: 0.1;
            }
        }
    }
}
#section-signatures {
    .certificate-list {
        display: flex;
        align-items: center;
        > * {
            color: var(--main-text-color);
            background-color: var(--main-background-color);
            width: 180px;
            font-size: 0.6em;
            min-height: 5em;
            display: flex;
            align-items: center;
            padding: 2px 1em;
            border: 1px dotted var(--box-outline-color);
            border-radius: 8px;
            overflow: hidden;
            overflow-wrap: anywhere;
            img {
                display: block;
                height: 3em;
            }
        }
        > button > :first-child {
            display: flex;
            align-items: center;
        }
        > div:last-child {
            background: url("resources/icons/l/unknown.svg") 1em / 3em no-repeat var(--main-background-color);
            :root.dark & {
                background-image: url("resources/icons/d/unknown.svg");
            }
            &.trusted {
                background-image: url("resources/icons/l/ca.svg");
                :root.dark & {
                    background-image: url("resources/icons/d/ca.svg");
                }
            }
            padding-left: 5em;
        }
    }
}
#section-form {
    form {
        position: relative;
        padding: 16px 50px 16px 16px;
        min-width: 50%;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        font-size: 1rem;
        input[type="text"], textarea, select {
            width: 100%;
            font-size: 1rem;
        }
        textarea {
            height: 5em;
        }
        label {
            white-space: nowrap;
            &:not(:first-child) {
                margin-left: 1em;
            }
        }
        .td {
            white-space: nowrap;
        }
        .actions {
            position: absolute;
            right: 4px;
            top: 4px;
        }
    }
}

#intro {
    background: var(--panel-color-2);
    padding: 1em 1em 2em 1em;
    > * {
        position: relative;
        ol {
            font-weight: 900;
            font-size: 30px;
            width: max-content;
            margin: 0 auto;
        }
        h2 {
            margin: 0;
        }
        h3 {
            font-weight: 900; 
            margin: 1em 0 0 0;
        }
        ul:first-of-type {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: 100%;
            font-weight: 700;
            font-size: 2.2em;
            > li {
                display: block;
                white-space: nowrap;
                border: none;
            }
        }
        .feed {
            position: absolute;
            transform: rotate(-30deg);
            font-size: 1.5em;
            left: -130px;
            top: 100px;
            width: max-content;
        }
        .sign {
            width: 150px;
            margin-left: 2em;
            margin-right: 8px;
            transform:rotate(10deg);
            background: white;
            border: 4px solid black;
            padding: 10px;
            box-shadow: 10px 10px 8px #0004;
            float: right;
            img {
                display: block;
                width: 100%;
            }
        }
        hgroup {
            background: url("resources/icons/l/octopus.svg") 10px 0 / 80px no-repeat;
            :root.dark & {
                background-image: url("resources/icons/d/octopus.svg");
            }
            padding-left: 120px;
        }
    }
    #beta {
        position: absolute;
        left: 10px;
        top: 30px;
        background: #C44;
        padding: 15px;
        font-weight: 900;
        font-size: 25px;
        transform: rotate(-25deg);
        color: white;
        border: 1px solid black;
        box-shadow: 10px 10px 8px #0004;
    }
    #party {
        display:block;
        width: 100%;
        box-shadow: 10px 10px 8px #0004;
    }
}

@media (max-width: 1100px) {
    .seaweed :nth-child(3) {
        display: none;
    }
}
@media (max-width: 1000px) {
    .seaweed :nth-child(2) {
        display: none;
    }
}
@media (max-width: 900px) {
    #octopus, #background > * {
        display: none;
    }
    :root {
        --star-size: 16px;
    }
}
@media (max-width: 800px) {
    :root {
        --star-size: 12px;
    }
}
label:has(#upload) {
    color: var(--link-color);
    text-decoration: underline;
}
#upload {
    display: none;
    width: 0;
}