/*! 98.css v0.1.21 - https://github.com/jdan/98.css */@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(/assets/ms_sans_serif-C3pax6mQ.woff) format("woff");src:url(/assets/ms_sans_serif-Du8rjN1q.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(/assets/ms_sans_serif_bold-B8yxhAcs.woff) format("woff");src:url(/assets/ms_sans_serif_bold-D5dpRRHG.woff2) format("woff2")}body{color:#222;font-family:Arial;font-size:12px}.title-bar,.window,button,input,label,legend,li[role=tab],option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}button.default,input[type=reset].default,input[type=submit].default{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset 2px 2px #fff,inset -3px -3px grey,inset 3px 3px #dfdfdf}.vertical-bar{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}button.default:not(:disabled):active,input[type=reset].default:not(:disabled):active,input[type=submit].default:not(:disabled):active{box-shadow:inset 2px 2px #0a0a0a,inset -1px -1px #0a0a0a,inset -2px -2px #fff,inset 3px 3px grey,inset -3px -3px #dfdfdf}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}.window{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:3px}.title-bar{align-items:center;background:linear-gradient(90deg,navy,#1084d0);display:flex;justify-content:space-between;padding:3px 2px 3px 3px}.title-bar.inactive{background:linear-gradient(90deg,grey,#b5b5b5)}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px}.title-bar-controls{display:flex}.title-bar-controls button{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls button:active{padding:0}.title-bar-controls button:focus{outline:none}.title-bar-controls button[aria-label=Minimize],.title-bar-controls button[aria-label].minimize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Maximize],.title-bar-controls button[aria-label].maximize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Maximize]:disabled,.title-bar-controls button[aria-label].maximize:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='gray'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Restore],.title-bar-controls button[aria-label].restore{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Help],.title-bar-controls button[aria-label].help{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");background-position:top 2px left 5px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Close],.title-bar-controls button[aria-label].close{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;display:flex;margin:0 1px}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}fieldset{border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;margin:0;padding:10px;padding-block-start:8px}legend{background:silver}.field-row{align-items:center;display:flex}[class^=field-row]+[class^=field-row]{margin-top:6px}.field-row>*+*{margin-left:6px}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*{margin-top:6px}label{align-items:center;display:inline-flex;user-select:none}input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed}input[type=checkbox]+label,input[type=radio]+label{line-height:13px}input[type=radio]+label{margin-left:18px;position:relative}input[type=radio]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E");content:"";display:inline-block;height:12px;left:-18px;margin-right:6px;position:absolute;top:0;width:12px}input[type=radio]:active+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E");content:"";display:block;height:4px;left:-14px;position:absolute;top:4px;width:4px}input[type=checkbox]:focus+label,input[type=radio]:focus+label{outline:1px dotted #000}input[type=radio][disabled]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E")}input[type=checkbox]+label{margin-left:19px;position:relative}input[type=checkbox]+label:before{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;content:"";display:inline-block;height:13px;left:-19px;margin-right:6px;position:absolute;width:13px}input[type=checkbox]:active+label:before{background:silver}input[type=checkbox]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E");content:"";display:block;height:7px;left:-16px;position:absolute;width:7px}input[type=checkbox][disabled]+label:before{background:silver}input[type=checkbox][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E")}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select{background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}select,textarea{border:none}textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}input[type=email],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select{height:21px}input[type=number]{height:22px}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{display:none;height:0;width:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{line-height:2}input[type=email]:disabled,input[type=email]:read-only,input[type=number]:disabled,input[type=number]:read-only,input[type=password]:disabled,input[type=password]:read-only,input[type=search]:disabled,input[type=search]:read-only,input[type=tel]:disabled,input[type=tel]:read-only,input[type=text]:disabled,input[type=text]:read-only,input[type=url]:disabled,input[type=url]:read-only,textarea:disabled{background-color:silver}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0;padding-right:32px;position:relative}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{outline:none}input[type=range]{-webkit-appearance:none;background:transparent;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");border:none;box-shadow:none;height:21px;transform:translateY(-8px);width:11px}input[type=range].has-box-indicator::-webkit-slider-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(-10px)}input[type=range]::-moz-range-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");border:0;border-radius:0;height:21px;transform:translateY(2px);width:11px}input[type=range].has-box-indicator::-moz-range-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(0)}input[type=range]::-webkit-slider-runnable-track{background:#000;border-bottom:1px solid grey;border-right:1px solid grey;box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;box-sizing:border-box;height:2px;width:100%}input[type=range]::-moz-range-track{background:#000;border-bottom:1px solid grey;border-right:1px solid grey;box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;box-sizing:border-box;height:2px;width:100%}.is-vertical{display:inline-block;height:150px;transform:translateY(50%);width:4px}.is-vertical>input[type=range]{height:4px;margin:0 16px 0 10px;transform:rotate(270deg) translateX(calc(-50% + 8px));transform-origin:left;width:150px}.is-vertical>input[type=range]::-webkit-slider-runnable-track{border-bottom:1px solid grey;border-left:1px solid grey;border-right:0;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-moz-range-track{border-bottom:1px solid grey;border-left:1px solid grey;border-right:0;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-webkit-slider-thumb{transform:translateY(-8px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb{transform:translateY(-10px) scaleX(-1)}.is-vertical>input[type=range]::-moz-range-thumb{transform:translateY(2px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb{transform:translateY(0) scaleX(-1)}select:focus{background-color:navy;color:#fff}select:focus option{background-color:#fff;color:#000}select:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}a{color:#00f}a:focus{outline:1px dotted #00f}ul.tree-view{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;display:block;margin:0;padding:6px}ul.tree-view li{list-style-type:none}ul.tree-view a{color:#000;text-decoration:none}ul.tree-view a:focus{background-color:navy;color:#fff}ul.tree-view li,ul.tree-view ul{margin-top:3px}ul.tree-view ul{border-left:1px dotted grey;margin-left:16px;padding-left:16px}ul.tree-view ul>li{position:relative}ul.tree-view ul>li:before{border-bottom:1px dotted grey;content:"";display:block;left:-16px;position:absolute;top:6px;width:12px}ul.tree-view ul>li:last-child:after{background:#fff;bottom:0;content:"";display:block;left:-20px;position:absolute;top:7px;width:8px}ul.tree-view details{margin-top:0}ul.tree-view details[open] summary{margin-bottom:0}ul.tree-view ul details>summary:before{margin-left:-22px;position:relative;z-index:1}ul.tree-view details>summary:before{background-color:#fff;border:1px solid grey;content:"+";display:block;float:left;height:9px;line-height:8px;margin-right:5px;padding-left:1px;text-align:center;width:8px}ul.tree-view details[open]>summary:before{content:"-"}ul.tree-view details>summary::-webkit-details-marker,ul.tree-view details>summary::marker{content:""}pre{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;display:block;margin:0;padding:12px 8px}code,code *{font-family:monospace}summary:focus{outline:1px dotted #000}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#dfdfdf}::-webkit-scrollbar-track{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")}::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:vertical:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:horizontal:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}::-webkit-scrollbar-button:horizontal:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}.window[role=tabpanel]{position:relative;z-index:2}menu[role=tablist]{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}menu[role=tablist]>li{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 grey,inset 2px 2px #fff;z-index:1}menu[role=tablist]>li[aria-selected=true]{background-color:silver;margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8}menu[role=tablist]>li>a{color:#222;display:block;margin:6px;text-decoration:none}menu[role=tablist]>li[aria-selected=true]>a:focus{outline:none}menu[role=tablist]>li>a:focus{outline:1px dotted #222}menu[role=tablist].multirows>li{flex-grow:1;text-align:center}.sunken-panel{border:2px groove transparent;border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;box-sizing:border-box;overflow:auto}.sunken-panel,table{background-color:#fff}table{border-collapse:collapse;position:relative;text-align:left;white-space:nowrap}table>thead>tr>*{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;box-sizing:border-box;font-weight:400;height:17px;padding:0 6px;position:sticky;top:0}table.interactive>tbody>tr{cursor:pointer}table>tbody>tr.highlighted{background-color:navy;color:#fff}table>tbody>tr>*{height:14px;padding:0 6px}.progress-indicator{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0;box-shadow:inset -2px -2px #dfdfdf,inset 2px 2px grey;box-sizing:border-box;height:32px;padding:4px;position:relative}.progress-indicator>.progress-indicator-bar{background-color:navy;display:block;height:100%}.progress-indicator.segmented>.progress-indicator-bar{background-color:transparent;background-image:linear-gradient(90deg,navy 16px,transparent 0 2px);background-repeat:repeat;background-size:18px 100%;width:100%}.field-border{background:#fff}.field-border,.field-border-disabled{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;padding:2px}.field-border-disabled{background:silver}.status-field-border{background:silver;box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;padding:1px}
/*# sourceMappingURL=98.css.map */* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #008080;
}

