/*! 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(/static/ms_sans_serif-C3pax6mQ.woff) format("woff");src:url(/static/ms_sans_serif-Du8rjN1q.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(/static/ms_sans_serif_bold-B8yxhAcs.woff) format("woff");src:url(/static/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 *//*
  Custom styles for the shell (desktop + taskbar).
  98.css handles standard controls like buttons and windows. This file only
  covers what 98.css doesn't have: the full-screen layout, the taskbar, the
  Start button, and the tray.
*/

/* Make the page behave like a monitor: fill the viewport, no scrollbars,
   no default page margin (98.css adds 8px to body). */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* The screen stacks the desktop on top of the taskbar. The desktop takes
   whatever height is left over. */
#screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: none;
  /* Clicking around a desktop shouldn't highlight text like a web page. */
  user-select: none;
}

.desktop {
  flex: 1;
  position: relative; /* windows and icons are positioned inside it */
  /* Anything dragged past the edge is cut off, like the edge of a monitor.
     At the bottom this makes windows slide behind the taskbar.
     "clip" (unlike "hidden") also stops the browser from ever scrolling it. */
  overflow: clip;
  /* Keeps windows' z-index stacking inside the desktop, so no window can
     ever be drawn over the taskbar or (later) the Start menu. */
  isolation: isolate;
}

/* ---------- Desktop icons ---------- */

/* One column down the left side, wrapping into a second column if the
   screen is too short. The column itself can't be clicked (only the icons
   can), so clicks between icons land on the desktop and deselect.
   Windows are drawn on top of it (they get z-index 1 and up). */
.desktop-icons {
  position: absolute;
  inset: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  pointer-events: none;
}

/* One grid cell. Win98 spaces desktop icons about 75px apart. Only the
   picture and the label inside it react to the mouse, like Win98. */
.desktop-icon {
  width: 74px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none; /* the label shows focus instead (below) */
}

.desktop-icon-image,
.desktop-icon-label {
  pointer-events: auto;
}

.desktop-icon-image {
  position: relative; /* for the tint layer below */
  margin-top: 2px;
  width: 32px;
  height: 32px;
}

.desktop-icon-image img {
  display: block;
  image-rendering: pixelated;
}

