/*! 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 *//* Chrome is MS Sans Serif at 11px, 13px under a coarse pointer. Page content is
   Times New Roman at 16px. Mono is Courier New. There is nothing soft anywhere:
   1px hard borders, flat fills, no rounding above 2px.

   The face is 'Pixelated MS Sans Serif' first - the bitmap face 98.css ships
   and the browser really loads - then 'MS Sans Serif' for a machine that has
   the real thing, then Tahoma, then Geneva. That order is what the tests
   enforce (bevel.test.js reads it back off the rule that turns antialiasing
   off, and the browser harness reads body's computed first family), and the
   whole sheet writes it the same way. It said Tahoma first here and in five
   rules below for a long time. On body and on the shared control rule that was
   dead text, beaten further down the sheet by the Pixelated stack; on the
   three that were specific enough to win - the construction band, the mail
   headers and the minefield squares - it really did set a second face, in a
   sheet whose whole claim is that it has three and knows which is which. */

/* No dark mode in 1996. Light-only stops browsers auto-darkening the page or
   drawing dark form controls. */
:root {
  color-scheme: only light;

  /* The five surface colours the whole chrome is built from. Every bevel on
     this site is one of three recipes over these and nothing else. */
  --surface: #c0c0c0;
  --surface-light: #dfdfdf;
  --surface-hilight: #ffffff;
  --surface-shadow: #808080;
  --surface-dark: #000000;

  /* The ink for a note that is not the thing you came to read: a hint under a
     control, a count, an empty-folder line. Nine rules wrote #404040 for this,
     which is on no palette here - not one of the 216, not one of the sixteen,
     not a 98.css inheritance. #333333 is the nearest value that is, and it is
     nearer than #666666 by two thirds. It stays clearly darker than the
     #808080 the sheet already spends on disabled text, so a hint still reads
     as text somebody meant rather than as something switched off. */
  --ink-dim: #333333;

  /* 34px on a mouse, the height it was; grown on a finger so controls reach
     44 by 44. Everything above the taskbar measures itself from this. */
  --taskbar-h: 34px;

  /* The one gradient this site is allowed: the active titlebar ramp. Named,
     so any other gradient is visibly reaching for what is not permitted. */
  --titlebar-active: linear-gradient(90deg, #000080, #1084d0);
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #008080;
  color: #000000;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
}

.window,
.window-body,
button,
input,
select,
textarea,
label,
.status-bar {
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
}

/* Colours written out, not inherited: an undeclared colour is what forced
   dark mode reaches for first. 98.css covers only the backgrounds. */
input,
select,
textarea,
option {
  color: #000000;
}

.window,
.window-body,
label,
.status-bar,
.status-bar-field {
  color: #000000;
}

/* Canvases are painted edge to edge before they are shown, but declare the
   ground anyway so nothing of the user agent's shows through a slow frame. */
canvas {
  background-color: #c0c0c0;
}

.starfield {
  background-color: #000000;
}

/* The four tenths of a second a program spends coming off the drive. A pause
   with nothing saying why is a hang; this is what the period said instead. */
.desktop.launching, .desktop.launching * { cursor: wait; }

.desktop {
  position: relative;
  min-height: 100%;
  height: 100%;
  background: #008080;
  box-sizing: border-box;
  overflow: hidden;
}

/* ---------- dialogs ---------- */

.center-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--taskbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
  pointer-events: none;
  z-index: 20;
}

.center-stack > * {
  pointer-events: auto;
}

.dialog-connect {
  width: 320px;
}

.dialog-progress {
  width: 340px;
}

.dialog-alert,
.dialog-error {
  width: 340px;
}

.service-name {
  margin: 0 0 8px 0;
  font-size: 13px;
}

.dialog-buttons {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.dialog-buttons button {
  min-width: 74px;
}

.alert-body {
  margin: 4px 0;
  line-height: 1.45;
}

.error-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.icon-error {
  flex: 0 0 auto;
}

.modal-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.speaker-warning {
  margin-top: 14px;
  color: #ffff00;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}

.blink {
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* two computers talking to each other */

.connect-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.two-computers {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.box-left,
.box-right {
  display: block;
  width: 12px;
  height: 12px;
  background: #c0c0c0;
  border: 1px solid #000000;
}

.wire {
  position: relative;
  display: block;
  width: 40px;
  height: 12px;
}

.wire::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 40px;
  height: 1px;
  background: #000000;
}

.wire-dot {
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 4px;
  background: #000080;
  animation: wire-travel 1.2s steps(8) infinite;
}

@keyframes wire-travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(36px);
  }
}

.connect-text {
  margin: 0;
  font-size: 11px;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  right: 12px;
  bottom: 92px;
  background: #ffffcc;
  border: 1px solid #000000;
  padding: 4px 8px;
  font-size: 11px;
  z-index: 60;
}

.tell-wrap {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  right: 0;
  bottom: 22px;
  white-space: nowrap;
  background: #ffffcc;
  border: 1px solid #000000;
  padding: 2px 5px;
  font-size: 11px;
}

/* ---------- voyager ---------- */

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

.browser-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 2px;
}

.menu-bar {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 1px 0 3px 0;
}

.menu-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px 7px;
  min-width: 0;
}

/* Hover is a mouse affordance and this is the only place a telephone gets it
   wrong: a tap sets :hover on the tapped element and leaves it set, so the
   menu title you touched stayed navy-on-white after the menu had closed, and
   the row you picked in a drop stayed lit under a menu that was no longer
   there. Guarded, the highlight only exists on a pointer that can really
   hover; a finger gets the press and the result and nothing left behind. */
@media (hover: hover) {
  .menu-item:hover {
    background: #000080;
    color: #ffffff;
  }
}

.menu-drop {
  position: absolute;
  top: 22px;
  right: 0;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.menu-drop button {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 3px 14px 3px 10px;
  min-width: 130px;
}

@media (hover: hover) {
  .menu-drop button:hover {
    background: #000080;
    color: #ffffff;
  }
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 0;
  border-bottom: 1px solid #808080;
}

.toolbar button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  min-width: 0;
}

.glyph {
  display: block;
}

.throbber {
  margin-left: auto;
  width: 26px;
  height: 26px;
  background: #000080;
  border: 1px solid #000000;
  position: relative;
  flex: 0 0 auto;
}

.throbber-orbit {
  position: absolute;
  inset: 0;
}

.throbber.spinning .throbber-orbit {
  animation: orbit 0.72s steps(8) infinite;
}

.throbber-dot {
  position: absolute;
  top: 2px;
  left: 11px;
  width: 4px;
  height: 4px;
  background: #ffff00;
}

.throbber::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 11px;
  width: 4px;
  height: 4px;
  background: #ffffff;
}

@keyframes orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.url-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
}

.url-bar input {
  flex: 1;
  min-width: 0;
}

.viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.status-bar {
  margin-top: 2px;
}

/* Both load-bearing: the bar must not change height mid-load. Harness section
   runStatusBarHeight. */
.status-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 23px;
}

.status-tell button {
  padding: 0 5px;
  font-size: 11px;
}

.segments {
  display: flex;
  gap: 1px;
}

.segment {
  display: block;
  width: 7px;
  height: 10px;
  background: #c0c0c0;
  border: 1px solid #808080;
}

.segment.on {
  background: #000080;
  border-color: #000080;
}

.light {
  display: block;
  width: 6px;
  height: 6px;
  background: #006600;
  border: 1px solid #333333;
}

.light.on {
  background: #00ff00;
}

/* ---------- simulated page content ---------- */

.page-view {
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  /* The grey a browser of this period gave a page that did not ask for a
     colour, and most of them did not ask. White was the later default and
     reads as a modern page; this is the one every early page sat on. It is
     the only declaration that sets it, so all 27 of them move together. */
  background: #c0c0c0;
  padding: 14px 16px 40px 16px;
}

.page-view h1 {
  font-size: 28px;
  margin: 12px 0 8px 0;
}

.page-view h2 {
  font-size: 21px;
  margin: 16px 0 6px 0;
}

.page-view a {
  color: #0000cc;
}

.page-view a:visited {
  color: #660000;
}

/* White on white on purpose, a real 1996 practice one page here uses. Still
   a real anchor: tabbable, read out, findable by drag-select. */
.page-view a.ghost,
.page-view a.ghost:visited {
  /* The paper's colour, whatever the paper's colour is. This is the hidden
     link on the ring hub, and it is hidden by being painted the ground it
     sits on, so it moves whenever the ground does. It went grey with it. */
  color: #c0c0c0;
  text-decoration: none;
}

.page-view hr {
  border: none;
  border-top: 1px solid #808080;
  margin: 14px 0;
}

.page-view ul,
.page-view ol {
  margin: 8px 0 8px 26px;
}

.page-view .small {
  font-size: 13px;
}

.page-view input,
.page-view button,
.page-view textarea {
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
}

.logo {
  margin: 0 0 4px 0;
  line-height: 0;
}

.logo-art {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.tagline {
  font-style: italic;
  margin: 4px 0 0 0;
}

.result {
  color: #cc0000;
  font-weight: bold;
}

/* ---------- the channel wall ----------
   The service front pages of the period put their channels up as a wall of
   buttons, every one of them lettered differently, and that wall is what the
   era looks like in memory. Three across on a screen and two on a telephone.
   The variety is weight, case, spacing and colour rather than typefaces: this
   machine has three faces and they are all spoken for.

   Every tile is a pale ground with a dark ink of its own family over it, and
   two of them were purple, which the design forbids by name: Member Pages was
   #660066 on pale yellow and Address Book was #660066 on #ffccff, purple ink
   on a purple ground. Member Pages keeps its yellow and takes the dark yellow
   that belongs to it (#666600). Address Book had no family to keep, so it took
   the one pale ground the wall was not already using, a mint green with the
   dark green of the same family over it. The wall still reads as a wall of
   different channels, which is the only thing these colours are for. */
.chan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 8px 0;
  /* Capped, because these were buttons on a page laid out for 640 by 480 and
     not banners: unbounded, each one ran 414px wide on a maximized window. */
  max-width: 620px;
}

.chan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000000;
  /* One pixel of drop, which is the only depth the rules allow. It was two,
     which is a shadow this machine could not have thrown. */
  box-shadow: 1px 1px 0 #808080;
  background: #cccccc;
  color: #000080;
  font-size: 17px;
  line-height: 1.1;
}

/* The art sits at its own size beside the lettering and never stretches with
   the tile: it is drawn on a 16 grid and half a pixel of scaling shows. */
.chan-art {
  flex: none;
  display: block;
}

/* Pressed goes down and to the right, the way everything else here does: the
   tile moves onto its own shadow and the shadow goes, so the press is the one
   pixel of depth being spent rather than a second shadow appearing. */
.chan:active {
  box-shadow: none;
  transform: translate(1px, 1px);
}

