:root {
  --bg: #000000;
  --bg-light: #ffffff;
  --text: #000000;
  --link: #4da6ff;
  --link-hover: #ffffff;
  --sub-text: #444444;
  --divider: #acacac;
}

:root.dark {
  --bg: #000000;
  --bg-light: #000000;
  --text: #ffffff;
  --link: #4da6ff;
  --link-hover: #a8a8a8;
  --sub-text: #929292;
  --divider: #acacac;
}

/* ══════════════════ Basics ══════════════════ */
body {
	margin: 0;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden; /* Prevent scrollbars after scaling */

  font-family: Hack, monospace, sans-serif;
  color: var(--text)
}

/* ══════════════════ Typography & Links ══════════════════ */
h1,h2,h3{
  margin:10px 0;
}

h1{
  display:flow-root;

  margin:0 0 14px 0;
  padding:10px 18px;

  background: var(--text);
  color: var(--bg-light);
  font-size:17px;

  box-sizing:border-box;
}

h1::before{
	content: ">";
    margin-right: 6px;
}

p{
  margin:10px 0;
}

ul{
  padding-left:20px;
}

li{
  margin:4px 0;
}

/* links */
a{
  color: var(--link);
  position:relative;
}

a:hover{
  color: var(--link-hover);
  text-decoration:none;
}

a:hover::after{
  content:"";
  position:absolute;
  inset:-3px;
  border:1px dotted #666;
}

.sub-text{
	color: var(--sub-text);
}

.dotted-divider {
  border: none;             
  border-top: 2px dotted var(--divider);
  color: #fff;              
  background-color: #fff;   
}

.progress-frame{
    width:430px;
    height:32px;

    background:#ffffff;

    border-top:2px solid #404040;
    border-left:2px solid #404040;
    border-right:2px solid #ffffff;
    border-bottom:2px solid #ffffff;

    position:relative;
    overflow:hidden;
}

.progress-fill{
    position:absolute;
    inset:0 auto 0 0;

    width:0%;
    height:100%;

    background:#000000;

    z-index:1;

    transition:width .15s linear;
}

.progress-text{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:14px;
    font-weight:bold;

    color:#000000;

    z-index:2;
    pointer-events:none;
}

.bottom-row{
    width:430px;

    margin-top:8px;

    display:flex;
    justify-content:space-between;

    font-size:12px;
    color:#000000;
}