@font-face{font-family:IBM3270;font-display:swap;src:url(/fonts/ibm3270.woff) format("woff")}
.term{position:fixed;inset:0;z-index:90;background:#0E0B07;color:#FFB000;font:19px/1.4 IBM3270,FangSong_GB2312,monospace;padding:28px 32px;overflow:auto;text-shadow:0 0 6px rgba(255,176,0,.55);animation:term-in .25s steps(4)}
.term::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.28) 2px 3px)}
.term pre{margin:0;white-space:pre-wrap;font:inherit}
.term-in{display:flex;gap:.6em;cursor:text}
.term-in input{all:unset;flex:1;min-width:4ch;caret-color:#FFB000;color:inherit;font:inherit}
@keyframes term-in{from{clip-path:inset(49% 0 49% 0)}to{clip-path:inset(0)}}
.thx-box{position:relative;display:inline-block;max-width:100%;margin:14px 0 22px;padding:26px 28px 20px;border:3px double #FFB000;box-shadow:0 0 14px rgba(255,176,0,.25),inset 0 0 14px rgba(255,176,0,.12)}
.thx-box::before{content:attr(data-tag);position:absolute;top:-.75em;left:22px;padding:0 10px;background:#0E0B07;letter-spacing:2px}
.thx{display:flex;gap:26px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.thx-fr{position:relative;padding:12px;border:1px dashed rgba(255,176,0,.45)}
.thx-fr::before,.thx-fr::after{content:"";position:absolute;width:12px;height:12px;border:2px solid #FFB000}
.thx-fr::before{left:-2px;top:-2px;border-right:0;border-bottom:0}.thx-fr::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.thx-fr canvas{display:block;height:216px;max-width:100%;image-rendering:pixelated}
.term .thx-t{font-size:22px;line-height:1.6;padding-top:14px;border-top:1px dashed rgba(255,176,0,.45)}
@media (max-width:600px){.term{font-size:15px;padding:18px}.thx-fr canvas{height:140px}}