*{box-sizing:border-box;margin:0;padding:0}html{background:repeating-linear-gradient(45deg,#000 0 20px,#140b02 20px 40px);min-height:100vh}body{margin:15px}.system{background:#000;border:2px solid #ff8d00;flex-direction:column;max-width:1200px;margin:0 auto;padding:15px;display:flex;position:relative}.magi{aspect-ratio:2;border:2px solid #ff8d00;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;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];display:grid;container-type:size}.magi>.title{color:#ff8d00;text-align:center;grid-area:title;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;justify-content:center;font-size:10cqh;font-weight:700;display:flex;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{color:#ff8d00;grid-area:status;font-family:Lucida Console}.magi>.system-status>div{transform-origin:0;margin-left:4cqw;font-size:3cqh;transform:scaleX(1.2)}.magi>.system-status>div:first-child{margin-left:0;font-size:6cqh}.magi>.response{border:2px solid;grid-area:response;place-self:center flex-end;padding:2px}.magi>.response>.inner{white-space:nowrap;border:2px solid;padding:2px 10px;font-size:8cqh;font-weight:700}.magi>.wise-man{cursor:pointer;background:#ff8d00;padding:2px;display:flex}.magi>.wise-man>.inner{justify-content:center;align-items:center;width:100%;height:100%;font-family:Helvetica;font-size:8cqh;font-weight:700;display:flex}.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{0%{}50%{color:#000;background:#000;border-color:#000}}.flicker{animation:.25s step-end infinite flicker-animation}.connection{background:#ff8d00;align-self:center;height:10px;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{color:#ff8d00;background:#000;border:2px solid #ff8d00;max-width:60%;font-family:Lucida Console;position:absolute;top:10%;right:10%}.modal>.modal-header{border-bottom:2px solid #ff8d00;flex-direction:row;display:flex}.modal>.modal-header>.modal-title{background:repeating-linear-gradient(45deg,#000 0 10px,#211200 10px 20px);flex:1;padding:5px}.modal>.modal-header>.close{cursor:pointer;border-left:2px solid #ff8d00;padding:5px}.modal>.modal-body{grid-template-columns:auto auto;column-gap:10px;padding:10px;display:grid}.input-container{color:#ff8d00;grid-template-columns:auto 1fr;gap:5px 10px;margin-top:15px;font-family:Lucida Console;display:grid}.input-container>input{color:#ff8d00;background:#1f1203;border:2px solid #ff8d00}