#root {
  position: fixed;
  inset: 0;
}

button,
a,
input {
  letter-spacing: 0;
}

img {
  user-select: none;
}
.boot-screen,
.os-shell {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  color: #111;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
}

.boot-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: progress;
}

.app-content h2,
.app-content h3 {
  margin: 0;
  letter-spacing: 0;
}

.title-bar-controls,
button,
a {
  cursor: pointer;
}

input,
textarea,
.terminal-output {
  cursor: text;
}

.app-window-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
}

.app-content {
  display: grid;
  gap: 10px;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.compact-list {
  margin: 0;
  padding-left: 18px;
}

.compact-list li + li {
  margin-top: 4px;
}

html[data-cursor="win98"] {
  --w98-cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3v22l6-6 4 10 4-2-4-9h8z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M7 8v10l3-3 2 4 2-1-3-5h5z' fill='%23fff'/%3E%3C/svg%3E") 3 2, default;
  --w98-cursor-busy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3v22l6-6 4 10 4-2-4-9h8z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='18' y='5' width='8' height='14' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M19 7h6l-3 4 3 6h-6l3-6z' fill='%23000080'/%3E%3C/svg%3E") 3 2, progress;
  --w98-cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13 5h8v3h-2v16h2v3h-8v-3h2V8h-2z' fill='%23fff' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 16 16, text;
  --w98-cursor-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 4h4v10h1V8h4v7h1v-5h4v10l-4 8H12l-6-9v-5h4l2 3z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M14 5v13M19 9v9M24 11v8' stroke='%23000'/%3E%3C/svg%3E") 12 4, pointer;
  --w98-cursor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2l5 5h-3v7h7v-3l5 5-5 5v-3h-7v7h3l-5 5-5-5h3v-7H7v3l-5-5 5-5v3h7V7h-3z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, move;
  --w98-cursor-resize-ns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2l6 7h-4v14h4l-6 7-6-7h4V9h-4z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, ns-resize;
  --w98-cursor-resize-ew: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 16l7-6v4h14v-4l7 6-7 6v-4H9v4z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, ew-resize;
  --w98-cursor-resize-nesw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M25 3h5v5l-4-1-8 8 3 3-11 4 4-11 3 3 8-8zM7 29H2v-5l4 1 8-8-3-3 11-4-4 11-3-3-8 8z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, nesw-resize;
  --w98-cursor-resize-nwse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 3h5L7 7l8 8 3-3 4 11-11-4 3-3-8-8zM29 29h-5l1-4-8-8-3 3-4-11 11 4-3 3 8 8z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, nwse-resize;
  --w98-cursor-precision: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M15 2h2v11h11v2H17v11h-2V15H4v-2h11z' fill='%23fff' stroke='%23000' stroke-width='0.8'/%3E%3C/svg%3E") 16 16, crosshair;
  --w98-cursor-unavailable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3v22l6-6 4 10 4-2-4-9h8z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='22' r='7' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M17 17l10 10' stroke='%23c00' stroke-width='3'/%3E%3C/svg%3E") 3 2, not-allowed;
}

html[data-cursor="win98"],
html[data-cursor="win98"] body,
html[data-cursor="win98"] * {
  cursor: var(--w98-cursor-default) !important;
}

html[data-cursor="win98"] .boot-screen,
html[data-cursor="win98"] .boot-screen *,
html[data-cursor="win98"] .win-window.is-resizing,
html[data-cursor="win98"] .win-window.is-resizing * {
  cursor: var(--w98-cursor-busy) !important;
}

html[data-cursor="win98"] a,
html[data-cursor="win98"] a *,
html[data-cursor="win98"] .web-page a,
html[data-cursor="win98"] .web-page a * {
  cursor: var(--w98-cursor-link) !important;
}

html[data-cursor="win98"] button:disabled,
html[data-cursor="win98"] button:disabled * {
  cursor: var(--w98-cursor-unavailable) !important;
}

html[data-cursor="win98"] input,
html[data-cursor="win98"] textarea,
html[data-cursor="win98"] [contenteditable="true"],
html[data-cursor="win98"] [contenteditable="true"] *,
html[data-cursor="win98"] .terminal-output {
  cursor: var(--w98-cursor-text) !important;
}

html[data-cursor="win98"] .title-bar,
html[data-cursor="win98"] .title-bar *,
html[data-cursor="win98"] .desktop-icon.is-dragging,
html[data-cursor="win98"] .win-window.is-dragging,
html[data-cursor="win98"] .win-window.is-dragging * {
  cursor: var(--w98-cursor-move) !important;
}

html[data-cursor="win98"] .resize-n,
html[data-cursor="win98"] .resize-s {
  cursor: var(--w98-cursor-resize-ns) !important;
}

html[data-cursor="win98"] .resize-e,
html[data-cursor="win98"] .resize-w {
  cursor: var(--w98-cursor-resize-ew) !important;
}

html[data-cursor="win98"] .resize-ne,
html[data-cursor="win98"] .resize-sw {
  cursor: var(--w98-cursor-resize-nesw) !important;
}

html[data-cursor="win98"] .resize-nw,
html[data-cursor="win98"] .resize-se {
  cursor: var(--w98-cursor-resize-nwse) !important;
}

html[data-cursor="win98"] .paint-canvas,
html[data-cursor="win98"] .paint-canvas * {
  cursor: var(--w98-cursor-precision) !important;
}
.boot-sequence-screen {
  color: #c8c8c8;
  font-family: "Courier New", Consolas, monospace;
}

.boot-sequence-post {
  background: #000;
  text-shadow: 0 0 2px #777;
}

.boot-post-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3vh, 34px) clamp(18px, 4vw, 76px);
  font-size: clamp(13px, 2vw, 24px);
  line-height: 1.38;
}

.boot-post-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 1.4em;
}

.boot-post-header div {
  display: grid;
  gap: 2px;
}

.boot-post-header strong {
  color: #fff;
  font-weight: 700;
}

.boot-post-header b {
  align-self: start;
  padding: 0.1em 0.6em;
  border: 2px solid currentColor;
  color: #33ff66;
  font-weight: 700;
  white-space: nowrap;
}

.boot-post-model {
  margin: 0 0 1.4em;
}

.boot-post-log {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  white-space: pre-wrap;
}

.boot-sequence-caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.18em;
  background: #c8c8c8;
  vertical-align: -0.12em;
  animation: boot-blink 1s steps(1, end) infinite;
}

.boot-post-footer {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  margin-top: auto;
  padding-left: 210px;
  color: #c8c8c8;
  font-size: 0.86em;
}

.boot-sequence-starting {
  display: grid;
  place-items: center;
  background: #000;
  text-shadow: 0 0 2px #777;
}

.boot-sequence-starting p {
  margin: 0;
  color: #c8c8c8;
  font-size: clamp(22px, 3vw, 40px);
}

.boot-sequence-updating {
  display: grid;
  place-items: center;
  background: #000;
  text-shadow: 0 0 2px #777;
}

.boot-sequence-updating section {
  display: grid;
  gap: 0.6em;
  width: min(760px, calc(100vw - 36px));
}

.boot-sequence-updating p,
.boot-sequence-updating small {
  margin: 0;
}

.boot-sequence-updating p {
  color: #c8c8c8;
  font-size: clamp(20px, 2.5vw, 34px);
}

.boot-sequence-updating small {
  color: #8f8f8f;
  font-size: clamp(13px, 1.5vw, 18px);
}

.boot-sequence-splash {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(26px, 6vh, 54px);
  background: linear-gradient(180deg, #0a2a6b 0%, #16489e 55%, #3e78c8 100%);
  color: #fff;
}

.boot-splash-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 42px);
}

.boot-splash-brand img {
  width: clamp(86px, 16vw, 190px);
  height: clamp(86px, 16vw, 190px);
  image-rendering: pixelated;
  filter: drop-shadow(4px 8px 0 rgba(0, 0, 0, 0.24));
}

.boot-splash-brand div {
  display: grid;
  line-height: 0.96;
}

.boot-splash-brand span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 2.4vw, 28px);
}

.boot-splash-brand strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(46px, 9vw, 118px);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.24);
}

.boot-splash-brand em {
  color: #ffd23f;
  font-style: normal;
}

.boot-splash-brand small {
  margin-top: 8px;
  font-size: clamp(14px, 2.4vw, 28px);
}

