*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* data-theme = light | dark | reader(dark 4 now) */
:root {
    color-scheme: light dark;
    /* color */
    --bg: light-dark(#fff, #000);
    --t: light-dark(#000, #eee);
    --accent-l: hsl(230, 100%, 50%);
    --accent-d: hsl(210, 100%, 74%);
    --accent: light-dark(var(--accent-l), var(--accent-d));

    /* font */
    --mono: monospace;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

:root[data-theme="reader"] {
    color-scheme: dark;
    --bg: #121212;
    --t: #fff;
}

:root {
    background: var(--bg);
    color: var(--t);
}





html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    min-height: 100%;
    /* font-family: system-ui, sans-serif; */
    font-family: monospace;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}


*:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}


a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

img:not([src]) {
    visibility: hidden;
}