.desktop-icon-label {
  margin-top: 4px;
  max-width: 70px;
  padding: 0 1px 1px;
  color: #ffffff;
  text-align: center;
  line-height: 13px;
  overflow-wrap: break-word;
  /* Long names stop after two lines with "..." until selected. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Selected (while the desktop is active): Win98 covers the picture with a
   checkerboard of dark blue pixels, cut to the icon's shape with a mask,
   and gives the label a dark blue background and a dotted focus box. */
.desktop-icon-image::after {
  content: '';
  position: absolute;
  inset: 0;
  display: none;
  background: repeating-conic-gradient(#000080 0% 25%, transparent 0% 50%) 0 0 /
    2px 2px;
  -webkit-mask: var(--icon-url) 0 0 / 100% 100%;
  mask: var(--icon-url) 0 0 / 100% 100%;
}

.desktop-icons.is-active .desktop-icon.is-selected .desktop-icon-image::after {
  display: block;
}

.desktop-icons.is-active .desktop-icon.is-selected .desktop-icon-label {
  background: #000080;
  outline: 1px dotted #ffff7f;
  outline-offset: -1px;
  -webkit-line-clamp: unset; /* show the whole name */
}

/* ---------- Windows ---------- */

/* 98.css draws the frame (.window). This adds what a movable window needs. */
.app-window {
  position: absolute;
  box-sizing: border-box; /* width/height include the frame */
  display: flex;
  flex-direction: column;
}

.app-window .title-bar {
  /* Stops touch screens from scrolling/zooming the page during a drag. */
  touch-action: none;
  /* Drawn above the resize handles (see below), so the corner handles
     never cover the _ [] X buttons. */
  position: relative;
  z-index: 2;
}

/* Hidden while minimized; its taskbar button brings it back. */
.app-window.is-minimized {
  display: none;
}

/* While a caption animation flies into place, the window holds its place
   but isn't drawn yet (see caption-animation.js). */
.app-window.is-animating {
  visibility: hidden;
}

/* The flying title bar for the minimize/restore animation. It's drawn over
   everything, including the taskbar, and can't be clicked. */
.caption-animation {
  position: fixed;
  z-index: 2147483646; /* just under the drag overlay */
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}

.caption-animation .title-bar-text {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Resize handles ---------- */

/* Invisible strips along the window's edges (added by window-resize.js).
   The title bar and body are drawn above them, so only the frame and the
   gutter around the body can be grabbed. That makes each corner an L-shaped
   strip along the frame, like Win98. */
.resize-handle {
  position: absolute;
  z-index: 1;
  touch-action: none;
}

.resize-n,
.resize-s {
  left: 0;
  right: 0;
  height: 4px;
  cursor: ns-resize;
}
.resize-n {
  top: 0;
}
.resize-s {
  bottom: 0;
}

.resize-e,
.resize-w {
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
}
.resize-e {
  right: 0;
}
.resize-w {
  left: 0;
}

/* Corners come after the edges, so they win where they overlap. */
.resize-ne,
.resize-nw,
.resize-se,
.resize-sw {
  width: 16px;
  height: 16px;
}
.resize-ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}
.resize-sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}
.resize-nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}
.resize-se {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

/* A maximized window can't be resized, so its handles go away. */
.app-window.is-maximized .resize-handle {
  display: none;
}

.app-window .title-bar-text {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

/* Long titles end in "..." instead of pushing the buttons out. */
.app-window .title-bar-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title-bar-icon {
  flex-shrink: 0;
  image-rendering: pixelated;
}

/* Win98 dims the title text of unfocused windows to gray. */
.title-bar.inactive .title-bar-text {
  color: #c0c0c0;
}

/* The app's area fills the rest of the window and scrolls if needed. */
.app-window .window-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* Above the resize handles, like the title bar. */
  position: relative;
  z-index: 2;
}

/* Program windows draw their insides edge to edge (menu bar, toolbars,
   status bar), like Win98 programs. Message boxes keep 98.css's margin. */
.app-window:not(.is-dialog) .window-body {
  margin: 1px 0 0;
}

/* ---------- Menus (menu.js) ---------- */

.menu-bar {
  display: flex;
  padding: 1px 0;
}

.menu-bar-title {
  padding: 2px 6px 3px;
}

/* The open menu's title looks pressed in, like Win98. */
.menu-bar-title.is-open {
  box-shadow:
    inset 1px 1px #808080,
    inset -1px -1px #ffffff;
}

/* The drop-down list. It lives on the page itself (outside #screen), so it
   sets its own font and sits above windows and the taskbar. */
.menu-dropdown {
  position: fixed;
  z-index: 2147483000; /* below the caption animation and drag overlay */
  display: grid;
  /* Columns: check mark, label, shortcut, submenu arrow. Each row lines
     up with these through "subgrid" below. */
  grid-template-columns: 18px auto auto 14px;
  padding: 2px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: none;
  color: #000000;
  user-select: none;
  white-space: nowrap;
  animation: menu-slide 0.12s linear;
}

/* Win98 menus slide down as they open. */
@keyframes menu-slide {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Submenus slide out to the right instead. */
.menu-dropdown.is-submenu {
  animation-name: menu-slide-right;
}

@keyframes menu-slide-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-dropdown,
  .start-menu {
    animation: none;
  }
}

.menu-item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  height: 17px;
}

/* The highlighted item: white text on dark blue. Win98 highlights
   disabled items too, keeping their text gray. An item whose submenu is
   open stays highlighted. */
.menu-item:hover,
.menu-item.is-open {
  background: #000080;
  color: #ffffff;
}

