:root{
    --bg:#07110b;
    --panel:#0d1812;
    --border:#2d7a49;
    --text:#d8ffd8;

    --accent:#6dff87;
    --accent2:#2cc36b;
    --success:#c4ff58;
    --link:#8affff;

    --hover:#16261d;
}

*{
    box-sizing:border-box;
    font-family:"Ubuntu Mono", monospace;
    font-size:18px;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.container{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:700px;
    max-width:95%;
    margin:40px auto;
    padding:20px;
    border:1px solid var(--border);
    background:var(--panel);
}

.label{
    color:var(--accent);
    margin:12px 0 6px 0;
}
.question{
    color:var(--text);
    font-size:42px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:20px;
}

.pressed{
    border:1px solid var(--border);
    padding:10px;
    min-height:44px;
}

.status{
    min-height:24px;
    color:var(--success);
    font-weight:600;
}

.ok{
    color:var(--success);
}

button{
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    padding:10px;
    cursor:pointer;
    transition:background .15s,color .15s;
}

button:hover{
    background:var(--hover);
}

input[type=text]{
    width:100%;
    padding:8px;
    margin-bottom:12px;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    transition:border-color .15s;
}

input[type=text]:focus{
    outline:none;
    border-color:var(--accent);
}

label{
    margin-right:20px;
}

table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
}

th,
td{
    border:1px solid var(--border);
    padding:8px;
    text-align:left;
}

th{
    color:var(--accent);
}

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

a:hover{
    color:var(--accent);
    text-decoration:underline;
}

.navbar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    padding:16px;
    border-bottom:1px solid var(--border);
    background:var(--panel);
    flex:0 0 auto;
}

.navbar a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    height:44px;

    color:var(--text);
    text-decoration:none;

    border:1px solid var(--border);
    background:var(--panel);
}

.navbar a:hover{
    background:var(--hover);
    color:var(--accent);
}

input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:20px;
    height:20px;
    margin:0 8px 0 0;
    vertical-align:middle;
    background:var(--panel);
    border:1px solid var(--border);
    cursor:pointer;
    position:relative;
}

input[type="checkbox"]:hover{
    border-color:var(--accent);
}

input[type="checkbox"]:checked{
    background:var(--accent2);
    border-color:var(--accent2);
}

input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:4px;
    height:10px;
    border:solid var(--text);
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

label{
    display:flex;
    align-items:center;
    gap:8px;
    margin-right:20px;
    cursor:pointer;
}

.buttons{
    display:flex;
    gap:12px;
}

.buttons button{
    flex:1 1 0;
    width:0;
}

.answer{
    color:var(--accent);
    font-size:24px;
    margin-top:4px;
    margin-bottom:8px;
}

.footer{
    margin-top:10px;
    color:var(--accent);
}

.pressed{
    margin-bottom:10px;
}

.label,
.footer,
.answer{
    color:var(--accent);
}

button:hover,
.navbar a:hover{
    border-color:var(--accent);
}

h2{
    margin:0 0 28px 0;
    font-size:32px;
    color:var(--text);
}

form{
    display:flex;
    flex-direction:column;
    gap:8px;
}

input[type="radio"]{
    margin:0 8px 0 0;
}

label:has(input[type="radio"]){
    margin:0;
    gap:4px;
    justify-content:flex-start;
}

button[type="submit"]{
    margin-top:20px;
}

.buttons button{
    margin-top:20px;
    flex:1 1 0;
    width:0;
}

.navbar{
    justify-content:space-between;
}

.nav-left{
    display:flex;
    gap:12px;
}

.nav-right{
    display:flex;
    gap:12px;
    margin-right:24px;
}

.app-title{
    font-size:22px;
    font-weight:700;
    color:var(--accent);
    white-space:nowrap;
    margin-right:32px;
}

.navbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
}

.nav-left{
    justify-self:center;
}

.nav-right{
    justify-self:end;
}

.icon-button{
    width:44px;
    height:44px;
    padding:0;
}

.modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.75);
}

.modal-box{
    width:700px;
    max-width:90vw;
    background:var(--panel);
    border:1px solid var(--border);
    padding:20px;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    color:var(--accent);
    font-size:22px;
}

.modal-content{
    white-space:pre-wrap;
    line-height:1.6;
}

.hint{
    color:var(--accent);
    font-size:15px;
    margin-top:-8px;
    margin-bottom:12px;
}

:root {
	--button-size: 20px;
	--button-bg: #202020;
	--button-hover: #303030;
}

.home-button {
	position: fixed;
	top: 5px;
	right: 10px;

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

	width: var(--button-size);
	height: var(--button-size);

	background: var(--button-bg);
	text-decoration: none;

	overflow: hidden;
	z-index: 1000;

	text-decoration: none;
	border: none;
}

.home-button:hover {
	background: var(--button-hover);
}

.home-button img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}