/* Look door. Measure the image. No verdict chrome. */
.look-nav{margin:.5rem 0 1rem}
.look-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}
@media (max-width:60rem){.look-grid{grid-template-columns:1fr}}
.look-panel{border:1px solid #2a2a2e;background:#0d0d0f;padding:.5rem}
.look-panel h2{font:700 .78rem/1.2 ui-monospace,Menlo,monospace;margin:0 0 .4rem;color:#c8c8d0}
.look-panel canvas,.look-panel img{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
.look-box{font:.82rem/1.4 ui-monospace,Menlo,monospace;color:#f0d9a8;border:1px solid #8a6a2a;background:#161618;padding:.6rem .75rem;margin:1rem 0}
.look-box[data-empty="1"]{color:#8a8a92;border-color:#2a2a2e}
.look-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin:.75rem 0}
.look-row label{margin:0}
.look-row input[type=file]{display:block;margin-top:.25rem}
.face-wrap{overflow:auto;border:1px solid #2a2a2e;background:#0d0d0f;padding:.5rem}
.face-wrap canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.gutter-key{display:flex;flex-wrap:wrap;gap:.75rem;font:.75rem/1.3 ui-monospace,Menlo,monospace;color:#8a8a92;margin:.5rem 0}
.gutter-key i{display:inline-block;width:.8rem;height:.8rem;vertical-align:middle;margin-right:.25rem;border:1px solid #3a3a40}
.flip-strip{margin:0 0 .35rem;border:1px solid #2a2a2e}
.flip-strip canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.net159-dude{width:8rem;margin:1rem 0}
.net159-dude .px{
  display:block;width:4px;height:4px;margin:0 auto;
  background:transparent;transform:scale(2.2);transform-origin:top left;
  box-shadow:
     4px  0px 0 #c45,  8px  0px 0 #c45, 12px  0px 0 #c45,
     0px  4px 0 #c45,  4px  4px 0 #0d0d0f,  8px  4px 0 #0d0d0f, 12px  4px 0 #c45,
     0px  8px 0 #c45,  4px  8px 0 #c45,  8px  8px 0 #c45, 12px  8px 0 #c45,
     4px 12px 0 #c45,  8px 12px 0 #c45,
     0px 16px 0 #c45,  4px 16px 0 #c45,  8px 16px 0 #c45, 12px 16px 0 #c45,
     0px 20px 0 #c45, 12px 20px 0 #c45;
}
.net159-dude .who{display:block;margin-top:3.2rem;font:700 .8rem/1.2 ui-monospace,Menlo,monospace;color:#e8a0a0}
.loop-steps{list-style:none;padding:0;margin:1rem 0}
.loop-steps li{border:1px solid #2a2a2e;padding:.75rem;margin:0 0 .5rem;background:#121214}
.loop-steps b{font:700 .85rem/1.2 ui-monospace,Menlo,monospace}
.recipe{font:.78rem/1.4 ui-monospace,Menlo,monospace}
.two-rooms{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0}
@media (max-width:50rem){.two-rooms{grid-template-columns:1fr}}
.room{border:1px solid #2a2a2e;background:#121214;padding:.75rem}
.room h2{margin:.1rem 0 .5rem;font:700 .95rem/1.2 ui-monospace,Menlo,monospace}
.room.archive{border-color:#5a4a2a}
.room.computer{border-color:#2a4a3a}
.room table{font:.82rem/1.35 ui-monospace,Menlo,monospace}
.bar-row{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.bar-row b{min-width:4.5rem;font:.75rem/1 ui-monospace,Menlo,monospace}
.bar{flex:1;height:.7rem;background:#1a1a1e;border:1px solid #2a2a2e}
.bar i{display:block;height:100%;background:#c8a060}
.bar.exhale i{background:#60a078}
.door-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.6rem;margin:1rem 0}
.door-cards a{display:block;border:1px solid #2a2a2e;background:#121214;padding:.7rem .8rem;text-decoration:none;color:#e6e6e8}
.door-cards a:hover{background:#1c1c22;border-color:#5a5a60}
.door-cards b{display:block;font:700 .9rem/1.2 ui-monospace,Menlo,monospace;margin:0 0 .3rem}
.door-cards span{font:.82rem/1.35 sans-serif;color:#9c9ca3}
.prog{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.prog i{font:700 .78rem/1.2 ui-monospace,Menlo,monospace;border:1px solid #3a3a40;padding:.25rem .45rem;background:#161618}
.pair-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media (max-width:50rem){.pair-demo{grid-template-columns:1fr}}
.pair-demo pre{margin:0;min-height:8rem}