html{background:repeating-linear-gradient(45deg,#000 0px 20px,#140b02 20px 40px);min-height:100vh;color-scheme:dark}body{margin:15px;font-family:Lucida Console,monospace;color:#ff8d00}*{box-sizing:border-box}button{font-family:inherit}.system{background:#000;border:2px solid #ff8d00;padding:15px;max-width:1200px;display:flex;flex-direction:column;position:relative;margin:0 auto}.magi{display:grid;grid-template-columns:[left-header-start] 20px [casper-start status] 2fr [left-header-end balthasar-start casper-balthasar-connection] .5fr [casper-end title casper-melchior-connection] 1fr [balthasar-melchior-connection melchior-start] .5fr [right-header-start balthasar-end response] 2fr [melchior-end] 20px [right-header-end];grid-template-rows:20px [header balthasar-start] 2fr [status response] 2fr [casper-start melchior-start casper-balthasar-connection balthasar-melchior-connection] 1fr [balthasar-end title casper-melchior-connection] 3fr [casper-end melchior-end] 20px;aspect-ratio:2 / 1;container-type:size;border:2px solid #ff8d00}.magi>.title{grid-area:title / title;color:#ff8d00;text-align:center;font-size:9cqh;font-weight:700}.magi>.header{overflow:hidden}.magi>.header>hr{border:2px solid #277547;height:4px;margin:2px}.magi>.header>span{color:#ff8d00;font-size:10cqh;display:flex;justify-content:center;font-weight:700;transform:scaleX(2)}.magi>.header.left{grid-area:header / left-header-start / auto / left-header-end}.magi>.header.right{grid-area:header / right-header-start / auto / right-header-end}.magi>.system-status{grid-area:status;color:#ff8d00}.magi>.system-status>div{font-size:3cqh;margin-left:4cqw;transform:scaleX(1.2);transform-origin:left}.magi>.system-status>div:first-child{font-size:6cqh;margin-left:0}.magi>.response{grid-area:response;justify-self:flex-end;align-self:center;border:solid 2px;padding:2px}.magi>.response>.inner{white-space:nowrap;border:solid 2px;padding:2px 10px;font-size:8cqh;font-weight:700}.magi>.wise-man{display:flex;background:#ff8d00;padding:2px;cursor:pointer;border:none;color:#000;font:inherit}.magi>.wise-man>.inner{width:100%;height:100%;font-family:Helvetica,Arial,sans-serif;font-size:8cqh;font-weight:700;display:flex;align-items:center;justify-content:center}.magi>.wise-man.melchior{grid-area:melchior-start / melchior-start / melchior-end / melchior-end}.magi>.wise-man.melchior,.magi>.wise-man.melchior>.inner{clip-path:polygon(35% 0,100% 0,100% 100%,0 100%,0 44%)}.magi>.wise-man.balthasar{grid-area:balthasar-start / balthasar-start / balthasar-end / balthasar-end}.magi>.wise-man.balthasar,.magi>.wise-man.balthasar>.inner{clip-path:polygon(0 0,100% 0,100% 80%,75% 100%,25% 100%,0 80%)}.magi>.wise-man.casper{grid-area:casper-start / casper-start / casper-end / casper-end}.magi>.wise-man.casper,.magi>.wise-man.casper>.inner{clip-path:polygon(0 0,65% 0,100% 44%,100% 100%,0 100%)}@keyframes flicker-animation{50%{background:#000;color:#000;border-color:#000}}.flicker{animation:flicker-animation .25s infinite step-end}.connection{height:10px;background:#ff8d00;align-self:center;margin:-10%}.connection.casper-balthasar{grid-area:casper-balthasar-connection;transform:rotate(-54deg)}.connection.casper-melchior{grid-area:casper-melchior-connection}.connection.balthasar-melchior{grid-area:balthasar-melchior-connection;transform:rotate(54deg)}.modal-backdrop{position:fixed;inset:0;background:#0009;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:5vh 5vw;overflow-y:auto}.modal{border:2px solid #ff8d00;color:#ff8d00;background:#000;width:min(700px,90vw);max-height:90vh;overflow-y:auto;box-shadow:0 0 30px #ff8d004d}.modal>.modal-header{display:flex;flex-direction:row;border-bottom:2px solid #ff8d00}.modal>.modal-header>.modal-title{flex:1;padding:8px 12px;background:repeating-linear-gradient(45deg,#000 0px 10px,#211200 10px 20px);text-transform:uppercase;letter-spacing:2px;font-weight:700}.modal>.modal-header>.close{padding:8px 14px;border:none;border-left:2px solid #ff8d00;cursor:pointer;background:#000;color:#ff8d00;font-size:18px;line-height:1}.modal>.modal-header>.close:hover{background:#211200}.modal>.modal-body{padding:12px;display:flex;flex-direction:column;gap:12px}.modal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px}.modal-col{display:flex;flex-direction:column}.modal-input:disabled,.modal-select:disabled{opacity:.6;cursor:not-allowed}.modal-section-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.8;margin-bottom:4px}.modal-section-value{border:1px solid #ff8d00;background:#1f1203;padding:6px 8px;word-break:break-word;white-space:pre-wrap}.modal-select,.modal-input{width:100%;background:#1f1203;border:2px solid #ff8d00;color:#ff8d00;padding:6px 8px;font-family:inherit;font-size:14px}.modal-select:focus,.modal-input:focus{outline:none;box-shadow:0 0 0 1px #ff8d00 inset}.input-container{display:grid;grid-template-columns:auto 1fr auto;color:#ff8d00;column-gap:10px;row-gap:5px;margin-top:15px;align-items:center}.input-container>input{background:#1f1203;border:2px solid #ff8d00;color:#ff8d00;padding:4px 8px;font-family:inherit;font-size:14px}.input-container>input:focus{outline:none;box-shadow:0 0 0 1px #ff8d00 inset}.input-container>input:disabled{opacity:.6;cursor:not-allowed}.reset-btn{background:#1f1203;border:2px solid #ff8d00;color:#ff8d00;padding:4px 12px;font-family:inherit;font-size:13px;text-transform:uppercase;letter-spacing:1px;cursor:pointer}.reset-btn:hover{background:#3a2005}.reset-btn:active{background:#ff8d00;color:#000}.notice{margin-top:12px;font-size:12px;color:#ff8d00;opacity:.65}.mobile-notice{display:none;margin-top:12px;padding:8px 12px;border:1px dashed #ff8d00;color:#ff8d00;font-size:12px;line-height:1.4;background:#1f1203}@media(max-width:720px){.mobile-notice{display:block}}.repo-link{color:#ff8d00;text-decoration:none;border-bottom:1px dashed #ff8d00;margin-left:6px}.repo-link:hover{background:#211200}@media(max-width:720px){body{margin:8px}.system{padding:8px}.input-container{grid-template-columns:auto 1fr;row-gap:8px}.reset-btn{grid-column:1 / -1;justify-self:start;padding:6px 18px}.notice{font-size:11px}.modal{width:95vw;max-height:85vh}.modal-row{grid-template-columns:1fr}}
