:root {
    --bg: #dde4f6;
    --hi: #fff;
    --lo: #8790b3;
    --dk: #343a5c;
    --title: #ff2fb9;
    --title2: #00b8ff;
    --btngradient: linear-gradient(#f8faff, #d3dcf2 50%, #bcc8e8 51%, #dbe3f6);
    --btnhover: linear-gradient(#ff9be0,#ff2fb9 50%,#e0009f 51%,#ff5fcb);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
}
::selection {
    color: white;
    background-color: #ff2fb9;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-padding-top: env(safe-area-inset-top, 0px);
}
body {
    margin: 0;
    background-color: #008080;
    color: black;
    font-size: 14px;
    font-family: Tahoma, "MS Sans Serif", sans-serif;
    min-height: 100vh;
}
main {
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 10px 70px;
}
.bevelup {
    background: var(--bg);
    box-shadow:
        inset -1px -1px var(--dk),
        inset 1px 1px var(--hi),
        inset -2px -2px var(--lo),
        inset 2px 2px #f3f6ff;
}
.beveldown {
    background: white;
    box-shadow:
        inset 1px 1px var(--lo),
        inset -1px -1px var(--hi),
        inset 2px 2px var(--dk),
        inset -2px -2px #f3f6ff;
}
.container {
    padding: 3px;
}
.titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 3px 3px 6px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, var(--title), #8a2cff 50%, var(--title2));
}
.titlebar span.t {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ctl {
    width: 18px;
    height: 16px;
    padding: 0;
    display: grid;
    place-items: center;
    font:
        700 11px/1 Arial,
        sans-serif;
    color: #000;
    cursor: default;
}
.menu {
    display: flex;
    gap: 14px;
    padding: 3px 8px;
}
.menu span {
    cursor: default;
}
.body {
    margin: 3px;
    padding: 14px;
}
.bio {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.profilepic {
    width: 72px;
    height: 72px;
    flex: none;
    background-image: url(img/profilepic.jpg);
    background-size: cover;
    background-position: center center;
}
h1 {
    margin: 0;
    font:
        700 24px/1.1 Tahoma,
        Verdana,
        sans-serif;
}
h4 {
    margin: 0;
}
.bio p {
    margin: 4px 0 0;
}
a {
    color: #0050e6;
}
.rr {
    color: unset;
    text-decoration: unset;
}
.group {
    margin: 0 0 14px;
    padding: 10px;
    border: 2px groove var(--bg);
    border-color: var(--hi) var(--lo) var(--lo) var(--hi);
    outline: 1px solid var(--lo);
    outline-offset: -3px;
    border: 1px solid var(--lo);
    box-shadow:
        1px 1px var(--hi),
        inset 1px 1px var(--hi);
}
.grouptitle {
    padding-bottom: 1em;
}
.btns {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 6px 12px;
    color: black;
    text-decoration: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    background: var(--btngradient);
    text-shadow: 0 0 2px #bcc8e8;
    box-shadow:
        inset -1px -1px var(--dk),
        inset 1px 1px var(--hi),
        inset -2px -2px var(--lo),
        inset 2px 2px #f3f6ff;
}
.btn:active,
.btn.copy {
    box-shadow:
        inset 1px 1px var(--dk),
        inset -1px -1px var(--hi),
        inset 2px 2px var(--lo),
        inset -2px -2px #f3f6ff;
    padding: 7px 11px 5px 13px;
}
.btn .subtitle {
    color: #3b4263;
    font-size: 0.85em;
}
.btn:hover .subtitle {
    color: white;
}
.btn:hover {
    background: var(--btnhover);
    color: white;
    text-shadow: 0 0 2px #ff2fb9;
    box-shadow:
        0 0 0 1px #000,
        inset -1px -1px var(--dk),
        inset 1px 1px var(--hi),
        inset -2px -2px var(--lo),
        inset 2px 2px #f3f6ff;
}
.btn span.v {
    font-family: "Courier New", monospace;
    text-align: right;
    overflow-wrap: anywhere;
}
.btn:focus-visible {
    outline: 1px dotted #000;
    outline-offset: -5px;
}
.tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(#eef2ff, #c9d3ef);
    box-shadow:
        inset 0 1px var(--hi),
        inset 0 2px #f3f6ff;
    z-index: 5;
}
.start {
    background: var(--btngradient);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    font-weight: 700;
    color: unset;
    text-decoration: unset;
}
.task {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow:
        inset 1px 1px var(--dk),
        inset -1px -1px var(--hi),
        inset 2px 2px var(--lo);
    background: repeating-conic-gradient(#fff 0 25%, var(--bg) 0 50%) 0 0/2px 2px;
}
.clock {
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    box-shadow:
        inset 1px 1px var(--lo),
        inset -1px -1px var(--hi);
}
.biolinks {
    display: flex;
}
.biolink {
    align-items: center;
    display: flex;
    margin-right: 1em;
}
.icon {
    display: block;
    min-width: 1em;
    min-height: 1em;
    margin-right: 0.35em;
    background-size: contain;
    background-position: center center;
    fill: unset;
}
.dc {
    background-image: url(img/dc.svg);
}
.hv {
    background-image: url(img/hv.svg);
}