.boot-splash-progress {
  width: min(58vw, 520px);
  height: clamp(15px, 2vh, 22px);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
}

.boot-splash-progress i {
  display: block;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #9fc4ff 40%, #fff 100%);
  animation: boot-marquee 1.6s linear infinite;
}

.boot-splash-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: clamp(12px, 1.5vw, 18px);
  text-align: center;
}

.boot-sequence-signature {
  position: fixed;
  left: 16px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(12px, 1.35vw, 17px);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.boot-sequence-signature img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

@keyframes boot-blink {
  50% {
    opacity: 0;
  }
}

@keyframes boot-marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(420%);
  }
}

@media (max-width: 620px) {
  .boot-post-header {
    flex-direction: column;
    gap: 10px;
  }

  .boot-post-footer {
    flex-direction: column;
    gap: 3px;
    padding-left: 0;
    padding-bottom: 32px;
    font-size: 0.76em;
  }

  .boot-splash-brand {
    flex-direction: column;
    text-align: center;
  }

  .boot-sequence-signature {
    bottom: 8px;
  }
}

.os-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--w98-text, #111);
  background: var(--w98-desktop, #008080);
  cursor: default;
}

.desktop {
  position: absolute;
  inset: 0 0 33px;
  overflow: hidden;
  background: var(--w98-wallpaper, var(--w98-desktop, #008080));
  background-position: var(--w98-wallpaper-position, center);
  background-repeat: var(--w98-wallpaper-repeat, no-repeat);
  background-size: var(--w98-wallpaper-size, cover);
}

.desktop.is-refreshing {
  filter: contrast(1.05);
}

.desktop.is-display-degraded {
  background: #000;
}

.desktop.is-display-degraded::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 128, 0.24) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.08), transparent 18rem);
  opacity: 0.78;
  pointer-events: none;
}

.desktop.is-display-degraded::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    rgba(0, 0, 0, 0.08);
  pointer-events: none;
  mix-blend-mode: screen;
}

.desktop.is-display-unstable::before {
  opacity: 0.92;
  animation: display-driver-scan-roll 1.1s steps(5, end) infinite;
}

.desktop.is-display-unstable::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0, 128, 255, 0.07) 0 1px, transparent 1px 3px),
    rgba(0, 0, 0, 0.18);
  animation: display-driver-noise 640ms steps(4, end) infinite;
}

.os-shell.display-driver-missing .desktop-grid {
  filter: grayscale(1) blur(1.35px) contrast(1.28) brightness(0.72);
  transform: translateZ(0);
}

.os-shell.display-driver-missing .window {
  filter: grayscale(1) blur(0.9px) contrast(1.18) brightness(0.84);
}

.os-shell.display-driver-missing .desktop-icon {
  color: #d8d8d8;
  text-shadow: 1px 1px #000;
}

.os-shell.display-driver-missing .desktop-icon.is-shortcut::after {
  filter: grayscale(1);
}

.os-shell.display-driver-unstable .desktop-grid {
  filter: grayscale(1) blur(2.25px) contrast(1.45) brightness(0.62);
  animation: display-driver-jitter 820ms steps(4, end) infinite;
}

.os-shell.display-driver-unstable .window {
  filter: grayscale(1) blur(1.35px) contrast(1.28) brightness(0.78);
}

.os-shell.display-driver-unstable .desktop-icon img {
  filter: grayscale(1) contrast(1.6) brightness(0.72);
}

.os-shell.is-shell-starting .desktop {
  animation: desktop-shell-background-in 280ms steps(2, end);
}

.os-shell.is-shell-starting .desktop-grid {
  pointer-events: none;
}