.menu-item.is-disabled {
  color: #808080;
  text-shadow: 1px 1px #ffffff; /* the "engraved" gray look */
}

.menu-item.is-disabled:hover {
  text-shadow: none;
}

.menu-item-shortcut {
  padding-left: 20px;
}

/* The check mark and submenu arrow are small black images used as masks,
   so they take the text color (black, white when highlighted, or gray). */
.menu-item-check.is-checked,
.menu-item-arrow.has-submenu {
  align-self: stretch;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3c!--%20Menu%20glyph%20'menu-check',%20drawn%20in%20black;%20CSS%20recolors%20it%20with%20a%20mask%20to%20match%20the%20text.%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20viewBox='0%200%207%207'%20shape-rendering='crispEdges'%3e%3cg%20fill='%23000000'%3e%3crect%20x='6'%20y='0'%20width='1'%20height='1'/%3e%3crect%20x='5'%20y='1'%20width='2'%20height='1'/%3e%3crect%20x='0'%20y='2'%20width='1'%20height='1'/%3e%3crect%20x='4'%20y='2'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='3'%20width='2'%20height='1'/%3e%3crect%20x='3'%20y='3'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='4'%20width='5'%20height='1'/%3e%3crect%20x='1'%20y='5'%20width='3'%20height='1'/%3e%3crect%20x='2'%20y='6'%20width='1'%20height='1'/%3e%3c/g%3e%3c/svg%3e") center no-repeat;
  mask: url("data:image/svg+xml,%3c!--%20Menu%20glyph%20'menu-check',%20drawn%20in%20black;%20CSS%20recolors%20it%20with%20a%20mask%20to%20match%20the%20text.%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20viewBox='0%200%207%207'%20shape-rendering='crispEdges'%3e%3cg%20fill='%23000000'%3e%3crect%20x='6'%20y='0'%20width='1'%20height='1'/%3e%3crect%20x='5'%20y='1'%20width='2'%20height='1'/%3e%3crect%20x='0'%20y='2'%20width='1'%20height='1'/%3e%3crect%20x='4'%20y='2'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='3'%20width='2'%20height='1'/%3e%3crect%20x='3'%20y='3'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='4'%20width='5'%20height='1'/%3e%3crect%20x='1'%20y='5'%20width='3'%20height='1'/%3e%3crect%20x='2'%20y='6'%20width='1'%20height='1'/%3e%3c/g%3e%3c/svg%3e") center no-repeat;
}

.menu-item-arrow.has-submenu {
  -webkit-mask-image: url("data:image/svg+xml,%3c!--%20Menu%20glyph%20'menu-arrow',%20drawn%20in%20black;%20CSS%20recolors%20it%20with%20a%20mask%20to%20match%20the%20text.%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4'%20height='7'%20viewBox='0%200%204%207'%20shape-rendering='crispEdges'%3e%3cg%20fill='%23000000'%3e%3crect%20x='0'%20y='0'%20width='1'%20height='1'/%3e%3crect%20x='0'%20y='1'%20width='2'%20height='1'/%3e%3crect%20x='0'%20y='2'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='3'%20width='4'%20height='1'/%3e%3crect%20x='0'%20y='4'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='5'%20width='2'%20height='1'/%3e%3crect%20x='0'%20y='6'%20width='1'%20height='1'/%3e%3c/g%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3c!--%20Menu%20glyph%20'menu-arrow',%20drawn%20in%20black;%20CSS%20recolors%20it%20with%20a%20mask%20to%20match%20the%20text.%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4'%20height='7'%20viewBox='0%200%204%207'%20shape-rendering='crispEdges'%3e%3cg%20fill='%23000000'%3e%3crect%20x='0'%20y='0'%20width='1'%20height='1'/%3e%3crect%20x='0'%20y='1'%20width='2'%20height='1'/%3e%3crect%20x='0'%20y='2'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='3'%20width='4'%20height='1'/%3e%3crect%20x='0'%20y='4'%20width='3'%20height='1'/%3e%3crect%20x='0'%20y='5'%20width='2'%20height='1'/%3e%3crect%20x='0'%20y='6'%20width='1'%20height='1'/%3e%3c/g%3e%3c/svg%3e");
}

