/* The prototype's styles: the dc template's base styles, full-height page, hover and focus rules. */
*{box-sizing:border-box}
body{margin:0;background:#eceeed;font-family:Hanken Grotesk,system-ui,sans-serif}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d4dad7;border-radius:6px;border:3px solid transparent;background-clip:content-box}
@keyframes drawerIn{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes popIn{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
html,body{height:100%;margin:0}#app{height:100%}
.hov-0:hover{background:#f1f4f3}
.hov-1:hover{background:#f6f8f7}
.foc-0:focus{background:#f1f4f3}
.hov-2:hover{background:#eaf2ef}
.hov-3:hover{background:#fbeee9}
.foc-1:focus{background:#fff;border-color:#cfe2da}
.hov-4:hover{background:#fafbfa}
.hov-5:hover{background:#fff}
.foc-2:focus{border-color:#2f6b5e}
/* Image frame (ImageSlot in view.js). */
.image-slot{display:inline-block;position:relative;vertical-align:top;font:13px/1.3 system-ui,-apple-system,sans-serif;color:rgba(0,0,0,.55);width:240px;height:160px}
.image-slot-frame{position:absolute;inset:0;overflow:hidden;background:rgba(0,0,0,.04)}
.image-slot-frame img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 50%;-webkit-user-drag:none;user-select:none}
.image-slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;cursor:pointer;user-select:none}
.image-slot-empty svg{opacity:.45}
.image-slot-cap{max-width:90%;font-weight:500;letter-spacing:.01em}
.image-slot-ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed rgba(0,0,0,.25)}