.chan-news { background: #ccccff; color: #000080; font-weight: bold; letter-spacing: 2px; }
.chan-weather { background: #ccffff; color: #003366; font-style: italic; }
.chan-sports { background: #ccffcc; color: #003300; font-weight: bold; letter-spacing: 1px; }
.chan-chat { background: #ffffcc; color: #660000; font-style: italic; font-size: 19px; }
.chan-mail { background: #ffcccc; color: #660000; font-weight: bold; }
.chan-stars { background: #ccccff; color: #333366; font-style: italic; }
.chan-tv { background: #cccccc; color: #000000; font-weight: bold; letter-spacing: 1px; font-size: 15px; }
.chan-ring { background: #ffcc99; color: #663300; font-weight: bold; }
.chan-find { background: #ccffcc; color: #006666; }
.chan-members { background: #ffffcc; color: #666600; font-size: 15px; }
.chan-book { background: #99ffcc; color: #006633; font-style: italic; }
.chan-net { background: #99ccff; color: #000080; font-weight: bold; font-size: 15px; }
.chan-files { background: #ffffcc; color: #663300; font-weight: bold; }

@media (max-width: 700px) {
  .chan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.channel-box {
  border: 1px solid #808080;
  background: #ffffcc;
  padding: 8px;
  margin: 8px 0;
}

.box-score {
  border-collapse: collapse;
  margin: 6px 12px 0 0;
  display: inline-table;
}

.box-score td {
  border: 1px solid #808080;
  padding: 2px 8px;
}

.marquee-frame {
  overflow: hidden;
  border: 1px solid #000000;
  background: #000080;
  color: #ffff00;
  padding: 3px 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
}

.marquee-text {
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  /* steps(), not linear: a 1996 marquee redrew itself on a timer and jumped a
     whole number of pixels each time, and nothing on the machine could have
     interpolated between two of those positions. 168 steps over 14 seconds is
     12 jumps a second, which is the rate the <marquee> element itself ran at:
     its defaults were scrollamount 6 pixels every scrolldelay 85ms, near
     enough 11.8 redraws a second. Rounded to 12 so the period is whole. */
  animation: marquee 14s steps(168) infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.construction {
  position: relative;
  height: 34px;
  margin: 12px 0;
  background: #ffcc00;
  border: 1px solid #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.construction .stripes {
  position: absolute;
  top: -12px;
  left: -20px;
  right: -20px;
  bottom: -12px;
  display: flex;
}

.construction .stripes i {
  display: block;
  width: 14px;
  margin-right: 14px;
  background: #000000;
  transform: skewX(-28deg);
  flex: 0 0 auto;
}

.construction span {
  position: relative;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 1px 8px;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.counter {
  margin: 6px 0;
}

.odo {
  display: inline-block;
  background: #000000;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  padding: 1px 4px;
  margin-right: 2px;
  border: 1px solid #808080;
}

.image-slot {
  margin: 10px 0;
}

.page-image {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
}

.gb-entry {
  border-top: 1px solid #c0c0c0;
  padding: 8px 0;
}

.gb-head {
  font-size: 14px;
  color: #006600;
}

.gb-body {
  margin-top: 2px;
}

.webring {
  border: 1px solid #000000;
  background: #ccffcc;
  padding: 10px;
  text-align: center;
}

.webring-title {
  font-weight: bold;
  margin-bottom: 6px;
}

.webring button {
  margin: 0 3px;
}

.warning {
  color: #cc0000;
  font-weight: bold;
}

.dateline {
  font-style: italic;
}

.caption {
  font-size: 13px;
  font-style: italic;
}

/* ---------- the teal screen after giving up ---------- */

/* Positioned on purpose: a static sibling of the absolute .desktop-layer
   paints under it and stops being clickable. Same layer as .center-stack. */
.gaveup {
  position: relative;
  z-index: 20;
  margin: 12vh auto 0 auto;
  max-width: 460px;
  text-align: center;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.6;
}

.gaveup-line {
  margin-bottom: 18px;
}

.gaveup-actions {
  margin: 8px 0;
}

.link-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #ffff00;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ---------- small screens and fingers ---------- */

@media (max-width: 700px) {
  .desktop {
    padding: 0;
  }

  .window-slot,
  .window-slot.maximized {
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - var(--taskbar-h));
  }

  .dialog-connect,
  .dialog-progress,
  .dialog-alert,
  .dialog-error {
    width: auto;
    max-width: 92vw;
  }

  .center-stack {
    margin-top: 4vh;
  }

  .logo-art {
    width: 100%;
  }
}

@media (pointer: coarse) {
  body,
  .window,
  .window-body,
  button,
  input,
  select,
  textarea,
  label,
  .status-bar {
    font-size: 13px;
  }

  .toolbar button {
    padding: 6px 8px;
  }

  .menu-item {
    padding: 6px 10px;
  }

  .page-view {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink,
  .marquee-text,
  .wire-dot,
  .throbber.spinning .throbber-orbit {
    animation: none;
  }

  /* The screensaver never starts under reduced motion; this is the belt to
     that braces. */
  .screensaver {
    display: none;
  }

  .blink {
    opacity: 1;
  }
}

/* ---------- desktop shell ---------- */

.desktop-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--taskbar-h);
}

/* Wraps to a second column like a real desktop: straight down put the
   newest icon under the taskbar on a phone. */
.icon-column {
  position: absolute;
  top: 10px;
  left: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: calc(100% - var(--taskbar-h) - 18px);
  gap: 8px;
}

/* Placed icons end the column: the box stays absolute so coordinates keep
   their corner, and the flex flow goes. */
.icon-column.placed {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: none;
}

.icon-column.placed .desk-icon {
  position: absolute;
}

.desk-icon {
  width: 78px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: default;
}

.desk-icon-label {
  color: #ffffff;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  padding: 1px 2px;
}

.desk-icon.selected {
  outline: 1px dotted #ffffff;
  outline-offset: -1px;
}

.desk-icon.selected .desk-icon-label {
  background: #000080;
}

.speakers-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.speakers-close {
  min-width: 0;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
}

.window-slot {
  position: absolute;
  left: 4%;
  top: 2%;
  width: 92%;
  height: calc((100% - var(--taskbar-h)) * 0.94);
  z-index: 5;
}

.window-slot.focused {
  z-index: 10;
}

.window-slot.maximized {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--taskbar-h));
}

/* A maximized shell window: sized by its own class, body not a column, or
   the contents sit dead in a 340px corner. */
.shell-slot.maximized > .window {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* The body takes the window's height before its contents can take the
   body's; break the link and notepad's sheet went 320px to 52. */
.shell-slot.maximized > .window > .shell-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The one thing per window that takes the room; everything else keeps the
   height it asks for. */
.shell-slot.maximized .notepad-body,
.shell-slot.maximized .pat-board,
.shell-slot.maximized .painter-main,
.shell-slot.maximized .find-results,
.shell-slot.maximized .source-body,
.shell-slot.maximized .shell-icons,
.shell-slot.maximized .bin-rows,
.shell-slot.maximized .dos-screen,
.shell-slot.maximized .printers-queue {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}

/* Maximized, the table spread but the cards stayed 44 by 62 in an acre of
   felt. 1.6 draws them at the period deck's 71 by 96 and scales the cascade
   offsets with them. Not on a telephone, which has no room to grow into. */
@media (min-width: 701px) {
  .shell-slot.maximized .pat-board {
    zoom: 1.6;
  }
}

/* Content scrolls itself, never the window chrome. No card table here: it
   clips on purpose, keeping the winning cascade inside the felt. */
.shell-slot.maximized .find-results,
.shell-slot.maximized .source-body,
.shell-slot.maximized .shell-icons,
.shell-slot.maximized .bin-rows {
  overflow: auto;
}

/* Icons fill from the top left of the room rather than spreading down it. */
.shell-slot.maximized .shell-icons {
  align-content: flex-start;
}

/* The sheet keeps its size and the workspace grows, as paint programs did;
   stretched to the pane, the drawing goes oval. */
.shell-slot.maximized .painter-pane {
  align-items: flex-start;
}

/* The details half of the connection box, which the period kept folded away
   behind a button rather than on the face of it. */
.tray-details {
  margin: 4px 0 2px 0;
  padding-top: 4px;
  border-top: 1px solid #808080;
  box-shadow: 0 -1px 0 #ffffff;
}

.tray-details p {
  margin: 0;
}

/* ---------- taskbar ---------- */

.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-h);
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  box-shadow: inset 0 1px 0 #808080;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  box-sizing: border-box;
  z-index: 30;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 2px 8px;
  flex: 0 0 auto;
}

.start-button.pressed,
.task-button.pressed {
  box-shadow: var(--bevel-pressed);
}

/* Buttons keep a readable floor and the strip scrolls, Start and tray
   pinned. No visible scrollbar; wheel, drag, swipe. */
.task-buttons {
  flex: 1;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  scrollbar-width: none;
}

.task-buttons::-webkit-scrollbar {
  display: none;
}

.task-button {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 2px 7px;
  max-width: 170px;
  min-width: 60px;
  overflow: hidden;
}

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

.tray {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  flex: 0 0 auto;
}

/* Stands down the 98.css 75x23 button floor - the lights sat in 55px of
   dead tray - and pinned so a crowded strip cannot shrink it. */
.tray-icon {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The tray time gets the same hand-rolled inset every recessed field here
   uses, with the speaker drawn on the icons grid, not from a font. */
.tray-clock {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 1px 5px;
  background: transparent;
  border: none;
  box-shadow: var(--bevel-thin-sunken);
}

.tray-clock-text {
  line-height: 14px;
}

/* Deliberately not a 1996 control: the one honest thing in the tray should
   not look like part of the set. Underlined so it reads as a link. */
/* Its own control, so it gets its own hit area. Flat like the rest of the
   tray: the tray never drew raised buttons. */
.tray-speaker {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1px 2px;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

@media (pointer: coarse) {
  .tray-speaker {
    padding: 5px 4px;
  }
}

.tray-panel {
  position: absolute;
  right: 4px;
  bottom: var(--taskbar-h);
  width: 196px;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  padding: 8px;
  z-index: 50;
}

.tray-panel p {
  margin: 0 0 6px 0;
}

/* ---------- start menu ---------- */

.start-menu {
  position: absolute;
  left: 0;
  bottom: var(--taskbar-h);
  /* A tall inline flyout grew the menu past the top of a phone screen where
     no thumb could reach. Capped, the items column scrolls instead.
     100vh on iOS is the viewport with the toolbars hidden, which is taller
     than what you can see while they are showing, so the cap overflowed the
     screen exactly when it was needed. 100dvh is the height there is now.
     The vh line stays underneath it for anything that does not know dvh. */
  max-height: calc(100vh - var(--taskbar-h) - 2px);
  max-height: calc(100dvh - var(--taskbar-h) - 2px);
  width: 216px;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  display: flex;
  z-index: 50;
}

.start-band {
  width: 24px;
  background: #000080;
  color: #c0c0c0;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  padding: 8px 4px;
  flex: 0 0 auto;
}

.start-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2px;
  min-width: 0;
  overflow-y: auto;
}

.start-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 5px 6px;
  min-width: 0;
}

@media (hover: hover) {
  .start-item:hover {
    background: #000080;
    color: #ffffff;
  }
}

/* A menu row with nothing behind it, drawn the way the period greyed one:
   disabled text over its own white relief. pointer-events off so it cannot
   even look pressable. */
.start-item.dead {
  color: #808080;
  text-shadow: 1px 1px 0 #ffffff;
  pointer-events: none;
}

.dialog-run {
  /* A fixed 320 plus border ran off both edges of a 320px phone. */
  width: min(320px, calc(100vw - 20px));
}

.run-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.run-row p {
  margin: 0;
}

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

.start-flyout {
  display: flex;
  flex-direction: column;
  margin: 0 0 0 14px;
  background: #c0c0c0;
  border: 1px solid #808080;
}

.start-separator {
  height: 1px;
  background: #808080;
  border-bottom: 1px solid #ffffff;
  margin: 3px 2px;
}

/* ---------- shut down ---------- */

.shutdown-layer {
  position: fixed;
  inset: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.shutdown-box {
  width: 300px;
}

/* ---------- mail ---------- */

.mail-slot {
  left: 10%;
  top: 8%;
  width: 76%;
  height: calc((100% - var(--taskbar-h)) * 0.8);
}

.mail-window {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 3px;
}

.mail-toolbar {
  border-bottom: 1px solid #808080;
  gap: 4px;
}

.mail-list {
  flex: 0 0 40%;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.mail-row {
  display: flex;
  width: 100%;
  gap: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 3px 5px;
  font-size: 11px;
}

.mail-head {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  font-weight: bold;
  cursor: default;
}

.mail-row.unread {
  font-weight: bold;
}

.mail-row.selected {
  background: #000080;
  color: #ffffff;
}

.mail-row.deleted {
  text-decoration: line-through;
  color: #808080;
}

.mail-row.deleted.selected {
  color: #c0c0c0;
}

.col-from {
  flex: 0 0 30%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.col-subject {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.col-date {
  flex: 0 0 66px;
  padding-right: 4px;
  text-align: right;
}

.mail-deleted-note {
  margin: 3px 2px;
  font-size: 11px;
  color: var(--ink-dim);
}

.mail-reading {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 8px 10px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
}

.mail-headers {
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
  border-bottom: 1px solid #c0c0c0;
  padding-bottom: 5px;
  margin-bottom: 6px;
}

.mail-hint {
  color: #808080;
}

.mail-text .footnote {
  font-size: 13px;
}

.mail-text .mono {
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.mail-text a {
  color: #0000cc;
}

.toast-button {
  min-width: 0;
}

/* ---------- chat ---------- */

.chat-slot {
  left: 14%;
  top: 12%;
  width: 70%;
  height: calc((100% - var(--taskbar-h)) * 0.72);
}

.chat-window {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 3px;
}

.chat-main {
  flex: 1;
  display: flex;
  gap: 3px;
  min-height: 0;
}

.chat-pane {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 5px 7px;
}

.chat-line {
  margin: 0 0 3px 0;
  font-size: 12px;
  line-height: 1.4;
  word-wrap: break-word;
}

.chat-user {
  color: #000080;
}

.chat-system {
  color: #808080;
}

.chat-hint {
  color: #808080;
  margin: 0 0 6px 0;
  font-size: 12px;
}

.chat-members {
  flex: 0 0 132px;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 5px 6px;
  font-size: 11px;
}

.chat-members-title {
  font-weight: bold;
  border-bottom: 1px solid #c0c0c0;
  margin-bottom: 4px;
  padding-bottom: 3px;
}

.chat-members ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-members li {
  padding: 1px 0;
}

.chat-you {
  color: #000080;
  font-weight: bold;
}

.chat-input {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 4px;
}

.chat-input input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 700px) {
  .chat-members {
    display: none;
  }
}

/* ---------- weather, sports, search ---------- */

.forecast {
  border-collapse: collapse;
  margin: 8px 0;
}

.forecast th,
.forecast td {
  border: 1px solid #808080;
  padding: 3px 12px 3px 6px;
  text-align: left;
}

.forecast th {
  background: #c0c0c0;
}

.box-score.wide {
  display: table;
  margin: 8px 0;
}

.box-score th {
  border: 1px solid #808080;
  background: #c0c0c0;
  padding: 2px 8px;
}

.search-hit {
  margin: 10px 0;
}

.search-desc {
  font-size: 15px;
}

.search-url {
  font-size: 13px;
  color: #006600;
}

/* ---------- screensaver ---------- */

.screensaver {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 90;
  cursor: none;
}

.starfield {
  display: block;
  width: 100%;
  height: 100%;
}

.screensaver-caption {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #808080;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.page-view .quip {
  color: #006600;
  font-style: italic;
}

/* ---------- date/time properties ---------- */

.dialog-datetime {
  width: 300px;
}

.tray-clock {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 2px;
  font-size: 11px;
  cursor: default;
}

/* This was the one tab strip in the file drawing its own relief, out of four
   border-colors and a #404040 that is on no palette this site uses. A border
   draws all four edges and can only ever paint one of them out again; the
   file's own --bevel-tab has no bottom edge to begin with, which is what joins
   a tab to the panel under it. The panel was a 1px border too, where every
   other panel in the sheet is the two pixel raised recipe. Display Properties
   and Find were already built the right way, so this now matches them: tab
   strip indented 3px and overlapping by 2, --bevel-tab on the tabs, raised on
   the panel, and the selected tab lifting 2px and growing into it. */
.dt-tabs {
  display: flex;
  margin: 0 0 -2px 3px;
  position: relative;
  z-index: 2;
}

.dt-tab {
  box-shadow: var(--bevel-tab);
  background: var(--surface);
  border: none;
  min-width: 0;
  min-height: 0;
  padding: 5px 9px;
  color: #000000;
}

.dt-tab.active {
  margin-top: -2px;
  padding-bottom: 3px;
  z-index: 8;
  font-weight: bold;
}

.dt-panel {
  position: relative;
  z-index: 1;
  box-shadow: var(--bevel-raised);
  background: var(--surface);
  padding: 10px;
  margin-bottom: 8px;
}

.dt-monthline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* The month select sits where the bold month label used to and keeps its
   measure, so the line does not jump when the label became a control. */
.dt-month-select {
  font-weight: bold;
  min-width: 110px;
}

.dt-month {
  font-weight: bold;
}

.dt-spinner {
  display: inline-flex;
  align-items: stretch;
}

.dt-spinner input {
  width: 52px;
  text-align: right;
}

.dt-spin-buttons {
  display: inline-flex;
  flex-direction: column;
}

.dt-spin-buttons button {
  min-width: 0;
  padding: 0 4px;
  font-size: 8px;
  line-height: 1;
  height: 50%;
}

.dt-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 2px;
}

.dt-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  font-size: 11px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.dt-head {
  font-weight: bold;
  border-bottom: 1px solid #808080;
}

.dt-day.selected {
  background: #000080;
  color: #ffffff;
}

.dt-timezone-note {
  margin: 8px 0 4px 0;
  font-size: 11px;
  color: var(--ink-dim);
}

.dt-time {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  width: 90px;
  text-align: center;
}

/* ---------- desktop context menu ---------- */

.ctx-menu {
  position: fixed;
  min-width: 150px;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  padding: 2px;
  z-index: 55;
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 3px 8px 3px 4px;
  min-width: 0;
}

@media (hover: hover) {
  .ctx-item:hover {
    background: #000080;
    color: #ffffff;
  }
}

.ctx-check {
  width: 12px;
  text-align: center;
  flex: 0 0 auto;
}

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

.ctx-sub {
  margin-left: 16px;
  border-left: 1px solid #808080;
}

.ctx-separator {
  height: 1px;
  background: #808080;
  border-bottom: 1px solid #ffffff;
  margin: 3px 2px;
}

/* ---------- display properties ---------- */

.dialog-display {
  width: 260px;
}

.display-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.crt-screen {
  width: 100%;
  height: 100%;
  background: #008080;
  image-rendering: pixelated;
}

.desktop-layer {
  image-rendering: pixelated;
}

/* ---------- bookmarks menu ---------- */

.bookmarks-drop {
  left: 0;
  right: auto;
  max-width: 260px;
}

.menu-check {
  display: inline-block;
  width: 12px;
  flex: 0 0 auto;
}

.menu-drop button {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-separator {
  height: 1px;
  background: #808080;
  border-bottom: 1px solid #ffffff;
  margin: 3px 2px;
}

/* ---------- shell windows ---------- */

.shell-slot {
  width: auto;
  height: auto;
}

.slot-computer { left: 16%; top: 12%; }
.slot-cdrive { left: 24%; top: 20%; }
.slot-notepad { left: 32%; top: 16%; }
.slot-folder { left: 30%; top: 30%; }
.slot-recycle { left: 22%; top: 18%; }
/* The system tools all opened at the sheet's default corner and therefore all
   opened on top of each other. The prompt is the fourth of them and gets a
   corner of its own rather than making the pile deeper. */
.slot-dos { left: 20%; top: 26%; }

.shell-window {
  width: 340px;
  display: flex;
  flex-direction: column;
}

.w-notepad { width: 420px; }
.w-recycle { width: 400px; }
.w-scandisk { width: 430px; }

/* ---------- scandisk ---------- */

.scandisk-body {
  padding: 8px;
}

.scandisk-lead {
  margin: 0 0 6px 0;
}

.scandisk-drives {
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
  padding: 2px;
  margin-bottom: 8px;
  height: 42px;
  overflow-y: auto;
}

.scandisk-drive {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  padding: 1px 4px;
}

.scandisk-drive.picked {
  background: #000080;
  color: #ffffff;
}

.scandisk-type {
  margin-bottom: 8px;
}

.scandisk-hint {
  color: var(--ink-dim);
}

/* The surface map. A cluster is 4px, which is what fits 24 across a window
   this wide and is close to the density the real grid had. */
.scandisk-grid {
  display: grid;
  gap: 1px;
  background: #808080;
  box-shadow: var(--bevel-sunken);
  padding: 3px;
  margin-bottom: 6px;
}

.sd-cell {
  height: 8px;
  background: #c0c0c0;
}

.sd-cell.ok {
  background: #000080;
}

/* Red, and the only red on this window, because a bad sector is the one thing
   it has to be able to say. */
.sd-cell.bad {
  background: #cc0000;
}

.scandisk-status {
  margin: 0 0 6px 0;
  min-height: 26px;
}

.scandisk-results {
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
  padding: 4px 6px;
  margin-bottom: 8px;
}

.scandisk-table {
  border-collapse: collapse;
  width: 100%;
  background: transparent;
}

.scandisk-table td {
  padding: 0 4px 0 0;
  height: auto;
}

.sd-num {
  text-align: right;
  white-space: nowrap;
}

.scandisk-buttons {
  margin-top: 0;
}

@media (pointer: coarse) {
  .w-scandisk {
    width: 96vw;
    max-width: 430px;
  }

  .scandisk-drive {
    min-height: 30px;
  }

  /* Start and Close were 23px on a phone, under the floor every other window
     in the app meets. The harness caught it; nothing in the design did. */
  .scandisk-buttons button {
    min-height: 32px;
  }
}

.shell-body {
  margin: 0;
  padding: 4px;
}

.shell-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 8px;
  min-height: 90px;
}

.shell-icon {
  width: 88px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: default;
}

.shell-icon.selected {
  outline: 1px dotted #000000;
  outline-offset: -1px;
}

.shell-icon.selected .shell-icon-label {
  background: #000080;
  color: #ffffff;
}

.shell-icon-label {
  font-size: 11px;
  text-align: center;
  word-break: break-word;
}

.shell-statusline {
  margin: 3px 2px 0 2px;
  font-size: 11px;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 2px 5px;
}

.shell-empty {
  margin: 8px;
  font-size: 11px;
  color: var(--ink-dim);
}

.notepad-menu {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 2px 6px 4px 6px;
  border-bottom: 1px solid #808080;
}

.notepad-menu-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  font-size: 11px;
  color: #000000;
}

.notepad-menu-item.inert {
  color: #000000;
}

.notepad-drop {
  position: absolute;
  left: 4px;
  top: 18px;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  display: flex;
  flex-direction: column;
  z-index: 15;
}

.notepad-drop button {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 3px 20px 3px 10px;
  min-width: 120px;
  color: #000000;
}

@media (hover: hover) {
  .notepad-drop button:hover {
    background: #000080;
    color: #ffffff;
  }
}

.notepad-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #000000;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  border-radius: 0;
  box-shadow: none;
  resize: none;
  height: 320px;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  white-space: pre-wrap;
}

.recycle-list {
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  min-height: 70px;
  padding: 4px;
  margin-bottom: 6px;
}

.recycle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  font-size: 11px;
}

.recycle-from {
  flex: 0 0 30%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recycle-subject {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .shell-slot {
    left: 2% !important;
    top: 8% !important;
  }

  .shell-window,
  .w-notepad,
  .w-recycle {
    width: 96vw;
    max-width: 440px;
  }
}

/* ---------- og capture frame ---------- */

.og-frame {
  position: relative;
  width: 1200px;
  height: 630px;
  background: #008080;
  overflow: hidden;
  pointer-events: none;
}

.og-frame * {
  pointer-events: none;
}

/* A link preview shows this card at about a third of its 1200px, so the
   sizes below are picked to survive that: nothing under 24px. */
.og-dialog {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 24px;
  bottom: 112px;
  width: auto;
  display: flex;
  flex-direction: column;
}

.og-dialog .title-bar {
  height: 48px;
  padding: 0 5px 0 12px;
}

.og-dialog .title-bar-text {
  font-size: 26px;
}

.og-dialog .title-bar-controls {
  display: flex;
  gap: 3px;
  align-items: center;
}

/* Card glyphs at exactly twice their own size, on whole pixels: one shared
   background-size squashed minimize to a filled block. */
.og-dialog .title-bar-controls button {
  width: 34px;
  height: 30px;
  min-width: 34px;
  min-height: 30px;
}

.og-dialog .title-bar-controls button[aria-label='Minimize'] {
  background-size: 12px 4px;
  background-position: bottom 6px left 11px;
}

.og-dialog .title-bar-controls button[aria-label='Maximize'] {
  background-size: 18px 18px;
  background-position: top 6px left 8px;
}

.og-dialog .title-bar-controls button[aria-label='Close'] {
  background-size: 16px 14px;
  background-position: top 8px left 9px;
}

.og-dialog .window-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 44px 26px 44px;
}

/* Courier: the typeface an amateur page and a modem log agree on. Navy:
   the colour the title bars mean by "this machine". */
.og-wordmark {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 150px;
  line-height: 1;
  letter-spacing: 2px;
  color: #000080;
  text-align: center;
}

/* The divider a dialog of this era used: a groove, one dark line over one
   white one, rather than a rule. */
.og-rule {
  height: 0;
  margin: 30px 70px;
  border-top: 2px solid #808080;
  border-bottom: 2px solid #ffffff;
}

.og-tag {
  font-family: 'Courier New', Courier, monospace;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 6px;
  color: #000000;
  text-align: center;
}

.og-sub {
  margin: 30px 0 0 0;
  font-size: 27px;
  line-height: 1.2;
  color: #000000;
  text-align: center;
}

/* The app's own segmented bar, scaled up - not ten drawn rectangles that
   outlive the thing they copied. */
/* Doubled up on purpose: a single class here loses the cascade to the later
   .print-bar and comes out print-dialog sized. */
.print-bar.og-bar {
  margin: 40px 70px 0 70px;
  padding: 4px;
  gap: 4px;
}

.print-bar.og-bar span {
  height: 26px;
}

/* On the teal below the window: yellow on silver at preview size is a
   smudge. */
.og-warning {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  margin: 0;
  text-align: center;
  font-size: 30px;
  /* The sheet sets a 13px line box for chrome text. Left alone, a 30px line
     would draw outside a 13px box and measure as though it were not there. */
  line-height: 1.2;
  /* The capture is a still: the blink is shown in its visible state. */
  animation: none;
  opacity: 1;
}

.og-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.og-taskbar .start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 2px 8px;
  background: var(--surface);
  box-shadow: var(--bevel-thin-sunken);
}

.og-taskbar .task-buttons {
  flex: 1;
}

/* ---------- view source and text size ---------- */

.slot-source {
  left: 20%;
  top: 10%;
}

.w-source {
  width: 480px;
}

.source-body {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  margin: 0;
  padding: 8px 10px;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-large .page-view {
  font-size: 20px;
}

.text-large .page-view h1 {
  font-size: 34px;
}

.text-large .page-view h2 {
  font-size: 26px;
}

.menu-item.open {
  background: #000080;
  color: #ffffff;
}

.drop-file,
.drop-edit,
.drop-view,
.drop-go,
.drop-help {
  left: 0;
  right: auto;
  max-width: 280px;
}

/* ---------- calculator ---------- */

.slot-calc {
  left: 34%;
  top: 22%;
}

.w-calc {
  width: 260px;
}

.calc-display {
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  text-align: right;
  padding: 4px 6px;
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.calc-grid {
  display: flex;
  gap: 5px;
}

.calc-memory {
  flex: 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calc-mark {
  height: 18px;
  background: #c0c0c0;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  text-align: center;
  font-weight: bold;
  color: #cc0000;
}

.calc-mem-key {
  min-width: 0;
  padding: 4px 0;
  font-size: 11px;
  color: #cc0000;
}

.calc-keys {
  flex: 1;
  min-width: 0;
}

.calc-row {
  display: flex;
  gap: 3px;
  margin-bottom: 3px;
}

.calc-row button {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.calc-row button.calc-wide {
  flex: 2;
}

/* ---------- the ring ---------- */

.ring-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
  flex-wrap: wrap;
}

.ring-button {
  display: inline-block;
  background: var(--surface);
  border: none;
  box-shadow: var(--bevel-raised);
  padding: 4px 12px;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
}

.ring-button:active {
  box-shadow: var(--bevel-pressed);
}

.ring-button.ring-random {
  font-weight: bold;
}

.ring-member {
  margin-top: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000080;
}

.ring-hub {
  background: #ffffcc;
}

.ring-list {
  border-collapse: collapse;
  margin: 8px 0;
}

.ring-list td {
  padding: 2px 10px 2px 0;
  vertical-align: top;
}

/* ---------- minefield ---------- */

.slot-mines {
  left: 26%;
  top: 12%;
}

.w-mines {
  width: 216px;
}

.w-mines.level-intermediate {
  width: 340px;
}

.mine-menu {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 2px 4px 4px 4px;
  border-bottom: 1px solid #808080;
  margin-bottom: 5px;
}

.mine-menu-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  font-size: 11px;
  color: #000000;
}

.mine-drop {
  position: absolute;
  left: 2px;
  top: 18px;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  display: flex;
  flex-direction: column;
  z-index: 15;
}

.mine-drop button {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 3px 16px 3px 8px;
  min-width: 118px;
  color: #000000;
  white-space: pre;
}

@media (hover: hover) {
  .mine-drop button:hover {
    background: #000080;
    color: #ffffff;
  }
}

.mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  margin-bottom: 5px;
  background: #c0c0c0;
  /* One pixel of relief, which is --bevel-thin-sunken exactly. It was spelled
     out by hand here and in .mine-grid below. */
  box-shadow: var(--bevel-thin-sunken);
}

.mine-odo {
  display: block;
  background: #000000;
  color: #ff0000;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 2px 3px;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.mine-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
}

.mine-grid {
  display: grid;
  gap: 0;
  background: #808080;
  box-shadow: var(--bevel-thin-sunken);
  padding: 3px;
}

.mine-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  background: #c0c0c0;
  border: none;
  border-radius: 0;
  /* Two pixels of bevel, the way the unopened squares always sat. Written out
     rather than taken from --bevel-raised on purpose, and named in the allow
     list in bevel.test.js: the raised recipe steps #dfdfdf then white and
     closes on a black outer edge, and a black edge round every square would
     draw the grid a second time over the grid. Solid white and solid grey,
     two pixels each, no outline. */
  box-shadow: inset -2px -2px #808080, inset 2px 2px #ffffff;
}

/* And pressed is flat with one grey edge, which is a drawn line rather than a
   bevel: there is no recipe for it because it is not one of the three shapes. */
.mine-cell:active {
  box-shadow: inset 1px 1px #808080;
}

/* An opened square is flat, with the grid drawn on its top and left edge. */
.mine-cell.open {
  box-shadow: none;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  background: #c0c0c0;
}

.mine-cell.open:active {
  box-shadow: none;
}

.mine-cell.hit {
  background: #ff0000;
}

.mine-wrong {
  position: relative;
  display: block;
  line-height: 0;
}

.mine-wrong::after {
  content: 'X';
  position: absolute;
  left: 0;
  top: -3px;
  width: 13px;
  text-align: center;
  color: #ff0000;
  font-size: 13px;
}

.mine-q {
  color: #000000;
}

.mine-cell.n1 { color: #0000ff; }
.mine-cell.n2 { color: #006600; }
.mine-cell.n3 { color: #ff0000; }
.mine-cell.n4 { color: #000080; }
.mine-cell.n5 { color: #990000; }
.mine-cell.n6 { color: #008080; }
.mine-cell.n7 { color: #000000; }
.mine-cell.n8 { color: #666666; }

.mine-hint {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: #000000;
}

/* ---------- patience ---------- */

.slot-patience {
  left: 14%;
  top: 8%;
}

.w-patience {
  width: 372px;
}

.pat-menu {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 2px 4px 4px 4px;
  border-bottom: 1px solid #808080;
  margin-bottom: 5px;
}

.pat-menu-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  font-size: 11px;
  color: #000000;
}

.pat-drop {
  position: absolute;
  left: 2px;
  top: 18px;
  background: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
  display: flex;
  flex-direction: column;
  z-index: 15;
}

.pat-drop button {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  padding: 3px 16px 3px 8px;
  min-width: 132px;
  color: #000000;
}

@media (hover: hover) {
  .pat-drop button:hover {
    background: #000080;
    color: #ffffff;
  }
}

/* The felt keeps its green: the later sunken-white group wins on
   background-color, and the table had quietly been white. */
.pat-board {
  position: relative;
  background: #008000;
  box-shadow: var(--bevel-sunken);
  border: none;
  border-radius: 0;
  padding: 6px;
  min-height: 300px;
  overflow: hidden;
}

.pat-top {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.pat-gap {
  flex: 1;
  min-width: 4px;
}

.pat-slot,
.pat-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  line-height: 0;
}

.pat-columns {
  display: flex;
  gap: 3px;
}

.pat-column {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 180px;
}

.pat-column .pat-card,
.pat-column .pat-slot {
  position: absolute;
  left: 0;
}

.pat-card.picked .card,
.pat-slot.picked .card {
  outline: 2px solid #ffff00;
  outline-offset: -2px;
}

.pat-flyer {
  position: absolute;
  line-height: 0;
  pointer-events: none;
}

.pat-win {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 250px;
  z-index: 12;
}

.pat-hint {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: #000000;
}

/* ---------- playing cards ---------- */

.card {
  position: relative;
  display: block;
  width: 44px;
  height: 62px;
  box-sizing: border-box;
  border: 1px solid #000000;
  border-radius: 2px;
  background: #ffffff;
  overflow: hidden;
}

/* White on the white table was nothing at all; grey reads against the felt
   without competing with a real card. */
.card-slot {
  background: transparent;
  border: 1px dotted #808080;
  color: #808080;
  font-size: 15px;
  line-height: 58px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The backs. Two hard colour stops rather than a ramp, which is a pattern and
   not a gradient: the one gradient this site allows is still the titlebar. */
.card-back {
  background: var(--back-ground, #000080);
}

.card-weave {
  position: absolute;
  inset: 2px;
  background-image: linear-gradient(45deg, var(--back-ink, #3366cc) 25%, var(--back-ground, #000080) 25%);
  background-size: var(--back-step, 6px) var(--back-step, 6px);
  border: 1px solid var(--back-ink, #3366cc);
}

/* The heading over a group of choices in a drop, which the period set apart
   rather than indenting. */
.pat-drop-head {
  margin: 2px 0 1px 0;
  padding: 0 8px;
  color: #808080;
}

/* The default, written out rather than left to the fallbacks in the shared
   rule, so that every deck the menu offers has a rule of its own to point at. */
.back-weave {
  --back-ground: #000080;
  --back-ink: #3366cc;
}

/* Diagonal bars, so that the four ornaments are four motifs rather than one
   motif in four colours: a fine crosshatch, these bars, a tartan grid and a
   checkerboard. Hard stops throughout, which is a pattern and not a ramp. */
.back-bars .card-weave {
  --back-ground: #990000;
  /* #ddaaaa, which this was, is not a web-safe value: dd and aa are neither of
     them one of the six. #cc9999 is the nearest that is, one step down on both
     channels, and the bars read the same dusty red over the dark. */
  --back-ink: #cc9999;
  background-image: repeating-linear-gradient(
    45deg,
    var(--back-ink) 0,
    var(--back-ink) 3px,
    var(--back-ground) 3px,
    var(--back-ground) 8px
  );
  /* The shared rule tiles at 6px, which would chop these bars back into the
     crosshatch they are here to differ from. */
  background-size: auto;
}

.back-bars {
  --back-ground: #990000;
  --back-ink: #cc9999;
}

.back-plaid .card-weave {
  --back-ground: #003300;
  --back-ink: #669966;
  background-image: linear-gradient(90deg, var(--back-ink) 2px, transparent 2px),
    linear-gradient(0deg, var(--back-ink) 2px, transparent 2px);
  background-size: 8px 8px;
}

.back-plaid {
  --back-ground: #003300;
  --back-ink: #669966;
}

.back-checks .card-weave {
  --back-ground: #333366;
  --back-ink: #ccccff;
  background-image: linear-gradient(45deg, var(--back-ink) 25%, transparent 25%, transparent 75%, var(--back-ink) 75%),
    linear-gradient(45deg, var(--back-ink) 25%, transparent 25%, transparent 75%, var(--back-ink) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

.back-checks {
  --back-ground: #333366;
  --back-ink: #ccccff;
}

.back-stripes .card-weave {
  --back-ground: #006666;
  --back-ink: #99cccc;
  background-image: linear-gradient(90deg, var(--back-ink) 3px, transparent 3px);
  background-size: 7px 7px;
}

.back-stripes {
  --back-ground: #006666;
  --back-ink: #99cccc;
}

/* A back that carries a picture wants no pattern under it and no border
   fighting the edge of the drawing. */
.back-walleye .card-weave,
.back-sundown .card-weave,
.back-cabin .card-weave,
.back-hand .card-weave,
.back-comet .card-weave {
  background-image: none;
  border-color: #000000;
}

.back-walleye { --back-ground: #99cccc; }
.back-sundown { --back-ground: #336699; }
.back-cabin { --back-ground: #000033; }
.back-comet { --back-ground: #000033; }
.back-hand { --back-ground: #cc3333; }

/* The picture fills the back rather than sitting in the middle of it at a
   fixed size, because the table magnifies and a fixed motif would not follow. */
.card-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card-corner {
  position: absolute;
  left: 2px;
  top: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.card-rank {
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  font-weight: bold;
}

.card-face.red .card-rank {
  color: #cc0000;
}

.card-face.black .card-rank {
  color: #000000;
}

.card-pip {
  position: absolute;
  right: 4px;
  bottom: 4px;
  line-height: 0;
}


/* ---------- the bevel system ----------
   Raised: #dfdfdf then white top-left, #808080 then black bottom-right.
   Sunken: reversed. Pressed: inverted, content one pixel down and right. */

:root {
  --bevel-raised: inset 1px 1px 0 var(--surface-light), inset -1px -1px 0 var(--surface-dark),
    inset 2px 2px 0 var(--surface-hilight), inset -2px -2px 0 var(--surface-shadow);
  --bevel-sunken: inset 1px 1px 0 var(--surface-shadow), inset -1px -1px 0 var(--surface-hilight),
    inset 2px 2px 0 var(--surface-dark), inset -2px -2px 0 var(--surface-light);
  --bevel-pressed: inset 1px 1px 0 var(--surface-dark), inset -1px -1px 0 var(--surface-light),
    inset 2px 2px 0 var(--surface-shadow), inset -2px -2px 0 var(--surface-hilight);
  /* A status panel or a group box gets one pixel of relief, not two. */
  --bevel-thin-sunken: inset 1px 1px 0 var(--surface-shadow), inset -1px -1px 0 var(--surface-hilight);
  /* A tab is raised on three sides and open at the bottom, which is what joins
     it to the panel underneath. */
  --bevel-tab: inset 1px 1px 0 var(--surface-light), inset -1px 0 0 var(--surface-dark),
    inset 2px 2px 0 var(--surface-hilight), inset -2px 0 0 var(--surface-shadow);
}

/* Raised: every push button, the window frame, the taskbar buttons, the tray
   icons, the calculator and minefield keys, the ring buttons. */
button,
input[type='reset'],
input[type='submit'],
.window,
.ring-button,
.mine-cell,
.mine-reset,
.calc-mem-key,
.start-button,
.task-button,
.title-bar-controls button {
  background: var(--surface);
  border: none;
  border-radius: 0;
  box-shadow: var(--bevel-raised);
}

/* Pressed: the recipe inverted, label carried one pixel. Excludes desktop
   icons - a button element, not a button control. See test/bevel.test.js. */
button:not(:disabled):not(.desk-icon):active,
input[type='reset']:not(:disabled):active,
input[type='submit']:not(:disabled):active,
.ring-button:active,
.start-button.pressed,
.task-button.pressed,
.mine-cell:active,
.title-bar-controls button:active {
  box-shadow: var(--bevel-pressed);
}

/* Two ways to carry the content, because a button is either a flex row of
   elements or a run of bare text and each needs its own nudge. */
button:not(:disabled):not(.desk-icon):active > *,
.title-bar-controls button:active > * {
  transform: translate(1px, 1px);
}

button:not(:disabled):not(.desk-icon):active,
.ring-button:active {
  text-indent: 1px;
  padding-top: 1px;
  padding-bottom: 0;
}

/* Sunken: text fields, list boxes, the viewport, every well that holds
   content rather than inviting a click. */
input[type='text'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='url'],
select,
textarea,
.viewport,
.notepad-body,
.calc-display,
.mine-grid,
.shell-icons,
.recycle-list,
.chat-log,
.mail-list,
.source-body {
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  box-shadow: var(--bevel-sunken);
}

/* One pixel of relief only: status bar panels, group boxes, the tray. */
.status-bar-field,
.tray,
.mine-head,
.mine-mark,
.mine-odo,
.field-border,
.status-field-border {
  box-shadow: var(--bevel-thin-sunken);
}

/* The taskbar is a raised strip against the desktop, not a bordered box. */
.taskbar {
  border-top: 1px solid var(--surface-hilight);
  box-shadow: inset 0 1px 0 var(--surface-light);
}

/* Scrollbars follow the same recipe as everything else. */
::-webkit-scrollbar-thumb {
  background-color: var(--surface);
  box-shadow: var(--bevel-raised);
}

::-webkit-scrollbar-track {
  background-color: var(--surface-light);
  background-image: none;
}

::-webkit-scrollbar-corner {
  background: var(--surface-light);
}

/* ---------- titlebars ---------- */

.title-bar {
  background: var(--titlebar-active);
  padding: 2px 2px 2px 3px;
  align-items: center;
}

.title-bar-text {
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0;
}

/* An unfocused window greys its titlebar, the way they always did, and its
   text goes to the light step so the whole bar recedes together. Dialogs are
   never unfocused, so this only reaches the window slots. */
.window-slot:not(.focused) > .window > .title-bar,
.window-slot:not(.focused) .browser > .title-bar {
  background: linear-gradient(90deg, #808080, #b5b5b5);
}

.window-slot:not(.focused) > .window > .title-bar .title-bar-text,
.window-slot:not(.focused) .browser > .title-bar .title-bar-text {
  color: var(--surface-light);
}

.title-bar-controls {
  display: flex;
  gap: 2px;
}

.title-bar-controls button {
  width: 16px;
  min-width: 16px;
  height: 14px;
  min-height: 14px;
  padding: 0;
  background-repeat: no-repeat;
}

/* The three glyphs, drawn here as one pixel strokes rather than typed as
   characters. A bar, a box and a cross: generic shapes, built rect by rect. */
.title-bar-controls button[aria-label='Minimize'] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2'%3E%3Crect width='6' height='2' fill='%23000'/%3E%3C/svg%3E");
  background-position: bottom 3px left 4px;
}

.title-bar-controls button[aria-label='Maximize'] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='9' height='9' fill='%23000'/%3E%3Crect x='1' y='2' width='7' height='6' fill='%23c0c0c0'/%3E%3C/svg%3E");
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label='Close'] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='%23000'%3E%3Crect x='0' y='0' width='2' height='1'/%3E%3Crect x='6' y='0' width='2' height='1'/%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='5' y='1' width='2' height='1'/%3E%3Crect x='2' y='2' width='2' height='1'/%3E%3Crect x='4' y='2' width='2' height='1'/%3E%3Crect x='3' y='3' width='2' height='1'/%3E%3Crect x='2' y='4' width='2' height='1'/%3E%3Crect x='4' y='4' width='2' height='1'/%3E%3Crect x='1' y='5' width='2' height='1'/%3E%3Crect x='5' y='5' width='2' height='1'/%3E%3Crect x='0' y='6' width='2' height='1'/%3E%3Crect x='6' y='6' width='2' height='1'/%3E%3C/svg%3E");
  background-position: top 3px left 4px;
}

/* The fourth glyph, Restore: two overlapping frames on Maximize's 9 by 9
   footprint so the offsets are shared. */
.title-bar-controls button[aria-label='Restore'] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect x='2' y='0' width='7' height='6' fill='%23000'/%3E%3Crect x='3' y='2' width='5' height='3' fill='%23c0c0c0'/%3E%3Crect x='0' y='3' width='7' height='6' fill='%23000'/%3E%3Crect x='1' y='5' width='5' height='3' fill='%23c0c0c0'/%3E%3C/svg%3E");
  background-position: top 2px left 3px;
}

/* ---------- typography ----------
   MS Sans Serif 11px unsmoothed on the period's 13px line; the bitmap face
   ships with 98.css. */

body,
.window,
.window-body,
.title-bar,
button,
input,
select,
textarea,
label,
option,
.status-bar,
.menu-item,
.menu-drop button,
.start-item,
.ctx-item,
.task-label,
.tray-clock {
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
  line-height: 13px;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* ---------- touch targets ----------
   Last in the file on purpose: these override the mouse sized rules above,
   which are declared later in the sheet than the mobile block. */

@media (pointer: coarse) {
  /* A finger is about 44 by 44; the 1996 bar was drawn for a mouse, so on a
     phone it grows and everything standing in it grows with it. */
  :root {
    --taskbar-h: 52px;
  }

  .start-button,
  .task-button {
    height: 44px;
  }

  .tray {
    height: 44px;
  }

  .tray-icon,
  .tray-clock {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .start-item {
    min-height: 44px;
  }

  .desk-icon {
    min-height: 44px;
    min-width: 44px;
  }

  /* Minefield squares are sized by the board, not by the finger: nine of them
     at 44px would be 396px wide. They get every pixel the window can spare. */
  .w-mines {
    width: 300px;
  }

  /* Seven columns of 44px cards plus the gaps is 332px, so the board sets the
     window width on a phone rather than the finger doing it. */
  .w-patience {
    width: 358px;
  }

  .w-mines.level-intermediate {
    width: 356px;
  }

  /* Titlebar buttons sit 2px apart, so an invisible hit area would steal from
     the neighbour: the buttons themselves grow. */
  .title-bar-controls button {
    min-width: 30px;
    min-height: 26px;
  }

  /* Offsets written out per size: a computed 10.5px centre soft-blurs a 1px
     stroke. Odd halves round down and right, the desktop's own bias. */
  .title-bar-controls button[aria-label='Minimize'] {
    /* The bar keeps its low anchor, at the same three quarters down the free
       space it sits at on the desktop, or it stops reading as minimize. */
    background-position: bottom 6px left 12px;
  }

  .title-bar-controls button[aria-label='Close'] {
    background-position: top 9px left 11px;
  }

  .title-bar {
    padding: 4px 3px;
  }
}

/* ---------- display properties tabs ---------- */

.display-tabs {
  /* Four tabs at 13px overflow one row here, so rows wrap as the period's did. */
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0 0 -2px 0;
  padding-left: 3px;
  position: relative;
  text-indent: 0;
  z-index: 2;
}

.display-tabs > li {
  box-shadow: var(--bevel-tab);
  background: var(--surface);
}

.display-tabs > li[aria-selected='true'] {
  margin-left: -3px;
  margin-top: -2px;
  padding-bottom: 2px;
  position: relative;
  z-index: 8;
}

.display-tabs > li button {
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  padding: 5px 9px;
  color: #000000;
}

.display-panel {
  position: relative;
  z-index: 1;
  padding: 8px;
  margin-bottom: 8px;
}

.crt-saver {
  display: block;
  width: 136px;
  height: 92px;
  image-rendering: pixelated;
}

.display-wait {
  margin-top: 8px;
  gap: 6px;
  /* Two buttons and a wait control do not fit across a telephone, and the
     Settings button arriving beside Preview is what made that show: Preview
     ran off the edge of the panel. The row wraps rather than overflows, and
     the pair keeps to the right on the line it lands on. */
  flex-wrap: wrap;
}

.display-wait select {
  width: 58px;
}

.display-preview-button {
  margin-left: 4px;
}

/* The Settings button sits with Preview at the right of the wait row, which
   is where the period's pair stood. */
.display-settings-button {
  margin-left: auto;
}

@media (max-width: 700px) {
  .display-settings-button {
    margin-left: 0;
  }
}

.dialog-marquee {
  width: 320px;
  max-width: 92vw;
}

.dialog-marquee input[type='text'] {
  width: 100%;
}

/* A slider and the number it is showing, which is how the period's speed and
   count controls read: the lever, and what it currently says. */
.saver-range {
  gap: 8px;
  align-items: center;
}

.saver-range input[type='range'] {
  flex: 1;
}

.saver-range output {
  min-width: 30px;
  text-align: right;
}

.display-note {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: #000000;
}

/* 98.css draws every select as a drop-down. The control panel used list boxes,
   so a select carrying a size attribute is given its rows back. */
.display-panel select[size] {
  height: auto;
  min-height: 74px;
  padding: 2px;
  padding-right: 2px;
  background-image: none;
  overflow-y: auto;
}

.display-panel select[size] option {
  padding: 1px 3px;
}

.display-panel select[size] option:checked {
  background: #000080;
  color: #ffffff;
}

/* A plain English box on the legal pages, the way earnest 1996 sites set off
   the part they actually wanted read. */
.plain-box {
  border: 2px solid #000080;
  background: #ffffcc;
  padding: 10px 12px;
  margin: 14px 0;
}

.plain-box h2 {
  margin-top: 0;
}


/* ---------- windows fidelity ---------- */

/* The unfocused titlebar was written out a second time here, identically. It
   lives up in the titlebars section with the rule that greys its text. */

/* Access keys. The underlined letter on every menu was how you drove the thing
   from the keyboard, and its absence is the first thing that reads wrong. */
.menu-item u,
.menu-drop u,
.start-item u,
.notepad-menu-item u,
.mine-menu-item u {
  border-bottom: 1px solid #000000;
  text-decoration: none;
}

@media (hover: hover) {
  /* The white underline that goes with the navy highlight. Guarded with it: on
     its own it would whiten the access key of a row that is not lit. */
  .menu-item:hover u,
  .menu-drop button:hover u,
  .start-item:hover u {
    border-bottom-color: #ffffff;
  }
}

/* This is an operating system, not a web page: the pointer is an arrow over
   the chrome and only turns into a hand over something in a document. */
.desktop,
.desktop-layer,
.window,
.taskbar,
.ctx-menu,
.start-menu,
.tray-panel,
.screensaver,
button,
select,
label {
  cursor: default;
}

.page-view a,
.page-view [data-nav],
.page-view [data-app],
.page-view [data-alert],
.page-view [data-search],
.page-view [data-reveal],
.link-button,
.mail-list-row {
  cursor: pointer;
}

input[type='text'],
input[type='password'],
input[type='search'],
textarea {
  cursor: text;
}

/* ---------- the ring badge ---------- */

/* Every page in the COMETLINK web ends with this. A thin bordered box, the way
   a webring badge was pasted onto the bottom of a page in 1996. */
.ring-footer {
  margin: 18px 0 4px 0;
  background: #ffffcc;
  box-shadow: var(--bevel-thin-sunken);
  padding: 5px 8px;
  text-align: center;
}

.ring-footer-title {
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000080;
}

.ring-footer-links {
  margin-top: 3px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.ring-footer-links a {
  color: #000080;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .ring-footer-links a:hover {
    text-decoration: underline;
  }
}

/* ---------- the modem log ----------
   Stages written as the sound arrives. Fixed height: the dialog must not jump. */
.modem-log {
  margin: 10px 0 2px 0;
  padding: 4px 6px;
  height: 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #000000;
  box-shadow: var(--bevel-thin-sunken);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 15px;
  color: #00cc00;
}

.modem-log-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

@media (pointer: coarse) {
  .modem-log {
    height: 105px;
    font-size: 13px;
    line-height: 17px;
  }
}

/* ---------- page content on glass ----------
   Padding grows a 20px link toward a thumb's 44 without moving a word; rows
   open to match or neighbouring targets overlap. */
@media (pointer: coarse) {
  .page-view a {
    padding: 11px 3px;
  }

  .page-view li {
    margin-bottom: 10px;
  }

  /* Badge links are real blocks and wrap to a second row: nothing here is
     allowed a horizontal scrollbar. */
  .ring-footer-links {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .ring-footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
  }

  /* The forms in the page body are period controls and get the same floor the
     rest of the chrome already has. */
  .page-view button,
  .page-view input[type='text'],
  .page-view input[type='submit'],
  .page-view textarea {
    min-height: 44px;
  }

  .page-view button {
    padding-left: 14px;
    padding-right: 14px;
  }
}

.ring-member-line {
  margin: 0 0 6px 0;
  font-size: 10px;
  color: #666666;
  text-align: center;
}

.ring-members li {
  padding: 1px 0;
}

.ring-exit {
  margin-top: 4px;
}

/* ---------- chrome type on a finger ----------
   Last in the file so it overrides the mouse sizes: a finger gets 13px on a
   15px line, a deliberate fidelity departure. */

@media (pointer: coarse) {
  body,
  .window,
  .window-body,
  .title-bar,
  button,
  input,
  select,
  textarea,
  label,
  option,
  .status-bar,
  .menu-item,
  .menu-drop button,
  .start-item,
  .ctx-item,
  .task-label,
  .tray-clock {
    font-size: 13px;
    line-height: 15px;
  }
}

/* ---------- the disabled style ----------
   Dead features grey out, never alert: grey text over a 1px white shadow,
   the period's own recipe. */

button:disabled,
[aria-disabled='true'],
.menu-drop button:disabled,
.notepad-drop button:disabled,
.ctx-item:disabled {
  color: var(--surface-shadow);
  text-shadow: 1px 1px 0 var(--surface-hilight);
  cursor: default;
  pointer-events: none;
}

.menu-drop button:disabled:hover,
.notepad-drop button:disabled:hover,
.start-item:disabled:hover,
.ctx-item:disabled:hover {
  background: transparent;
  color: var(--surface-shadow);
}

/* The inert menu bar labels are the same idea without a button around them. */
.notepad-menu-item.inert,
.mine-menu-item.inert {
  color: var(--surface-shadow);
  text-shadow: 1px 1px 0 var(--surface-hilight);
}

/* A listing entry that does nothing is greyed in the listing, so you know
   before you click rather than after. */
.shell-icon.dead .shell-icon-label {
  color: var(--surface-shadow);
  text-shadow: 1px 1px 0 var(--surface-hilight);
}

.shell-icon.dead {
  cursor: default;
}

/* ---------- find: files or folders ---------- */

.slot-find {
  left: 18%;
  top: 14%;
}

.w-find {
  width: 460px;
}

.find-tabs {
  display: flex;
  margin: 0 0 -2px 3px;
  position: relative;
  z-index: 2;
}

.find-tab {
  box-shadow: var(--bevel-tab);
  background: var(--surface);
  min-width: 0;
  min-height: 0;
  padding: 5px 9px;
  color: #000000;
}

.find-tab.active {
  margin-top: -2px;
  padding-bottom: 3px;
  z-index: 8;
}

.find-panel {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 9px 8px;
  box-shadow: var(--bevel-raised);
  background: var(--surface);
}

.find-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.find-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.find-row > span {
  width: 88px;
  text-align: right;
  flex: none;
}

.find-row input,
.find-row select {
  flex: 1;
  min-width: 0;
}

.find-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
}

.find-buttons button {
  width: 88px;
}

.find-results {
  margin-top: 8px;
  box-shadow: var(--bevel-sunken);
  background: #ffffff;
}

.find-head,
.find-row-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.find-head {
  background: var(--surface);
}

.find-head > span {
  box-shadow: var(--bevel-raised);
  background: var(--surface);
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
}

.find-row-item {
  background: transparent;
  box-shadow: none;
  min-height: 0;
  padding: 1px 0;
  color: #000000;
}

.find-row-item.selected {
  background: #000080;
  color: #ffffff;
}

.find-row-item > span {
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.find-row-item .col-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.find-name-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.col-name {
  flex: 1.5 1 0;
  min-width: 0;
}

.col-folder {
  flex: 2 1 0;
  min-width: 0;
}

.col-size {
  flex: 0 0 52px;
  text-align: right;
}

.col-type {
  flex: 1.4 1 0;
  min-width: 0;
}

.find-rows {
  height: 132px;
  overflow-y: auto;
  overflow-x: hidden;
}

.find-status {
  min-height: 17px;
}

@media (pointer: coarse) {
  .w-find {
    width: 96vw;
    max-width: 440px;
  }

  .find-panel {
    flex-direction: column;
  }

  .find-buttons {
    flex-direction: row;
  }

  .find-buttons button {
    flex: 1;
    width: auto;
    min-height: 32px;
  }

  .find-row > span {
    width: 74px;
  }

  /* A result is something you tap once, so it gets a thumb sized row. */
  .find-row-item {
    min-height: 32px;
  }

  .find-rows {
    height: 160px;
  }

  /* On a telephone there is no room for four columns, so the folder and the
     type go and the name and the size stay. */
  .find-head .col-folder,
  .find-head .col-type,
  .find-row-item .col-folder,
  .find-row-item .col-type {
    display: none;
  }
}

/* ---------- painter ---------- */

.slot-painter {
  left: 14%;
  top: 8%;
}

.w-painter {
  width: 412px;
}

.painter-main {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.painter-tools {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px;
  align-content: start;
  /* Hugs its buttons: an 800px sunken frame around twelve small buttons is a
     frame around nothing. */
  align-self: flex-start;
  box-shadow: var(--bevel-thin-sunken);
  padding: 3px;
  flex: none;
}

.painter-tool {
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.painter-tool.pressed {
  box-shadow: var(--bevel-pressed);
}

.painter-pane {
  flex: 1;
  min-width: 0;
  box-shadow: var(--bevel-sunken);
  background: #808080;
  padding: 2px;
  display: flex;
}

/* The backing store is 320 by 240 whatever the pane does, and nearest
   neighbour scaling keeps a one pixel stroke looking like one pixel. */
.painter-canvas {
  /* One to one where there is room, so a canvas pixel is a screen pixel and
     the grey of the workspace shows around the sheet the way it did. */
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  background: #ffffff;
  cursor: crosshair;
  /* Only the canvas refuses the browser's gestures. The window around it still
     scrolls and still zooms. */
  touch-action: none;
}

/* The wrapper hugs the canvas, shrink and all, so the handles ride the
   sheet's rendered edges wherever those happen to be. */
.painter-sheet {
  position: relative;
  /* Block with fit-content, not inline-block: an inline-block wrapper sits
     on the pane's text baseline and carries a descender gap under it, which
     grew the restored window by nine pixels and reddened the restore check. */
  display: block;
  width: fit-content;
  max-width: 100%;
}

.sheet-handle {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #000080;
  border: 1px solid #ffffff;
}

.handle-e { right: -5px; top: 50%; margin-top: -4px; cursor: ew-resize; }
.handle-s { bottom: -5px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }

.sheet-outline {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px dashed #000000;
  pointer-events: none;
}

.painter-textrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.painter-textrow input {
  flex: 1;
  min-width: 0;
}

.painter-bottom {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.painter-current {
  box-shadow: var(--bevel-thin-sunken);
  padding: 3px;
  flex: none;
}

.painter-current span {
  display: block;
  width: 26px;
  height: 26px;
  box-shadow: inset 0 0 0 1px #000000;
}

.painter-swatches {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 1px;
  flex: 1;
  min-width: 0;
  /* The colour box is fixed, not fluid: unbounded, maximizing stretched each
     swatch to 131x15. The 1fr stays so it still fits a telephone. */
  max-width: 380px;
  box-shadow: var(--bevel-thin-sunken);
  padding: 2px;
}

.painter-swatch {
  height: 15px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  box-shadow: inset 0 0 0 1px #808080;
}

.painter-swatch.picked {
  box-shadow: inset 0 0 0 2px #000000;
}

.painter-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.painter-count {
  margin-left: auto;
  color: var(--ink-dim);
}

@media (pointer: coarse) {
  .w-painter {
    width: 96vw;
    max-width: 440px;
  }

  .painter-tool {
    width: 34px;
    height: 34px;
  }

  .painter-swatch {
    height: 22px;
  }

  .painter-actions button {
    min-height: 32px;
  }
}

/* ---------- clip art and fancy text ---------- */

.painter-art {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-top: 5px;
  padding: 4px;
  box-shadow: var(--bevel-thin-sunken);
}

.painter-stamp {
  min-width: 0;
  min-height: 0;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.painter-stamp.pressed {
  box-shadow: var(--bevel-pressed);
}

.slot-fancy {
  left: 47%;
  top: 44%;
}

.w-fancy {
  width: 396px;
}

.fancy-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.fancy-row input {
  flex: 1;
  min-width: 0;
}

.fancy-main {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.fancy-styles {
  list-style: none;
  margin: 0;
  padding: 2px;
  width: 108px;
  flex: none;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
}

.fancy-styles button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  padding: 2px 4px;
  color: #000000;
}

.fancy-styles button.picked {
  background: #000080;
  color: #ffffff;
}

.fancy-preview {
  flex: 1;
  min-width: 0;
  box-shadow: var(--bevel-sunken);
  background: #808080;
  padding: 2px;
  display: flex;
}

.fancy-preview canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
}

.fancy-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.fancy-hint {
  color: var(--ink-dim);
  overflow: hidden;
}

@media (pointer: coarse) {
  .w-fancy {
    width: 96vw;
    max-width: 440px;
  }

  .fancy-main {
    flex-direction: column;
  }

  .fancy-styles {
    width: auto;
  }

  .fancy-styles button {
    min-height: 30px;
  }

  .painter-stamp {
    min-height: 40px;
  }

  .fancy-actions button {
    min-height: 32px;
  }
}

/* ---------- the printer ---------- */

.slot-printers {
  left: 30%;
  top: 24%;
}

.w-printers {
  width: 380px;
}

.printers-head {
  display: flex;
  margin-top: 3px;
  background: #c0c0c0;
}

.printers-head span {
  box-shadow: var(--bevel-raised);
  background: var(--surface);
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}

.printers-queue {
  height: 96px;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
}

.dialog-print {
  width: 360px;
}

.print-group {
  margin-bottom: 8px;
}

.print-line {
  display: flex;
  gap: 6px;
  margin: 2px 0;
}

.print-line > span:first-child {
  width: 54px;
  flex: none;
}

.print-props {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.print-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 0;
}

.print-copies {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.print-copies input {
  width: 52px;
}

.print-doc {
  margin: 0 0 8px 0;
  color: var(--ink-dim);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dialog-printing,
.dialog-printfail {
  width: 320px;
}

.print-status {
  margin: 2px 0 8px 0;
}

/* The File Download box. It borrows the printer's segmented bar because the
   two bars are the same bar: fourteen cells that stop short of the end. */
.dialog-download {
  width: min(340px, calc(100vw - 20px));
}

.dl-line {
  margin: 0 0 2px 0;
}

.dl-name {
  font-weight: bold;
  margin: 0 0 8px 0;
  word-break: break-word;
}

.dl-stats {
  margin: 2px 0;
}

/* The segmented block bar: fourteen cells, filled left to right, and it never
   fills the last four because it never gets there. */
.print-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  box-shadow: var(--bevel-sunken);
  background: #ffffff;
  margin-bottom: 10px;
}

.print-bar span {
  flex: 1;
  height: 14px;
  background: #ffffff;
}

.print-bar span.on {
  background: #000080;
}

.print-failure {
  min-height: 34px;
}

@media (pointer: coarse) {
  .dialog-print,
  .dialog-printing,
  .dialog-printfail {
    width: 94vw;
    max-width: 360px;
  }

  .w-printers {
    width: 96vw;
    max-width: 440px;
  }
}

/* ---------- cometlink reference 96 ---------- */

.slot-reference {
  left: 12%;
  top: 6%;
}

.w-reference {
  width: 640px;
}

/* ---------- line monitor ----------
   The graph is drawn dark on purpose, the way every period monitor drew its
   chart, and the grid lives inside the SVG rather than in a background so
   nothing here needs a gradient. */
.w-monitor {
  width: min(300px, calc(100vw - 16px));
}

.mon-label {
  margin: 2px 2px 4px;
  font-size: 11px;
}

.mon-graph {
  display: block;
  width: 100%;
  height: 96px;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}

.mon-readouts {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
}

/* ---------- help ----------
   Contents down the left, the topic beside it. Narrower than the encyclopaedia
   because the topics are prose rather than plates. */
.w-help {
  width: 560px;
}

.help-main {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}

.help-side {
  width: 176px;
  flex: none;
}

.help-heading {
  margin: 0 0 3px 0;
}

.help-list {
  list-style: none;
  margin: 0;
  padding: 2px;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
  height: 268px;
  overflow-y: auto;
}

.help-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  padding: 2px 4px;
  color: #000000;
}

.help-row.picked {
  background: #000080;
  color: #ffffff;
}

/* The topic scrolls itself rather than growing the window, like every other
   pane on this machine. */
.help-topic {
  flex: 1;
  min-width: 0;
  height: 268px;
  overflow-y: auto;
  padding: 6px 8px;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
}

.help-topic h2 {
  margin: 0 0 6px 0;
  font-size: 11px;
}

.help-topic p {
  margin: 0 0 8px 0;
}

.ref-main {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}

.ref-side {
  width: 172px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ref-find {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ref-find input {
  flex: 1;
  min-width: 0;
}

.ref-list {
  list-style: none;
  margin: 0;
  padding: 2px;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
  height: 296px;
  overflow-y: auto;
}

.ref-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  padding: 2px 4px;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-list button.picked {
  background: #000080;
  color: #ffffff;
}

.ref-none {
  margin: 0;
  color: var(--ink-dim);
}

/* The article itself is the one place in this window that is reading rather
   than chrome, so it takes the reading face. */
.ref-article {
  flex: 1;
  min-width: 0;
  height: 322px;
  overflow-y: auto;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
  padding: 10px 12px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.45;
}

.ref-title {
  font-family: 'Times New Roman', Times, serif;
  font-size: 24px;
  margin: 0 0 8px 0;
  color: #000080;
}

.ref-article p {
  margin: 0 0 10px 0;
}

.ref-plate {
  float: right;
  margin: 0 0 8px 10px;
  padding: 2px;
  box-shadow: var(--bevel-thin-sunken);
  background: #c0c0c0;
}

.ref-plate canvas {
  display: block;
  image-rendering: pixelated;
}

.ref-see {
  clear: both;
  border-top: 1px solid #808080;
  padding-top: 8px;
  margin-bottom: 0;
}

.ref-link {
  background: transparent;
  box-shadow: none;
  border: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  color: #0000cc;
  text-decoration: underline;
  cursor: pointer;
}

.ref-link:active {
  color: #cc0000;
}

.ref-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.ref-count {
  margin-left: auto;
  color: var(--ink-dim);
}

@media (pointer: coarse) {
  .w-reference {
    width: 96vw;
    max-width: 440px;
  }

  .ref-main {
    flex-direction: column;
  }

  .ref-side {
    width: auto;
  }

  /* On a 390 by 844 telephone the scrolling panes give up the height, or the
     Multimedia button disappears behind the clock. */
  .ref-list {
    height: 104px;
  }

  .ref-list button {
    min-height: 30px;
    line-height: 26px;
  }

  /* flex: none matters: in a column, flex: 1 zeroes the basis and the pane
     grows to the whole article, hanging below the taskbar. */
  .ref-article {
    flex: none;
    height: 232px;
  }

  /* At 390px the plate would leave a two word column beside it. */
  .ref-plate {
    float: none;
    margin: 0 0 10px 0;
    display: inline-block;
    max-width: 100%;
  }

  .ref-plate canvas {
    max-width: 100%;
    height: auto;
  }

  .ref-actions button {
    min-height: 32px;
  }
}

/* ---------- the recycle bin listing ---------- */

.w-recycle {
  width: 560px;
}

.bin-head,
.bin-pick {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.bin-head {
  margin-top: 3px;
  background: #c0c0c0;
}

.bin-head > span {
  box-shadow: var(--bevel-raised);
  background: var(--surface);
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
}

/* max-height, not height: rows are 18px fine and 32px coarse, and a fixed
   height for one hid two rows on the other. */
.bin-rows {
  max-height: 156px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
}

@media (pointer: coarse) {
  .bin-rows {
    max-height: 224px;
  }
}

.bin-pick {
  background: transparent;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  padding: 1px 0;
  color: #000000;
}

.bin-row.selected .bin-pick {
  background: #000080;
  color: #ffffff;
}

.bin-pick > span,
.bin-head > span {
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bin-pick .bin-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bin-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bin-name {
  flex: 2 1 0;
  min-width: 0;
}

.bin-where {
  flex: 1.6 1 0;
  min-width: 0;
}

.bin-when {
  flex: 0 0 82px;
}

.bin-type {
  flex: 1.2 1 0;
  min-width: 0;
}

.bin-size {
  flex: 0 0 54px;
  text-align: right;
}

.bin-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.bin-status {
  min-height: 17px;
}

@media (pointer: coarse) {
  .w-recycle {
    width: 96vw;
    max-width: 440px;
  }

  .bin-pick {
    min-height: 32px;
  }

  .bin-actions button {
    min-height: 32px;
  }

  /* Five columns will not fit on a telephone, so the two that matter stay. */
  .bin-head .bin-where,
  .bin-head .bin-when,
  .bin-head .bin-type,
  .bin-pick .bin-where,
  .bin-pick .bin-when,
  .bin-pick .bin-type {
    display: none;
  }
}

/* A hint under a search that found nothing. Greyed and inert on purpose: a row
   that looked like a result but did nothing would be worse than no row. */
.find-hint {
  padding: 4px 6px;
  color: var(--surface-shadow);
  text-shadow: 1px 1px 0 var(--surface-hilight);
  cursor: default;
  pointer-events: none;
}

.folder-rows {
  height: 96px;
}

/* People are also searching for, under a directory search that found nothing. */
.also-searching {
  border: 1px solid #808080;
  padding: 6px 10px;
  margin: 10px 0;
  background: #ffffcc;
}

.also-searching h2 {
  font-size: 15px;
  margin: 0 0 4px 0;
}

.also-searching ul {
  margin: 0;
  padding-left: 22px;
}

/* ---------- save as ---------- */

/* The dialog this machine never had. It is the reason Notepad greyed four of
   its six File items and Painter would not let you touch a file you had
   opened. */
.dialog-saveas {
  width: 360px;
  max-width: 92vw;
}

.saveas-body {
  padding: 8px;
}

.saveas-where,
.saveas-name-row,
.saveas-type-row {
  gap: 6px;
  margin-bottom: 6px;
}

.saveas-where label,
.saveas-name-row label,
.saveas-type-row label {
  width: 84px;
  flex: 0 0 auto;
}

.saveas-where select,
.saveas-name-row input,
.saveas-type-row select {
  flex: 1;
  min-width: 0;
}

/* What is already there. Sunken and white, like every other listing. */
.saveas-list {
  height: 118px;
  overflow: auto;
  background: #ffffff;
  box-shadow: var(--bevel-sunken);
  margin-bottom: 8px;
  padding: 2px;
}

.saveas-empty {
  margin: 4px 6px;
  color: #808080;
}

.saveas-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 0;
  min-width: 0;
  padding: 1px 3px;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.saveas-row.picked {
  background: #000080;
  color: #ffffff;
}

.saveas-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Refusals go here rather than into a message box: the alert cap is twelve and
   it exists to stop controls apologising, not to be spent on a full disk. */
.saveas-status {
  margin: 0 0 8px 0;
  min-height: 13px;
}

/* The dialog under a finger: the fields sat below the 30x26 floor everything
   else meets. Found by the harness. */
@media (pointer: coarse) {
  .saveas-row {
    min-height: 26px;
  }

  .saveas-list {
    height: 132px;
  }

  .saveas-body input,
  .saveas-body select,
  .saveas-body button {
    min-height: 30px;
  }
}

/* The drive's properties sheet. Three columns of figures that line up on
   their own edges, and a pie that is two flat wedges because that is what a
   pie chart was when a machine drew one. */
.dialog-drive {
  width: min(320px, calc(100vw - 20px));
}

.drive-line {
  display: flex;
  gap: 8px;
  margin: 2px 0;
  align-items: center;
}

.drive-line > :first-child {
  min-width: 84px;
}

.drive-line > :last-child {
  margin-left: auto;
}

.drive-key {
  display: flex;
  align-items: center;
  gap: 5px;
}

.drive-swatch {
  width: 9px;
  height: 9px;
  border: 1px solid #000000;
  display: inline-block;
}

.drive-used {
  background: #000080;
}

.drive-free {
  background: #008080;
}

.drive-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 8px 0 10px 0;
}

/* The default action in a context menu, which the period drew in bold. */
.ctx-default {
  font-weight: bold;
}

/* Renaming in place. The field sits where the label sat and is the width of
   the icon box, so the column does not jump while a name is being typed. */
.desk-icon-rename {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  padding: 0 2px;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
}

/* The bar's own sheet. Narrow, one panel, and the greyed options sit in the
   same column as the one that works so the sheet reads as a set. */
.dialog-taskbar {
  width: min(300px, calc(100vw - 20px));
}

.task-group {
  margin: 8px 0 10px 0;
  padding: 10px;
}

.task-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}

.task-opt.dead {
  color: #808080;
  text-shadow: 1px 1px 0 #ffffff;
}

/* The outline a window leaves on its way to the bar. A dotted rectangle and
   nothing else: the period drew one of these rather than the window itself,
   because a rectangle could be drawn eight times and a window could not. It
   sits over the bar it is flying to, and under any menu. */
.minimize-trace {
  position: fixed;
  border: 1px dotted #000000;
  pointer-events: none;
  z-index: 35;
}

/* The defragmenter. A grid of clusters, a bar, and a key naming every colour
   on the grid, because a grid of coloured squares that names none of them is
   a screen saver rather than a tool. */
.w-defrag {
  width: 380px;
}

.defrag-line {
  margin: 2px 0 6px 0;
}

.defrag-grid {
  display: block;
  box-shadow: var(--bevel-sunken);
  background: #c0c0c0;
  margin: 4px 0 8px 0;
  image-rendering: pixelated;
  max-width: 100%;
}

.defrag-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.defrag-key span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.defrag-chip {
  width: 9px;
  height: 9px;
  border: 1px solid #000000;
  display: inline-block;
}

.chip-used { background: #000080; }
.chip-free { background: #ffffff; }
.chip-fixed { background: #808080; }
.chip-read { background: #00cc00; }
.chip-write { background: #cc0000; }

/* ---------- the prompt ---------- */

/* Light letters on black, which is the one window in this machine that is not
   grey, because it is the one window that is not part of the shell. */
/* Eighty columns, which is not a taste: the listing is a fixed-width format
   and a row of it that wraps is a row that has stopped meaning anything.
   Courier New advances 0.6em, so 12px buys 7.2px a character and eighty of
   them want 576. The rest is the bevel and the padding. */
.w-dos {
  width: 620px;
}

.dos-body {
  padding: 3px;
}

.dos-screen {
  background: #000000;
  color: #c0c0c0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 6px;
  height: 300px;
  overflow: auto;
  box-shadow: var(--bevel-sunken);
  cursor: text;
}

.dos-out {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.dos-line {
  display: flex;
  align-items: baseline;
}

.dos-prompt {
  white-space: pre;
}

/* The caret is the screen's own. No border, no box, no background: the line
   you are typing has to look like the lines above it or the illusion that the
   screen is being printed on goes. Written with the parent in front of it
   because the sheet styles fields as input[type="text"], which outranks a
   single class and put a sunken grey box across the bottom of the screen. */
.dos-line .dos-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  outline: none;
  appearance: none;
  caret-color: #c0c0c0;
}

@media (pointer: coarse) {
  .w-dos {
    width: 100%;
  }

  /* A telephone cannot have eighty columns at any size a thumb can read, so
     it gets the widest listing that does fit: a DIR row is forty five
     characters and 12px keeps those whole on a 390px screen. Only the memory
     report is wider, and it wraps rather than being cut. */
  .dos-screen {
    height: 46vh;
  }
}

/* ---------- the power-on test ---------- */

/* Light grey on black in a fixed pitch, which is what a text mode screen was
   and the only palette this one ever had. Not a window: the machine has not
   got as far as drawing windows yet. */
/* The drive being read, between the self test finishing and the desktop
   arriving. Same pointer a program coming off the disk gets. */
.boot-screen.reading {
  cursor: wait;
}

.boot-screen {
  position: fixed;
  inset: 0;
  background: #000000;
  color: #c0c0c0;
  font-family: 'Courier New', monospace;
  /* The widest line here is fifty one characters and this screen is a fixed
     pitch format: a detection line that wraps is two lines that no longer
     line up with anything. Courier advances 0.6em, so fifty one of them want
     31em, and the type is whatever size makes 31em fit the window. Sized off
     the viewport rather than off a coarse pointer query, because a narrow
     desktop window is just as narrow as a telephone. */
  font-size: min(15px, calc((100vw - 44px) / 31));
  line-height: 1.35;
  padding: 18px 20px;
  z-index: 100;
  cursor: default;
  overflow: hidden;
}

/* The sheet draws every pre as a sunken field, and this is not a field: it is
   what the machine is printing on a screen it has not finished testing yet.
   Written out rather than trusted to inherit, because the box it drew round
   the top of this screen was the first thing anybody noticed. */
.boot-out {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The two lines along the bottom that every one of these screens carried. */
.boot-foot {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
}

@media (pointer: coarse) {
  /* The type sizes itself off the window above; a telephone only needs the
     margins back. */
  .boot-screen {
    padding: 12px 10px;
    font-size: min(15px, calc((100vw - 24px) / 31));
  }

  .boot-foot {
    left: 10px;
    right: 10px;
  }
}

/* ---------- resized by its border ---------- */

/* A window dragged by its frame carries its own width and height inline, and
   these are what let the box those numbers describe actually be the box: the
   stylesheet gives every window a width of its own, the slot shrink wraps
   whatever is inside it, and the insides need the same fill rules maximize
   needs, for the same reason - a window given a height whose contents do not
   take it is a window with an empty strip down the bottom.

   The whole set lives behind min-width 701 so that below it the class is
   inert: every slot is full bleed there, and the first version of this let
   the fill rules leak onto a telephone, where height auto on the one thing
   that takes the room collapsed a window to its title bar. */
@media (min-width: 701px) {
  .window-slot.resized > .window,
  .window-slot.resized > .browser {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .shell-slot.resized > .window > .shell-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .shell-slot.resized .notepad-body,
  .shell-slot.resized .pat-board,
  .shell-slot.resized .painter-main,
  .shell-slot.resized .find-results,
  .shell-slot.resized .source-body,
  .shell-slot.resized .shell-icons,
  .shell-slot.resized .bin-rows,
  .shell-slot.resized .dos-screen,
  .shell-slot.resized .printers-queue {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .shell-slot.resized .find-results,
  .shell-slot.resized .source-body,
  .shell-slot.resized .shell-icons,
  .shell-slot.resized .bin-rows {
    overflow: auto;
  }

  .shell-slot.resized .shell-icons {
    align-content: flex-start;
  }

  .shell-slot.resized .painter-pane {
    align-items: flex-start;
  }

  /* Voyager is its own shape and its own markup, and the page is the thing
     in it that takes the room. */
  .window-slot.resized > .browser > .page-view {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* Below 700px the class is inert and only the inline numbers are left, and
   only an important rule outranks an inline style. The numbers mirror the
   ordinary phone rules, so a window resized somewhere wider looks exactly
   like one that never was. */
@media (max-width: 700px), (pointer: coarse) {
  .window-slot.resized > .window {
    width: 96vw !important;
    max-width: 440px;
    height: auto !important;
  }

  .window-slot.resized > .browser {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ---------- the time zone tab ---------- */

.dt-zone-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-zone-select {
  width: 100%;
}

.dt-world {
  display: block;
  width: 100%;
  box-shadow: var(--bevel-sunken);
  image-rendering: pixelated;
}

/* ---------- chat rooms ---------- */

/* The row of doors along the top of the chat. The one you are in is pressed,
   the way a held button is, and the full one is a door like the others right
   up until you press it. */
.chat-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 2px;
}

.chat-room {
  font-size: 11px;
  min-width: 0;
  padding: 2px 8px;
}

.chat-room.here {
  box-shadow: var(--bevel-sunken);
  font-weight: bold;
}

@media (pointer: coarse) {
  .chat-room {
    min-height: 30px;
    font-size: 13px;
  }
}

/* ---------- display properties depth ---------- */

.display-bg-row {
  display: flex;
  gap: 10px;
}

.display-bg-row .field-row-stacked {
  flex: 1 1 0;
  min-width: 0;
}

.display-placement {
  gap: 12px;
  margin-top: 4px;
}

/* The little active window in the appearance preview: one strip of whatever
   the scheme paints, white lettering, exactly like the bars it stands for. */
.crt-titlebar {
  color: #ffffff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 3px;
  margin: 10px 8px 0 8px;
}

/* The second tab of the bar's sheet: three greyed buttons that want a file
   system, and one that really empties the Documents menu. */
.task-note {
  margin: 6px 0;
  font-size: 11px;
}

.task-buttons {
  gap: 6px;
  align-items: center;
}