.menu-separator {
  grid-column: 1 / -1;
  margin: 3px 1px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}

.menu-item-label {
  padding-right: 8px;
}

/* Lists with 16x16 icons (like Start menu submenus) get taller rows. */
.menu-dropdown.has-icons {
  grid-template-columns: 24px auto auto 14px;
}

.menu-dropdown.has-icons .menu-item {
  height: 20px;
}

.menu-item-icon {
  display: flex;
  justify-content: center;
}

.menu-item-icon img {
  image-rendering: pixelated;
}

/* The Start menu's own list, with 32x32 icons. */
.menu-dropdown.is-large {
  grid-template-columns: 40px minmax(100px, auto) auto 14px;
}

.menu-dropdown.is-large .menu-item {
  height: 34px;
}

/* ---------- Start menu (start-menu.js) ---------- */

/* The whole menu: the banner and the list, in one raised frame, sitting
   on the taskbar (start-menu.js sets "bottom"). */
.start-menu {
  position: fixed;
  left: 0;
  z-index: 2147483000; /* same layer as other menus */
  display: flex;
  padding: 3px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  user-select: none;
  /* It slides up out of the taskbar. */
  animation: start-menu-slide 0.12s linear;
}

@keyframes start-menu-slide {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* The list inside sits in the menu's frame, so it drops its own. */
.start-menu .menu-dropdown {
  position: static;
  padding: 0;
  box-shadow: none;
  animation: none;
}

/* The blue strip down the left, with "Windows98" reading bottom to top. */
.start-menu-banner {
  flex-shrink: 0;
  width: 21px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(to top, #000080, #1084d0);
}

.start-menu-banner-text {
  /* Vertical text runs top to bottom; turning it around makes it read
     bottom to top, like Win98's. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-top: 6px; /* after turning, this is the space at the bottom */
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 21px;
  white-space: nowrap;
}

.start-menu-banner-text b {
  font-weight: 900;
}

/* While the menu is open, the Start button stays pushed in, with the
   dotted focus box, as in Win98. */
.start-button.is-pressed {
  box-shadow:
    inset -1px -1px #ffffff,
    inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #808080;
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

.start-button.is-pressed > * {
  transform: translate(1px, 1px);
}

/* ---------- Shut Down (shut-down.js) ---------- */

.shut-down {
  padding: 6px 6px 2px;
}

.shut-down-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.shut-down-content img {
  image-rendering: pixelated;
}

.shut-down-content p {
  margin: 4px 0 12px;
}

.shut-down-buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

/* The black screen for Shut down, Restart, and Stand by. It covers
   everything, and the pointer disappears, as if the computer were off. */
.power-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  cursor: none;
  user-select: none;
}

/* "It's now safe to turn off your computer." in Win98's orange. */
.power-screen p {
  margin: 0;
  color: #ff8800;
  font:
    bold 30px Arial,
    sans-serif;
  text-align: center;
  white-space: pre-line; /* keeps the line break in the message */
}

/* ---------- Message boxes (dialog.js) ---------- */

/* Icon and text side by side, the OK button centered underneath. */
.message-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 4px 2px;
}

.message-box-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.message-box-content img {
  flex-shrink: 0;
  image-rendering: pixelated;
}

.message-box-content p {
  margin: 0;
  max-width: 260px;
}

/* The invisible sheet laid over the page during a drag (see window.js). */
.drag-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* the highest z-index allowed */
}

/* ---------- Taskbar ---------- */

