/* the shop's pieces on every page: account button, dialogs, buy box. Own colours, so they look the same on light and dark pages. */
.st-bar{position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:12px;z-index:9000;font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.st-pill{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#0A0A0A;color:#F2F2F0;border:1px solid #3A3A38;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.st-pill:hover{border-color:#FF6A13}.st-pill:focus-visible{outline:2px solid #FF6A13;outline-offset:2px}
.st-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:#0F0F0E;border:1px solid #3A3A38;padding:6px;display:grid;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.st-menu[hidden]{display:none}
.st-menu a,.st-menu button{all:unset;cursor:pointer;padding:10px 10px;color:#F2F2F0;text-transform:none;letter-spacing:0;font:400 14px/1.2 "Jost","Helvetica Neue",Arial,sans-serif}
.st-menu a:hover,.st-menu button:hover,.st-menu a:focus-visible,.st-menu button:focus-visible{background:#1C1C1A;color:#FF8440}
.st-who{margin:0;padding:8px 10px 10px;color:#8E8E8A;border-bottom:1px solid #262625;margin-bottom:4px;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.st-back{position:fixed;inset:0;z-index:9500;background:rgba(5,5,5,.66);display:grid;place-items:center;padding:16px}
.st-dlg{position:relative;width:min(440px,100%);background:#0F0F0E;color:#F2F2F0;border:1px solid #3A3A38;padding:28px 26px 24px;font:15px/1.6 "Jost","Helvetica Neue",Arial,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.st-dlg h2{margin:0 0 6px;font:500 26px/1.1 "Jost","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;color:#F2F2F0}
.st-x{all:unset;cursor:pointer;position:absolute;right:12px;top:8px;font-size:24px;color:#8E8E8A;padding:4px 8px}.st-x:hover{color:#F2F2F0}
.st-lead{margin:0 0 16px;color:#C9C9C5;font-weight:300}
.st-form{display:grid;gap:12px}
.st-form input{font:15px "IBM Plex Mono",ui-monospace,Menlo,monospace;padding:12px 12px;background:#0A0A0A;color:#F2F2F0;border:1px solid #3A3A38;border-radius:0;width:100%;box-sizing:border-box}
.st-form input:focus{outline:2px solid #FF6A13;outline-offset:0;border-color:#FF6A13}
.st-btn{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:13px 20px;border:1px solid #F2F2F0;color:#F2F2F0;font:500 13px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.st-btn.primary{background:#FF6A13;border-color:#FF6A13;color:#0A0A0A}.st-btn.primary:hover{background:#FF8440;border-color:#FF8440}
.st-btn:hover{background:#F2F2F0;color:#0A0A0A}.st-btn:focus-visible{outline:2px solid #F2F2F0;outline-offset:3px}
.st-btn[disabled]{opacity:.5;pointer-events:none}
.st-msg{margin:0;min-height:1.2em;color:#8E8E8A;font:13px "IBM Plex Mono",ui-monospace,Menlo,monospace}.st-msg.err{color:#FF8A80}
.st-ok{margin:0;color:#DADAD6;font-weight:300}.st-ok b{color:#F2F2F0;font-weight:500;overflow-wrap:anywhere}
.st-price{margin:0 0 14px;font:500 30px/1 "Jost","Helvetica Neue",Arial,sans-serif;color:#F2F2F0}.st-price span{font:300 14px "Jost","Helvetica Neue",Arial,sans-serif;color:#8E8E8A}
.st-list{list-style:none;margin:0;padding:0;border-top:1px solid #262625;max-height:50vh;overflow:auto}
.st-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #262625;font:13px "IBM Plex Mono",ui-monospace,Menlo,monospace;color:#8E8E8A}
.st-link{all:unset;cursor:pointer;color:#F2F2F0;font:15px "Jost","Helvetica Neue",Arial,sans-serif}.st-link:hover{color:#FF8440}
.st-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:9600;background:#0F0F0E;color:#F2F2F0;border:1px solid #3A3A38;border-left:3px solid #FF6A13;padding:12px 16px;font:14px/1.4 "Jost","Helvetica Neue",Arial,sans-serif;max-width:min(560px,calc(100% - 32px));transition:.25s;pointer-events:none}
.st-toast.on{opacity:1;transform:translate(-50%,0)}
/* the buy box on the product pages */
.buybox{margin-top:22px}
.buybox:empty{display:none}
.st-buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.buybox .st-price{margin:0}
.st-inc{margin:12px 0 0;color:#8E8E8A;font:13px/1.6 "IBM Plex Mono",ui-monospace,Menlo,monospace;max-width:34rem}
.st-owned{margin:0;padding:12px 14px;border-left:2px solid #4FA79F;background:#0F1514;color:#CFE6E2;font-weight:300}.st-owned b{color:#F2F2F0;font-weight:500}
.st-lock{font:12px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:0;text-transform:none;opacity:.75}
@media (max-width:640px){.st-bar{right:8px}.st-pill{padding:8px 12px}}
@media print{.st-bar,.st-toast{display:none}}

/* room for the account button in the pages' top bars */
nav.top,div.top{padding-right:140px}
@media (max-width:640px){nav.top,div.top{padding-right:112px}}
.buybox .st-btn.primary{background:none;color:#FF8440;border-color:#FF6A13}.buybox .st-btn.primary:hover{background:#FF6A13;color:#0A0A0A}