:root{--primary:#d4a843;--primary-hover:#c49835;--primary-border:#b8922e;--nav-bg:#2a2621;--nav-border:#3d3730;--secondary:#6e7a86;--secondary-hover:#5a6570;--secondary-border:#4a545e;--danger:#c44040;--danger-hover:#b03535;--danger-border:#982a2a;--warning:#c89a20;--white:#e8dcc6;--dark:#2a2621;--text:#3d3730;--github:#3d3730;--github-hover:#4a443c;--github-border:#3d3730;--gray-100:#f0ece4;--gray-300:#d4cfc5;--light:#f5f2ec;--unit:1rem;--radius:5px;--font:"Raleway", sans-serif;--transition:.15s ease;--divider:1px solid var(--gray-300);--shadow:0 1px 3px #2a262114}html,body{height:100%;font-family:var(--font);color:var(--text);background-color:var(--light);margin:0}body{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}nav{background-color:var(--nav-bg);padding:calc(var(--unit) * .6) var(--unit);border-bottom:2px solid var(--primary-border);z-index:10;grid-area:1/1/span 1/span 2;justify-content:space-between;align-items:center;display:flex;box-shadow:0 2px 8px #2a262126}nav #brand{align-items:center;text-decoration:none;display:flex}nav #brand span{color:var(--white);margin-left:var(--unit);letter-spacing:.02em;font-size:20px;font-weight:600}nav #brand img{border-radius:50%}nav #links{display:none}@media screen and (width>=768px){nav #links{align-items:center;gap:calc(var(--unit) / 2);display:flex}}nav #links a{color:var(--white);border:1px solid var(--nav-border);padding:calc(var(--unit) * .35) calc(var(--unit) * .7);border-radius:var(--radius);transition:background-color var(--transition), border-color var(--transition);align-items:center;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex}nav #links a i{margin-right:calc(var(--unit) / 4);display:inline-block}nav #links a#sponsor:hover{background-color:var(--nav-border);border-color:var(--primary-border)}nav #links a#sponsor i{color:var(--primary)}nav #links a#github:hover{background-color:var(--github-hover);border-color:var(--primary-border)}nav #links a#github{background-color:var(--github);border:1px solid var(--github-border)}nav #links a#docs:hover{background-color:var(--secondary-hover);border-color:var(--primary-border)}nav #links a#docs{background-color:var(--secondary);border:1px solid var(--secondary-border)}nav #mobile-github:hover{color:var(--primary)}nav #mobile-github:visited{color:var(--white)}nav #mobile-github{color:var(--white);font-size:30px}@media screen and (width>=768px){nav #mobile-github{display:none}}main{grid-area:2/1/span 2/span 2;grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);display:grid}@media screen and (width>=768px){main{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}#editor{border-right:var(--divider);grid-area:1/1/span 1/span 1;display:flex}@media screen and (width>=768px){#editor{grid-area:1/1/span 1/span 1}}#result,#loading{grid-area:2/1/span 1/span 1;display:flex}#result{flex-direction:column}#result ul{border-bottom:2px solid var(--primary);margin:0;padding:0}#result ul li{padding:calc(var(--unit) * .6) var(--unit);cursor:pointer;background-color:var(--gray-100);color:var(--secondary);transition:color var(--transition), background-color var(--transition);font-size:14px;font-weight:600;display:inline-block}#result ul li:hover{background-color:var(--gray-300);color:var(--dark)}#result ul li.active{background-color:var(--dark);color:var(--white);cursor:default}#result ul li:last-child{border-right:var(--divider)}@media screen and (width>=768px){#result,#loading{grid-area:1/2/span 1/span 2}}#loading{justify-content:center;align-items:center;display:flex}#loading>div{width:80px;height:80px;display:inline-block}#loading>div:after{content:" ";border:4px solid var(--gray-300);border-top-color:var(--primary);border-radius:50%;width:64px;height:64px;margin:8px;animation:.8s linear infinite lds-dual-ring;display:block}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}footer{border-top:var(--divider);background-color:var(--gray-100);flex-direction:column-reverse;grid-area:3/1/span 3/span 1;display:flex}footer #info,footer #error-panel{box-sizing:border-box;max-height:150px;overflow-y:auto}footer #info{background-color:var(--gray-100);padding:calc(var(--unit) * 1.5);color:var(--text);border:none;flex-grow:1;font-size:15px;line-height:1.6}footer #error-panel{padding:var(--unit);background-color:var(--gray-100);border:none;border-top:var(--divider)}footer #error-panel div strong{margin-right:calc(var(--unit) / 4);font-weight:bolder}footer #error-panel div .badge{border-radius:var(--radius);background-color:var(--dark);color:var(--white);margin:0 calc(var(--unit) / 4);letter-spacing:.03em;text-transform:uppercase;padding:4px 8px;font-size:12px;font-weight:700;display:inline-block}footer #error-panel div .badge.error{background-color:var(--danger)}footer #error-panel div .badge.warning{background-color:var(--warning)}footer #error-panel div p{margin-top:0;font-size:15px}footer button:hover{background-color:var(--primary-hover)}footer button{background-color:var(--primary);color:var(--dark);padding:calc(var(--unit) * .5) calc(var(--unit) * 1.2);border:1px solid var(--primary-border);cursor:pointer;font-size:15px;font-weight:600;font-family:var(--font);border-radius:var(--radius);transition:background-color var(--transition), box-shadow var(--transition);white-space:nowrap;box-shadow:var(--shadow);margin:0}footer #report:hover{background-color:var(--danger-hover)}footer #report{background-color:var(--danger);border:1px solid var(--danger-border);color:var(--white);width:auto}footer a{margin:0;display:block}@media screen and (width>=768px){footer{flex-direction:row;grid-area:2/1/span 2/span 2;align-items:center;display:flex}footer #info{padding:var(--unit)}footer>button,footer a{margin:auto calc(var(--unit) / 2)}footer a{margin-right:0}}