.os-shell.is-shell-starting .desktop-icon {
  opacity: 0;
  animation: desktop-icon-boot-in 520ms steps(5, end) forwards;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(1) {
  animation-delay: 80ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(2) {
  animation-delay: 130ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(3) {
  animation-delay: 180ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(4) {
  animation-delay: 230ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(5) {
  animation-delay: 280ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(6) {
  animation-delay: 330ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(7) {
  animation-delay: 380ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(8) {
  animation-delay: 430ms;
}

.os-shell.is-shell-starting .desktop-icon:nth-child(n + 9) {
  animation-delay: 480ms;
}

.os-shell.is-shell-starting .taskbar {
  animation: desktop-taskbar-boot-in 620ms steps(5, end) 520ms both;
}

.desktop-startup-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 238px;
  padding: 10px 14px;
  color: var(--w98-text, #111);
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-highlight, #fff),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-face, #dfdfdf);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: desktop-loader-boot-out 5s steps(6, end) forwards;
}

.desktop-startup-loader-icon {
  width: 18px;
  height: 18px;
  border: 1px solid #000;
  background:
    linear-gradient(90deg, transparent 0 44%, #000080 45% 55%, transparent 56%),
    linear-gradient(#fff, #c0c0c0);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  animation: desktop-loader-icon-pulse 360ms steps(2, end) infinite;
}

.desktop-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.desktop-selection-box {
  position: absolute;
  z-index: 2;
  border: 1px dotted #fff;
  background: color-mix(in srgb, var(--w98-highlight, #000080) 18%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.34);
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  width: 88px;
  height: 80px;
  min-width: 88px;
  min-height: 80px;
  padding: 4px;
  border: 1px dotted transparent;
  background: transparent;
  box-shadow: none;
  color: #fff;
  text-shadow: 1px 1px #000;
  touch-action: none;
  user-select: none;
  transform-origin: top left;
}

.desktop-icon:focus,
.desktop-icon.selected {
  outline: 1px dotted #fff;
  outline-offset: -2px;
  background: color-mix(in srgb, var(--w98-highlight, #000080) 16%, transparent);
}

.desktop-icon.selected span,
.desktop-icon:focus span {
  color: var(--w98-highlight-text, #fff);
  background: var(--w98-highlight, #000080);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--w98-highlight-text, #fff) 55%, transparent);
}

.desktop-icon img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.desktop-icon.is-shortcut::after {
  content: '>';
  position: absolute;
  left: 24px;
  top: 33px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}

.desktop-icon span {
  display: block;
  max-width: 82px;
  padding: 1px 3px;
  line-height: 1.15;
  text-align: center;
  color: #fff;
  overflow-wrap: normal;
  word-break: normal;
}

.desktop-icon.is-dragging {
  z-index: 3;
  opacity: 0.92;
  cursor: move;
  will-change: transform;
}

/* Recycle Bin (or any icon) highlighted as the active drop target while an icon
   is being dragged onto it. The "full" bin asset is identical to the empty one,
   so the highlight is the visible cue rather than an icon swap. */
.desktop-icon.drop-target {
  outline: 2px dotted #fff;
  outline-offset: -3px;
  background: color-mix(in srgb, var(--w98-highlight, #000080) 42%, transparent);
}

.desktop-icon.drop-target img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

.desktop.is-refreshing .desktop-icon {
  animation: desktop-refresh 120ms steps(2, end) 2;
}

@keyframes desktop-refresh {
  50% {
    opacity: 0.55;
  }
}

@keyframes desktop-shell-background-in {
  0% {
    filter: brightness(0.35);
  }

  100% {
    filter: none;
  }
}

@keyframes desktop-icon-boot-in {
  0% {
    opacity: 0;
    filter: contrast(1.5) brightness(1.18);
  }

  65% {
    opacity: 1;
    filter: contrast(1.18);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes desktop-taskbar-boot-in {
  0% {
    opacity: 0;
    transform: translateY(33px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes desktop-loader-boot-out {
  0%,
  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes desktop-loader-icon-pulse {
  50% {
    filter: invert(1);
  }
}

@keyframes display-driver-jitter {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(1px, 0);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(0, -1px);
  }
}

@keyframes display-driver-noise {
  0%,
  100% {
    opacity: 0.75;
  }

  50% {
    opacity: 0.95;
  }
}

@keyframes display-driver-scan-roll {
  0% {
    background-position: 0 0, 0 0, center;
  }

  100% {
    background-position: 0 12px, 8px 0, center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop.is-display-unstable::before,
  .desktop.is-display-unstable::after,
  .os-shell.display-driver-unstable .desktop-grid {
    animation: none;
  }
}

.safe-mode-banner {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 5;
  display: grid;
  gap: 2px;
  max-width: 260px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-family: "Courier New", monospace;
  pointer-events: none;
}

.safe-mode-banner strong {
  font-size: 13px;
}

.safe-mode-banner span {
  font-size: 11px;
  line-height: 1.3;
  color: #d8d8d8;
}

/* Transient taskbar balloons (driver removed, etc.) */
.tray-balloon-layer {
  position: fixed;
  right: 8px;
  bottom: 40px;
  z-index: 6000;
  display: grid;
  gap: 6px;
  justify-items: end;
}

.tray-balloon {
  position: relative;
  display: grid;
  gap: 3px;
  width: 260px;
  padding: 8px 22px 8px 10px;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  font-size: 11px;
  animation: tray-balloon-in 180ms ease-out;
}

.tray-balloon strong {
  font-size: 12px;
}

.tray-balloon span {
  color: #333;
  line-height: 1.3;
}

.tray-balloon-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  min-width: 0;
  padding: 0;
  line-height: 1;
}

@keyframes tray-balloon-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.mouse-trail-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.mouse-trail-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border: 1px solid #9a9a9a;
  background: #fff;
  box-shadow: inset -1px -1px #c0c0c0;
}

.win-window {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 220px;
  max-width: calc(100vw - 16px);
  max-height: calc(100svh - 48px);
  contain: layout paint style;
  transform-origin: top left;
}

.win-window.is-maximized {
  inset: 0 0 0 0;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  transform: none !important;
}

.win-window.is-dragging {
  will-change: transform;
}

.win-window.is-resizing {
  will-change: transform, width, height;
}

.win-window.is-dragging iframe,
.win-window.is-resizing iframe {
  pointer-events: none;
}

[data-window-animations="on"] .win-window:not(.is-dragging):not(.is-resizing) {
  animation: window-effect-in 120ms steps(3, end);
}

[data-window-animations="on"] .win-window.is-maximized:not(.is-dragging):not(.is-resizing) {
  animation-name: window-effect-maximize;
}

@keyframes window-effect-in {
  from {
    opacity: 0.72;
    filter: contrast(1.24);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes window-effect-maximize {
  from {
    opacity: 0.84;
    outline: 2px dotted var(--w98-highlight, #000080);
  }
  to {
    opacity: 1;
    outline: 0 dotted transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-window-animations="on"] .win-window {
    animation: none;
  }
}

.resize-handle {
  position: absolute;
  z-index: 4;
}

.resize-n,
.resize-s {
  left: 8px;
  right: 8px;
  height: 6px;
  cursor: ns-resize;
}

.resize-n {
  top: -3px;
}

.resize-s {
  bottom: -3px;
}

.resize-e,
.resize-w {
  top: 22px;
  bottom: 8px;
  width: 6px;
  cursor: ew-resize;
}

.resize-e {
  right: -3px;
}

.resize-w {
  left: -3px;
}

.resize-ne,
.resize-nw,
.resize-se,
.resize-sw {
  width: 10px;
  height: 10px;
}

.resize-ne,
.resize-sw {
  cursor: nesw-resize;
}

.resize-nw,
.resize-se {
  cursor: nwse-resize;
}

.resize-ne {
  top: -3px;
  right: -3px;
}

.resize-nw {
  top: -3px;
  left: -3px;
}

.resize-se {
  right: -3px;
  bottom: -3px;
}

.resize-sw {
  left: -3px;
  bottom: -3px;
}

.title-bar {
  color: var(--w98-titlebar-text, #fff);
  background: linear-gradient(90deg, var(--w98-titlebar-1, #000080), var(--w98-titlebar-2, #1084d0));
  user-select: none;
  touch-action: none;
  cursor: move;
}

.title-bar.inactive {
  color: var(--w98-titlebar-text, #fff);
  background: linear-gradient(90deg, var(--w98-titlebar-inactive-1, #808080), var(--w98-titlebar-inactive-2, #b5b5b5));
}

.title-bar-text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.title-bar-text img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.title-bar-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.identity-row > div {
  min-width: 0;
}

.identity-row img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.identity-row h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}

.identity-row p,
.inset-copy p {
  margin: 0;
  line-height: 1.45;
}

.inset-copy {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.toolbar,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.os-menu-bar {
  display: flex;
  align-items: center;
  min-height: 22px;
  margin: -2px -2px 4px;
  padding: 1px 4px;
  list-style: none;
  border-bottom: 1px solid #808080;
}

.os-menu-bar li {
  padding: 2px 8px;
}

.os-menu-bar li:hover,
.os-menu-bar li:focus {
  color: var(--w98-highlight-text, #fff);
  background: var(--w98-highlight, #000080);
}

.button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  min-width: 75px;
  padding: 3px 12px;
  color: var(--w98-text, #111);
  text-decoration: none;
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-highlight, #fff),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-face, #dfdfdf);
}

.button-like:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

.contact-links,
.credits-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  overflow: auto;
}

.toolbar-separator {
  width: 1px;
  align-self: stretch;
  margin: 0 2px;
  background: #808080;
  border-right: 1px solid #fff;
}

.button-like {
  display: inline-block;
  width: fit-content;
  padding: 4px 12px;
  color: var(--w98-text, #000);
  text-decoration: none;
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-highlight, #fff),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-face, #dfdfdf);
}

.button-like:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

.theme-options {
  display: grid;
  align-content: start;
  gap: 10px;
}

.theme-options select {
  width: min(220px, 100%);
}

.property-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.property-grid div,
.network-meter div {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(140px, 1fr);
  gap: 8px;
  align-items: center;
}

.property-grid span,
.network-meter span {
  color: #333;
}

.property-grid strong,
.network-meter strong {
  font-weight: 400;
}

.network-meter {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
}

.run-buttons {
  justify-content: flex-end;
}

.window-loading-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  color: #000;
  font-size: 12px;
}

[data-menu-shadows="on"] .start-menu,
[data-menu-shadows="on"] .submenu,
[data-menu-shadows="on"] .desktop-context-menu,
[data-menu-shadows="on"] .context-submenu,
[data-menu-shadows="on"] .clock-flyout,
[data-menu-shadows="on"] .ms-menu-dropdown,
[data-menu-shadows="on"] .wp-menu-dropdown {
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.35));
}
.file-list {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding: 4px;
}

.file-manager-app {
  position: relative;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  background: silver;
}

.file-manager-app .os-menu-bar {
  min-height: 22px;
  margin: -2px -2px 0;
  padding: 1px 4px 2px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px #fff;
}

.file-manager-commandbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 0;
  min-width: 0;
  min-height: 54px;
  padding: 2px 4px;
  overflow: hidden;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #808080;
}

.file-command-button {
  display: inline-flex;
  flex: 0 1 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 50px;
  min-height: 48px;
  padding: 3px 6px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: #000;
  font-size: 12px;
  line-height: 1.1;
}

.file-command-button:hover:not(:disabled),
.file-command-button:focus-visible:not(:disabled) {
  border-color: #fff #404040 #404040 #fff;
  outline: 0;
}

.file-command-button:active:not(:disabled) {
  border-color: #404040 #fff #fff #404040;
}

.file-command-button:disabled {
  color: #808080;
  text-shadow: 1px 1px #fff;
}

.file-command-button:disabled .file-command-icon {
  opacity: 0.42;
}

.file-command-button span:last-child {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-command-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.file-command-arrow,
.file-command-cut {
  background: silver;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.file-command-cut {
  color: #404040;
  font-size: 13px;
}

.file-command-separator {
  flex: 0 0 auto;
  width: 1px;
  margin: 4px 5px;
  background: #808080;
  border-right: 1px solid #fff;
}

.file-view-picker {
  display: inline-flex;
  flex: 0 0 106px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 106px;
  margin-left: 6px;
  padding-left: 6px;
  color: #000;
  font-size: 11px;
}

.file-view-select {
  width: 102px;
  min-width: 102px;
  height: 22px;
  color: #000;
  color-scheme: light;
}

.file-manager-addressbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 6px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px #fff;
}

.file-address-input-wrap {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 23px;
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.file-address-input-wrap img {
  justify-self: center;
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.file-address-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 19px;
  padding: 1px 4px 0;
  border: 0;
  background: transparent;
  color: #000;
  color-scheme: light;
  box-shadow: none;
}

.file-manager-layout {
  display: grid;
  grid-template-columns: minmax(154px, 194px) minmax(144px, 178px) minmax(260px, 1fr);
  gap: 3px;
  min-height: 0;
  min-width: 0;
  padding: 3px;
}

.file-tree-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: silver;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
}

.file-tree-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  padding: 2px 6px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px #fff;
  font-weight: 700;
}

.file-tree {
  min-height: 0;
  margin: 0;
  overflow: auto;
  background: #fff;
}

.file-tree details {
  padding: 4px 2px;
}

.file-tree summary {
  min-height: 18px;
  padding: 1px 2px;
  color: #000;
}

.file-tree ul {
  margin-top: 2px;
}

/* Win98 "View as Web Page" info panel: blue header plus selected-item details. */
.file-webinfo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #27489d 0%, #17306f 58%, #102052 100%);
  box-shadow: inset -1px -1px #fff, inset 1px 1px #404040;
}

.file-webinfo-header {
  padding: 13px 12px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.file-webinfo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 14px 10px;
  overflow: auto;
  text-align: center;
}

.file-webinfo-icon {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
}

.file-webinfo-thumb {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.file-webinfo-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.file-webinfo-detail {
  margin: 0;
  color: #d5def5;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.file-webinfo-blurb {
  margin: 8px 0 0;
  color: #c4d0ed;
  font-size: 12px;
  line-height: 1.35;
}

.rich-file-list {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.rich-file-list.view-details {
  grid-template-rows: auto minmax(0, 1fr);
}

.file-header,
.file-row.file-manager-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.7fr) minmax(110px, 0.9fr) 74px minmax(126px, 1fr);
  align-items: center;
}

.file-header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 22px;
  border-bottom: 1px solid #808080;
  background: silver;
}

.file-header button {
  min-width: 0;
  min-height: 21px;
  padding: 2px 7px;
  text-align: left;
  background: silver;
  box-shadow: inset -1px -1px #404040, inset 1px 1px #fff;
}

.file-header button[aria-sort] {
  font-weight: 700;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #404040;
}

.file-list-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.file-row {
  display: grid;
  grid-template-columns: 22px minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(90px, 0.8fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: #111;
  text-align: left;
}

.file-row.file-manager-row {
  gap: 0;
  min-height: 25px;
  padding: 0;
  border: 0;
}

.file-row.file-manager-row > span {
  min-width: 0;
  padding: 0 7px;
}

.file-name-cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.file-row:hover,
.file-row:focus,
.file-row.selected {
  background: #000080;
  color: #fff;
}

.file-row:focus {
  outline: 1px dotted #fff;
  outline-offset: -2px;
}

.file-row img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.file-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-name {
  font-weight: 700;
}

/* ----- Explorer view modes (Large/Small Icons, List, Details, Thumbnails) ----- */
.view-list .file-list-body,
.view-smallIcons .file-list-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-content: start;
  padding: 3px;
}

.view-largeIcons .file-list-body,
.view-thumbnails .file-list-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.view-largeIcons .file-list-body {
  grid-template-columns: repeat(auto-fill, 92px);
}

.view-thumbnails .file-list-body {
  grid-template-columns: repeat(auto-fill, 120px);
}

.view-list .file-row,
.view-smallIcons .file-row,
.view-largeIcons .file-row,
.view-thumbnails .file-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 23px;
  padding: 2px 4px;
}

.view-list .file-row > span:not(.file-name-cell),
.view-smallIcons .file-row > span:not(.file-name-cell),
.view-largeIcons .file-row > span:not(.file-name-cell),
.view-thumbnails .file-row > span:not(.file-name-cell) {
  display: none;
}

.view-list .file-name-cell,
.view-smallIcons .file-name-cell {
  width: 100%;
}

.view-largeIcons .file-row,
.view-thumbnails .file-row {
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 7px 2px;
  text-align: center;
}

.view-largeIcons .file-name-cell,
.view-thumbnails .file-name-cell {
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.view-largeIcons .file-row img {
  width: 36px;
  height: 36px;
}

.view-thumbnails .file-row img {
  width: 32px;
  height: 32px;
}

.view-thumbnails .file-row .file-thumb-img {
  width: 100%;
  height: 76px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px #808080;
  image-rendering: auto;
}
.crash-screen {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(18px, 3.2vh, 32px) 7vw 20px;
  color: #c0c0c0;
  background: #0000aa;
  font-family: "Courier New", monospace;
  font-size: clamp(16px, 1.45vw, 23px);
  line-height: 1.28;
  cursor: default;
}

.crash-panel {
  display: grid;
  gap: clamp(12px, 2.1vh, 21px);
  width: min(1180px, 100%);
}

.crash-panel p {
  margin: 0;
}

.crash-title {
  margin: 0 0 clamp(18px, 3vh, 34px);
  padding: 0 14px;
  color: #0000aa;
  background: #c0c0c0;
  font-weight: 700;
  line-height: 1.25;
}

.crash-bullet {
  padding-left: 1.6em;
  text-indent: -1.6em;
}

.crash-bullet::before {
  content: "*  ";
}

.crash-detail {
  color: #dedede;
  overflow-wrap: anywhere;
  font-size: 0.9em;
  line-height: 1.22;
}

.crash-continue {
  margin: clamp(16px, 3vh, 28px) 0 0;
  font-size: 0.92em;
}

.crash-continue span {
  display: inline-block;
  width: 0.62em;
  height: 1em;
  background: #c0c0c0;
  vertical-align: -0.12em;
  animation: crash-blink 1s steps(1, end) infinite;
}

@keyframes crash-blink {
  50% {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .crash-screen {
    padding: 18px 16px;
    font-size: 15px;
    line-height: 1.22;
  }

  .crash-title {
    margin-bottom: 18px;
  }

  .crash-panel {
    gap: 12px;
  }
}

.start-menu {
  position: absolute;
  left: 2px;
  bottom: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 36px 220px;
  min-height: 380px;
  color: var(--w98-text, #111);
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-face, #dfdfdf),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-highlight, #fff);
  padding: 3px;
}

.start-rail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  color: #fff;
  background: linear-gradient(180deg, var(--w98-titlebar-1, #000080), var(--w98-titlebar-2, #1084d0));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 17px;
  letter-spacing: 0;
}

.start-rail strong {
  font-size: 22px;
}

.start-list,
.submenu {
  list-style: none;
  margin: 0;
  padding: 2px;
}

.start-list {
  position: relative;
}

.start-row,
.start-row-button,
.start-list button,
.submenu button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  gap: 8px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--w98-text, #111);
  text-align: left;
  font-size: 12px;
}

.start-row-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.submenu .has-submenu {
  position: relative;
}

.start-row img,
.start-row-button img,
.start-list button img,
.submenu button img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.start-row:hover,
.start-row:focus,
.start-row-button:hover,
.start-row-button:focus,
.start-list button:hover,
.start-list button:focus,
.submenu button:hover,
.submenu button:focus {
  color: var(--w98-highlight-text, #fff);
  background: var(--w98-highlight, #000080);
  outline: none;
}

.submenu-arrow {
  margin-left: auto;
}

.submenu {
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
  width: 220px;
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-face, #dfdfdf),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-highlight, #fff);
}

.nested-submenu {
  top: 0;
}

.submenu-align-bottom > .nested-submenu {
  top: auto;
  bottom: 0;
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  display: block;
}

.start-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--button-shadow, grey);
  border-bottom: 1px solid var(--button-highlight, #fff);
}

.start-network-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 3px 8px;
}

.start-network-row img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  height: 33px;
  padding: 3px 4px;
  color: var(--w98-text, #111);
  background: var(--w98-surface, silver);
  box-shadow: inset 0 1px var(--button-highlight, #fff), inset 0 2px var(--button-face, #dfdfdf);
}

.start-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 76px;
  min-height: 26px;
  padding: 2px 8px;
  font-weight: 700;
  color: var(--w98-text, #111);
}

.start-button img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

.start-button.active,
.task-button.active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

.task-buttons {
  display: flex;
  min-width: 0;
  gap: 3px;
  overflow: hidden;
}

.task-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 88px;
  max-width: 180px;
  min-height: 24px;
  padding: 2px 8px;
  color: var(--w98-text, #111);
}

.task-button img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

.task-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tray {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 6px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey;
}

.tray-icon {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

.network-led {
  width: 9px;
  height: 9px;
  background: #800000;
  border: 1px solid #404040;
  box-shadow: inset 1px 1px #ff8080;
}

.network-led.online {
  background: #008000;
  box-shadow: inset 1px 1px #80ff80;
}

.tray-cell,
.tray-time {
  white-space: nowrap;
}

.tray-clock {
  position: relative;
  display: inline-flex;
}

.tray-time {
  min-width: 56px;
  min-height: 20px;
  padding: 1px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--w98-text, #111);
  text-align: center;
}

.tray-time:hover,
.tray-time:focus,
.tray-time.active {
  outline: 0;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey;
}

/* === Taskbar tray buttons =============================================== */

.tray-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 1px 3px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
}

.tray-button:hover {
  box-shadow: inset 1px 1px #fff, inset -1px -1px grey;
}

.tray-button:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey;
}

.tray-button img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

/* Disconnected network: dim + desaturate the two-PCs icon. */
.tray-button.offline img {
  opacity: 0.5;
  filter: grayscale(0.7);
}

/* Muted / sound-off: fade the speaker and draw a red slash across it. */
.tray-button.muted {
  position: relative;
}

.tray-button.muted img {
  opacity: 0.55;
}

.tray-button.muted::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #d40000;
  transform: rotate(45deg);
  pointer-events: none;
}

/* === Volume flyout ====================================================== */

.tray-volume {
  position: relative;
  display: inline-flex;
}

/* Small raised panel that pops up above the tray speaker, Win98-style. */
.volume-flyout {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 6px;
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-highlight, #fff),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-face, #dfdfdf);
}

.volume-flyout-title,
.volume-flyout-value {
  font-size: 11px;
  white-space: nowrap;
}

/* Vertical slider. The selector is intentionally more specific than 98.css's
   `input[type=range]` rule, which forces width:100% + appearance:none and
   collapses once the control is rotated vertical. We opt back into the native
   vertical slider and size it slim. direction: rtl puts the loud end at the top. */
.volume-flyout .volume-slider {
  appearance: auto;
  -webkit-appearance: auto;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 16px;
  height: 90px;
  margin: 0;
}

.volume-flyout-mute {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.volume-flyout-mute input {
  margin: 0;
}

/* === Clock/calendar flyout ============================================== */

.clock-flyout {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 10001;
  width: 214px;
  padding: 8px;
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-highlight, #fff),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-face, #dfdfdf);
}

.clock-flyout-title {
  margin-bottom: 6px;
  padding: 2px 5px;
  color: var(--w98-titlebar-text, #fff);
  background: linear-gradient(90deg, var(--w98-titlebar-1, #000080), var(--w98-titlebar-2, #1084d0));
  font-weight: 700;
}

.clock-flyout-date,
.clock-flyout-time {
  padding: 2px 1px;
  white-space: nowrap;
}

.clock-flyout-time {
  margin-bottom: 7px;
  font-family: "Courier New", monospace;
}

.clock-calendar {
  padding: 5px;
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.clock-calendar-month {
  margin-bottom: 4px;
  color: #000080;
  font-weight: 700;
  text-align: center;
}

.clock-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  color: #111;
  text-align: center;
}

.clock-calendar-grid strong,
.clock-calendar-grid span {
  min-height: 18px;
  line-height: 18px;
}

.clock-calendar-grid strong {
  color: #666;
  font-size: 10px;
}

.clock-calendar-grid .today {
  color: #fff;
  background: #000080;
}

.desktop-context-menu {
  position: absolute;
  z-index: 10001;
  width: 210px;
  color: var(--w98-text, #111);
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-face, #dfdfdf),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-highlight, #fff);
  margin: 0;
  padding: 3px;
  list-style: none;
}

.desktop-context-menu ul,
.context-submenu {
  margin: 0;
  padding: 2px;
  list-style: none;
}

.desktop-context-menu li,
.context-submenu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-context-menu li::marker,
.context-submenu li::marker {
  content: '';
}

.desktop-context-menu button,
.context-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 24px;
  gap: 7px;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--w98-text, #111);
  text-align: left;
}

.desktop-context-menu button {
  justify-content: flex-start;
}

.desktop-context-menu.taskbar-context-menu {
  position: fixed;
  width: 190px;
  z-index: 10003;
}

.desktop-context-menu button:disabled {
  color: grey;
  text-shadow: 1px 1px var(--button-highlight, #fff);
}

.desktop-context-menu button:disabled:hover,
.desktop-context-menu button:disabled:focus {
  color: grey;
  background: transparent;
}

.context-check {
  display: inline-block;
  width: 12px;
  text-align: center;
}

.context-row .submenu-arrow {
  margin-left: auto;
}

.desktop-context-menu img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.desktop-context-menu button:hover,
.desktop-context-menu button:focus,
.context-row:hover,
.context-row:focus {
  color: var(--w98-highlight-text, #fff);
  background: var(--w98-highlight, #000080);
  outline: none;
}

.context-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
  width: 150px;
  background: var(--w98-surface, silver);
  box-shadow:
    inset -1px -1px var(--window-frame, #0a0a0a),
    inset 1px 1px var(--button-face, #dfdfdf),
    inset -2px -2px var(--button-shadow, grey),
    inset 2px 2px var(--button-highlight, #fff);
}

.has-submenu:hover > .context-submenu,
.has-submenu:focus-within > .context-submenu {
  display: block;
}

.context-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--button-shadow, grey);
  border-bottom: 1px solid var(--button-highlight, #fff);
}

@media (max-width: 720px) {
  .desktop {
    inset-bottom: 38px;
  }

  .desktop-grid {
    inset: 0;
  }

  .win-window:not(.is-maximized) {
    width: calc(100vw - 16px) !important;
    height: calc(100svh - 170px) !important;
    min-width: 0;
    transform: translate3d(8px, 118px, 0) !important;
  }

  .file-row {
    grid-template-columns: 22px minmax(100px, 1fr);
  }

  .file-manager-layout {
    grid-template-columns: 1fr;
  }

  .file-tree-shell,
  .file-webinfo {
    display: none;
  }

  .file-header,
  .file-row.file-manager-row {
    grid-template-columns: minmax(120px, 1fr) minmax(90px, 0.8fr);
  }

  .file-header button:nth-child(3),
  .file-header button:nth-child(4),
  .file-row.file-manager-row span:nth-of-type(3),
  .file-row.file-manager-row span:nth-of-type(4) {
    display: none;
  }

  .paint-layout {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .paint-toolbox button {
    font-size: 10px;
    padding: 3px 1px;
  }

  .wordpad-ruler {
    display: none;
  }

  .wordpad-toolbar input {
    flex-basis: 132px;
  }

  .wordpad-workspace {
    padding: 6px 0 10px;
  }

  .wordpad-page-shell {
    padding: 0 6px;
  }

  .wordpad-page {
    min-height: 520px;
    padding: 20px 14px;
  }

  .recycle-row {
    grid-template-columns: minmax(130px, 1fr) auto;
  }

  .recycle-row span:nth-of-type(2),
  .recycle-row span:nth-of-type(3),
  .recycle-row span:nth-of-type(4) {
    display: none;
  }

  .file-row:not(.file-manager-row) span:nth-of-type(2),
  .file-row:not(.file-manager-row) span:nth-of-type(3) {
    display: none;
  }

  .start-menu {
    grid-template-columns: 30px minmax(190px, 1fr);
    width: calc(100vw - 4px);
  }

  .submenu {
    left: 34px;
    top: auto;
    bottom: 0;
    width: calc(100vw - 44px);
  }

  .nested-submenu {
    top: auto;
  }

  .taskbar {
    height: 38px;
    grid-template-columns: auto 1fr;
  }

  .tray {
    display: none;
  }

  .task-button {
    min-width: 54px;
    padding-inline: 5px;
  }

  .task-button span {
    display: none;
  }

  .bios-frame {
    padding: 10px 8px;
    font-size: 13px;
  }

  .bios-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .bios-section-list {
    grid-template-columns: 1fr;
    max-height: 150px;
    overflow: auto;
    border-right: 0;
    border-bottom: 3px double #fff;
    padding: 8px;
  }

  .bios-detail {
    padding: 8px;
  }

  .bios-detail h1 {
    font-size: 13px;
  }

  .bios-section-item {
    white-space: nowrap;
  }

  .bios-row {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .bios-key-help {
    justify-content: flex-start;
  }

  .shutdown-screen {
    padding: 24px;
    font-size: 18px;
  }

  .shutdown-wait-copy h1,
  .shutdown-safe .shutdown-safe-copy {
    font-size: 34px;
  }
}

/* === System screens (boot menu, recovery, shutdown, DOS-only) =========== */

/* The F8 startup menu mirrors the Award BIOS Setup look (see styles/bios.css):
   blue screen, monospace text, a centered double-ruled frame and a footer help bar. */
.boot-menu-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #0000a8;
  font-family: "Courier New", Consolas, monospace;
  cursor: default;
}

.boot-menu-screen * {
  cursor: default;
}

.boot-menu-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(10px, 2vh, 22px) clamp(6px, 2.5vw, 28px);
  font-size: clamp(14px, 1.25vw, 20px);
  line-height: 1.3;
}

.boot-menu-titlebar {
  margin: 0 auto 16px;
  text-align: center;
  font-weight: 700;
}

.boot-menu-main {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 22px clamp(14px, 3vw, 40px);
  border: 3px double #fff;
}

.boot-menu-heading {
  margin: 0;
  color: #ffff55;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
}

.boot-menu-warning {
  margin: 0;
  padding: 6px 8px;
  color: #ffff55;
  border: 1px solid #ffff55;
}

.boot-menu-options {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boot-menu-row {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr);
  gap: 0.35em;
  align-items: center;
  width: 100%;
  padding: 2px 10px;
  text-align: left;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: inherit;
}

.boot-menu-row.selected {
  color: #fff;
  background: #a80000;
}

.boot-menu-help {
  display: grid;
  gap: 10px;
  width: min(1080px, 100%);
  margin: 14px auto 0;
}

.boot-menu-key-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  color: #fff;
}

.boot-menu-hint {
  margin: 0;
  padding-top: 10px;
  color: #00ffff;
  text-align: center;
  border-top: 3px double #fff;
}

.boot-menu-prompt {
  margin: 0;
  text-align: center;
  color: #fff;
}

.dos-only-screen {
  position: fixed;
  inset: 0;
  display: grid;
  background: #000;
}

/* Windows 98 recovery menu */
.recovery-menu-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #c0c0c0;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: clamp(15px, 1.85vw, 23px);
  line-height: 1.45;
}

.recovery-menu-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 4vh, 44px) clamp(18px, 7vw, 132px) clamp(18px, 3vh, 36px);
  overflow: hidden;
}

.recovery-menu-panel p {
  margin: 0;
}

.recovery-menu-title {
  margin-bottom: 1.4em !important;
}

.recovery-menu-status {
  margin-bottom: 0.8em !important;
  color: #9a9a9a;
}

.recovery-menu-options {
  display: grid;
  gap: 0.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recovery-menu-options button {
  display: block;
  width: fit-content;
  min-width: 0;
  min-height: 0;
  padding: 0 0.5em;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #c0c0c0;
  text-align: left;
  font: inherit;
  white-space: pre;
}

.recovery-menu-options button.selected {
  color: #000;
  background: #c0c0c0;
}

.recovery-menu-choice {
  margin-top: 1.2em !important;
}

.recovery-menu-choice span,
.recovery-scan-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.2em;
  vertical-align: text-bottom;
  background: #c0c0c0;
  animation: recovery-blink 1s steps(1, end) infinite;
}

.recovery-menu-output {
  flex: 1 1 auto;
  min-height: 110px;
  margin-top: 0.85em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0.8em;
  padding-right: 0.7em;
  padding-bottom: 0.45em;
  border-top: 1px solid #555;
  color: #c0c0c0;
  white-space: pre-wrap;
  scrollbar-color: #777 #111;
  scrollbar-width: thin;
}

.recovery-line {
  min-height: 1.45em;
}

.recovery-menu-output::-webkit-scrollbar {
  width: 10px;
}

.recovery-menu-output::-webkit-scrollbar-track {
  background: #111;
}

.recovery-menu-output::-webkit-scrollbar-thumb {
  background: #777;
}

.recovery-status {
  display: inline-block;
  min-width: 10ch;
  font-weight: bold;
}

.recovery-status-bad {
  color: #ff7777;
}

.recovery-status-good,
.recovery-add {
  color: #66ff88;
}

.recovery-menu-footer {
  flex: 0 0 auto;
  margin-top: 0.45em;
  padding-top: 0.45em;
  padding-bottom: 0.12em;
  border-top: 1px solid #555;
  color: #9a9a9a;
  font-size: 0.72em;
  line-height: 1.25;
  white-space: normal;
}

@keyframes recovery-blink {
  50% {
    opacity: 0;
  }
}

.load-failure-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #c0c0c0;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: clamp(15px, 2.15vw, 27px);
  line-height: 1.5;
  cursor: pointer;
}

.load-failure-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6vh 7vw;
}

.load-failure-panel p {
  margin: 0 0 0.45em;
}

.load-failure-lead,
.load-failure-path,
.load-failure-panel > p:nth-last-of-type(2),
.load-failure-panel > p:nth-last-of-type(3) {
  color: #fff;
}

.load-failure-path {
  margin-bottom: 1.6em !important;
  padding-left: 2ch;
}

.load-failure-fault {
  margin: 1em 0 1.6em;
  padding-top: 1em;
  border-top: 1px solid #555;
  color: #9a9a9a;
}

.load-failure-fault p {
  margin-bottom: 0;
}

.load-failure-restart {
  display: flex;
  align-items: center;
  gap: 0.6ch;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  color: #ffd23f;
}

.load-failure-restart i {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: #ffd23f;
  vertical-align: -0.12em;
  animation: recovery-blink 1s steps(1, end) infinite;
}

.shutdown-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 48px;
  text-align: center;
  color: #ffa63f;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: 24px;
  line-height: 1.35;
}

.shutdown-screen p {
  margin: 0 0 12px;
}

.shutdown-screen button {
  margin-top: 16px;
  font-size: 13px;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
}

.shutdown-wait {
  background: #000;
}

.shutdown-wait-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #ffa63f;
  animation: shutdown-fade-in 600ms ease-out;
}

.shutdown-wait-copy p {
  color: #b36f24;
  font-size: 18px;
}

.shutdown-wait-copy h1 {
  margin: 0;
  color: #ffa63f;
  font-size: 44px;
  font-weight: 400;
}

.shutdown-dots::after {
  content: '';
  animation: shutdown-dots 1.4s steps(4, end) infinite;
}

@keyframes shutdown-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

@keyframes shutdown-fade-in {
  from {
    opacity: 0;
  }
}

.crt-off {
  width: 100vw;
  height: 100vh;
  background: #fff;
  animation: crt-collapse 520ms ease-in forwards;
}

@keyframes crt-collapse {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  60% {
    transform: scaleY(0.006);
    opacity: 1;
  }
  82% {
    transform: scaleY(0.004) scaleX(0.4);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.002) scaleX(0.001);
    opacity: 0;
  }
}

.shutdown-safe .shutdown-safe-copy {
  color: #ffa63f;
  font-size: 58px;
  animation: shutdown-flicker-in 900ms steps(6, end);
}

.shutdown-safe .shutdown-safe-copy button {
  margin-top: 28px;
  color: #000;
}

@keyframes shutdown-flicker-in {
  0% { opacity: 0; }
  20% { opacity: 0.9; }
  35% { opacity: 0.2; }
  55% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Startup ScanDisk after an improper shutdown (StartupScanScreen.tsx) */
.startup-scan-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 48px 16px;
  color: #c0c0c0;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 1.5;
  cursor: pointer;
}

.startup-scan-window {
  width: min(760px, 100%);
  color: #c0c0c0;
  background: #030303;
  border: 1px solid #808080;
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px #c0c0c0,
    18px 18px 0 rgba(0, 0, 0, 0.32);
}

.startup-scan-window-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 8px;
  color: #fff;
  background: #000080;
  border-bottom: 1px solid #c0c0c0;
  font-size: 0.78em;
}

.startup-scan-panel {
  display: grid;
  gap: 0.62em;
  padding: clamp(22px, 4vw, 34px);
}

.startup-scan-panel p {
  margin: 0;
}

.startup-scan-product {
  color: #808080;
}

.startup-scan-title {
  margin: 0 0 0.1em;
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
}

.startup-scan-drive-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0.4em 0;
  color: #111;
  background: #808080;
  border: 1px solid #c0c0c0;
}

.startup-scan-drive-card div {
  display: grid;
  gap: 0.15em;
  padding: 0.45em 0.55em;
  background: #c0c0c0;
}

.startup-scan-drive-card span {
  color: #303030;
  font-size: 0.7em;
}

.startup-scan-drive-card strong {
  font-size: 0.82em;
  font-weight: 700;
}

.startup-scan-now {
  margin-top: 0.5em !important;
  color: #fff;
}

.startup-scan-stage {
  min-height: 1.5em;
  color: #66ff88;
}

.startup-scan-blocks {
  display: grid;
  grid-template-columns: repeat(40, minmax(5px, 1fr));
  gap: 2px;
  padding: 4px;
  background: #111;
  border: 1px solid #555;
}

.startup-scan-blocks i {
  display: block;
  height: 14px;
  background: #1c1c1c;
  border: 1px solid #333;
}

.startup-scan-blocks i.is-scanned {
  background: #00a2e8;
  border-color: #47caff #005f9f #005f9f #47caff;
}

.startup-scan-blocks i.is-current {
  background: #66ff88;
  border-color: #d8ffe0 #249846 #249846 #d8ffe0;
  animation: startup-scan-pulse 520ms steps(2, end) infinite;
}

.startup-scan-bar {
  height: 18px;
  margin-top: 0.3em;
  padding: 2px;
  background: #000;
  border: 1px solid #c0c0c0;
}

.startup-scan-bar > i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, #00a2e8 0 10px, #0066b3 10px 20px);
  transition: width 120ms linear;
}

.startup-scan-percent {
  color: #c0c0c0;
}

.startup-scan-report {
  color: #9a9a9a;
  font-size: 0.82em;
}

.startup-scan-hint {
  margin-top: 1em !important;
  color: #ffd23f;
}

@keyframes startup-scan-pulse {
  50% {
    opacity: 0.25;
  }
}

@media (max-width: 680px) {
  .startup-scan-drive-card {
    grid-template-columns: 1fr;
  }

  .startup-scan-blocks {
    grid-template-columns: repeat(20, minmax(5px, 1fr));
  }
}

/* === BIOS setup =========================================================== */

.bios-setup-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #0000a8;
  font-family: "Courier New", Consolas, monospace;
  cursor: default;
}

.bios-setup-screen * {
  cursor: default;
}

.bios-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(10px, 2vh, 22px) clamp(6px, 2.5vw, 28px);
  color: #fff;
  background: #0000a8;
  font-size: clamp(14px, 1.25vw, 20px);
  line-height: 1.3;
}

.bios-title {
  margin: 0 auto 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

.bios-main {
  display: grid;
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
  min-height: 0;
  width: min(1360px, 100%);
  margin: 0 auto;
  border: 3px double #fff;
}

.bios-section-list,
.bios-detail {
  min-height: 0;
}

.bios-section-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
  padding: 18px 14px;
  border-right: 3px double #fff;
  overflow: hidden;
}

.bios-section-column {
  display: grid;
  align-content: start;
  gap: 2px;
}

.bios-section-item {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: 0.35em;
  min-width: 0;
  padding: 0 0.35em;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bios-section-item.selected,
.bios-row.selected {
  color: #fff;
  background: #a80000;
}

.bios-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px 18px 14px;
  overflow: hidden;
}

.bios-detail h1 {
  margin: 0 0 12px;
  color: #ffff55;
  font-size: 1em;
  text-align: center;
}

.bios-table {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: auto;
}

.bios-row {
  display: grid;
  grid-template-columns: minmax(18ch, 1fr) minmax(16ch, 0.9fr);
  gap: 18px;
  width: 100%;
  padding: 1px 6px;
  overflow: hidden;
  color: inherit;
  font: inherit;
}

.bios-row strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bios-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bios-help {
  display: grid;
  gap: 10px;
  width: min(1080px, 100%);
  margin: 14px auto 0;
  color: #ffff55;
}

.bios-key-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
}

.bios-help p,
.bios-help-text {
  margin: 0;
}

.bios-help-text {
  padding-top: 10px;
  color: #00ffff;
  text-align: center;
  border-top: 3px double #fff;
}

.bios-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  color: #fff;
}

.bios-action-key {
  padding: 0 4px;
  color: #fff;
}

.bios-action-key.disabled {
  color: #8080d0;
}

/* === Message boxes ====================================================== */

.message-box-layer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
}

.message-box {
  width: min(420px, calc(100vw - 32px));
  box-shadow: 1px 1px 0 #0a0a0a, 3px 3px 8px rgba(0, 0, 0, 0.35);
}

.message-box-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.message-box-copy {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.message-box-copy p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.message-detail {
  color: #444;
  font-size: 11px;
}
/* === Boot disclaimer (shown every boot) ================================ */

.disclaimer-layer {
  position: fixed;
  inset: 0;
  z-index: 4500; /* above message boxes (4000) */
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
}

.disclaimer-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 1px 1px 0 #0a0a0a, 3px 3px 12px rgba(0, 0, 0, 0.5);
}

.disclaimer-body {
  display: grid;
  gap: 12px;
  padding: 14px;
  min-height: 0;
  overflow: auto;
}

/* Brand strip: Microsoft + Windows marks under a "Not Affiliated" stamp. */
.disclaimer-brands {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  padding: 16px 12px;
  border: 2px inset #fff;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 6px,
      transparent 6px,
      transparent 12px
    ),
    #fff;
  overflow: hidden;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 7px;
}

.brand-word {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
}

.brand-microsoft .brand-word {
  color: #5e5e5e;
  font-weight: 400;
}

.brand-windows img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}

.brand-windows .brand-word {
  color: #156fc0;
  font-weight: 700;
  font-style: italic;
}

.brand-windows .brand-word sup {
  font-size: 10px;
  font-style: normal;
}

.disclaimer-stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
  padding: 3px 14px;
  border: 3px solid #c5240f;
  border-radius: 4px;
  color: #c5240f;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.35);
  opacity: 0.88;
  pointer-events: none;
  white-space: nowrap;
}

.disclaimer-copy {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.disclaimer-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #000080;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
}

.disclaimer-copy p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.disclaimer-credit {
  margin-bottom: 0;
  color: #444;
  font-size: 11px;
}

.disclaimer-actions {
  justify-content: center;
}
.safety-training-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #000;
  background: #008080;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  cursor: default;
}

.safety-training-window {
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  max-height: 100%;
  padding: 3px;
  background: #c0c0c0;
  box-shadow:
    inset 1px 1px #dfdfdf,
    inset -1px -1px #404040,
    inset 2px 2px #fff,
    inset -2px -2px #808080;
}

.safety-training-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 5px 4px 7px;
  color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0);
  font-weight: 700;
}

.safety-training-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.safety-training-icon,
.safety-training-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffcc00;
  color: #000;
  font-weight: 900;
}

.safety-training-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}

.safety-training-controls {
  display: flex;
  gap: 3px;
}

.safety-training-controls span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 16px;
  color: #000;
  background: #c0c0c0;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #404040, inset 2px 2px #dfdfdf, inset -2px -2px #808080;
  font-size: 11px;
}

.safety-training-menu {
  display: flex;
  gap: 2px;
  padding: 3px 4px;
  font-size: 13px;
}

.safety-training-menu span {
  padding: 2px 8px;
}

.safety-training-address {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 7px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  font-size: 13px;
}

.safety-training-address div {
  flex: 1;
  padding: 4px 7px;
  background: #fff;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #404040;
}

.safety-training-document {
  flex: 1;
  min-height: 0;
  margin: 6px 3px 3px;
  overflow: auto;
  background: #fff;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #404040;
}

.safety-training-hero {
  display: flex;
  gap: 18px;
  padding: 20px 24px;
  background: #fffbdd;
  border-bottom: 1px solid #e3d27a;
}

.safety-training-warn {
  flex: none;
  width: 48px;
  height: 48px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: 10px;
  font-size: 26px;
}

.safety-training-hero h1 {
  margin: 0;
  color: #000;
  font-size: 30px;
  line-height: 1.05;
}

.safety-training-hero p {
  max-width: 820px;
  margin: 8px 0 0;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.safety-training-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 24px 0;
}

.safety-training-card {
  padding: 16px 18px;
  border: 2px groove #dfdfdf;
}

.safety-training-card h2 {
  margin: 0 0 12px;
  font-size: 17px;
}

.safety-training-card p,
.safety-training-steps p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.safety-training-card b {
  flex: none;
  min-width: 24px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
}

.safety-training-do {
  background: #f3f8f3;
}

.safety-training-do h2 {
  color: #1a6b2e;
}

.safety-training-do b {
  background: #1a8a3c;
}

.safety-training-dont {
  background: #fbf4f4;
}

.safety-training-dont h2 {
  color: #a32020;
}

.safety-training-dont b {
  background: #c0271f;
}

.safety-training-recovery {
  margin: 20px 24px 24px;
  background: #f3f6fb;
}

.safety-training-recovery h2 {
  color: #1c3f73;
}

.safety-training-recovery b {
  width: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: #1c3f73;
}

.safety-training-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}

.safety-training-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 8px 4px;
}

.safety-training-actions button {
  min-width: 170px;
  padding: 5px 14px;
  color: #000;
  background: #c0c0c0;
  border: 0;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #404040, inset 2px 2px #dfdfdf, inset -2px -2px #808080;
  font: inherit;
}

.safety-training-actions button.default {
  font-weight: 700;
}

.safety-training-status {
  display: flex;
  gap: 6px;
  padding: 3px;
}

.safety-training-status span {
  flex: 1;
  padding: 3px 10px;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
  font-size: 12px;
}

@media (max-width: 760px) {
  .safety-training-grid,
  .safety-training-steps {
    grid-template-columns: 1fr;
  }

  .safety-training-hero {
    padding: 16px;
  }

  .safety-training-hero h1 {
    font-size: 23px;
  }
}