.taskbar {
  /* Win98's taskbar is 28px tall: a 2px light bevel on top, then 2px of
     padding around 22px-tall buttons. */
  height: 28px;
  box-sizing: border-box;
  padding: 4px 2px 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #c0c0c0;
  box-shadow:
    inset 0 1px #dfdfdf,
    inset 0 2px #ffffff;
}

/* The space between Start and the tray, where window buttons will go. */
.task-buttons {
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 0;
}

/* One button per open window. They're 160px wide and shrink to share the
   space when lots of windows are open. */
.task-button {
  flex: 0 1 160px;
  min-width: 0;
  min-height: 0;
  height: 22px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  /* Same 98.css text trick undone as on the Start button. */
  color: #000000;
  text-shadow: none;
}

.task-button:not(:disabled):active {
  text-shadow: none;
}

/* Taskbar buttons don't show the dotted focus box that dialog buttons do. */
.task-button:focus {
  outline: none;
}

.task-button img {
  flex-shrink: 0;
  image-rendering: pixelated;
}

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

/* The focused window's button: pressed in, bold text, and Win98's
   checkerboard fill of white and gray pixels. */
.task-button.is-focused {
  font-weight: bold;
  background: repeating-conic-gradient(#ffffff 0% 25%, #c0c0c0 0% 50%) 0 0 /
    2px 2px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #808080;
}

/* Pressed buttons nudge their contents 1px down and right. */
.task-button.is-focused > * {
  transform: translate(1px, 1px);
}

/* ---------- Start button ---------- */

.start-button {
  /* Undo the 98.css defaults meant for regular dialog buttons (75px wide,
     transparent text drawn with a text-shadow). */
  min-width: 0;
  min-height: 0;
  height: 22px;
  padding: 0 4px 0 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #000000;
  text-shadow: none;
  font-weight: bold;
}

.start-button img {
  display: block;
  /* Keep the pixel art sharp instead of blurred if it's ever scaled. */
  image-rendering: pixelated;
}

/* When pressed, Win98 nudges the whole contents 1px down and right. */
.start-button:not(:disabled):active {
  text-shadow: none;
}

.start-button:active > * {
  transform: translate(1px, 1px);
}

/* ---------- Tray (bottom-right corner) ---------- */

.tray {
  height: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  /* A sunken 1px border: dark on top/left, white on bottom/right. */
  box-shadow:
    inset -1px -1px #ffffff,
    inset 1px 1px #808080;
}

.tray-clock {
  white-space: nowrap;
  cursor: default;
}
/*
  Styles for the Resume app's Word 97 window (resume.js, word-ui.js).
  The page geometry here (816px wide, 58px side margins) must match
  PAGE_WIDTH and PAGE_MARGIN in word-ui.js, which the ruler uses.
*/

.word {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Menu bar ---------- */

.word .menu-bar {
  align-items: center;
}

/* Office 97 menu titles rise slightly when pointed at. */
.word .menu-bar-title:hover:not(.is-open) {
  box-shadow:
    inset -1px -1px #808080,
    inset 1px 1px #ffffff;
}

.word-document-icon {
  margin: 0 3px 0 2px;
  image-rendering: pixelated;
}

/* The document's own small _ [] X buttons, pushed to the right end. */
.word-document-controls {
  margin-left: auto;
  padding-right: 2px;
}

/* ---------- Toolbars ---------- */

/* Each toolbar is only as wide as its buttons, like Office 97. */
.word-toolbars {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 1px 0;
}

.word-toolbar {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: 26px;
  box-sizing: border-box;
  padding: 1px 3px 1px 2px;
  overflow: hidden;
  box-shadow:
    inset -1px -1px #808080,
    inset 1px 1px #ffffff;
}

/* Two raised bars at the left end of the toolbar. */
.word-toolbar-grip {
  flex-shrink: 0;
  display: flex;
  gap: 1px;
  margin-right: 3px;
}

.word-toolbar-grip::before,
.word-toolbar-grip::after {
  content: '';
  width: 3px;
  height: 20px;
  box-shadow:
    inset -1px -1px #808080,
    inset 1px 1px #ffffff;
}

.word-toolbar-separator {
  flex-shrink: 0;
  width: 2px;
  height: 20px;
  margin: 0 3px;
  box-shadow:
    inset 1px 0 #808080,
    inset -1px 0 #ffffff;
}

/* Flat until pointed at, then raised; pressed in while clicked. */
.word-toolbar-button {
  flex-shrink: 0;
  position: relative;
  width: 23px;
  height: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font:
    bold 13px 'Times New Roman',
    Times,
    serif;
}

.word-toolbar-button img {
  image-rendering: pixelated;
}

.word-toolbar-button:hover {
  box-shadow:
    inset -1px -1px #808080,
    inset 1px 1px #ffffff;
}

.word-toolbar-button:active,
.word-toolbar-button.is-latched {
  box-shadow:
    inset 1px 1px #808080,
    inset -1px -1px #ffffff;
}

/* A setting that's on: pressed in, with a checkerboard of white and gray
   (the same look as the focused taskbar button). */
.word-toolbar-button.is-latched {
  background: repeating-conic-gradient(#ffffff 0% 25%, #c0c0c0 0% 50%) 0 0 /
    2px 2px;
}

/* Pressed contents nudge 1px down and right, like every Win98 button. */
.word-toolbar-button:active > *,
.word-toolbar-button.is-latched > * {
  transform: translate(1px, 1px);
}

.word-toolbar-button.is-italic {
  font-style: italic;
}

.word-toolbar-button.is-underline {
  text-decoration: underline;
}

/* Font Color: an "A" over a red bar. */
.word-toolbar-button.is-font-color {
  align-items: flex-start;
  padding-top: 1px;
}

.word-toolbar-button.is-font-color::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 3px;
  background: #ff0000;
}

/* The drop-down boxes (font, size, zoom): a sunken white field with an
   arrow button, like 98.css's select. */
.word-combo {
  flex-shrink: 0;
  display: flex;
  height: 21px;
  box-sizing: border-box;
  margin: 0 2px;
  padding: 2px;
  background: #ffffff;
  box-shadow:
    inset -1px -1px #ffffff,
    inset 1px 1px #808080,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

.word-combo-value {
  flex: 1;
  min-width: 0;
  padding: 0 2px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 17px;
}

.word-combo-arrow {
  flex-shrink: 0;
  width: 16px;
  background:
    url("data:image/svg+xml,%3c!--%20Menu%20glyph%20'combo-arrow',%20drawn%20in%20black;%20CSS%20recolors%20it%20with%20a%20mask%20to%20match%20the%20text.%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='4'%20viewBox='0%200%207%204'%20shape-rendering='crispEdges'%3e%3cg%20fill='%23000000'%3e%3crect%20x='0'%20y='0'%20width='7'%20height='1'/%3e%3crect%20x='1'%20y='1'%20width='5'%20height='1'/%3e%3crect%20x='2'%20y='2'%20width='3'%20height='1'/%3e%3crect%20x='3'%20y='3'%20width='1'%20height='1'/%3e%3c/g%3e%3c/svg%3e") center no-repeat,
    #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #ffffff,
    inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
}

/* ---------- Ruler ---------- */

.word-ruler {
  flex-shrink: 0;
  position: relative;
  height: 20px;
  overflow: hidden;
  border-top: 1px solid #808080;
}

/* White over the text area, gray over the margins. word-ui.js slides it
   sideways to stay lined up with the page. */
.word-ruler-strip {
  position: absolute;
  top: 2px;
  left: 0;
  height: 16px;
  background: linear-gradient(
    to right,
    #808080 var(--margin),
    #ffffff var(--margin),
    #ffffff calc(100% - var(--margin)),
    #808080 calc(100% - var(--margin))
  );
  box-shadow:
    inset 1px 1px #808080,
    inset -1px -1px #dfdfdf;
}

.word-ruler-tick {
  position: absolute;
  top: 7px;
  width: 1px;
  height: 2px;
  background: #000000;
}

.word-ruler-tick.is-half {
  top: 6px;
  height: 4px;
}

.word-ruler-number {
  position: absolute;
  top: 1px;
  width: 12px;
  margin-left: -6px;
  text-align: center;
  line-height: 14px;
}

/* Indent markers: an hourglass with a box at the left margin, a triangle
   at the right. Small inline pictures, outlined in black. */
.word-ruler-marker {
  position: absolute;
  top: 0;
  width: 9px;
  height: 16px;
  margin-left: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0.5 0.5h8l-4 4z M0.5 10.5l4-4 4 4z' fill='%23c0c0c0' stroke='%23000'/%3E%3Crect x='0.5' y='10.5' width='8' height='4' fill='%23c0c0c0' stroke='%23000'/%3E%3C/svg%3E")
    no-repeat;
}

.word-ruler-marker.is-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0.5 14.5l4-4 4 4z' fill='%23c0c0c0' stroke='%23000'/%3E%3C/svg%3E");
}

/* ---------- The document ---------- */

/* Word 97's dark gray backdrop around the page in Page Layout view. */
.word-document {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative; /* the ruler measures the page from here */
  background: #808080;
}

/* As wide as the page plus padding, and centered when there's room.
   When the window is narrower, it scrolls with the padding intact. */
.word-page-holder {
  width: max-content;
  margin: 0 auto;
  padding: 12px 14px 18px;
}

/* One sheet of Letter paper, 8.5" x 11" at 96 pixels per inch. */
.word-page {
  width: 816px;
  min-height: 1056px;
  box-sizing: border-box;
  padding: 38px 58px;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 2px 2px 0 #000000; /* a hard shadow, as Word drew it */
  /* Document text, unlike the rest of the desktop, can be selected and
     copied (the I-beam cursor says so). */
  user-select: text;
  cursor: text;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.2;
  color: #000000;
  -webkit-font-smoothing: auto;
}

/* Word 97 showed selected text as white on black. */
.word-page ::selection {
  background: #000000;
  color: #ffffff;
}

.word-page a {
  color: #0000ff;
}

.resume-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 8px;
  margin-bottom: 18px;
  border-bottom: 3px solid #000000;
}

.word-page h1 {
  margin: 0;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26pt;
  font-weight: 900;
  line-height: 1.15;
}

.resume-role {
  margin: 0;
  font-size: 15pt;
}

.resume-contact {
  margin: 0;
  text-align: right;
  font-weight: bold;
}

.resume-summary {
  margin: 0 0 16px;
  text-align: justify;
}

.word-page h2 {
  margin: 14px 0 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid #808080;
  font-size: 12pt;
  text-transform: uppercase;
}

.word-page h3 {
  margin: 8px 0 4px;
  font-size: 12pt;
}

.word-page ul {
  margin: 0 0 6px;
  padding-left: 40px;
}

.word-page li {
  margin-bottom: 4px;
}

.resume-school {
  margin: 8px 0 4px;
  font-size: 12pt;
  font-weight: bold;
  text-decoration: underline;
}

.resume-education {
  margin: 0 0 4px;
}

.resume-skills {
  margin: 0 0 10px;
}

/* ---------- Status bar ---------- */

.word-status-bar {
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
}

.word-status-bar .status-bar-field {
  overflow: hidden;
}

.word-status-bar .is-dim {
  color: #808080;
}

/* ---------- Printing ---------- */

/* File > Print prints only the page, at full size, without the desktop
   or the Word window around it. */
@media print {
  @page {
    size: letter;
    margin: 0;
  }

  body * {
    visibility: hidden;
  }

  .word-page,
  .word-page * {
    visibility: visible;
  }

  .word-page {
    position: fixed;
    left: 0;
    top: 0;
    border: none;
    box-shadow: none;
  }
}