.bp{min-height:100vh;background:#ebe8de;color:#111;padding:24px;font-family:Arial,sans-serif;background-image:linear-gradient(#00000009 1px,transparent 0);background-size:100% 7px}.bp *{box-sizing:border-box}.bp svg{width:18px}.bp header{border:4px solid #111;display:flex;align-items:center;height:58px;box-shadow:7px 7px #111}.bp-mark{font:900 18px monospace;color:#111;text-decoration:none;padding:15px;border-right:4px solid}.bp header nav{display:flex;height:100%;align-items:center}.bp header nav a{height:100%;display:grid;place-items:center;padding:0 16px;color:#111;text-decoration:none;font:800 10px monospace}.bp header nav a.on{background:#111;color:#ebe8de}.bp header>button{margin-left:auto;height:100%;border:0;border-left:4px solid;background:#df4b2e;font:900 10px monospace;display:flex;gap:7px;align-items:center}.bp-title{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;margin:55px 0 25px}.bp-title small{font:900 10px monospace;letter-spacing:.17em}.bp-title h1{font:900 clamp(42px,8vw,104px)/.8 Arial Black;margin:9px 0}.bp-title p{font:700 13px/1.5 Arial;border-left:4px solid;padding:16px}.bp-tools{border:4px solid}.bp-tools,.bp-tools label{display:flex;align-items:center}.bp-tools label{gap:8px;padding:0 11px;flex:1}.bp-tools input{height:45px;background:transparent;border:0;outline:0;width:100%;font-weight:700}.bp-tools [role=tablist]{display:flex}.bp-tools button{height:45px;width:45px;border:0;border-left:4px solid;background:transparent}.bp-tools button[data-state=active]{background:#111;color:#fff}.bp-tools>span{font:800 9px monospace;padding:18px;border-left:4px solid}.bp-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:4px solid}.bp-grid>a{aspect-ratio:1;border-right:4px solid;border-bottom:4px solid;display:grid;place-items:center;position:relative;overflow:hidden;color:#111;text-decoration:none}.bp-grid>a .chip svg{width:46px;height:46px;position:relative}.bp-grid b{font:800 9px monospace}.bp-grid small{position:absolute;right:6px;bottom:5px;font:800 8px monospace}.noise{position:absolute;inset:0;background:repeating-radial-gradient(circle,#111 0 1px,transparent 1px 5px);opacity:.12}.xerox>a:nth-child(3n){background:#111;color:#ebe8de}.xerox svg{filter:drop-shadow(3px 1px currentColor)}.concrete{background:#171715;border-color:#77746b}.concrete>a{color:#ddd;border-color:#77746b}.bp-hero.concrete .chip,.concrete .chip{width:83px;height:83px;background:#aaa69b;color:#171715;display:grid;place-items:center;clip-path:polygon(9% 0,92% 4%,100% 83%,79% 100%,3% 91%,0 15%);box-shadow:inset 7px 6px #ccc8bd,inset -8px -7px #6f6d66}.bp-grid.list{grid-template-columns:1fr}.bp-grid.list>a{aspect-ratio:auto;height:62px;display:grid;grid-template-columns:80px 1fr 50px;justify-items:start;padding:0 20px}.bp-grid.list>a .chip svg{width:28px}.bp-detail{display:grid;grid-template-columns:1.3fr 1fr;border:4px solid}.bp-hero{min-height:520px;display:grid;place-items:center;background:#171715}.bp-hero.concrete .chip{width:240px;height:240px}.bp-hero svg{width:120px;height:120px}.bp-detail aside{padding:28px;border-left:4px solid}.bp-detail h2{font:900 38px Arial Black}.bp-code{background:#111;color:#eee;padding:15px;font:12px monospace;display:flex;justify-content:space-between}.bp-code button{background:none;color:#fff;border:0}.bp-related{display:grid;grid-template-columns:repeat(3,1fr);border-left:2px solid;border-top:2px solid}.bp-related a{color:#111;text-decoration:none;display:grid;place-items:center;gap:7px;border-right:2px solid;border-bottom:2px solid;padding:17px;font:8px monospace}.bp footer{border:4px solid;border-top:0;padding:13px;display:flex;justify-content:space-between;font:900 9px monospace}.bp-tip{background:#111;color:#fff;padding:7px;font:10px monospace}@media(max-width:800px){.bp-grid{grid-template-columns:repeat(3,1fr)}.bp header nav a{padding:0 7px}.bp-detail,.bp-title{grid-template-columns:1fr}}@media(max-width:600px){.bp{padding:12px}.bp header{height:auto;display:grid;grid-template-columns:auto 1fr;box-shadow:4px 4px #111}.bp-mark{grid-row:1;height:52px}.bp header nav{grid-row:2;grid-column:1/3;overflow-x:auto;border-top:4px solid;height:48px}.bp header nav a{flex:0 0 auto;padding:0 12px;min-height:44px}.bp header>button{grid-row:1;grid-column:2;margin:0;justify-self:end;min-height:48px}.bp-title{display:block;margin:38px 0 20px}.bp-title h1{font-size:43px}.bp-title p{border-left:0;border-top:4px solid;padding:12px 0}.bp-tools{display:grid;grid-template-columns:1fr auto}.bp-tools label{min-width:0}.bp-tools>span{display:none}.bp-grid{grid-template-columns:repeat(2,1fr)}.bp-grid>a{min-height:150px}.bp-grid.list>a{height:68px;min-height:68px;grid-template-columns:55px 1fr 30px;padding:0 10px}.bp-detail{display:block}.bp-hero{min-height:330px}.bp-hero.concrete .chip{width:170px;height:170px}.bp-detail aside{border-left:0;border-top:4px solid;padding:20px}.bp-related{grid-template-columns:repeat(2,1fr)}.bp footer{gap:8px;flex-wrap:wrap}}