.dt-document{display:grid;gap:18px;max-width:470px;margin:25px auto;padding:28px;border:2px solid #8caad4;border-right:9px solid #c6d7ee;background:#f8fbff}.dt-document small{font:12px/1.5 system-ui}.dt-document code{font-size:23px}.dt-document b{font:650 25px/1.5 system-ui}.dt-writing{display:grid;gap:14px;margin:10px 0}.dt-writing i{height:2px;background:#9fb4cf}.dt-writing i:last-child{width:70%}.dt-route{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:15px;align-items:center;text-align:center;margin:25px 0}.dt-route b{font:650 18px/1.5 system-ui}.dt-route span{font:15px/1.5 system-ui;color:#245bce}.dt-stream-line{display:flex;justify-content:space-between;gap:16px;border-block:3px solid #8caad4;padding:25px 10px;margin:28px 0;font:18px/1.5 system-ui}.dt-size-lines{display:grid;gap:22px;margin:30px 0}.dt-size-lines label{display:grid;gap:10px;font:15px/1.5 system-ui}.dt-size-lines label span{display:block;height:24px;background:#8caad4}.dt-size-lines label:last-child span{height:14px;border:2px dashed #7693ba;background:#f8fbff;box-sizing:border-box}.dt-gate-result,.dt-datagram,.dt-stop,.dt-receipt,.dt-trust{display:grid;gap:15px;padding:24px 16px;margin:24px 0;border-left:4px solid #8caad4;background:#eef4ff;text-align:center}.dt-gate-result b,.dt-datagram b,.dt-stop b,.dt-receipt b{font:650 23px/1.5 system-ui}.dt-gate-result span,.dt-datagram span,.dt-stop span,.dt-receipt span,.dt-trust span{font:15px/1.5 system-ui}.dt-gate-result small,.dt-receipt small{font:12px/1.5 system-ui}.dt-stop{border:1px dashed #b28b7d;background:#fff3ef}.dt-prefix{display:grid;gap:15px;text-align:center;margin:25px 0}.dt-prefix small{font:12px/1.5 system-ui}.dt-prefix>div{display:flex;justify-content:center;gap:12px}.dt-prefix>div>span{font:650 15px/1.5 system-ui;padding:15px 25px;background:#fff8e8;border-bottom:4px solid #bba46f}.dt-prefix b{font:650 19px/1.5 system-ui}.dt-reads{list-style:none;padding:0;display:grid;gap:20px;margin:24px 0}.dt-reads li{display:grid;gap:8px;border-left:2px solid #8caad4;padding-left:16px}.dt-reads b{font:650 16px/1.5 system-ui}.dt-reads span{font:13px/1.5 system-ui}.dt-progress{height:18px;margin:20px 0;background:#e8effa;border:1px solid #8caad4}.dt-progress>span{display:block;height:100%;background:#7198cc}.dt-trust{background:#fff8e8;border-color:#bba46f}.dt-trust b{font:650 17px/1.5 system-ui}
@container(max-width:600px){.dt-document{gap:14px;margin:20px 0;padding:20px;border-right-width:6px}.dt-document small{font-size:10px}.dt-document code{font-size:18px}.dt-document b{font-size:20px}.dt-writing{gap:12px}.dt-route{gap:8px;margin:20px 0}.dt-route b{font-size:13px}.dt-route span{font-size:11px}.dt-stream-line{gap:10px;padding:20px 8px;margin:22px 0;font-size:14px}.dt-size-lines{gap:20px;margin:22px 0}.dt-size-lines label{font-size:12px}.dt-size-lines label span{height:20px}.dt-size-lines label:last-child span{height:12px}.dt-gate-result,.dt-datagram,.dt-stop,.dt-receipt,.dt-trust{gap:12px;padding:18px 12px;margin:20px 0}.dt-gate-result b,.dt-datagram b,.dt-stop b,.dt-receipt b{font-size:18px}.dt-gate-result span,.dt-datagram span,.dt-stop span,.dt-receipt span,.dt-trust span{font-size:12px}.dt-gate-result small,.dt-receipt small{font-size:10px}.dt-prefix{gap:12px;margin:20px 0}.dt-prefix small{font-size:10px}.dt-prefix>div>span{font-size:12px;padding:12px 16px}.dt-prefix b{font-size:15px}.dt-reads{gap:16px;margin:20px 0}.dt-reads b{font-size:13px}.dt-reads span{font-size:11px}.dt-progress{height:15px;margin:16px 0}.dt-trust b{font-size:14px}}